@eui/ecl 22.0.0-alpha.2 → 22.0.0-alpha.4

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-08-26T15:52:49.763Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-09T16:22:28.168Z, llm-md export.
 
 ## Modules
 
@@ -2724,25 +2724,15 @@ Properties:
 - `isPushLeft: boolean` — This property is used for dropdown positioning on the screen.
 - `isPushRight: boolean` — This property is used for dropdown positioning on the screen.
 - `isStack: boolean` — This property is used for dropdown positioning on the screen.
-- `LANGUAGE_MAX_COLUMNS: number = 8`
 - `languageArrowPosition: string` — This property is used for dropdown positioning on the screen.
 - `languageCode: string = 'en'`
-- `languageLinkElement: unknown = viewChild('languageLink', { read: ElementRef })` — The link to open the popover dialog.
-- `languagePopover: unknown = viewChild(EclSiteHeaderLanguagePopoverComponent)` — The language popover, that shows all available languages (configured in the config file of the current site).
 - `leftPosition: number`
-- `MOBILE_BREAKPOINT: number = 768`
 - `nonEuColumnsCount: number = 1`
 - `nonEuLanguages: EuiLanguage[] = []` — Array of non-EU languages, that can be selected for the current site.
 - `rightPosition: number`
 
 Methods:
-- `getLanguageLabel(): string`
 - `hasLanguageCodes(): boolean`
-- `onClickOutside(): void` — Close the dropdown, when clicking outside of the component.
-- `onEscapeKeydownHandler(): void` — Close the dropdown, when pressing ESC key.
-- `onLanguageClick(evt: Event): void` — Toggle the language dropdown when clicking the link, showing the current language.
-- `onLanguageClosed(evt: EclSiteHeaderLanguageCloseEvent): void`
-- `onLanguageSelected(evt: EclSiteHeaderLanguageSelectedEvent): void`
 - `getCssClasses(rootClass: string): string`
 
 ### EclSiteHeaderLanguagePopoverComponent
@@ -2753,19 +2743,19 @@ Selector: `ecl-site-header-language-popover`
 Description: This component is a popover, that appears after the user clicks on language link. It contains all the available languages, configured for the current site. Adds styling and functionality for the dialog. Emits events when language is selected and when dialog is closed.
 
 Inputs:
-- `euLanguages: EuiLanguage[] = []`
-- `languageArrowPosition: string` — Property to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
-- `languageCode: string` — Current language
-- `leftPosition: number` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
-- `nonEuLanguages: EuiLanguage[] = []`
-- `rightPosition: number` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
 - `euColumnsCount: number = undefined` — Number of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.
+- `euLanguages: EuiLanguage[] = []`
 - `isFull: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
 - `isHidden: boolean = false` — Property to show/hide the dialog.
 - `isPushLeft: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
 - `isPushRight: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
 - `isStack: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+- `languageArrowPosition: string = undefined` — Property to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+- `languageCode: string = undefined` — Current language
+- `leftPosition: number = undefined` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
 - `nonEuColumnsCount: number = undefined` — Number of columns for non-eu languages. Calculated by the parent component 'ecl-site-header-language'.
+- `nonEuLanguages: EuiLanguage[] = []`
+- `rightPosition: number = undefined` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2776,10 +2766,8 @@ Outputs:
 
 Properties:
 - `el: unknown = inject(ElementRef)`
-- `labelledBy: string = 'ecl-site-header__language-title'`
 - `languageContent: unknown = viewChild<ElementRef>('languageContent')` — The div, that wraps all the languages.
 - `languageContentMaxHeight: number`
-- `role: string = 'dialog'` — The role of the dialog is 'dialog'. Should not be changed.
 
 Methods:
 - `onCloseClick(): void`
@@ -2805,17 +2793,9 @@ Outputs:
 - `login: EclSiteHeaderLoginEvent`
 
 Properties:
-- `class: string = 'ecl-site-header__login-container'`
-- `isLoginBoxActive: unknown = false` — If login popover is open (true) or closed (false).
-- `loginArrowPosition: string` — The position of the arrow of the popover.
-- `loginLinkElement: unknown = viewChild('loginLink', { read: ElementRef })`
-- `TABLET_BREAKPOINT: number = 996`
+- `isLoginBoxActive: unknown = false` — If login popover is open (true) or closed (false). Kept public because the parent ecl-site-header resets it directly when the search box opens.
 
 Methods:
