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

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-24T12:10:35.198Z, llm-md export.
 
 ## Modules
 
@@ -526,7 +526,6 @@ Methods:
 
 File: `packages/ecl/components/ecl-list/ecl-description-list-definition/ecl-description-list-definition.component.ts`
 Selector: `[eclDescriptionListDefinition]`
-Standalone: yes
 
 Description: Component for a definition item within an ECL description list. Supports variants (link, inline, taxonomy, tag) and collapsible functionality with maxVisibleItems control.
 
@@ -537,7 +536,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `domReady: unknown = signal(false)` — Signal indicating whether the DOM is ready for manipulation. Set to true after first render to ensure projected content exists.
+- `domReady: unknown = signal(false)` — Signal indicating whether the DOM is ready for manipulation. Set to true after first render to ensure the projected exists before the see-more link is inserted into it. Defers DOM writes in the effect.
 - `hasSeeAll: unknown = computed(() => { const max = this.maxVisibleItems(); const total = this.currentItemsNumber(); return !!max && total > 0 && max < total; })` — Computed signal that determines if "See all" link should be shown. Returns true when maxVisibleItems is set and less than total items.
 - `maxVisibleItems: unknown = signal<number | null>(null)` — Maximum number of items to display before showing "See all" link. Controlled by parent EclDescriptionListDirective.
 
@@ -993,7 +992,7 @@ Inputs:
 - `color: 'inverted' | 'primary' | null = null` — Applies color styling to the icon. Use 'inverted' for icons on dark backgrounds, or 'primary' for emphasis.
 - `focusable: boolean = false` — Controls whether the icon is focusable via keyboard. Defaults to false .
 - `icon: string` — Name of the icon to render from the selected set.
-- `iconSet: 'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' | 'phosphor' | string = 'default'` — Defines the icon set to use. Available sets: default , social , social-media , flag , or a custom URL prefix. Defaults to 'default' .
+- `iconSet: 'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' | 'phosphor' | 'phosphor-fill' | string = 'default'` — Defines the icon set to use. Available sets: default , social , social-media , flag , or a custom URL prefix. Defaults to 'default' .
 - `isFlipHorizontal: boolean = false` — Flips the icon horizontally if set to true .
 - `role: string = undefined` — ARIA role of the icon. If a title is provided and no role is defined, defaults to 'img' .
 - `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string = 'xs'` — Size of the icon. Supported values: '2xs' , 'xs' , 's' , 'm' , 'l' , 'xl' , '2xl' , 'fluid' . Defaults to 'xs' .
@@ -1179,6 +1178,8 @@ Properties:
 - `eclIllustrationPicture: unknown = contentChild(forwardRef(() => EclListIllustrationPictureDirective))`
 - `hasDivider: unknown = signal(false)` — A special class needs to be added, if an icon list has dividers between items.
 - `hasPicture: Signal<boolean> = computed(() => this.eclIllustrationPicture() !== undefined)`
+- `hasTitle: unknown = computed(() => Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined)` — Returns true if the item has a title or any projected icons.
+- `hasValue: unknown = computed(() => Boolean(this.eclValue()))` — Returns true if the item has a value.
 - `isVerticalPicture: unknown = signal(false)` — A special class needs to be added, for vertical lists with picture.
 - `role: string = 'listitem'` — Applies ARIA role for list items.
 
@@ -1268,7 +1269,6 @@ Properties:
 - `isTwoPanels: unknown = false` — If a menu item is expanded and has two panels/levels displayed.
 - `menuItems: unknown = contentChildren(forwardRef(() => EclMegaMenuItemComponent), { descendants: true })`
 - `overlayStyleTop: number` — Used to position the overlay, when a menu item is expanded.
-- `role: string = 'navigation'` — The 'role' attribute of the component is set to 'navigation'. should not be changed.
 
 Methods:
 - `onClickOutsideMegaMenu(): void` — When clicking outside the menu - close any expanded item.
@@ -1286,14 +1286,13 @@ Selector: `div[eclMegaMenuFeatured]`
 Description: This component represents the featured items panel.
 
 Inputs:
