@eui/ecl 21.3.2 → 21.3.3-snapshot-1782299250059

package/docs/json/EclAccordionDirective.md

@@ -14,4 +14,5 @@ in expandable sections.
                                 The main class is `ecl-accordion`, which can be extended with additional classes.
 
 
+
 **Selector:** `div[eclAccordion]`

package/docs/json/EclAnimatedNumbersComponent.md

@@ -0,0 +1,34 @@
+# EclAnimatedNumbersComponent
+
+**Type:** component
+
+
+
+Container component for the ECL Animated Numbers pattern.
+Wraps animated number items and an optional sources footer.
+
+```html
+<div eclAnimatedNumbers [sourcesLabel]="'Sources:'">
+    <div eclAnimatedNumbersItems>
+        <div eclAnimatedNumbersItem [eclValue]="'213'" [category]="'Revenue'">
+            <ecl-icon eclAnimatedNumbersIcon icon="users" iconSet="phosphor"></ecl-icon>
+        </div>
+    </div>
+    <ul eclAnimatedNumbersSourcesList>
+        <li eclAnimatedNumbersSourcesItem>
+            <a eclLink eclAnimatedNumbersSource href="/example">Eurostat</a>
+        </li>
+    </ul>
+</div>
+```
+
+**Selector:** `div[eclAnimatedNumbers]`
+
+## Inputs
+- **hasContentColor**: `undefined` - Applies a colour to the counter values.
+- **hasDarkBackground**: `undefined` - Applies a dark background to the component.
+- **hasLeftBorder**: `undefined` - Adds a left border to the animated number items.
+- **sourcesLabel**: `string` - Label displayed before the sources list.
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 

package/docs/json/EclAnimatedNumbersIconDirective.md

@@ -0,0 +1,14 @@
+# EclAnimatedNumbersIconDirective
+
+**Type:** directive
+
+
+
+Marks an icon element as the animated number item's icon.
+Applies the `ecl-animated-number__icon` positioning class.
+
+```html
+<ecl-icon eclAnimatedNumbersIcon icon="users" iconSet="phosphor"></ecl-icon>
+```
+
+**Selector:** `[eclAnimatedNumbersIcon]`

package/docs/json/EclAnimatedNumbersItemComponent.md

@@ -0,0 +1,33 @@
+# EclAnimatedNumbersItemComponent
+
+**Type:** component
+
+
+
+Represents an individual animated number item.
+Displays a numeric value that animates from 0 to the target when scrolled into view.
+Uses an IntersectionObserver to trigger animation on viewport visibility and
+requestAnimationFrame for smooth count-up with cubic ease-out.
+
+```html
+<div eclAnimatedNumbersItem
+     [eclValue]="'1250'"
+     [category]="'Revenue'"
+     [prefix]="'€'"
+     [suffix]="'billions'"
+     [description]="'Annual revenue growth'">
+    <ecl-icon eclAnimatedNumbersIcon icon="trend-up" iconSet="phosphor"></ecl-icon>
+</div>
+```
+
+**Selector:** `[eclAnimatedNumbersItem]`
+
+## Inputs
+- **category**: `string` - Category label displayed in the item header.
+- **description**: `string` - Descriptive text displayed below the number.
+- **eclValue**: `string` - The target numeric value to animate to. Accepts strings with non-numeric characters (they are stripped).
+- **prefix**: `string` - Text displayed before the animated number (e.g. '€', 'billion').
+- **suffix**: `string` - Text displayed after the animated number (e.g. '€', 'billions').
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 

package/docs/json/EclAnimatedNumbersItemsDirective.md

@@ -0,0 +1,16 @@
+# EclAnimatedNumbersItemsDirective
+
+**Type:** directive
+
+
+
+Wraps the grid of animated number items.
+Applies the `ecl-animated-numbers__items` layout class.
+
+```html
+<div eclAnimatedNumbersItems>
+    <div eclAnimatedNumbersItem ...></div>
+</div>
+```
+
+**Selector:** `[eclAnimatedNumbersItems]`

package/docs/json/EclAnimatedNumbersSourceDirective.md

@@ -0,0 +1,14 @@
+# EclAnimatedNumbersSourceDirective
+
+**Type:** directive
+
+
+
+Marks a link as a source reference within the animated numbers component.
+Applies the `ecl-animated-numbers__source` styling class.
+
+```html
+<a eclLink eclAnimatedNumbersSource href="/example">Eurostat</a>
+```
+
+**Selector:** `[eclAnimatedNumbersSource]`

package/docs/json/EclAnimatedNumbersSourcesItemDirective.md

@@ -0,0 +1,16 @@
+# EclAnimatedNumbersSourcesItemDirective
+
+**Type:** directive
+
+
+
+Marks a list item as a source entry.
+Applies the `ecl-animated-numbers__sources-item` class.
+
+```html
+<li eclAnimatedNumbersSourcesItem>
+    <a eclLink eclAnimatedNumbersSource href="/example">Eurostat</a>
+</li>
+```
+
+**Selector:** `[eclAnimatedNumbersSourcesItem]`

