@eui/ecl 22.0.0-alpha.34 → 22.0.0-alpha.36

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-30T12:12:20.132Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-01T11:50:52.094Z, llm-md export.
 
 ## Modules
 
@@ -992,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' | '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' .
+- `iconSet: EclIconSet = 'default'` — Defines the icon set to use. Available sets: default , social , social-media , social-media-color , flag , flag-non-members , phosphor , phosphor-fill . 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' .
@@ -1970,8 +1970,7 @@ Methods:
 ### EclPageHeaderComponent
 
 File: `packages/ecl/components/ecl-page-header/ecl-page-header.component.ts`
-Selector: `ecl-page-header`
-Deprecated: (deprecated: Use `div[eclPageHeader]` instead. To be removed in v23.)
+Selector: `div[eclPageHeader]`
 
 Description: ECL Page Header component, wraps header content and handles background images and breadcrumb styling.
 
@@ -1984,7 +1983,6 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclBackgroundPicture: unknown = contentChild(EclPageHeaderBackgroundPictureDirective)` — Reference to the background picture directive, if present.
 - `eclBreadcrumbComponent: unknown = contentChild(EclBreadcrumbComponent)` — Reference to the ECL breadcrumb inside the header.
 
 Methods:
@@ -2025,27 +2023,6 @@ Methods:
 - `onExpandButtonClick(): void`
 - `getCssClasses(rootClass: string): string`
 
-### EclPageHeaderNextComponent
-
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-next/ecl-page-header-next.component.ts`
-Selector: `div[eclPageHeader]`
-
-Description: ECL Page Header component, wraps header content and handles background images and breadcrumb styling.
-
-Inputs:
-- `descriptionPosition: "top" | "bottom" = 'top'`
-- `hasBackground: boolean = false`
-- `picturePosition: "top" | "beside" | "bottom" = 'top'`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
-
-Properties:
-- `eclBreadcrumbComponent: unknown = contentChild(EclBreadcrumbComponent)` — Reference to the ECL breadcrumb inside the header.
-
-Methods:
-- `getCssClasses(rootClass: string): string`
-
 ### EclPageHeaderSectionComponent
 
 File: `packages/ecl/components/ecl-page-header/ecl-page-header-section/ecl-page-header-section.component.ts`
@@ -2530,9 +2507,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `class: string = 'ecl-site-header__action'`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -2549,9 +2523,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -2563,16 +2534,17 @@ Selector: `ecl-site-header`
 Description: The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of every site (such as Language switcher or Search form). Additionally it can host the name of the site, the class name to which it belongs and the main navigation. The header is always placed at the top of the page. The elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.
 
 Inputs:
-- `languageCode: string = 'en'` — Language code of the current language of the site.
-- `siteName: string` — The name of the site, to be added in the header, next to the logo.
 - `isSiteNameMobileOnly: boolean = false` — Determines if the site name should be displayed only on mobile devices.
+- `languageCode: string = 'en'` — Language code of the current language of the site.
 - `logoSize: "s" | "m" | "l" = 'm'` — The size of the logo, 's', 'm' or 'l', default to 'm'.
+- `siteName: string` — The name of the site, to be added in the header, next to the logo.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Outputs:
 - `languageClick: EclSiteHeaderLanguageClickEvent`
+- `languageCode: string = 'en'` — Language code of the current language of the site.
 - `logoClick: EclSiteHeaderLogoClickEvent`
 
 Properties:
@@ -2585,7 +2557,6 @@ Properties:
 - `eclMenuComponent: unknown = contentChild(EclMenuComponent)`
 - `eclNotificationComponent: unknown = contentChild(EclSiteHeaderNotificationComponent)`
 - `eclSearchComponent: unknown = contentChild(EclSiteHeaderSearchComponent)`
-- `eclThemeService: unknown = inject(EclThemeService)`
 - `siteHeaderHeader: unknown = viewChild<ElementRef>('siteHeaderHeader')`
 - `topContainerElement: unknown = viewChild<ElementRef>('topContainer')`
 
