@eui/components 18.0.0-next.65 → 18.0.0-next.67

package/fesm2022/eui-components-layout.mjs

@@ -290,7 +290,7 @@ var EuiAppSidebarHeaderUserProfileComponent = class _EuiAppSidebarHeaderUserProf
 <button *ngIf="hasProfileDrawer" euiButton euiRounded euiIconButton euiBasicButton euiSecondary class="eui-u-ml-auto" aria-label="Toggle user profile details">
     <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 });
+`, 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", "euiVariant", "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 });
   }
 };
 i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i06, type: EuiAppSidebarHeaderUserProfileComponent, decorators: [{
@@ -827,7 +827,7 @@ var EuiToolbarMenuComponent = class _EuiToolbarMenuComponent {
         </ng-container>
     </ul>
 </nav>
-`, dependencies: [{ kind: "directive", type: i24.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i24.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i34.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i34.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i42.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: "pipe", type: i5.TranslatePipe, name: "translate" }], encapsulation: i011.ViewEncapsulation.None });
+`, dependencies: [{ kind: "directive", type: i24.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i24.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i34.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i34.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i42.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], encapsulation: i011.ViewEncapsulation.None });
   }
 };
 i011.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i011, type: EuiToolbarMenuComponent, decorators: [{
@@ -1323,7 +1323,7 @@ var EuiToolbarNavbarComponent = class _EuiToolbarNavbarComponent {
 } @else {
 <ng-content></ng-content>
 }
-`, dependencies: [{ kind: "directive", type: i26.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i35.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: i43.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i52.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "component", type: i52.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive"] }, { kind: "directive", type: i52.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "pipe", type: i26.AsyncPipe, name: "async" }], changeDetection: i020.ChangeDetectionStrategy.Default, encapsulation: i020.ViewEncapsulation.None });
+`, dependencies: [{ kind: "directive", type: i26.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i35.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i43.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i52.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "component", type: i52.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive"] }, { kind: "directive", type: i52.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "pipe", type: i26.AsyncPipe, name: "async" }], changeDetection: i020.ChangeDetectionStrategy.Default, encapsulation: i020.ViewEncapsulation.None });
   }
 };
 i020.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i020, type: EuiToolbarNavbarComponent, decorators: [{
@@ -1371,7 +1371,7 @@ var EuiToolbarSelectorComponent = class _EuiToolbarSelectorComponent {
     this.ɵfac = i021.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i021, type: _EuiToolbarSelectorComponent, deps: [], target: i021.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i021.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EuiToolbarSelectorComponent, selector: "eui-toolbar-selector", inputs: { label: "label", iconSvgName: "iconSvgName", euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute7] }, outputs: { selectorClick: "selectorClick" }, host: { properties: { "class": "this.class" } }, ngImport: i021, template: '<button euiButton euiButtonOutline [euiDisabled]="euiDisabled" (click)="onClick()" class="eui-toolbar-selector__button">\n    {{ label }}\n    <eui-icon-svg [icon]="iconSvgName" fillColor="neutral-bg" class="eui-u-ml-m"></eui-icon-svg>\n</button>\n', dependencies: [{ kind: "component", type: i112.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: i27.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i021.ChangeDetectionStrategy.Default, encapsulation: i021.ViewEncapsulation.None });
+    this.ɵcmp = i021.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EuiToolbarSelectorComponent, selector: "eui-toolbar-selector", inputs: { label: "label", iconSvgName: "iconSvgName", euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute7] }, outputs: { selectorClick: "selectorClick" }, host: { properties: { "class": "this.class" } }, ngImport: i021, template: '<button euiButton euiButtonOutline [euiDisabled]="euiDisabled" (click)="onClick()" class="eui-toolbar-selector__button">\n    {{ label }}\n    <eui-icon-svg [icon]="iconSvgName" fillColor="neutral-bg" class="eui-u-ml-m"></eui-icon-svg>\n</button>\n', dependencies: [{ kind: "component", type: i112.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i27.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i021.ChangeDetectionStrategy.Default, encapsulation: i021.ViewEncapsulation.None });
   }
 };
 i021.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i021, type: EuiToolbarSelectorComponent, decorators: [{
@@ -2142,7 +2142,7 @@ 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            [euiPrimary]="!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 });
+    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            [euiPrimary]="!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", "euiVariant", "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: [{
@@ -2345,7 +2345,7 @@ 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="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 });
+    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", "euiVariant", "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: [{
@@ -2427,7 +2427,7 @@ 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="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 });
+    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", "euiVariant", "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: [{
@@ -3573,7 +3573,7 @@ var EuiNotificationItemComponent = class _EuiNotificationItemComponent {
         </a>
     </div>
 </div>
-`, dependencies: [{ kind: "directive", type: i129.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i129.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i218.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: "pipe", type: i129.DatePipe, name: "date" }, { kind: "pipe", type: i312.TranslatePipe, name: "translate" }, { kind: "pipe", type: i49.EuiTruncatePipe, name: "euiTruncate" }] });
+`, dependencies: [{ kind: "directive", type: i129.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i129.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i218.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i129.DatePipe, name: "date" }, { kind: "pipe", type: i312.TranslatePipe, name: "translate" }, { kind: "pipe", type: i49.EuiTruncatePipe, name: "euiTruncate" }] });
   }
 };
 i054.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i054, type: EuiNotificationItemComponent, decorators: [{
@@ -3943,7 +3943,7 @@ var EuiNotificationsComponent = class _EuiNotificationsComponent {
         </ng-template>
     </eui-overlay-footer>
 </eui-overlay>
-`, styles: [".eui-overlay-header{background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-s-2xs);transform:scale(1.1)}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{margin:var(--eui-s-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i130.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i130.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i219.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i219.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i219.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i219.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i313.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i410.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i58.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: i58.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i72.TranslatePipe, name: "translate" }], changeDetection: i055.ChangeDetectionStrategy.Default, encapsulation: i055.ViewEncapsulation.None });
+`, styles: [".eui-overlay-header{background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-s-2xs);transform:scale(1.1)}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{margin:var(--eui-s-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i130.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i130.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i219.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i219.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i219.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i219.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i313.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i410.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i58.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i58.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i72.TranslatePipe, name: "translate" }], changeDetection: i055.ChangeDetectionStrategy.Default, encapsulation: i055.ViewEncapsulation.None });
   }
 };
 i055.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i055, type: EuiNotificationsComponent, decorators: [{
@@ -4266,7 +4266,7 @@ var EuiNotificationItemV2Component = class _EuiNotificationItemV2Component {
         </a>
     </div>
 </div>
-`, dependencies: [{ kind: "directive", type: i131.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i131.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i220.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: "pipe", type: i131.DatePipe, name: "date" }, { kind: "pipe", type: i314.TranslatePipe, name: "translate" }, { kind: "pipe", type: i411.EuiTruncatePipe, name: "euiTruncate" }] });
+`, dependencies: [{ kind: "directive", type: i131.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i131.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i220.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i131.DatePipe, name: "date" }, { kind: "pipe", type: i314.TranslatePipe, name: "translate" }, { kind: "pipe", type: i411.EuiTruncatePipe, name: "euiTruncate" }] });
   }
 };
 i057.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i057, type: EuiNotificationItemV2Component, decorators: [{
@@ -4628,7 +4628,7 @@ var EuiNotificationsV2Component = class _EuiNotificationsV2Component {
         </ng-template>
     </eui-overlay-footer>
 </eui-overlay>
-`, styles: [".eui-overlay-header{padding:0}.eui-overlay-footer{background-color:var(--eui-c-white)}.eui-notifications-items{margin:0;padding:0}.eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-notifications-v2__header-title-label{font:var(--eui-f-l-bold)}.eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-notifications-v2__header-subinfos-bar,.eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{display:flex;margin:var(--eui-s-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i132.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i132.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i221.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i221.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i221.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i221.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i315.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i412.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: i412.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i63.TranslatePipe, name: "translate" }], changeDetection: i058.ChangeDetectionStrategy.Default, encapsulation: i058.ViewEncapsulation.None });
+`, styles: [".eui-overlay-header{padding:0}.eui-overlay-footer{background-color:var(--eui-c-white)}.eui-notifications-items{margin:0;padding:0}.eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-notifications-v2__header-title-label{font:var(--eui-f-l-bold)}.eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-notifications-v2__header-subinfos-bar,.eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{display:flex;margin:var(--eui-s-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i132.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i132.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i221.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i221.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i221.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i221.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i315.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i412.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i412.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i63.TranslatePipe, name: "translate" }], changeDetection: i058.ChangeDetectionStrategy.Default, encapsulation: i058.ViewEncapsulation.None });
   }
 };
 i058.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i058, type: EuiNotificationsV2Component, decorators: [{