@eui/ecl 21.2.6 → 21.2.7-snapshot-1780663563127

package/docs/json/EclAddToCalendarActionDirective.md

@@ -0,0 +1,8 @@
+# EclAddToCalendarActionDirective
+
+**Type:** directive
+
+
+
+
+**Selector:** `div[eclAddToCalendarAction]`

package/docs/json/EclAddToCalendarComponent.md

@@ -0,0 +1,21 @@
+# EclAddToCalendarComponent
+
+**Type:** component
+
+
+
+ECL Add to Calendar component.
+Displays event information with optional date, time, and location metadata.
+
+
+**Selector:** `div[eclAddToCalendar]`
+
+## Inputs
+- **calendarDates**: `string` - Date(s) of the event (e.g. "March 15-17, 2026").
+- **calendarLocation**: `string` - Location of the event (e.g. "San Francisco, CA").
+- **calendarTime**: `string` - Time of the event (e.g. "2:00 PM - 4:00 PM").
+- **eclTitle**: `string` - Title displayed in the component.
+- **isFullWidth**: `undefined` - 
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 

package/docs/json/EclBannerComponent.md

@@ -19,6 +19,7 @@ Allows customization of layout, alignment, and appearance through inputs.
 - **horizontalAlignment**: `"right" | "left" | "center" | string` - Sets the horizontal alignment of the content inside the banner. Allowed values: 'left' | 'center' | 'right'. Default: 'left'.
 - **isFullWidth**: `boolean` - When true, the banner stretches to full width of its container. Default: false.
 - **verticalAlignment**: `"top" | "center" | "bottom" | string` - Sets the vertical alignment of the content inside the banner. Allowed values: 'top' | 'center' | 'bottom'. Default: 'center'.
+- **fontWeight**: `"light" | "bold"` - 
 - **hasOverlay**: `undefined` - 
 - **class**: `string` - 
 - **e2eAttr**: `any` - 

package/docs/json/EclFeaturedItemComponent.md

@@ -10,7 +10,8 @@ Container for the text part - title and description of the <ecl-featured> compon
 **Selector:** `ecl-featured-item, div[eclFeaturedItem]`
 
 ## Inputs
-- **eclTitle**: `string` - 
+- **eclMicroTitle**: `undefined` - 
+- **eclTitle**: `undefined` - 
 - **id**: `string` - 
 - **class**: `string` - 
 - **e2eAttr**: `any` - 

package/docs/json/EclFileComponent.md

@@ -11,13 +11,14 @@ and image (thumbnail) support.
 **Selector:** `ecl-file`
 
 ## Inputs
+- **id**: `string` - Optional ID for the file component, useful for accessibility or referencing.
 - **description**: `string` - Optional description displayed under the file title.
 - **detailMeta**: `string[]` - Additional details displayed in the file component (e.g. file size, date).
-- **id**: `string` - Optional ID for the file component, useful for accessibility or referencing.
 - **labelInfo**: `string` - Additional label shown next to the language label, e.g. file type or status.
 - **langId**: `string` - Optional language ID (e.g., for translation or accessibility attributes).
 - **language**: `string` - Language indicator string (e.g. "EN", "FR") used in the label.
 - **meta**: `string` - Main metadata displayed for the file (e.g. format, license).
+- **metaId**: `string` - ID applied to the meta element for accessibility.
 - **class**: `string` - 
 - **e2eAttr**: `any` - 
 - **tabindex**: `number` - 

package/docs/json/EclFileItemComponent.md

@@ -12,10 +12,11 @@ inside the main ECL File component.
 
 ## Inputs
 - **eclTitle**: `string` - Title text of the file item.
-- **isDescription**: `boolean` - Indicates whether the item is a description block rather than a translation. Adds the `ecl-file__translation-description` class when true.
+- **isDescription**: `undefined` - Indicates whether the item is a description block rather than a translation. Adds the `ecl-file__translation-description` class when true.
 - **label**: `string` - Language label displayed next to the title (e.g., "FR", "EN").
 - **langDetail**: `string` - Supplementary language detail displayed below the language label.
 - **meta**: `string` - Additional metadata for the item (e.g., file size, type).
+- **metaId**: `string` - ID applied to the meta element for accessibility.
 - **titleId**: `string` - ID applied to the title element for accessibility.
 - **class**: `string` - 
 - **e2eAttr**: `any` - 

package/docs/json/EclIconComponent.md

@@ -19,6 +19,6 @@ Integrates with ECL theming and supports accessibility options.
 - **title**: `string` - Title used for accessibility. Also affects `aria-hidden` and `role`.
 - **color**: `'inverted' | 'primary' | null` - Applies color styling to the icon. Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.
 - **icon**: `string` - Name of the icon to render from the selected set.
