@eui/components 19.1.1-snapshot-1741071838252 → 19.1.1

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

@@ -317,10 +317,10 @@ class EuiPaginatorComponent {
             this.goToPage(page, options);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPaginatorComponent, deps: [{ token: i1.EuiAppShellService }, { token: i2.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: EuiPaginatorComponent, isStandalone: false, selector: "eui-paginator", inputs: { e2eAttr: "e2eAttr", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", page: "page", length: "length", nbPageNumberNavigation: "nbPageNumberNavigation", isHidden: ["isHidden", "isHidden", booleanAttribute], isBasicMode: ["isBasicMode", "isBasicMode", booleanAttribute], hasPageNumberNavigation: ["hasPageNumberNavigation", "hasPageNumberNavigation", booleanAttribute], hasDynamicLength: ["hasDynamicLength", "hasDynamicLength", booleanAttribute], hasPageSize: ["hasPageSize", "hasPageSize", booleanAttribute] }, outputs: { pageChange: "pageChange" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses" } }, providers: [DecimalPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-paginator__page\">\n    @if (!isBasicMode || hasPageSize) {\n        <div class=\"eui-paginator__page-selector\">\n            <div>{{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}:</div>\n            <div class=\"page-size__select-wrapper\">\n                <select euiSelect class=\"page-size__select\" aria-label=\"Page size selected\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n                    <option *ngFor=\"let pageSizeOption of pageSizeOptions\" value=\"{{ pageSizeOption }}\">{{ pageSizeOption }}</option>\n                </select>\n            </div>\n        </div>\n        @if ((length$ | async) > 0) {\n            <div class=\"eui-paginator__page-range-main\">\n                {{ 'eui.euitable.SHOWING-RANGE' | translate: { range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }}\n                {{ rangeLength | number }}\n            </div>\n        }\n    }\n</div>\n\n<div class=\"eui-paginator__page-navigation\">\n\n    @if (isBasicMode) {\n\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <!-- to be compliant with DS as play-back is not existing in ionicons -->\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" transform=\"rotate-180\" aria-label=\"Go to previous page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" aria-label=\"Go to next page\"></eui-icon-svg>\n            </button>\n        </div>\n\n    } @else {\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goFirstPage()\">\n                <eui-icon-svg icon=\"play-skip-back:sharp\" fillColor=\"primary\" aria-label=\"Go to first page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <!-- to be compliant with DS as play-back is not existing in ionicons -->\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" transform=\"rotate-180\" aria-label=\"Go to previous page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div\n            class=\"eui-paginator__page-navigation-numbers\"\n            *ngIf=\"hasPageNumberNavigation\">\n            <button\n                type=\"button\"\n                euiSizeS\n                *ngFor=\"let pageNumber of pageNumberNavigation\"\n                euiButton\n                euiBasicButton\n                [euiPrimary]=\"pageNumber === page\"\n                [euiOutline]=\"pageNumber === page\"\n                (click)=\"goToPage(pageNumber)\">\n                {{ pageNumber + 1 | number }}\n            </button>\n        </div>\n        <div *ngIf=\"(length$ | async) > 0\" class=\"eui-paginator__page-range\">\n            {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" aria-label=\"Go to next page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goLastPage()\">\n                <eui-icon-svg icon=\"play-skip-forward:sharp\" fillColor=\"primary\" aria-label=\"Go to last page\"></eui-icon-svg>\n            </button>\n        </div>\n    }\n</div>\n\n", styles: [".eui-19 :host.eui-paginator{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-s-s) 0;position:relative;width:100%}.eui-19 :host.eui-paginator .eui-paginator__page{display:flex;flex-direction:column;font:var(--eui-f-l)}.eui-19 :host.eui-paginator .eui-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap;font:var(--eui-f-s)}.eui-19 :host.eui-paginator .eui-paginator__page-selector .page-size__select-wrapper{padding-left:var(--eui-s-xs);padding-bottom:var(--eui-s-2xs)}.eui-19 :host.eui-paginator .eui-paginator__page-selector .page-size__select{font-size:100%;min-height:var(--eui-s-xl);padding-bottom:0;padding-top:0}.eui-19 :host.eui-paginator .eui-paginator__page-range{align-items:center;font:var(--eui-f-s);display:none}.eui-19 :host.eui-paginator .eui-paginator__page-range-main{align-items:center;font:var(--eui-f-s)}.eui-19 :host.eui-paginator .eui-paginator__page-navigation{align-items:center;display:flex}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-item{align-items:center;display:inline-flex}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-19 :host.eui-paginator.eui-paginator--hidden{display:none}.eui-19 .eui-card.eui-card--no-content-padding .eui-card-content .eui-paginator{padding:var(--eui-s-s)}:root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}@media screen and (max-width: 767px){.eui-19 :host.eui-paginator{align-items:center;display:flex;justify-content:center;margin:var(--eui-s-s) 0;width:100%}.eui-19 :host.eui-paginator .eui-paginator__page{display:none}.eui-19 :host.eui-paginator .eui-paginator__page-range{display:inline-flex;margin:0 var(--eui-s-m)}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-numbers{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i6.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i6.EuiSelectControlValueAccessor, selector: "select:not([multiple])[formControlName][euiSelect],select:not([multiple])[formControl][euiSelect],select:not([multiple])[ngModel][euiSelect]", inputs: ["placeholder"] }, { kind: "directive", type: i6.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPaginatorComponent, deps: [{ token: i1.EuiAppShellService }, { token: i2.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: EuiPaginatorComponent, isStandalone: false, selector: "eui-paginator", inputs: { e2eAttr: "e2eAttr", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", page: "page", length: "length", nbPageNumberNavigation: "nbPageNumberNavigation", isHidden: ["isHidden", "isHidden", booleanAttribute], isBasicMode: ["isBasicMode", "isBasicMode", booleanAttribute], hasPageNumberNavigation: ["hasPageNumberNavigation", "hasPageNumberNavigation", booleanAttribute], hasDynamicLength: ["hasDynamicLength", "hasDynamicLength", booleanAttribute], hasPageSize: ["hasPageSize", "hasPageSize", booleanAttribute] }, outputs: { pageChange: "pageChange" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses" } }, providers: [DecimalPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-paginator__page\">\n    @if (!isBasicMode || hasPageSize) {\n        <div class=\"eui-paginator__page-selector\">\n            <div>{{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}:</div>\n            <div class=\"page-size__select-wrapper\">\n                <select euiSelect class=\"page-size__select\" aria-label=\"Page size selected\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n                    <option *ngFor=\"let pageSizeOption of pageSizeOptions\" value=\"{{ pageSizeOption }}\">{{ pageSizeOption }}</option>\n                </select>\n            </div>\n        </div>\n        @if ((length$ | async) > 0) {\n            <div class=\"eui-paginator__page-range-main\">\n                {{ 'eui.euitable.SHOWING-RANGE' | translate: { range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }}\n                {{ rangeLength | number }}\n            </div>\n        }\n    }\n</div>\n\n<div class=\"eui-paginator__page-navigation\">\n\n    @if (isBasicMode) {\n\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <!-- to be compliant with DS as play-back is not existing in ionicons -->\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" transform=\"rotate-180\" aria-label=\"Go to previous page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" aria-label=\"Go to next page\"></eui-icon-svg>\n            </button>\n        </div>\n\n    } @else {\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goFirstPage()\">\n                <eui-icon-svg icon=\"play-skip-back:sharp\" fillColor=\"primary\" aria-label=\"Go to first page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <!-- to be compliant with DS as play-back is not existing in ionicons -->\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" transform=\"rotate-180\" aria-label=\"Go to previous page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div\n            class=\"eui-paginator__page-navigation-numbers\"\n            *ngIf=\"hasPageNumberNavigation\">\n            <button\n                type=\"button\"\n                euiSizeS\n                *ngFor=\"let pageNumber of pageNumberNavigation\"\n                euiButton\n                euiBasicButton\n                [euiPrimary]=\"pageNumber === page\"\n                [euiOutline]=\"pageNumber === page\"\n                (click)=\"goToPage(pageNumber)\">\n                {{ pageNumber + 1 | number }}\n            </button>\n        </div>\n        <div *ngIf=\"(length$ | async) > 0\" class=\"eui-paginator__page-range\">\n            {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" aria-label=\"Go to next page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goLastPage()\">\n                <eui-icon-svg icon=\"play-skip-forward:sharp\" fillColor=\"primary\" aria-label=\"Go to last page\"></eui-icon-svg>\n            </button>\n        </div>\n    }\n</div>\n\n", styles: [".eui-19 :host.eui-paginator{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-s-s) 0;position:relative;width:100%}.eui-19 :host.eui-paginator .eui-paginator__page{display:flex;flex-direction:column;font:var(--eui-f-l)}.eui-19 :host.eui-paginator .eui-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap;font:var(--eui-f-s)}.eui-19 :host.eui-paginator .eui-paginator__page-selector .page-size__select-wrapper{padding-left:var(--eui-s-xs);padding-bottom:var(--eui-s-2xs)}.eui-19 :host.eui-paginator .eui-paginator__page-selector .page-size__select{font-size:100%;min-height:var(--eui-s-xl);padding-bottom:0;padding-top:0}.eui-19 :host.eui-paginator .eui-paginator__page-range{align-items:center;font:var(--eui-f-s);display:none}.eui-19 :host.eui-paginator .eui-paginator__page-range-main{align-items:center;font:var(--eui-f-s)}.eui-19 :host.eui-paginator .eui-paginator__page-navigation{align-items:center;display:flex}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-item{align-items:center;display:inline-flex}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-19 :host.eui-paginator.eui-paginator--hidden{display:none}.eui-19 .eui-card.eui-card--no-content-padding .eui-card-content .eui-paginator{padding:var(--eui-s-s)}:root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}@media screen and (max-width: 767px){.eui-19 :host.eui-paginator{align-items:center;display:flex;justify-content:center;margin:var(--eui-s-s) 0;width:100%}.eui-19 :host.eui-paginator .eui-paginator__page{display:none}.eui-19 :host.eui-paginator .eui-paginator__page-range{display:inline-flex;margin:0 var(--eui-s-m)}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-numbers{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i6.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i6.EuiSelectControlValueAccessor, selector: "select:not([multiple])[formControlName][euiSelect],select:not([multiple])[formControl][euiSelect],select:not([multiple])[ngModel][euiSelect]", inputs: ["placeholder"] }, { kind: "directive", type: i6.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-paginator', standalone: false, providers: [DecimalPipe], template: "<div class=\"eui-paginator__page\">\n    @if (!isBasicMode || hasPageSize) {\n        <div class=\"eui-paginator__page-selector\">\n            <div>{{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}:</div>\n            <div class=\"page-size__select-wrapper\">\n                <select euiSelect class=\"page-size__select\" aria-label=\"Page size selected\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n                    <option *ngFor=\"let pageSizeOption of pageSizeOptions\" value=\"{{ pageSizeOption }}\">{{ pageSizeOption }}</option>\n                </select>\n            </div>\n        </div>\n        @if ((length$ | async) > 0) {\n            <div class=\"eui-paginator__page-range-main\">\n                {{ 'eui.euitable.SHOWING-RANGE' | translate: { range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }}\n                {{ rangeLength | number }}\n            </div>\n        }\n    }\n</div>\n\n<div class=\"eui-paginator__page-navigation\">\n\n    @if (isBasicMode) {\n\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <!-- to be compliant with DS as play-back is not existing in ionicons -->\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" transform=\"rotate-180\" aria-label=\"Go to previous page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" aria-label=\"Go to next page\"></eui-icon-svg>\n            </button>\n        </div>\n\n    } @else {\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goFirstPage()\">\n                <eui-icon-svg icon=\"play-skip-back:sharp\" fillColor=\"primary\" aria-label=\"Go to first page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <!-- to be compliant with DS as play-back is not existing in ionicons -->\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" transform=\"rotate-180\" aria-label=\"Go to previous page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div\n            class=\"eui-paginator__page-navigation-numbers\"\n            *ngIf=\"hasPageNumberNavigation\">\n            <button\n                type=\"button\"\n                euiSizeS\n                *ngFor=\"let pageNumber of pageNumberNavigation\"\n                euiButton\n                euiBasicButton\n                [euiPrimary]=\"pageNumber === page\"\n                [euiOutline]=\"pageNumber === page\"\n                (click)=\"goToPage(pageNumber)\">\n                {{ pageNumber + 1 | number }}\n            </button>\n        </div>\n        <div *ngIf=\"(length$ | async) > 0\" class=\"eui-paginator__page-range\">\n            {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"play:sharp\" fillColor=\"primary\" aria-label=\"Go to next page\"></eui-icon-svg>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goLastPage()\">\n                <eui-icon-svg icon=\"play-skip-forward:sharp\" fillColor=\"primary\" aria-label=\"Go to last page\"></eui-icon-svg>\n            </button>\n        </div>\n    }\n</div>\n\n", styles: [".eui-19 :host.eui-paginator{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-s-s) 0;position:relative;width:100%}.eui-19 :host.eui-paginator .eui-paginator__page{display:flex;flex-direction:column;font:var(--eui-f-l)}.eui-19 :host.eui-paginator .eui-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap;font:var(--eui-f-s)}.eui-19 :host.eui-paginator .eui-paginator__page-selector .page-size__select-wrapper{padding-left:var(--eui-s-xs);padding-bottom:var(--eui-s-2xs)}.eui-19 :host.eui-paginator .eui-paginator__page-selector .page-size__select{font-size:100%;min-height:var(--eui-s-xl);padding-bottom:0;padding-top:0}.eui-19 :host.eui-paginator .eui-paginator__page-range{align-items:center;font:var(--eui-f-s);display:none}.eui-19 :host.eui-paginator .eui-paginator__page-range-main{align-items:center;font:var(--eui-f-s)}.eui-19 :host.eui-paginator .eui-paginator__page-navigation{align-items:center;display:flex}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-item{align-items:center;display:inline-flex}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-19 :host.eui-paginator.eui-paginator--hidden{display:none}.eui-19 .eui-card.eui-card--no-content-padding .eui-card-content .eui-paginator{padding:var(--eui-s-s)}:root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}@media screen and (max-width: 767px){.eui-19 :host.eui-paginator{align-items:center;display:flex;justify-content:center;margin:var(--eui-s-s) 0;width:100%}.eui-19 :host.eui-paginator .eui-paginator__page{display:none}.eui-19 :host.eui-paginator .eui-paginator__page-range{display:inline-flex;margin:0 var(--eui-s-m)}.eui-19 :host.eui-paginator .eui-paginator__page-navigation-numbers{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i2.DecimalPipe }], propDecorators: { e2eAttr: [{
@@ -373,21 +373,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * ```
  */
 class EuiPaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: EuiPaginatorModule, declarations: [EuiPaginatorComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: EuiPaginatorModule, declarations: [EuiPaginatorComponent], imports: [CommonModule,
             EuiIconModule,
             EuiButtonModule,
             TranslateModule,
             FormsModule,
             EuiSelectModule], exports: [EuiPaginatorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPaginatorModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPaginatorModule, imports: [CommonModule,
             EuiIconModule,
             EuiButtonModule,
             TranslateModule,
             FormsModule,
             EuiSelectModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -10,7 +10,7 @@ import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i4 from '@eui/components/eui-button';
-import { EuiButtonModule } from '@eui/components/eui-button';
+import { EuiButtonComponent } from '@eui/components/eui-button';
 import * as i5 from '@eui/components/eui-icon';
 import { EuiIconModule } from '@eui/components/eui-icon';
 import * as i6 from '@angular/cdk/a11y';
@@ -19,10 +19,33 @@ import * as i7 from '@angular/cdk/observers';
 import { ObserversModule } from '@angular/cdk/observers';
 import { EuiIconButtonModule } from '@eui/components/eui-icon-button';
 
+/**
+ * Position configuration for a popover appearing above its origin element.
+ * Centers the popover horizontally relative to the origin.
+ */
 const TOP = new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, 0, 0, ['eui-popover-position', 'eui-popover-position--top']);
+/**
+ * Position configuration for a popover appearing below its origin element.
+ * Centers the popover horizontally relative to the origin.
+ */
 const BOTTOM = new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, 0, 0, ['eui-popover-position', 'eui-popover-position--bottom']);
+/**
+ * Position configuration for a popover appearing to the left of its origin element.
+ * Centers the popover vertically relative to the origin.
+ */
 const LEFT = new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--left']);
+/**
+ * Position configuration for a popover appearing to the right of its origin element.
+ * Centers the popover vertically relative to the origin.
+ */
 const RIGHT = new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--right']);
+/**
+ * Converts a ConnectedOverlayPositionChange object to an EuiPopoverPosition string.
+ * Used to determine which predefined position the overlay has settled on.
+ *
+ * @param connectionPair - The position change event from the CDK overlay
+ * @returns The string representation of the popover position ('top', 'right', 'bottom', 'left')
+ */
 const getPosition = ({ connectionPair }) => {
     switch (connectionPair) {
         case TOP:
@@ -36,6 +59,31 @@ const getPosition = ({ connectionPair }) => {
     }
 };
 
+/**
+ * @description
+ * Directive that positions an arrow element for a popover relative to its origin element.
+ *
+ * This directive calculates and applies the appropriate positioning style to ensure
+ * the arrow correctly points to the origin element regardless of the popover's position.
+ * It adjusts arrow placement dynamically based on the position strategy ('top', 'bottom',
+ * 'left', or 'right') and the dimensions and position of the origin element.
+ *
+ * @example
+ * // Basic usage in an arrow element inside a popover:
+ * <div class="popover-arrow"
+ *      [euiPopoverArrowPosition]="positionAndRect$">
+ * </div>
+ *
+ * @example
+ * // In the component class:
+ * // Position and rect as an Observable
+ * positionAndRect$ = new BehaviorSubject<[EuiPopoverPosition, DOMRect]>(['bottom', originRect]);
+ *
+ * // Update when position changes
+ * updatePosition(position: EuiPopoverPosition, rect: DOMRect) {
+ *   this.positionAndRect$.next([position, rect]);
+ * }
+ */
 class EuiPopoverArrowPositionDirective {
     constructor(renderer, elementRef, document) {
         this.renderer = renderer;
@@ -74,10 +122,10 @@ class EuiPopoverArrowPositionDirective {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPopoverArrowPositionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: EuiPopoverArrowPositionDirective, isStandalone: false, selector: "[euiPopoverArrowPosition]", inputs: { position$: ["euiPopoverArrowPosition", "position$"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPopoverArrowPositionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: EuiPopoverArrowPositionDirective, isStandalone: false, selector: "[euiPopoverArrowPosition]", inputs: { position$: ["euiPopoverArrowPosition", "position$"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPopoverArrowPositionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPopoverArrowPositionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euiPopoverArrowPosition]',
@@ -91,20 +139,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['euiPopoverArrowPosition']
             }] } });
 
+/**
+ * @description
+ * A flexible popover component that displays content in an overlay positioned relative to an origin element.
+ *
+ * The popover can be positioned at four different positions (top, right, bottom, left) relative to the
+ * origin element, with automatic fallback positions if the preferred position doesn't fit in the viewport.
+ * It supports various visual styles, dismissal behaviors, and size variants.
+ *
+ * @example
+ * // Basic usage with a trigger element:
+ * <button #triggerButton (click)="popover.openPopover(triggerButton)">Open Popover</button>
+ * <eui-popover #popover>
+ *   <div>Popover content</div>
+ * </eui-popover>
+ *
+ * @example
+ * // With custom configuration:
+ * <eui-popover
+ *   position="right"
+ *   type="colored-header"
+ *   [hasBackDrop]="true"
+ *   [hasCloseButton]="false"
+ *   (popoverOpen)="onPopoverOpen()"
+ *   title="Popover Title">
+ *   <div>Popover content</div>
+ * </eui-popover>
+ */
 class EuiPopoverComponent {
     constructor(overlay, viewContainerRef, scrollDispatcher, baseStatesDirective) {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
         this.scrollDispatcher = scrollDispatcher;
         this.baseStatesDirective = baseStatesDirective;
+        /**
+         * Determines the preferred placement of the popover relative to its origin element.
+         * The component will attempt to use this position first, falling back to alternatives
+         * if there's not enough space in the viewport.
+         *
+         * @default 'bottom'
+         */
         this.position = 'bottom';
+        /**
+         * Visual styling variant for the popover.
+         * - 'default': Standard popover with subtle border and drop shadow
+         * - 'flat': Popover without shadows, using only border for definition
+         * - 'colored-header': Popover with an accent-colored header area
+         * - 'colored-solid': Popover with accent color applied to the entire component
+         *
+         * @default 'default'
+         */
         this.type = 'default';
+        /**
+         * Custom width for the popover.
+         * Can be specified in any valid CSS unit (px, %, em, etc).
+         * When null, the popover width is determined by its content.
+         *
+         * @default null
+         */
         this.width = null;
+        /**
+         * Whether to show a semi-transparent backdrop behind the popover.
+         * When true, creates a visual overlay that dims the rest of the UI.
+         *
+         * @default false
+         */
         this.hasBackDrop = false;
+        /**
+         * Whether to show a close button in the top-right corner of the popover.
+         * When clicked, the close button will dismiss the popover.
+         *
+         * @default true
+         */
         this.hasCloseButton = true;
+        /**
+         * Whether the popover can be dismissed by clicking outside its boundaries.
+         * When false, the popover will remain open until explicitly closed via code
+         * or by clicking the close button (if available).
+         *
+         * @default true
+         */
         this.isDismissable = true;
+        /**
+         * Event emitted when a click occurs outside the popover boundaries.
+         * Only emitted when isDismissable is true.
+         */
         this.outsideClick = new EventEmitter();
+        /**
+         * Event emitted when the popover is opened.
+         * Fires after the popover content has been attached to the DOM and positioned.
+         */
         this.popoverOpen = new EventEmitter();
+        /**
+         * Event emitted when the popover is closed.
+         * Fires after the popover content has been removed from the DOM.
+         */
         this.popoverClose = new EventEmitter();
         this.destroy$ = new Subject();
         this.isOpen$ = new BehaviorSubject(false);
@@ -145,7 +274,7 @@ class EuiPopoverComponent {
      * @usageNotes
      * ```html
      * <eui-popover #popover>
-     *     \@if (popover.isOpen) {
+     *     @if (popover.isOpen) {
      *          <my-component></my-component>
      *     }
      * </eui-popover>
@@ -155,15 +284,21 @@ class EuiPopoverComponent {
     get isOpen() {
         return this.isOpen$.value;
     }
+    /**
+     * Updates the position strategy when content changes.
+     * Recalculates and updates the overlay position to handle content size changes.
+     */
     onContentChange() {
         this.positionStrategy = this.getPositionStrategy();
         this.positionStrategyUpdate$.next();
         this.overlayRef.updatePositionStrategy(this.positionStrategy);
     }
     /**
-     * Open a popover
+     * Opens the popover relative to the provided origin element.
+     * Sets up scroll monitoring, position strategy, and attaches the popover content to the overlay.
+     * Emits the popoverOpen event when complete.
      *
-     * @param origin Origin of the popover position
+     * @param origin - Reference to the element that triggers the popover
      */
     openPopover(origin) {
         if (!this.isOpen) {
@@ -181,9 +316,10 @@ class EuiPopoverComponent {
                 scrollStrategy,
                 disposeOnNavigation: true,
                 width: this.width,
-                panelClass: this.baseStatesDirective.getCssClasses('eui-19 eui-popover').split(' '),
+                panelClass: this.baseStatesDirective.getCssClasses('eui-popover').split(' '),
             });
             this.overlayRef.attach(this.templatePortal);
+            document.querySelector('.cdk-overlay-container')?.classList.add('eui-19');
             this.positionStrategy = positionStrategy;
             this.positionStrategyUpdate$.next();
             this.overlayRef
@@ -200,7 +336,8 @@ class EuiPopoverComponent {
         }
     }
     /**
-     * Close a popover
+     * Closes the popover.
+     * Cleans up subscriptions, disposes the overlay, and emits the popoverClose event.
      */
     closePopover() {
         this.scrollDispatcherSubscription.unsubscribe();
@@ -210,16 +347,24 @@ class EuiPopoverComponent {
         this.popoverClose.emit();
     }
     /**
-     * Reacts on the Esc keydown event to close the popup. Can be used as alternative to the close icon button,
-     * or as the main way to close the popup when hasCloseButton is false
+     * Handles keyboard events to allow closing the popover with the Escape key.
+     * Can be used as an alternative to the close button or when hasCloseButton is false.
      *
-     * @param event The key event pressed
+     * @param event - The keyboard event
      */
     onKeyDown(event) {
         if (event.key === 'Escape') {
             this.closePopover();
         }
     }
+    /**
+     * Checks whether the origin element is currently visible within the scrollable parent's viewport.
+     * Used to determine if the popover should remain open during scroll events.
+     *
+     * @param origin - The HTML element that triggers the popover
+     * @param scrollableParent - The scrollable container element
+     * @returns True if the origin element is visible in the viewport, otherwise false
+     */
     isVisible(origin, scrollableParent) {
         const originY = origin.getBoundingClientRect().y;
         const scrollableParentY = Math.abs(scrollableParent.getBoundingClientRect().y);
@@ -227,6 +372,13 @@ class EuiPopoverComponent {
         return ((originY > 0 && originY < scrollableParentHeight) ||
             (originY - scrollableParentY > 0 && originY < scrollableParentY + scrollableParentHeight));
     }
+    /**
+     * Creates and returns a position strategy for the overlay.
+     * Configures the overlay to be positioned relative to the origin element
+     * with fallback positions if the preferred one doesn't fit.
+     *
+     * @returns A flexible connected position strategy configured for the popover
+     */
     getPositionStrategy() {
         return this.overlay
             .position()
@@ -235,6 +387,11 @@ class EuiPopoverComponent {
             .withFlexibleDimensions(false)
             .withLockedPosition(true);
     }
+    /**
+     * Sets up the position stream for the arrow positioning directive.
+     * Creates an observable that emits the current popover position and the origin element's bounding rectangle
+     * whenever the popover's position changes.
+     */
     setPositionStream() {
         this.position$ = this.positionStrategyUpdate$.pipe(switchMap(() => this.positionStrategy.positionChanges), map(getPosition), distinctUntilChanged(), map((position) => {
             const rect = this.origin.nativeElement ?
@@ -243,10 +400,10 @@ class EuiPopoverComponent {
             return [position, rect];
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPopoverComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i1.ScrollDispatcher }, { token: i2.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: EuiPopoverComponent, isStandalone: false, selector: "eui-popover", inputs: { title: "title", position: "position", type: "type", width: "width", hasBackDrop: ["hasBackDrop", "hasBackDrop", booleanAttribute], hasCloseButton: ["hasCloseButton", "hasCloseButton", booleanAttribute], isDismissable: ["isDismissable", "isDismissable", booleanAttribute] }, outputs: { outsideClick: "outsideClick", popoverOpen: "popoverOpen", popoverClose: "popoverClose" }, viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeAuto", "euiSizeAuto", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<ng-template #templatePortalContent>\n    <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n</ng-template>\n\n<ng-template #template>\n    <div class=\"eui-19 eui-popover__container eui-popover__container--{{ type }}\" cdkTrapFocus cdkTrapFocusAutoCapture (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        @if (title) {\n            <div class=\"eui-popover__header\">\n                <div class=\"eui-popover__header-title\">{{ title }}</div>\n                @if (hasCloseButton) {\n                    <button\n                        class=\"eui-popover__header-close\"\n                        (click)=\"closePopover()\"\n                        euiButton\n                        euiSizeS\n                        euiIconButton\n                        euiRounded\n                        euiBasicButton\n                        aria-label=\"Dialog close icon\">\n                        <eui-icon-svg icon=\"close:outline\"></eui-icon-svg>\n                    </button>\n                }\n            </div>\n        }\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-19 .eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;color:var(--eui-c-neutral-lighter);display:none;height:0;position:absolute;width:0}.eui-19 .eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-c-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-19 .eui-popover-position--top .eui-popover__arrow,.eui-19 .eui-popover-position--bottom .eui-popover__arrow,.eui-19 .eui-popover-position--left .eui-popover__arrow,.eui-19 .eui-popover-position--right .eui-popover__arrow{display:block}.eui-19 .eui-popover-position--top .eui-popover__arrow,.eui-19 .eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-19 .eui-popover-position--top .eui-popover__arrow-inner,.eui-19 .eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-19 .eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-19 .eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-19 .eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-19 .eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-19 .eui-popover-position--left .eui-popover__arrow,.eui-19 .eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-8px)}.eui-19 .eui-popover-position--left .eui-popover__arrow-inner,.eui-19 .eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-19 .eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-19 .eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-19 .eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-19 .eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-c-white);left:2px}.eui-19 .eui-popover{display:flex;width:25rem}.eui-19 .eui-popover__container{background-color:var(--eui-c-white);border:var(--eui-bw-xs) solid var(--eui-c-neutral-lightest);border-radius:var(--eui-br-m);box-shadow:var(--eui-sh-2);width:100%}.eui-19 .eui-popover__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;justify-content:space-between;padding:var(--eui-s-xs)}.eui-19 .eui-popover__header-title{font:var(--eui-f-m-bold)}.eui-19 .eui-popover__content{padding:var(--eui-s-xs)}.eui-19 .eui-popover--has-custom-width{width:100%!important}.eui-19 .eui-popover--size-s{max-width:12rem;width:12rem}.eui-19 .eui-popover--size-m{max-width:25rem;width:25rem}.eui-19 .eui-popover--size-l{max-width:35rem;width:35rem}.eui-19 .eui-popover--size-xl{max-width:50rem;width:50rem}.eui-19 .eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-19 .eui-popover--size-auto{max-width:none;width:auto}:root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}.eui-19 .eui-popover__container--flat .eui-popover__header{border-bottom:none;padding-bottom:0}.eui-19 .eui-popover__container--colored-header{background:none;border:var(--eui-bw-none);border-color:var(--eui-c-neutral)}.eui-19 .eui-popover__container--colored-header .eui-popover__header{background-color:var(--eui-c-neutral);border:var(--eui-bw-none);color:var(--eui-c-white);border-top-left-radius:var(--eui-br-m);border-top-right-radius:var(--eui-br-m)}.eui-19 .eui-popover__container--colored-header .eui-popover__header+.eui-popover__content{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.eui-19 .eui-popover__container--colored-header .eui-popover__header-title{color:var(--eui-c-white)}.eui-19 .eui-popover__container--colored-header .eui-popover__header-close .eui-icon-svg>svg{color:var(--eui-c-white)!important}.eui-19 .eui-popover__container--colored-header .eui-popover__header-close:hover .eui-icon-svg>svg,.eui-19 .eui-popover__container--colored-header .eui-popover__header-close:active .eui-icon-svg>svg{color:var(--eui-c-neutral)!important}.eui-19 .eui-popover__container--colored-header .eui-popover__content{background-color:var(--eui-c-white);border-color:inherit;border-radius:var(--eui-br-m);border-style:solid;border-width:2px}.eui-19 .eui-popover__container--colored-header.eui-popover--left .eui-popover__arrow-inner{right:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--right .eui-popover__arrow-inner{left:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--top .eui-popover__arrow-inner{bottom:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--bottom .eui-popover__arrow-inner,.eui-19 .eui-popover__container--colored-header .eui-popover__arrow-inner{border:var(--eui-bw-none)}.eui-19 .eui-popover__container--colored-solid{background-color:var(--eui-c-neutral);border-color:var(--eui-c-neutral);border-style:none}.eui-19 .eui-popover__container--colored-solid .eui-popover__header{border-bottom-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-title,.eui-19 .eui-popover__container--colored-solid .eui-popover__content{color:var(--eui-c-white)}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close .eui-icon-svg>svg{color:var(--eui-c-white)!important}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close:hover .eui-icon-svg>svg,.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close:active .eui-icon-svg>svg{color:var(--eui-c-neutral)!important}.eui-19 .eui-popover__container--colored-solid .eui-popover__arrow-inner{border:var(--eui-bw-none)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i7.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPopoverComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i1.ScrollDispatcher }, { token: i2.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: EuiPopoverComponent, isStandalone: false, selector: "eui-popover", inputs: { title: "title", position: "position", type: "type", width: "width", hasBackDrop: ["hasBackDrop", "hasBackDrop", booleanAttribute], hasCloseButton: ["hasCloseButton", "hasCloseButton", booleanAttribute], isDismissable: ["isDismissable", "isDismissable", booleanAttribute] }, outputs: { outsideClick: "outsideClick", popoverOpen: "popoverOpen", popoverClose: "popoverClose" }, viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeAuto", "euiSizeAuto", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<ng-template #templatePortalContent>\n    <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n</ng-template>\n\n<ng-template #template>\n    <div class=\"eui-popover__container eui-popover__container--{{ type }}\" cdkTrapFocus cdkTrapFocusAutoCapture (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        @if (title) {\n            <div class=\"eui-popover__header\">\n                <div class=\"eui-popover__header-title\">{{ title }}</div>\n                @if (hasCloseButton) {\n                    <button\n                        class=\"eui-popover__header-close\"\n                        (click)=\"closePopover()\"\n                        euiButton\n                        euiSizeS\n                        euiIconButton\n                        euiRounded\n                        euiBasicButton\n                        aria-label=\"Dialog close icon\">\n                        <eui-icon-svg icon=\"close:outline\"></eui-icon-svg>\n                    </button>\n                }\n            </div>\n        }\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-19 .eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;color:var(--eui-c-neutral-lighter);display:none;height:0;position:absolute;width:0}.eui-19 .eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-c-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-19 .eui-popover-position--top .eui-popover__arrow,.eui-19 .eui-popover-position--bottom .eui-popover__arrow,.eui-19 .eui-popover-position--left .eui-popover__arrow,.eui-19 .eui-popover-position--right .eui-popover__arrow{display:block}.eui-19 .eui-popover-position--top .eui-popover__arrow,.eui-19 .eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-19 .eui-popover-position--top .eui-popover__arrow-inner,.eui-19 .eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-19 .eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-19 .eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-19 .eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-19 .eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-19 .eui-popover-position--left .eui-popover__arrow,.eui-19 .eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-8px)}.eui-19 .eui-popover-position--left .eui-popover__arrow-inner,.eui-19 .eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-19 .eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-19 .eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-19 .eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-19 .eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-c-white);left:2px}.eui-19 .eui-popover{display:flex;width:25rem}.eui-19 .eui-popover__container{background-color:var(--eui-c-white);border:var(--eui-bw-xs) solid var(--eui-c-neutral-lightest);border-radius:var(--eui-br-m);box-shadow:var(--eui-sh-2);width:100%}.eui-19 .eui-popover__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;justify-content:space-between;padding:var(--eui-s-xs)}.eui-19 .eui-popover__header-title{font:var(--eui-f-m-bold)}.eui-19 .eui-popover__content{padding:var(--eui-s-xs)}.eui-19 .eui-popover--has-custom-width{width:100%!important}.eui-19 .eui-popover--size-s{max-width:12rem;width:12rem}.eui-19 .eui-popover--size-m{max-width:25rem;width:25rem}.eui-19 .eui-popover--size-l{max-width:35rem;width:35rem}.eui-19 .eui-popover--size-xl{max-width:50rem;width:50rem}.eui-19 .eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-19 .eui-popover--size-auto{max-width:none;width:auto}:root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}.eui-19 .eui-popover__container--flat .eui-popover__header{border-bottom:none;padding-bottom:0}.eui-19 .eui-popover__container--colored-header{background:none;border:var(--eui-bw-none);border-color:var(--eui-c-neutral)}.eui-19 .eui-popover__container--colored-header .eui-popover__header{background-color:var(--eui-c-neutral);border:var(--eui-bw-none);color:var(--eui-c-white);border-top-left-radius:var(--eui-br-m);border-top-right-radius:var(--eui-br-m)}.eui-19 .eui-popover__container--colored-header .eui-popover__header+.eui-popover__content{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.eui-19 .eui-popover__container--colored-header .eui-popover__header-title{color:var(--eui-c-white)}.eui-19 .eui-popover__container--colored-header .eui-popover__header-close .eui-icon-svg>svg{color:var(--eui-c-white)!important}.eui-19 .eui-popover__container--colored-header .eui-popover__header-close:hover .eui-icon-svg>svg,.eui-19 .eui-popover__container--colored-header .eui-popover__header-close:active .eui-icon-svg>svg{color:var(--eui-c-neutral)!important}.eui-19 .eui-popover__container--colored-header .eui-popover__content{background-color:var(--eui-c-white);border-color:inherit;border-radius:var(--eui-br-m);border-style:solid;border-width:2px}.eui-19 .eui-popover__container--colored-header.eui-popover--left .eui-popover__arrow-inner{right:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--right .eui-popover__arrow-inner{left:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--top .eui-popover__arrow-inner{bottom:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--bottom .eui-popover__arrow-inner,.eui-19 .eui-popover__container--colored-header .eui-popover__arrow-inner{border:var(--eui-bw-none)}.eui-19 .eui-popover__container--colored-solid{background-color:var(--eui-c-neutral);border-color:var(--eui-c-neutral);border-style:none}.eui-19 .eui-popover__container--colored-solid .eui-popover__header{border-bottom-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-title,.eui-19 .eui-popover__container--colored-solid .eui-popover__content{color:var(--eui-c-white)}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close .eui-icon-svg>svg{color:var(--eui-c-white)!important}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close:hover .eui-icon-svg>svg,.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close:active .eui-icon-svg>svg{color:var(--eui-c-neutral)!important}.eui-19 .eui-popover__container--colored-solid .eui-popover__arrow-inner{border:var(--eui-bw-none)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i7.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: "19.1.7", ngImport: i0, type: EuiPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, hostDirectives: [
                         {
@@ -261,7 +418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                                 'euiSizeVariant',
                             ],
                         },
-                    ], template: "<ng-template #templatePortalContent>\n    <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n</ng-template>\n\n<ng-template #template>\n    <div class=\"eui-19 eui-popover__container eui-popover__container--{{ type }}\" cdkTrapFocus cdkTrapFocusAutoCapture (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        @if (title) {\n            <div class=\"eui-popover__header\">\n                <div class=\"eui-popover__header-title\">{{ title }}</div>\n                @if (hasCloseButton) {\n                    <button\n                        class=\"eui-popover__header-close\"\n                        (click)=\"closePopover()\"\n                        euiButton\n                        euiSizeS\n                        euiIconButton\n                        euiRounded\n                        euiBasicButton\n                        aria-label=\"Dialog close icon\">\n                        <eui-icon-svg icon=\"close:outline\"></eui-icon-svg>\n                    </button>\n                }\n            </div>\n        }\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-19 .eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;color:var(--eui-c-neutral-lighter);display:none;height:0;position:absolute;width:0}.eui-19 .eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-c-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-19 .eui-popover-position--top .eui-popover__arrow,.eui-19 .eui-popover-position--bottom .eui-popover__arrow,.eui-19 .eui-popover-position--left .eui-popover__arrow,.eui-19 .eui-popover-position--right .eui-popover__arrow{display:block}.eui-19 .eui-popover-position--top .eui-popover__arrow,.eui-19 .eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-19 .eui-popover-position--top .eui-popover__arrow-inner,.eui-19 .eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-19 .eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-19 .eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-19 .eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-19 .eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-19 .eui-popover-position--left .eui-popover__arrow,.eui-19 .eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-8px)}.eui-19 .eui-popover-position--left .eui-popover__arrow-inner,.eui-19 .eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-19 .eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-19 .eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-19 .eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-19 .eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-c-white);left:2px}.eui-19 .eui-popover{display:flex;width:25rem}.eui-19 .eui-popover__container{background-color:var(--eui-c-white);border:var(--eui-bw-xs) solid var(--eui-c-neutral-lightest);border-radius:var(--eui-br-m);box-shadow:var(--eui-sh-2);width:100%}.eui-19 .eui-popover__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;justify-content:space-between;padding:var(--eui-s-xs)}.eui-19 .eui-popover__header-title{font:var(--eui-f-m-bold)}.eui-19 .eui-popover__content{padding:var(--eui-s-xs)}.eui-19 .eui-popover--has-custom-width{width:100%!important}.eui-19 .eui-popover--size-s{max-width:12rem;width:12rem}.eui-19 .eui-popover--size-m{max-width:25rem;width:25rem}.eui-19 .eui-popover--size-l{max-width:35rem;width:35rem}.eui-19 .eui-popover--size-xl{max-width:50rem;width:50rem}.eui-19 .eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-19 .eui-popover--size-auto{max-width:none;width:auto}:root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}.eui-19 .eui-popover__container--flat .eui-popover__header{border-bottom:none;padding-bottom:0}.eui-19 .eui-popover__container--colored-header{background:none;border:var(--eui-bw-none);border-color:var(--eui-c-neutral)}.eui-19 .eui-popover__container--colored-header .eui-popover__header{background-color:var(--eui-c-neutral);border:var(--eui-bw-none);color:var(--eui-c-white);border-top-left-radius:var(--eui-br-m);border-top-right-radius:var(--eui-br-m)}.eui-19 .eui-popover__container--colored-header .eui-popover__header+.eui-popover__content{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.eui-19 .eui-popover__container--colored-header .eui-popover__header-title{color:var(--eui-c-white)}.eui-19 .eui-popover__container--colored-header .eui-popover__header-close .eui-icon-svg>svg{color:var(--eui-c-white)!important}.eui-19 .eui-popover__container--colored-header .eui-popover__header-close:hover .eui-icon-svg>svg,.eui-19 .eui-popover__container--colored-header .eui-popover__header-close:active .eui-icon-svg>svg{color:var(--eui-c-neutral)!important}.eui-19 .eui-popover__container--colored-header .eui-popover__content{background-color:var(--eui-c-white);border-color:inherit;border-radius:var(--eui-br-m);border-style:solid;border-width:2px}.eui-19 .eui-popover__container--colored-header.eui-popover--left .eui-popover__arrow-inner{right:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--right .eui-popover__arrow-inner{left:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--top .eui-popover__arrow-inner{bottom:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--bottom .eui-popover__arrow-inner,.eui-19 .eui-popover__container--colored-header .eui-popover__arrow-inner{border:var(--eui-bw-none)}.eui-19 .eui-popover__container--colored-solid{background-color:var(--eui-c-neutral);border-color:var(--eui-c-neutral);border-style:none}.eui-19 .eui-popover__container--colored-solid .eui-popover__header{border-bottom-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-title,.eui-19 .eui-popover__container--colored-solid .eui-popover__content{color:var(--eui-c-white)}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close .eui-icon-svg>svg{color:var(--eui-c-white)!important}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close:hover .eui-icon-svg>svg,.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close:active .eui-icon-svg>svg{color:var(--eui-c-neutral)!important}.eui-19 .eui-popover__container--colored-solid .eui-popover__arrow-inner{border:var(--eui-bw-none)}\n"] }]
+                    ], template: "<ng-template #templatePortalContent>\n    <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n</ng-template>\n\n<ng-template #template>\n    <div class=\"eui-popover__container eui-popover__container--{{ type }}\" cdkTrapFocus cdkTrapFocusAutoCapture (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        @if (title) {\n            <div class=\"eui-popover__header\">\n                <div class=\"eui-popover__header-title\">{{ title }}</div>\n                @if (hasCloseButton) {\n                    <button\n                        class=\"eui-popover__header-close\"\n                        (click)=\"closePopover()\"\n                        euiButton\n                        euiSizeS\n                        euiIconButton\n                        euiRounded\n                        euiBasicButton\n                        aria-label=\"Dialog close icon\">\n                        <eui-icon-svg icon=\"close:outline\"></eui-icon-svg>\n                    </button>\n                }\n            </div>\n        }\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-19 .eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;color:var(--eui-c-neutral-lighter);display:none;height:0;position:absolute;width:0}.eui-19 .eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-c-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-19 .eui-popover-position--top .eui-popover__arrow,.eui-19 .eui-popover-position--bottom .eui-popover__arrow,.eui-19 .eui-popover-position--left .eui-popover__arrow,.eui-19 .eui-popover-position--right .eui-popover__arrow{display:block}.eui-19 .eui-popover-position--top .eui-popover__arrow,.eui-19 .eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-19 .eui-popover-position--top .eui-popover__arrow-inner,.eui-19 .eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-19 .eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-19 .eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-19 .eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-19 .eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-19 .eui-popover-position--left .eui-popover__arrow,.eui-19 .eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-8px)}.eui-19 .eui-popover-position--left .eui-popover__arrow-inner,.eui-19 .eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-19 .eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-19 .eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-19 .eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-19 .eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-c-white);left:2px}.eui-19 .eui-popover{display:flex;width:25rem}.eui-19 .eui-popover__container{background-color:var(--eui-c-white);border:var(--eui-bw-xs) solid var(--eui-c-neutral-lightest);border-radius:var(--eui-br-m);box-shadow:var(--eui-sh-2);width:100%}.eui-19 .eui-popover__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;justify-content:space-between;padding:var(--eui-s-xs)}.eui-19 .eui-popover__header-title{font:var(--eui-f-m-bold)}.eui-19 .eui-popover__content{padding:var(--eui-s-xs)}.eui-19 .eui-popover--has-custom-width{width:100%!important}.eui-19 .eui-popover--size-s{max-width:12rem;width:12rem}.eui-19 .eui-popover--size-m{max-width:25rem;width:25rem}.eui-19 .eui-popover--size-l{max-width:35rem;width:35rem}.eui-19 .eui-popover--size-xl{max-width:50rem;width:50rem}.eui-19 .eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-19 .eui-popover--size-auto{max-width:none;width:auto}:root{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-lightest)}html.eui-t-dark{--_eui-scrollbars-foreground-color: var(--eui-c-neutral-light)}.eui-19 .eui-popover__container--flat .eui-popover__header{border-bottom:none;padding-bottom:0}.eui-19 .eui-popover__container--colored-header{background:none;border:var(--eui-bw-none);border-color:var(--eui-c-neutral)}.eui-19 .eui-popover__container--colored-header .eui-popover__header{background-color:var(--eui-c-neutral);border:var(--eui-bw-none);color:var(--eui-c-white);border-top-left-radius:var(--eui-br-m);border-top-right-radius:var(--eui-br-m)}.eui-19 .eui-popover__container--colored-header .eui-popover__header+.eui-popover__content{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.eui-19 .eui-popover__container--colored-header .eui-popover__header-title{color:var(--eui-c-white)}.eui-19 .eui-popover__container--colored-header .eui-popover__header-close .eui-icon-svg>svg{color:var(--eui-c-white)!important}.eui-19 .eui-popover__container--colored-header .eui-popover__header-close:hover .eui-icon-svg>svg,.eui-19 .eui-popover__container--colored-header .eui-popover__header-close:active .eui-icon-svg>svg{color:var(--eui-c-neutral)!important}.eui-19 .eui-popover__container--colored-header .eui-popover__content{background-color:var(--eui-c-white);border-color:inherit;border-radius:var(--eui-br-m);border-style:solid;border-width:2px}.eui-19 .eui-popover__container--colored-header.eui-popover--left .eui-popover__arrow-inner{right:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--right .eui-popover__arrow-inner{left:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--top .eui-popover__arrow-inner{bottom:3px}.eui-19 .eui-popover__container--colored-header.eui-popover--bottom .eui-popover__arrow-inner,.eui-19 .eui-popover__container--colored-header .eui-popover__arrow-inner{border:var(--eui-bw-none)}.eui-19 .eui-popover__container--colored-solid{background-color:var(--eui-c-neutral);border-color:var(--eui-c-neutral);border-style:none}.eui-19 .eui-popover__container--colored-solid .eui-popover__header{border-bottom-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-title,.eui-19 .eui-popover__container--colored-solid .eui-popover__content{color:var(--eui-c-white)}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close .eui-icon-svg>svg{color:var(--eui-c-white)!important}.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close:hover .eui-icon-svg>svg,.eui-19 .eui-popover__container--colored-solid .eui-popover__header-close:active .eui-icon-svg>svg{color:var(--eui-c-neutral)!important}.eui-19 .eui-popover__container--colored-solid .eui-popover__arrow-inner{border:var(--eui-bw-none)}\n"] }]
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i1.ScrollDispatcher }, { type: i2.BaseStatesDirective }], propDecorators: { title: [{
                 type: Input
             }], position: [{
@@ -290,15 +447,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: ['templatePortalContent']
             }] } });
 
+/**
+ * Module that provides the EUI Popover component and related directives.
+ *
+ * This module exports the EuiPopoverComponent which allows for creating popover overlays
+ * positioned relative to trigger elements. Popovers can be configured with various
+ * positioning options, visual styles, and dismissal behaviors.
+ *
+ * @example
+ * import { EuiPopoverModule } from '@eui/components/eui-popover';
+ *
+ * @NgModule({
+ *   imports: [
+ *     EuiPopoverModule
+ *   ]
+ * })
+ * export class MyModule {}
+ */
 class EuiPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: EuiPopoverModule, declarations: [EuiPopoverComponent, EuiPopoverArrowPositionDirective], imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, EuiIconButtonModule, A11yModule, ObserversModule], exports: [EuiPopoverComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPopoverModule, imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, EuiIconButtonModule, A11yModule, ObserversModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: EuiPopoverModule, declarations: [EuiPopoverComponent, EuiPopoverArrowPositionDirective], imports: [CommonModule, OverlayModule, EuiButtonComponent, EuiIconModule, EuiIconButtonModule, A11yModule, ObserversModule], exports: [EuiPopoverComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPopoverModule, imports: [CommonModule, OverlayModule, EuiButtonComponent, EuiIconModule, EuiIconButtonModule, A11yModule, ObserversModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: EuiPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiPopoverModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, OverlayModule, EuiButtonModule, EuiIconModule, EuiIconButtonModule, A11yModule, ObserversModule],
+                    imports: [CommonModule, OverlayModule, EuiButtonComponent, EuiIconModule, EuiIconButtonModule, A11yModule, ObserversModule],
                     declarations: [EuiPopoverComponent, EuiPopoverArrowPositionDirective],
                     exports: [EuiPopoverComponent],
                 }]