-- `title: string`
+- `title: string = undefined`
 - `titleId: string = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Properties:
-- `cmpClass: unknown = true`
 - `eclMegaMenuFeaturedStyleHeight: number | null = null`
 - `featuredItems: unknown = contentChildren(forwardRef(() => EclMegaMenuFeaturedListItemDirective), { descendants: true })`
 - `links: unknown = contentChildren(forwardRef(() => EclLinkDirective), { descendants: true })`
@@ -1361,7 +1360,6 @@ Properties:
 - `eclMegaMenuSublist: unknown = contentChild(forwardRef(() => EclMegaMenuSublistDirective))` — Element, that holds the sub items of the current menu items.
 - `eclMegaMenuSublists: unknown = contentChildren(forwardRef(() => EclMegaMenuSublistDirective), { descendants: true })`
 - `el: unknown = inject(ElementRef)`
-- `hasPopup: unknown = this.hasChildren ? true : null`
 - `isCurrent: unknown = false`
 - `isExpanded: unknown = false`
 - `isMobileBreakpoint: unknown = false`
@@ -1692,8 +1690,7 @@ Outputs:
 
 Properties:
 - `closeButton: unknown = viewChild.required<EclButtonComponent>('closeButton')` — Reference to the close button component.
-- `eclThemeService: unknown = inject(EclThemeService)`
-- `variant: unknown = signal<'information' | 'success' | 'warning' | 'error' | string>(undefined)` — Defines the visual variant of the modal. Determines which icon is shown in the header. Possible values: 'information', 'success', 'warning', 'error', or any custom string.
+- `variant: unknown = computed<'information' | 'success' | 'warning' | 'error' | string | undefined>( () => this.modal.variant(), )` — Defines the visual variant of the modal. Determines which icon is shown in the header. Derived reactively from the parent modal's variant input, so the header icon updates automatically when the parent variant changes at runtime. Possible values: 'information', 'success', 'warning', 'error', or any custom string.
 
 Methods:
 - `getIcon(): "information" | "check-filled" | "warning" | "error" | null` — Returns the name of the icon associated with the current variant.
@@ -2724,25 +2721,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 +2740,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 +2763,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 +2790,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 +2832,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 +2865,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,11 +2895,8 @@ Inputs:
 Outputs:
 - `itemClick: EclSocialMediaFollowItemClickEvent`
 
-Properties:
-- `role: string = 'listitem'`
-
 Methods:
-- `onItemClick(evt: unknown): void`
+- `onItemClick(evt: Event): void`
 - `getCssClasses(rootClass: string): string`
 
 ### EclSplashPageComponent
@@ -4175,8 +4142,8 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `isHidden: unknown = false` — Internal state used to hide the item when exceeding the visible limit.
-- `isLastVisible: unknown = false` — Indicates whether this is the last item visible before the "see all" action is triggered.
+- `isHidden: unknown = signal(false)` — Internal state used to hide the item when exceeding the visible limit.
+- `isLastVisible: unknown = signal(false)` — Indicates whether this is the last item visible before the "see all" action is triggered.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4193,9 +4160,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true` — Applies the ECL list container class.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -4249,9 +4213,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`
 
@@ -4743,7 +4704,6 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `cd: unknown = inject(ChangeDetectorRef)`
 - `eclIconComponents: unknown = contentChildren(forwardRef(() => EclIconComponent), { descendants: true })`
 - `el: unknown = inject(ElementRef)`
 - `renderer: unknown = inject(Renderer2)`
@@ -4894,7 +4854,6 @@ Selector: `iframe[eclMediaContainerIframe]`
 Description: Adds styling and attributes to the iframe element.
 
 Inputs:
-- `ratio: string`
 - `height = undefined`
 - `width = undefined`
 - `class: string`
@@ -4972,9 +4931,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `hasClass: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -4990,9 +4946,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5008,9 +4961,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5024,9 +4974,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5044,9 +4991,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true`
-
 Methods:
 - `getEclMegaMenuFeaturedItemHeight(): number`
 - `getCssClasses(rootClass: string): string`
@@ -5078,9 +5022,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5096,9 +5037,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5118,7 +5056,6 @@ Outputs:
 - `megaMenuSubItemClicked: EventEmitter = new EventEmitter()`
 
 Properties:
-- `cmpClass: unknown = true`
 - `el: unknown = inject(ElementRef)`
 - `isScrollable: unknown = false`
 - `spacer: unknown = contentChild(forwardRef(() => EclMegaMenuSpacerDirective))`
@@ -5166,7 +5103,7 @@ Outputs:
 - `modalClose` — Event emitted when the element is clicked and the modal should be closed.
 
 Methods:
-- `onClick(evt: MouseEvent): void` — Handles click events and emits the modalClose event.
+- `onClick(): void` — Handles click events and emits the modalClose event.
 - `getCssClasses(rootClass: string): string`
 
 ### EclModalTriggerDirective
@@ -5183,7 +5120,7 @@ Inputs:
 - `tabindex: number`
 
 Methods:
-- `onClick(evt: MouseEvent): void` — Handles click event and opens the target modal.
+- `onClick(): void` — Handles click event and opens the target modal.
 - `getCssClasses(rootClass: string): string`
 
 ### EclMultiselectOptionDirective
@@ -7627,6 +7564,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 +7736,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`