@eui/ecl 16.0.0-next.14 → 16.0.0-next.16

package/fesm2022/eui-ecl.mjs

@@ -128,72 +128,74 @@ class EclDefaultLanguageService {
     }
     getAllLanguages() {
         return [
-            { code: 'ab', label: 'аҧсуа' },
             { code: 'aa', label: 'Afaraf' },
+            { code: 'ab', label: 'аҧсуа' },
+            { code: 'ae', label: 'avesta' },
             { code: 'af', label: 'Afrikaans' },
             { code: 'ak', label: 'Akan' },
-            { code: 'sq', label: 'Shqip' },
             { code: 'am', label: 'አማርኛ' },
-            { code: 'ar', label: 'العربية', isRtl: true },
             { code: 'an', label: 'Aragonés' },
-            { code: 'hy', label: 'Հայերեն' },
+            { code: 'ar', label: 'العربية', isRtl: true },
             { code: 'as', label: 'অসমীয়া' },
             { code: 'av', label: 'авар мацӀ, магӀарул мацӀ' },
-            { code: 'ae', label: 'avesta' },
             { code: 'ay', label: 'aymar aru' },
             { code: 'az', label: 'azərbaycan dili' },
-            { code: 'bm', label: 'bamanankan' },
             { code: 'ba', label: 'башҡорт теле' },
-            { code: 'eu', label: 'euskara, euskera' },
             { code: 'be', label: 'Беларуская' },
-            { code: 'bn', label: 'বাংলা' },
+            { code: 'bg', label: 'български език' },
             { code: 'bh', label: 'भोजपुरी' },
             { code: 'bi', label: 'Bislama' },
-            { code: 'bs', label: 'bosanski jezik' },
+            { code: 'bm', label: 'bamanankan' },
+            { code: 'bn', label: 'বাংলা' },
+            { code: 'bo', label: 'བོད་ཡིག' },
             { code: 'br', label: 'brezhoneg' },
-            { code: 'bg', label: 'български език' },
-            { code: 'my', label: 'ဗမာစာ' },
+            { code: 'bs', label: 'bosanski jezik' },
             { code: 'ca', label: 'Català' },
-            { code: 'ch', label: 'Chamoru' },
             { code: 'ce', label: 'нохчийн мотт' },
-            { code: 'ny', label: 'chiCheŵa, chinyanja' },
-            { code: 'zh', label: '中文 (Zhōngwén), 汉语, 漢語' },
-            { code: 'cv', label: 'чӑваш чӗлхи' },
-            { code: 'kw', label: 'Kernewek' },
+            { code: 'ch', label: 'Chamoru' },
             { code: 'co', label: 'corsu, lingua corsa' },
             { code: 'cr', label: 'ᓀᐦᐃᔭᐍᐏᐣ' },
-            { code: 'hr', label: 'hrvatski' },
             { code: 'cs', label: 'čeština' },
+            { code: 'cu', label: 'ѩзыкъ словѣньскъ' },
+            { code: 'cv', label: 'чӑваш чӗлхи' },
+            { code: 'cy', label: 'Cymraeg' },
             { code: 'da', label: 'dansk' },
+            { code: 'de', label: 'Deutsch' },
             { code: 'dv', label: 'ދިވެހި' },
-            { code: 'nl', label: 'Nederlands' },
+            { code: 'ee', label: 'Eʋegbe' },
+            { code: 'el', label: 'Ελληνικά' },
             { code: 'en', label: 'English' },
             { code: 'eo', label: 'Esperanto' },
+            { code: 'es', label: 'español' },
             { code: 'et', label: 'eesti' },
-            { code: 'ee', label: 'Eʋegbe' },
-            { code: 'fo', label: 'føroyskt' },
-            { code: 'fj', label: 'vosa Vakaviti' },
+            { code: 'eu', label: 'euskara, euskera' },
+            { code: 'fa', label: 'فارسی', isRtl: true },
+            { code: 'ff', label: 'Fulfulde, Pulaar, Pular' },
             { code: 'fi', label: 'suomi' },
+            { code: 'fj', label: 'vosa Vakaviti' },
+            { code: 'fo', label: 'føroyskt' },
             { code: 'fr', label: 'français' },
-            { code: 'ff', label: 'Fulfulde, Pulaar, Pular' },
+            { code: 'fy', label: 'Frysk' },
+            { code: 'ga', label: 'Gaeilge' },
+            { code: 'gd', label: 'Gàidhlig' },
             { code: 'gl', label: 'Galego' },
-            { code: 'ka', label: 'ქართული' },
-            { code: 'de', label: 'Deutsch' },
-            { code: 'el', label: 'Ελληνικά' },
             { code: 'gn', label: 'Avañeẽ' },
             { code: 'gu', label: 'ગુજરાતી' },
-            { code: 'ht', label: 'Kreyòl ayisyen' },
+            { code: 'gv', label: 'Gaelg, Gailck' },
             { code: 'ha', label: 'Hausa, هَوُسَ' },
             { code: 'he', label: 'עברית', isRtl: true },
-            { code: 'hz', label: 'Otjiherero' },
             { code: 'hi', label: 'हिन्दी, हिंदी' },
             { code: 'ho', label: 'Hiri Motu' },
+            { code: 'hr', label: 'hrvatski' },
+            { code: 'ht', label: 'Kreyòl ayisyen' },
             { code: 'hu', label: 'Magyar' },
+            { code: 'hy', label: 'Հայերեն' },
+            { code: 'hz', label: 'Otjiherero' },
             { code: 'ia', label: 'Interlingua' },
             { code: 'id', label: 'Bahasa Indonesia' },
             { code: 'ie', label: 'Originally called Occidental' },
-            { code: 'ga', label: 'Gaeilge' },
             { code: 'ig', label: 'Asụsụ Igbo' },
+            { code: 'ii', label: 'ꆈꌠ꒿ Nuosuhxop' },
             { code: 'ik', label: 'Iñupiaq, Iñupiatun' },
             { code: 'io', label: 'Ido' },
             { code: 'is', label: 'Íslenska' },
@@ -201,20 +203,21 @@ class EclDefaultLanguageService {
             { code: 'iu', label: 'ᐃᓄᒃᑎᑐᑦ' },
             { code: 'ja', label: '日本語' },
             { code: 'jv', label: 'basa Jawa' },
+            { code: 'ka', label: 'ქართული' },
+            { code: 'kg', label: 'KiKongo' },
+            { code: 'ki', label: 'Gĩkũyũ' },
+            { code: 'kj', label: 'Kuanyama' },
+            { code: 'kk', label: 'Қазақ тілі' },
             { code: 'kl', label: 'kalaallisut' },
+            { code: 'km', label: 'ភាសាខ្មែរ' },
             { code: 'kn', label: 'ಕನ್ನಡ' },
+            { code: 'ko', label: '한국어 (韓國語), 조선말 (朝鮮語)' },
             { code: 'kr', label: 'Kanuri' },
             { code: 'ks', label: 'कश्मीरी, كشميري‎' },
-            { code: 'kk', label: 'Қазақ тілі' },
-            { code: 'km', label: 'ភាសាខ្មែរ' },
-            { code: 'ki', label: 'Gĩkũyũ' },
-            { code: 'rw', label: 'Ikinyarwanda' },
-            { code: 'ky', label: 'кыргыз тили' },
-            { code: 'kv', label: 'коми кыв' },
-            { code: 'kg', label: 'KiKongo' },
-            { code: 'ko', label: '한국어 (韓國語), 조선말 (朝鮮語)' },
             { code: 'ku', label: 'Kurdî, كوردی‎', isRtl: true },
-            { code: 'kj', label: 'Kuanyama' },
+            { code: 'kv', label: 'коми кыв' },
+            { code: 'kw', label: 'Kernewek' },
+            { code: 'ky', label: 'кыргыз тили' },
             { code: 'la', label: 'latine' },
             { code: 'lb', label: 'Lëtzebuergesch' },
             { code: 'lg', label: 'Luganda' },
@@ -224,35 +227,34 @@ class EclDefaultLanguageService {
             { code: 'lt', label: 'lietuvių kalba' },
             { code: 'lu', label: 'Lëtzebuergesch' },
             { code: 'lv', label: 'latviešu valoda' },
-            { code: 'gv', label: 'Gaelg, Gailck' },
-            { code: 'mk', label: 'македонски јазик' },
             { code: 'mg', label: 'Malagasy fiteny' },
-            { code: 'ms', label: 'bahasa Melayu, بهاس ملايو‎' },
-            { code: 'ml', label: 'മലയാളം' },
-            { code: 'mt', label: 'Malti' },
-            { code: 'mi', label: 'te reo Māori' },
-            { code: 'mr', label: 'मराठी' },
             { code: 'mh', label: 'Kajin M̧ajeļ' },
+            { code: 'mi', label: 'te reo Māori' },
+            { code: 'mk', label: 'македонски јазик' },
+            { code: 'ml', label: 'മലയാളം' },
             { code: 'mn', label: 'монгол' },
+            { code: 'mr', label: 'मराठी' },
+            { code: 'ms', label: 'bahasa Melayu, بهاس ملايو‎' },
+            { code: 'mt', label: 'Malti' },
+            { code: 'my', label: 'ဗမာစာ' },
             { code: 'na', label: 'Ekakairũ Naoero' },
-            { code: 'nv', label: 'Diné bizaad, Dinékʼehǰí' },
             { code: 'nb', label: 'Norsk bokmål' },
             { code: 'nd', label: 'isiNdebele' },
             { code: 'ne', label: 'नेपाली' },
             { code: 'ng', label: 'Owambo' },
+            { code: 'nl', label: 'Nederlands' },
             { code: 'nn', label: 'Norsk nynorsk' },
             { code: 'no', label: 'Norsk' },
-            { code: 'ii', label: 'ꆈꌠ꒿ Nuosuhxop' },
             { code: 'nr', label: 'isiNdebele' },
+            { code: 'nv', label: 'Diné bizaad, Dinékʼehǰí' },
+            { code: 'ny', label: 'chiCheŵa, chinyanja' },
             { code: 'oc', label: 'Occitan' },
             { code: 'oj', label: 'ᐊᓂᔑᓈᐯᒧᐎᓐ' },
-            { code: 'cu', label: 'ѩзыкъ словѣньскъ' },
             { code: 'om', label: 'Afaan Oromoo' },
             { code: 'or', label: 'ଓଡ଼ିଆ' },
             { code: 'os', label: 'ирон æвзаг' },
             { code: 'pa', label: 'ਪੰਜਾਬੀ, پنجابی‎' },
             { code: 'pi', label: 'पाऴि' },
-            { code: 'fa', label: 'فارسی', isRtl: true },
             { code: 'pl', label: 'polski' },
             { code: 'ps', label: 'پښتو' },
             { code: 'pt', label: 'Português' },
@@ -261,31 +263,30 @@ class EclDefaultLanguageService {
             { code: 'rn', label: 'kiRundi' },
             { code: 'ro', label: 'română' },
             { code: 'ru', label: 'русский язык' },
+            { code: 'rw', label: 'Ikinyarwanda' },
             { code: 'sa', label: 'संस्कृतम्' },
             { code: 'sc', label: 'sardu' },
             { code: 'sd', label: 'सिन्धी, سنڌي، سندھی‎' },
             { code: 'se', label: 'Davvisámegiella' },
-            { code: 'sm', label: 'gagana faa Samoa' },
             { code: 'sg', label: 'yângâ tî sängö' },
-            { code: 'sr', label: 'српски језик' },
-            { code: 'gd', label: 'Gàidhlig' },
-            { code: 'sn', label: 'chiShona' },
             { code: 'si', label: 'සිංහල' },
             { code: 'sk', label: 'slovenčina' },
             { code: 'sl', label: 'slovenščina' },
+            { code: 'sm', label: 'gagana faa Samoa' },
+            { code: 'sn', label: 'chiShona' },
             { code: 'so', label: 'Soomaaliga, af Soomaali' },
+            { code: 'sq', label: 'Shqip' },
+            { code: 'sr', label: 'српски језик' },
+            { code: 'ss', label: 'SiSwati' },
             { code: 'st', label: 'Sesotho' },
-            { code: 'es', label: 'español' },
             { code: 'su', label: 'Basa Sunda' },
-            { code: 'sw', label: 'Kiswahili' },
-            { code: 'ss', label: 'SiSwati' },
             { code: 'sv', label: 'svenska' },
+            { code: 'sw', label: 'Kiswahili' },
             { code: 'ta', label: 'தமிழ்' },
             { code: 'te', label: 'తెలుగు' },
             { code: 'tg', label: 'тоҷикӣ, toğikī, تاجیکی‎' },
             { code: 'th', label: 'ไทย' },
             { code: 'ti', label: 'ትግርኛ' },
-            { code: 'bo', label: 'བོད་ཡིག' },
             { code: 'tk', label: 'Türkmen, Түркмен' },
             { code: 'tl', label: 'Wikang Tagalog' },
             { code: 'tn', label: 'Setswana' },
@@ -303,13 +304,12 @@ class EclDefaultLanguageService {
             { code: 'vi', label: 'Tiếng Việt' },
             { code: 'vo', label: 'Volapük' },
             { code: 'wa', label: 'Walon' },
-            { code: 'cy', label: 'Cymraeg' },
             { code: 'wo', label: 'Wollof' },
-            { code: 'fy', label: 'Frysk' },
             { code: 'xh', label: 'isiXhosa' },
             { code: 'yi', label: 'ייִדיש' },
             { code: 'yo', label: 'Yorùbá' },
-            { code: 'za', label: 'Saɯ cueŋƅ, Saw cuengh' }
+            { code: 'za', label: 'Saɯ cueŋƅ, Saw cuengh' },
+            { code: 'zh', label: '中文 (Zhōngwén), 汉语, 漢語' },
         ];
     }
     handleActiveLanguageChangeState() {
@@ -1464,11 +1464,11 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
                 .languageSelected
                 .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
-                this.languageCode = this.getEULanguageCode(evt.language?.code);
+                this.languageCode = evt.language?.code;
             });
         }
         if (this.eclLanguageComponent) {
-            this.languageCode = this.getEULanguageCode(this.eclLanguageComponent?.languageCode);
+            this.languageCode = this.eclLanguageComponent?.languageCode;
         }
     }
     ngOnDestroy() {
@@ -1482,21 +1482,18 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             evt.preventDefault();
         }
     }