-- `getLoginBoxCssClasses(): string`
-- `onClickOutsideMegaMenu(): void` — Close the login popover on click outside.
-- `onLoginBoxToggle(evt: MouseEvent): void`
-- `onLoginClick(evt: MouseEvent): void`
 - `getCssClasses(rootClass: string): string`
 
 ### EclSiteHeaderNotificationComponent
@@ -2855,17 +2835,9 @@ Outputs:
 - `searchEvent: EclSiteHeaderSearchEvent`
 
 Properties:
-- `class: string = 'ecl-site-header__search-container'`
-- `isSearchBoxActive: unknown = false`
-- `role: string = 'search'` — The default role of the component is 'search', should not be changed.
-- `searchArrowPosition: string` — The arrow position of the serahc dropdown, when in mobile mode.
-- `searchLinkElement: unknown = viewChild('searchLink', { read: ElementRef })` — The search link element from the view, i.e. the search button.
+- `isSearchBoxActive: unknown = false` — Whether the search dropdown is open. Kept public because the parent ecl-site-header resets it directly when the login box opens.
 
 Methods:
-- `getSearchBoxCssClasses(): string`
-- `onModelChange(newValue: string): void`
-- `onSearch(evt: EclSearchFormEvent): boolean`
-- `onSearchBoxToggle(evt: MouseEvent): void`
 - `registerOnChange(fn: any): void`
 - `registerOnTouched(fn: any): void`
 - `writeValue(value: any): void`
@@ -2896,6 +2868,7 @@ Selector: `ecl-social-media-follow`
 Inputs:
 - `description: string = undefined`
 - `horizontalAlignment: 'right' | 'left' | string = 'left'`
+- `isIconOnly: boolean = false`
 - `isVertical: boolean = false`
 - `class: string`
 - `e2eAttr: any`
@@ -2925,9 +2898,6 @@ Inputs:
 Outputs:
 - `itemClick: EclSocialMediaFollowItemClickEvent`
 
-Properties:
-- `role: string = 'listitem'`
-
 Methods:
 - `onItemClick(evt: unknown): void`
 - `getCssClasses(rootClass: string): string`
@@ -4249,9 +4219,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `hasClass: unknown = true` — Binds the ecl-separator CSS class to the host \<hr\> element.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -7627,6 +7594,12 @@ Properties:
 
 ## Public variables
 
+- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
+  Defined in `packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts`
+- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
+  Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
+- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
+  Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
 - `AVAILABLE_NON_EU_LOGO_COUNTRY_CODES: string[] = ['ar', 'ca', 'is', 'jp', 'lb', 'no', 'ru', 'sw', 'tr', 'uk', 'zh'] as const`
   Defined in `packages/ecl/core/utils/constants/constants.ts`
 - `DEFAULT_LOGO_COUNTRY_CODE: string = 'en'`
@@ -7793,5 +7766,9 @@ Properties:
   Defined in `packages/ecl/components/ecl-search-form/ecl-search-form.component.ts`
 - `noop: unknown = (): void => { /** empty*/ }`
   Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
+- `RESIZE_DEBOUNCE: number = 200` — Debounce for the resize recomputation, matching ECL's handleResize .
+  Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
+- `RESIZE_DEBOUNCE: number = 200` — Debounce for the resize recomputation, matching ECL's handleResize .
+  Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
 - `testBed: unknown = getTestBed()`
   Defined in `packages/ecl/test-setup.ts`

package/docs/miscellaneous/variables.html

@@ -137,6 +137,15 @@
             <tr>
                 <td class="col-md-4">
                     <ul class="index-list">
+                        <li>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-language.component.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#AVAILABLE_NON_EU_LOGO_COUNTRY_CODES" title="packages/ecl/core/utils/constants/constants.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>AVAILABLE_NON_EU_LOGO_COUNTRY_CODES</b>&nbsp;&nbsp;&nbsp;(packages/.../constants.ts)</span></a>
                         </li>