@@ -2606,13 +2577,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `class: string = 'ecl-site-header__custom-action'`
-- `eclSiteHeaderCustomActionLink: unknown = contentChild(EclSiteHeaderCustomActionLinkDirective)`
-- `isOverlayExpanded: unknown = false` — Used to expand/collapse the dropdown, if any.
-- `title: unknown = contentChild(EclSiteHeaderCustomActionTitleDirective)`
-- `titleId: string`
-
 Methods:
 - `onClickOutsideHandler(): void` — Close the overlay, when clicking outside of it.
 - `onCustomActionOverlayClose(): void` — Close the overlay.
@@ -2647,23 +2611,11 @@ Inputs:
 - `tabindex: number`
 
 Outputs:
-- `languageClick: EventEmitter = new EventEmitter<EclSiteHeaderLanguageClickEvent>()` — Thie event is emited, when language link, showing the current language is clicked.
-- `languageSelected: EventEmitter = new EventEmitter<EclSiteHeaderLanguageSelectedEvent>()` — Thie event is emited, when user selects a new language from the dropdown.
+- `languageClick: EclSiteHeaderLanguageClickEvent` — Thie event is emited, when language link, showing the current language is clicked.
+- `languageSelected: EclSiteHeaderLanguageSelectedEvent` — Thie event is emited, when user selects a new language from the dropdown.
 
 Properties:
-- `euColumnsCount: number = 1`
-- `euLanguages: EuiLanguage[] = []` — Array of EU languages, that can be selected for the current site.
-- `isFull: boolean` — This property is used for dropdown positioning on the screen.
-- `isLanguagesDropdownVisible: unknown = false`
-- `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.
-- `languageArrowPosition: string` — This property is used for dropdown positioning on the screen.
-- `languageCode: string = 'en'`
-- `leftPosition: number`
-- `nonEuColumnsCount: number = 1`
-- `nonEuLanguages: EuiLanguage[] = []` — Array of non-EU languages, that can be selected for the current site.
-- `rightPosition: number`
+- `languageCode: string = 'en'` — Current language code. Read and written by the parent ecl-site-header .
 
 Methods:
 - `hasLanguageCodes(): boolean`
@@ -2699,9 +2651,7 @@ Outputs:
 - `languageSelected: EclSiteHeaderLanguageSelectedEvent`
 
 Properties:
-- `el: unknown = inject(ElementRef)`
-- `languageContent: unknown = viewChild<ElementRef>('languageContent')` — The div, that wraps all the languages.
-- `languageContentMaxHeight: number`
+- `el: unknown = inject(ElementRef)` — Host element reference. Read by the parent ecl-site-header-language for positioning.
 
 Methods:
 - `onCloseClick(): void`
@@ -2723,8 +2673,8 @@ Inputs:
 - `tabindex: number`
 
 Outputs:
-- `loginBoxToggle: EventEmitter = new EventEmitter<EclSiteHeaderLoginBoxToggleEvent>()`
 - `login: EclSiteHeaderLoginEvent`
+- `loginBoxToggle: EclSiteHeaderLoginBoxToggleEvent`
 
 Properties:
 - `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.
@@ -2757,16 +2707,17 @@ Selector: `ecl-site-header-search`
 Description: This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits events on search and search toggle.
 
 Inputs:
-- `searchInputText: string`
 - `searchButtonLabel: string = undefined`
 - `searchInputPlaceholder: string = undefined`
+- `searchInputText: string`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Outputs:
-- `searchToggle: EventEmitter = new EventEmitter<EclSiteHeaderSearchToggleEvent>()`
 - `searchEvent: EclSiteHeaderSearchEvent`
