@eui/components 19.0.0-rc.9 → 19.0.1-snapshot-1733951899106

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/docs/components/EuiMenuComponent.html +25 -1
  2. package/docs/components/EuiMenuItemComponent.html +19 -0
  3. package/docs/components/EuiSidebarMenuComponent.html +25 -1
  4. package/docs/components/EuiToolbarSearchComponent.html +1 -5
  5. package/docs/dependencies.html +2 -2
  6. package/docs/js/search/search_index.js +2 -2
  7. package/eui-menu/eui-menu-item.component.d.ts +3 -1
  8. package/eui-menu/eui-menu-item.component.d.ts.map +1 -1
  9. package/eui-menu/eui-menu.component.d.ts +3 -1
  10. package/eui-menu/eui-menu.component.d.ts.map +1 -1
  11. package/eui-sidebar-menu/eui-sidebar-menu.component.d.ts +3 -1
  12. package/eui-sidebar-menu/eui-sidebar-menu.component.d.ts.map +1 -1
  13. package/eui-table/pipes/eui-table-highlight-filter.pipe.d.ts.map +1 -1
  14. package/eui-table-v2/pipes/eui-table-v2-highlight.pipe.d.ts.map +1 -1
  15. package/fesm2022/eui-components-eui-menu.mjs +11 -4
  16. package/fesm2022/eui-components-eui-menu.mjs.map +1 -1
  17. package/fesm2022/eui-components-eui-page.mjs +2 -2
  18. package/fesm2022/eui-components-eui-page.mjs.map +1 -1
  19. package/fesm2022/eui-components-eui-sidebar-menu.mjs +6 -2
  20. package/fesm2022/eui-components-eui-sidebar-menu.mjs.map +1 -1
  21. package/fesm2022/eui-components-eui-table-v2.mjs +9 -4
  22. package/fesm2022/eui-components-eui-table-v2.mjs.map +1 -1
  23. package/fesm2022/eui-components-eui-table.mjs +9 -4
  24. package/fesm2022/eui-components-eui-table.mjs.map +1 -1
  25. package/fesm2022/eui-components-layout.mjs +5 -5
  26. package/fesm2022/eui-components-layout.mjs.map +1 -1
  27. package/layout/eui-toolbar/toolbar-search/toolbar-search.component.d.ts.map +1 -1
  28. package/package.json +12 -12
@@ -193,7 +193,7 @@ class EuiAppSidebarMenuComponent {
193
193
  this.sidebarItemToggle.emit(event);
194
194
  }
195
195
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EuiAppSidebarMenuComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
196
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.3", type: EuiAppSidebarMenuComponent, isStandalone: false, selector: "eui-app-sidebar-menu", inputs: { hasFilter: ["hasFilter", "hasFilter", booleanAttribute], hasIcons: ["hasIcons", "hasIcons", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute], hasBoldRootLevel: ["hasBoldRootLevel", "hasBoldRootLevel", booleanAttribute], items: "items" }, outputs: { sidebarItemClick: "sidebarItemClick", sidebarItemToggle: "sidebarItemToggle" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<eui-menu\n [items]=\"items\"\n [hasFilter]=\"hasFilter\"\n [hasIcons]=\"hasIcons\"\n [hasTooltip]=\"hasTooltip\"\n [expandAllItems]=\"expandAllItems\"\n [isFlat]=\"isFlat\"\n [hasScrollToItem]=\"hasScrollToItem\"\n [hasCollapsedInitials]=\"hasCollapsedInitials\"\n [hasBoldRootLevel]=\"hasBoldRootLevel\"\n [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen\"\n (itemClick)=\"onMenuItemClicked($event)\"\n (expandToggle)=\"onSidebarItemToggled($event)\">\n</eui-menu>\n", dependencies: [{ kind: "component", type: i2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "filterValue", "isCollapsed", "hasCollapsedInitials", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems", "isFlat", "hasScrollToItem", "hasBoldRootLevel"], outputs: ["isClick", "itemClick", "expandToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
196
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.3", type: EuiAppSidebarMenuComponent, isStandalone: false, selector: "eui-app-sidebar-menu", inputs: { hasFilter: ["hasFilter", "hasFilter", booleanAttribute], hasIcons: ["hasIcons", "hasIcons", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute], hasBoldRootLevel: ["hasBoldRootLevel", "hasBoldRootLevel", booleanAttribute], items: "items" }, outputs: { sidebarItemClick: "sidebarItemClick", sidebarItemToggle: "sidebarItemToggle" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<eui-menu\n [items]=\"items\"\n [hasFilter]=\"hasFilter\"\n [hasIcons]=\"hasIcons\"\n [hasTooltip]=\"hasTooltip\"\n [expandAllItems]=\"expandAllItems\"\n [isFlat]=\"isFlat\"\n [hasScrollToItem]=\"hasScrollToItem\"\n [hasCollapsedInitials]=\"hasCollapsedInitials\"\n [hasBoldRootLevel]=\"hasBoldRootLevel\"\n [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen\"\n (itemClick)=\"onMenuItemClicked($event)\"\n (expandToggle)=\"onSidebarItemToggled($event)\">\n</eui-menu>\n", dependencies: [{ kind: "component", type: i2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "filterValue", "isCollapsed", "hasCollapsedInitials", "hasFilter", "hasIcons", "hasTooltip", "hasTooltipOnExpanded", "expandAllItems", "isFlat", "hasScrollToItem", "hasBoldRootLevel"], outputs: ["isClick", "itemClick", "expandToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
197
197
  }
198
198
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EuiAppSidebarMenuComponent, decorators: [{
199
199
  type: Component,
@@ -1061,7 +1061,7 @@ class EuiToolbarSearchComponent {
1061
1061
  this.search.emit(e);
1062
1062
  }
1063
1063
  onSearchInput(e) {
1064
- if (e.code === 'Enter') {
1064
+ if (e.code === 'Enter' || e.code === 'NumpadEnter') {
1065
1065
  this.searchTerm = this.searchInput;
1066
1066
  this.search.emit(this.searchInput);
1067
1067
  }
@@ -1078,11 +1078,11 @@ class EuiToolbarSearchComponent {
1078
1078
  }
1079
1079
  }
1080
1080
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EuiToolbarSearchComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
1081
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: EuiToolbarSearchComponent, isStandalone: true, selector: "eui-toolbar-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute], isInputText: ["isInputText", "isInputText", booleanAttribute], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute] }, outputs: { search: "search", selectionChange: "selectionChange", searchClick: "searchClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n <eui-icon-button icon=\"eui-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n <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 @if (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 }\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-toolbar-search__input-button\"\n euiButton\n euiIconButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n [euiPrimary]=\"!isInputFocus\"\n (click)=\"onSearchClick(false)\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"eui-ecl-search\" size=\"s\"></eui-icon-svg>\n </button>\n } @else {\n <eui-icon-svg icon=\"eui-ecl-search\" size=\"s\"></eui-icon-svg>\n }\n </eui-icon-input>\n\n}\n\n", styles: [".eui-toolbar-search{display:flex;top:0}.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-toolbar-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-xl)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-toolbar-search .eui-input-text--clearable-icon{display:none}.eui-toolbar-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-toolbar-search--focus .eui-toolbar-search__input-button{color:var(--eui-c-black)!important}.eui-toolbar-search--focus .eui-toolbar-search__input-button .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-toolbar-search--focus .eui-search__icon{display:none}.eui-toolbar-search__input-button{position:absolute;right:var(--eui-s-3xs);top:var(--eui-s-3xs);color:var(--eui-c-neutral-lightest)!important}.eui-toolbar-search__input-button .eui-icon-svg{z-index:1}.eui-toolbar-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-white)!important;fill:var(--eui-c-white)!important}.eui-toolbar-search--no-animation .eui-input-text{transition:none}.eui-toolbar-search--focus.eui-toolbar-search--no-animation .eui-input-text{width:200px}.eui--secondary .eui-toolbar-search .eui-input-text{background-color:var(--eui-c-neutral-bg-light);border-color:var(--eui-c-neutral-lighter);color:var(--eui-c-neugral-bg-light-contrast)}.eui--secondary .eui-toolbar-search__input-button{background-color:var(--eui-c-neutral-bg);color:var(--eui-c-neutral-bg-contrast);border-color:var(--eui-c-neutral-lighter)}.eui--secondary .eui-toolbar-search__input-button:hover,.eui--secondary .eui-toolbar-search__input-button:focus{background-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral-lightest-contrast)}.eui--secondary .eui-toolbar-search__input-button .eui-icon-svg svg{fill:var(--eui-c-neutral);color:var(--eui-c-neutral)}.eui--secondary .eui-toolbar-search .eui-icon-input__icon .eui-icon-svg svg{fill:var(--eui-c-neutral);color:var(--eui-c-neutral)}\n"], dependencies: [{ kind: "ngmodule", type: EuiButtonModule }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: EuiIconModule }, { kind: "component", type: i2$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "ngmodule", type: EuiIconButtonModule }, { kind: "component", type: i5.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: EuiAutocompleteModule }, { kind: "component", type: i5$1.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["inputId", "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: "ngmodule", type: EuiIconInputModule }, { kind: "component", type: i6.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EuiInputTextModule }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "ngmodule", type: EuiTemplateDirectiveModule }, { kind: "directive", type: i8.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1081
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: EuiToolbarSearchComponent, isStandalone: true, selector: "eui-toolbar-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute], isInputText: ["isInputText", "isInputText", booleanAttribute], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute] }, outputs: { search: "search", selectionChange: "selectionChange", searchClick: "searchClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n <eui-icon-button icon=\"eui-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n <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 @if (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 }\n </eui-autocomplete>\n } @else {\n @if (isInputText) {\n <input euiInputText class=\"eui-toolbar-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-toolbar-search__input-button\"\n euiButton\n euiIconButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n [euiPrimary]=\"!isInputFocus\"\n (click)=\"onSearchClick(false)\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"eui-ecl-search\" size=\"s\"></eui-icon-svg>\n </button>\n } @else {\n <eui-icon-svg icon=\"eui-ecl-search\" size=\"s\"></eui-icon-svg>\n }\n </eui-icon-input>\n\n}\n\n", styles: [".eui-19 :host.eui-toolbar-search{display:flex;top:0}.eui-19 :host.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text--clearable-icon{display:none}.eui-19 :host.eui-toolbar-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-19 :host.eui-toolbar-search--focus .eui-search__icon{display:none}.eui-19 :host.eui-toolbar-search .eui-button{position:absolute;right:var(--eui-s-3xs);top:var(--eui-s-3xs);color:var(--eui-c-neutral-lightest)}.eui-19 :host.eui-toolbar-search .eui-button .eui-icon-svg{z-index:1}.eui-19 :host.eui-toolbar--no-animation ::ng-deep .eui-input-text{transition:none}.eui-19 :host.eui-toolbar-search--focus.eui-toolbar-search--no-animation ::ng-deep .eui-input-text{width:200px}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-lighter);color:var(--eui-c-neugral-bg-light-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button{background-color:var(--eui-c-neutral-bg);color:var(--eui-c-neutral-bg-contrast);border-color:var(--eui-c-neutral-lighter)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:hover,.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:focus{background-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral-lightest-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg svg{fill:var(--eui-c-neutral);color:var(--eui-c-neutral)}\n"], dependencies: [{ kind: "ngmodule", type: EuiButtonModule }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: EuiIconModule }, { kind: "component", type: i2$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "ngmodule", type: EuiIconButtonModule }, { kind: "component", type: i5.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: EuiAutocompleteModule }, { kind: "component", type: i5$1.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["inputId", "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: "ngmodule", type: EuiIconInputModule }, { kind: "component", type: i6.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EuiInputTextModule }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "ngmodule", type: EuiTemplateDirectiveModule }, { kind: "directive", type: i8.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1082
1082
  }
1083
1083
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EuiToolbarSearchComponent, decorators: [{
1084
1084
  type: Component,
1085
- args: [{ selector: 'eui-toolbar-search', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
1085
+ args: [{ selector: 'eui-toolbar-search', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
1086
1086
  EuiButtonModule,
1087
1087
  EuiIconModule,
1088
1088
  EuiIconButtonModule,
@@ -1093,7 +1093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
1093
1093
  EuiTemplateDirectiveModule,
1094
1094
  FormsModule,
1095
1095
  AsyncPipe,
1096
- ], template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n <eui-icon-button icon=\"eui-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n <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 @if (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 }\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-toolbar-search__input-button\"\n euiButton\n euiIconButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n [euiPrimary]=\"!isInputFocus\"\n (click)=\"onSearchClick(false)\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"eui-ecl-search\" size=\"s\"></eui-icon-svg>\n </button>\n } @else {\n <eui-icon-svg icon=\"eui-ecl-search\" size=\"s\"></eui-icon-svg>\n }\n </eui-icon-input>\n\n}\n\n", styles: [".eui-toolbar-search{display:flex;top:0}.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-toolbar-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-xl)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-toolbar-search .eui-input-text--clearable-icon{display:none}.eui-toolbar-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-toolbar-search--focus .eui-toolbar-search__input-button{color:var(--eui-c-black)!important}.eui-toolbar-search--focus .eui-toolbar-search__input-button .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-toolbar-search--focus .eui-search__icon{display:none}.eui-toolbar-search__input-button{position:absolute;right:var(--eui-s-3xs);top:var(--eui-s-3xs);color:var(--eui-c-neutral-lightest)!important}.eui-toolbar-search__input-button .eui-icon-svg{z-index:1}.eui-toolbar-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-white)!important;fill:var(--eui-c-white)!important}.eui-toolbar-search--no-animation .eui-input-text{transition:none}.eui-toolbar-search--focus.eui-toolbar-search--no-animation .eui-input-text{width:200px}.eui--secondary .eui-toolbar-search .eui-input-text{background-color:var(--eui-c-neutral-bg-light);border-color:var(--eui-c-neutral-lighter);color:var(--eui-c-neugral-bg-light-contrast)}.eui--secondary .eui-toolbar-search__input-button{background-color:var(--eui-c-neutral-bg);color:var(--eui-c-neutral-bg-contrast);border-color:var(--eui-c-neutral-lighter)}.eui--secondary .eui-toolbar-search__input-button:hover,.eui--secondary .eui-toolbar-search__input-button:focus{background-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral-lightest-contrast)}.eui--secondary .eui-toolbar-search__input-button .eui-icon-svg svg{fill:var(--eui-c-neutral);color:var(--eui-c-neutral)}.eui--secondary .eui-toolbar-search .eui-icon-input__icon .eui-icon-svg svg{fill:var(--eui-c-neutral);color:var(--eui-c-neutral)}\n"] }]
1096
+ ], template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n <eui-icon-button icon=\"eui-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n <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 @if (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 }\n </eui-autocomplete>\n } @else {\n @if (isInputText) {\n <input euiInputText class=\"eui-toolbar-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-toolbar-search__input-button\"\n euiButton\n euiIconButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n [euiPrimary]=\"!isInputFocus\"\n (click)=\"onSearchClick(false)\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"eui-ecl-search\" size=\"s\"></eui-icon-svg>\n </button>\n } @else {\n <eui-icon-svg icon=\"eui-ecl-search\" size=\"s\"></eui-icon-svg>\n }\n </eui-icon-input>\n\n}\n\n", styles: [".eui-19 :host.eui-toolbar-search{display:flex;top:0}.eui-19 :host.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text--clearable-icon{display:none}.eui-19 :host.eui-toolbar-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-19 :host.eui-toolbar-search--focus .eui-search__icon{display:none}.eui-19 :host.eui-toolbar-search .eui-button{position:absolute;right:var(--eui-s-3xs);top:var(--eui-s-3xs);color:var(--eui-c-neutral-lightest)}.eui-19 :host.eui-toolbar-search .eui-button .eui-icon-svg{z-index:1}.eui-19 :host.eui-toolbar--no-animation ::ng-deep .eui-input-text{transition:none}.eui-19 :host.eui-toolbar-search--focus.eui-toolbar-search--no-animation ::ng-deep .eui-input-text{width:200px}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-lighter);color:var(--eui-c-neugral-bg-light-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button{background-color:var(--eui-c-neutral-bg);color:var(--eui-c-neutral-bg-contrast);border-color:var(--eui-c-neutral-lighter)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:hover,.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:focus{background-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral-lightest-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg svg{fill:var(--eui-c-neutral);color:var(--eui-c-neutral)}\n"] }]
1097
1097
  }], ctorParameters: () => [{ type: i1.EuiAppShellService }], propDecorators: { cssClasses: [{
1098
1098
  type: HostBinding,
1099
1099
  args: ['class']