package/docs/json/EclAnimatedNumbersSourcesListDirective.md

@@ -0,0 +1,16 @@
+# EclAnimatedNumbersSourcesListDirective
+
+**Type:** directive
+
+
+
+Wraps the list of source links.
+Applies the `ecl-animated-numbers__sources-list` class.
+
+```html
+<ul eclAnimatedNumbersSourcesList>
+    <li eclAnimatedNumbersSourcesItem>...</li>
+</ul>
+```
+
+**Selector:** `[eclAnimatedNumbersSourcesList]`

package/docs/json/EclMediaContainerComponent.md

@@ -12,6 +12,7 @@ A media container is used to display media items (video, audio, image or other d
 ## Inputs
 - **eclAutoplay**: `boolean` - Used for a video only - if the video should play immediately.
 - **isFullWidth**: `boolean` - 
+- **captionPosition**: `"over" | "bottom" | "hidden"` - 
 - **class**: `string` - 
 - **e2eAttr**: `any` - 
 - **tabindex**: `number` - 

package/docs/json/EclPageSummaryComponent.md

@@ -0,0 +1,12 @@
+# EclPageSummaryComponent
+
+**Type:** component
+
+
+
+
+**Selector:** `ecl-page-summary`
+
+## Inputs
+- **eclTitle**: `string` - 
+- **hasIcon**: `undefined` - 

package/docs/json/EclQuizCardComponent.md

@@ -10,16 +10,15 @@ For the 'reveal' variant, the entire card is clickable to flip.
 For the 'poll' variant, individual options trigger the flip.
 
 
-**Selector:** `div[eclQuizCard]`
+**Selector:** `li[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.
+- **id**: `string` - Unique identifier for the card, used for accessibility attributes. If not provided, a unique ID is generated automatically.
 - **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` - 

package/docs/json/EclQuizComponent.md

@@ -11,7 +11,7 @@ Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla
 implementation which also uses Embla internally.
 
 
-**Selector:** `div[eclQuiz]`
+**Selector:** `section[eclQuiz]`
 
 ## Inputs
 - **eclDescription**: `string` - Description displayed below the title.

package/docs/json/EclQuizListDirective.md

@@ -0,0 +1,8 @@
+# EclQuizListDirective
+
+**Type:** directive
+
+
+
+
+**Selector:** `ol[eclQuizList]`

package/docs/json/EclTextMediaComponent.md

@@ -0,0 +1,18 @@
+# EclTextMediaComponent
+
+**Type:** component
+
+
+
+A media container is used to display media items (video, audio, image or other data)
+ with text and a caption.
+
+
+**Selector:** `article[eclTextMedia]`
+
+## Inputs
+- **mediaPosition**: `"left" | "right"` - 
+- **variant**: `"default" | "primary"` - 
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 

package/docs/json/EclTextMediaContainerDirective.md

@@ -0,0 +1,10 @@
+# EclTextMediaContainerDirective
+
+**Type:** directive
+
+
+
+Sets custom class for the `ecl-text-media` component, used within eclTextMedia component.
+
+
+**Selector:** `ecl-media-container[eclTextMediaContainer]`

package/docs/json/EclTextMediaDescriptionDirective.md

@@ -0,0 +1,10 @@
+# EclTextMediaDescriptionDirective
+
+**Type:** directive
+
+
+
+Applies styles for the description element.
+
+
+**Selector:** `div[eclTextMediaDescription]`

package/docs/json/EclTextMediaLinkDirective.md

@@ -0,0 +1,10 @@
+# EclTextMediaLinkDirective
+
+**Type:** directive
+
+
+
+Applies styles for the link element.
+
+
+**Selector:** `a[eclTextMediaLink]`

package/docs/json/EclTextMediaMediaAnchorDirective.md

@@ -0,0 +1,17 @@
+# EclTextMediaMediaAnchorDirective
+
+**Type:** directive
+
+
+
+Sets the `--ecl-image-anchor` CSS custom property for an image used
+within the `ecl-text-media` component.
+
+Intended to be used together with `img[eclMediaContainerImage]`
+from the `ecl-media-container` component.
+
+
+**Selector:** `img[eclTextMediaImgAnchor]`
+
+## Inputs
+- **eclTextMediaImgAnchor**: `"center" | "top left" | "bottom right" | "20% 20%"` - 

package/docs/json/EclTextMediaMicroTitleDirective.md

@@ -0,0 +1,10 @@
+# EclTextMediaMicroTitleDirective
+
+**Type:** directive
+
+
+
+Applies styles for the micro title element.
+
+
+**Selector:** `div[eclTextMediaMicroTitle]`

package/docs/json/EclTextMediaTitleDirective.md

@@ -0,0 +1,10 @@
+# EclTextMediaTitleDirective
+
+**Type:** directive
+
+
+
+Applies styles for the title element.
+
+
+**Selector:** `div[eclTextMediaTitle]`