@@ -386,6 +395,12 @@
                         <li>
                             <a href="#noop" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>noop</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#RESIZE_DEBOUNCE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>RESIZE_DEBOUNCE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#RESIZE_DEBOUNCE" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>RESIZE_DEBOUNCE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#testBed" title="packages/ecl/test-setup.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>testBed</b>&nbsp;&nbsp;&nbsp;(packages/.../test-setup.ts)</span></a>
                         </li>
@@ -396,42 +411,51 @@
     </table>
 </section>
 
-    <h3>packages/ecl/core/utils/constants/constants.ts</h3>
+    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="AVAILABLE_NON_EU_LOGO_COUNTRY_CODES"></a>
+                    <a name="ARROW_SIZE"></a>
                     <span class="name">
-                        <span ><b>AVAILABLE_NON_EU_LOGO_COUNTRY_CODES</b></span>
-                        <a href="#AVAILABLE_NON_EU_LOGO_COUNTRY_CODES"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ARROW_SIZE</b></span>
+                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>string[]</code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>[&#x27;ar&#x27;, &#x27;ca&#x27;, &#x27;is&#x27;, &#x27;jp&#x27;, &#x27;lb&#x27;, &#x27;no&#x27;, &#x27;ru&#x27;, &#x27;sw&#x27;, &#x27;tr&#x27;, &#x27;uk&#x27;, &#x27;zh&#x27;] as const</code>
+                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
+</section>
+    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="DEFAULT_LOGO_COUNTRY_CODE"></a>
+                    <a name="ARROW_SIZE"></a>
                     <span class="name">
-                        <span ><b>DEFAULT_LOGO_COUNTRY_CODE</b></span>
-                        <a href="#DEFAULT_LOGO_COUNTRY_CODE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ARROW_SIZE</b></span>
+                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -443,57 +467,94 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;en&#x27;</code>
+                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
-</section>
-    <h3>packages/ecl/components/ecl-highlighted-search/ecl-highlighted-search.component.ts</h3>
-    <section data-compodoc="block-properties">
-    <h3></h3>    <table class="table table-sm table-bordered">
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR"></a>
+                    <a name="RESIZE_DEBOUNCE"></a>
                     <span class="name">
-                        <span ><b>ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR</b></span>
-                        <a href="#ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>RESIZE_DEBOUNCE</b></span>
+                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://angular.dev/api/core/Provider" target="_blank" >Provider</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() &#x3D;&gt; EclHighlightedSearchComponent),
-    multi: true,
-}</code>
+                        <i>Default value : </i><code>200</code>
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
 </section>
-    <h3>packages/ecl/components/ecl-rating-field/ecl-rating-field.component.ts</h3>
+    <h3>packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ECL_RATINGFIELD_VALUE_ACCESSOR"></a>
+                    <a name="ARROW_SIZE"></a>
                     <span class="name">
-                        <span ><b>ECL_RATINGFIELD_VALUE_ACCESSOR</b></span>
-                        <a href="#ECL_RATINGFIELD_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ARROW_SIZE</b></span>
+                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR"></a>
+                    <span class="name">
+                        <span ><b>ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR</b></span>
+                        <a href="#ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -507,7 +568,7 @@
                     <td class="col-md-4">
                         <i>Default value : </i><code>{
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() &#x3D;&gt; EclRatingFieldComponent),
+    useExisting: forwardRef(() &#x3D;&gt; EclSiteHeaderSearchComponent),
     multi: true,
 }</code>
                     </td>
@@ -536,25 +597,112 @@
                 <tr>
                     <td class="col-md-4">
                         <i>Default value : </i><code>(): void &#x3D;&gt; {
-    /** empty */
+    /** empty*/
 }</code>
                     </td>
                 </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="RESIZE_DEBOUNCE"></a>
+                    <span class="name">
+                        <span ><b>RESIZE_DEBOUNCE</b></span>
+                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>200</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
+</div>
+                </td>
+            </tr>
+
         </tbody>
     </table>
 </section>
-    <h3>packages/ecl/components/ecl-search-form/ecl-search-form.component.ts</h3>
+    <h3>packages/ecl/core/utils/constants/constants.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ECL_SEARCH_FORM_VALUE_ACCESSOR"></a>
+                    <a name="AVAILABLE_NON_EU_LOGO_COUNTRY_CODES"></a>
                     <span class="name">