-    getEULanguageCode(languageCode) {
-        if (!this.eclLanguageService.isEuLanguage(languageCode)) {
-            return 'en';
-        }
-        return languageCode;
+    getEULanguageCode() {
+        return this.eclLanguageService.getEULanguageOrFallback(this.languageCode).code;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderComponent, deps: [{ token: EclLanguageService }, { token: i2$1.TranslateService }, { token: EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderComponent, selector: "ecl-site-header", inputs: { logoUrl: "logoUrl", siteName: "siteName", languageCode: "languageCode" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__header\">\n    <div class=\"ecl-site-header__container ecl-container\">\n        <div #topContainer class=\"ecl-site-header__top\">\n            <a eclLink \n                variant=\"standalone\" \n                class=\"ecl-site-header__logo-link\"\n                href=\"https://ec.europa.eu/info/index_{{ languageCode }}\"\n                (click)=\"onECLogoClick($event)\" \n                [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n\n                <ng-content select=\"[eclSiteHeaderEnvironment]\"></ng-content>\n\n                <ng-container *ngIf=\"eclThemeService.isEC$ | async\">\n                    <img alt=\"European Commission logo\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/ec/logo/logo-ec--{{ languageCode }}.svg\"/>\n                </ng-container>\n\n                <ng-container *ngIf=\"eclThemeService.isEU$ | async\">\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-mobile\" \n                        src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ languageCode}}.svg\"/>\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ languageCode}}.svg\"/>\n                </ng-container>\n            </a>\n            <ng-content select=\"ecl-site-header-action\"></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-content select=\"ecl-site-header-message\"></ng-content>\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n\n<div *ngIf=\"siteName\" class=\"ecl-site-header__banner\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n        <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n    </div>\n</div>\n\n<ng-content select=\"ecl-menu\"></ng-content>\n\n<!-- @deprecated language list is replaced with site header language  -->\n<ng-content select=\"ecl-language-list\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderComponent, selector: "ecl-site-header", inputs: { logoUrl: "logoUrl", siteName: "siteName", languageCode: "languageCode" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__header\">\n    <div class=\"ecl-site-header__container ecl-container\">\n        <div #topContainer class=\"ecl-site-header__top\">\n            <a eclLink \n                variant=\"standalone\" \n                class=\"ecl-site-header__logo-link\"\n                href=\"https://ec.europa.eu/info/index_{{ getEULanguageCode() }}\"\n                (click)=\"onECLogoClick($event)\" \n                [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n\n                <ng-content select=\"[eclSiteHeaderEnvironment]\"></ng-content>\n\n                <ng-container *ngIf=\"eclThemeService.isEC$ | async\">\n                    <img alt=\"European Commission logo\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/ec/logo/logo-ec--{{  getEULanguageCode() }}.svg\"/>\n                </ng-container>\n\n                <ng-container *ngIf=\"eclThemeService.isEU$ | async\">\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-mobile\" \n                        src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ getEULanguageCode() }}.svg\"/>\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ getEULanguageCode() }}.svg\"/>\n                </ng-container>\n            </a>\n            <ng-content select=\"ecl-site-header-action\"></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-content select=\"ecl-site-header-message\"></ng-content>\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n\n<div *ngIf=\"siteName\" class=\"ecl-site-header__banner\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n        <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n    </div>\n</div>\n\n<ng-content select=\"ecl-menu\"></ng-content>\n\n<!-- @deprecated language list is replaced with site header language  -->\n<ng-content select=\"ecl-language-list\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     coerceElement
 ], EclSiteHeaderComponent.prototype, "topContainerElement", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header', template: "<div class=\"ecl-site-header__header\">\n    <div class=\"ecl-site-header__container ecl-container\">\n        <div #topContainer class=\"ecl-site-header__top\">\n            <a eclLink \n                variant=\"standalone\" \n                class=\"ecl-site-header__logo-link\"\n                href=\"https://ec.europa.eu/info/index_{{ languageCode }}\"\n                (click)=\"onECLogoClick($event)\" \n                [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n\n                <ng-content select=\"[eclSiteHeaderEnvironment]\"></ng-content>\n\n                <ng-container *ngIf=\"eclThemeService.isEC$ | async\">\n                    <img alt=\"European Commission logo\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/ec/logo/logo-ec--{{ languageCode }}.svg\"/>\n                </ng-container>\n\n                <ng-container *ngIf=\"eclThemeService.isEU$ | async\">\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-mobile\" \n                        src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ languageCode}}.svg\"/>\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ languageCode}}.svg\"/>\n                </ng-container>\n            </a>\n            <ng-content select=\"ecl-site-header-action\"></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-content select=\"ecl-site-header-message\"></ng-content>\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n\n<div *ngIf=\"siteName\" class=\"ecl-site-header__banner\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n        <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n    </div>\n</div>\n\n<ng-content select=\"ecl-menu\"></ng-content>\n\n<!-- @deprecated language list is replaced with site header language  -->\n<ng-content select=\"ecl-language-list\"></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-site-header', template: "<div class=\"ecl-site-header__header\">\n    <div class=\"ecl-site-header__container ecl-container\">\n        <div #topContainer class=\"ecl-site-header__top\">\n            <a eclLink \n                variant=\"standalone\" \n                class=\"ecl-site-header__logo-link\"\n                href=\"https://ec.europa.eu/info/index_{{ getEULanguageCode() }}\"\n                (click)=\"onECLogoClick($event)\" \n                [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n\n                <ng-content select=\"[eclSiteHeaderEnvironment]\"></ng-content>\n\n                <ng-container *ngIf=\"eclThemeService.isEC$ | async\">\n                    <img alt=\"European Commission logo\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/ec/logo/logo-ec--{{  getEULanguageCode() }}.svg\"/>\n                </ng-container>\n\n                <ng-container *ngIf=\"eclThemeService.isEU$ | async\">\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-mobile\" \n                        src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ getEULanguageCode() }}.svg\"/>\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ getEULanguageCode() }}.svg\"/>\n                </ng-container>\n            </a>\n            <ng-content select=\"ecl-site-header-action\"></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-content select=\"ecl-site-header-message\"></ng-content>\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n\n<div *ngIf=\"siteName\" class=\"ecl-site-header__banner\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n        <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n    </div>\n</div>\n\n<ng-content select=\"ecl-menu\"></ng-content>\n\n<!-- @deprecated language list is replaced with site header language  -->\n<ng-content select=\"ecl-language-list\"></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: EclLanguageService }, { type: i2$1.TranslateService }, { type: EclThemeService }]; }, propDecorators: { logoUrl: [{
                 type: Input
             }], cssClasses: [{
@@ -14699,8 +14696,10 @@ class EclTableHeaderDirective extends ECLBaseDirective {
     }
     initSortButtons() {
         if (this.eclSortable) {
-            const containerComponentRef = this.viewContainerRef.createComponent(EclTableSortButtonComponent);
-            this.el.nativeElement.appendChild(containerComponentRef.location.nativeElement);
+            setTimeout(() => {
+                const containerComponentRef = this.viewContainerRef.createComponent(EclTableSortButtonComponent);
+                this.el.nativeElement.appendChild(containerComponentRef.location.nativeElement);
+            });
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclTableHeaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }