npm - @eui/components - Versions diffs - 17.0.0-next.4 → 17.0.0-next.6 - Mend

@eui/components 17.0.0-next.4 → 17.0.0-next.6

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

Files changed (557) hide show

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

@@ -71,12 +71,12 @@ class EuiModalPickerComponent {
     clearInput() {
         this.form.get('search').patchValue('');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiModalPickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG }, { token: i1.EuiDialogService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.3", type: EuiModalPickerComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"eui-modal-picker-container\">\n    <div class=\"eui-modal-picker__search-container eui-clearable-input-wrapper\" [formGroup]=\"form\">\n        <input euiInputText placeholder=\"{{ config.placeholder }}\" formControlName=\"search\" />\n        <span\n            class=\"eui-clearable-input-wrapper__clear\"\n            (click)=\"clearInput()\"\n            *ngIf=\"form.get('search').value && form.get('search').value.length > 0\"></span>\n    </div>\n    <div class=\"eui-modal-picker__items-container\">\n        <span class=\"eui-modal-picker__items__item col-3\" *ngFor=\"let item of filteredData\">\n            <eui-chip [euiPrimary]=\"item.isSelected\" [euiSecondary]=\"!item.isSelected\" (click)=\"toggleSelected(item.id)\">\n                <span (click)=\"toggleSelected(item.id)\">{{ item.label }}</span>\n            </eui-chip>\n        </span>\n    </div>\n</div>\n", styles: [".eui-picker-container{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);cursor:pointer;font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-2xs);position:relative;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.eui-picker-container:focus{border:1px solid var(--eui-base-color-primary-75);box-shadow:var(--eui-base-shadow-1)}.eui-picker-container .eui-picker__nb-selected-badge{position:absolute;right:0;top:-12px}.eui-picker-container.eui-picker-container--disabled{cursor:default}eui-picker.ng-invalid.ng-dirty .eui-picker-container{border-color:var(--eui-base-color-danger-100)}.eui-modal-picker-container .eui-modal-picker__search-container{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__search-container input{width:100%}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper{align-items:center;background-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-35);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-m);-webkit-user-select:none;user-select:none}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:before{position:absolute;right:var(--eui-base-spacing-s)}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:hover{color:var(--eui-base-color-grey-100)}.eui-modal-picker-container .eui-modal-picker__items-container{display:flex;flex-wrap:wrap}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item eui-chip{cursor:pointer;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiModalPickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG }, { token: i1.EuiDialogService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiModalPickerComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"eui-modal-picker-container\">\n    <div class=\"eui-modal-picker__search-container eui-clearable-input-wrapper\" [formGroup]=\"form\">\n        <input euiInputText placeholder=\"{{ config.placeholder }}\" formControlName=\"search\" />\n        <span\n            class=\"eui-clearable-input-wrapper__clear\"\n            (click)=\"clearInput()\"\n            *ngIf=\"form.get('search').value && form.get('search').value.length > 0\"></span>\n    </div>\n    <div class=\"eui-modal-picker__items-container\">\n        <span class=\"eui-modal-picker__items__item col-3\" *ngFor=\"let item of filteredData\">\n            <eui-chip [euiPrimary]=\"item.isSelected\" [euiSecondary]=\"!item.isSelected\" (click)=\"toggleSelected(item.id)\">\n                <span (click)=\"toggleSelected(item.id)\">{{ item.label }}</span>\n            </eui-chip>\n        </span>\n    </div>\n</div>\n", styles: [".eui-picker-container{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);cursor:pointer;font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-2xs);position:relative;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.eui-picker-container:focus{border:1px solid var(--eui-base-color-primary-75);box-shadow:var(--eui-base-shadow-1)}.eui-picker-container .eui-picker__nb-selected-badge{position:absolute;right:0;top:-12px}.eui-picker-container.eui-picker-container--disabled{cursor:default}eui-picker.ng-invalid.ng-dirty .eui-picker-container{border-color:var(--eui-base-color-danger-100)}.eui-modal-picker-container .eui-modal-picker__search-container{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__search-container input{width:100%}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper{align-items:center;background-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-35);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-m);-webkit-user-select:none;user-select:none}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:before{position:absolute;right:var(--eui-base-spacing-s)}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:hover{color:var(--eui-base-color-greyr-100)}.eui-modal-picker-container .eui-modal-picker__items-container{display:flex;flex-wrap:wrap}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item eui-chip{cursor:pointer;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiModalPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiModalPickerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-modal-picker-container\">\n    <div class=\"eui-modal-picker__search-container eui-clearable-input-wrapper\" [formGroup]=\"form\">\n        <input euiInputText placeholder=\"{{ config.placeholder }}\" formControlName=\"search\" />\n        <span\n            class=\"eui-clearable-input-wrapper__clear\"\n            (click)=\"clearInput()\"\n            *ngIf=\"form.get('search').value && form.get('search').value.length > 0\"></span>\n    </div>\n    <div class=\"eui-modal-picker__items-container\">\n        <span class=\"eui-modal-picker__items__item col-3\" *ngFor=\"let item of filteredData\">\n            <eui-chip [euiPrimary]=\"item.isSelected\" [euiSecondary]=\"!item.isSelected\" (click)=\"toggleSelected(item.id)\">\n                <span (click)=\"toggleSelected(item.id)\">{{ item.label }}</span>\n            </eui-chip>\n        </span>\n    </div>\n</div>\n", styles: [".eui-picker-container{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);cursor:pointer;font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-2xs);position:relative;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.eui-picker-container:focus{border:1px solid var(--eui-base-color-primary-75);box-shadow:var(--eui-base-shadow-1)}.eui-picker-container .eui-picker__nb-selected-badge{position:absolute;right:0;top:-12px}.eui-picker-container.eui-picker-container--disabled{cursor:default}eui-picker.ng-invalid.ng-dirty .eui-picker-container{border-color:var(--eui-base-color-danger-100)}.eui-modal-picker-container .eui-modal-picker__search-container{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__search-container input{width:100%}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper{align-items:center;background-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-35);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-m);-webkit-user-select:none;user-select:none}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:before{position:absolute;right:var(--eui-base-spacing-s)}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:hover{color:var(--eui-base-color-grey-100)}.eui-modal-picker-container .eui-modal-picker__items-container{display:flex;flex-wrap:wrap}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item eui-chip{cursor:pointer;display:block}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-modal-picker-container\">\n    <div class=\"eui-modal-picker__search-container eui-clearable-input-wrapper\" [formGroup]=\"form\">\n        <input euiInputText placeholder=\"{{ config.placeholder }}\" formControlName=\"search\" />\n        <span\n            class=\"eui-clearable-input-wrapper__clear\"\n            (click)=\"clearInput()\"\n            *ngIf=\"form.get('search').value && form.get('search').value.length > 0\"></span>\n    </div>\n    <div class=\"eui-modal-picker__items-container\">\n        <span class=\"eui-modal-picker__items__item col-3\" *ngFor=\"let item of filteredData\">\n            <eui-chip [euiPrimary]=\"item.isSelected\" [euiSecondary]=\"!item.isSelected\" (click)=\"toggleSelected(item.id)\">\n                <span (click)=\"toggleSelected(item.id)\">{{ item.label }}</span>\n            </eui-chip>\n        </span>\n    </div>\n</div>\n", styles: [".eui-picker-container{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);cursor:pointer;font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-2xs);position:relative;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.eui-picker-container:focus{border:1px solid var(--eui-base-color-primary-75);box-shadow:var(--eui-base-shadow-1)}.eui-picker-container .eui-picker__nb-selected-badge{position:absolute;right:0;top:-12px}.eui-picker-container.eui-picker-container--disabled{cursor:default}eui-picker.ng-invalid.ng-dirty .eui-picker-container{border-color:var(--eui-base-color-danger-100)}.eui-modal-picker-container .eui-modal-picker__search-container{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__search-container input{width:100%}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper{align-items:center;background-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-35);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-m);-webkit-user-select:none;user-select:none}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:before{position:absolute;right:var(--eui-base-spacing-s)}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:hover{color:var(--eui-base-color-greyr-100)}.eui-modal-picker-container .eui-modal-picker__items-container{display:flex;flex-wrap:wrap}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item eui-chip{cursor:pointer;display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DYNAMIC_COMPONENT_CONFIG]
@@ -105,12 +105,14 @@ class EuiPickerComponent extends BaseDirective {
         this.placeholder = '';
         this.modalTitle = '';
         this.items = [];
+        // TODO: fix it for v17 - Output bindings, including aliases, should not be named as standard DOM events
         this.change = new EventEmitter();
         this.itemsChange = new EventEmitter();
         this.itemsSelected = [];
         this.isDisabled = false;
         this.accept = new EventEmitter();
         this.dismiss = new EventEmitter();
+        // TODO: fix it for v17 - Output bindings, including aliases, should not be named as standard DOM events
         this.close = new EventEmitter();
         this.clickOutside = new EventEmitter();
         this._hasSearchFilter = false;
@@ -185,16 +187,16 @@ class EuiPickerComponent extends BaseDirective {
             this.euiDialogService.openDialog(config);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPickerComponent, deps: [{ token: i1.EuiDialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.3", type: EuiPickerComponent, selector: "eui-picker", inputs: { hasSearchFilter: "hasSearchFilter", hasNbSelectedInfo: "hasNbSelectedInfo", placeholder: "placeholder", modalTitle: "modalTitle", pickerTitle: "pickerTitle", items: "items" }, outputs: { change: "change", itemsChange: "itemsChange", accept: "accept", dismiss: "dismiss", close: "close", clickOutside: "clickOutside" }, host: { properties: { "class": "this.cssClasses" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPickerComponent, deps: [{ token: i1.EuiDialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiPickerComponent, selector: "eui-picker", inputs: { hasSearchFilter: "hasSearchFilter", hasNbSelectedInfo: "hasNbSelectedInfo", placeholder: "placeholder", modalTitle: "modalTitle", pickerTitle: "pickerTitle", items: "items" }, outputs: { change: "change", itemsChange: "itemsChange", accept: "accept", dismiss: "dismiss", close: "close", clickOutside: "clickOutside" }, host: { properties: { "class": "this.cssClasses" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => EuiPickerComponent)),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"eui-picker-container\" [class.eui-picker-container--disabled]=\"isDisabled\" (click)=\"openModal()\">\n    <eui-chip-list [euiOutline]=\"isDisabled\">\n        <eui-chip *ngFor=\"let item of itemsState.selected\">{{ item.label }}</eui-chip>\n    </eui-chip-list>\n\n    <eui-badge *ngIf=\"hasNbSelectedInfo\" styleClass=\"eui-picker__nb-selected-badge\" euiInfo euiSizeS\n        >{{ itemsState.selected.length }} selected</eui-badge\n    >\n</div>\n", styles: [".eui-picker-container{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);cursor:pointer;font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-2xs);position:relative;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.eui-picker-container:focus{border:1px solid var(--eui-base-color-primary-75);box-shadow:var(--eui-base-shadow-1)}.eui-picker-container .eui-picker__nb-selected-badge{position:absolute;right:0;top:-12px}.eui-picker-container.eui-picker-container--disabled{cursor:default}eui-picker.ng-invalid.ng-dirty .eui-picker-container{border-color:var(--eui-base-color-danger-100)}.eui-modal-picker-container .eui-modal-picker__search-container{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__search-container input{width:100%}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper{align-items:center;background-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-35);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-m);-webkit-user-select:none;user-select:none}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:before{position:absolute;right:var(--eui-base-spacing-s)}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:hover{color:var(--eui-base-color-grey-100)}.eui-modal-picker-container .eui-modal-picker__items-container{display:flex;flex-wrap:wrap}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item eui-chip{cursor:pointer;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i4$1.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid"], outputs: ["chipsInit", "chipRemove", "chipDragStarted", "chipDragReleased", "chipDropped", "chiplistFocus"] }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"eui-picker-container\" [class.eui-picker-container--disabled]=\"isDisabled\" (click)=\"openModal()\">\n    <eui-chip-list [euiOutline]=\"isDisabled\">\n        <eui-chip *ngFor=\"let item of itemsState.selected\">{{ item.label }}</eui-chip>\n    </eui-chip-list>\n\n    <eui-badge *ngIf=\"hasNbSelectedInfo\" styleClass=\"eui-picker__nb-selected-badge\" euiInfo euiSizeS\n        >{{ itemsState.selected.length }} selected</eui-badge\n    >\n</div>\n", styles: [".eui-picker-container{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);cursor:pointer;font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-2xs);position:relative;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.eui-picker-container:focus{border:1px solid var(--eui-base-color-primary-75);box-shadow:var(--eui-base-shadow-1)}.eui-picker-container .eui-picker__nb-selected-badge{position:absolute;right:0;top:-12px}.eui-picker-container.eui-picker-container--disabled{cursor:default}eui-picker.ng-invalid.ng-dirty .eui-picker-container{border-color:var(--eui-base-color-danger-100)}.eui-modal-picker-container .eui-modal-picker__search-container{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__search-container input{width:100%}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper{align-items:center;background-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-35);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-m);-webkit-user-select:none;user-select:none}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:before{position:absolute;right:var(--eui-base-spacing-s)}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:hover{color:var(--eui-base-color-greyr-100)}.eui-modal-picker-container .eui-modal-picker__items-container{display:flex;flex-wrap:wrap}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item eui-chip{cursor:pointer;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i4$1.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid"], outputs: ["chipsInit", "chipRemove", "chipDragStarted", "chipDragReleased", "chipDropped", "chiplistFocus"] }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -202,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3",
                             useExisting: forwardRef((() => EuiPickerComponent)),
                             multi: true,
                         },
-                    ], template: "<div class=\"eui-picker-container\" [class.eui-picker-container--disabled]=\"isDisabled\" (click)=\"openModal()\">\n    <eui-chip-list [euiOutline]=\"isDisabled\">\n        <eui-chip *ngFor=\"let item of itemsState.selected\">{{ item.label }}</eui-chip>\n    </eui-chip-list>\n\n    <eui-badge *ngIf=\"hasNbSelectedInfo\" styleClass=\"eui-picker__nb-selected-badge\" euiInfo euiSizeS\n        >{{ itemsState.selected.length }} selected</eui-badge\n    >\n</div>\n", styles: [".eui-picker-container{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);cursor:pointer;font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-2xs);position:relative;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.eui-picker-container:focus{border:1px solid var(--eui-base-color-primary-75);box-shadow:var(--eui-base-shadow-1)}.eui-picker-container .eui-picker__nb-selected-badge{position:absolute;right:0;top:-12px}.eui-picker-container.eui-picker-container--disabled{cursor:default}eui-picker.ng-invalid.ng-dirty .eui-picker-container{border-color:var(--eui-base-color-danger-100)}.eui-modal-picker-container .eui-modal-picker__search-container{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__search-container input{width:100%}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper{align-items:center;background-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-35);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-m);-webkit-user-select:none;user-select:none}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:before{position:absolute;right:var(--eui-base-spacing-s)}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:hover{color:var(--eui-base-color-grey-100)}.eui-modal-picker-container .eui-modal-picker__items-container{display:flex;flex-wrap:wrap}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item eui-chip{cursor:pointer;display:block}\n"] }]
+                    ], template: "<div class=\"eui-picker-container\" [class.eui-picker-container--disabled]=\"isDisabled\" (click)=\"openModal()\">\n    <eui-chip-list [euiOutline]=\"isDisabled\">\n        <eui-chip *ngFor=\"let item of itemsState.selected\">{{ item.label }}</eui-chip>\n    </eui-chip-list>\n\n    <eui-badge *ngIf=\"hasNbSelectedInfo\" styleClass=\"eui-picker__nb-selected-badge\" euiInfo euiSizeS\n        >{{ itemsState.selected.length }} selected</eui-badge\n    >\n</div>\n", styles: [".eui-picker-container{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);cursor:pointer;font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-2xs);position:relative;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.eui-picker-container:focus{border:1px solid var(--eui-base-color-primary-75);box-shadow:var(--eui-base-shadow-1)}.eui-picker-container .eui-picker__nb-selected-badge{position:absolute;right:0;top:-12px}.eui-picker-container.eui-picker-container--disabled{cursor:default}eui-picker.ng-invalid.ng-dirty .eui-picker-container{border-color:var(--eui-base-color-danger-100)}.eui-modal-picker-container .eui-modal-picker__search-container{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__search-container input{width:100%}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper{align-items:center;background-color:var(--eui-base-color-white);color:var(--eui-base-color-grey-35);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-m);-webkit-user-select:none;user-select:none}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:before{position:absolute;right:var(--eui-base-spacing-s)}.eui-modal-picker-container .eui-modal-picker__search-container .eui-clearable-input-wrapper:hover{color:var(--eui-base-color-greyr-100)}.eui-modal-picker-container .eui-modal-picker__items-container{display:flex;flex-wrap:wrap}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item{padding:var(--eui-base-spacing-2xs)}.eui-modal-picker-container .eui-modal-picker__items-container .eui-modal-picker__items__item eui-chip{cursor:pointer;display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EuiDialogService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hasSearchFilter: [{
                 type: Input
             }], hasNbSelectedInfo: [{
@@ -233,9 +235,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3",
             }] } });
 class EuiPickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPickerModule, declarations: [EuiPickerComponent, EuiModalPickerComponent, EuiModalPickerComponent], imports: [CommonModule, EuiBadgeModule, EuiLabelModule, EuiChipListModule, EuiChipModule, ReactiveFormsModule, EuiInputTextModule], exports: [EuiPickerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPickerModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPickerModule, declarations: [EuiPickerComponent, EuiModalPickerComponent, EuiModalPickerComponent], imports: [CommonModule, EuiBadgeModule, EuiLabelModule, EuiChipListModule, EuiChipModule, ReactiveFormsModule, EuiInputTextModule], exports: [EuiPickerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPickerModule, providers: [
             EuiDialogService,
             {
                 provide: DYNAMIC_COMPONENT_CONFIG,
@@ -243,7 +245,7 @@ class EuiPickerModule {
             },
         ], imports: [CommonModule, EuiBadgeModule, EuiLabelModule, EuiChipListModule, EuiChipModule, ReactiveFormsModule, EuiInputTextModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.3", ngImport: i0, type: EuiPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EuiBadgeModule, EuiLabelModule, EuiChipListModule, EuiChipModule, ReactiveFormsModule, EuiInputTextModule],

package/fesm2022/eui-components-eui-picker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-components-eui-picker.mjs","sources":["../../eui-picker/modal-picker/eui-modal-picker.component.ts","../../eui-picker/modal-picker/eui-modal-picker.component.html","../../eui-picker/eui-picker.component.ts","../../eui-picker/eui-picker.component.html","../../eui-picker/eui-picker.module.ts","../../eui-picker/models/eui-picker-item.model.ts","../../eui-picker/eui-components-eui-picker.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, OnInit, Inject, OnDestroy } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { DYNAMIC_COMPONENT_CONFIG } from '@eui/core';\nimport { EuiDialogService } from '@eui/components/eui-dialog';\nimport { EuiPickerItem } from '../models/eui-picker-item.model';\n\n@Component({\n templateUrl: './eui-modal-picker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['../styles/_index.scss'],\n})\nexport class EuiModalPickerComponent implements OnInit, OnDestroy {\n public form: FormGroup;\n\n public dataSrc: EuiPickerItem[];\n public filteredData: EuiPickerItem[];\n\n private destroy$: Subject<boolean> = new Subject<boolean>();\n\n constructor(\n @Inject(DYNAMIC_COMPONENT_CONFIG) public config: any,\n private euiDialogService: EuiDialogService,\n private fb: FormBuilder\n ) {}\n\n ngOnInit() {\n this.dataSrc = [...this.config.items];\n this.filteredData = [...this.config.items];\n\n this.form = this.fb.group({\n search: new FormControl(null),\n });\n\n this.form\n .get('search')\n .valueChanges.pipe(takeUntil(this.destroy$))\n .subscribe((value) => {\n this.filteredData = this.dataSrc.filter((data) => data.label.toLowerCase().indexOf(value) !== -1);\n });\n }\n\n ngOnDestroy() {\n this.destroy$.next(true);\n this.destroy$.unsubscribe();\n }\n\n toggleSelected(id: number) {\n const item = this.filteredData.find((f) => f.id === id);\n\n this.dataSrc = this.dataSrc.map((f) => (f.id === id ? { ...f, isSelected: !item.isSelected } : f));\n this.filteredData = this.filteredData.map((f) => (f.id === id ? { ...f, isSelected: !item.isSelected } : f));\n\n if (item.isSelected) {\n this.config.itemsChange({\n added: item,\n removed: null,\n items: this.dataSrc,\n selected: this.dataSrc.filter((f) => f.isSelected),\n unselected: this.dataSrc.filter((f) => !f.isSelected),\n });\n } else {\n this.config.itemsChange({\n added: null,\n removed: item,\n items: this.dataSrc,\n selected: this.dataSrc.filter((f) => f.isSelected),\n unselected: this.dataSrc.filter((f) => !f.isSelected),\n });\n }\n }\n\n clearInput() {\n this.form.get('search').patchValue('');\n }\n}\n","<div class=\"eui-modal-picker-container\">\n <div class=\"eui-modal-picker__search-container eui-clearable-input-wrapper\" [formGroup]=\"form\">\n <input euiInputText placeholder=\"{{ config.placeholder }}\" formControlName=\"search\" />\n <span\n class=\"eui-clearable-input-wrapper__clear\"\n (click)=\"clearInput()\"\n ngIf=\"form.get('search').value && form.get('search').value.length > 0\"></span>\n </div>\n <div class=\"eui-modal-picker__items-container\">\n <span class=\"eui-modal-picker__items__item col-3\" ngFor=\"let item of filteredData\">\n <eui-chip [euiPrimary]=\"item.isSelected\" [euiSecondary]=\"!item.isSelected\" (click)=\"toggleSelected(item.id)\">\n <span (click)=\"toggleSelected(item.id)\">{{ item.label }}</span>\n </eui-chip>\n </span>\n </div>\n</div>\n","import {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n OnInit,\n EventEmitter,\n Output,\n Input,\n ChangeDetectorRef,\n forwardRef,\n} from '@angular/core';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { BaseDirective } from '@eui/components/shared';\nimport { EuiDialogConfig, EuiDialogService } from '@eui/components/eui-dialog';\nimport { EuiPickerItem } from './models/eui-picker-item.model';\nimport { EuiModalPickerComponent } from './modal-picker/eui-modal-picker.component';\n\n@Component({\n templateUrl: './eui-picker.component.html',\n selector: 'eui-picker',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./styles/_index.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EuiPickerComponent),\n multi: true,\n },\n ],\n})\nexport class EuiPickerComponent extends BaseDirective implements OnInit, ControlValueAccessor {\n @Input()\n get hasSearchFilter(): boolean {\n return this._hasSearchFilter;\n }\n set hasSearchFilter(value: BooleanInput) {\n this._hasSearchFilter = coerceBooleanProperty(value);\n }\n @Input()\n get hasNbSelectedInfo(): boolean {\n return this._hasNbSelectedInfo;\n }\n\n set hasNbSelectedInfo(value: BooleanInput) {\n this._hasNbSelectedInfo = coerceBooleanProperty(value);\n }\n @Input() placeholder = '';\n\n @Input() modalTitle = '';\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('eui-picker')].join(' ').trim();\n }\n\n @Input() pickerTitle: string;\n\n @Input() items: EuiPickerItem[] = [];\n @Output() change: EventEmitter<EuiPickerItem[]> = new EventEmitter<EuiPickerItem[]>();\n\n @Output() itemsChange = new EventEmitter<{\n added: EuiPickerItem;\n removed: EuiPickerItem;\n items: EuiPickerItem[];\n selected: EuiPickerItem[];\n unselected: EuiPickerItem[];\n }>();\n itemsSelected: EuiPickerItem[] = [];\n\n itemsState: {\n added: EuiPickerItem;\n removed: EuiPickerItem;\n items: EuiPickerItem[];\n selected: EuiPickerItem[];\n unselected: EuiPickerItem[];\n };\n isDisabled = false;\n @Output() accept: EventEmitter<any> = new EventEmitter();\n\n @Output() dismiss: EventEmitter<any> = new EventEmitter();\n @Output() close: EventEmitter<any> = new EventEmitter();\n @Output() clickOutside: EventEmitter<any> = new EventEmitter();\n private _hasSearchFilter = false;\n private _hasNbSelectedInfo = false;\n\n constructor(private euiDialogService: EuiDialogService, private cd: ChangeDetectorRef) {\n super();\n }\n\n ngOnInit() {\n this.itemsState = {\n ...this.itemsState,\n items: this.items,\n selected: this.items.filter((item) => item.isSelected),\n };\n }\n\n public writeValue(value: EuiPickerItem[]) {\n this.itemsState = {\n ...this.itemsState,\n items: value ? this.items.map((i) => (value.find((is) => is.id === i.id) ? { ...i, isSelected: true } : i)) : this.items,\n selected: value ? value.map((v) => ({ ...v, isSelected: true })) : [],\n };\n this.cd.detectChanges();\n }\n\n public setDisabledState(isDisabled: boolean) {\n isDisabled ? (this.isDisabled = true) : (this.isDisabled = false);\n this.cd.detectChanges();\n }\n\n public registerOnChange(fn: any) {\n this.onChange = fn;\n }\n\n public registerOnTouched(fn: any) {\n this.onTouch = fn;\n }\n\n openModal() {\n if (!this.isDisabled) {\n let itemsState = this.itemsState;\n const config = new EuiDialogConfig({\n title: this.modalTitle,\n height: '30vh',\n width: '60vw',\n isHandleCloseOnClickOutside: true,\n bodyComponent: {\n component: EuiModalPickerComponent,\n config: {\n items: this.itemsState.items,\n placeholder: this.placeholder,\n hasSearchFilter: this.hasSearchFilter,\n itemsChange: (e: {\n added: EuiPickerItem;\n removed: EuiPickerItem;\n items: EuiPickerItem[];\n selected: EuiPickerItem[];\n unselected: EuiPickerItem[];\n }) => {\n itemsState = e;\n this.itemsChange.emit(e);\n },\n },\n },\n clickOutside: () => {\n this.euiDialogService.closeDialog();\n this.clickOutside.emit();\n },\n dismiss: () => {\n this.dismiss.emit();\n },\n accept: () => {\n this.itemsState = itemsState;\n this.onChange(this.itemsState.selected);\n this.accept.emit();\n\n this.cd.detectChanges();\n },\n close: () => {\n this.close.emit();\n },\n });\n\n this.euiDialogService.openDialog(config);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: any = () => {};\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouch: any = () => {};\n}\n","<div class=\"eui-picker-container\" [class.eui-picker-container--disabled]=\"isDisabled\" (click)=\"openModal()\">\n <eui-chip-list [euiOutline]=\"isDisabled\">\n <eui-chip ngFor=\"let item of itemsState.selected\">{{ item.label }}</eui-chip>\n </eui-chip-list>\n\n <eui-badge ngIf=\"hasNbSelectedInfo\" styleClass=\"eui-picker__nb-selected-badge\" euiInfo euiSizeS\n >{{ itemsState.selected.length }} selected</eui-badge\n >\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { EuiPickerComponent } from './eui-picker.component';\nimport { EuiModalPickerComponent } from './modal-picker/eui-modal-picker.component';\nimport { EuiDialogService } from '@eui/components/eui-dialog';\nimport { DYNAMIC_COMPONENT_CONFIG } from '@eui/core';\nimport { EuiChipModule } from '@eui/components/eui-chip';\nimport { EuiChipListModule } from '@eui/components/eui-chip-list';\nimport { EuiLabelModule } from '@eui/components/eui-label';\nimport { EuiBadgeModule } from '@eui/components/eui-badge';\nimport { EuiInputTextModule } from '@eui/components/eui-input-text';\n\n@NgModule({\n imports: [CommonModule, EuiBadgeModule, EuiLabelModule, EuiChipListModule, EuiChipModule, ReactiveFormsModule, EuiInputTextModule],\n declarations: [EuiPickerComponent, EuiModalPickerComponent, EuiModalPickerComponent],\n exports: [EuiPickerComponent],\n providers: [\n EuiDialogService,\n {\n provide: DYNAMIC_COMPONENT_CONFIG,\n useClass: EuiDialogService,\n },\n ],\n // entryComponents: [EuiModalPickerComponent], // TODO v16 check entry components module\n})\nexport class EuiPickerModule {}\n","export class EuiPickerItem {\n id: number;\n label: string;\n isSelected = false;\n\n constructor(values: object = {}) {\n Object.assign(this, values);\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i2","i3","i4","i5"],"mappings":"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"}
1	+ {"version":3,"file":"eui-components-eui-picker.mjs","sources":["../../eui-picker/modal-picker/eui-modal-picker.component.ts","../../eui-picker/modal-picker/eui-modal-picker.component.html","../../eui-picker/eui-picker.component.ts","../../eui-picker/eui-picker.component.html","../../eui-picker/eui-picker.module.ts","../../eui-picker/models/eui-picker-item.model.ts","../../eui-picker/eui-components-eui-picker.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, OnInit, Inject, OnDestroy } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { DYNAMIC_COMPONENT_CONFIG } from '@eui/core';\nimport { EuiDialogService } from '@eui/components/eui-dialog';\nimport { EuiPickerItem } from '../models/eui-picker-item.model';\n\n@Component({\n templateUrl: './eui-modal-picker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['../styles/_index.scss'],\n})\nexport class EuiModalPickerComponent implements OnInit, OnDestroy {\n public form: FormGroup;\n\n public dataSrc: EuiPickerItem[];\n public filteredData: EuiPickerItem[];\n\n private destroy$: Subject<boolean> = new Subject<boolean>();\n\n constructor(\n @Inject(DYNAMIC_COMPONENT_CONFIG) public config: any,\n private euiDialogService: EuiDialogService,\n private fb: FormBuilder\n ) {}\n\n ngOnInit(): void {\n this.dataSrc = [...this.config.items];\n this.filteredData = [...this.config.items];\n\n this.form = this.fb.group({\n search: new FormControl(null),\n });\n\n this.form\n .get('search')\n .valueChanges.pipe(takeUntil(this.destroy$))\n .subscribe((value) => {\n this.filteredData = this.dataSrc.filter((data) => data.label.toLowerCase().indexOf(value) !== -1);\n });\n }\n\n ngOnDestroy(): void {\n this.destroy$.next(true);\n this.destroy$.unsubscribe();\n }\n\n toggleSelected(id: number): void {\n const item = this.filteredData.find((f) => f.id === id);\n\n this.dataSrc = this.dataSrc.map((f) => (f.id === id ? { ...f, isSelected: !item.isSelected } : f));\n this.filteredData = this.filteredData.map((f) => (f.id === id ? { ...f, isSelected: !item.isSelected } : f));\n\n if (item.isSelected) {\n this.config.itemsChange({\n added: item,\n removed: null,\n items: this.dataSrc,\n selected: this.dataSrc.filter((f) => f.isSelected),\n unselected: this.dataSrc.filter((f) => !f.isSelected),\n });\n } else {\n this.config.itemsChange({\n added: null,\n removed: item,\n items: this.dataSrc,\n selected: this.dataSrc.filter((f) => f.isSelected),\n unselected: this.dataSrc.filter((f) => !f.isSelected),\n });\n }\n }\n\n clearInput(): void {\n this.form.get('search').patchValue('');\n }\n}\n","<div class=\"eui-modal-picker-container\">\n <div class=\"eui-modal-picker__search-container eui-clearable-input-wrapper\" [formGroup]=\"form\">\n <input euiInputText placeholder=\"{{ config.placeholder }}\" formControlName=\"search\" />\n <span\n class=\"eui-clearable-input-wrapper__clear\"\n (click)=\"clearInput()\"\n ngIf=\"form.get('search').value && form.get('search').value.length > 0\"></span>\n </div>\n <div class=\"eui-modal-picker__items-container\">\n <span class=\"eui-modal-picker__items__item col-3\" ngFor=\"let item of filteredData\">\n <eui-chip [euiPrimary]=\"item.isSelected\" [euiSecondary]=\"!item.isSelected\" (click)=\"toggleSelected(item.id)\">\n <span (click)=\"toggleSelected(item.id)\">{{ item.label }}</span>\n </eui-chip>\n </span>\n </div>\n</div>\n","import {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n OnInit,\n EventEmitter,\n Output,\n Input,\n ChangeDetectorRef,\n forwardRef,\n} from '@angular/core';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { BaseDirective } from '@eui/components/shared';\nimport { EuiDialogConfig, EuiDialogService } from '@eui/components/eui-dialog';\nimport { EuiPickerItem } from './models/eui-picker-item.model';\nimport { EuiModalPickerComponent } from './modal-picker/eui-modal-picker.component';\n\n@Component({\n templateUrl: './eui-picker.component.html',\n selector: 'eui-picker',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./styles/_index.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EuiPickerComponent),\n multi: true,\n },\n ],\n})\nexport class EuiPickerComponent extends BaseDirective implements OnInit, ControlValueAccessor {\n @Input()\n get hasSearchFilter(): boolean {\n return this._hasSearchFilter;\n }\n set hasSearchFilter(value: BooleanInput) {\n this._hasSearchFilter = coerceBooleanProperty(value);\n }\n @Input()\n get hasNbSelectedInfo(): boolean {\n return this._hasNbSelectedInfo;\n }\n\n set hasNbSelectedInfo(value: BooleanInput) {\n this._hasNbSelectedInfo = coerceBooleanProperty(value);\n }\n @Input() placeholder = '';\n\n @Input() modalTitle = '';\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('eui-picker')].join(' ').trim();\n }\n\n @Input() pickerTitle: string;\n\n @Input() items: EuiPickerItem[] = [];\n // TODO: fix it for v17 - Output bindings, including aliases, should not be named as standard DOM events\n @Output() change: EventEmitter<EuiPickerItem[]> = new EventEmitter<EuiPickerItem[]>();\n\n @Output() itemsChange = new EventEmitter<{\n added: EuiPickerItem;\n removed: EuiPickerItem;\n items: EuiPickerItem[];\n selected: EuiPickerItem[];\n unselected: EuiPickerItem[];\n }>();\n itemsSelected: EuiPickerItem[] = [];\n\n itemsState: {\n added: EuiPickerItem;\n removed: EuiPickerItem;\n items: EuiPickerItem[];\n selected: EuiPickerItem[];\n unselected: EuiPickerItem[];\n };\n isDisabled = false;\n @Output() accept: EventEmitter<any> = new EventEmitter();\n\n @Output() dismiss: EventEmitter<any> = new EventEmitter();\n // TODO: fix it for v17 - Output bindings, including aliases, should not be named as standard DOM events\n @Output() close: EventEmitter<any> = new EventEmitter();\n @Output() clickOutside: EventEmitter<any> = new EventEmitter();\n private _hasSearchFilter = false;\n private _hasNbSelectedInfo = false;\n\n constructor(\n private euiDialogService: EuiDialogService,\n private cd: ChangeDetectorRef\n ) {\n super();\n }\n\n ngOnInit(): void {\n this.itemsState = {\n ...this.itemsState,\n items: this.items,\n selected: this.items.filter((item) => item.isSelected),\n };\n }\n\n public writeValue(value: EuiPickerItem[]): void {\n this.itemsState = {\n ...this.itemsState,\n items: value ? this.items.map((i) => (value.find((is) => is.id === i.id) ? { ...i, isSelected: true } : i)) : this.items,\n selected: value ? value.map((v) => ({ ...v, isSelected: true })) : [],\n };\n this.cd.detectChanges();\n }\n\n public setDisabledState(isDisabled: boolean): void {\n isDisabled ? (this.isDisabled = true) : (this.isDisabled = false);\n this.cd.detectChanges();\n }\n\n public registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n public registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n openModal(): void {\n if (!this.isDisabled) {\n let itemsState = this.itemsState;\n const config = new EuiDialogConfig({\n title: this.modalTitle,\n height: '30vh',\n width: '60vw',\n isHandleCloseOnClickOutside: true,\n bodyComponent: {\n component: EuiModalPickerComponent,\n config: {\n items: this.itemsState.items,\n placeholder: this.placeholder,\n hasSearchFilter: this.hasSearchFilter,\n itemsChange: (e: {\n added: EuiPickerItem;\n removed: EuiPickerItem;\n items: EuiPickerItem[];\n selected: EuiPickerItem[];\n unselected: EuiPickerItem[];\n }): void => {\n itemsState = e;\n this.itemsChange.emit(e);\n },\n },\n },\n clickOutside: (): void => {\n this.euiDialogService.closeDialog();\n this.clickOutside.emit();\n },\n dismiss: (): void => {\n this.dismiss.emit();\n },\n accept: (): void => {\n this.itemsState = itemsState;\n this.onChange(this.itemsState.selected);\n this.accept.emit();\n\n this.cd.detectChanges();\n },\n close: (): void => {\n this.close.emit();\n },\n });\n\n this.euiDialogService.openDialog(config);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: any = (): void => {};\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouch: any = (): void => {};\n}\n","<div class=\"eui-picker-container\" [class.eui-picker-container--disabled]=\"isDisabled\" (click)=\"openModal()\">\n <eui-chip-list [euiOutline]=\"isDisabled\">\n <eui-chip ngFor=\"let item of itemsState.selected\">{{ item.label }}</eui-chip>\n </eui-chip-list>\n\n <eui-badge ngIf=\"hasNbSelectedInfo\" styleClass=\"eui-picker__nb-selected-badge\" euiInfo euiSizeS\n >{{ itemsState.selected.length }} selected</eui-badge\n >\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { EuiPickerComponent } from './eui-picker.component';\nimport { EuiModalPickerComponent } from './modal-picker/eui-modal-picker.component';\nimport { EuiDialogService } from '@eui/components/eui-dialog';\nimport { DYNAMIC_COMPONENT_CONFIG } from '@eui/core';\nimport { EuiChipModule } from '@eui/components/eui-chip';\nimport { EuiChipListModule } from '@eui/components/eui-chip-list';\nimport { EuiLabelModule } from '@eui/components/eui-label';\nimport { EuiBadgeModule } from '@eui/components/eui-badge';\nimport { EuiInputTextModule } from '@eui/components/eui-input-text';\n\n@NgModule({\n imports: [CommonModule, EuiBadgeModule, EuiLabelModule, EuiChipListModule, EuiChipModule, ReactiveFormsModule, EuiInputTextModule],\n declarations: [EuiPickerComponent, EuiModalPickerComponent, EuiModalPickerComponent],\n exports: [EuiPickerComponent],\n providers: [\n EuiDialogService,\n {\n provide: DYNAMIC_COMPONENT_CONFIG,\n useClass: EuiDialogService,\n },\n ],\n // entryComponents: [EuiModalPickerComponent], // TODO v16 check entry components module\n})\nexport class EuiPickerModule {}\n","export class EuiPickerItem {\n id: number;\n label: string;\n isSelected = false;\n\n constructor(values: object = {}) {\n Object.assign(this, values);\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i2","i3","i4","i5"],"mappings":"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"}

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

@@ -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],
                 }]
         }] });