-- **iconSet**: `'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' | string` - 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' | string` - Defines the icon set to use. Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix. Defaults to `'default'`.
 - **size**: `'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string` - Size of the icon. Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`. Defaults to `'xs'`.
 - **transform**: `string` - Adds a transformation modifier to the icon (e.g., rotation).

package/docs/json/EclMultiselectComponent.md

@@ -14,7 +14,7 @@ Replaces the original element with a custom dropdown rendered dynamically.
 
 ## Inputs
 - **ariaDescribedby**: `string | undefined` - Defines the `aria-describedby` attribute for accessibility.
-- **ariaLabeledby**: `string | undefined` - Defines the `aria-labelledby` attribute for accessibility.
+- **counterLabel**: `string` - Label for the selections counter, read by screen readers. Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.
 - **disabled**: `BooleanInput` - Disables the multiselect component when set to true.
 - **eclPlaceholder**: `string` - Placeholder text to show in the multiselect input field when no options are selected.
 - **eclSize**: `string` - Multiselect size: 's' | 'm' | 'l'. Default is 'm'.
@@ -22,6 +22,7 @@ Replaces the original element with a custom dropdown rendered dynamically.
 - **hasSelectAll**: `string` - Displays the "Select all" option in the dropdown.
 - **id**: `string | undefined` - Sets the `id` attribute of the multiselect component.
 - **isInvalid**: `boolean | undefined` - Marks the multiselect as invalid.
+- **isSubmitOnApply**: `string` - When true, the Apply button in the dropdown acts as a submit button (type="submit").
 - **toggleLabel**: `string | undefined` - Label used for the toggle button that expands or collapses the dropdown.
 - **class**: `string` - 
 - **e2eAttr**: `any` - 

package/docs/json/EclMultiselectInputComponent.md

@@ -13,13 +13,13 @@ Handles displaying selected items, opening the dropdown, and managing accessibil
 ## Inputs
 - **ariaControls**: `string | undefined` - ARIA controls attribute for accessibility.
 - **ariaDescribedby**: `string | undefined` - ARIA describedby attribute for accessibility.
-- **ariaLabeledby**: `string | undefined` - ARIA labelledby attribute for accessibility.
-- **eclSize**: `string` - Size modifier for the multiselect input (e.g., 's', 'm', 'l').
-- **inputPlaceholder**: `string` - Placeholder text for the input when no items are selected.
-- **isDisabled**: `boolean | undefined` - Marks the component as disabled.
-- **isDropdownExpanded**: `boolean` - Indicates that the dropdown is currently expanded.
-- **isInvalid**: `boolean | undefined` - Marks the component as being in an invalid state.
-- **selectedItems**: `{}` - Array of currently selected item labels.
+- **counterLabel**: `undefined` - Label for the selections counter, read by screen readers.
+- **eclSize**: `undefined` - Size modifier for the multiselect input (e.g., 's', 'm', 'l').
+- **inputPlaceholder**: `undefined` - Placeholder text for the input when no items are selected.
+- **isDisabled**: `undefined` - Marks the component as disabled.
+- **isDropdownExpanded**: `undefined` - Indicates that the dropdown is currently expanded.
+- **isInvalid**: `undefined` - Marks the component as being in an invalid state.
+- **selectedItems**: `string[]` - Array of currently selected item labels.
 - **toggleId**: `string` - ID of the toggle button element (used for accessibility).
 - **toggleLabel**: `string | undefined` - Label for the toggle button (optional).
 - **class**: `string` - 

package/docs/json/EclQuizCardComponent.md

@@ -0,0 +1,30 @@
+# EclQuizCardComponent
+
+**Type:** component
+
+
+
+ECL Quiz Card component – represents a single card in the quiz.
+
+For the 'reveal' variant, the entire card is clickable to flip.
+For the 'poll' variant, individual options trigger the flip.
+
+
+**Selector:** `div[eclQuizCard]`
+
+## Inputs
+- **ariaHidden**: `string | null` - 
+- **isActive**: `boolean` - Whether this card is currently active/visible in the slider.
+- **answer**: `string` - The answer text displayed on the back of the card. Used in 'reveal' variant or as explanation in 'poll' variant.
+- **answerTitle**: `string` - The answer title (e.g. "The correct answer is A.") for poll variant.
+- **category**: `string` - Category label displayed in the card header (poll variant).
+- **icon**: `string` - Icon name for the card header. Defaults to 'sparkle' for reveal, 'question' for poll.
+- **iconSize**: `"xs" | "s" | "m" | "l" | "xl" | "2xl"` - Icon size for the card header.
+- **options**: `Array<{ text: string; match: boolean }>` - Options for the poll variant. Each option has text and a match flag.
+- **question**: `string` - The question text displayed on the front of the card.
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 
+
+## Outputs
+- **cardFlip**: `EventEmitter` - Emitted when the card is flipped.

package/docs/json/EclQuizComponent.md

@@ -0,0 +1,22 @@
+# EclQuizComponent
+
+**Type:** component
+
+
+
+ECL Quiz component – renders a carousel of quiz cards with navigation.
+Supports two variants: 'reveal' (flip cards) and 'poll' (multiple choice).
+
+Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla
+implementation which also uses Embla internally.
+
+
+**Selector:** `div[eclQuiz]`
+
+## Inputs
+- **eclDescription**: `string` - Description displayed below the title.
+- **eclTitle**: `string` - Title displayed in the quiz header.
+- **variant**: `"poll" | "reveal"` - Quiz variant: 'reveal' for flip cards, 'poll' for multiple choice.
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` -