@eui/ecl 17.3.0 → 18.0.0-next.1

package/docs/components/EclCarouselComponent.html

@@ -208,7 +208,6 @@
                         <ul class="index-list">
                             <li>
                                     <span class="modifier"></span>
-                                    <span class="modifier"></span>
                                 <a href="#carouselContainerElement" >carouselContainerElement</a>
                             </li>
                             <li>
@@ -217,15 +216,7 @@
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
-                                <a href="#isDesktopBreakpoint" >isDesktopBreakpoint</a>
-                            </li>
-                            <li>
-                                    <span class="modifier">Public</span>
-                                <a href="#isLargeDesktopBreakpoint" >isLargeDesktopBreakpoint</a>
-                            </li>
-                            <li>
-                                    <span class="modifier">Public</span>
-                                <a href="#isMobileBreakpoint" >isMobileBreakpoint</a>
+                                <a href="#isButtonNavVisible" >isButtonNavVisible</a>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
@@ -239,10 +230,6 @@
                                     <span class="modifier">Public</span>
                                 <a href="#isRtl" >isRtl</a>
                             </li>
-                            <li>
-                                    <span class="modifier">Public</span>
-                                <a href="#isTabletBreakpoint" >isTabletBreakpoint</a>
-                            </li>
                             <li>
                                     <span class="modifier"></span>
                                 <a href="#lastHiddenItem" >lastHiddenItem</a>
@@ -251,6 +238,10 @@
                                     <span class="modifier"></span>
                                 <a href="#navigationButtons" >navigationButtons</a>
                             </li>
+                            <li>
+                                    <span class="modifier"></span>
+                                <a href="#nextButton" >nextButton</a>
+                            </li>
                             <li>
                                     <span class="modifier"></span>
                                 <a href="#pauseButton" >pauseButton</a>
@@ -269,7 +260,6 @@
                             </li>
                             <li>
                                     <span class="modifier"></span>
-                                    <span class="modifier"></span>
                                 <a href="#slidesContainer" >slidesContainer</a>
                             </li>
                             <li>
@@ -372,6 +362,12 @@
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                <a href="#aria-label" >aria-label</a>
+                            </li>
+                            <li>
+                                <a href="#ariaRoleDescription" >ariaRoleDescription</a>
+                            </li>
                             <li>
                                 <a href="#isAutoplay" >isAutoplay</a>
                             </li>
@@ -522,6 +518,48 @@
 
     <section data-compodoc="block-inputs">
     <h3 id="inputs">Inputs</h3>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="aria-label"></a>
+                        <b>aria-label</b>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>string | null</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;Carousel description here&#x27;</code>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="ariaRoleDescription"></a>
+                        <b>ariaRoleDescription</b>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>string | null</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;carousel&#x27;</code>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
         <table class="table table-sm table-bordered">
             <tbody>
                 <tr>
@@ -532,7 +570,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>boolean | any</code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
 
                     </td>
                 </tr>
@@ -553,7 +591,7 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>number | any</code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                     </td>
                 </tr>
@@ -1584,7 +1622,6 @@
                     <a name="carouselContainerElement"></a>
                     <span class="name">
                             <span class="modifier"></span>
-                            <span class="modifier"></span>
                         <span ><b>carouselContainerElement</b></span>
                         <a href="#carouselContainerElement"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -1592,7 +1629,7 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>HTMLElement</code>
+                        <i>Type : </i>    <code>ElementRef</code>
 
                     </td>
                 </tr>
@@ -1601,7 +1638,7 @@
                         <b>Decorators : </b>
                         <br />
                         <code>
