@eui/components 18.0.0-next.63 → 18.0.0-next.64

package/fesm2022/eui-components-layout.mjs

@@ -288,7 +288,7 @@ var EuiAppSidebarHeaderUserProfileComponent = class _EuiAppSidebarHeaderUserProf
 </eui-user-profile>
 
 <button *ngIf="hasProfileDrawer" euiButton euiRounded euiIconButton euiBasicButton euiSecondary class="eui-u-ml-auto" aria-label="Toggle user profile details">
-    <eui-icon-svg [icon]="toggleProfile ? 'eui-chevron-up' : 'eui-chevron-down'"></eui-icon-svg>
+    <eui-icon-svg [icon]="toggleProfile ? 'chevron-up:sharp' : 'chevron-down:sharp'"></eui-icon-svg>
 </button>
 `, styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;height:var(--eui-app-sidebar-header-user-profile);padding:var(--eui-s-s) var(--eui-s-m);position:relative;width:100%}.eui-app-sidebar-header-user-profile--has-drawer,.eui-app-sidebar-header-user-profile--has-drawer .eui-user-profile-content--no-menu{cursor:pointer}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"], dependencies: [{ kind: "directive", type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i22.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i32.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "subInfos", "hasMenu", "isShowUserInfos", "hasWelcomeLabel", "isShowAvatarInitials", "hasTabNavigation", "isReverse", "hasToggle", "isHeaderUserProfile"] }], changeDetection: i06.ChangeDetectionStrategy.Default, encapsulation: i06.ViewEncapsulation.None });
   }
@@ -311,7 +311,7 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", n
 </eui-user-profile>
 
 <button *ngIf="hasProfileDrawer" euiButton euiRounded euiIconButton euiBasicButton euiSecondary class="eui-u-ml-auto" aria-label="Toggle user profile details">
-    <eui-icon-svg [icon]="toggleProfile ? 'eui-chevron-up' : 'eui-chevron-down'"></eui-icon-svg>
+    <eui-icon-svg [icon]="toggleProfile ? 'chevron-up:sharp' : 'chevron-down:sharp'"></eui-icon-svg>
 </button>
 `, styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;height:var(--eui-app-sidebar-header-user-profile);padding:var(--eui-s-s) var(--eui-s-m);position:relative;width:100%}.eui-app-sidebar-header-user-profile--has-drawer,.eui-app-sidebar-header-user-profile--has-drawer .eui-user-profile-content--no-menu{cursor:pointer}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"] }]
 }], propDecorators: { cssClasses: [{
@@ -716,7 +716,7 @@ var EuiToolbarMenuComponent = class _EuiToolbarMenuComponent {
                         </eui-icon-svg>
                         <span *ngIf="link.iconClass && !link.iconSvgName" class="{{ link.iconClass }} eui-icon"></span>
                         <span class="eui-toolbar-menu-label">{{ link.label | translate }}</span>
-                        <eui-icon-svg *ngIf="link.children" icon="eui-chevron-down" [fillColor]="link.active ? 'neutral' : 'white'" size="s">
+                        <eui-icon-svg *ngIf="link.children" icon="chevron-down:sharp" [fillColor]="link.active ? 'neutral' : 'white'" size="s">
                         </eui-icon-svg>
                     </div>
                 </a>
@@ -740,7 +740,7 @@ var EuiToolbarMenuComponent = class _EuiToolbarMenuComponent {
                         <span class="eui-toolbar-menu-label">{{ link.label | translate }}</span>
                         <eui-icon-svg
                             *ngIf="link.children"
-                            icon="eui-chevron-down"
+                            icon="chevron-down:sharp"
                             [fillColor]="link.active ? 'neutral' : 'white'"
                             size="s"
                             class="eui-u-ml-xs">
@@ -853,7 +853,7 @@ i011.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
                         </eui-icon-svg>
                         <span *ngIf="link.iconClass && !link.iconSvgName" class="{{ link.iconClass }} eui-icon"></span>
                         <span class="eui-toolbar-menu-label">{{ link.label | translate }}</span>
-                        <eui-icon-svg *ngIf="link.children" icon="eui-chevron-down" [fillColor]="link.active ? 'neutral' : 'white'" size="s">
+                        <eui-icon-svg *ngIf="link.children" icon="chevron-down:sharp" [fillColor]="link.active ? 'neutral' : 'white'" size="s">
                         </eui-icon-svg>
                     </div>
                 </a>
@@ -877,7 +877,7 @@ i011.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
                         <span class="eui-toolbar-menu-label">{{ link.label | translate }}</span>
                         <eui-icon-svg
                             *ngIf="link.children"
-                            icon="eui-chevron-down"
+                            icon="chevron-down:sharp"
                             [fillColor]="link.active ? 'neutral' : 'white'"
                             size="s"
                             class="eui-u-ml-xs">
@@ -1312,7 +1312,7 @@ var EuiToolbarNavbarComponent = class _EuiToolbarNavbarComponent {
 <eui-dropdown isLabelUpdatedFromSelectedItem>
     <button euiButton euiSecondary [attr.aria-label]="'Button trigger'">
         <span class="eui-label">{{ baseItemSelected.label }}</span>
-        <eui-icon-svg icon="eui-ellipsis-vertical" size="s"></eui-icon-svg>
+        <eui-icon-svg icon="chevron-down:sharp" size="s"></eui-icon-svg>
     </button>
     <eui-dropdown-content>
         <button *ngFor="let item of items" euiDropdownItem (click)="itemSelected(item.id)" ariaLabel="{{ item.label }}">
@@ -1332,7 +1332,7 @@ i020.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 <eui-dropdown isLabelUpdatedFromSelectedItem>
     <button euiButton euiSecondary [attr.aria-label]="'Button trigger'">
         <span class="eui-label">{{ baseItemSelected.label }}</span>
-        <eui-icon-svg icon="eui-ellipsis-vertical" size="s"></eui-icon-svg>
+        <eui-icon-svg icon="chevron-down:sharp" size="s"></eui-icon-svg>
     </button>
     <eui-dropdown-content>
         <button *ngFor="let item of items" euiDropdownItem (click)="itemSelected(item.id)" ariaLabel="{{ item.label }}">
@@ -1992,7 +1992,7 @@ var EuiAppTopMessageComponent = class _EuiAppTopMessageComponent {
     this.ɵfac = i032.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i032, type: _EuiAppTopMessageComponent, deps: [{ token: i117.EuiAppShellService }, { token: i032.ElementRef }, { token: i032.ChangeDetectorRef }, { token: i211.ContentObserver }, { token: i38.BaseStatesDirective }], target: i032.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i032.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EuiAppTopMessageComponent, selector: "eui-app-top-message", inputs: { isCloseable: ["isCloseable", "isCloseable", booleanAttribute10], hasCustomContent: ["hasCustomContent", "hasCustomContent", booleanAttribute10], isVisible: "isVisible" }, outputs: { topMessageClose: "topMessageClose" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "appTopMessage", first: true, predicate: ["appTopMessage"], descendants: true }], hostDirectives: [{ directive: i38.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiSuccess", "euiSuccess", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i032, template: '<div class="eui-app-top-message__wrapper" #appTopMessage>\n    <div class="eui-app-top-message__content">\n        <ng-content></ng-content>\n    </div>\n    <eui-icon-button\n        *ngIf="isCloseable"\n        icon="eui-close"\n        hasFocusBorder\n        (click)="onCloseClick()"\n        ariaLabel="Close top message"\n        class="eui-u-ml-auto">\n    </eui-icon-button>\n</div>\n', styles: [".eui-app-top-message{padding:var(--eui-s-xs) var(--eui-s-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-zi-top-message);background-color:var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.eui-app-top-message__wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.eui-app-top-message__content{display:flex;flex-direction:column;width:100%}.eui-app-top-message--primary{background-color:var(--eui-c-primary)}.eui-app-top-message--info{background-color:var(--eui-c-info)}.eui-app-top-message--success{background-color:var(--eui-c-success)}.eui-app-top-message--warning{background-color:var(--eui-c-warning)}.eui-app-top-message--danger{background-color:var(--eui-c-danger)}.eui-app-top-message--hidden{display:none}.eui-app-top-message--custom{padding:0}\n"], dependencies: [{ kind: "directive", type: i45.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i54.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }], changeDetection: i032.ChangeDetectionStrategy.Default, encapsulation: i032.ViewEncapsulation.None });
+    this.ɵcmp = i032.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EuiAppTopMessageComponent, selector: "eui-app-top-message", inputs: { isCloseable: ["isCloseable", "isCloseable", booleanAttribute10], hasCustomContent: ["hasCustomContent", "hasCustomContent", booleanAttribute10], isVisible: "isVisible" }, outputs: { topMessageClose: "topMessageClose" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "appTopMessage", first: true, predicate: ["appTopMessage"], descendants: true }], hostDirectives: [{ directive: i38.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiSuccess", "euiSuccess", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i032, template: '<div class="eui-app-top-message__wrapper" #appTopMessage>\n    <div class="eui-app-top-message__content">\n        <ng-content></ng-content>\n    </div>\n    <eui-icon-button\n        *ngIf="isCloseable"\n        icon="eui-ecl-close"\n        hasFocusBorder\n        (click)="onCloseClick()"\n        ariaLabel="Close top message"\n        class="eui-u-ml-auto">\n    </eui-icon-button>\n</div>\n', styles: [".eui-app-top-message{padding:var(--eui-s-xs) var(--eui-s-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-zi-top-message);background-color:var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.eui-app-top-message__wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.eui-app-top-message__content{display:flex;flex-direction:column;width:100%}.eui-app-top-message--primary{background-color:var(--eui-c-primary)}.eui-app-top-message--info{background-color:var(--eui-c-info)}.eui-app-top-message--success{background-color:var(--eui-c-success)}.eui-app-top-message--warning{background-color:var(--eui-c-warning)}.eui-app-top-message--danger{background-color:var(--eui-c-danger)}.eui-app-top-message--hidden{display:none}.eui-app-top-message--custom{padding:0}\n"], dependencies: [{ kind: "directive", type: i45.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i54.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }], changeDetection: i032.ChangeDetectionStrategy.Default, encapsulation: i032.ViewEncapsulation.None });
   }
 };
 i032.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i032, type: EuiAppTopMessageComponent, decorators: [{
@@ -2010,7 +2010,7 @@ i032.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
         "euiVariant"
       ]
     }
-  ], template: '<div class="eui-app-top-message__wrapper" #appTopMessage>\n    <div class="eui-app-top-message__content">\n        <ng-content></ng-content>\n    </div>\n    <eui-icon-button\n        *ngIf="isCloseable"\n        icon="eui-close"\n        hasFocusBorder\n        (click)="onCloseClick()"\n        ariaLabel="Close top message"\n        class="eui-u-ml-auto">\n    </eui-icon-button>\n</div>\n', styles: [".eui-app-top-message{padding:var(--eui-s-xs) var(--eui-s-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-zi-top-message);background-color:var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.eui-app-top-message__wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.eui-app-top-message__content{display:flex;flex-direction:column;width:100%}.eui-app-top-message--primary{background-color:var(--eui-c-primary)}.eui-app-top-message--info{background-color:var(--eui-c-info)}.eui-app-top-message--success{background-color:var(--eui-c-success)}.eui-app-top-message--warning{background-color:var(--eui-c-warning)}.eui-app-top-message--danger{background-color:var(--eui-c-danger)}.eui-app-top-message--hidden{display:none}.eui-app-top-message--custom{padding:0}\n"] }]
+  ], template: '<div class="eui-app-top-message__wrapper" #appTopMessage>\n    <div class="eui-app-top-message__content">\n        <ng-content></ng-content>\n    </div>\n    <eui-icon-button\n        *ngIf="isCloseable"\n        icon="eui-ecl-close"\n        hasFocusBorder\n        (click)="onCloseClick()"\n        ariaLabel="Close top message"\n        class="eui-u-ml-auto">\n    </eui-icon-button>\n</div>\n', styles: [".eui-app-top-message{padding:var(--eui-s-xs) var(--eui-s-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-zi-top-message);background-color:var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.eui-app-top-message__wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.eui-app-top-message__content{display:flex;flex-direction:column;width:100%}.eui-app-top-message--primary{background-color:var(--eui-c-primary)}.eui-app-top-message--info{background-color:var(--eui-c-info)}.eui-app-top-message--success{background-color:var(--eui-c-success)}.eui-app-top-message--warning{background-color:var(--eui-c-warning)}.eui-app-top-message--danger{background-color:var(--eui-c-danger)}.eui-app-top-message--hidden{display:none}.eui-app-top-message--custom{padding:0}\n"] }]
 }], ctorParameters: () => [{ type: i117.EuiAppShellService }, { type: i032.ElementRef }, { type: i032.ChangeDetectorRef }, { type: i211.ContentObserver }, { type: i38.BaseStatesDirective }], propDecorators: { cssClasses: [{
   type: HostBinding25,
   args: ["class"]
@@ -2142,12 +2142,12 @@ var EuiSearchComponent = class _EuiSearchComponent {
     this.ɵfac = i034.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i034, type: _EuiSearchComponent, deps: [], target: i034.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i034.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute11], isInputText: ["isInputText", "isInputText", booleanAttribute11], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute11], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute11] }, outputs: { search: "search", selectionChange: "selectionChange", searchClick: "searchClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i034, template: '<eui-icon-input euiIconPositionEnd>\n    @if (isAutocomplete) {\n        <eui-autocomplete [autocompleteData]="searchResults"\n            placeholder="{{placeholderLabel}}"\n            panelWidth="{{panelWidth}}"\n            (inputBlur)="onInputBlur($event)"\n            (inputFocus)="onInputFocus($event)"\n            (selectionChange)="onSelectionChange($event)"\n            (inputChange)="onSearch($event)">\n            <ng-container *ngIf="templates.length !== 0">\n                <ng-template let-option euiTemplate="dropdownOption">\n                    <ng-container\n                        [ngTemplateOutlet]="resultItemTemplate"\n                        [ngTemplateOutletContext]="{ $implicit: option }">\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n        </eui-autocomplete>\n    } @else {\n        @if (isInputText) {\n            <input euiInputText class="mywp-search-bar__input" [(ngModel)]="searchInput"\n                placeholder="{{ placeholderLabel }}"\n                (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onSearchInput($event)" />\n        }\n    }\n\n    @if (hasSearchButton) {\n        <button class="eui-search__input-button"\n            euiButton\n            euiRounded euiIconButton\n            [euiSecondary]="isInputFocus"\n            [euiPrimaryDark]="!isInputFocus"\n            (click)="onSearchClick()"\n            aria-label="search button">\n            <eui-icon-svg icon="eui-search"></eui-icon-svg>\n        </button>\n    } @else {\n        <eui-icon-svg icon="eui-search"></eui-icon-svg>\n    }\n</eui-icon-input>\n', styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-max)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-light);color:var(--eui-c-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-c-black)!important}.eui-search--focus .eui-search__input-button .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:4px;top:4px;color:var(--eui-c-neutral-lightest)!important}.eui-search__input-button .eui-icon-svg{z-index:1}.eui-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-white)!important;fill:var(--eui-c-white)!important}.eui-search--no-animation .eui-input-text{transition:none}.eui-search--focus.eui-search--no-animation .eui-input-text{width:200px}@media screen and (max-width: 767px){.eui-search{display:none}}\n"], dependencies: [{ kind: "directive", type: i118.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i118.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i212.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i212.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i39.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i46.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["autocompleteData", "visibleOptions", "matching", "placeholder", "autocompleteDataSelected", "chipsSortOrder", "itemsSortOrder", "chipsPosition", "groupBy", "toggleLinkMoreLabel", "toggleLinkLessLabel", "classList", "panelWidth", "dragAndDropSourceName", "dragAndDropConnectedTo", "isFreeValueAllowed", "isReadonly", "isLoading", "hasChips", "isAsync", "isChipsSorted", "isItemsSorted", "isChipsRemovable", "isDuplicateValueAllowed", "isAddOnBlur", "isForceSelection", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsDragAndDrop"], outputs: ["panelClose", "panelOpen", "inputFocus", "inputBlur", "clear", "selectionChange", "itemAdd", "itemRemove", "inputChange", "chipDragStart", "chipDragRelease", "chipDrop"] }, { kind: "directive", type: i55.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "component", type: i6.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i034.ChangeDetectionStrategy.Default, encapsulation: i034.ViewEncapsulation.None });