-                        <span ><b>ECL_SEARCH_FORM_VALUE_ACCESSOR</b></span>
-                        <a href="#ECL_SEARCH_FORM_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>AVAILABLE_NON_EU_LOGO_COUNTRY_CODES</b></span>
+                        <a href="#AVAILABLE_NON_EU_LOGO_COUNTRY_CODES"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>string[]</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[&#x27;ar&#x27;, &#x27;ca&#x27;, &#x27;is&#x27;, &#x27;jp&#x27;, &#x27;lb&#x27;, &#x27;no&#x27;, &#x27;ru&#x27;, &#x27;sw&#x27;, &#x27;tr&#x27;, &#x27;uk&#x27;, &#x27;zh&#x27;] as const</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="DEFAULT_LOGO_COUNTRY_CODE"></a>
+                    <span class="name">
+                        <span ><b>DEFAULT_LOGO_COUNTRY_CODE</b></span>
+                        <a href="#DEFAULT_LOGO_COUNTRY_CODE"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;en&#x27;</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+</section>
+    <h3>packages/ecl/components/ecl-highlighted-search/ecl-highlighted-search.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR"></a>
+                    <span class="name">
+                        <span ><b>ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR</b></span>
+                        <a href="#ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -568,7 +716,40 @@
                     <td class="col-md-4">
                         <i>Default value : </i><code>{
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() &#x3D;&gt; EclSearchFormComponent),
+    useExisting: forwardRef(() &#x3D;&gt; EclHighlightedSearchComponent),
+    multi: true,
+}</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+</section>
+    <h3>packages/ecl/components/ecl-rating-field/ecl-rating-field.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="ECL_RATINGFIELD_VALUE_ACCESSOR"></a>
+                    <span class="name">
+                        <span ><b>ECL_RATINGFIELD_VALUE_ACCESSOR</b></span>
+                        <a href="#ECL_RATINGFIELD_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://angular.dev/api/core/Provider" target="_blank" >Provider</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() &#x3D;&gt; EclRatingFieldComponent),
     multi: true,
 }</code>
                     </td>
@@ -597,7 +778,7 @@
                 <tr>
                     <td class="col-md-4">
                         <i>Default value : </i><code>(): void &#x3D;&gt; {
-    /** empty*/
+    /** empty */
 }</code>
                     </td>
                 </tr>
@@ -606,16 +787,16 @@
         </tbody>
     </table>
 </section>
-    <h3>packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts</h3>
+    <h3>packages/ecl/components/ecl-search-form/ecl-search-form.component.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR"></a>
+                    <a name="ECL_SEARCH_FORM_VALUE_ACCESSOR"></a>
                     <span class="name">
-                        <span ><b>ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR</b></span>
-                        <a href="#ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ECL_SEARCH_FORM_VALUE_ACCESSOR</b></span>
+                        <a href="#ECL_SEARCH_FORM_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -629,7 +810,7 @@
                     <td class="col-md-4">
                         <i>Default value : </i><code>{
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() &#x3D;&gt; EclSiteHeaderSearchComponent),
+    useExisting: forwardRef(() &#x3D;&gt; EclSearchFormComponent),
     multi: true,
 }</code>
                     </td>

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.2</li>
+            <b>Version</b> : 22.0.0-alpha.4</li>
     </ul>
 
 

package/fesm2022/eui-ecl-components-ecl-date-block.mjs

@@ -109,11 +109,11 @@ class EclDateBlockComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDateBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EclDateBlockComponent, isStandalone: true, selector: "time[eclDateBlock]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, monthTitle: { classPropertyName: "monthTitle", publicName: "monthTitle", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, datetime: { classPropertyName: "datetime", publicName: "datetime", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "attr.datetime": "this.datetime" } }, providers: [TranslateService], usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EclDateBlockComponent, isStandalone: true, selector: "time[eclDateBlock]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, monthTitle: { classPropertyName: "monthTitle", publicName: "monthTitle", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, datetime: { classPropertyName: "datetime", publicName: "datetime", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "attr.datetime": "this.datetime" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDateBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'time[eclDateBlock]', imports: [DatePipe], providers: [TranslateService], template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n" }]
+            args: [{ selector: 'time[eclDateBlock]', imports: [DatePipe], template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n" }]
         }], ctorParameters: () => [], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], monthTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthTitle", required: false }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']