-                            @coerceElement()<br />@ViewChild(&#x27;carouselContainer&#x27;)<br />
+                            @ViewChild(&#x27;carouselContainer&#x27;)<br />
                         </code>
                     </td>
                 </tr>
@@ -1644,53 +1681,11 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="isDesktopBreakpoint"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>isDesktopBreakpoint</b></span>
-                        <a href="#isDesktopBreakpoint"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
-                    </td>
-                </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="isLargeDesktopBreakpoint"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>isLargeDesktopBreakpoint</b></span>
-                        <a href="#isLargeDesktopBreakpoint"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
-                    </td>
-                </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="isMobileBreakpoint"></a>
+                    <a name="isButtonNavVisible"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
-                        <span ><b>isMobileBreakpoint</b></span>
-                        <a href="#isMobileBreakpoint"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>isButtonNavVisible</b></span>
+                        <a href="#isButtonNavVisible"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -1770,17 +1765,27 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="isTabletBreakpoint"></a>
+                    <a name="lastHiddenItem"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>isTabletBreakpoint</b></span>
-                        <a href="#isTabletBreakpoint"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier"></span>
+                        <span ><b>lastHiddenItem</b></span>
+                        <a href="#lastHiddenItem"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
+                        <i>Type : </i>        <code><a href="../components/EclCarouselItemComponent.html" target="_self" >EclCarouselItemComponent</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <b>Decorators : </b>
+                        <br />
+                        <code>
+                            @ViewChild(&#x27;lastHiddenItem&#x27;)<br />
+                        </code>
                     </td>
                 </tr>
 
@@ -1791,17 +1796,17 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="lastHiddenItem"></a>
+                    <a name="navigationButtons"></a>
                     <span class="name">
                             <span class="modifier"></span>
-                        <span ><b>lastHiddenItem</b></span>
-                        <a href="#lastHiddenItem"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>navigationButtons</b></span>
+                        <a href="#navigationButtons"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../components/EclCarouselItemComponent.html" target="_self" >EclCarouselItemComponent</a></code>
+                        <i>Type : </i>    <code>QueryList&lt;ElementRef&gt;</code>
 
                     </td>
                 </tr>
@@ -1810,7 +1815,7 @@
                         <b>Decorators : </b>
                         <br />
                         <code>
-                            @ViewChild(&#x27;lastHiddenItem&#x27;)<br />
+                            @ViewChildren(&#x27;currButton&#x27;)<br />
                         </code>
                     </td>
                 </tr>
@@ -1822,17 +1827,17 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="navigationButtons"></a>
+                    <a name="nextButton"></a>
                     <span class="name">
                             <span class="modifier"></span>
-                        <span ><b>navigationButtons</b></span>
-                        <a href="#navigationButtons"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>nextButton</b></span>
+                        <a href="#nextButton"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>QueryList&lt;ElementRef&gt;</code>
+                        <i>Type : </i>    <code>ElementRef</code>
 
                     </td>
                 </tr>
@@ -1841,7 +1846,7 @@
                         <b>Decorators : </b>
                         <br />
                         <code>
-                            @ViewChildren(&#x27;currButton&#x27;)<br />
+                            @ViewChild(&#x27;nextButton&#x27;)<br />
                         </code>
                     </td>
                 </tr>
@@ -1980,7 +1985,6 @@
                     <a name="slidesContainer"></a>
                     <span class="name">
                             <span class="modifier"></span>
-                            <span class="modifier"></span>
                         <span ><b>slidesContainer</b></span>
                         <a href="#slidesContainer"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -1988,7 +1992,7 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>Element | any</code>
+                        <i>Type : </i>    <code>ElementRef</code>
 
                     </td>
                 </tr>
@@ -1997,7 +2001,7 @@
                         <b>Decorators : </b>
                         <br />
                         <code>
-                            @coerceElement()<br />@ViewChild(&#x27;slidesContainer&#x27;)<br />
+                            @ViewChild(&#x27;slidesContainer&#x27;)<br />
                         </code>
                     </td>
                 </tr>
@@ -2090,9 +2094,9 @@
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div #carouselContainer class="ecl-carousel__container" [class.ecl-carousel-container--padded]="isPadded()">    <div #slidesContainer        (keyup)="onFirstCarouselElementPress($event)"        class="ecl-carousel__slides"        [style.width.px]="getCarouselSlidesWidth()"        [style.left.px]="!isRtl ? getCarouselSlidesOffsetLeft() : null"        [style.right.px]="isRtl ? getCarouselSlidesOffsetRight() : null"        [style.transition-duration.s]="transitionDuration"        (mouseover)="onSlideHover()"        (mouseout)="onSlideHoverout()">        <ecl-carousel-item #firstHiddenItem *ngIf="hasControls()" [style.width.%]="slideWidth"></ecl-carousel-item>        <ng-content></ng-content>        <ecl-carousel-item #lastHiddenItem *ngIf="hasControls()" [style.width.%]="slideWidth"></ecl-carousel-item>    </div>    <button *ngIf="hasControls() && isLargeDesktopBreakpoint" class="ecl-carousel__prev" (click)="onPreviousSlideClick()">        <ecl-icon icon="corner-arrow" size="m" transform="rotate-270" isInverted class="ecl-carousel__icon-default"> </ecl-icon>        <span class="ecl-u-sr-only">{{ \'ecl.carousel.PREV-SLIDES\' | translate }}</span>    </button>    <button *ngIf="hasControls() && isLargeDesktopBreakpoint" class="ecl-carousel__next" (click)="onNextSlideClick()">        <ecl-icon icon="corner-arrow" size="m" transform="rotate-90" isInverted class="ecl-carousel__icon-default"> </ecl-icon>        <div class="ecl-u-sr-only">{{ \'ecl.carousel.NEXT-SLIDES\' | translate }}</div>    </button></div><div *ngIf="hasControls()" class="ecl-carousel__controls">    <div class="ecl-container">        <div class="ecl-carousel__autoplay">            <button                #playButton                class="ecl-carousel__play"                [style.display]="isPlaying ? \'none\' : \'\'"                (keydown)="onPlayKeyboardPress($event)"                (click)="onPlayClick()">                <ecl-icon icon="play" size="l" class="ecl-carousel__icon-default" isInverted> </ecl-icon>                <ecl-icon icon="play-filled" size="l" class="ecl-carousel__icon-active" isInverted> </ecl-icon>                <div class="ecl-u-sr-only">{{ \'ecl.carousel.AUTOPLAY\' | translate }}</div>            </button>            <button                #pauseButton                class="ecl-carousel__pause"                [style.display]="isPlaying ? \'\' : \'none\'"                (keydown)="onPlayKeyboardPress($event)"                (click)="onPauseClick()">                <ecl-icon icon="pause" size="l" class="ecl-carousel__icon-default" isInverted> </ecl-icon>                <ecl-icon icon="pause-filled" size="l" class="ecl-carousel__icon-active" isInverted> </ecl-icon>                <div class="ecl-u-sr-only">{{ \'ecl.carousel.PAUSE\' | translate }}</div>            </button>        </div>        <div class="ecl-carousel__navigation">            <button                *ngFor="let slide of slides; let i = index"                #currButton                [attr.aria-current]="i === getCurrentSlideIndex()"                class="ecl-carousel__navigation-item"                (click)="onSlideControlClick(slide)"                (keydown)="onNavBtnKeyboardPress($event, i)">                <span class="ecl-u-sr-only">{{ \'ecl.carousel.GO-TO-SLIDE\' | translate }} {{ i + 1 }}</span>            </button>        </div>        <button *ngIf="!isLargeDesktopBreakpoint" #prevButton class="ecl-carousel__prev" (click)="onPreviousSlideClick()">            <ecl-icon icon="corner-arrow" size="m" transform="rotate-270" isInverted class="ecl-carousel__icon-default"> </ecl-icon>            <span class="ecl-u-sr-only">{{ \'ecl.carousel.PREV-SLIDES\' | translate }}</span>        </button>        <div class="ecl-carousel__pagination">            <span class="ecl-carousel__current">{{ getCurrentSlideIndex() + 1 }}</span>            {{ \'ecl.common.OF\' | translate }}            <span class="ecl-carousel__max">{{ slides.length }}</span>        </div>        <button *ngIf="!isLargeDesktopBreakpoint" class="ecl-carousel__next" (click)="onNextSlideClick()">            <ecl-icon icon="corner-arrow" size="m" transform="rotate-90" isInverted class="ecl-carousel__icon-default"> </ecl-icon>            <div class="ecl-u-sr-only">{{ \'ecl.carousel.NEXT-SLIDES\' | translate }}</div>        </button>    </div></div></div>'
-    var COMPONENTS = [{'name': 'EclAccordionComponent', 'selector': 'ecl-accordion'},{'name': 'EclAccordionItemComponent', 'selector': 'ecl-accordion-item'},{'name': 'EclAppComponent', 'selector': 'ecl-app'},{'name': 'EclBannerComponent', 'selector': 'ecl-banner'},{'name': 'EclBlockquoteComponent', 'selector': '[eclBlockquote]'},{'name': 'EclBreadcrumbComponent', 'selector': 'ecl-breadcrumb'},{'name': 'EclBreadcrumbSegmentComponent', 'selector': 'ecl-breadcrumb-segment'},{'name': 'EclButtonComponent', 'selector': 'button[eclButton], button[ecl-button], a[eclButton]'},{'name': 'EclCardBodyComponent', 'selector': 'ecl-card-body'},{'name': 'EclCardComponent', 'selector': 'ecl-card'},{'name': 'EclCardImageComponent', 'selector': 'div[eclCardImage]'},{'name': 'EclCarouselComponent', 'selector': 'ecl-carousel'},{'name': 'EclCarouselItemComponent', 'selector': 'ecl-carousel-item'},{'name': 'EclCategoryFilterComponent', 'selector': 'ecl-category-filter'},{'name': 'EclCategoryFilterItemComponent', 'selector': 'ecl-category-filter-item'},{'name': 'EclCategoryFilterListComponent', 'selector': 'ecl-category-filter-list'},{'name': 'EclCheckboxHelpComponent', 'selector': '[eclCheckboxHelp]'},{'name': 'EclCheckboxLabelComponent', 'selector': 'label[eclCheckboxLabel]'},{'name': 'EclContentBlockComponent', 'selector': 'ecl-content-block'},{'name': 'EclContentItemComponent', 'selector': 'ecl-content-item'},{'name': 'EclDateBlockComponent', 'selector': 'time[eclDateBlock]'},{'name': 'EclDescriptionListDefinitionComponent', 'selector': '[eclDescriptionListDefinition]'},{'name': 'EclExpandableComponent', 'selector': 'ecl-expandable'},{'name': 'EclFactFiguresComponent', 'selector': 'ecl-fact-figures'},{'name': 'EclFactFiguresDescriptionComponent', 'selector': 'ecl-fact-figures-description'},{'name': 'EclFactFiguresItemComponent', 'selector': 'ecl-fact-figures-item'},{'name': 'EclFactFiguresTitleComponent', 'selector': 'ecl-fact-figures-title'},{'name': 'EclFactFiguresValueComponent', 'selector': 'ecl-fact-figures-value'},{'name': 'EclFactFiguresViewAllComponent', 'selector': 'ecl-fact-figures-view-all'},{'name': 'EclFeaturedComponent', 'selector': 'ecl-featured'},{'name': 'EclFeaturedItemComponent', 'selector': 'ecl-featured-item'},{'name': 'EclFeaturedItemDescriptionComponent', 'selector': 'ecl-featured-item-description'},{'name': 'EclFileComponent', 'selector': 'ecl-file'},{'name': 'EclFileItemComponent', 'selector': 'ecl-file-item'},{'name': 'EclFileItemsComponent', 'selector': 'ecl-file-items'},{'name': 'EclFileTaxonomyComponent', 'selector': 'ecl-file-taxonomy'},{'name': 'EclFormGroupComponent', 'selector': '[eclFormGroup], ecl-form-group'},{'name': 'EclFormLabelComponent', 'selector': '[eclFormLabel]'},{'name': 'EclGalleryComponent', 'selector': 'ecl-gallery'},{'name': 'EclGalleryFooterComponent', 'selector': 'ecl-gallery-footer'},{'name': 'EclGalleryItemComponent', 'selector': 'ecl-gallery-item'},{'name': 'EclIconComponent', 'selector': 'ecl-icon'},{'name': 'EclInpageNavigationComponent', 'selector': 'ecl-inpage-navigation'},{'name': 'EclInpageNavigationItemComponent', 'selector': 'ecl-inpage-navigation-item'},{'name': 'EclListIllustrationComponent', 'selector': 'ecl-list-illustration'},{'name': 'EclListIllustrationImageComponent', 'selector': 'div[eclListIllustrationImage]'},{'name': 'EclListIllustrationItemComponent', 'selector': 'ecl-list-illustration-item'},{'name': 'EclMediaContainerComponent', 'selector': 'ecl-media-container'},{'name': 'EclMenuComponent', 'selector': 'ecl-menu'},{'name': 'EclMenuItemComponent', 'selector': 'ecl-menu-item'},{'name': 'EclMenuMegaComponent', 'selector': 'ecl-menu-mega'},{'name': 'EclMenuMegaItemComponent', 'selector': 'ecl-menu-mega-item'},{'name': 'EclMessageComponent', 'selector': 'ecl-message'},{'name': 'EclModalBodyComponent', 'selector': '[eclModalBody]'},{'name': 'EclModalComponent', 'selector': 'dialog[eclModal]'},{'name': 'EclModalFooterComponent', 'selector': '[eclModalFooter]'},{'name': 'EclModalHeaderComponent', 'selector': '[eclModalHeader]'},{'name': 'EclMultiselectComponent', 'selector': 'select[eclMultiselect]'},{'name': 'EclMultiselectDropdownComponent', 'selector': 'div[eclMultiselectDropdown]'},{'name': 'EclMultiselectInputComponent', 'selector': 'div[eclMultiselectInput]'},{'name': 'EclMultiselectOptgroupComponent', 'selector': 'fieldset[eclMultiselectOptgroup]'},{'name': 'EclMultiselectOptionComponent', 'selector': 'div[eclMultiselectOption]'},{'name': 'EclNavigationListComponent', 'selector': 'ecl-navigation-list'},{'name': 'EclNavigationListImageComponent', 'selector': 'div[eclNavigationListImage]'},{'name': 'EclNavigationListItemComponent', 'selector': 'ecl-navigation-list-item'},{'name': 'EclNewsTickerComponent', 'selector': 'ecl-news-ticker'},{'name': 'EclNewsTickerItemComponent', 'selector': 'ecl-news-ticker-item'},{'name': 'EclPageHeaderComponent', 'selector': 'ecl-page-header'},{'name': 'EclPageHeaderDescriptionContainerComponent', 'selector': '[eclPageHeaderDescriptionContainer]'},{'name': 'EclPaginationComponent', 'selector': 'ecl-pagination'},{'name': 'EclPaginationItemComponent', 'selector': 'ecl-pagination-item'},{'name': 'EclPopoverComponent', 'selector': 'ecl-popover'},{'name': 'EclRadioHelpComponent', 'selector': '[eclRadioHelp]'},{'name': 'EclRadioLabelComponent', 'selector': '[eclRadioLabel]'},{'name': 'EclRangeValueComponent', 'selector': 'ecl-range-value'},{'name': 'EclRatingFieldComponent', 'selector': 'ecl-rating-field'},{'name': 'EclSearchFormComponent', 'selector': 'ecl-search-form'},{'name': 'EclSelectContainerComponent', 'selector': 'ecl-select-container'},{'name': 'EclSiteFooterComponent', 'selector': 'ecl-site-footer'},{'name': 'EclSiteFooterFixedContentECComponent', 'selector': 'ecl-site-footer-fixed-content-ec'},{'name': 'EclSiteFooterFixedContentEUComponent', 'selector': 'ecl-site-footer-fixed-content-eu'},{'name': 'EclSiteHeaderActionComponent', 'selector': 'ecl-site-header-action'},{'name': 'EclSiteHeaderBannerTopComponent', 'selector': 'ecl-site-header-banner-top'},{'name': 'EclSiteHeaderComponent', 'selector': 'ecl-site-header'},{'name': 'EclSiteHeaderEnvironmentComponent', 'selector': '[eclSiteHeaderEnvironment]'},{'name': 'EclSiteHeaderLanguageComponent', 'selector': 'ecl-site-header-language'},{'name': 'EclSiteHeaderLanguagePopoverComponent', 'selector': 'ecl-site-header-language-popover'},{'name': 'EclSiteHeaderLoginComponent', 'selector': 'ecl-site-header-login'},{'name': 'EclSiteHeaderMessageComponent', 'selector': 'ecl-site-header-message'},{'name': 'EclSiteHeaderSearchComponent', 'selector': 'ecl-site-header-search'},{'name': 'EclSocialMediaFollowComponent', 'selector': 'ecl-social-media-follow'},{'name': 'EclSocialMediaFollowItemComponent', 'selector': 'ecl-social-media-follow-item'},{'name': 'EclSocialMediaShareComponent', 'selector': 'ecl-social-media-share'},{'name': 'EclSocialMediaShareItemComponent', 'selector': 'ecl-social-media-share-item'},{'name': 'EclSpinnerComponent', 'selector': 'ecl-spinner'},{'name': 'EclStickyContainerComponent', 'selector': 'ecl-sticky-container'},{'name': 'EclTabComponent', 'selector': 'ecl-tab, li[eclTab]'},{'name': 'EclTabLabelComponent', 'selector': 'ecl-tab-label'},{'name': 'EclTableSortButtonComponent', 'selector': 'button[eclTableSortButton]'},{'name': 'EclTabMoreComponent', 'selector': 'ecl-tab-more'},{'name': 'EclTabsComponent', 'selector': 'nav[eclTabs], ecl-tabs'},{'name': 'EclTagComponent', 'selector': 'ecl-tag, [eclTag]'},{'name': 'EclTimelineComponent', 'selector': 'ecl-timeline'},{'name': 'EclTimelineItemComponent', 'selector': 'ecl-timeline-item'},{'name': 'EclTimelineItemTogglerComponent', 'selector': 'ecl-timeline-item-toggler'}];
-    var DIRECTIVES = [{'name': 'EclBannerCreditDirective', 'selector': '[eclBannerCredit]'},{'name': 'EclBannerDescriptionDirective', 'selector': '[eclBannerDescription]'},{'name': 'EclBannerDescriptionTextDirective', 'selector': '[eclBannerDescriptionText]'},{'name': 'EclBannerImageDirective', 'selector': 'img[eclBannerImage]'},{'name': 'EclBannerPictureDirective', 'selector': 'picture[eclBannerPicture]'},{'name': 'EclBannerTitleDirective', 'selector': '[eclBannerTitle]'},{'name': 'EclBannerTitleTextDirective', 'selector': '[eclBannerTitleText]'},{'name': 'ECLBaseDirective', 'selector': '[eclBase]'},{'name': 'EclBlockquoteImageDirective', 'selector': 'img[eclBlockquoteImage]'},{'name': 'EclBlockquotePictureDirective', 'selector': 'picture[eclBlockquotePicture]'},{'name': 'EclButtonLabelDirective', 'selector': '[eclButtonLabel]'},{'name': 'EclCardImageDirective', 'selector': 'img[eclCardImage]'},{'name': 'EclCardPictureDirective', 'selector': 'picture[eclCardPicture]'},{'name': 'EclCheckboxDirective', 'selector': '[eclCheckbox]'},{'name': 'EclCheckboxInputDirective', 'selector': 'input[eclCheckboxInput]'},{'name': 'ECLClickOutsideDirective', 'selector': '[eclClickOutside]'},{'name': 'EclContentBlockDescriptionDirective', 'selector': '[eclContentBlockDescription]'},{'name': 'EclContentBlockLabelDirective', 'selector': '[eclContentBlockLabel]'},{'name': 'EclContentBlockLabelsDirective', 'selector': '[eclContentBlockLabels]'},{'name': 'EclContentBlockLinkDirective', 'selector': '[eclContentBlockLink]'},{'name': 'EclContentBlockLinksContainerDirective', 'selector': '[eclContentBlockLinksContainer]'},{'name': 'EclContentBlockLinksDirective', 'selector': '[eclContentBlockLinks]'},{'name': 'EclContentBlockListContainerDirective', 'selector': '[eclContentBlockListContainer]'},{'name': 'EclContentBlockListDirective', 'selector': '[eclContentBlockList]'},{'name': 'EclContentBlockPrimaryMetaDirective', 'selector': '[eclContentBlockPrimaryMeta]'},{'name': 'EclContentBlockPrimaryMetasDirective', 'selector': '[eclContentBlockPrimaryMetas]'},{'name': 'EclContentBlockSecondaryMetaDirective', 'selector': '[eclContentBlockSecondaryMeta]'},{'name': 'EclContentBlockSecondaryMetaIconDirective', 'selector': '[eclContentBlockSecondaryMetaIcon]'},{'name': 'EclContentBlockSecondaryMetaLabelDirective', 'selector': '[eclContentBlockSecondaryMetaLabel]'},{'name': 'EclContentBlockSecondaryMetasDirective', 'selector': '[eclContentBlockSecondaryMetas]'},{'name': 'EclContentBlockTagDirective', 'selector': '[eclContentBlockTag]'},{'name': 'EclContentBlockTagsDirective', 'selector': '[eclContentBlockTags]'},{'name': 'EclContentBlockTitleDirective', 'selector': '[eclContentBlockTitle]'},{'name': 'EclContentItemImageDirective', 'selector': '[eclContentItemImage]'},{'name': 'EclContentItemPictureDirective', 'selector': '[eclContentItemPicture]'},{'name': 'EclDatePickerDirective', 'selector': 'input[eclDatePicker]'},{'name': 'EclDescriptionListDefinitionItemDirective', 'selector': '[eclDescriptionListDefinitionItem]'},{'name': 'EclDescriptionListDirective', 'selector': '[eclDescriptionList]'},{'name': 'EclDescriptionListTermDirective', 'selector': '[eclDescriptionListTerm]'},{'name': 'EclFeaturedItemLinkDirective', 'selector': '[eclFeaturedItemLink]'},{'name': 'EclFeedbackMessageDirective', 'selector': '[eclFeedbackMessage]'},{'name': 'EclFileDownloadDirective', 'selector': '[eclFileDownload]'},{'name': 'EclFileImageDirective', 'selector': 'img[eclFileImage]'},{'name': 'EclFilePictureDirective', 'selector': 'picture[eclFilePicture]'},{'name': 'EclFileUploadDirective', 'selector': '[eclFileUpload]'},{'name': 'EclGalleryMediaDirective', 'selector': '[eclGalleryMedia], [eclGalleryImage]'},{'name': 'EclGalleryPictureDirective', 'selector': 'picture[eclGalleryPicture]'},{'name': 'EclHelpBlockDirective', 'selector': '[eclHelpBlock]'},{'name': 'EclHiddenDirective', 'selector': '[eclHidden]'},{'name': 'EclLabelDirective', 'selector': '[eclLabel]'},{'name': 'EclLinkDirective', 'selector': '[eclLink]'},{'name': 'EclLinkLabelDirective', 'selector': '[eclLinkLabel]'},{'name': 'EclListIllustrationIconDirective', 'selector': '[eclListIllustrationIcon]'},{'name': 'EclListIllustrationImageDirective', 'selector': 'img[eclListIllustrationImage]'},{'name': 'EclListIllustrationPictureDirective', 'selector': 'picture[eclListIllustrationPicture]'},{'name': 'EclMediaContainerIframeDirective', 'selector': 'iframe[eclMediaContainerIframe]'},{'name': 'EclMediaContainerItemDirective', 'selector': '[eclMediaContainerItem], img[eclMediaContainerImage]'},{'name': 'EclMediaContainerPictureDirective', 'selector': 'picture[eclMediaContainerPicture]'},{'name': 'EclMessageTitleDirective', 'selector': '[eclMessageTitle]'},{'name': 'EclModalBodyFixedContentDirective', 'selector': '[eclModalBodyFixedContent]'},{'name': 'EclModalCloseDirective', 'selector': '[eclModalClose]'},{'name': 'EclModalTriggerDirective', 'selector': '[eclModalTriggerFor]'},{'name': 'EclMultiselectOptionDirective', 'selector': 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]'},{'name': 'EclNavigationListImageDirective', 'selector': 'img[eclNavigationListImage]'},{'name': 'EclNavigationListPictureDirective', 'selector': 'picture[eclNavigationListPicture]'},{'name': 'EclOrderedListDirective', 'selector': '[eclOrderedList]'},{'name': 'EclOrderedListItemDirective', 'selector': '[eclOrderedListItem]'},{'name': 'EclPageHeaderBackgroundImageDirective', 'selector': '[eclPageHeaderBackgroundImage]'},{'name': 'EclPageHeaderBackgroundPictureDirective', 'selector': '[eclPageHeaderBackgroundPicture]'},{'name': 'EclPageHeaderDescriptionDirective', 'selector': '[eclPageHeaderDescription]'},{'name': 'EclPageHeaderDescriptionPictureDirective', 'selector': '[eclPageHeaderDescriptionPicture]'},{'name': 'EclPageHeaderDescriptionThumbnailDirective', 'selector': '[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage] '},{'name': 'EclPageHeaderMetaDirective', 'selector': '[eclPageHeaderMeta]'},{'name': 'EclPageHeaderMetaItemDirective', 'selector': '[eclPageHeaderMetaItem]'},{'name': 'EclPageHeaderTitleDirective', 'selector': '[eclPageHeaderTitle]'},{'name': 'EclPopoverContentDirective', 'selector': '[eclPopoverContent]'},{'name': 'EclPopoverItemDirective', 'selector': '[eclPopoverItem]'},{'name': 'EclPopoverLinkDirective', 'selector': '[eclPopoverLink]'},{'name': 'EclPopoverListDirective', 'selector': '[eclPopoverList]'},{'name': 'EclPopoverToggleDirective', 'selector': '[eclPopoverToggle]'},{'name': 'EclRadioDirective', 'selector': '[eclRadio]'},{'name': 'EclRadioInputDirective', 'selector': 'input[eclRadioInput]'},{'name': 'EclRangeDirective', 'selector': 'input[eclRange]'},{'name': 'EclSelectDirective', 'selector': 'select[eclSelect]'},{'name': 'EclSiteFooterColumnDirective', 'selector': '[eclSiteFooterColumn]'},{'name': 'EclSiteFooterContentDirective', 'selector': '[eclSiteFooterContent]'},{'name': 'EclSiteFooterDescriptionDirective', 'selector': '[eclSiteFooterDescription]'},{'name': 'EclSiteFooterLinkDirective', 'selector': '[eclSiteFooterLink]'},{'name': 'EclSiteFooterListDirective', 'selector': '[eclSiteFooterList]'},{'name': 'EclSiteFooterListItemDirective', 'selector': '[eclSiteFooterListItem]'},{'name': 'EclSiteFooterLogoDirective', 'selector': '[eclSiteFooterLogo]'},{'name': 'EclSiteFooterLogoImageDesktopDirective', 'selector': '[eclSiteFooterLogoImageDesktop]'},{'name': 'EclSiteFooterLogoImageDirective', 'selector': 'img[eclSiteFooterLogoImage]'},{'name': 'EclSiteFooterLogoItemDirective', 'selector': '[eclSiteFooterLogoItem]'},{'name': 'EclSiteFooterLogoLinkDirective', 'selector': '[eclSiteFooterLogoLink]'},{'name': 'EclSiteFooterLogoListDirective', 'selector': '[eclSiteFooterLogoList]'},{'name': 'EclSiteFooterPictureDirective', 'selector': 'picture[eclSiteFooterPicture]'},{'name': 'EclSiteFooterRowDirective', 'selector': '[eclSiteFooterRow]'},{'name': 'EclSiteFooterSectionDirective', 'selector': '[eclSiteFooterSection]'},{'name': 'EclSiteFooterTitleDirective', 'selector': '[eclSiteFooterTitle]'},{'name': 'EclSiteFooterTitleLinkDirective', 'selector': '[eclSiteFooterTitleLink]'},{'name': 'EclSiteHeaderCtaDirective', 'selector': '[eclSiteHeaderCta]'},{'name': 'EclSiteHeaderLoginDescriptionDirective', 'selector': '[eclSiteHeaderLoginDescription]'},{'name': 'EclSiteHeaderLoginSeparatorDirective', 'selector': '[eclSiteHeaderLoginSeparator]'},{'name': 'EclSocialMediaFollowLinkDirective', 'selector': '[eclSocialMediaFollowLink]'},{'name': 'EclSocialMediaShareLinkDirective', 'selector': '[eclSocialMediaShareLink]'},{'name': 'EclSpinnerLabelDirective', 'selector': '[eclSpinnerLabel]'},{'name': 'EclTableBodyDirective', 'selector': '[eclTableBody]'},{'name': 'EclTableCellDirective', 'selector': '[eclTableCell]'},{'name': 'EclTableCellGroupDirective', 'selector': '[eclTableCellGroup]'},{'name': 'EclTableDirective', 'selector': '[eclTable]'},{'name': 'EclTableHeadDirective', 'selector': '[eclTableHead]'},{'name': 'EclTableHeaderDirective', 'selector': '[eclTableHeader]'},{'name': 'EclTableResponsiveDirective', 'selector': '[eclTableResponsive]'},{'name': 'EclTableRowDirective', 'selector': '[eclTableRow]'},{'name': 'EclTextAreaDirective', 'selector': 'textarea[eclTextArea]'},{'name': 'EclTextInputDirective', 'selector': 'input[eclTextInput]'},{'name': 'EclTimelineItemLabelDirective', 'selector': '[eclTimelineItemLabel]'},{'name': 'EclTimelineItemTitleDirective', 'selector': '[eclTimelineItemTitle]'},{'name': 'EclUnorderedListDirective', 'selector': '[eclUnorderedList]'},{'name': 'EclUnorderedListItemDirective', 'selector': '[eclUnorderedListItem]'}];
+        var COMPONENT_TEMPLATE = '<div><div #carouselContainer class="ecl-carousel__container" [class.ecl-carousel-container--padded]="isPadded()">    <div #slidesContainer (keyup)="onFirstCarouselElementPress($event)" class="ecl-carousel__slides"        [style.width.px]="getCarouselSlidesWidth()" [style.left.px]="!isRtl ? getCarouselSlidesOffsetLeft() : null"        [style.right.px]="isRtl ? getCarouselSlidesOffsetRight() : null"        [style.transition-duration.s]="transitionDuration" (mouseover)="onSlideHover()" (mouseout)="onSlideHoverout()">        @if(hasControls()){        <ecl-carousel-item #firstHiddenItem [style.width.%]="slideWidth"></ecl-carousel-item>        }        <ng-content></ng-content>        @if(hasControls()){        <ecl-carousel-item #lastHiddenItem [style.width.%]="slideWidth"></ecl-carousel-item>        }    </div></div>@if(isButtonNavVisible) {<button #prevButton class="ecl-button ecl-button--ghost ecl-carousel__prev ecl-button--icon-only" type="button"    (click)="onPreviousSlideClick()">    <span class="ecl-button__container">        <span class="ecl-button__label">            {{ \'ecl.carousel.NEXT-SLIDES\' | translate }}        </span>        <ecl-icon icon="corner-arrow" size="m" transform="rotate-270" class="ecl-button__icon"> </ecl-icon>    </span></button>}@if(hasControls()){<div class="ecl-carousel__controls">    <div class="ecl-container">        <div class="ecl-carousel__autoplay">            <button #playButton class="ecl-button ecl-button--ghost ecl-carousel__play ecl-button--icon-only"                type="button" [style.display]="isPlaying ? \'none\' : \'flex\'" (keydown)="onPlayKeyboardPress($event)"                (click)="onPlayClick()">                <span class="ecl-button__container">                    <span class="ecl-button__label">                        {{ \'ecl.carousel.PLAY\' | translate }}                    </span>                    <ecl-icon icon="play-outline" size="m" class="ecl-button__icon ecl-carousel__icon-default">                    </ecl-icon>                </span>            </button>            <button #pauseButton class="ecl-button ecl-button--ghost ecl-carousel__pause ecl-button--icon-only"                type="button" [style.display]="isPlaying ? \'flex\' : \'none\'" (keydown)="onPlayKeyboardPress($event)"                (click)="onPauseClick()">                <span class="ecl-button__container">                    <span class="ecl-button__label">                        {{ \'ecl.carousel.PAUSE\' | translate }}                    </span>                    <ecl-icon icon="pause" size="m" class="ecl-button__icon ecl-carousel__icon-default"> </ecl-icon>                </span>            </button>        </div>        <div class="ecl-carousel__navigation">            @for (slide of slides; let i = $index; track slide) {            <button #currButton [attr.aria-current]="i === getCurrentSlideIndex()"                class="ecl-button ecl-button--ghost ecl-carousel__navigation-item" (click)="onSlideControlClick(slide)"                (keydown)="onNavBtnKeyboardPress($event, i)">                {{ i + 1 }}            </button>            }        </div>    </div></div>}@if(isButtonNavVisible) {<button #nextButton class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only" type="button"    (click)="onNextSlideClick()">    <span class="ecl-button__container">        <span class="ecl-button__label">            {{ \'ecl.carousel.NEXT-SLIDES\' | translate }}        </span>        <ecl-icon icon="corner-arrow" size="m" transform="rotate-90" class="ecl-button__icon"> </ecl-icon>    </span></button>}</div>'
+    var COMPONENTS = [{'name': 'EclAccordionComponent', 'selector': 'ecl-accordion'},{'name': 'EclAccordionItemComponent', 'selector': 'ecl-accordion-item'},{'name': 'EclAppComponent', 'selector': 'ecl-app'},{'name': 'EclBannerComponent', 'selector': 'ecl-banner'},{'name': 'EclBlockquoteComponent', 'selector': '[eclBlockquote]'},{'name': 'EclBreadcrumbComponent', 'selector': 'ecl-breadcrumb'},{'name': 'EclBreadcrumbSegmentComponent', 'selector': 'ecl-breadcrumb-segment'},{'name': 'EclButtonComponent', 'selector': 'button[eclButton], button[ecl-button], a[eclButton]'},{'name': 'EclCardBodyComponent', 'selector': 'ecl-card-body'},{'name': 'EclCardComponent', 'selector': 'ecl-card'},{'name': 'EclCarouselComponent', 'selector': 'ecl-carousel'},{'name': 'EclCarouselItemComponent', 'selector': 'ecl-carousel-item'},{'name': 'EclCategoryFilterComponent', 'selector': 'ecl-category-filter'},{'name': 'EclCategoryFilterItemComponent', 'selector': 'ecl-category-filter-item'},{'name': 'EclCategoryFilterListComponent', 'selector': 'ecl-category-filter-list'},{'name': 'EclCheckboxHelpComponent', 'selector': '[eclCheckboxHelp]'},{'name': 'EclCheckboxLabelComponent', 'selector': 'label[eclCheckboxLabel]'},{'name': 'EclContentBlockComponent', 'selector': 'ecl-content-block'},{'name': 'EclContentItemComponent', 'selector': 'ecl-content-item'},{'name': 'EclDateBlockComponent', 'selector': 'time[eclDateBlock]'},{'name': 'EclDescriptionListDefinitionComponent', 'selector': '[eclDescriptionListDefinition]'},{'name': 'EclExpandableComponent', 'selector': 'ecl-expandable'},{'name': 'EclFactFiguresComponent', 'selector': 'ecl-fact-figures'},{'name': 'EclFactFiguresDescriptionComponent', 'selector': 'ecl-fact-figures-description'},{'name': 'EclFactFiguresItemComponent', 'selector': 'ecl-fact-figures-item'},{'name': 'EclFactFiguresTitleComponent', 'selector': 'ecl-fact-figures-title'},{'name': 'EclFactFiguresValueComponent', 'selector': 'ecl-fact-figures-value'},{'name': 'EclFactFiguresViewAllComponent', 'selector': 'ecl-fact-figures-view-all'},{'name': 'EclFeaturedComponent', 'selector': 'ecl-featured'},{'name': 'EclFeaturedItemComponent', 'selector': 'ecl-featured-item'},{'name': 'EclFeaturedItemDescriptionComponent', 'selector': 'ecl-featured-item-description'},{'name': 'EclFileComponent', 'selector': 'ecl-file'},{'name': 'EclFileItemComponent', 'selector': 'ecl-file-item'},{'name': 'EclFileItemsComponent', 'selector': 'ecl-file-items'},{'name': 'EclFileTaxonomyComponent', 'selector': 'ecl-file-taxonomy'},{'name': 'EclFormGroupComponent', 'selector': '[eclFormGroup], ecl-form-group'},{'name': 'EclFormLabelComponent', 'selector': '[eclFormLabel]'},{'name': 'EclGalleryComponent', 'selector': 'ecl-gallery'},{'name': 'EclGalleryFooterComponent', 'selector': 'ecl-gallery-footer'},{'name': 'EclGalleryItemComponent', 'selector': 'ecl-gallery-item'},{'name': 'EclIconComponent', 'selector': 'ecl-icon'},{'name': 'EclInpageNavigationComponent', 'selector': 'ecl-inpage-navigation'},{'name': 'EclInpageNavigationItemComponent', 'selector': 'ecl-inpage-navigation-item'},{'name': 'EclListIllustrationComponent', 'selector': 'ecl-list-illustration'},{'name': 'EclListIllustrationImageComponent', 'selector': 'div[eclListIllustrationImage]'},{'name': 'EclListIllustrationItemComponent', 'selector': 'ecl-list-illustration-item'},{'name': 'EclMediaContainerComponent', 'selector': 'ecl-media-container'},{'name': 'EclMenuComponent', 'selector': 'ecl-menu'},{'name': 'EclMenuItemComponent', 'selector': 'ecl-menu-item'},{'name': 'EclMenuMegaComponent', 'selector': 'ecl-menu-mega'},{'name': 'EclMenuMegaItemComponent', 'selector': 'ecl-menu-mega-item'},{'name': 'EclMessageComponent', 'selector': 'ecl-message'},{'name': 'EclModalBodyComponent', 'selector': '[eclModalBody]'},{'name': 'EclModalComponent', 'selector': 'dialog[eclModal]'},{'name': 'EclModalFooterComponent', 'selector': '[eclModalFooter]'},{'name': 'EclModalHeaderComponent', 'selector': '[eclModalHeader]'},{'name': 'EclMultiselectComponent', 'selector': 'select[eclMultiselect]'},{'name': 'EclMultiselectDropdownComponent', 'selector': 'div[eclMultiselectDropdown]'},{'name': 'EclMultiselectInputComponent', 'selector': 'div[eclMultiselectInput]'},{'name': 'EclMultiselectOptgroupComponent', 'selector': 'fieldset[eclMultiselectOptgroup]'},{'name': 'EclMultiselectOptionComponent', 'selector': 'div[eclMultiselectOption]'},{'name': 'EclNavigationListComponent', 'selector': 'ecl-navigation-list'},{'name': 'EclNavigationListImageComponent', 'selector': 'div[eclNavigationListImage]'},{'name': 'EclNavigationListItemComponent', 'selector': 'ecl-navigation-list-item'},{'name': 'EclNewsTickerComponent', 'selector': 'ecl-news-ticker'},{'name': 'EclNewsTickerItemComponent', 'selector': 'ecl-news-ticker-item'},{'name': 'EclPageHeaderComponent', 'selector': 'ecl-page-header'},{'name': 'EclPageHeaderDescriptionContainerComponent', 'selector': '[eclPageHeaderDescriptionContainer]'},{'name': 'EclPaginationComponent', 'selector': 'ecl-pagination'},{'name': 'EclPaginationItemComponent', 'selector': 'ecl-pagination-item'},{'name': 'EclPopoverComponent', 'selector': 'ecl-popover'},{'name': 'EclRadioHelpComponent', 'selector': '[eclRadioHelp]'},{'name': 'EclRadioLabelComponent', 'selector': '[eclRadioLabel]'},{'name': 'EclRangeValueComponent', 'selector': 'ecl-range-value'},{'name': 'EclRatingFieldComponent', 'selector': 'ecl-rating-field'},{'name': 'EclSearchFormComponent', 'selector': 'ecl-search-form'},{'name': 'EclSelectContainerComponent', 'selector': 'ecl-select-container'},{'name': 'EclSiteFooterComponent', 'selector': 'ecl-site-footer'},{'name': 'EclSiteFooterFixedContentECComponent', 'selector': 'ecl-site-footer-fixed-content-ec'},{'name': 'EclSiteFooterFixedContentEUComponent', 'selector': 'ecl-site-footer-fixed-content-eu'},{'name': 'EclSiteHeaderActionComponent', 'selector': 'ecl-site-header-action'},{'name': 'EclSiteHeaderBannerTopComponent', 'selector': 'ecl-site-header-banner-top'},{'name': 'EclSiteHeaderComponent', 'selector': 'ecl-site-header'},{'name': 'EclSiteHeaderEnvironmentComponent', 'selector': '[eclSiteHeaderEnvironment]'},{'name': 'EclSiteHeaderLanguageComponent', 'selector': 'ecl-site-header-language'},{'name': 'EclSiteHeaderLanguagePopoverComponent', 'selector': 'ecl-site-header-language-popover'},{'name': 'EclSiteHeaderLoginComponent', 'selector': 'ecl-site-header-login'},{'name': 'EclSiteHeaderMessageComponent', 'selector': 'ecl-site-header-message'},{'name': 'EclSiteHeaderSearchComponent', 'selector': 'ecl-site-header-search'},{'name': 'EclSocialMediaFollowComponent', 'selector': 'ecl-social-media-follow'},{'name': 'EclSocialMediaFollowItemComponent', 'selector': 'ecl-social-media-follow-item'},{'name': 'EclSocialMediaShareComponent', 'selector': 'ecl-social-media-share'},{'name': 'EclSocialMediaShareItemComponent', 'selector': 'ecl-social-media-share-item'},{'name': 'EclSpinnerComponent', 'selector': 'ecl-spinner'},{'name': 'EclStickyContainerComponent', 'selector': 'ecl-sticky-container'},{'name': 'EclTabComponent', 'selector': 'ecl-tab, li[eclTab]'},{'name': 'EclTabLabelComponent', 'selector': 'ecl-tab-label'},{'name': 'EclTableSortButtonComponent', 'selector': 'button[eclTableSortButton]'},{'name': 'EclTabMoreComponent', 'selector': 'ecl-tab-more'},{'name': 'EclTabsComponent', 'selector': 'nav[eclTabs], ecl-tabs'},{'name': 'EclTagComponent', 'selector': 'ecl-tag, [eclTag]'},{'name': 'EclTimelineComponent', 'selector': 'ecl-timeline'},{'name': 'EclTimelineItemComponent', 'selector': 'ecl-timeline-item'},{'name': 'EclTimelineItemTogglerComponent', 'selector': 'ecl-timeline-item-toggler'}];
+    var DIRECTIVES = [{'name': 'EclBannerCreditDirective', 'selector': '[eclBannerCredit]'},{'name': 'EclBannerDescriptionDirective', 'selector': '[eclBannerDescription]'},{'name': 'EclBannerDescriptionTextDirective', 'selector': '[eclBannerDescriptionText]'},{'name': 'EclBannerImageDirective', 'selector': 'img[eclBannerImage]'},{'name': 'EclBannerPictureDirective', 'selector': 'picture[eclBannerPicture]'},{'name': 'EclBannerTitleDirective', 'selector': '[eclBannerTitle]'},{'name': 'EclBannerTitleTextDirective', 'selector': '[eclBannerTitleText]'},{'name': 'ECLBaseDirective', 'selector': '[eclBase]'},{'name': 'EclBlockquoteImageDirective', 'selector': 'img[eclBlockquoteImage]'},{'name': 'EclBlockquotePictureDirective', 'selector': 'picture[eclBlockquotePicture]'},{'name': 'EclButtonLabelDirective', 'selector': '[eclButtonLabel]'},{'name': 'EclCardImageDirective', 'selector': 'img[eclCardImage]'},{'name': 'EclCardPictureDirective', 'selector': 'picture[eclCardPicture]'},{'name': 'EclCheckboxDirective', 'selector': '[eclCheckbox]'},{'name': 'EclCheckboxInputDirective', 'selector': 'input[eclCheckboxInput]'},{'name': 'ECLClickOutsideDirective', 'selector': '[eclClickOutside]'},{'name': 'EclContentBlockDescriptionDirective', 'selector': '[eclContentBlockDescription]'},{'name': 'EclContentBlockLabelDirective', 'selector': '[eclContentBlockLabel]'},{'name': 'EclContentBlockLabelsDirective', 'selector': '[eclContentBlockLabels]'},{'name': 'EclContentBlockLinkDirective', 'selector': '[eclContentBlockLink]'},{'name': 'EclContentBlockLinksContainerDirective', 'selector': '[eclContentBlockLinksContainer]'},{'name': 'EclContentBlockLinksDirective', 'selector': '[eclContentBlockLinks]'},{'name': 'EclContentBlockListContainerDirective', 'selector': '[eclContentBlockListContainer]'},{'name': 'EclContentBlockListDirective', 'selector': '[eclContentBlockList]'},{'name': 'EclContentBlockPrimaryMetaDirective', 'selector': '[eclContentBlockPrimaryMeta]'},{'name': 'EclContentBlockPrimaryMetasDirective', 'selector': '[eclContentBlockPrimaryMetas]'},{'name': 'EclContentBlockSecondaryMetaDirective', 'selector': '[eclContentBlockSecondaryMeta]'},{'name': 'EclContentBlockSecondaryMetaIconDirective', 'selector': '[eclContentBlockSecondaryMetaIcon]'},{'name': 'EclContentBlockSecondaryMetaLabelDirective', 'selector': '[eclContentBlockSecondaryMetaLabel]'},{'name': 'EclContentBlockSecondaryMetasDirective', 'selector': '[eclContentBlockSecondaryMetas]'},{'name': 'EclContentBlockTagDirective', 'selector': '[eclContentBlockTag]'},{'name': 'EclContentBlockTagsDirective', 'selector': '[eclContentBlockTags]'},{'name': 'EclContentBlockTitleDirective', 'selector': '[eclContentBlockTitle]'},{'name': 'EclContentItemImageDirective', 'selector': '[eclContentItemImage]'},{'name': 'EclContentItemPictureDirective', 'selector': '[eclContentItemPicture]'},{'name': 'EclDatePickerDirective', 'selector': 'input[eclDatePicker]'},{'name': 'EclDescriptionListDefinitionItemDirective', 'selector': '[eclDescriptionListDefinitionItem]'},{'name': 'EclDescriptionListDefinitionListDirective', 'selector': '[eclDescriptionListDefinitionList]'},{'name': 'EclDescriptionListDirective', 'selector': '[eclDescriptionList]'},{'name': 'EclDescriptionListTermDirective', 'selector': '[eclDescriptionListTerm]'},{'name': 'EclFeaturedItemLinkDirective', 'selector': '[eclFeaturedItemLink]'},{'name': 'EclFeedbackMessageDirective', 'selector': '[eclFeedbackMessage]'},{'name': 'EclFileDownloadDirective', 'selector': '[eclFileDownload]'},{'name': 'EclFileImageDirective', 'selector': 'img[eclFileImage]'},{'name': 'EclFilePictureDirective', 'selector': 'picture[eclFilePicture]'},{'name': 'EclFileUploadDirective', 'selector': '[eclFileUpload]'},{'name': 'EclGalleryMediaDirective', 'selector': '[eclGalleryMedia], [eclGalleryImage]'},{'name': 'EclGalleryPictureDirective', 'selector': 'picture[eclGalleryPicture]'},{'name': 'EclHelpBlockDirective', 'selector': '[eclHelpBlock]'},{'name': 'EclHiddenDirective', 'selector': '[eclHidden]'},{'name': 'EclLabelDirective', 'selector': '[eclLabel]'},{'name': 'EclLinkDirective', 'selector': '[eclLink]'},{'name': 'EclLinkLabelDirective', 'selector': '[eclLinkLabel]'},{'name': 'EclListIllustrationIconDirective', 'selector': '[eclListIllustrationIcon]'},{'name': 'EclListIllustrationImageDirective', 'selector': 'img[eclListIllustrationImage]'},{'name': 'EclListIllustrationPictureDirective', 'selector': 'picture[eclListIllustrationPicture]'},{'name': 'EclMediaContainerIframeDirective', 'selector': 'iframe[eclMediaContainerIframe]'},{'name': 'EclMediaContainerItemDirective', 'selector': '[eclMediaContainerItem], img[eclMediaContainerImage]'},{'name': 'EclMediaContainerPictureDirective', 'selector': 'picture[eclMediaContainerPicture]'},{'name': 'EclMessageTitleDirective', 'selector': '[eclMessageTitle]'},{'name': 'EclModalBodyFixedContentDirective', 'selector': '[eclModalBodyFixedContent]'},{'name': 'EclModalCloseDirective', 'selector': '[eclModalClose]'},{'name': 'EclModalTriggerDirective', 'selector': '[eclModalTriggerFor]'},{'name': 'EclMultiselectOptionDirective', 'selector': 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]'},{'name': 'EclNavigationListImageDirective', 'selector': 'img[eclNavigationListImage]'},{'name': 'EclNavigationListPictureDirective', 'selector': 'picture[eclNavigationListPicture]'},{'name': 'EclOrderedListDirective', 'selector': '[eclOrderedList]'},{'name': 'EclOrderedListItemDirective', 'selector': '[eclOrderedListItem]'},{'name': 'EclPageHeaderBackgroundImageDirective', 'selector': '[eclPageHeaderBackgroundImage]'},{'name': 'EclPageHeaderBackgroundPictureDirective', 'selector': '[eclPageHeaderBackgroundPicture]'},{'name': 'EclPageHeaderDescriptionDirective', 'selector': '[eclPageHeaderDescription]'},{'name': 'EclPageHeaderDescriptionPictureDirective', 'selector': '[eclPageHeaderDescriptionPicture]'},{'name': 'EclPageHeaderDescriptionThumbnailDirective', 'selector': '[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage] '},{'name': 'EclPageHeaderMetaDirective', 'selector': '[eclPageHeaderMeta]'},{'name': 'EclPageHeaderMetaItemDirective', 'selector': '[eclPageHeaderMetaItem]'},{'name': 'EclPageHeaderTitleDirective', 'selector': '[eclPageHeaderTitle]'},{'name': 'EclPopoverContentDirective', 'selector': '[eclPopoverContent]'},{'name': 'EclPopoverItemDirective', 'selector': '[eclPopoverItem]'},{'name': 'EclPopoverLinkDirective', 'selector': '[eclPopoverLink]'},{'name': 'EclPopoverListDirective', 'selector': '[eclPopoverList]'},{'name': 'EclPopoverToggleDirective', 'selector': '[eclPopoverToggle]'},{'name': 'EclRadioDirective', 'selector': '[eclRadio]'},{'name': 'EclRadioInputDirective', 'selector': 'input[eclRadioInput]'},{'name': 'EclRangeDirective', 'selector': 'input[eclRange]'},{'name': 'EclSelectDirective', 'selector': 'select[eclSelect]'},{'name': 'EclSiteFooterColumnDirective', 'selector': '[eclSiteFooterColumn]'},{'name': 'EclSiteFooterContentDirective', 'selector': '[eclSiteFooterContent]'},{'name': 'EclSiteFooterDescriptionDirective', 'selector': '[eclSiteFooterDescription]'},{'name': 'EclSiteFooterLinkDirective', 'selector': '[eclSiteFooterLink]'},{'name': 'EclSiteFooterListDirective', 'selector': '[eclSiteFooterList]'},{'name': 'EclSiteFooterListItemDirective', 'selector': '[eclSiteFooterListItem]'},{'name': 'EclSiteFooterLogoDirective', 'selector': '[eclSiteFooterLogo]'},{'name': 'EclSiteFooterLogoImageDesktopDirective', 'selector': '[eclSiteFooterLogoImageDesktop]'},{'name': 'EclSiteFooterLogoImageDirective', 'selector': 'img[eclSiteFooterLogoImage]'},{'name': 'EclSiteFooterLogoItemDirective', 'selector': '[eclSiteFooterLogoItem]'},{'name': 'EclSiteFooterLogoLinkDirective', 'selector': '[eclSiteFooterLogoLink]'},{'name': 'EclSiteFooterLogoListDirective', 'selector': '[eclSiteFooterLogoList]'},{'name': 'EclSiteFooterPictureDirective', 'selector': 'picture[eclSiteFooterPicture]'},{'name': 'EclSiteFooterRowDirective', 'selector': '[eclSiteFooterRow]'},{'name': 'EclSiteFooterSectionDirective', 'selector': '[eclSiteFooterSection]'},{'name': 'EclSiteFooterTitleDirective', 'selector': '[eclSiteFooterTitle]'},{'name': 'EclSiteFooterTitleLinkDirective', 'selector': '[eclSiteFooterTitleLink]'},{'name': 'EclSiteHeaderCtaDirective', 'selector': '[eclSiteHeaderCta]'},{'name': 'EclSiteHeaderLoginDescriptionDirective', 'selector': '[eclSiteHeaderLoginDescription]'},{'name': 'EclSiteHeaderLoginSeparatorDirective', 'selector': '[eclSiteHeaderLoginSeparator]'},{'name': 'EclSocialMediaFollowLinkDirective', 'selector': '[eclSocialMediaFollowLink]'},{'name': 'EclSocialMediaShareLinkDirective', 'selector': '[eclSocialMediaShareLink]'},{'name': 'EclSpinnerLabelDirective', 'selector': '[eclSpinnerLabel]'},{'name': 'EclTableBodyDirective', 'selector': '[eclTableBody]'},{'name': 'EclTableCellDirective', 'selector': '[eclTableCell]'},{'name': 'EclTableCellGroupDirective', 'selector': '[eclTableCellGroup]'},{'name': 'EclTableDirective', 'selector': '[eclTable]'},{'name': 'EclTableHeadDirective', 'selector': '[eclTableHead]'},{'name': 'EclTableHeaderDirective', 'selector': '[eclTableHeader]'},{'name': 'EclTableResponsiveDirective', 'selector': '[eclTableResponsive]'},{'name': 'EclTableRowDirective', 'selector': '[eclTableRow]'},{'name': 'EclTextAreaDirective', 'selector': 'textarea[eclTextArea]'},{'name': 'EclTextInputDirective', 'selector': 'input[eclTextInput]'},{'name': 'EclTimelineItemLabelDirective', 'selector': '[eclTimelineItemLabel]'},{'name': 'EclTimelineItemTitleDirective', 'selector': '[eclTimelineItemTitle]'},{'name': 'EclUnorderedListDirective', 'selector': '[eclUnorderedList]'},{'name': 'EclUnorderedListItemDirective', 'selector': '[eclUnorderedListItem]'}];
     var ACTUAL_COMPONENT = {'name': 'EclCarouselComponent'};
 </script>
 <script src="../js/tree.js"></script>