+- `searchInputText: string`
+- `searchToggle: EclSiteHeaderSearchToggleEvent`
 
 Properties:
 - `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.
@@ -2820,7 +2771,7 @@ Inputs:
 - `extraAttributes: { name: string; value?: string | null; }[] = undefined`
 - `href: string = ''`
 - `icon: string`
-- `iconSet: string = 'social-media'`
+- `iconSet: EclIconSet = 'social-media'`
 - `isInverted: false = undefined`
 - `routerLink: string = ''`
 - `size: string = 'm'`
@@ -3708,7 +3659,7 @@ Methods:
 
 ### EclContainerDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-info.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-info.directive.ts`
 Selector: `[eclContainer]`
 
 Inputs:
@@ -5199,7 +5150,7 @@ Methods:
 
 ### EclPageHeaderBackgroundImageDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-background.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-background.directive.ts`
 Selector: `[eclPageHeaderBackgroundImage]`
 
 Description: Styles the background image inside the page header.
@@ -5214,7 +5165,7 @@ Methods:
 
 ### EclPageHeaderBackgroundPictureDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-background.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-background.directive.ts`
 Selector: `[eclPageHeaderBackgroundPicture]`
 
 Description: Styles the background picture inside the page header.
@@ -5229,7 +5180,7 @@ Methods:
 
 ### EclPageHeaderContainerDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-info.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-info.directive.ts`
 Selector: `[eclPageHeaderContainer]`
 
 Inputs:
@@ -5242,7 +5193,7 @@ Methods:
 
 ### EclPageHeaderDescriptionDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-description.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-description.directive.ts`
 Selector: `p[eclPageHeaderDescription]`
 
 Description: Styles the text description in the page header.
@@ -5257,7 +5208,7 @@ Methods:
 
 ### EclPageHeaderDescriptionPictureDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-description.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-description.directive.ts`
 Selector: `[eclPageHeaderDescriptionPicture]`
 
 Description: Styles a picture used in the page header description.
@@ -5272,7 +5223,7 @@ Methods:
 
 ### EclPageHeaderDescriptionThumbnailDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-description.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-description.directive.ts`
 Selector: `[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]`
 
 Description: Styles a thumbnail or image in the page header description.
@@ -5287,7 +5238,7 @@ Methods:
 
 ### EclPageHeaderExpandableHeaderDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-title.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-title.directive.ts`
 Selector: `[eclPageHeaderExpandableHeader]`
 
 Description: Styles the header section for the page header expandable component.
@@ -5302,7 +5253,7 @@ Methods:
 
 ### EclPageHeaderInfoDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-info.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-info.directive.ts`
 Selector: `[eclPageHeaderInfo]`
 
 Description: Styles the info section in the page header.
@@ -5317,7 +5268,7 @@ Methods:
 
 ### EclPageHeaderMetaDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-meta.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-meta.directive.ts`
 Selector: `[eclPageHeaderMeta]`
 
 Description: Styles the meta section in the page header.
@@ -5332,7 +5283,7 @@ Methods:
 
 ### EclPageHeaderMetaItemDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-meta.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-meta.directive.ts`
 Selector: `[eclPageHeaderMetaItem]`
 
 Description: Styles individual meta items in the page header.
@@ -5350,7 +5301,7 @@ Methods:
 
 ### EclPageHeaderTitleDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-title.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-title.directive.ts`
 Selector: `[eclPageHeaderTitle]`
 
 Description: Styles the title section in the page header.
@@ -5754,9 +5705,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5770,9 +5718,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5789,13 +5734,11 @@ Inputs:
 - `tabindex: number`
 
 Outputs:
-- `customActionOverlayToggle: EventEmitter = new EventEmitter<boolean>()`
+- `customActionOverlayToggle: boolean`
+- `href: string`
 
 Properties:
-- `ariaControls: string`
-- `className: string = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only'`
-- `eclIconComponent: unknown = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true })`
-- `isOverlayExpanded: boolean`
+- `isOverlayExpanded: boolean` — Whether the overlay is expanded. Set by the parent ecl-site-header-custom-action .
 
 Methods:
 - `hasLink(): boolean`
