@eui/components 17.0.0-next.3 → 17.0.0-next.5

package/fesm2022/eui-components-eui-popover.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { Directive, Inject, Input, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, NgModule } from '@angular/core';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1 from '@angular/cdk/overlay';
-import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
-import { Subject, BehaviorSubject, Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil, BehaviorSubject, Subscription } from 'rxjs';
+import { takeUntil as takeUntil$1, switchMap, map, distinctUntilChanged } from 'rxjs/operators';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { BaseDirective } from '@eui/components/shared';
+import * as i1 from '@angular/cdk/overlay';
+import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
 import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i3 from '@eui/components/eui-button';
 import { EuiButtonModule } from '@eui/components/eui-button';
 import * as i4 from '@eui/components/eui-icon';
@@ -18,6 +18,77 @@ import { A11yModule } from '@angular/cdk/a11y';
 import * as i6 from '@angular/cdk/observers';
 import { ObserversModule } from '@angular/cdk/observers';
 
+const TOP = new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, 0, 0, ['eui-popover-position', 'eui-popover-position--top']);
+const BOTTOM = new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, 0, 0, ['eui-popover-position', 'eui-popover-position--bottom']);
+const LEFT = new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--left']);
+const RIGHT = new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--right']);
+const getPosition = ({ connectionPair }) => {
+    switch (connectionPair) {
+        case TOP:
+            return 'top';
+        case BOTTOM:
+            return 'bottom';
+        case LEFT:
+            return 'left';
+        case RIGHT:
+            return 'right';
+    }
+};
+
+class EuiPopoverArrowPositionDirective {
+    constructor(renderer, elementRef, document) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.document = document;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.position$.pipe(takeUntil(this.destroy$)).subscribe(([position, originRect]) => {
+            this.renderer.setProperty(this.elementRef.nativeElement, 'style', this.getStyle(position, originRect));
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    getStyle(position, originRect) {
+        const arrowRect = this.elementRef.nativeElement.getBoundingClientRect();
+        if (position === 'left' || position === 'right') {
+            const verticalDiff = Math.floor(arrowRect.top + arrowRect.height / 2) - Math.floor(originRect.top + originRect.height / 2);
+            if (verticalDiff > 0) {
+                return `top: ${originRect.top + originRect.height / 2}px`;
+            }
+            else if (verticalDiff < 0) {
+                return `top: unset; bottom: ${this.document.body.clientHeight - originRect.bottom + originRect.height / 2 - arrowRect.height}px`;
+            }
+        }
+        if (position === 'top' || position === 'bottom') {
+            const horizontalDiff = Math.floor(arrowRect.left + arrowRect.width / 2) - Math.floor(originRect.left + originRect.width / 2);
+            if (horizontalDiff > 0) {
+                return `left: ${originRect.left + originRect.width / 2}px`;
+            }
+            else if (horizontalDiff < 0) {
+                return `left: unset; right: ${this.document.body.clientWidth - originRect.right + originRect.width / 2 - arrowRect.width}px`;
+            }
+        }
+        return '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPopoverArrowPositionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiPopoverArrowPositionDirective, selector: "[euiPopoverArrowPosition]", inputs: { position$: ["euiPopoverArrowPosition", "position$"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPopoverArrowPositionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euiPopoverArrowPosition]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { position$: [{
+                type: Input,
+                args: ['euiPopoverArrowPosition']
+            }] } });
+
 class EuiPopoverComponent extends BaseDirective {
     /** @deprecated This will be removed in next version of eui */
     get isOpen() {
@@ -44,7 +115,6 @@ class EuiPopoverComponent extends BaseDirective {
     set isDismissable(value) {
         this._isDismissable = coerceBooleanProperty(value);
     }
-    /* eslint-enable prettier/prettier */
     constructor(overlay, viewContainerRef, scrollDispatcher) {
         super();
         this.overlay = overlay;
@@ -55,7 +125,9 @@ class EuiPopoverComponent extends BaseDirective {
         this.type = 'default';
         this.width = null;
         this.outsideClick = new EventEmitter();
+        // TODO: fix it for v17 - Output bindings, including aliases, should not be named as standard DOM events
         this.open = new EventEmitter();
+        // TODO: fix it for v17 - Output bindings, including aliases, should not be named as standard DOM events
         this.close = new EventEmitter();
         this.cdkTrapFocusAutoCapture = true;
         this.sizeClass = 'm';
@@ -66,25 +138,21 @@ class EuiPopoverComponent extends BaseDirective {
         this.destroy$ = new Subject();
         this.isOpen$ = new BehaviorSubject(false);
         this.scrollDispatcherSubscription = new Subscription();
-        /* eslint-disable prettier/prettier */
-        this.TOP = new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, 0, 0, ['eui-popover-position', 'eui-popover-position--top']);
-        this.BOTTOM = new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, 0, 0, ['eui-popover-position', 'eui-popover-position--bottom']);
-        this.LEFT = new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'end', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--left']);
-        this.RIGHT = new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'start', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--right']);
-        this.preferredPositons = [this.BOTTOM, this.TOP, this.LEFT, this.RIGHT];
+        this.preferredPositons = [BOTTOM, TOP, LEFT, RIGHT];
+        this.positionStrategyUpdate$ = new Subject();
     }
     ngOnChanges(c) {
         if (this.position === 'top') {
-            this.preferredPositons = [this.TOP, this.BOTTOM, this.LEFT, this.RIGHT];
+            this.preferredPositons = [TOP, BOTTOM, LEFT, RIGHT];
         }
         else if (this.position === 'right') {
-            this.preferredPositons = [this.RIGHT, this.LEFT, this.TOP, this.BOTTOM];
+            this.preferredPositons = [RIGHT, LEFT, TOP, BOTTOM];
         }
         else if (this.position === 'left') {
-            this.preferredPositons = [this.LEFT, this.RIGHT, this.TOP, this.BOTTOM];
+            this.preferredPositons = [LEFT, RIGHT, TOP, BOTTOM];
         }
         else {
-            this.preferredPositons = [this.BOTTOM, this.TOP, this.LEFT, this.RIGHT];
+            this.preferredPositons = [BOTTOM, TOP, LEFT, RIGHT];
         }
         if (c.size) {
             if (c.size.currentValue === 'default') {
@@ -103,6 +171,7 @@ class EuiPopoverComponent extends BaseDirective {
     }
     ngOnInit() {
         this.statesClass = [super.getCssClasses('eui-popover')].join(' ').trim();
+        this.setPositionStream();
     }
     ngAfterViewInit() {
         this.templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);
@@ -130,7 +199,9 @@ class EuiPopoverComponent extends BaseDirective {
         return this.isOpen$.value;
     }
     onContentChange() {
-        this.overlayRef.updatePositionStrategy(this.getPositionStrategy());
+        this.positionStrategy = this.getPositionStrategy();
+        this.positionStrategyUpdate$.next();
+        this.overlayRef.updatePositionStrategy(this.positionStrategy);
     }
     /**
      * Open a popover
@@ -156,9 +227,11 @@ class EuiPopoverComponent extends BaseDirective {
                 width: this.width,
             });
             this.overlayRef.attach(this.templatePortal);
+            this.positionStrategy = positionStrategy;
+            this.positionStrategyUpdate$.next();
             this.overlayRef
                 .outsidePointerEvents()
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntil$1(this.destroy$))
                 .subscribe(() => {
                 if (this.isDismissable) {
                     this.outsideClick.emit();
@@ -205,12 +278,15 @@ class EuiPopoverComponent extends BaseDirective {
             .withFlexibleDimensions(false)
             .withLockedPosition(true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPopoverComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.3", type: EuiPopoverComponent, selector: "eui-popover", inputs: { title: "title", position: "position", size: "size", type: "type", width: "width", isOpen: "isOpen", hasBackDrop: "hasBackDrop", hasCloseButton: "hasCloseButton", isDismissable: "isDismissable" }, outputs: { outsideClick: "outsideClick", open: "open", close: "close" }, viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #templatePortalContent>\n    <ng-container *ngIf=\"cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: true }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: false }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #tmpl let-autoCapture>\n    <div\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"autoCapture\"\n        class=\"eui-popover eui-popover--{{ type }} {{ statesClass }}\"\n        [class.eui-popover--has-custom-width]=\"width\"\n        [ngClass]=\"!width ? 'eui-popover--size-' + sizeClass : ''\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        <div *ngIf=\"title\" class=\"eui-popover__header\">\n            <div class=\"eui-popover__header-title\">{{ title }}</div>\n            <button\n                euiButton\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                class=\"eui-popover__header-close\"\n                aria-label=\"Close Icon Button\"\n                *ngIf=\"hasCloseButton\"\n                (click)=\"closePopover()\">\n                <eui-icon-svg icon=\"eui-close\" fillColor=\"primary-100\" aria-label=\"Close Icon\" class=\"eui-popover__header-close-icon\">\n                </eui-icon-svg>\n            </button>\n        </div>\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;display:none;height:0;position:absolute;width:0}.eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-base-color-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-popover-position--top .eui-popover__arrow,.eui-popover-position--bottom .eui-popover__arrow,.eui-popover-position--left .eui-popover__arrow,.eui-popover-position--right .eui-popover__arrow{display:block}.eui-popover-position--top .eui-popover__arrow,.eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-popover-position--top .eui-popover__arrow-inner,.eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-popover-position--left .eui-popover__arrow,.eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-18px)}.eui-popover-position--left .eui-popover__arrow-inner,.eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-base-color-white);left:2px}.eui-popover{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-2)}.eui-popover__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;justify-content:space-between;padding:var(--eui-base-spacing-xs)}.eui-popover__header-title{font-weight:700}.eui-popover__content{padding:var(--eui-base-spacing-xs)}.eui-popover--primary .eui-popover__header-title{color:var(--eui-base-color-primary-100)}.eui-popover--secondary .eui-popover__header-title{color:var(--eui-base-color-grey-80)}.eui-popover--info .eui-popover__header-title{color:var(--eui-base-color-info-100)}.eui-popover--success .eui-popover__header-title{color:var(--eui-base-color-success-100)}.eui-popover--warning .eui-popover__header-title{color:var(--eui-base-color-warning-100)}.eui-popover--danger .eui-popover__header-title{color:var(--eui-base-color-danger-100)}.eui-popover--accent .eui-popover__header-title{color:var(--eui-base-color-accent-100)}.eui-popover--has-custom-width{width:100%!important}.eui-popover--size-s{max-width:12rem;width:12rem}.eui-popover--size-m{max-width:25rem;width:25rem}.eui-popover--size-l{max-width:35rem;width:35rem}.eui-popover--size-xl{max-width:50rem;width:50rem}.eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-popover--size-auto{max-width:none;width:auto}.eui-popover--flat .eui-popover__header{border-bottom:none;padding-bottom:0}.eui-popover--colored-header{background:none;border:none;border-color:var(--eui-base-color-grey-90)}.eui-popover--colored-header .eui-popover__header{background-color:var(--eui-base-color-grey-90);border:0;color:var(--eui-base-color-white);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius)}.eui-popover--colored-header .eui-popover__header+.eui-popover__content{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.eui-popover--colored-header .eui-popover__header-title{color:var(--eui-base-color-white)}.eui-popover--colored-header .eui-popover__header-close .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-white)}.eui-popover--colored-header .eui-popover__header-close:hover .eui-popover__header-close-icon>svg,.eui-popover--colored-header .eui-popover__header-close:focus .eui-popover__header-close-icon>svg,.eui-popover--colored-header .eui-popover__header-close:active .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-primary)}.eui-popover--colored-header .eui-popover__content{background-color:var(--eui-base-color-white);border-color:inherit;border-radius:var(--eui-base-border-radius);border-style:solid;border-width:2px}.eui-popover--colored-header.eui-popover--left .eui-popover__arrow-inner{right:3px}.eui-popover--colored-header.eui-popover--right .eui-popover__arrow-inner{left:3px}.eui-popover--colored-header.eui-popover--top .eui-popover__arrow-inner{bottom:3px}.eui-popover--colored-header.eui-popover--bottom .eui-popover__arrow-inner,.eui-popover--colored-header .eui-popover__arrow-inner{border:none}.eui-popover--colored-solid{background-color:var(--eui-base-color-grey-90);border-color:var(--eui-base-color-grey-90);border-style:none}.eui-popover--colored-solid .eui-popover__header{border-bottom-color:var(--eui-base-color-grey-5)}.eui-popover--colored-solid .eui-popover__header-title,.eui-popover--colored-solid .eui-popover__content{color:var(--eui-base-color-white)}.eui-popover--colored-solid .eui-popover__header-close .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-white)}.eui-popover--colored-solid .eui-popover__header-close:hover .eui-popover__header-close-icon>svg,.eui-popover--colored-solid .eui-popover__header-close:focus .eui-popover__header-close-icon>svg,.eui-popover--colored-solid .eui-popover__header-close:active .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-primary)}.eui-popover--colored-solid .eui-popover__arrow-inner{border:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    setPositionStream() {
+        this.position$ = this.positionStrategyUpdate$.pipe(switchMap(() => this.positionStrategy.positionChanges), map(getPosition), distinctUntilChanged(), map((position) => [position, this.origin.getBoundingClientRect()]));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPopoverComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiPopoverComponent, selector: "eui-popover", inputs: { title: "title", position: "position", size: "size", type: "type", width: "width", isOpen: "isOpen", hasBackDrop: "hasBackDrop", hasCloseButton: "hasCloseButton", isDismissable: "isDismissable" }, outputs: { outsideClick: "outsideClick", open: "open", close: "close" }, viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #templatePortalContent>\n    <ng-container *ngIf=\"cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: true }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: false }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #tmpl let-autoCapture>\n    <div\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"autoCapture\"\n        class=\"eui-popover eui-popover--{{ type }} {{ statesClass }}\"\n        [class.eui-popover--has-custom-width]=\"width\"\n        [ngClass]=\"!width ? 'eui-popover--size-' + sizeClass : ''\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        <div *ngIf=\"title\" class=\"eui-popover__header\">\n            <div class=\"eui-popover__header-title\">{{ title }}</div>\n            <button\n                euiButton\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                class=\"eui-popover__header-close\"\n                aria-label=\"Close Icon Button\"\n                *ngIf=\"hasCloseButton\"\n                (click)=\"closePopover()\">\n                <eui-icon-svg icon=\"eui-close\" fillColor=\"primary-100\" aria-label=\"Close Icon\" class=\"eui-popover__header-close-icon\">\n                </eui-icon-svg>\n            </button>\n        </div>\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;display:none;height:0;position:absolute;width:0}.eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-base-color-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-popover-position--top .eui-popover__arrow,.eui-popover-position--bottom .eui-popover__arrow,.eui-popover-position--left .eui-popover__arrow,.eui-popover-position--right .eui-popover__arrow{display:block}.eui-popover-position--top .eui-popover__arrow,.eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-popover-position--top .eui-popover__arrow-inner,.eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-popover-position--left .eui-popover__arrow,.eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-8px)}.eui-popover-position--left .eui-popover__arrow-inner,.eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-base-color-white);left:2px}.eui-popover{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-2)}.eui-popover__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;justify-content:space-between;padding:var(--eui-base-spacing-xs)}.eui-popover__header-title{font-weight:700}.eui-popover__content{padding:var(--eui-base-spacing-xs)}.eui-popover--primary .eui-popover__header-title{color:var(--eui-base-color-primary-100)}.eui-popover--secondary .eui-popover__header-title{color:var(--eui-base-color-grey-80)}.eui-popover--info .eui-popover__header-title{color:var(--eui-base-color-info-100)}.eui-popover--success .eui-popover__header-title{color:var(--eui-base-color-success-100)}.eui-popover--warning .eui-popover__header-title{color:var(--eui-base-color-warning-100)}.eui-popover--danger .eui-popover__header-title{color:var(--eui-base-color-danger-100)}.eui-popover--accent .eui-popover__header-title{color:var(--eui-base-color-accent-100)}.eui-popover--has-custom-width{width:100%!important}.eui-popover--size-s{max-width:12rem;width:12rem}.eui-popover--size-m{max-width:25rem;width:25rem}.eui-popover--size-l{max-width:35rem;width:35rem}.eui-popover--size-xl{max-width:50rem;width:50rem}.eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-popover--size-auto{max-width:none;width:auto}.eui-popover--flat .eui-popover__header{border-bottom:none;padding-bottom:0}.eui-popover--colored-header{background:none;border:none;border-color:var(--eui-base-color-grey-90)}.eui-popover--colored-header .eui-popover__header{background-color:var(--eui-base-color-grey-90);border:0;color:var(--eui-base-color-white);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius)}.eui-popover--colored-header .eui-popover__header+.eui-popover__content{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.eui-popover--colored-header .eui-popover__header-title{color:var(--eui-base-color-white)}.eui-popover--colored-header .eui-popover__header-close .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-white)}.eui-popover--colored-header .eui-popover__header-close:hover .eui-popover__header-close-icon>svg,.eui-popover--colored-header .eui-popover__header-close:focus .eui-popover__header-close-icon>svg,.eui-popover--colored-header .eui-popover__header-close:active .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-primary)}.eui-popover--colored-header .eui-popover__content{background-color:var(--eui-base-color-white);border-color:inherit;border-radius:var(--eui-base-border-radius);border-style:solid;border-width:2px}.eui-popover--colored-header.eui-popover--left .eui-popover__arrow-inner{right:3px}.eui-popover--colored-header.eui-popover--right .eui-popover__arrow-inner{left:3px}.eui-popover--colored-header.eui-popover--top .eui-popover__arrow-inner{bottom:3px}.eui-popover--colored-header.eui-popover--bottom .eui-popover__arrow-inner,.eui-popover--colored-header .eui-popover__arrow-inner{border:none}.eui-popover--colored-solid{background-color:var(--eui-base-color-grey-90);border-color:var(--eui-base-color-grey-90);border-style:none}.eui-popover--colored-solid .eui-popover__header{border-bottom-color:var(--eui-base-color-grey-5)}.eui-popover--colored-solid .eui-popover__header-title,.eui-popover--colored-solid .eui-popover__content{color:var(--eui-base-color-white)}.eui-popover--colored-solid .eui-popover__header-close .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-white)}.eui-popover--colored-solid .eui-popover__header-close:hover .eui-popover__header-close-icon>svg,.eui-popover--colored-solid .eui-popover__header-close:focus .eui-popover__header-close-icon>svg,.eui-popover--colored-solid .eui-popover__header-close:active .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-primary)}.eui-popover--colored-solid .eui-popover__arrow-inner{border:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: EuiPopoverArrowPositionDirective, selector: "[euiPopoverArrowPosition]", inputs: ["euiPopoverArrowPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #templatePortalContent>\n    <ng-container *ngIf=\"cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: true }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: false }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #tmpl let-autoCapture>\n    <div\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"autoCapture\"\n        class=\"eui-popover eui-popover--{{ type }} {{ statesClass }}\"\n        [class.eui-popover--has-custom-width]=\"width\"\n        [ngClass]=\"!width ? 'eui-popover--size-' + sizeClass : ''\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        <div *ngIf=\"title\" class=\"eui-popover__header\">\n            <div class=\"eui-popover__header-title\">{{ title }}</div>\n            <button\n                euiButton\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                class=\"eui-popover__header-close\"\n                aria-label=\"Close Icon Button\"\n                *ngIf=\"hasCloseButton\"\n                (click)=\"closePopover()\">\n                <eui-icon-svg icon=\"eui-close\" fillColor=\"primary-100\" aria-label=\"Close Icon\" class=\"eui-popover__header-close-icon\">\n                </eui-icon-svg>\n            </button>\n        </div>\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;display:none;height:0;position:absolute;width:0}.eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-base-color-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-popover-position--top .eui-popover__arrow,.eui-popover-position--bottom .eui-popover__arrow,.eui-popover-position--left .eui-popover__arrow,.eui-popover-position--right .eui-popover__arrow{display:block}.eui-popover-position--top .eui-popover__arrow,.eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-popover-position--top .eui-popover__arrow-inner,.eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-popover-position--left .eui-popover__arrow,.eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-18px)}.eui-popover-position--left .eui-popover__arrow-inner,.eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-base-color-white);left:2px}.eui-popover{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-2)}.eui-popover__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;justify-content:space-between;padding:var(--eui-base-spacing-xs)}.eui-popover__header-title{font-weight:700}.eui-popover__content{padding:var(--eui-base-spacing-xs)}.eui-popover--primary .eui-popover__header-title{color:var(--eui-base-color-primary-100)}.eui-popover--secondary .eui-popover__header-title{color:var(--eui-base-color-grey-80)}.eui-popover--info .eui-popover__header-title{color:var(--eui-base-color-info-100)}.eui-popover--success .eui-popover__header-title{color:var(--eui-base-color-success-100)}.eui-popover--warning .eui-popover__header-title{color:var(--eui-base-color-warning-100)}.eui-popover--danger .eui-popover__header-title{color:var(--eui-base-color-danger-100)}.eui-popover--accent .eui-popover__header-title{color:var(--eui-base-color-accent-100)}.eui-popover--has-custom-width{width:100%!important}.eui-popover--size-s{max-width:12rem;width:12rem}.eui-popover--size-m{max-width:25rem;width:25rem}.eui-popover--size-l{max-width:35rem;width:35rem}.eui-popover--size-xl{max-width:50rem;width:50rem}.eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-popover--size-auto{max-width:none;width:auto}.eui-popover--flat .eui-popover__header{border-bottom:none;padding-bottom:0}.eui-popover--colored-header{background:none;border:none;border-color:var(--eui-base-color-grey-90)}.eui-popover--colored-header .eui-popover__header{background-color:var(--eui-base-color-grey-90);border:0;color:var(--eui-base-color-white);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius)}.eui-popover--colored-header .eui-popover__header+.eui-popover__content{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.eui-popover--colored-header .eui-popover__header-title{color:var(--eui-base-color-white)}.eui-popover--colored-header .eui-popover__header-close .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-white)}.eui-popover--colored-header .eui-popover__header-close:hover .eui-popover__header-close-icon>svg,.eui-popover--colored-header .eui-popover__header-close:focus .eui-popover__header-close-icon>svg,.eui-popover--colored-header .eui-popover__header-close:active .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-primary)}.eui-popover--colored-header .eui-popover__content{background-color:var(--eui-base-color-white);border-color:inherit;border-radius:var(--eui-base-border-radius);border-style:solid;border-width:2px}.eui-popover--colored-header.eui-popover--left .eui-popover__arrow-inner{right:3px}.eui-popover--colored-header.eui-popover--right .eui-popover__arrow-inner{left:3px}.eui-popover--colored-header.eui-popover--top .eui-popover__arrow-inner{bottom:3px}.eui-popover--colored-header.eui-popover--bottom .eui-popover__arrow-inner,.eui-popover--colored-header .eui-popover__arrow-inner{border:none}.eui-popover--colored-solid{background-color:var(--eui-base-color-grey-90);border-color:var(--eui-base-color-grey-90);border-style:none}.eui-popover--colored-solid .eui-popover__header{border-bottom-color:var(--eui-base-color-grey-5)}.eui-popover--colored-solid .eui-popover__header-title,.eui-popover--colored-solid .eui-popover__content{color:var(--eui-base-color-white)}.eui-popover--colored-solid .eui-popover__header-close .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-white)}.eui-popover--colored-solid .eui-popover__header-close:hover .eui-popover__header-close-icon>svg,.eui-popover--colored-solid .eui-popover__header-close:focus .eui-popover__header-close-icon>svg,.eui-popover--colored-solid .eui-popover__header-close:active .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-primary)}.eui-popover--colored-solid .eui-popover__arrow-inner{border:none}\n"] }]
+            args: [{ selector: 'eui-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #templatePortalContent>\n    <ng-container *ngIf=\"cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: true }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: false }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #tmpl let-autoCapture>\n    <div\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"autoCapture\"\n        class=\"eui-popover eui-popover--{{ type }} {{ statesClass }}\"\n        [class.eui-popover--has-custom-width]=\"width\"\n        [ngClass]=\"!width ? 'eui-popover--size-' + sizeClass : ''\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        <div *ngIf=\"title\" class=\"eui-popover__header\">\n            <div class=\"eui-popover__header-title\">{{ title }}</div>\n            <button\n                euiButton\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                class=\"eui-popover__header-close\"\n                aria-label=\"Close Icon Button\"\n                *ngIf=\"hasCloseButton\"\n                (click)=\"closePopover()\">\n                <eui-icon-svg icon=\"eui-close\" fillColor=\"primary-100\" aria-label=\"Close Icon\" class=\"eui-popover__header-close-icon\">\n                </eui-icon-svg>\n            </button>\n        </div>\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;display:none;height:0;position:absolute;width:0}.eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-base-color-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-popover-position--top .eui-popover__arrow,.eui-popover-position--bottom .eui-popover__arrow,.eui-popover-position--left .eui-popover__arrow,.eui-popover-position--right .eui-popover__arrow{display:block}.eui-popover-position--top .eui-popover__arrow,.eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-popover-position--top .eui-popover__arrow-inner,.eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-popover-position--left .eui-popover__arrow,.eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-8px)}.eui-popover-position--left .eui-popover__arrow-inner,.eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-base-color-white);left:2px}.eui-popover{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-base-shadow-2)}.eui-popover__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;justify-content:space-between;padding:var(--eui-base-spacing-xs)}.eui-popover__header-title{font-weight:700}.eui-popover__content{padding:var(--eui-base-spacing-xs)}.eui-popover--primary .eui-popover__header-title{color:var(--eui-base-color-primary-100)}.eui-popover--secondary .eui-popover__header-title{color:var(--eui-base-color-grey-80)}.eui-popover--info .eui-popover__header-title{color:var(--eui-base-color-info-100)}.eui-popover--success .eui-popover__header-title{color:var(--eui-base-color-success-100)}.eui-popover--warning .eui-popover__header-title{color:var(--eui-base-color-warning-100)}.eui-popover--danger .eui-popover__header-title{color:var(--eui-base-color-danger-100)}.eui-popover--accent .eui-popover__header-title{color:var(--eui-base-color-accent-100)}.eui-popover--has-custom-width{width:100%!important}.eui-popover--size-s{max-width:12rem;width:12rem}.eui-popover--size-m{max-width:25rem;width:25rem}.eui-popover--size-l{max-width:35rem;width:35rem}.eui-popover--size-xl{max-width:50rem;width:50rem}.eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-popover--size-auto{max-width:none;width:auto}.eui-popover--flat .eui-popover__header{border-bottom:none;padding-bottom:0}.eui-popover--colored-header{background:none;border:none;border-color:var(--eui-base-color-grey-90)}.eui-popover--colored-header .eui-popover__header{background-color:var(--eui-base-color-grey-90);border:0;color:var(--eui-base-color-white);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius)}.eui-popover--colored-header .eui-popover__header+.eui-popover__content{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.eui-popover--colored-header .eui-popover__header-title{color:var(--eui-base-color-white)}.eui-popover--colored-header .eui-popover__header-close .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-white)}.eui-popover--colored-header .eui-popover__header-close:hover .eui-popover__header-close-icon>svg,.eui-popover--colored-header .eui-popover__header-close:focus .eui-popover__header-close-icon>svg,.eui-popover--colored-header .eui-popover__header-close:active .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-primary)}.eui-popover--colored-header .eui-popover__content{background-color:var(--eui-base-color-white);border-color:inherit;border-radius:var(--eui-base-border-radius);border-style:solid;border-width:2px}.eui-popover--colored-header.eui-popover--left .eui-popover__arrow-inner{right:3px}.eui-popover--colored-header.eui-popover--right .eui-popover__arrow-inner{left:3px}.eui-popover--colored-header.eui-popover--top .eui-popover__arrow-inner{bottom:3px}.eui-popover--colored-header.eui-popover--bottom .eui-popover__arrow-inner,.eui-popover--colored-header .eui-popover__arrow-inner{border:none}.eui-popover--colored-solid{background-color:var(--eui-base-color-grey-90);border-color:var(--eui-base-color-grey-90);border-style:none}.eui-popover--colored-solid .eui-popover__header{border-bottom-color:var(--eui-base-color-grey-5)}.eui-popover--colored-solid .eui-popover__header-title,.eui-popover--colored-solid .eui-popover__content{color:var(--eui-base-color-white)}.eui-popover--colored-solid .eui-popover__header-close .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-white)}.eui-popover--colored-solid .eui-popover__header-close:hover .eui-popover__header-close-icon>svg,.eui-popover--colored-solid .eui-popover__header-close:focus .eui-popover__header-close-icon>svg,.eui-popover--colored-solid .eui-popover__header-close:active .eui-popover__header-close-icon>svg{fill:var(--eui-base-color-primary)}.eui-popover--colored-solid .eui-popover__arrow-inner{border:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i1.ScrollDispatcher }]; }, propDecorators: { title: [{
                 type: Input
             }], position: [{
@@ -241,15 +317,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3",
             }] } });
 
 class EuiPopoverModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPopoverModule, declarations: [EuiPopoverComponent], imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, A11yModule, ObserversModule], exports: [EuiPopoverComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPopoverModule, imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, A11yModule, ObserversModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPopoverModule, declarations: [EuiPopoverComponent, EuiPopoverArrowPositionDirective], imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, A11yModule, ObserversModule], exports: [EuiPopoverComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPopoverModule, imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, A11yModule, ObserversModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, A11yModule, ObserversModule],
-                    declarations: [EuiPopoverComponent],
+                    declarations: [EuiPopoverComponent, EuiPopoverArrowPositionDirective],
                     exports: [EuiPopoverComponent],
                 }]
         }] });

package/fesm2022/eui-components-eui-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-components-eui-popover.mjs","sources":["../../eui-popover/eui-popover.component.ts","../../eui-popover/eui-popover.component.html","../../eui-popover/eui-popover.module.ts","../../eui-popover/eui-components-eui-popover.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n    Input,\n    ViewChild,\n    TemplateRef,\n    ViewContainerRef,\n    AfterViewInit,\n    OnDestroy,\n    OnInit,\n    Output,\n    EventEmitter,\n    ElementRef,\n    OnChanges,\n    SimpleChanges,\n} from '@angular/core';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n    Overlay,\n    OverlayRef,\n    ConnectionPositionPair,\n    FlexibleConnectedPositionStrategyOrigin,\n    ScrollDispatcher,\n    CdkScrollable,\n    PositionStrategy,\n} from '@angular/cdk/overlay';\nimport { BehaviorSubject, Subject, Subscription } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\nimport { BaseDirective } from '@eui/components/shared';\n\n@Component({\n    selector: 'eui-popover',\n    templateUrl: './eui-popover.component.html',\n    styleUrls: ['./styles/_index.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class EuiPopoverComponent extends BaseDirective implements AfterViewInit, OnDestroy, OnInit, OnChanges {\n    @Input() title: string;\n    @Input() position: 'top' | 'right' | 'bottom' | 'left' = 'bottom';\n    @Input() size: 'default' | 'small' | 'large' | 'auto' | 's' | 'm' | 'l' | 'xl' | string = 'default';\n    @Input() type: 'default' | 'flat' | 'colored-header' | 'colored-solid' = 'default';\n    @Input() width: string = null;\n\n    @Output() outsideClick = new EventEmitter();\n    @Output() open = new EventEmitter();\n    @Output() close = new EventEmitter();\n\n    public statesClass: string;\n    public cdkTrapFocusAutoCapture = true;\n    public sizeClass = 'm';\n\n    @ViewChild('templatePortalContent') templatePortalContent: TemplateRef<unknown>;\n\n    /** @deprecated This will be removed in next version of eui */\n    @Input()\n    get isOpen(): boolean {\n        return this._isOpen;\n    }\n    set isOpen(value: BooleanInput) {\n        this._isOpen = coerceBooleanProperty(value);\n    }\n    private _isOpen = false;\n    @Input()\n    get hasBackDrop(): boolean {\n        return this._hasBackDrop;\n    }\n    set hasBackDrop(value: BooleanInput) {\n        this._hasBackDrop = coerceBooleanProperty(value);\n    }\n    private _hasBackDrop = false;\n    @Input()\n    get hasCloseButton(): boolean {\n        return this._hasCloseButton;\n    }\n    set hasCloseButton(value: BooleanInput) {\n        this._hasCloseButton = coerceBooleanProperty(value);\n    }\n    private _hasCloseButton = true;\n    @Input()\n    get isDismissable(): boolean {\n        return this._isDismissable;\n    }\n    set isDismissable(value: BooleanInput) {\n        this._isDismissable = coerceBooleanProperty(value);\n    }\n    private _isDismissable = true;\n\n    private templatePortal: TemplatePortal<any>;\n    private overlayRef: OverlayRef;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isOpen$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    private scrollDispatcherSubscription = new Subscription();\n    private origin: ElementRef;\n\n    /* eslint-disable prettier/prettier */\n    private TOP = new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, 0, 0, ['eui-popover-position', 'eui-popover-position--top']);\n    private BOTTOM = new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, 0, 0, ['eui-popover-position', 'eui-popover-position--bottom']);\n    private LEFT = new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'end', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--left']);\n    private RIGHT = new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'start', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--right']);\n    private preferredPositons: ConnectionPositionPair[] = [this.BOTTOM, this.TOP, this.LEFT, this.RIGHT];\n    /* eslint-enable prettier/prettier */\n\n    constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef, private scrollDispatcher: ScrollDispatcher) {\n        super();\n    }\n\n    ngOnChanges(c: SimpleChanges): void {\n        if (this.position === 'top') {\n            this.preferredPositons = [this.TOP, this.BOTTOM, this.LEFT, this.RIGHT];\n        } else if (this.position === 'right') {\n            this.preferredPositons = [this.RIGHT, this.LEFT, this.TOP, this.BOTTOM];\n        } else if (this.position === 'left') {\n            this.preferredPositons = [this.LEFT, this.RIGHT, this.TOP, this.BOTTOM];\n        } else {\n            this.preferredPositons = [this.BOTTOM, this.TOP, this.LEFT, this.RIGHT];\n        }\n\n        if (c.size) {\n            if (c.size.currentValue === 'default') {\n                this.sizeClass = 'm';\n            } else if (c.size.currentValue === 'small') {\n                this.sizeClass = 's';\n            } else if (c.size.currentValue === 'large') {\n                this.sizeClass = 'l';\n            } else {\n                this.sizeClass = c.size.currentValue;\n            }\n        }\n    }\n\n    ngOnInit(): void {\n        this.statesClass = [super.getCssClasses('eui-popover')].join(' ').trim();\n    }\n\n    ngAfterViewInit(): void {\n        this.templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        this.scrollDispatcherSubscription.unsubscribe();\n        this.overlayRef?.dispose();\n        this.overlayRef = null;\n    }\n\n    /**\n     * Whether the eui-popover is open.\n     *\n     * @usageNotes\n     * ```html\n     * <eui-popover #popover>\n     *      <my-component *ngIf=\"popover.isPopoverOpen\"></my-component>\n     * </eui-popover>\n     * ```\n     * @returns A boolean with value `true` when open, otherwise `false`.\n     */\n    // TODO: In next version, remove isOpen @Input which is not used, deprecated this isPopoverOpen and create isOpen instead\n    get isPopoverOpen(): boolean {\n        return this.isOpen$.value;\n    }\n\n    public onContentChange(): void {\n        this.overlayRef.updatePositionStrategy(this.getPositionStrategy());\n    }\n\n    /**\n     * Open a popover\n     *\n     * @param origin Origin of the popover position\n     */\n    public openPopover(origin: ElementRef): void {\n        if (!this.isPopoverOpen) {\n            this.cdkTrapFocusAutoCapture = true;\n            this.scrollDispatcherSubscription = this.scrollDispatcher.ancestorScrolled(origin).subscribe((event: CdkScrollable) => {\n                const scrollableParent = event ? event.getElementRef().nativeElement : document.querySelector('body');\n                if (!this.isVisible(origin as unknown as HTMLElement, scrollableParent)) {\n                    this.closePopover();\n                }\n            });\n\n            this.origin = origin;\n            const positionStrategy = this.getPositionStrategy();\n\n            const scrollStrategy = this.overlay.scrollStrategies.reposition({ scrollThrottle: 10 });\n\n            this.overlayRef = this.overlay.create({\n                positionStrategy,\n                scrollStrategy,\n                disposeOnNavigation: true,\n                width: this.width,\n            });\n            this.overlayRef.attach(this.templatePortal);\n\n            this.overlayRef\n                .outsidePointerEvents()\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => {\n                    if (this.isDismissable) {\n                        this.outsideClick.emit();\n                        this.closePopover();\n                    }\n                });\n\n            this.isOpen$.next(true);\n            this.open.emit();\n        }\n    }\n\n    /**\n     * Close a popover\n     */\n    public closePopover(): void {\n        this.scrollDispatcherSubscription.unsubscribe();\n        this.overlayRef.dispose();\n        this.overlayRef = null;\n        this.isOpen$.next(false);\n        this.close.emit();\n    }\n\n    /**\n     * Reacts on the Esc keydown event to close the popup. Can be used as alternative to the close icon button,\n     * or as the main way to close the popup when hasCloseButton is false\n     *\n     * @param event The key event pressed\n     */\n    public onKeyDown(event: KeyboardEvent): void {\n        if (event.key === 'Escape') {\n            this.closePopover();\n        }\n    }\n\n    private isVisible(origin: HTMLElement, scrollableParent: HTMLElement): boolean {\n        const originY = origin.getBoundingClientRect().y;\n        const scrollableParentY = Math.abs(scrollableParent.getBoundingClientRect().y);\n        const scrollableParentHeight = scrollableParent.getBoundingClientRect().height - 50;\n\n        return (\n            (originY > 0 && originY < scrollableParentHeight) ||\n            (originY - scrollableParentY > 0 && originY < scrollableParentY + scrollableParentHeight)\n        );\n    }\n\n    private getPositionStrategy(): PositionStrategy {\n        return this.overlay\n            .position()\n            .flexibleConnectedTo(this.origin as FlexibleConnectedPositionStrategyOrigin)\n            .withPositions(this.preferredPositons)\n            .withFlexibleDimensions(false)\n            .withLockedPosition(true);\n    }\n}\n","<ng-template #templatePortalContent>\n    <ng-container *ngIf=\"cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: true }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: false }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #tmpl let-autoCapture>\n    <div\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"autoCapture\"\n        class=\"eui-popover eui-popover--{{ type }} {{ statesClass }}\"\n        [class.eui-popover--has-custom-width]=\"width\"\n        [ngClass]=\"!width ? 'eui-popover--size-' + sizeClass : ''\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        <div *ngIf=\"title\" class=\"eui-popover__header\">\n            <div class=\"eui-popover__header-title\">{{ title }}</div>\n            <button\n                euiButton\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                class=\"eui-popover__header-close\"\n                aria-label=\"Close Icon Button\"\n                *ngIf=\"hasCloseButton\"\n                (click)=\"closePopover()\">\n                <eui-icon-svg icon=\"eui-close\" fillColor=\"primary-100\" aria-label=\"Close Icon\" class=\"eui-popover__header-close-icon\">\n                </eui-icon-svg>\n            </button>\n        </div>\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { ObserversModule } from '@angular/cdk/observers';\n\nimport { EuiButtonModule } from '@eui/components/eui-button';\nimport { EuiIconModule } from '@eui/components/eui-icon';\n\nimport { EuiPopoverComponent } from './eui-popover.component';\n\n@NgModule({\n    imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, A11yModule, ObserversModule],\n    declarations: [EuiPopoverComponent],\n    exports: [EuiPopoverComponent],\n})\nexport class EuiPopoverModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAwCM,MAAO,mBAAoB,SAAQ,aAAa,CAAA;;AAkBlD,IAAA,IACI,MAAM,GAAA;QACN,OAAO,IAAI,CAAC,OAAO,CAAC;KACvB;IACD,IAAI,MAAM,CAAC,KAAmB,EAAA;AAC1B,QAAA,IAAI,CAAC,OAAO,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KAC/C;AAED,IAAA,IACI,WAAW,GAAA;QACX,OAAO,IAAI,CAAC,YAAY,CAAC;KAC5B;IACD,IAAI,WAAW,CAAC,KAAmB,EAAA;AAC/B,QAAA,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACpD;AAED,IAAA,IACI,cAAc,GAAA;QACd,OAAO,IAAI,CAAC,eAAe,CAAC;KAC/B;IACD,IAAI,cAAc,CAAC,KAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACvD;AAED,IAAA,IACI,aAAa,GAAA;QACb,OAAO,IAAI,CAAC,cAAc,CAAC;KAC9B;IACD,IAAI,aAAa,CAAC,KAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACtD;;AAkBD,IAAA,WAAA,CAAoB,OAAgB,EAAU,gBAAkC,EAAU,gBAAkC,EAAA;AACxH,QAAA,KAAK,EAAE,CAAC;QADQ,IAAO,CAAA,OAAA,GAAP,OAAO,CAAS;QAAU,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAkB;QAAU,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAkB;QAhEnH,IAAQ,CAAA,QAAA,GAAwC,QAAQ,CAAC;QACzD,IAAI,CAAA,IAAA,GAA6E,SAAS,CAAC;QAC3F,IAAI,CAAA,IAAA,GAA4D,SAAS,CAAC;QAC1E,IAAK,CAAA,KAAA,GAAW,IAAI,CAAC;AAEpB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;AAClC,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;AAC1B,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,YAAY,EAAE,CAAC;QAG9B,IAAuB,CAAA,uBAAA,GAAG,IAAI,CAAC;QAC/B,IAAS,CAAA,SAAA,GAAG,GAAG,CAAC;QAYf,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;QAQhB,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;QAQrB,IAAe,CAAA,eAAA,GAAG,IAAI,CAAC;QAQvB,IAAc,CAAA,cAAA,GAAG,IAAI,CAAC;AAItB,QAAA,IAAA,CAAA,QAAQ,GAAqB,IAAI,OAAO,EAAW,CAAC;AACpD,QAAA,IAAA,CAAA,OAAO,GAA6B,IAAI,eAAe,CAAU,KAAK,CAAC,CAAC;AACxE,QAAA,IAAA,CAAA,4BAA4B,GAAG,IAAI,YAAY,EAAE,CAAC;;AAIlD,QAAA,IAAA,CAAA,GAAG,GAAG,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,2BAA2B,CAAC,CAAC,CAAC;AACjL,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,8BAA8B,CAAC,CAAC,CAAC;AACvL,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,4BAA4B,CAAC,CAAC,CAAC;AAClL,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,6BAA6B,CAAC,CAAC,CAAC;AACpL,QAAA,IAAA,CAAA,iBAAiB,GAA6B,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KAKpG;AAED,IAAA,WAAW,CAAC,CAAgB,EAAA;AACxB,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;YACzB,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3E,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE;YAClC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AAC3E,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,EAAE;YACjC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AAC3E,SAAA;AAAM,aAAA;YACH,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3E,SAAA;QAED,IAAI,CAAC,CAAC,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;AACnC,gBAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;AACxB,aAAA;AAAM,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,EAAE;AACxC,gBAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;AACxB,aAAA;AAAM,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,EAAE;AACxC,gBAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;AACxB,aAAA;AAAM,iBAAA;gBACH,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;AACxC,aAAA;AACJ,SAAA;KACJ;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;KAC5E;IAED,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC/F;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;AAC5B,QAAA,IAAI,CAAC,4BAA4B,CAAC,WAAW,EAAE,CAAC;AAChD,QAAA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;AAC3B,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B;AAED;;;;;;;;;;AAUG;;AAEH,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;KAC7B;IAEM,eAAe,GAAA;QAClB,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACtE;AAED;;;;AAIG;AACI,IAAA,WAAW,CAAC,MAAkB,EAAA;AACjC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACrB,YAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;AACpC,YAAA,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,KAAoB,KAAI;gBAClH,MAAM,gBAAgB,GAAG,KAAK,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACtG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAgC,EAAE,gBAAgB,CAAC,EAAE;oBACrE,IAAI,CAAC,YAAY,EAAE,CAAC;AACvB,iBAAA;AACL,aAAC,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AACrB,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAEpD,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;YAExF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;gBAClC,gBAAgB;gBAChB,cAAc;AACd,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,KAAK,EAAE,IAAI,CAAC,KAAK;AACpB,aAAA,CAAC,CAAC;YACH,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAE5C,YAAA,IAAI,CAAC,UAAU;AACV,iBAAA,oBAAoB,EAAE;AACtB,iBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;iBAC9B,SAAS,CAAC,MAAK;gBACZ,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;oBACzB,IAAI,CAAC,YAAY,EAAE,CAAC;AACvB,iBAAA;AACL,aAAC,CAAC,CAAC;AAEP,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACxB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AACpB,SAAA;KACJ;AAED;;AAEG;IACI,YAAY,GAAA;AACf,QAAA,IAAI,CAAC,4BAA4B,CAAC,WAAW,EAAE,CAAC;AAChD,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACzB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;AAED;;;;;AAKG;AACI,IAAA,SAAS,CAAC,KAAoB,EAAA;AACjC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YACxB,IAAI,CAAC,YAAY,EAAE,CAAC;AACvB,SAAA;KACJ;IAEO,SAAS,CAAC,MAAmB,EAAE,gBAA6B,EAAA;QAChE,MAAM,OAAO,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC;AACjD,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/E,MAAM,sBAAsB,GAAG,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,EAAE,CAAC;QAEpF,QACI,CAAC,OAAO,GAAG,CAAC,IAAI,OAAO,GAAG,sBAAsB;AAChD,aAAC,OAAO,GAAG,iBAAiB,GAAG,CAAC,IAAI,OAAO,GAAG,iBAAiB,GAAG,sBAAsB,CAAC,EAC3F;KACL;IAEO,mBAAmB,GAAA;QACvB,OAAO,IAAI,CAAC,OAAO;AACd,aAAA,QAAQ,EAAE;AACV,aAAA,mBAAmB,CAAC,IAAI,CAAC,MAAiD,CAAC;AAC3E,aAAA,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC;aACrC,sBAAsB,CAAC,KAAK,CAAC;aAC7B,kBAAkB,CAAC,IAAI,CAAC,CAAC;KACjC;wIAtNQ,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,OAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,IAAA,EAAA,mBAAmB,sfCxChC,+tDAyCA,EAAA,MAAA,EAAA,CAAA,m3LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,eAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,WAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;kGDDa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,mBAGN,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,+tDAAA,EAAA,MAAA,EAAA,CAAA,m3LAAA,CAAA,EAAA,CAAA;4JAG5B,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAEI,YAAY,EAAA,CAAA;sBAArB,MAAM;gBACG,IAAI,EAAA,CAAA;sBAAb,MAAM;gBACG,KAAK,EAAA,CAAA;sBAAd,MAAM;gBAM6B,qBAAqB,EAAA,CAAA;sBAAxD,SAAS;uBAAC,uBAAuB,CAAA;gBAI9B,MAAM,EAAA,CAAA;sBADT,KAAK;gBASF,WAAW,EAAA,CAAA;sBADd,KAAK;gBASF,cAAc,EAAA,CAAA;sBADjB,KAAK;gBASF,aAAa,EAAA,CAAA;sBADhB,KAAK;;;MElEG,gBAAgB,CAAA;wIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,EAHV,YAAA,EAAA,CAAA,mBAAmB,CADxB,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,aAExF,mBAAmB,CAAA,EAAA,CAAA,CAAA,EAAA;yIAEpB,gBAAgB,EAAA,OAAA,EAAA,CAJf,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,CAAA,EAAA,CAAA,CAAA,EAAA;;kGAIzF,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,CAAC;oBACnG,YAAY,EAAE,CAAC,mBAAmB,CAAC;oBACnC,OAAO,EAAE,CAAC,mBAAmB,CAAC;AACjC,iBAAA,CAAA;;;ACfD;;AAEG;;;;"}
+{"version":3,"file":"eui-components-eui-popover.mjs","sources":["../../eui-popover/models/eui-popover-position.model.ts","../../eui-popover/directives/eui-popover-arrow-position.directive.ts","../../eui-popover/eui-popover.component.ts","../../eui-popover/eui-popover.component.html","../../eui-popover/eui-popover.module.ts","../../eui-popover/eui-components-eui-popover.ts"],"sourcesContent":["import { ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';\n\nexport type EuiPopoverPosition = 'top' | 'right' | 'bottom' | 'left';\n\nexport const TOP = new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, 0, 0, ['eui-popover-position', 'eui-popover-position--top']);\nexport const BOTTOM = new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, 0, 0, ['eui-popover-position', 'eui-popover-position--bottom']);\nexport const LEFT = new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--left']);\nexport const RIGHT = new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--right']);\n\nexport const getPosition = ({ connectionPair }: ConnectedOverlayPositionChange): EuiPopoverPosition => {\n    switch (connectionPair) {\n        case TOP:\n            return 'top';\n        case BOTTOM:\n            return 'bottom';\n        case LEFT:\n            return 'left';\n        case RIGHT:\n            return 'right';\n    }\n};\n","import { DOCUMENT } from '@angular/common';\nimport { Directive, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { Observable, Subject, takeUntil } from 'rxjs';\n\nimport { EuiPopoverPosition } from '../models/eui-popover-position.model';\n\n@Directive({\n    selector: '[euiPopoverArrowPosition]',\n})\nexport class EuiPopoverArrowPositionDirective implements OnInit, OnDestroy {\n    @Input('euiPopoverArrowPosition')\n    public position$: Observable<[EuiPopoverPosition, DOMRect]>;\n\n    private destroy$: Subject<void> = new Subject();\n\n    constructor(\n        private renderer: Renderer2,\n        private elementRef: ElementRef,\n        @Inject(DOCUMENT) private document: Document\n    ) {}\n\n    ngOnInit(): void {\n        this.position$.pipe(takeUntil(this.destroy$)).subscribe(([position, originRect]) => {\n            this.renderer.setProperty(this.elementRef.nativeElement, 'style', this.getStyle(position, originRect));\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    private getStyle(position: EuiPopoverPosition, originRect: DOMRect): string {\n        const arrowRect: DOMRect = this.elementRef.nativeElement.getBoundingClientRect();\n\n        if (position === 'left' || position === 'right') {\n            const verticalDiff: number =\n                Math.floor(arrowRect.top + arrowRect.height / 2) - Math.floor(originRect.top + originRect.height / 2);\n\n            if (verticalDiff > 0) {\n                return `top: ${originRect.top + originRect.height / 2}px`;\n            } else if (verticalDiff < 0) {\n                return `top: unset; bottom: ${\n                    this.document.body.clientHeight - originRect.bottom + originRect.height / 2 - arrowRect.height\n                }px`;\n            }\n        }\n        if (position === 'top' || position === 'bottom') {\n            const horizontalDiff: number =\n                Math.floor(arrowRect.left + arrowRect.width / 2) - Math.floor(originRect.left + originRect.width / 2);\n\n            if (horizontalDiff > 0) {\n                return `left: ${originRect.left + originRect.width / 2}px`;\n            } else if (horizontalDiff < 0) {\n                return `left: unset; right: ${\n                    this.document.body.clientWidth - originRect.right + originRect.width / 2 - arrowRect.width\n                }px`;\n            }\n        }\n        return '';\n    }\n}\n","import {\n    Component,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n    Input,\n    ViewChild,\n    TemplateRef,\n    ViewContainerRef,\n    AfterViewInit,\n    OnDestroy,\n    OnInit,\n    Output,\n    EventEmitter,\n    ElementRef,\n    OnChanges,\n    SimpleChanges,\n} from '@angular/core';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n    Overlay,\n    OverlayRef,\n    ConnectionPositionPair,\n    FlexibleConnectedPositionStrategyOrigin,\n    ScrollDispatcher,\n    CdkScrollable,\n    FlexibleConnectedPositionStrategy,\n} from '@angular/cdk/overlay';\nimport { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';\nimport { distinctUntilChanged, map, switchMap, takeUntil } from 'rxjs/operators';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\nimport { BaseDirective } from '@eui/components/shared';\nimport { BOTTOM, EuiPopoverPosition, LEFT, RIGHT, TOP, getPosition } from './models/eui-popover-position.model';\n\n@Component({\n    selector: 'eui-popover',\n    templateUrl: './eui-popover.component.html',\n    styleUrls: ['./styles/_index.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class EuiPopoverComponent extends BaseDirective implements AfterViewInit, OnDestroy, OnInit, OnChanges {\n    @Input() title: string;\n    @Input() position: EuiPopoverPosition = 'bottom';\n    @Input() size: 'default' | 'small' | 'large' | 'auto' | 's' | 'm' | 'l' | 'xl' | string = 'default';\n    @Input() type: 'default' | 'flat' | 'colored-header' | 'colored-solid' = 'default';\n    @Input() width: string = null;\n\n    @Output() outsideClick = new EventEmitter();\n    // TODO: fix it for v17 - Output bindings, including aliases, should not be named as standard DOM events\n    @Output() open = new EventEmitter();\n    // TODO: fix it for v17 - Output bindings, including aliases, should not be named as standard DOM events\n    @Output() close = new EventEmitter();\n\n    public statesClass: string;\n    public cdkTrapFocusAutoCapture = true;\n    public sizeClass = 'm';\n    public position$: Observable<[EuiPopoverPosition, DOMRect]>;\n\n    @ViewChild('templatePortalContent') templatePortalContent: TemplateRef<unknown>;\n\n    /** @deprecated This will be removed in next version of eui */\n    @Input()\n    get isOpen(): boolean {\n        return this._isOpen;\n    }\n    set isOpen(value: BooleanInput) {\n        this._isOpen = coerceBooleanProperty(value);\n    }\n    private _isOpen = false;\n    @Input()\n    get hasBackDrop(): boolean {\n        return this._hasBackDrop;\n    }\n    set hasBackDrop(value: BooleanInput) {\n        this._hasBackDrop = coerceBooleanProperty(value);\n    }\n    private _hasBackDrop = false;\n    @Input()\n    get hasCloseButton(): boolean {\n        return this._hasCloseButton;\n    }\n    set hasCloseButton(value: BooleanInput) {\n        this._hasCloseButton = coerceBooleanProperty(value);\n    }\n    private _hasCloseButton = true;\n    @Input()\n    get isDismissable(): boolean {\n        return this._isDismissable;\n    }\n    set isDismissable(value: BooleanInput) {\n        this._isDismissable = coerceBooleanProperty(value);\n    }\n    private _isDismissable = true;\n\n    private templatePortal: TemplatePortal<any>;\n    private overlayRef: OverlayRef;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isOpen$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    private scrollDispatcherSubscription = new Subscription();\n    private origin: ElementRef;\n    private preferredPositons: ConnectionPositionPair[] = [BOTTOM, TOP, LEFT, RIGHT];\n    private positionStrategy: FlexibleConnectedPositionStrategy;\n    private positionStrategyUpdate$: Subject<void> = new Subject();\n\n    constructor(\n        private overlay: Overlay,\n        private viewContainerRef: ViewContainerRef,\n        private scrollDispatcher: ScrollDispatcher\n    ) {\n        super();\n    }\n\n    ngOnChanges(c: SimpleChanges): void {\n        if (this.position === 'top') {\n            this.preferredPositons = [TOP, BOTTOM, LEFT, RIGHT];\n        } else if (this.position === 'right') {\n            this.preferredPositons = [RIGHT, LEFT, TOP, BOTTOM];\n        } else if (this.position === 'left') {\n            this.preferredPositons = [LEFT, RIGHT, TOP, BOTTOM];\n        } else {\n            this.preferredPositons = [BOTTOM, TOP, LEFT, RIGHT];\n        }\n\n        if (c.size) {\n            if (c.size.currentValue === 'default') {\n                this.sizeClass = 'm';\n            } else if (c.size.currentValue === 'small') {\n                this.sizeClass = 's';\n            } else if (c.size.currentValue === 'large') {\n                this.sizeClass = 'l';\n            } else {\n                this.sizeClass = c.size.currentValue;\n            }\n        }\n    }\n\n    ngOnInit(): void {\n        this.statesClass = [super.getCssClasses('eui-popover')].join(' ').trim();\n        this.setPositionStream();\n    }\n\n    ngAfterViewInit(): void {\n        this.templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        this.scrollDispatcherSubscription.unsubscribe();\n        this.overlayRef?.dispose();\n        this.overlayRef = null;\n    }\n\n    /**\n     * Whether the eui-popover is open.\n     *\n     * @usageNotes\n     * ```html\n     * <eui-popover #popover>\n     *      <my-component *ngIf=\"popover.isPopoverOpen\"></my-component>\n     * </eui-popover>\n     * ```\n     * @returns A boolean with value `true` when open, otherwise `false`.\n     */\n    // TODO: In next version, remove isOpen @Input which is not used, deprecated this isPopoverOpen and create isOpen instead\n    get isPopoverOpen(): boolean {\n        return this.isOpen$.value;\n    }\n\n    public onContentChange(): void {\n        this.positionStrategy = this.getPositionStrategy();\n        this.positionStrategyUpdate$.next();\n        this.overlayRef.updatePositionStrategy(this.positionStrategy);\n    }\n\n    /**\n     * Open a popover\n     *\n     * @param origin Origin of the popover position\n     */\n    public openPopover(origin: ElementRef): void {\n        if (!this.isPopoverOpen) {\n            this.cdkTrapFocusAutoCapture = true;\n            this.scrollDispatcherSubscription = this.scrollDispatcher.ancestorScrolled(origin).subscribe((event: CdkScrollable) => {\n                const scrollableParent = event ? event.getElementRef().nativeElement : document.querySelector('body');\n                if (!this.isVisible(origin as unknown as HTMLElement, scrollableParent)) {\n                    this.closePopover();\n                }\n            });\n\n            this.origin = origin;\n            const positionStrategy = this.getPositionStrategy();\n\n            const scrollStrategy = this.overlay.scrollStrategies.reposition({ scrollThrottle: 10 });\n\n            this.overlayRef = this.overlay.create({\n                positionStrategy,\n                scrollStrategy,\n                disposeOnNavigation: true,\n                width: this.width,\n            });\n            this.overlayRef.attach(this.templatePortal);\n\n            this.positionStrategy = positionStrategy;\n            this.positionStrategyUpdate$.next();\n\n            this.overlayRef\n                .outsidePointerEvents()\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => {\n                    if (this.isDismissable) {\n                        this.outsideClick.emit();\n                        this.closePopover();\n                    }\n                });\n\n            this.isOpen$.next(true);\n            this.open.emit();\n        }\n    }\n\n    /**\n     * Close a popover\n     */\n    public closePopover(): void {\n        this.scrollDispatcherSubscription.unsubscribe();\n        this.overlayRef.dispose();\n        this.overlayRef = null;\n        this.isOpen$.next(false);\n        this.close.emit();\n    }\n\n    /**\n     * Reacts on the Esc keydown event to close the popup. Can be used as alternative to the close icon button,\n     * or as the main way to close the popup when hasCloseButton is false\n     *\n     * @param event The key event pressed\n     */\n    public onKeyDown(event: KeyboardEvent): void {\n        if (event.key === 'Escape') {\n            this.closePopover();\n        }\n    }\n\n    private isVisible(origin: HTMLElement, scrollableParent: HTMLElement): boolean {\n        const originY = origin.getBoundingClientRect().y;\n        const scrollableParentY = Math.abs(scrollableParent.getBoundingClientRect().y);\n        const scrollableParentHeight = scrollableParent.getBoundingClientRect().height - 50;\n\n        return (\n            (originY > 0 && originY < scrollableParentHeight) ||\n            (originY - scrollableParentY > 0 && originY < scrollableParentY + scrollableParentHeight)\n        );\n    }\n\n    private getPositionStrategy(): FlexibleConnectedPositionStrategy {\n        return this.overlay\n            .position()\n            .flexibleConnectedTo(this.origin as FlexibleConnectedPositionStrategyOrigin)\n            .withPositions(this.preferredPositons)\n            .withFlexibleDimensions(false)\n            .withLockedPosition(true);\n    }\n\n    private setPositionStream(): void {\n        this.position$ = this.positionStrategyUpdate$.pipe(\n            switchMap(() => this.positionStrategy.positionChanges),\n            map(getPosition),\n            distinctUntilChanged(),\n            map((position) => [position, (this.origin as unknown as HTMLElement).getBoundingClientRect()])\n        );\n    }\n}\n","<ng-template #templatePortalContent>\n    <ng-container *ngIf=\"cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: true }\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!cdkTrapFocusAutoCapture\">\n        <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: false }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #tmpl let-autoCapture>\n    <div\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"autoCapture\"\n        class=\"eui-popover eui-popover--{{ type }} {{ statesClass }}\"\n        [class.eui-popover--has-custom-width]=\"width\"\n        [ngClass]=\"!width ? 'eui-popover--size-' + sizeClass : ''\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        <div *ngIf=\"title\" class=\"eui-popover__header\">\n            <div class=\"eui-popover__header-title\">{{ title }}</div>\n            <button\n                euiButton\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                class=\"eui-popover__header-close\"\n                aria-label=\"Close Icon Button\"\n                *ngIf=\"hasCloseButton\"\n                (click)=\"closePopover()\">\n                <eui-icon-svg icon=\"eui-close\" fillColor=\"primary-100\" aria-label=\"Close Icon\" class=\"eui-popover__header-close-icon\">\n                </eui-icon-svg>\n            </button>\n        </div>\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { ObserversModule } from '@angular/cdk/observers';\n\nimport { EuiButtonModule } from '@eui/components/eui-button';\nimport { EuiIconModule } from '@eui/components/eui-icon';\n\nimport { EuiPopoverComponent } from './eui-popover.component';\nimport { EuiPopoverArrowPositionDirective } from './directives/eui-popover-arrow-position.directive';\n\n@NgModule({\n    imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, A11yModule, ObserversModule],\n    declarations: [EuiPopoverComponent, EuiPopoverArrowPositionDirective],\n    exports: [EuiPopoverComponent],\n})\nexport class EuiPopoverModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["takeUntil","i7.EuiPopoverArrowPositionDirective"],"mappings":";;;;;;;;;;;;;;;;;;;;AAIO,MAAM,GAAG,GAAG,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,2BAA2B,CAAC,CAAC,CAAC;AACvL,MAAM,MAAM,GAAG,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,8BAA8B,CAAC,CAAC,CAAC;AAC7L,MAAM,IAAI,GAAG,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,4BAA4B,CAAC,CAAC,CAAC;AACxL,MAAM,KAAK,GAAG,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,sBAAsB,EAAE,6BAA6B,CAAC,CAAC,CAAC;AAE1L,MAAM,WAAW,GAAG,CAAC,EAAE,cAAc,EAAkC,KAAwB;AAClG,IAAA,QAAQ,cAAc;AAClB,QAAA,KAAK,GAAG;AACJ,YAAA,OAAO,KAAK,CAAC;AACjB,QAAA,KAAK,MAAM;AACP,YAAA,OAAO,QAAQ,CAAC;AACpB,QAAA,KAAK,IAAI;AACL,YAAA,OAAO,MAAM,CAAC;AAClB,QAAA,KAAK,KAAK;AACN,YAAA,OAAO,OAAO,CAAC;AACtB,KAAA;AACL,CAAC;;MCXY,gCAAgC,CAAA;AAMzC,IAAA,WAAA,CACY,QAAmB,EACnB,UAAsB,EACJ,QAAkB,EAAA;QAFpC,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAW;QACnB,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QACJ,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAU;AALxC,QAAA,IAAA,CAAA,QAAQ,GAAkB,IAAI,OAAO,EAAE,CAAC;KAM5C;IAEJ,QAAQ,GAAA;QACJ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,KAAI;YAC/E,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;AAC3G,SAAC,CAAC,CAAC;KACN;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;KAC5B;IAEO,QAAQ,CAAC,QAA4B,EAAE,UAAmB,EAAA;QAC9D,MAAM,SAAS,GAAY,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;AAEjF,QAAA,IAAI,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,OAAO,EAAE;AAC7C,YAAA,MAAM,YAAY,GACd,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAE1G,IAAI,YAAY,GAAG,CAAC,EAAE;gBAClB,OAAO,CAAA,KAAA,EAAQ,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAA,EAAA,CAAI,CAAC;AAC7D,aAAA;iBAAM,IAAI,YAAY,GAAG,CAAC,EAAE;gBACzB,OAAO,CAAA,oBAAA,EACH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAC5F,CAAA,EAAA,CAAI,CAAC;AACR,aAAA;AACJ,SAAA;AACD,QAAA,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;AAC7C,YAAA,MAAM,cAAc,GAChB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YAE1G,IAAI,cAAc,GAAG,CAAC,EAAE;gBACpB,OAAO,CAAA,MAAA,EAAS,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,CAAA,EAAA,CAAI,CAAC;AAC9D,aAAA;iBAAM,IAAI,cAAc,GAAG,CAAC,EAAE;gBAC3B,OAAO,CAAA,oBAAA,EACH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,CAAC,KACzF,CAAA,EAAA,CAAI,CAAC;AACR,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,EAAE,CAAC;KACb;AAnDQ,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gCAAgC,qEAS7B,QAAQ,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;4HATX,gCAAgC,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,yBAAA,EAAA,WAAA,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;kGAAhC,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAH5C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,2BAA2B;AACxC,iBAAA,CAAA;;0BAUQ,MAAM;2BAAC,QAAQ,CAAA;4CAPb,SAAS,EAAA,CAAA;sBADf,KAAK;uBAAC,yBAAyB,CAAA;;;AC+B9B,MAAO,mBAAoB,SAAQ,aAAa,CAAA;;AAqBlD,IAAA,IACI,MAAM,GAAA;QACN,OAAO,IAAI,CAAC,OAAO,CAAC;KACvB;IACD,IAAI,MAAM,CAAC,KAAmB,EAAA;AAC1B,QAAA,IAAI,CAAC,OAAO,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KAC/C;AAED,IAAA,IACI,WAAW,GAAA;QACX,OAAO,IAAI,CAAC,YAAY,CAAC;KAC5B;IACD,IAAI,WAAW,CAAC,KAAmB,EAAA;AAC/B,QAAA,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACpD;AAED,IAAA,IACI,cAAc,GAAA;QACd,OAAO,IAAI,CAAC,eAAe,CAAC;KAC/B;IACD,IAAI,cAAc,CAAC,KAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACvD;AAED,IAAA,IACI,aAAa,GAAA;QACb,OAAO,IAAI,CAAC,cAAc,CAAC;KAC9B;IACD,IAAI,aAAa,CAAC,KAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACtD;AAaD,IAAA,WAAA,CACY,OAAgB,EAChB,gBAAkC,EAClC,gBAAkC,EAAA;AAE1C,QAAA,KAAK,EAAE,CAAC;QAJA,IAAO,CAAA,OAAA,GAAP,OAAO,CAAS;QAChB,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAkB;QAClC,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAkB;QAjErC,IAAQ,CAAA,QAAA,GAAuB,QAAQ,CAAC;QACxC,IAAI,CAAA,IAAA,GAA6E,SAAS,CAAC;QAC3F,IAAI,CAAA,IAAA,GAA4D,SAAS,CAAC;QAC1E,IAAK,CAAA,KAAA,GAAW,IAAI,CAAC;AAEpB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;;AAElC,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;;AAE1B,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,YAAY,EAAE,CAAC;QAG9B,IAAuB,CAAA,uBAAA,GAAG,IAAI,CAAC;QAC/B,IAAS,CAAA,SAAA,GAAG,GAAG,CAAC;QAaf,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;QAQhB,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;QAQrB,IAAe,CAAA,eAAA,GAAG,IAAI,CAAC;QAQvB,IAAc,CAAA,cAAA,GAAG,IAAI,CAAC;AAItB,QAAA,IAAA,CAAA,QAAQ,GAAqB,IAAI,OAAO,EAAW,CAAC;AACpD,QAAA,IAAA,CAAA,OAAO,GAA6B,IAAI,eAAe,CAAU,KAAK,CAAC,CAAC;AACxE,QAAA,IAAA,CAAA,4BAA4B,GAAG,IAAI,YAAY,EAAE,CAAC;QAElD,IAAiB,CAAA,iBAAA,GAA6B,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAEzE,QAAA,IAAA,CAAA,uBAAuB,GAAkB,IAAI,OAAO,EAAE,CAAC;KAQ9D;AAED,IAAA,WAAW,CAAC,CAAgB,EAAA;AACxB,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;AACzB,YAAA,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AACvD,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE;AAClC,YAAA,IAAI,CAAC,iBAAiB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC;AACvD,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,EAAE;AACjC,YAAA,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC;AACvD,SAAA;AAAM,aAAA;AACH,YAAA,IAAI,CAAC,iBAAiB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AACvD,SAAA;QAED,IAAI,CAAC,CAAC,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;AACnC,gBAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;AACxB,aAAA;AAAM,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,EAAE;AACxC,gBAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;AACxB,aAAA;AAAM,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,EAAE;AACxC,gBAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;AACxB,aAAA;AAAM,iBAAA;gBACH,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;AACxC,aAAA;AACJ,SAAA;KACJ;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;QACzE,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAED,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC/F;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;AAC5B,QAAA,IAAI,CAAC,4BAA4B,CAAC,WAAW,EAAE,CAAC;AAChD,QAAA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;AAC3B,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B;AAED;;;;;;;;;;AAUG;;AAEH,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;KAC7B;IAEM,eAAe,GAAA;AAClB,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;AACnD,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;QACpC,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACjE;AAED;;;;AAIG;AACI,IAAA,WAAW,CAAC,MAAkB,EAAA;AACjC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACrB,YAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;AACpC,YAAA,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,KAAoB,KAAI;gBAClH,MAAM,gBAAgB,GAAG,KAAK,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACtG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAgC,EAAE,gBAAgB,CAAC,EAAE;oBACrE,IAAI,CAAC,YAAY,EAAE,CAAC;AACvB,iBAAA;AACL,aAAC,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AACrB,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAEpD,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;YAExF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;gBAClC,gBAAgB;gBAChB,cAAc;AACd,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,KAAK,EAAE,IAAI,CAAC,KAAK;AACpB,aAAA,CAAC,CAAC;YACH,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAE5C,YAAA,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;AACzC,YAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;AAEpC,YAAA,IAAI,CAAC,UAAU;AACV,iBAAA,oBAAoB,EAAE;AACtB,iBAAA,IAAI,CAACA,WAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;iBAC9B,SAAS,CAAC,MAAK;gBACZ,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;oBACzB,IAAI,CAAC,YAAY,EAAE,CAAC;AACvB,iBAAA;AACL,aAAC,CAAC,CAAC;AAEP,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACxB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AACpB,SAAA;KACJ;AAED;;AAEG;IACI,YAAY,GAAA;AACf,QAAA,IAAI,CAAC,4BAA4B,CAAC,WAAW,EAAE,CAAC;AAChD,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACzB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;AAED;;;;;AAKG;AACI,IAAA,SAAS,CAAC,KAAoB,EAAA;AACjC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YACxB,IAAI,CAAC,YAAY,EAAE,CAAC;AACvB,SAAA;KACJ;IAEO,SAAS,CAAC,MAAmB,EAAE,gBAA6B,EAAA;QAChE,MAAM,OAAO,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC;AACjD,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/E,MAAM,sBAAsB,GAAG,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,EAAE,CAAC;QAEpF,QACI,CAAC,OAAO,GAAG,CAAC,IAAI,OAAO,GAAG,sBAAsB;AAChD,aAAC,OAAO,GAAG,iBAAiB,GAAG,CAAC,IAAI,OAAO,GAAG,iBAAiB,GAAG,sBAAsB,CAAC,EAC3F;KACL;IAEO,mBAAmB,GAAA;QACvB,OAAO,IAAI,CAAC,OAAO;AACd,aAAA,QAAQ,EAAE;AACV,aAAA,mBAAmB,CAAC,IAAI,CAAC,MAAiD,CAAC;AAC3E,aAAA,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC;aACrC,sBAAsB,CAAC,KAAK,CAAC;aAC7B,kBAAkB,CAAC,IAAI,CAAC,CAAC;KACjC;IAEO,iBAAiB,GAAA;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAC9C,SAAS,CAAC,MAAM,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EACtD,GAAG,CAAC,WAAW,CAAC,EAChB,oBAAoB,EAAE,EACtB,GAAG,CAAC,CAAC,QAAQ,KAAK,CAAC,QAAQ,EAAG,IAAI,CAAC,MAAiC,CAAC,qBAAqB,EAAE,CAAC,CAAC,CACjG,CAAC;KACL;wIAvOQ,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,OAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,IAAA,EAAA,mBAAmB,sfCzChC,uwDAyCA,EAAA,MAAA,EAAA,CAAA,k3LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,eAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,WAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,gCAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;kGDAa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,mBAGN,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,uwDAAA,EAAA,MAAA,EAAA,CAAA,k3LAAA,CAAA,EAAA,CAAA;4JAG5B,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAEI,YAAY,EAAA,CAAA;sBAArB,MAAM;gBAEG,IAAI,EAAA,CAAA;sBAAb,MAAM;gBAEG,KAAK,EAAA,CAAA;sBAAd,MAAM;gBAO6B,qBAAqB,EAAA,CAAA;sBAAxD,SAAS;uBAAC,uBAAuB,CAAA;gBAI9B,MAAM,EAAA,CAAA;sBADT,KAAK;gBASF,WAAW,EAAA,CAAA;sBADd,KAAK;gBASF,cAAc,EAAA,CAAA;sBADjB,KAAK;gBASF,aAAa,EAAA,CAAA;sBADhB,KAAK;;;MErEG,gBAAgB,CAAA;wIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,iBAHV,mBAAmB,EAAE,gCAAgC,CAAA,EAAA,OAAA,EAAA,CAD1D,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,aAExF,mBAAmB,CAAA,EAAA,CAAA,CAAA,EAAA;yIAEpB,gBAAgB,EAAA,OAAA,EAAA,CAJf,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,CAAA,EAAA,CAAA,CAAA,EAAA;;kGAIzF,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,CAAC;AACnG,oBAAA,YAAY,EAAE,CAAC,mBAAmB,EAAE,gCAAgC,CAAC;oBACrE,OAAO,EAAE,CAAC,mBAAmB,CAAC;AACjC,iBAAA,CAAA;;;AChBD;;AAEG;;;;"}

package/fesm2022/eui-components-eui-progress-bar.mjs

@@ -37,8 +37,8 @@ class EuiProgressBarComponent {
             .join(' ')
             .trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiProgressBarComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.3", type: EuiProgressBarComponent, selector: "eui-progress-bar", inputs: { e2eAttr: "e2eAttr", label: "label", progress: "progress", isIndeterminate: "isIndeterminate", hasStatusIcon: "hasStatusIcon" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses" } }, usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiSize2XS", "euiSize2XS", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiVariant", "euiVariant", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div *ngIf=\"label || hasStatusIcon\" class=\"eui-progress-bar__header\">\n    <div *ngIf=\"label\" class=\"eui-progress-bar__header-label\">{{ label }}</div>\n    <div *ngIf=\"hasStatusIcon\" class=\"eui-progress-bar__header-status\">\n        <eui-icon-svg *ngIf=\"baseStatesDirective?.euiSuccess\" icon=\"eui-ecl-success\" fillColor=\"success-100\"></eui-icon-svg>\n        <eui-icon-svg *ngIf=\"baseStatesDirective?.euiWarning\" icon=\"eui-ecl-warning\" fillColor=\"warning-100\"></eui-icon-svg>\n        <eui-icon-svg *ngIf=\"baseStatesDirective?.euiDanger\" icon=\"eui-ecl-error\" fillColor=\"danger-100\"></eui-icon-svg>\n    </div>\n</div>\n<div class=\"eui-progress-bar__indicator-container\">\n    <div class=\"eui-progress-bar__indicator\" [style.width]=\"!isIndeterminate ? progress + '%' : null\"></div>\n</div>\n", styles: [":host.eui-progress-bar{align-items:center;display:flex;flex-direction:column;position:relative}.eui-progress-bar__header{align-items:center;display:flex;justify-content:space-between;height:var(--eui-base-spacing-l);margin-bottom:var(--eui-base-spacing-s);width:100%}.eui-progress-bar__header-label{display:flex;justify-content:flex-start;font-weight:700}.eui-progress-bar__header-status{display:flex;justify-content:flex-end}.eui-progress-bar__indicator-container{margin-bottom:var(--eui-base-spacing-2xs);background-color:var(--eui-base-color-grey-15);height:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-primary-100);height:100%;transition:width .25s ease}:host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-2xs)}:host.eui-progress-bar--size-xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xs)}:host.eui-progress-bar--size-s .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-s)}:host.eui-progress-bar--size-m .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-m)}:host.eui-progress-bar--size-l .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-l)}:host.eui-progress-bar--size-xl .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xl)}@media screen and (max-width: 767px){:host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xs)}}:host.eui-progress-bar--secondary .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-grey-100)}:host.eui-progress-bar--success .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-success-100)}:host.eui-progress-bar--info .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-info-100)}:host.eui-progress-bar--warning .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-warning-100)}:host.eui-progress-bar--danger .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-danger-100)}:host.eui-progress-bar--accent .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-accent-100)}:host.eui-progress-bar--indeterminate .eui-progress-bar__indicator-container .eui-progress-bar__indicator{animation:progress-linear-indeterminate 2s infinite linear;background-color:var(--eui-base-color-grey-15);background-size:200% 100%;background-image:linear-gradient(to right,transparent 50%,var(--eui-base-color-primary-100) 50%,var(--eui-base-color-primary-100) 60%,transparent 60%,transparent 71.5%,var(--eui-base-color-primary-100) 71.5%,var(--eui-base-color-primary-100) 84%,transparent 84%);transition:all .2s}@keyframes progress-linear-indeterminate{0%{background-size:200% 100%;background-position:left -31.25% top 0%}50%{background-size:800% 100%;background-position:left -49% top 0%}to{background-size:400% 100%;background-position:left -102% top 0%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiProgressBarComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiProgressBarComponent, selector: "eui-progress-bar", inputs: { e2eAttr: "e2eAttr", label: "label", progress: "progress", isIndeterminate: "isIndeterminate", hasStatusIcon: "hasStatusIcon" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses" } }, usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiSize2XS", "euiSize2XS", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiVariant", "euiVariant", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div *ngIf=\"label || hasStatusIcon\" class=\"eui-progress-bar__header\">\n    <div *ngIf=\"label\" class=\"eui-progress-bar__header-label\">{{ label }}</div>\n    <div *ngIf=\"hasStatusIcon\" class=\"eui-progress-bar__header-status\">\n        <eui-icon-svg *ngIf=\"baseStatesDirective?.euiSuccess\" icon=\"eui-ecl-success\" fillColor=\"success-100\"></eui-icon-svg>\n        <eui-icon-svg *ngIf=\"baseStatesDirective?.euiWarning\" icon=\"eui-ecl-warning\" fillColor=\"warning-100\"></eui-icon-svg>\n        <eui-icon-svg *ngIf=\"baseStatesDirective?.euiDanger\" icon=\"eui-ecl-error\" fillColor=\"danger-100\"></eui-icon-svg>\n    </div>\n</div>\n<div class=\"eui-progress-bar__indicator-container\">\n    <div class=\"eui-progress-bar__indicator\" [style.width]=\"!isIndeterminate ? progress + '%' : null\"></div>\n</div>\n", styles: [":host.eui-progress-bar{align-items:center;display:flex;flex-direction:column;position:relative}.eui-progress-bar__header{align-items:center;display:flex;justify-content:space-between;height:var(--eui-base-spacing-l);margin-bottom:var(--eui-base-spacing-s);width:100%}.eui-progress-bar__header-label{display:flex;justify-content:flex-start;font-weight:700}.eui-progress-bar__header-status{display:flex;justify-content:flex-end}.eui-progress-bar__indicator-container{margin-bottom:var(--eui-base-spacing-2xs);background-color:var(--eui-base-color-grey-15);height:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-primary-100);height:100%;transition:width .25s ease}:host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-2xs)}:host.eui-progress-bar--size-xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xs)}:host.eui-progress-bar--size-s .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-s)}:host.eui-progress-bar--size-m .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-m)}:host.eui-progress-bar--size-l .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-l)}:host.eui-progress-bar--size-xl .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xl)}@media screen and (max-width: 767px){:host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xs)}}:host.eui-progress-bar--secondary .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-grey-100)}:host.eui-progress-bar--success .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-success-100)}:host.eui-progress-bar--info .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-info-100)}:host.eui-progress-bar--warning .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-warning-100)}:host.eui-progress-bar--danger .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-danger-100)}:host.eui-progress-bar--accent .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-accent-100)}:host.eui-progress-bar--indeterminate .eui-progress-bar__indicator-container .eui-progress-bar__indicator{animation:progress-linear-indeterminate 2s infinite linear;background-color:var(--eui-base-color-grey-15);background-size:200% 100%;background-image:linear-gradient(to right,transparent 50%,var(--eui-base-color-primary-100) 50%,var(--eui-base-color-primary-100) 60%,transparent 60%,transparent 71.5%,var(--eui-base-color-primary-100) 71.5%,var(--eui-base-color-primary-100) 84%,transparent 84%);transition:all .2s}@keyframes progress-linear-indeterminate{0%{background-size:200% 100%;background-position:left -31.25% top 0%}50%{background-size:800% 100%;background-position:left -49% top 0%}to{background-size:400% 100%;background-position:left -102% top 0%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     coerceNumber
@@ -49,7 +49,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EuiProgressBarComponent.prototype, "hasStatusIcon", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
@@ -91,11 +91,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3",
             }] } });
 
 class EuiProgressBarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiProgressBarModule, declarations: [EuiProgressBarComponent], imports: [CommonModule, EuiIconModule], exports: [EuiProgressBarComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiProgressBarModule, imports: [CommonModule, EuiIconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiProgressBarModule, declarations: [EuiProgressBarComponent], imports: [CommonModule, EuiIconModule], exports: [EuiProgressBarComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiProgressBarModule, imports: [CommonModule, EuiIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EuiIconModule],