@eui/ecl 21.2.0 → 21.2.1-snapshot-1773486331544

package/docs/json/documentation.json

@@ -16585,12 +16585,12 @@
         },
         {
             "name": "EclLinkDirective",
-            "id": "directive-EclLinkDirective-dcb629a965a54c82a47debac10f49468ed4bc73ce79654c575adcb33b381e95842ad501382c2e90a45618ad27cabd77f63c2bef38e3c769daeeb51441a3030d4",
+            "id": "directive-EclLinkDirective-31881d0e6c7900a91095308f3ea12f2bab4543c107d2bf036c0f4c10fd5645d405c62a9c3d577560b620d5c269376f34890d3ffcea49789f06585df386f956fd",
             "file": "packages/ecl/components/ecl-link/ecl-link.directive.ts",
             "type": "directive",
             "description": "<p>&#39;eclLink&#39; directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.</p>\n",
             "rawdescription": "\n\n'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n",
-            "sourceCode": "import { AfterContentInit, booleanAttribute, ChangeDetectorRef, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n    cd = inject(ChangeDetectorRef);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant) \n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n    \n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(EclIconComponent);\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0 && !this.isIconOnly();\n    })\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-link'), \n            this.variant() ? `ecl-link--${this.variant()}` : '',\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        // Add additional class to the child icon, if any.\n        if (this.eclIconComponents()) {\n            setTimeout(() => {\n                this.eclIconComponents().forEach((icn) => {\n                    this.renderer.addClass(icn.el.nativeElement, 'ecl-link__icon');\n                });\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
+            "sourceCode": "import { AfterContentInit, booleanAttribute, ChangeDetectorRef, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n    cd = inject(ChangeDetectorRef);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant) \n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n    \n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0 && !this.isIconOnly();\n    })\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-link'), \n            this.variant() ? `ecl-link--${this.variant()}` : '',\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        // Add additional class to the child icon, if any.\n        if (this.eclIconComponents()?.length > 0 ) {\n            setTimeout(() => {\n                this.eclIconComponents().forEach((icn) => {\n                    console.log('adding extra class', icn);\n                    icn.addExtraClass('ecl-link__icon');\n                });\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
             "selector": "[eclLink]",
             "providers": [],
             "hostDirectives": [],
@@ -16620,16 +16620,16 @@
                     "rawdescription": "\nAdds class for hightlighted link (works only with 'primary' variant)\n",
                     "jsdoctags": [
                         {
-                            "pos": 1343,
-                            "end": 1460,
+                            "pos": 1355,
+                            "end": 1472,
                             "kind": 332,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1344,
-                                "end": 1354,
+                                "pos": 1356,
+                                "end": 1366,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -16677,16 +16677,16 @@
                     "rawdescription": "\n\n",
                     "jsdoctags": [
                         {
-                            "pos": 1548,
-                            "end": 1615,
+                            "pos": 1560,
+                            "end": 1627,
                             "kind": 332,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1549,
-                                "end": 1559,
+                                "pos": 1561,
+                                "end": 1571,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -16800,7 +16800,7 @@
                 },
                 {
                     "name": "eclIconComponents",
-                    "defaultValue": "contentChildren(EclIconComponent)",
+                    "defaultValue": "contentChildren(forwardRef(() => EclIconComponent), { descendants: true })",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
@@ -16869,7 +16869,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 118,
+                    "line": 119,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native blur() method of the default HTML element.\n",
@@ -16881,7 +16881,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 111,
+                    "line": 112,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native click() method of the default HTML element.\n",
@@ -16893,7 +16893,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 104,
+                    "line": 105,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native focus() method of the default HTML element.\n",
@@ -27016,12 +27016,12 @@
         },
         {
             "name": "EclSiteHeaderCustomActionContentDirective",
-            "id": "directive-EclSiteHeaderCustomActionContentDirective-0bb35c9e991377e031fc71b13170913cc98f2c26a359e7d7fa82413967285cd07d8c20cefdee55339c779ab6dfcc8efa624f03b978cc6f18f37af548b47600bf",
+            "id": "directive-EclSiteHeaderCustomActionContentDirective-39d7dd2e5e2136096090862d3afe8586965b84ec9838946c8b1fc1bb7fefca646c26ee4f37d0461e36a4f92e9a0a26af32c5d750f74de7ed1f3c08ef72ef4516",
             "file": "packages/ecl/components/ecl-site-header/custom-action/ecl-site-header-custom-action.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { Directive, HostBinding, Input, ContentChild, forwardRef, AfterContentInit, HostListener, Output, EventEmitter, PLATFORM_ID, inject } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    @ContentChild(forwardRef(() => EclIconComponent), { descendants: true }) eclIconComponent: EclIconComponent;\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        requestAnimationFrame(() => {\n            if (this.eclIconComponent) {\n                this.eclIconComponent.baseDirective.class = this.eclIconComponent.baseDirective.class + ' ecl-site-header__icon';\n            }\n            if (!this.hasLink()) {\n                this.href = '#';\n                this.isOverlayExpanded = false;\n                this.ariaControls = this.ARIA_CONTROLS;\n            }\n        });\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n      }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, EventEmitter, HostBinding, HostListener, Input, Output, PLATFORM_ID, contentChild, forwardRef, inject, input } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href = '#';\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n      }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
             "selector": "div[eclSiteHeaderCustomActionContent]",
             "providers": [],
             "hostDirectives": [],
@@ -27071,7 +27071,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 50,
+                    "line": 48,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -27087,7 +27087,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 50,
+                    "line": 48,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -27142,12 +27142,12 @@
         },
         {
             "name": "EclSiteHeaderCustomActionLinkDirective",
-            "id": "directive-EclSiteHeaderCustomActionLinkDirective-0bb35c9e991377e031fc71b13170913cc98f2c26a359e7d7fa82413967285cd07d8c20cefdee55339c779ab6dfcc8efa624f03b978cc6f18f37af548b47600bf",
+            "id": "directive-EclSiteHeaderCustomActionLinkDirective-39d7dd2e5e2136096090862d3afe8586965b84ec9838946c8b1fc1bb7fefca646c26ee4f37d0461e36a4f92e9a0a26af32c5d750f74de7ed1f3c08ef72ef4516",
             "file": "packages/ecl/components/ecl-site-header/custom-action/ecl-site-header-custom-action.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { Directive, HostBinding, Input, ContentChild, forwardRef, AfterContentInit, HostListener, Output, EventEmitter, PLATFORM_ID, inject } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    @ContentChild(forwardRef(() => EclIconComponent), { descendants: true }) eclIconComponent: EclIconComponent;\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        requestAnimationFrame(() => {\n            if (this.eclIconComponent) {\n                this.eclIconComponent.baseDirective.class = this.eclIconComponent.baseDirective.class + ' ecl-site-header__icon';\n            }\n            if (!this.hasLink()) {\n                this.href = '#';\n                this.isOverlayExpanded = false;\n                this.ariaControls = this.ARIA_CONTROLS;\n            }\n        });\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n      }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, EventEmitter, HostBinding, HostListener, Input, Output, PLATFORM_ID, contentChild, forwardRef, inject, input } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href = '#';\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n      }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
             "selector": "a[eclSiteHeaderCustomActionLink]",
             "providers": [],
             "hostDirectives": [],
@@ -27235,7 +27235,7 @@
                 },
                 {
                     "name": "class",
-                    "defaultValue": "'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary'",
+                    "defaultValue": "'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only'",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "line": 10,
@@ -27261,7 +27261,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 34
+                    "line": 32
                 }
             ],
             "propertiesClass": [
@@ -27286,7 +27286,7 @@
                 },
                 {
                     "name": "className",
-                    "defaultValue": "'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary'",
+                    "defaultValue": "'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only'",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string",
@@ -27306,22 +27306,14 @@
                 },
                 {
                     "name": "eclIconComponent",
+                    "defaultValue": "contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true })",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "EclIconComponent",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 16,
-                    "decorators": [
-                        {
-                            "name": "ContentChild",
-                            "stringifiedArguments": "undefined, {descendants: true}"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 16
                 },
                 {
                     "name": "isOverlayExpanded",
@@ -27350,7 +27342,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 42,
+                    "line": 40,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -27379,7 +27371,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 34,
+                    "line": 32,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -27450,12 +27442,12 @@
         },
         {
             "name": "EclSiteHeaderCustomActionTitleDirective",
-            "id": "directive-EclSiteHeaderCustomActionTitleDirective-0bb35c9e991377e031fc71b13170913cc98f2c26a359e7d7fa82413967285cd07d8c20cefdee55339c779ab6dfcc8efa624f03b978cc6f18f37af548b47600bf",
+            "id": "directive-EclSiteHeaderCustomActionTitleDirective-39d7dd2e5e2136096090862d3afe8586965b84ec9838946c8b1fc1bb7fefca646c26ee4f37d0461e36a4f92e9a0a26af32c5d750f74de7ed1f3c08ef72ef4516",
             "file": "packages/ecl/components/ecl-site-header/custom-action/ecl-site-header-custom-action.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { Directive, HostBinding, Input, ContentChild, forwardRef, AfterContentInit, HostListener, Output, EventEmitter, PLATFORM_ID, inject } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    @ContentChild(forwardRef(() => EclIconComponent), { descendants: true }) eclIconComponent: EclIconComponent;\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        requestAnimationFrame(() => {\n            if (this.eclIconComponent) {\n                this.eclIconComponent.baseDirective.class = this.eclIconComponent.baseDirective.class + ' ecl-site-header__icon';\n            }\n            if (!this.hasLink()) {\n                this.href = '#';\n                this.isOverlayExpanded = false;\n                this.ariaControls = this.ARIA_CONTROLS;\n            }\n        });\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n      }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, EventEmitter, HostBinding, HostListener, Input, Output, PLATFORM_ID, contentChild, forwardRef, inject, input } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href = '#';\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n      }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
             "selector": "div[eclSiteHeaderCustomActionTitle]",
             "providers": [],
             "hostDirectives": [],
@@ -27466,7 +27458,7 @@
                     "defaultValue": "'custom-action-overlay-title'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 59,
+                    "line": 57,
                     "type": "string",
                     "decorators": []
                 },
@@ -27514,7 +27506,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 57,
+                    "line": 55,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -27530,7 +27522,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 57,
+                    "line": 55,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -35896,7 +35888,7 @@
                     }
                 }
             },
-            "templateData": "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>"
+            "templateData": "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>"
         },
         {
             "name": "EclCarouselItemComponent",

package/docs/properties.html

@@ -121,7 +121,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 21.2.0</li>
+            <b>Version</b> : 21.2.1-snapshot-1773486331544</li>
     </ul>
 
 

package/fesm2022/eui-ecl-components-ecl-carousel.mjs

@@ -743,7 +743,7 @@ class EclCarouselComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EclCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EclCarouselComponent, isStandalone: true, selector: "ecl-carousel", inputs: { ariaLabel: ["aria-label", "ariaLabel"], isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute], playInterval: ["playInterval", "playInterval", numberAttribute] }, outputs: { slide: "slide" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-roledescription": "this.ariaRoleDescription", "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "navigationButtons", predicate: ["currButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EclCarouselComponent, isStandalone: true, selector: "ecl-carousel", inputs: { ariaLabel: ["aria-label", "ariaLabel"], isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute], playInterval: ["playInterval", "playInterval", numberAttribute] }, outputs: { slide: "slide" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-roledescription": "this.ariaRoleDescription", "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "navigationButtons", predicate: ["currButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EclCarouselComponent, decorators: [{
             type: Component,
@@ -751,7 +751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         TranslateModule,
                         EclIconComponent,
                         EclCarouselItemComponent,
-                    ], template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"] }]
+                    ], template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{
                 type: HostBinding,
                 args: ['attr.aria-label']