+    this.ɵcmp = i034.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute11], isInputText: ["isInputText", "isInputText", booleanAttribute11], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute11], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute11] }, outputs: { search: "search", selectionChange: "selectionChange", searchClick: "searchClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i034, template: '<eui-icon-input euiIconPositionEnd>\n    @if (isAutocomplete) {\n        <eui-autocomplete [autocompleteData]="searchResults"\n            placeholder="{{placeholderLabel}}"\n            panelWidth="{{panelWidth}}"\n            (inputBlur)="onInputBlur($event)"\n            (inputFocus)="onInputFocus($event)"\n            (selectionChange)="onSelectionChange($event)"\n            (inputChange)="onSearch($event)">\n            <ng-container *ngIf="templates.length !== 0">\n                <ng-template let-option euiTemplate="dropdownOption">\n                    <ng-container\n                        [ngTemplateOutlet]="resultItemTemplate"\n                        [ngTemplateOutletContext]="{ $implicit: option }">\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n        </eui-autocomplete>\n    } @else {\n        @if (isInputText) {\n            <input euiInputText class="mywp-search-bar__input" [(ngModel)]="searchInput"\n                placeholder="{{ placeholderLabel }}"\n                (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onSearchInput($event)" />\n        }\n    }\n\n    @if (hasSearchButton) {\n        <button class="eui-search__input-button"\n            euiButton\n            euiRounded euiIconButton\n            [euiSecondary]="isInputFocus"\n            [euiPrimaryDark]="!isInputFocus"\n            (click)="onSearchClick()"\n            aria-label="search button">\n            <eui-icon-svg icon="eui-ecl-search"></eui-icon-svg>\n        </button>\n    } @else {\n        <eui-icon-svg icon="eui-ecl-search"></eui-icon-svg>\n    }\n</eui-icon-input>\n', styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-max)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-light);color:var(--eui-c-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-c-black)!important}.eui-search--focus .eui-search__input-button .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:4px;top:4px;color:var(--eui-c-neutral-lightest)!important}.eui-search__input-button .eui-icon-svg{z-index:1}.eui-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-white)!important;fill:var(--eui-c-white)!important}.eui-search--no-animation .eui-input-text{transition:none}.eui-search--focus.eui-search--no-animation .eui-input-text{width:200px}@media screen and (max-width: 767px){.eui-search{display:none}}\n"], dependencies: [{ kind: "directive", type: i118.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i118.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i212.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i212.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i39.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i46.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["autocompleteData", "visibleOptions", "matching", "placeholder", "autocompleteDataSelected", "chipsSortOrder", "itemsSortOrder", "chipsPosition", "groupBy", "toggleLinkMoreLabel", "toggleLinkLessLabel", "classList", "panelWidth", "dragAndDropSourceName", "dragAndDropConnectedTo", "isFreeValueAllowed", "isReadonly", "isLoading", "hasChips", "isAsync", "isChipsSorted", "isItemsSorted", "isChipsRemovable", "isDuplicateValueAllowed", "isAddOnBlur", "isForceSelection", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsDragAndDrop"], outputs: ["panelClose", "panelOpen", "inputFocus", "inputBlur", "clear", "selectionChange", "itemAdd", "itemRemove", "inputChange", "chipDragStart", "chipDragRelease", "chipDrop"] }, { kind: "directive", type: i55.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "component", type: i6.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i034.ChangeDetectionStrategy.Default, encapsulation: i034.ViewEncapsulation.None });
   }
 };
 i034.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i034, type: EuiSearchComponent, decorators: [{
   type: Component26,
-  args: [{ selector: "eui-search", changeDetection: ChangeDetectionStrategy23.Default, encapsulation: ViewEncapsulation43.None, template: '<eui-icon-input euiIconPositionEnd>\n    @if (isAutocomplete) {\n        <eui-autocomplete [autocompleteData]="searchResults"\n            placeholder="{{placeholderLabel}}"\n            panelWidth="{{panelWidth}}"\n            (inputBlur)="onInputBlur($event)"\n            (inputFocus)="onInputFocus($event)"\n            (selectionChange)="onSelectionChange($event)"\n            (inputChange)="onSearch($event)">\n            <ng-container *ngIf="templates.length !== 0">\n                <ng-template let-option euiTemplate="dropdownOption">\n                    <ng-container\n                        [ngTemplateOutlet]="resultItemTemplate"\n                        [ngTemplateOutletContext]="{ $implicit: option }">\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n        </eui-autocomplete>\n    } @else {\n        @if (isInputText) {\n            <input euiInputText class="mywp-search-bar__input" [(ngModel)]="searchInput"\n                placeholder="{{ placeholderLabel }}"\n                (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onSearchInput($event)" />\n        }\n    }\n\n    @if (hasSearchButton) {\n        <button class="eui-search__input-button"\n            euiButton\n            euiRounded euiIconButton\n            [euiSecondary]="isInputFocus"\n            [euiPrimaryDark]="!isInputFocus"\n            (click)="onSearchClick()"\n            aria-label="search button">\n            <eui-icon-svg icon="eui-search"></eui-icon-svg>\n        </button>\n    } @else {\n        <eui-icon-svg icon="eui-search"></eui-icon-svg>\n    }\n</eui-icon-input>\n', styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-max)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-light);color:var(--eui-c-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-c-black)!important}.eui-search--focus .eui-search__input-button .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:4px;top:4px;color:var(--eui-c-neutral-lightest)!important}.eui-search__input-button .eui-icon-svg{z-index:1}.eui-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-white)!important;fill:var(--eui-c-white)!important}.eui-search--no-animation .eui-input-text{transition:none}.eui-search--focus.eui-search--no-animation .eui-input-text{width:200px}@media screen and (max-width: 767px){.eui-search{display:none}}\n"] }]
+  args: [{ selector: "eui-search", changeDetection: ChangeDetectionStrategy23.Default, encapsulation: ViewEncapsulation43.None, template: '<eui-icon-input euiIconPositionEnd>\n    @if (isAutocomplete) {\n        <eui-autocomplete [autocompleteData]="searchResults"\n            placeholder="{{placeholderLabel}}"\n            panelWidth="{{panelWidth}}"\n            (inputBlur)="onInputBlur($event)"\n            (inputFocus)="onInputFocus($event)"\n            (selectionChange)="onSelectionChange($event)"\n            (inputChange)="onSearch($event)">\n            <ng-container *ngIf="templates.length !== 0">\n                <ng-template let-option euiTemplate="dropdownOption">\n                    <ng-container\n                        [ngTemplateOutlet]="resultItemTemplate"\n                        [ngTemplateOutletContext]="{ $implicit: option }">\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n        </eui-autocomplete>\n    } @else {\n        @if (isInputText) {\n            <input euiInputText class="mywp-search-bar__input" [(ngModel)]="searchInput"\n                placeholder="{{ placeholderLabel }}"\n                (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onSearchInput($event)" />\n        }\n    }\n\n    @if (hasSearchButton) {\n        <button class="eui-search__input-button"\n            euiButton\n            euiRounded euiIconButton\n            [euiSecondary]="isInputFocus"\n            [euiPrimaryDark]="!isInputFocus"\n            (click)="onSearchClick()"\n            aria-label="search button">\n            <eui-icon-svg icon="eui-ecl-search"></eui-icon-svg>\n        </button>\n    } @else {\n        <eui-icon-svg icon="eui-ecl-search"></eui-icon-svg>\n    }\n</eui-icon-input>\n', styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-max)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-light);color:var(--eui-c-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-c-black)!important}.eui-search--focus .eui-search__input-button .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:4px;top:4px;color:var(--eui-c-neutral-lightest)!important}.eui-search__input-button .eui-icon-svg{z-index:1}.eui-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-white)!important;fill:var(--eui-c-white)!important}.eui-search--no-animation .eui-input-text{transition:none}.eui-search--focus.eui-search--no-animation .eui-input-text{width:200px}@media screen and (max-width: 767px){.eui-search{display:none}}\n"] }]
 }], propDecorators: { cssClasses: [{
   type: HostBinding26,
   args: ["class"]
@@ -2345,12 +2345,12 @@ var EuiBreadcrumbItemComponent = class _EuiBreadcrumbItemComponent {
     this.ɵfac = i036.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i036, type: _EuiBreadcrumbItemComponent, deps: [{ token: i036.ElementRef }, { token: i119.Router }, { token: i036.ChangeDetectorRef }, { token: i036.ElementRef }, { token: i213.LogService, optional: true }], target: i036.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i036.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EuiBreadcrumbItemComponent, selector: "eui-breadcrumb-item", inputs: { id: "id", label: "label", link: "link", navigationExtras: "navigationExtras" }, host: { properties: { "class": "this.string" } }, ngImport: i036, template: '<div *ngIf="hasPrevious" class="eui-breadcrumb-item__separator">\n    <eui-icon-svg icon="eui-chevron-forward" size="xs" fillColor="neutral"></eui-icon-svg>\n</div>\n<button type="button" class="eui-breadcrumb-item__label-wrapper" *ngIf="link" euiButton euiBasicButton euiSizeS [euiSecondary]="!hasNext" [euiPrimary]="hasNext" (click)="onClick()">\n    <span class="eui-breadcrumb-item__label">{{ label }}</span>\n</button>\n<span class="eui-breadcrumb-item__label-wrapper" *ngIf="!link" euiLabel euiSizeS [euiSecondary]="!hasNext" [euiPrimary]="hasNext">\n    <span class="eui-breadcrumb-item__label">{{ label }}</span>\n</span>\n', dependencies: [{ kind: "directive", type: i310.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i47.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i56.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i62.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], changeDetection: i036.ChangeDetectionStrategy.Default, encapsulation: i036.ViewEncapsulation.None });
+    this.ɵcmp = i036.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EuiBreadcrumbItemComponent, selector: "eui-breadcrumb-item", inputs: { id: "id", label: "label", link: "link", navigationExtras: "navigationExtras" }, host: { properties: { "class": "this.string" } }, ngImport: i036, template: '<div *ngIf="hasPrevious" class="eui-breadcrumb-item__separator">\n    <eui-icon-svg icon="chevron-forward:sharp" size="xs" fillColor="neutral"></eui-icon-svg>\n</div>\n<button type="button" class="eui-breadcrumb-item__label-wrapper" *ngIf="link" euiButton euiBasicButton euiSizeS [euiSecondary]="!hasNext" [euiPrimary]="hasNext" (click)="onClick()">\n    <span class="eui-breadcrumb-item__label">{{ label }}</span>\n</button>\n<span class="eui-breadcrumb-item__label-wrapper" *ngIf="!link" euiLabel euiSizeS [euiSecondary]="!hasNext" [euiPrimary]="hasNext">\n    <span class="eui-breadcrumb-item__label">{{ label }}</span>\n</span>\n', dependencies: [{ kind: "directive", type: i310.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i47.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i56.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i62.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], changeDetection: i036.ChangeDetectionStrategy.Default, encapsulation: i036.ViewEncapsulation.None });
   }
 };
 i036.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i036, type: EuiBreadcrumbItemComponent, decorators: [{
   type: Component27,
-  args: [{ selector: "eui-breadcrumb-item", changeDetection: ChangeDetectionStrategy25.Default, encapsulation: ViewEncapsulation45.None, template: '<div *ngIf="hasPrevious" class="eui-breadcrumb-item__separator">\n    <eui-icon-svg icon="eui-chevron-forward" size="xs" fillColor="neutral"></eui-icon-svg>\n</div>\n<button type="button" class="eui-breadcrumb-item__label-wrapper" *ngIf="link" euiButton euiBasicButton euiSizeS [euiSecondary]="!hasNext" [euiPrimary]="hasNext" (click)="onClick()">\n    <span class="eui-breadcrumb-item__label">{{ label }}</span>\n</button>\n<span class="eui-breadcrumb-item__label-wrapper" *ngIf="!link" euiLabel euiSizeS [euiSecondary]="!hasNext" [euiPrimary]="hasNext">\n    <span class="eui-breadcrumb-item__label">{{ label }}</span>\n</span>\n' }]
+  args: [{ selector: "eui-breadcrumb-item", changeDetection: ChangeDetectionStrategy25.Default, encapsulation: ViewEncapsulation45.None, template: '<div *ngIf="hasPrevious" class="eui-breadcrumb-item__separator">\n    <eui-icon-svg icon="chevron-forward:sharp" size="xs" fillColor="neutral"></eui-icon-svg>\n</div>\n<button type="button" class="eui-breadcrumb-item__label-wrapper" *ngIf="link" euiButton euiBasicButton euiSizeS [euiSecondary]="!hasNext" [euiPrimary]="hasNext" (click)="onClick()">\n    <span class="eui-breadcrumb-item__label">{{ label }}</span>\n</button>\n<span class="eui-breadcrumb-item__label-wrapper" *ngIf="!link" euiLabel euiSizeS [euiSecondary]="!hasNext" [euiPrimary]="hasNext">\n    <span class="eui-breadcrumb-item__label">{{ label }}</span>\n</span>\n' }]
 }], ctorParameters: () => [{ type: i036.ElementRef }, { type: i119.Router }, { type: i036.ChangeDetectorRef }, { type: i036.ElementRef }, { type: i213.LogService, decorators: [{
   type: Optional3
 }] }], propDecorators: { string: [{
@@ -2427,12 +2427,12 @@ var CollapsedBreadcrumbComponent = class _CollapsedBreadcrumbComponent {
     this.ɵfac = i037.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i037, type: _CollapsedBreadcrumbComponent, deps: [{ token: i037.ElementRef }, { token: i037.Renderer2 }, { token: i037.ViewContainerRef }], target: i037.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i037.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _CollapsedBreadcrumbComponent, selector: "eui-collapsed-breadcrumb", queries: [{ propertyName: "customButton", first: true, predicate: i037.forwardRef(() => CollapsedButtonDirective), descendants: true, static: true }, { propertyName: "listItemComponents", predicate: i037.forwardRef(() => EuiListItemComponent) }], viewQueries: [{ propertyName: "list", first: true, predicate: EuiListComponent, descendants: true, read: ElementRef4, static: true }], ngImport: i037, template: '<eui-dropdown>\n    <ng-container *ngIf="!hasCustomButton()">\n        <button type="button" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n            <eui-icon-svg icon="eui-ellipsis-horizontal"></eui-icon-svg>\n        </button>\n    </ng-container>\n    <ng-content select="collapsed-button"></ng-content>\n    <eui-dropdown-content>\n        <ul euiList>\n            <ng-content></ng-content>\n        </ul>\n    </eui-dropdown-content>\n</eui-dropdown>\n', styles: [".eui-breadcrumb-item{align-items:center;display:flex;z-index:v(eui-zi-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 v(eui-s-2xs)}.eui-breadcrumb-item__label-wrapper{padding:0 v(eui-s-2xs)}.eui-breadcrumb-item__label{font:v(eui-f-s-bold)}\n"], dependencies: [{ kind: "directive", type: i120.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i214.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i311.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i48.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "directive", type: i48.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i57.EuiListComponent, selector: "[euiList], eui-list" }], changeDetection: i037.ChangeDetectionStrategy.Default, encapsulation: i037.ViewEncapsulation.None });
+    this.ɵcmp = i037.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _CollapsedBreadcrumbComponent, selector: "eui-collapsed-breadcrumb", queries: [{ propertyName: "customButton", first: true, predicate: i037.forwardRef(() => CollapsedButtonDirective), descendants: true, static: true }, { propertyName: "listItemComponents", predicate: i037.forwardRef(() => EuiListItemComponent) }], viewQueries: [{ propertyName: "list", first: true, predicate: EuiListComponent, descendants: true, read: ElementRef4, static: true }], ngImport: i037, template: '<eui-dropdown>\n    <ng-container *ngIf="!hasCustomButton()">\n        <button type="button" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n            <eui-icon-svg icon="ellipsis-horizontal:sharp"></eui-icon-svg>\n        </button>\n    </ng-container>\n    <ng-content select="collapsed-button"></ng-content>\n    <eui-dropdown-content>\n        <ul euiList>\n            <ng-content></ng-content>\n        </ul>\n    </eui-dropdown-content>\n</eui-dropdown>\n', styles: [".eui-breadcrumb-item{align-items:center;display:flex;z-index:v(eui-zi-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 v(eui-s-2xs)}.eui-breadcrumb-item__label-wrapper{padding:0 v(eui-s-2xs)}.eui-breadcrumb-item__label{font:v(eui-f-s-bold)}\n"], dependencies: [{ kind: "directive", type: i120.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i214.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i311.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i48.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "directive", type: i48.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i57.EuiListComponent, selector: "[euiList], eui-list" }], changeDetection: i037.ChangeDetectionStrategy.Default, encapsulation: i037.ViewEncapsulation.None });
   }
 };
 i037.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i037, type: CollapsedBreadcrumbComponent, decorators: [{
   type: Component28,
-  args: [{ selector: "eui-collapsed-breadcrumb", changeDetection: ChangeDetectionStrategy27.Default, encapsulation: ViewEncapsulation47.None, template: '<eui-dropdown>\n    <ng-container *ngIf="!hasCustomButton()">\n        <button type="button" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n            <eui-icon-svg icon="eui-ellipsis-horizontal"></eui-icon-svg>\n        </button>\n    </ng-container>\n    <ng-content select="collapsed-button"></ng-content>\n    <eui-dropdown-content>\n        <ul euiList>\n            <ng-content></ng-content>\n        </ul>\n    </eui-dropdown-content>\n</eui-dropdown>\n', styles: [".eui-breadcrumb-item{align-items:center;display:flex;z-index:v(eui-zi-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 v(eui-s-2xs)}.eui-breadcrumb-item__label-wrapper{padding:0 v(eui-s-2xs)}.eui-breadcrumb-item__label{font:v(eui-f-s-bold)}\n"] }]
+  args: [{ selector: "eui-collapsed-breadcrumb", changeDetection: ChangeDetectionStrategy27.Default, encapsulation: ViewEncapsulation47.None, template: '<eui-dropdown>\n    <ng-container *ngIf="!hasCustomButton()">\n        <button type="button" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n            <eui-icon-svg icon="ellipsis-horizontal:sharp"></eui-icon-svg>\n        </button>\n    </ng-container>\n    <ng-content select="collapsed-button"></ng-content>\n    <eui-dropdown-content>\n        <ul euiList>\n            <ng-content></ng-content>\n        </ul>\n    </eui-dropdown-content>\n</eui-dropdown>\n', styles: [".eui-breadcrumb-item{align-items:center;display:flex;z-index:v(eui-zi-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 v(eui-s-2xs)}.eui-breadcrumb-item__label-wrapper{padding:0 v(eui-s-2xs)}.eui-breadcrumb-item__label{font:v(eui-f-s-bold)}\n"] }]
 }], ctorParameters: () => [{ type: i037.ElementRef }, { type: i037.Renderer2 }, { type: i037.ViewContainerRef }], propDecorators: { customButton: [{
   type: ContentChild3,
   args: [forwardRef10(() => CollapsedButtonDirective), { static: true }]
@@ -3510,7 +3510,7 @@ var EuiNotificationItemComponent = class _EuiNotificationItemComponent {
     <div class="eui-notification-item-content-top eui-u-f-s">
         <div *ngIf="item.metadata?.date" class="eui-notification-item-content-top__date">
             <span class="eui-notification-item-content-top__date-icon eui-u-mr-s">
-                <eui-icon-svg icon="eui-notifications" size="m" [fillColor]="iconColor"></eui-icon-svg>
+                <eui-icon-svg icon="notifications:sharp" size="m" [fillColor]="iconColor"></eui-icon-svg>
                 <span
                     *ngIf="item.metadata?.new"
                     class="eui-notification-item-content-top__date-dot eui-u-c-danger-light eui-u-f-s eui-icon eui-icon-circle"></span>
@@ -3518,7 +3518,7 @@ var EuiNotificationItemComponent = class _EuiNotificationItemComponent {
             <span>{{ item.metadata?.date | date: dateFormat }}</span>
         </div>
         <div *ngIf="item.metadata?.important" class="eui-u-f-m-bold">
-            <eui-icon-svg icon="eui-exclamation" fillColor="danger" class="eui-u-ml-xs"></eui-icon-svg>
+            <eui-icon-svg icon="alert:sharp" fillColor="danger" class="eui-u-ml-xs"></eui-icon-svg>
         </div>
     </div>
     <span class="eui-notification-item-content-middle eui-u-cursor-pointer">
@@ -3585,7 +3585,7 @@ i054.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
     <div class="eui-notification-item-content-top eui-u-f-s">
         <div *ngIf="item.metadata?.date" class="eui-notification-item-content-top__date">
             <span class="eui-notification-item-content-top__date-icon eui-u-mr-s">
-                <eui-icon-svg icon="eui-notifications" size="m" [fillColor]="iconColor"></eui-icon-svg>
+                <eui-icon-svg icon="notifications:sharp" size="m" [fillColor]="iconColor"></eui-icon-svg>
                 <span
                     *ngIf="item.metadata?.new"
                     class="eui-notification-item-content-top__date-dot eui-u-c-danger-light eui-u-f-s eui-icon eui-icon-circle"></span>
@@ -3593,7 +3593,7 @@ i054.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
             <span>{{ item.metadata?.date | date: dateFormat }}</span>
         </div>
         <div *ngIf="item.metadata?.important" class="eui-u-f-m-bold">
-            <eui-icon-svg icon="eui-exclamation" fillColor="danger" class="eui-u-ml-xs"></eui-icon-svg>
+            <eui-icon-svg icon="alert:sharp" fillColor="danger" class="eui-u-ml-xs"></eui-icon-svg>
         </div>
     </div>
     <span class="eui-notification-item-content-middle eui-u-cursor-pointer">
@@ -3839,7 +3839,7 @@ var EuiNotificationsComponent = class _EuiNotificationsComponent {
   static {
     this.ɵcmp = i055.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EuiNotificationsComponent, selector: "eui-notifications", inputs: { count: "count", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: "noNotificationFoundLink", isShowMarkAsRead: "isShowMarkAsRead", isShowViewAllAction: "isShowViewAllAction", isHidePanelOnViewAllAction: "isHidePanelOnViewAllAction", customUnreadCount: "customUnreadCount", isShowMarkAllAsReadButton: "isShowMarkAllAsReadButton", isShowSettingsButton: "isShowSettingsButton", isShowRefreshButton: "isShowRefreshButton" }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { listeners: { "body:click": "onHide()" }, properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i055, template: `<eui-icon-button
     class="eui-notifications__trigger"
-    icon="eui-notifications"
+    icon="notifications:sharp"
     size="s"
     fillColor="white"
     (click)="onClicked($event)"
@@ -3878,7 +3878,7 @@ var EuiNotificationsComponent = class _EuiNotificationsComponent {
                 [attr.aria-label]="markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)"
                 title="{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}"
                 (click)="onMarkAllAsRead($event)">
-                <eui-icon-svg icon="eui-checkmark-done" fillColor="primary"></eui-icon-svg>
+                <eui-icon-svg icon="checkmark-done:sharp"></eui-icon-svg>
             </button>
             <button
                 euiButton
@@ -3892,7 +3892,7 @@ var EuiNotificationsComponent = class _EuiNotificationsComponent {
                 [attr.aria-label]="settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)"
                 title="{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}"
                 (click)="onSettings($event)">
-                <eui-icon-svg icon="eui-settings" fillColor="primary"></eui-icon-svg>
+                <eui-icon-svg icon="settings:sharp"></eui-icon-svg>
             </button>
             <button
                 euiButton
@@ -3906,7 +3906,7 @@ var EuiNotificationsComponent = class _EuiNotificationsComponent {
                 [attr.aria-label]="refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)"
                 title="{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}"
                 (click)="onRefresh($event)">
-                <eui-icon-svg icon="eui-refresh" fillColor="primary"></eui-icon-svg>
+                <eui-icon-svg icon="refresh:sharp"></eui-icon-svg>
             </button>
         </div>
     </eui-overlay-header>
@@ -3950,7 +3950,7 @@ i055.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Component41,
   args: [{ selector: "eui-notifications", changeDetection: ChangeDetectionStrategy49.Default, encapsulation: ViewEncapsulation71.None, template: `<eui-icon-button
     class="eui-notifications__trigger"
-    icon="eui-notifications"
+    icon="notifications:sharp"
     size="s"
     fillColor="white"
     (click)="onClicked($event)"
@@ -3989,7 +3989,7 @@ i055.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
                 [attr.aria-label]="markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)"
                 title="{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}"
                 (click)="onMarkAllAsRead($event)">
-                <eui-icon-svg icon="eui-checkmark-done" fillColor="primary"></eui-icon-svg>
+                <eui-icon-svg icon="checkmark-done:sharp"></eui-icon-svg>
             </button>
             <button
                 euiButton
@@ -4003,7 +4003,7 @@ i055.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
                 [attr.aria-label]="settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)"
                 title="{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}"
                 (click)="onSettings($event)">
-                <eui-icon-svg icon="eui-settings" fillColor="primary"></eui-icon-svg>
+                <eui-icon-svg icon="settings:sharp"></eui-icon-svg>
             </button>
             <button
                 euiButton
@@ -4017,7 +4017,7 @@ i055.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
                 [attr.aria-label]="refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)"
                 title="{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}"
                 (click)="onRefresh($event)">
-                <eui-icon-svg icon="eui-refresh" fillColor="primary"></eui-icon-svg>
+                <eui-icon-svg icon="refresh:sharp"></eui-icon-svg>
             </button>
         </div>
     </eui-overlay-header>
@@ -4202,7 +4202,7 @@ var EuiNotificationItemV2Component = class _EuiNotificationItemV2Component {
     <div class="eui-notification-item-content-top eui-u-f-s">
         <div *ngIf="item.metadata?.date" class="eui-notification-item-content-top__date">
             <span class="eui-notification-item-content-top__date-icon eui-u-mr-s">
-                <eui-icon-svg set="eui" icon="eui-notifications" size="m" [fillColor]="iconColor"></eui-icon-svg>
+                <eui-icon-svg icon="notifications:sharp" size="m" [fillColor]="iconColor"></eui-icon-svg>
                 <span
                     *ngIf="item.metadata?.new"
                     class="eui-notification-item-content-top__date-dot eui-u-c-danger-light eui-u-f-s eui-icon eui-icon-circle"></span>
@@ -4210,7 +4210,7 @@ var EuiNotificationItemV2Component = class _EuiNotificationItemV2Component {
             <span>{{ item.metadata?.date | date: dateFormat }}</span>
         </div>
         <div *ngIf="item.metadata?.important" class="eui-u-f-m-bold">
-            <eui-icon-svg icon="eui-exclamation" fillColor="danger-100" class="eui-u-ml-xs"></eui-icon-svg>
+            <eui-icon-svg icon="alert:sharp" fillColor="danger-100" class="eui-u-ml-xs"></eui-icon-svg>
         </div>
     </div>
     <span class="eui-notification-item-content-middle eui-u-cursor-pointer">
@@ -4278,7 +4278,7 @@ i057.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
     <div class="eui-notification-item-content-top eui-u-f-s">
         <div *ngIf="item.metadata?.date" class="eui-notification-item-content-top__date">
             <span class="eui-notification-item-content-top__date-icon eui-u-mr-s">
-                <eui-icon-svg set="eui" icon="eui-notifications" size="m" [fillColor]="iconColor"></eui-icon-svg>
+                <eui-icon-svg icon="notifications:sharp" size="m" [fillColor]="iconColor"></eui-icon-svg>
                 <span
                     *ngIf="item.metadata?.new"
                     class="eui-notification-item-content-top__date-dot eui-u-c-danger-light eui-u-f-s eui-icon eui-icon-circle"></span>
@@ -4286,7 +4286,7 @@ i057.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
             <span>{{ item.metadata?.date | date: dateFormat }}</span>
         </div>
         <div *ngIf="item.metadata?.important" class="eui-u-f-m-bold">
-            <eui-icon-svg icon="eui-exclamation" fillColor="danger-100" class="eui-u-ml-xs"></eui-icon-svg>
+            <eui-icon-svg icon="alert:sharp" fillColor="danger-100" class="eui-u-ml-xs"></eui-icon-svg>
         </div>
     </div>
     <span class="eui-notification-item-content-middle eui-u-cursor-pointer">
@@ -4538,7 +4538,7 @@ var EuiNotificationsV2Component = class _EuiNotificationsV2Component {
   static {
     this.ɵcmp = i058.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EuiNotificationsV2Component, selector: "eui-notifications-v2", inputs: { count: "count", unreadCount: "unreadCount", unreadSinceLastCheckCount: "unreadSinceLastCheckCount", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", headerHideLabel: "headerHideLabel", headerUnreadSinceLastCheckCountLabel: "headerUnreadSinceLastCheckCountLabel", headerUnreadCountLabel: "headerUnreadCountLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: "noNotificationFoundLink", isShowMarkAsRead: "isShowMarkAsRead", isShowViewAllAction: "isShowViewAllAction", isHidePanelOnViewAllAction: "isHidePanelOnViewAllAction", customUnreadCount: "customUnreadCount", isShowMarkAllAsReadButton: "isShowMarkAllAsReadButton", isShowSettingsButton: "isShowSettingsButton", isShowRefreshButton: "isShowRefreshButton" }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i058, template: `<eui-icon-button
     class="eui-notifications-v2__trigger"
-    icon="eui-notifications"
+    icon="notifications:sharp"
     size="s"
     fillColor="white"
     (click)="onClicked($event)"
@@ -4561,7 +4561,7 @@ var EuiNotificationsV2Component = class _EuiNotificationsV2Component {
                         <a (click)="onHide()" class="eui-u-text-link" role="button" tabIndex="0">
                             {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}
                         </a>
-                        <eui-icon-svg set="eui" icon="eui-chevron-forward" size="2xs"></eui-icon-svg>
+                        <eui-icon-svg icon="chevron-forward:sharp" size="2xs"></eui-icon-svg>
                     </span>
                 </div>
             </div>
@@ -4635,7 +4635,7 @@ i058.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Component43,
   args: [{ selector: "eui-notifications-v2", changeDetection: ChangeDetectionStrategy51.Default, encapsulation: ViewEncapsulation73.None, template: `<eui-icon-button
     class="eui-notifications-v2__trigger"
-    icon="eui-notifications"
+    icon="notifications:sharp"
     size="s"
     fillColor="white"
     (click)="onClicked($event)"
@@ -4658,7 +4658,7 @@ i058.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
                         <a (click)="onHide()" class="eui-u-text-link" role="button" tabIndex="0">
                             {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}
                         </a>
-                        <eui-icon-svg set="eui" icon="eui-chevron-forward" size="2xs"></eui-icon-svg>
+                        <eui-icon-svg icon="chevron-forward:sharp" size="2xs"></eui-icon-svg>
                     </span>
                 </div>
             </div>