@eui/components 17.0.0-next.21 → 17.0.0-next.22

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

@@ -5,7 +5,7 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { takeUntil, startWith, skip } from 'rxjs/operators';
-import { BehaviorSubject, Subject, Subscription, fromEvent, filter, of } from 'rxjs';
+import { BehaviorSubject, Subject, Subscription, filter, fromEvent, of } from 'rxjs';
 import * as i4 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { uniqueId } from '@eui/core';
@@ -643,10 +643,10 @@ class EuiAutocompleteComponent extends BaseDirective {
             });
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.ScrollDispatcher }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", autocompleteData: "autocompleteData", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", placeholder: "placeholder", matching: "matching", chipsPosition: "chipsPosition", panelWidth: "panelWidth", visibleOptions: "visibleOptions", classList: "classList", groupBy: "groupBy", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", hasChips: "hasChips", isGrid: "isGrid", async: "async", addOnBlur: "addOnBlur", isFreeValueAllowed: "isFreeValueAllowed", isDuplicateValueAllowed: "isDuplicateValueAllowed", isLoading: "isLoading", isChipsRemovable: "isChipsRemovable", maxVisibleChipsCount: "maxVisibleChipsCount", chipsLabelTruncateCount: "chipsLabelTruncateCount", isMaxVisibleChipsOpened: "isMaxVisibleChipsOpened", readonly: "readonly", isChipsSorted: "isChipsSorted", isItemsSorted: "isItemsSorted", isChipsDragAndDrop: "isChipsDragAndDrop", isForceSelection: "isForceSelection", autoActiveFirstOption: "autoActiveFirstOption" }, outputs: { clear: "clear", panelClose: "panelClose", panelOpen: "panelOpen", inputBlur: "inputBlur", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true, read: ElementRef }, { propertyName: "autocompleteInputTrigger", first: true, predicate: ["autocompleteInputTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "chipList", first: true, predicate: ["chipList"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        (focus)=\"onFocus()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (focus)=\"onFocus()\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    (closed)=\"onClose()\"\n                    (opened)=\"onOpen()\"\n                    (optionSelected)=\"onOptionSelected($event)\">\n                    <ng-container *ngIf=\"groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            [itemSize]=\"itemSize\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                    [label]=\"distinctOptionGroup\">\n                                    <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                        <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n                                        </div>\n                                    </ng-container>\n                                    <mat-option\n                                        *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                        [disabled]=\"groupedItem.isDisabled\"\n                                        [class]=\"\n                                            groupedItem.typeClass\n                                                ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n                                                : 'mat-option eui-autocomplete__option'\n                                        \"\n                                        [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                        [value]=\"groupedItem\">\n                                        <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n                                        <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                            {{ groupedItem.label }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n                                        </ng-container>\n                                    </mat-option>\n                                </mat-optgroup>\n                            </ng-container>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                    <ng-container *ngIf=\"!groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            [itemSize]=\"itemSize\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <mat-option\n                                *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n                                [disabled]=\"autocompleteOption.isDisabled\"\n                                [class]=\"\n                                    autocompleteOption.typeClass\n                                        ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n                                        : 'mat-option eui-autocomplete__option'\n                                \"\n                                [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n                                [class.mdc-list-item--selected]=\"false\"\n                                [value]=\"autocompleteOption\">\n                                <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n                                <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                    <ng-template\n                                        [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n                                </ng-container>\n                            </mat-option>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                </mat-autocomplete>\n            </span>\n        </ng-template>\n    </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete--no-max-height{max-height:none!important}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;margin-bottom:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i6.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", "chipDragStart", "chipDragRelease", "chipDrop", "chiplistFocus"] }, { kind: "directive", type: i6.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.ScrollDispatcher }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", autocompleteData: "autocompleteData", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", placeholder: "placeholder", matching: "matching", chipsPosition: "chipsPosition", panelWidth: "panelWidth", visibleOptions: "visibleOptions", classList: "classList", groupBy: "groupBy", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", hasChips: "hasChips", isGrid: "isGrid", async: "async", addOnBlur: "addOnBlur", isFreeValueAllowed: "isFreeValueAllowed", isDuplicateValueAllowed: "isDuplicateValueAllowed", isLoading: "isLoading", isChipsRemovable: "isChipsRemovable", maxVisibleChipsCount: "maxVisibleChipsCount", chipsLabelTruncateCount: "chipsLabelTruncateCount", isMaxVisibleChipsOpened: "isMaxVisibleChipsOpened", readonly: "readonly", isChipsSorted: "isChipsSorted", isItemsSorted: "isItemsSorted", isChipsDragAndDrop: "isChipsDragAndDrop", isForceSelection: "isForceSelection", autoActiveFirstOption: "autoActiveFirstOption" }, outputs: { clear: "clear", panelClose: "panelClose", panelOpen: "panelOpen", inputBlur: "inputBlur", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true, read: ElementRef }, { propertyName: "autocompleteInputTrigger", first: true, predicate: ["autocompleteInputTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "chipList", first: true, predicate: ["chipList"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        (focus)=\"onFocus()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (focus)=\"onFocus()\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    (closed)=\"onClose()\"\n                    (opened)=\"onOpen()\"\n                    (optionSelected)=\"onOptionSelected($event)\">\n                    <ng-container *ngIf=\"groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            [itemSize]=\"itemSize\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                    [label]=\"distinctOptionGroup\">\n                                    <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                        <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n                                        </div>\n                                    </ng-container>\n                                    <mat-option\n                                        *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                        [disabled]=\"groupedItem.isDisabled\"\n                                        [class]=\"\n                                            groupedItem.typeClass\n                                                ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n                                                : 'mat-option eui-autocomplete__option'\n                                        \"\n                                        [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                        [value]=\"groupedItem\">\n                                        <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n                                        <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                            {{ groupedItem.label }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n                                        </ng-container>\n                                    </mat-option>\n                                </mat-optgroup>\n                            </ng-container>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                    <ng-container *ngIf=\"!groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            [itemSize]=\"itemSize\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <mat-option\n                                *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n                                [disabled]=\"autocompleteOption.isDisabled\"\n                                [class]=\"\n                                    autocompleteOption.typeClass\n                                        ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n                                        : 'mat-option eui-autocomplete__option'\n                                \"\n                                [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n                                [class.mdc-list-item--selected]=\"false\"\n                                [value]=\"autocompleteOption\">\n                                <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n                                <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                    <ng-template\n                                        [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n                                </ng-container>\n                            </mat-option>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                </mat-autocomplete>\n            </span>\n        </ng-template>\n    </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete--no-max-height{max-height:none!important}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;margin-bottom:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i6.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", "chipDragStart", "chipDragRelease", "chipDrop", "chiplistFocus"] }, { kind: "directive", type: i6.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n    <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n        <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"hasChips\">\n            <eui-chip-list\n                #chipList\n                [chips]=\"chips\"\n                [isGrid]=\"isChipsGrid\"\n                [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n                [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n                [isChipsSorted]=\"isChipsSorted\"\n                [chipsSortOrder]=\"chipsSortOrder\"\n                [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n                [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n                [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n                [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n                [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n                [dragAndDropSourceName]=\"dragAndDropSourceName\"\n                [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n                (chipDropped)=\"onChipDropped($event)\"\n                (chipDragStarted)=\"onChipDragStarted($event)\"\n                (chipDragReleased)=\"onChipDragReleased($event)\"\n                (chipRemove)=\"onChipRemove($event)\"\n                (chiplistFocus)=\"onChipListFocus()\">\n                <euiChipListAppendContent>\n                    <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n                        <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n                    </ng-template>\n                </euiChipListAppendContent>\n            </eui-chip-list>\n        </ng-container>\n\n        <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n            <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n        </ng-template>\n\n        <ng-template #field>\n            <span class=\"eui-autocomplete__field-wrapper\">\n                <ng-container *ngIf=\"!hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut()\"\n                        (focus)=\"onFocus()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n                <ng-container *ngIf=\"hasChips\">\n                    <input\n                        [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n                        [euiLoading]=\"isLoading\"\n                        euiInputText\n                        #autocompleteInput\n                        #autocompleteInputTrigger\n                        placeholder=\"{{ placeholder }}\"\n                        [matAutocompleteDisabled]=\"readonly\"\n                        [formControl]=\"autocompleteControl\"\n                        [matAutocomplete]=\"auto\"\n                        [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n                        (clear)=\"onClear()\"\n                        (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n                        (focus)=\"onFocus()\"\n                        (keydown.enter)=\"addOnEnterHandler()\"\n                        (keydown.backspace)=\"onKeyDownBackspace()\"\n                        role=\"combobox\"\n                        aria-autocomplete=\"both\"\n                        aria-haspopup=\"true\"\n                        aria-controls=\"autocompleteId\" />\n                </ng-container>\n\n                <mat-autocomplete\n                    [id]=\"autocompleteId\"\n                    #auto=\"matAutocomplete\"\n                    [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n                    [class]=\"classList\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    (closed)=\"onClose()\"\n                    (opened)=\"onOpen()\"\n                    (optionSelected)=\"onOptionSelected($event)\">\n                    <ng-container *ngIf=\"groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            [itemSize]=\"itemSize\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n                                <mat-optgroup\n                                    [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n                                    *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n                                    [label]=\"distinctOptionGroup\">\n                                    <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n                                        <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n                                        </div>\n                                    </ng-container>\n                                    <mat-option\n                                        *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n                                        [disabled]=\"groupedItem.isDisabled\"\n                                        [class]=\"\n                                            groupedItem.typeClass\n                                                ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n                                                : 'mat-option eui-autocomplete__option'\n                                        \"\n                                        [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                        [value]=\"groupedItem\">\n                                        <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n                                        <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n                                            {{ groupedItem.label }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n                                        </ng-container>\n                                    </mat-option>\n                                </mat-optgroup>\n                            </ng-container>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                    <ng-container *ngIf=\"!groupBy\">\n                        <cdk-virtual-scroll-viewport\n                            #virtualScrolling\n                            [itemSize]=\"itemSize\"\n                            minBufferPx=\"500\"\n                            maxBufferPx=\"750\"\n                            [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n                            <mat-option\n                                *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n                                [disabled]=\"autocompleteOption.isDisabled\"\n                                [class]=\"\n                                    autocompleteOption.typeClass\n                                        ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n                                        : 'mat-option eui-autocomplete__option'\n                                \"\n                                [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n                                [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n                                [class.mdc-list-item--selected]=\"false\"\n                                [value]=\"autocompleteOption\">\n                                <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n                                <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n                                <ng-container *ngIf=\"autocompleteOptionTemplate\">\n                                    <ng-template\n                                        [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n                                </ng-container>\n                            </mat-option>\n                        </cdk-virtual-scroll-viewport>\n                    </ng-container>\n                </mat-autocomplete>\n            </span>\n        </ng-template>\n    </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete--no-max-height{max-height:none!important}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;margin-bottom:0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
@@ -763,8 +763,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
             }] } });
 
 class EuiAutocompleteModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAutocompleteModule, declarations: [EuiAutocompleteComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAutocompleteModule, declarations: [EuiAutocompleteComponent], imports: [CommonModule,
             ReactiveFormsModule,
             MatAutocompleteModule,
             EuiChipListModule,
@@ -772,7 +772,7 @@ class EuiAutocompleteModule {
             EuiIconModule,
             EuiInputTextModule,
             ScrollingModule], exports: [EuiAutocompleteComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAutocompleteModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAutocompleteModule, imports: [CommonModule,
             ReactiveFormsModule,
             MatAutocompleteModule,
             EuiChipListModule,
@@ -781,7 +781,7 @@ class EuiAutocompleteModule {
             EuiInputTextModule,
             ScrollingModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -36,8 +36,8 @@ class EuiAvatarComponent {
             this.hasNoBackground ? 'eui-avatar--no-background' : '',
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], hasShadow: "hasShadow", isShapeSquare: "isShapeSquare", isFlat: "isFlat", hasNoBackground: "hasNoBackground" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiVariant", "euiVariant", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div *ngIf=\"hasShadow\" class=\"eui-avatar-shadow\"></div>\n\n<div class=\"eui-avatar-content\">\n    <ng-content select=\"eui-avatar-icon\"></ng-content>\n    <ng-content select=\"eui-avatar-text\"></ng-content>\n    <ng-content select=\"eui-avatar-image\"></ng-content>\n    <ng-content select=\"eui-avatar-badge\"></ng-content>\n</div>\n", styles: [".eui-avatar{--_size: var(--eui-avatar-size, 3rem);--_icon-size: var(--eui-avatar-icon-size, 1.5rem);--_font-size: var(--eui-avatar-font-size, var(--eui-base-font-size-xl));--_badge-font-size: var(--eui-avatar-badge-font-size, var(--eui-base-font-size-s));--_badge-size: var(--eui-avatar-badge-size, var(--eui-base-spacing-m));--_bg-color: var(--eui-avatar-bg-color, var(--eui-base-color-primary-100));--_color: var(--eui-avatar-color, var(--eui-base-color-white))}.eui-avatar{display:inline-flex;position:relative}.eui-avatar-content{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_bg-color);box-shadow:var(--eui-base-shadow-1);height:var(--_size);width:var(--_size);position:relative}.eui-avatar.eui-avatar--shape-square .eui-avatar-content,.eui-avatar.eui-avatar--shape-square .eui-avatar-image img{border-radius:.25rem}.eui-avatar-shadow{position:absolute;right:.35rem;height:var(--_size);width:var(--_size);border:.5rem solid var(--eui-base-color-primary-25);border-radius:50%;bottom:.15rem}.eui-avatar-list{display:inline-flex}.eui-avatar-list .eui-avatar:not(:first-child){margin-left:-1rem}.eui-avatar-icon{color:var(--_color)}.eui-avatar-icon .eui-icon{font-size:calc(1.5 * var(--_font-size))}.eui-avatar-icon .eui-icon-svg{margin-right:0!important;margin-left:0!important}.eui-avatar-icon .eui-icon-svg svg{height:var(--_icon-size);width:var(--_icon-size);fill:var(--_color)!important;color:var(--_color)!important}.eui-avatar-text{color:var(--_color);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;font-size:var(--_font-size)}.eui-avatar-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiNFN0VDRUQ7IiBkPSJNMTguNjEzLDQxLjU1MmwtNy45MDcsNC4zMTNjLTAuNDY0LDAuMjUzLTAuODgxLDAuNTY0LTEuMjY5LDAuOTAzQzE0LjA0Nyw1MC42NTUsMTkuOTk4LDUzLDI2LjUsNTNjNi40NTQsMCwxMi4zNjctMi4zMSwxNi45NjQtNi4xNDRjLTAuNDI0LTAuMzU4LTAuODg0LTAuNjgtMS4zOTQtMC45MzRsLTguNDY3LTQuMjMzYy0xLjA5NC0wLjU0Ny0xLjc4NS0xLjY2NS0xLjc4NS0yLjg4OHYtMy4zMjJjMC4yMzgtMC4yNzEsMC41MS0wLjYxOSwwLjgwMS0xLjAzYzEuMTU0LTEuNjMsMi4wMjctMy40MjMsMi42MzItNS4zMDRjMS4wODYtMC4zMzUsMS44ODYtMS4zMzgsMS44ODYtMi41M3YtMy41NDZjMC0wLjc4LTAuMzQ3LTEuNDc3LTAuODg2LTEuOTY1di01LjEyNmMwLDAsMS4wNTMtNy45NzctOS43NS03Ljk3N3MtOS43NSw3Ljk3Ny05Ljc1LDcuOTc3djUuMTI2Yy0wLjU0LDAuNDg4LTAuODg2LDEuMTg1LTAuODg2LDEuOTY1djMuNTQ2YzAsMC45MzQsMC40OTEsMS43NTYsMS4yMjYsMi4yMzFjMC44ODYsMy44NTcsMy4yMDYsNi42MzMsMy4yMDYsNi42MzN2My4yNEMyMC4yOTYsMzkuODk5LDE5LjY1LDQwLjk4NiwxOC42MTMsNDEuNTUyeiIvPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43NmMwLjM4NS0wLjMzNiwwLjc5OC0wLjY0NCwxLjI1Ny0wLjg5NGw3LjkwNy00LjMxM2MxLjAzNy0wLjU2NiwxLjY4My0xLjY1MywxLjY4My0yLjgzNXYtMy4yNGMwLDAtMi4zMjEtMi43NzYtMy4yMDYtNi42MzNjLTAuNzM0LTAuNDc1LTEuMjI2LTEuMjk2LTEuMjI2LTIuMjMxdi0zLjU0NmMwLTAuNzgsMC4zNDctMS40NzcsMC44ODYtMS45NjV2LTUuMTI2YzAsMC0xLjA1My03Ljk3Nyw5Ljc1LTcuOTc3czkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTNjLTAuNjA1LDEuODgxLTEuNDc4LDMuNjc0LTIuNjMyLDUuMzA0Yy0wLjI5MSwwLjQxMS0wLjU2MywwLjc1OS0wLjgwMSwxLjAzVjM4LjhjMCwxLjIyMywwLjY5MSwyLjM0MiwxLjc4NSwyLjg4OGw4LjQ2Nyw0LjIzM2MwLjUwOCwwLjI1NCwwLjk2NywwLjU3NSwxLjM5LDAuOTMyYzUuNzEtNC43NjIsOS4zOTktMTEuODgyLDkuNTM2LTE5LjlDNTMuMjQ2LDEyLjMyLDQxLjU4NywwLjI1NCwyNi45NTMsMC4wMDR6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);background-size:cover;height:100%;width:100%}.eui-avatar-image img{border-radius:50%;height:100%;width:100%}.eui-avatar--no-background .eui-avatar-image img{border-radius:0;background-color:var(--eui-base-color-white)}.eui-avatar-badge{position:absolute;right:-.5rem}.eui-avatar-badge--top{top:-.5rem}.eui-avatar-badge--bottom{bottom:-.5rem}.eui-avatar-badge .eui-badge{font-size:var(--_badge-font-size);height:calc(var(--_badge-size) + var(--eui-base-spacing-2xs));width:calc(var(--_badge-size) + var(--eui-base-spacing-2xs));min-width:calc(var(--_badge-size) + var(--eui-base-spacing-2xs));padding:0 var(--eui-base-spacing-2xs)}.eui-avatar--secondary{--_bg-color: var(--eui-base-color-grey-15);--_color: var(--eui-base-color-grey-15-contrast)}.eui-avatar--info{--_bg-color: var(--eui-base-color-info-100)}.eui-avatar--success{--_bg-color: var(--eui-base-color-success-100)}.eui-avatar--warning{--_bg-color: var(--eui-base-color-warning-100);--_color: var(--eui-base-color-warning-100-contrast)}.eui-avatar--danger{--_bg-color: var(--eui-base-color-danger-100)}.eui-avatar--accent{--_bg-color: var(--eui-base-color-accent-100);--_color: var(--eui-base-color-accent-120-contrast)}.eui-avatar--flat{--_bg-color: var(--eui-base-color-primary-10);--_color: var(--eui-base-color-primary-100)}.eui-avatar--flat .eui-avatar-content{box-shadow:var(--eui-base-shadow-none)}.eui-avatar--flat.eui-avatar--secondary{--_bg-color: var(--eui-base-color-grey-5);--_color: var(--eui-base-color-grey-100)}.eui-avatar--flat.eui-avatar--info{--_bg-color: var(--eui-base-color-info-10);--_color: var(--eui-base-color-info-100)}.eui-avatar--flat.eui-avatar--success{--_bg-color: var(--eui-base-color-success-10);--_color: var(--eui-base-color-success-100)}.eui-avatar--flat.eui-avatar--warning{--_bg-color: var(--eui-base-color-warning-10);--_color: var(--eui-base-color-warning-100)}.eui-avatar--flat.eui-avatar--danger{--_bg-color: var(--eui-base-color-danger-10);--_color: var(--eui-base-color-danger-100)}.eui-avatar--flat.eui-avatar--accent{--_bg-color: var(--eui-base-color-accent-10);--_color: var(--eui-base-color-accent-120)}.eui-avatar--no-background{--_bg-color: transparent;--_color: var(--eui-base-color-primary-100)}.eui-avatar--no-background .eui-avatar-content{box-shadow:var(--eui-base-shadow-none);border-radius:none}.eui-avatar--no-background.eui-avatar--secondary{--_color: var(--eui-base-color-grey-100)}.eui-avatar--no-background.eui-avatar--info{--_color: var(--eui-base-color-info-100)}.eui-avatar--no-background.eui-avatar--success{--_color: var(--eui-base-color-success-100)}.eui-avatar--no-background.eui-avatar--warning{--_color: var(--eui-base-color-warning-100)}.eui-avatar--no-background.eui-avatar--danger{--_color: var(--eui-base-color-danger-100)}.eui-avatar--no-background.eui-avatar--accent{--_color: var(--eui-base-color-accent-120)}.eui-avatar--size-xs{--_size: 2rem;--_font-size: var(--eui-base-font-size-xs);--_icon-size: 1rem;--_badge-font-size: var(--eui-base-font-size-xs);--_badge-size: var(--eui-base-spacing-s)}.eui-avatar--size-s{--_size: 2.5rem;--_font-size: var(--eui-base-font-size-s);--_icon-size: 1.25rem;--_badge-font-size: var(--eui-base-font-size-xs);--_badge-size: var(--eui-base-spacing-s)}.eui-avatar--size-l{--_size: 4rem;--_font-size: var(--eui-base-font-size-2xl);--_icon-size: 1.75rem;--_badge-font-size: var(--eui-base-font-size-m);--_badge-size: var(--eui-base-spacing-m)}.eui-avatar--size-xl{--_size: 5rem;--_font-size: var(--eui-base-font-size-3xl);--_icon-size: 2rem;--_badge-font-size: var(--eui-base-font-size-l);--_badge-size: var(--eui-base-spacing-l)}.eui-avatar--size-2xl{--_size: 6rem;--_font-size: var(--eui-base-font-size-4xl);--_icon-size: 2.5rem;--_badge-font-size: var(--eui-base-font-size-xl);--_badge-size: var(--eui-base-spacing-xl)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], hasShadow: "hasShadow", isShapeSquare: "isShapeSquare", isFlat: "isFlat", hasNoBackground: "hasNoBackground" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiVariant", "euiVariant", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div *ngIf=\"hasShadow\" class=\"eui-avatar-shadow\"></div>\n\n<div class=\"eui-avatar-content\">\n    <ng-content select=\"eui-avatar-icon\"></ng-content>\n    <ng-content select=\"eui-avatar-text\"></ng-content>\n    <ng-content select=\"eui-avatar-image\"></ng-content>\n    <ng-content select=\"eui-avatar-badge\"></ng-content>\n</div>\n", styles: [".eui-avatar{--_size: var(--eui-avatar-size, 3rem);--_icon-size: var(--eui-avatar-icon-size, 1.5rem);--_font-size: var(--eui-avatar-font-size, var(--eui-base-font-size-xl));--_badge-font-size: var(--eui-avatar-badge-font-size, var(--eui-base-font-size-s));--_badge-size: var(--eui-avatar-badge-size, var(--eui-base-spacing-m));--_bg-color: var(--eui-avatar-bg-color, var(--eui-base-color-primary-100));--_color: var(--eui-avatar-color, var(--eui-base-color-white))}.eui-avatar{display:inline-flex;position:relative}.eui-avatar-content{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_bg-color);box-shadow:var(--eui-base-shadow-1);height:var(--_size);width:var(--_size);position:relative}.eui-avatar.eui-avatar--shape-square .eui-avatar-content,.eui-avatar.eui-avatar--shape-square .eui-avatar-image img{border-radius:.25rem}.eui-avatar-shadow{position:absolute;right:.35rem;height:var(--_size);width:var(--_size);border:.5rem solid var(--eui-base-color-primary-25);border-radius:50%;bottom:.15rem}.eui-avatar-list{display:inline-flex}.eui-avatar-list .eui-avatar:not(:first-child){margin-left:-1rem}.eui-avatar-icon{color:var(--_color)}.eui-avatar-icon .eui-icon{font-size:calc(1.5 * var(--_font-size))}.eui-avatar-icon .eui-icon-svg{margin-right:0!important;margin-left:0!important}.eui-avatar-icon .eui-icon-svg svg{height:var(--_icon-size);width:var(--_icon-size);fill:var(--_color)!important;color:var(--_color)!important}.eui-avatar-text{color:var(--_color);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700;font-size:var(--_font-size)}.eui-avatar-image{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiNFN0VDRUQ7IiBkPSJNMTguNjEzLDQxLjU1MmwtNy45MDcsNC4zMTNjLTAuNDY0LDAuMjUzLTAuODgxLDAuNTY0LTEuMjY5LDAuOTAzQzE0LjA0Nyw1MC42NTUsMTkuOTk4LDUzLDI2LjUsNTNjNi40NTQsMCwxMi4zNjctMi4zMSwxNi45NjQtNi4xNDRjLTAuNDI0LTAuMzU4LTAuODg0LTAuNjgtMS4zOTQtMC45MzRsLTguNDY3LTQuMjMzYy0xLjA5NC0wLjU0Ny0xLjc4NS0xLjY2NS0xLjc4NS0yLjg4OHYtMy4zMjJjMC4yMzgtMC4yNzEsMC41MS0wLjYxOSwwLjgwMS0xLjAzYzEuMTU0LTEuNjMsMi4wMjctMy40MjMsMi42MzItNS4zMDRjMS4wODYtMC4zMzUsMS44ODYtMS4zMzgsMS44ODYtMi41M3YtMy41NDZjMC0wLjc4LTAuMzQ3LTEuNDc3LTAuODg2LTEuOTY1di01LjEyNmMwLDAsMS4wNTMtNy45NzctOS43NS03Ljk3N3MtOS43NSw3Ljk3Ny05Ljc1LDcuOTc3djUuMTI2Yy0wLjU0LDAuNDg4LTAuODg2LDEuMTg1LTAuODg2LDEuOTY1djMuNTQ2YzAsMC45MzQsMC40OTEsMS43NTYsMS4yMjYsMi4yMzFjMC44ODYsMy44NTcsMy4yMDYsNi42MzMsMy4yMDYsNi42MzN2My4yNEMyMC4yOTYsMzkuODk5LDE5LjY1LDQwLjk4NiwxOC42MTMsNDEuNTUyeiIvPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43NmMwLjM4NS0wLjMzNiwwLjc5OC0wLjY0NCwxLjI1Ny0wLjg5NGw3LjkwNy00LjMxM2MxLjAzNy0wLjU2NiwxLjY4My0xLjY1MywxLjY4My0yLjgzNXYtMy4yNGMwLDAtMi4zMjEtMi43NzYtMy4yMDYtNi42MzNjLTAuNzM0LTAuNDc1LTEuMjI2LTEuMjk2LTEuMjI2LTIuMjMxdi0zLjU0NmMwLTAuNzgsMC4zNDctMS40NzcsMC44ODYtMS45NjV2LTUuMTI2YzAsMC0xLjA1My03Ljk3Nyw5Ljc1LTcuOTc3czkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTNjLTAuNjA1LDEuODgxLTEuNDc4LDMuNjc0LTIuNjMyLDUuMzA0Yy0wLjI5MSwwLjQxMS0wLjU2MywwLjc1OS0wLjgwMSwxLjAzVjM4LjhjMCwxLjIyMywwLjY5MSwyLjM0MiwxLjc4NSwyLjg4OGw4LjQ2Nyw0LjIzM2MwLjUwOCwwLjI1NCwwLjk2NywwLjU3NSwxLjM5LDAuOTMyYzUuNzEtNC43NjIsOS4zOTktMTEuODgyLDkuNTM2LTE5LjlDNTMuMjQ2LDEyLjMyLDQxLjU4NywwLjI1NCwyNi45NTMsMC4wMDR6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);background-size:cover;height:100%;width:100%}.eui-avatar-image img{border-radius:50%;height:100%;width:100%}.eui-avatar--no-background .eui-avatar-image img{border-radius:0;background-color:var(--eui-base-color-white)}.eui-avatar-badge{position:absolute;right:-.5rem}.eui-avatar-badge--top{top:-.5rem}.eui-avatar-badge--bottom{bottom:-.5rem}.eui-avatar-badge .eui-badge{font-size:var(--_badge-font-size);height:calc(var(--_badge-size) + var(--eui-base-spacing-2xs));width:calc(var(--_badge-size) + var(--eui-base-spacing-2xs));min-width:calc(var(--_badge-size) + var(--eui-base-spacing-2xs));padding:0 var(--eui-base-spacing-2xs)}.eui-avatar--secondary{--_bg-color: var(--eui-base-color-grey-15);--_color: var(--eui-base-color-grey-15-contrast)}.eui-avatar--info{--_bg-color: var(--eui-base-color-info-100)}.eui-avatar--success{--_bg-color: var(--eui-base-color-success-100)}.eui-avatar--warning{--_bg-color: var(--eui-base-color-warning-100);--_color: var(--eui-base-color-warning-100-contrast)}.eui-avatar--danger{--_bg-color: var(--eui-base-color-danger-100)}.eui-avatar--accent{--_bg-color: var(--eui-base-color-accent-100);--_color: var(--eui-base-color-accent-120-contrast)}.eui-avatar--flat{--_bg-color: var(--eui-base-color-primary-10);--_color: var(--eui-base-color-primary-100)}.eui-avatar--flat .eui-avatar-content{box-shadow:var(--eui-base-shadow-none)}.eui-avatar--flat.eui-avatar--secondary{--_bg-color: var(--eui-base-color-grey-5);--_color: var(--eui-base-color-grey-100)}.eui-avatar--flat.eui-avatar--info{--_bg-color: var(--eui-base-color-info-10);--_color: var(--eui-base-color-info-100)}.eui-avatar--flat.eui-avatar--success{--_bg-color: var(--eui-base-color-success-10);--_color: var(--eui-base-color-success-100)}.eui-avatar--flat.eui-avatar--warning{--_bg-color: var(--eui-base-color-warning-10);--_color: var(--eui-base-color-warning-100)}.eui-avatar--flat.eui-avatar--danger{--_bg-color: var(--eui-base-color-danger-10);--_color: var(--eui-base-color-danger-100)}.eui-avatar--flat.eui-avatar--accent{--_bg-color: var(--eui-base-color-accent-10);--_color: var(--eui-base-color-accent-120)}.eui-avatar--no-background{--_bg-color: transparent;--_color: var(--eui-base-color-primary-100)}.eui-avatar--no-background .eui-avatar-content{box-shadow:var(--eui-base-shadow-none);border-radius:none}.eui-avatar--no-background.eui-avatar--secondary{--_color: var(--eui-base-color-grey-100)}.eui-avatar--no-background.eui-avatar--info{--_color: var(--eui-base-color-info-100)}.eui-avatar--no-background.eui-avatar--success{--_color: var(--eui-base-color-success-100)}.eui-avatar--no-background.eui-avatar--warning{--_color: var(--eui-base-color-warning-100)}.eui-avatar--no-background.eui-avatar--danger{--_color: var(--eui-base-color-danger-100)}.eui-avatar--no-background.eui-avatar--accent{--_color: var(--eui-base-color-accent-120)}.eui-avatar--size-xs{--_size: 2rem;--_font-size: var(--eui-base-font-size-xs);--_icon-size: 1rem;--_badge-font-size: var(--eui-base-font-size-xs);--_badge-size: var(--eui-base-spacing-s)}.eui-avatar--size-s{--_size: 2.5rem;--_font-size: var(--eui-base-font-size-s);--_icon-size: 1.25rem;--_badge-font-size: var(--eui-base-font-size-xs);--_badge-size: var(--eui-base-spacing-s)}.eui-avatar--size-l{--_size: 4rem;--_font-size: var(--eui-base-font-size-2xl);--_icon-size: 1.75rem;--_badge-font-size: var(--eui-base-font-size-m);--_badge-size: var(--eui-base-spacing-m)}.eui-avatar--size-xl{--_size: 5rem;--_font-size: var(--eui-base-font-size-3xl);--_icon-size: 2rem;--_badge-font-size: var(--eui-base-font-size-l);--_badge-size: var(--eui-base-spacing-l)}.eui-avatar--size-2xl{--_size: 6rem;--_font-size: var(--eui-base-font-size-4xl);--_icon-size: 2.5rem;--_badge-font-size: var(--eui-base-font-size-xl);--_badge-size: var(--eui-base-spacing-xl)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
@@ -51,7 +51,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EuiAvatarComponent.prototype, "hasNoBackground", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[euiAvatar], span[euiAvatar], eui-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
@@ -109,10 +109,10 @@ class EuiAvatarListComponent {
             'eui-avatar-list',
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiAvatarListComponent, selector: "eui-avatar-list", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiAvatarListComponent, selector: "eui-avatar-list", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-avatar-list', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { cssClasses: [{
@@ -124,10 +124,10 @@ class EuiAvatarIconComponent {
     constructor() {
         this.string = 'eui-avatar-icon';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiAvatarIconComponent, selector: "eui-avatar-icon", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiAvatarIconComponent, selector: "eui-avatar-icon", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-avatar-icon', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { string: [{
@@ -139,10 +139,10 @@ class EuiAvatarTextComponent {
     constructor() {
         this.string = 'eui-avatar-text';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiAvatarTextComponent, selector: "eui-avatar-text", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiAvatarTextComponent, selector: "eui-avatar-text", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-avatar-text', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { string: [{
@@ -154,10 +154,10 @@ class EuiAvatarImageComponent {
     constructor() {
         this.string = 'eui-avatar-image';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: { imageUrl: "imageUrl" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-container *ngIf=\"imageUrl; else noImage\">\n    <img [src]=\"imageUrl\" alt=\"Avatar image\"/>\n</ng-container>\n<ng-template #noImage>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: { imageUrl: "imageUrl" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-container *ngIf=\"imageUrl; else noImage\">\n    <img [src]=\"imageUrl\" alt=\"Avatar image\"/>\n</ng-container>\n<ng-template #noImage>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-avatar-image', template: "<ng-container *ngIf=\"imageUrl; else noImage\">\n    <img [src]=\"imageUrl\" alt=\"Avatar image\"/>\n</ng-container>\n<ng-template #noImage>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { string: [{
@@ -180,10 +180,10 @@ class EuiAvatarBadgeComponent {
             `eui-avatar-badge--${this.position}`,
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: { position: "position" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: { position: "position" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-avatar-badge', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { cssClasses: [{
@@ -202,8 +202,8 @@ const COMPONENTS = [
     EuiAvatarListComponent,
 ];
 class EuiAvatarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarModule, declarations: [EuiAvatarComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarModule, declarations: [EuiAvatarComponent,
             EuiAvatarIconComponent,
             EuiAvatarTextComponent,
             EuiAvatarImageComponent,
@@ -215,10 +215,10 @@ class EuiAvatarModule {
             EuiAvatarImageComponent,
             EuiAvatarBadgeComponent,
             EuiAvatarListComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarModule, imports: [CommonModule,
             EuiIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -21,10 +21,10 @@ class EuiBadgeComponent extends BaseDirective {
     getCssClasses() {
         return [super.getCssClasses('eui-badge')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: { ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-badge{align-items:center;border:1px solid rgba(255,255,255,.8);border-radius:var(--eui-base-spacing-2xl);display:inline-flex;justify-content:center;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));padding:0 var(--eui-base-spacing-2xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-icon .eui-badge{position:absolute;right:-30%;top:-10%;transition:all .3s ease}.eui-icon-svg+.eui-badge{position:relative;right:var(--eui-base-spacing-s);top:calc(-1 * var(--eui-base-spacing-s));transition:all .3s ease}.eui-button .eui-badge{height:inherit;position:relative;transition:all .3s ease}.eui-badge--rounded{border-radius:var(--eui-base-spacing-m)}.eui-badge{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-badge .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-badge--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-badge--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-badge--secondary{background-color:var(--eui-base-color-grey-75);border-color:var(--eui-base-color-grey-75);color:var(--eui-base-color-grey-75-contrast)}.eui-badge--secondary .eui-icon-svg svg{color:var(--eui-base-color-grey-75-contrast);fill:var(--eui-base-color-grey-75-contrast)}.eui-badge--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-badge--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-badge--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-badge--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-badge--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-badge--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-badge--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-badge--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-badge--accent{background-color:var(--eui-base-color-accent-100);border-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-accent-100-contrast)}.eui-badge--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-100-contrast);fill:var(--eui-base-color-accent-100-contrast)}.eui-badge--outline.eui-badge--primary{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-badge--outline.eui-badge--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-badge--outline.eui-badge--secondary{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-100);color:var(--eui-base-color-grey-100)}.eui-badge--outline.eui-badge--secondary .eui-icon-svg svg{color:var(--eui-base-color-grey-100);fill:var(--eui-base-color-grey-100)}.eui-badge--outline.eui-badge--info{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-badge--outline.eui-badge--info .eui-icon-svg svg{color:var(--eui-base-color-info-100);fill:var(--eui-base-color-info-100)}.eui-badge--outline.eui-badge--success{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-success-100);color:var(--eui-base-color-success-100)}.eui-badge--outline.eui-badge--success .eui-icon-svg svg{color:var(--eui-base-color-success-100);fill:var(--eui-base-color-success-100)}.eui-badge--outline.eui-badge--warning{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-warning-130);color:var(--eui-base-color-warning-130)}.eui-badge--outline.eui-badge--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-130);fill:var(--eui-base-color-warning-130)}.eui-badge--outline.eui-badge--danger{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100)}.eui-badge--outline.eui-badge--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100);fill:var(--eui-base-color-danger-100)}.eui-badge--outline.eui-badge--accent{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-accent-140);color:var(--eui-base-color-accent-140)}.eui-badge--outline.eui-badge--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-140);fill:var(--eui-base-color-accent-140)}.eui-badge--size-s{height:var(--eui-base-spacing-m);min-width:var(--eui-base-spacing-m);font:normal normal 400 .75rem/1rem var(--eui-base-font-family)}.eui-badge--size-m{height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-badge--size-l{height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:0 var(--eui-base-spacing-2xs);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-badge--size-xl{height:var(--eui-base-spacing-xl);min-width:var(--eui-base-spacing-xl);padding:0 var(--eui-base-spacing-xs);font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.eui-badge--size-2xl{height:var(--eui-base-spacing-2xl);min-width:var(--eui-base-spacing-2xl);padding:0 var(--eui-base-spacing-s);font:normal normal 400 1.5rem/1.75rem var(--eui-base-font-family)}.eui-icon--size-s .eui-badge{right:-50%;top:-30%}.eui-icon--size-s .eui-badge--size-s{right:-25%;top:-25%}.eui-icon--size-s .eui-badge--size-m{right:-40%;top:-35%}.eui-icon--size-s .eui-badge--size-l,.eui-icon--size-s .eui-badge--size-xl{right:0%;top:0%}.eui-icon--size-m .eui-badge,.eui-icon--size-m .eui-badge--size-s{right:-20%;top:-10%}.eui-icon--size-m .eui-badge--size-m{right:-35%;top:-20%}.eui-icon--size-m .eui-badge--size-l,.eui-icon--size-m .eui-badge--size-xl,.eui-icon--size-l .eui-badge,.eui-icon--size-l .eui-badge--size-s{right:0%;top:0%}.eui-icon--size-l .eui-badge--size-m{right:-15%;top:-10%}.eui-icon--size-l .eui-badge--size-l{right:-25%;top:-15%}.eui-icon--size-l .eui-badge--size-xl{right:-50%;top:-35%}.eui-icon--size-xl .eui-badge{right:5%;top:10%}.eui-icon--size-xl .eui-badge--size-s{right:10%;top:5%}.eui-icon--size-xl .eui-badge--size-m{right:0%;top:0%}.eui-icon--size-xl .eui-badge--size-l{right:-10%;top:-5%}.eui-icon--size-xl .eui-badge--size-xl{right:-30%;top:-15%}.eui-icon--size-2xl .eui-badge{right:10%;top:10%}.eui-icon--size-2xl .eui-badge--size-s{right:15%;top:5%}.eui-icon--size-2xl .eui-badge--size-m{right:5%;top:0%}.eui-icon--size-2xl .eui-badge--size-l{right:0%;top:0%}.eui-icon--size-2xl .eui-badge--size-xl{right:-20%;top:-5%}.eui-icon--size-2xl .eui-badge--size-2xl{right:-40%;top:-15%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: { ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-badge{align-items:center;border:1px solid rgba(255,255,255,.8);border-radius:var(--eui-base-spacing-2xl);display:inline-flex;justify-content:center;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));padding:0 var(--eui-base-spacing-2xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-icon .eui-badge{position:absolute;right:-30%;top:-10%;transition:all .3s ease}.eui-icon-svg+.eui-badge{position:relative;right:var(--eui-base-spacing-s);top:calc(-1 * var(--eui-base-spacing-s));transition:all .3s ease}.eui-button .eui-badge{height:inherit;position:relative;transition:all .3s ease}.eui-badge--rounded{border-radius:var(--eui-base-spacing-m)}.eui-badge{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-badge .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-badge--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-badge--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-badge--secondary{background-color:var(--eui-base-color-grey-75);border-color:var(--eui-base-color-grey-75);color:var(--eui-base-color-grey-75-contrast)}.eui-badge--secondary .eui-icon-svg svg{color:var(--eui-base-color-grey-75-contrast);fill:var(--eui-base-color-grey-75-contrast)}.eui-badge--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-badge--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-badge--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-badge--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-badge--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-badge--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-badge--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-badge--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-badge--accent{background-color:var(--eui-base-color-accent-100);border-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-accent-100-contrast)}.eui-badge--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-100-contrast);fill:var(--eui-base-color-accent-100-contrast)}.eui-badge--outline.eui-badge--primary{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-badge--outline.eui-badge--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-badge--outline.eui-badge--secondary{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-100);color:var(--eui-base-color-grey-100)}.eui-badge--outline.eui-badge--secondary .eui-icon-svg svg{color:var(--eui-base-color-grey-100);fill:var(--eui-base-color-grey-100)}.eui-badge--outline.eui-badge--info{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-badge--outline.eui-badge--info .eui-icon-svg svg{color:var(--eui-base-color-info-100);fill:var(--eui-base-color-info-100)}.eui-badge--outline.eui-badge--success{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-success-100);color:var(--eui-base-color-success-100)}.eui-badge--outline.eui-badge--success .eui-icon-svg svg{color:var(--eui-base-color-success-100);fill:var(--eui-base-color-success-100)}.eui-badge--outline.eui-badge--warning{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-warning-130);color:var(--eui-base-color-warning-130)}.eui-badge--outline.eui-badge--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-130);fill:var(--eui-base-color-warning-130)}.eui-badge--outline.eui-badge--danger{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100)}.eui-badge--outline.eui-badge--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100);fill:var(--eui-base-color-danger-100)}.eui-badge--outline.eui-badge--accent{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-accent-140);color:var(--eui-base-color-accent-140)}.eui-badge--outline.eui-badge--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-140);fill:var(--eui-base-color-accent-140)}.eui-badge--size-s{height:var(--eui-base-spacing-m);min-width:var(--eui-base-spacing-m);font:normal normal 400 .75rem/1rem var(--eui-base-font-family)}.eui-badge--size-m{height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-badge--size-l{height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:0 var(--eui-base-spacing-2xs);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-badge--size-xl{height:var(--eui-base-spacing-xl);min-width:var(--eui-base-spacing-xl);padding:0 var(--eui-base-spacing-xs);font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.eui-badge--size-2xl{height:var(--eui-base-spacing-2xl);min-width:var(--eui-base-spacing-2xl);padding:0 var(--eui-base-spacing-s);font:normal normal 400 1.5rem/1.75rem var(--eui-base-font-family)}.eui-icon--size-s .eui-badge{right:-50%;top:-30%}.eui-icon--size-s .eui-badge--size-s{right:-25%;top:-25%}.eui-icon--size-s .eui-badge--size-m{right:-40%;top:-35%}.eui-icon--size-s .eui-badge--size-l,.eui-icon--size-s .eui-badge--size-xl{right:0%;top:0%}.eui-icon--size-m .eui-badge,.eui-icon--size-m .eui-badge--size-s{right:-20%;top:-10%}.eui-icon--size-m .eui-badge--size-m{right:-35%;top:-20%}.eui-icon--size-m .eui-badge--size-l,.eui-icon--size-m .eui-badge--size-xl,.eui-icon--size-l .eui-badge,.eui-icon--size-l .eui-badge--size-s{right:0%;top:0%}.eui-icon--size-l .eui-badge--size-m{right:-15%;top:-10%}.eui-icon--size-l .eui-badge--size-l{right:-25%;top:-15%}.eui-icon--size-l .eui-badge--size-xl{right:-50%;top:-35%}.eui-icon--size-xl .eui-badge{right:5%;top:10%}.eui-icon--size-xl .eui-badge--size-s{right:10%;top:5%}.eui-icon--size-xl .eui-badge--size-m{right:0%;top:0%}.eui-icon--size-xl .eui-badge--size-l{right:-10%;top:-5%}.eui-icon--size-xl .eui-badge--size-xl{right:-30%;top:-15%}.eui-icon--size-2xl .eui-badge{right:10%;top:10%}.eui-icon--size-2xl .eui-badge--size-s{right:15%;top:5%}.eui-icon--size-2xl .eui-badge--size-m{right:5%;top:0%}.eui-icon--size-2xl .eui-badge--size-l{right:0%;top:0%}.eui-icon--size-2xl .eui-badge--size-xl{right:-20%;top:-5%}.eui-icon--size-2xl .eui-badge--size-2xl{right:-40%;top:-15%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[euiBadge], span[euiBadge], eui-badge', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".eui-badge{align-items:center;border:1px solid rgba(255,255,255,.8);border-radius:var(--eui-base-spacing-2xl);display:inline-flex;justify-content:center;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));padding:0 var(--eui-base-spacing-2xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-icon .eui-badge{position:absolute;right:-30%;top:-10%;transition:all .3s ease}.eui-icon-svg+.eui-badge{position:relative;right:var(--eui-base-spacing-s);top:calc(-1 * var(--eui-base-spacing-s));transition:all .3s ease}.eui-button .eui-badge{height:inherit;position:relative;transition:all .3s ease}.eui-badge--rounded{border-radius:var(--eui-base-spacing-m)}.eui-badge{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-badge .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-badge--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-badge--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-badge--secondary{background-color:var(--eui-base-color-grey-75);border-color:var(--eui-base-color-grey-75);color:var(--eui-base-color-grey-75-contrast)}.eui-badge--secondary .eui-icon-svg svg{color:var(--eui-base-color-grey-75-contrast);fill:var(--eui-base-color-grey-75-contrast)}.eui-badge--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-badge--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-badge--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-badge--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-badge--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-badge--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-badge--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-badge--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-badge--accent{background-color:var(--eui-base-color-accent-100);border-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-accent-100-contrast)}.eui-badge--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-100-contrast);fill:var(--eui-base-color-accent-100-contrast)}.eui-badge--outline.eui-badge--primary{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-badge--outline.eui-badge--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-badge--outline.eui-badge--secondary{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-100);color:var(--eui-base-color-grey-100)}.eui-badge--outline.eui-badge--secondary .eui-icon-svg svg{color:var(--eui-base-color-grey-100);fill:var(--eui-base-color-grey-100)}.eui-badge--outline.eui-badge--info{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-badge--outline.eui-badge--info .eui-icon-svg svg{color:var(--eui-base-color-info-100);fill:var(--eui-base-color-info-100)}.eui-badge--outline.eui-badge--success{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-success-100);color:var(--eui-base-color-success-100)}.eui-badge--outline.eui-badge--success .eui-icon-svg svg{color:var(--eui-base-color-success-100);fill:var(--eui-base-color-success-100)}.eui-badge--outline.eui-badge--warning{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-warning-130);color:var(--eui-base-color-warning-130)}.eui-badge--outline.eui-badge--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-130);fill:var(--eui-base-color-warning-130)}.eui-badge--outline.eui-badge--danger{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100)}.eui-badge--outline.eui-badge--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100);fill:var(--eui-base-color-danger-100)}.eui-badge--outline.eui-badge--accent{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-accent-140);color:var(--eui-base-color-accent-140)}.eui-badge--outline.eui-badge--accent .eui-icon-svg svg{color:var(--eui-base-color-accent-140);fill:var(--eui-base-color-accent-140)}.eui-badge--size-s{height:var(--eui-base-spacing-m);min-width:var(--eui-base-spacing-m);font:normal normal 400 .75rem/1rem var(--eui-base-font-family)}.eui-badge--size-m{height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-badge--size-l{height:var(--eui-base-spacing-l);min-width:var(--eui-base-spacing-l);padding:0 var(--eui-base-spacing-2xs);font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family)}.eui-badge--size-xl{height:var(--eui-base-spacing-xl);min-width:var(--eui-base-spacing-xl);padding:0 var(--eui-base-spacing-xs);font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.eui-badge--size-2xl{height:var(--eui-base-spacing-2xl);min-width:var(--eui-base-spacing-2xl);padding:0 var(--eui-base-spacing-s);font:normal normal 400 1.5rem/1.75rem var(--eui-base-font-family)}.eui-icon--size-s .eui-badge{right:-50%;top:-30%}.eui-icon--size-s .eui-badge--size-s{right:-25%;top:-25%}.eui-icon--size-s .eui-badge--size-m{right:-40%;top:-35%}.eui-icon--size-s .eui-badge--size-l,.eui-icon--size-s .eui-badge--size-xl{right:0%;top:0%}.eui-icon--size-m .eui-badge,.eui-icon--size-m .eui-badge--size-s{right:-20%;top:-10%}.eui-icon--size-m .eui-badge--size-m{right:-35%;top:-20%}.eui-icon--size-m .eui-badge--size-l,.eui-icon--size-m .eui-badge--size-xl,.eui-icon--size-l .eui-badge,.eui-icon--size-l .eui-badge--size-s{right:0%;top:0%}.eui-icon--size-l .eui-badge--size-m{right:-15%;top:-10%}.eui-icon--size-l .eui-badge--size-l{right:-25%;top:-15%}.eui-icon--size-l .eui-badge--size-xl{right:-50%;top:-35%}.eui-icon--size-xl .eui-badge{right:5%;top:10%}.eui-icon--size-xl .eui-badge--size-s{right:10%;top:5%}.eui-icon--size-xl .eui-badge--size-m{right:0%;top:0%}.eui-icon--size-xl .eui-badge--size-l{right:-10%;top:-5%}.eui-icon--size-xl .eui-badge--size-xl{right:-30%;top:-15%}.eui-icon--size-2xl .eui-badge{right:10%;top:10%}.eui-icon--size-2xl .eui-badge--size-s{right:15%;top:5%}.eui-icon--size-2xl .eui-badge--size-m{right:5%;top:0%}.eui-icon--size-2xl .eui-badge--size-l{right:0%;top:0%}.eui-icon--size-2xl .eui-badge--size-xl{right:-20%;top:-5%}.eui-icon--size-2xl .eui-badge--size-2xl{right:-40%;top:-15%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cssClasses: [{
@@ -41,11 +41,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                 args: ['aria-label']
             }] } });
 class EuiBadgeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBadgeModule, declarations: [EuiBadgeComponent], imports: [CommonModule], exports: [EuiBadgeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBadgeModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBadgeModule, declarations: [EuiBadgeComponent], imports: [CommonModule], exports: [EuiBadgeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBadgeModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/eui-components-eui-block-content.mjs

@@ -69,10 +69,10 @@ class EuiBlockContentComponent extends BaseDirective {
     getActiveElement() {
         return this.elRef.nativeElement.querySelector(':focus');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiBlockContentComponent, selector: "eui-block-content", inputs: { isBlocked: "isBlocked" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-block-content__wrapper\" aria-label=\"eUI Block Content wrapper\" role=\"region\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-block-content--blocked>.eui-block-content__wrapper{min-height:100px;position:relative}.eui-block-content--blocked>.eui-block-content__wrapper:before{animation:spin .8s linear infinite;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-100);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:var(--eui-base-z-index-overlay)}.eui-block-content--blocked>.eui-block-content__wrapper:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiBlockContentComponent, selector: "eui-block-content", inputs: { isBlocked: "isBlocked" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-block-content__wrapper\" aria-label=\"eUI Block Content wrapper\" role=\"region\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-block-content--blocked>.eui-block-content__wrapper{min-height:100px;position:relative}.eui-block-content--blocked>.eui-block-content__wrapper:before{animation:spin .8s linear infinite;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-100);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:var(--eui-base-z-index-overlay)}.eui-block-content--blocked>.eui-block-content__wrapper:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-block-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-block-content__wrapper\" aria-label=\"eUI Block Content wrapper\" role=\"region\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-block-content--blocked>.eui-block-content__wrapper{min-height:100px;position:relative}.eui-block-content--blocked>.eui-block-content__wrapper:before{animation:spin .8s linear infinite;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-100);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:var(--eui-base-z-index-overlay)}.eui-block-content--blocked>.eui-block-content__wrapper:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { isBlocked: [{
@@ -83,11 +83,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
             }] } });
 
 class EuiBlockContentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockContentModule, declarations: [EuiBlockContentComponent], imports: [CommonModule], exports: [EuiBlockContentComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockContentModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockContentModule, declarations: [EuiBlockContentComponent], imports: [CommonModule], exports: [EuiBlockContentComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockContentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockContentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockContentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/eui-components-eui-block-document.mjs

@@ -18,10 +18,10 @@ class EuiBlockDocumentComponent extends BaseDirective {
         super();
         this._isBlocked = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiBlockDocumentComponent, selector: "eui-block-document", inputs: { isBlocked: "isBlocked" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"eui-block-document__loader\" aria-label=\"eUI Block Document\"></div>\n", styles: [".eui-block-document__loader{display:none}.eui-block-document--blocked .eui-block-document__loader{display:block;inset:0;margin:auto;overflow:show;position:fixed;z-index:var(--eui-base-z-index-block-document)}.eui-block-document--blocked .eui-block-document__loader:before{background-color:#0006;content:\"\";display:block;height:100%;left:0;position:fixed;top:0;width:100%}.eui-block-document--blocked .eui-block-document__loader:not(:required){background-color:transparent;border:0;color:transparent;font:0/0 a;text-shadow:none}.eui-block-document--blocked .eui-block-document__loader:not(:required):after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:150px;inset:50% 15px 15px 50%;margin:-100px 0 0 -100px;position:relative;width:150px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiBlockDocumentComponent, selector: "eui-block-document", inputs: { isBlocked: "isBlocked" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"eui-block-document__loader\" aria-label=\"eUI Block Document\"></div>\n", styles: [".eui-block-document__loader{display:none}.eui-block-document--blocked .eui-block-document__loader{display:block;inset:0;margin:auto;overflow:show;position:fixed;z-index:var(--eui-base-z-index-block-document)}.eui-block-document--blocked .eui-block-document__loader:before{background-color:#0006;content:\"\";display:block;height:100%;left:0;position:fixed;top:0;width:100%}.eui-block-document--blocked .eui-block-document__loader:not(:required){background-color:transparent;border:0;color:transparent;font:0/0 a;text-shadow:none}.eui-block-document--blocked .eui-block-document__loader:not(:required):after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:150px;inset:50% 15px 15px 50%;margin:-100px 0 0 -100px;position:relative;width:150px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockDocumentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockDocumentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-block-document', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-block-document__loader\" aria-label=\"eUI Block Document\"></div>\n", styles: [".eui-block-document__loader{display:none}.eui-block-document--blocked .eui-block-document__loader{display:block;inset:0;margin:auto;overflow:show;position:fixed;z-index:var(--eui-base-z-index-block-document)}.eui-block-document--blocked .eui-block-document__loader:before{background-color:#0006;content:\"\";display:block;height:100%;left:0;position:fixed;top:0;width:100%}.eui-block-document--blocked .eui-block-document__loader:not(:required){background-color:transparent;border:0;color:transparent;font:0/0 a;text-shadow:none}.eui-block-document--blocked .eui-block-document__loader:not(:required):after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:150px;inset:50% 15px 15px 50%;margin:-100px 0 0 -100px;position:relative;width:150px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isBlocked: [{
@@ -32,11 +32,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
             }] } });
 
 class EuiBlockDocumentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockDocumentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockDocumentModule, declarations: [EuiBlockDocumentComponent], imports: [CommonModule], exports: [EuiBlockDocumentComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockDocumentModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockDocumentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockDocumentModule, declarations: [EuiBlockDocumentComponent], imports: [CommonModule], exports: [EuiBlockDocumentComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockDocumentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiBlockDocumentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiBlockDocumentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/eui-components-eui-button-group.mjs

@@ -58,10 +58,10 @@ class EuiButtonGroupComponent extends BaseDirective {
             console.log(e);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiButtonGroupComponent, selector: "eui-button-group", inputs: { isCheckboxButtons: "isCheckboxButtons", isRadioButtons: "isRadioButtons" }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "buttons", predicate: i0.forwardRef(() => EuiButtonComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-button-group{position:relative;display:inline-flex;flex-wrap:wrap;vertical-align:middle;width:100%}.eui-button-group .eui-button:active:not([readonly]),.eui-button-group .eui-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-button-group .eui-button [tabindex=\"0\"]:active:not([readonly]),.eui-button-group .eui-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-button-group .eui-button:active,.eui-button-group .eui-button:focus,.eui-button-group .eui-button.active{z-index:1}.eui-button-group>.eui-button:not(:first-child),.eui-button-group>.eui-button-group:not(:first-child){margin-left:-1px}.eui-button-group>.eui-button:not(:last-child),.eui-button-group>.eui-button-group:not(:last-child)>.eui-button{border-bottom-right-radius:0;border-top-right-radius:0}.eui-button-group>.eui-button:not(:first-child),.eui-button-group>.eui-button-group:not(:first-child)>.eui-button{border-bottom-left-radius:0;border-top-left-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiButtonGroupComponent, selector: "eui-button-group", inputs: { isCheckboxButtons: "isCheckboxButtons", isRadioButtons: "isRadioButtons" }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "buttons", predicate: i0.forwardRef(() => EuiButtonComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-button-group{position:relative;display:inline-flex;flex-wrap:wrap;vertical-align:middle;width:100%}.eui-button-group .eui-button:active:not([readonly]),.eui-button-group .eui-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-button-group .eui-button [tabindex=\"0\"]:active:not([readonly]),.eui-button-group .eui-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-button-group .eui-button:active,.eui-button-group .eui-button:focus,.eui-button-group .eui-button.active{z-index:1}.eui-button-group>.eui-button:not(:first-child),.eui-button-group>.eui-button-group:not(:first-child){margin-left:-1px}.eui-button-group>.eui-button:not(:last-child),.eui-button-group>.eui-button-group:not(:last-child)>.eui-button{border-bottom-right-radius:0;border-top-right-radius:0}.eui-button-group>.eui-button:not(:first-child),.eui-button-group>.eui-button-group:not(:first-child)>.eui-button{border-bottom-left-radius:0;border-top-left-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".eui-button-group{position:relative;display:inline-flex;flex-wrap:wrap;vertical-align:middle;width:100%}.eui-button-group .eui-button:active:not([readonly]),.eui-button-group .eui-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-button-group .eui-button [tabindex=\"0\"]:active:not([readonly]),.eui-button-group .eui-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-button-group .eui-button:active,.eui-button-group .eui-button:focus,.eui-button-group .eui-button.active{z-index:1}.eui-button-group>.eui-button:not(:first-child),.eui-button-group>.eui-button-group:not(:first-child){margin-left:-1px}.eui-button-group>.eui-button:not(:last-child),.eui-button-group>.eui-button-group:not(:last-child)>.eui-button{border-bottom-right-radius:0;border-top-right-radius:0}.eui-button-group>.eui-button:not(:first-child),.eui-button-group>.eui-button-group:not(:first-child)>.eui-button{border-bottom-left-radius:0;border-top-left-radius:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cssClasses: [{
@@ -78,11 +78,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                 type: Input
             }] } });
 class EuiButtonGroupModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiButtonGroupModule, declarations: [EuiButtonGroupComponent], imports: [CommonModule], exports: [EuiButtonGroupComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiButtonGroupModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiButtonGroupModule, declarations: [EuiButtonGroupComponent], imports: [CommonModule], exports: [EuiButtonGroupComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiButtonGroupModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],