@@ -5813,9 +5756,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5849,9 +5789,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-link ecl-link--standalone ecl-site-header__logo-link'`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5867,9 +5804,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-site-header__login-description'`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5885,9 +5819,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-site-header__login-separator'`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5903,9 +5834,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-site-header__picture ecl-picture'`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -7402,6 +7330,7 @@ Properties:
 - `type DuetEl = HTMLElement & literal type`
 - `type DuetLocalization = { buttonLabel: string; selectedDateMessage: string; prevMonthLabel: string; nextMonthLabel: string; monthSelectLabel: string; yearSelectLabel: string; closeLabe…`
 - `type EclDuetDateAdapter = { parse: Date | undefined; format: string }`
+- `type EclIconSet = "default" | "social" | "social-media" | "social-media-color" | "flag" | "flag-non-members" | "phosphor" | "phosphor-fill"` — Available icon sets supported by EclIconComponent.
 - `type ModelValue = Date | null`
 - `type ModelValue = Date | null`
 
@@ -7446,10 +7375,10 @@ Properties:
 
 - `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`
+- `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`
 - `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'`
@@ -7552,7 +7481,7 @@ Properties:
   Defined in `packages/ecl/components/ecl-news-ticker/index.ts`
 - `EUI_ECL_NOTIFICATION: unknown = [ EclNotificationComponent, EclNotificationTitleDirective, EclNotificationIconDirective, EclNotificationLinkDirective, ] as const`
   Defined in `packages/ecl/components/ecl-notification/index.ts`
-- `EUI_ECL_PAGE_HEADER: unknown = [ EclPageHeaderComponent, EclPageHeaderNextComponent, EclPageHeaderContainerDirective, EclPageHeaderExpandableComponent, EclPageHeaderExpandableHeaderDirective,…`
+- `EUI_ECL_PAGE_HEADER: unknown = [ EclPageHeaderComponent, EclPageHeaderContainerDirective, EclPageHeaderExpandableComponent, EclPageHeaderExpandableHeaderDirective, EclPageHeaderInfoDirective,…`
   Defined in `packages/ecl/components/ecl-page-header/index.ts`
 - `EUI_ECL_PAGE_INFORMATION: unknown = [ EclPageInformationDirective, ] as const`
   Defined in `packages/ecl/components/ecl-page-information/index.ts`
@@ -7616,9 +7545,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`
+- `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`
 - `testBed: unknown = getTestBed()`
   Defined in `packages/ecl/test-setup.ts`

package/docs/miscellaneous/typealiases.html

@@ -158,6 +158,9 @@
                         <li>
                             <a href="#EclDuetDateAdapter" title="packages/ecl/components/ecl-date-picker/ecl-date-picker-adapter.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EclDuetDateAdapter</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-date-picker-adapter.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#EclIconSet" title="packages/ecl/components/ecl-icon/ecl-icon.component.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EclIconSet</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-icon.component.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#ModelValue" title="packages/ecl/components/ecl-date-picker/ecl-date-picker-duet.directive.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>ModelValue</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-date-picker-duet.directive.ts)</span></a>
                         </li>
@@ -327,6 +330,31 @@
         </tbody>
     </table>
 </section>
+    <h3>packages/ecl/components/ecl-icon/ecl-icon.component.ts</h3>
+    <section data-compodoc="block-typealias">
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EclIconSet"></a>
+                    <span class="name "><b>EclIconSet</b><a href="#EclIconSet"><span class="icon ion-ios-link"></span></a></span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Available icon sets supported by <a href="../components/EclIconComponent.html">EclIconComponent</a>.</p>
+</div>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <code>    <code>&quot;default&quot; | &quot;social&quot; | &quot;social-media&quot; | &quot;social-media-color&quot; | &quot;flag&quot; | &quot;flag-non-members&quot; | &quot;phosphor&quot; | &quot;phosphor-fill&quot;</code>
+</code>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</section>