@eui/ecl 15.0.0-next.19 → 15.0.0-next.20

package/fesm2020/eui-ecl.mjs

@@ -8,8 +8,8 @@ import { __decorate } from 'tslib';
 import { coerceBoolean, coerceElement, coerceArray, coerceNumber, DefaultConfig, EuiPagination } from '@eui/base';
 import * as i2$1 from '@eui/core';
 import { GLOBAL_CONFIG_TOKEN } from '@eui/core';
-import { Subject, takeUntil as takeUntil$1, delay, fromEvent, of } from 'rxjs';
-import { takeUntil, mergeWith } from 'rxjs/operators';
+import { Subject, takeUntil, delay, fromEvent, of } from 'rxjs';
+import { takeUntil as takeUntil$1, mergeWith } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2$2 from '@angular/router';
@@ -548,8 +548,13 @@ class EclDefaultLanguageService {
         this.i18nService = i18nService;
         this.currentLanguage$ = new Subject();
         this.FALLBACK_LANGUAGE = { code: 'en', label: 'English' };
+        this.destroy$ = new Subject();
         this.handleActiveLanguageChangeState();
     }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
     getCurrentLanguage() {
         return this.currentLanguage;
     }
@@ -774,7 +779,7 @@ class EclDefaultLanguageService {
         ];
     }
     handleActiveLanguageChangeState() {
-        this.i18nService.getState().subscribe(state => {
+        this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe(state => {
             this.currentLanguage = this.getLanguageByCode(state.activeLang) || this.FALLBACK_LANGUAGE;
             this.currentLanguage$.next(this.currentLanguage);
         });
@@ -888,7 +893,7 @@ class EclLanguageListComponent extends ECLBaseDirective {
                     item.isActive = true;
                 }
                 item.itemClick
-                    .pipe(takeUntil(this.destroy$))
+                    .pipe(takeUntil$1(this.destroy$))
                     .subscribe(() => {
                     this.eclLanguageListItems.forEach(it => {
                         it.isActive = false;
@@ -1420,13 +1425,13 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         if (this.eclLoginComponent && this.eclSearchComponent) {
             this.eclLoginComponent
                 .loginBoxToggle
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.eclSearchComponent.isSearchBoxActive = false;
             });
             this.eclSearchComponent
                 .searchToggle
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.eclLoginComponent.isLoginBoxActive = false;
             });
@@ -1434,7 +1439,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         if (this.eclLanguageComponent) {
             this.eclLanguageComponent
                 .languageClick
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
             });
@@ -1454,7 +1459,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
     handlei18nEvents() {
         this.languageCode = this.getEULanguageCode(this.translateService.currentLang);
         this.translateService.onLangChange
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((langChangeEvent) => {
             this.languageCode = this.getEULanguageCode(langChangeEvent.lang);
         });
@@ -1516,13 +1521,13 @@ class EclSiteHeaderComponentBase extends ECLBaseDirective {
         if (this.eclLoginComponent && this.eclSearchComponent) {
             this.eclLoginComponent
                 .loginBoxToggle
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.eclSearchComponent.isSearchBoxActive = false;
             });
             this.eclSearchComponent
                 .searchToggle
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.eclLoginComponent.isLoginBoxActive = false;
             });
@@ -1530,7 +1535,7 @@ class EclSiteHeaderComponentBase extends ECLBaseDirective {
         if (this.eclLanguageComponent) {
             this.eclLanguageComponent
                 .languageClick
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
             });
@@ -1553,7 +1558,7 @@ class EclSiteHeaderComponentBase extends ECLBaseDirective {
     handlei18nEvents() {
         this.languageCode = this.getEULanguageCode(this.translateService.currentLang);
         this.translateService.onLangChange
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((langChangeEvent) => {
             this.languageCode = this.getEULanguageCode(langChangeEvent.lang);
         });
@@ -2708,24 +2713,24 @@ class EclAppComponent extends ECLBaseDirective {
         this.cd.detectChanges();
     }
     handleActiveLanguageChangeState() {
-        this.eclLanguageService.currentLanguage$.subscribe(lang => {
+        this.eclLanguageService.currentLanguage$.pipe(takeUntil$1(this.destroy$)).subscribe(lang => {
             this.syncLanguageDataWithUI(lang);
             this.hideLanguageListUI();
         });
     }
     handleSiteHeaderUIEvents() {
         if (this.eclSiteHeader && this.eclSiteHeader.eclLanguageComponent) {
-            this.eclSiteHeader.eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.eclSiteHeader.eclLanguageComponent.languageClick.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
                 this.showLanguageListUI();
             });
         }
     }
     handleLanguageListUIEvents() {
-        this.eclLanguageList.close.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.eclLanguageList.close.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
             this.hideLanguageListUI();
             this.languageDismiss.next(new EclAppLanguageDismissEvent());
         });
-        this.eclLanguageList.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+        this.eclLanguageList.languageSelected.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
             this.eclLanguageService.updateCurrentLanguage(evt.language);
             this.languageDismiss.next(new EclAppLanguageDismissEvent(evt.language));
             this.cd.detectChanges();
@@ -2806,17 +2811,17 @@ class EclAppComponentBase {
     }
     handleSiteHeaderUIEvents() {
         if (this.eclSiteHeader && this.eclSiteHeader.eclLanguageComponent) {
-            this.eclSiteHeader.eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.eclSiteHeader.eclLanguageComponent.languageClick.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
                 this.showLanguageListUI();
             });
         }
     }
     handleLanguageListUIEvents() {
-        this.eclLanguageList.close.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.eclLanguageList.close.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
             this.hideLanguageListUI();
             this.languageDismiss.next(new EclAppLanguageDismissEvent());
         });
-        this.eclLanguageList.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+        this.eclLanguageList.languageSelected.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
             const lang = evt.language;
             this.i18nService.updateState({
                 activeLang: lang.code
@@ -3137,7 +3142,7 @@ class EclBreadcrumbComponentBase extends ECLBaseDirective {
     }
     ngOnInit() {
         this.translate.stream('ecl.breadcrumb.YOU-ARE-HERE')
-            .pipe(takeUntil$1(this.destroy$)).subscribe(text => {
+            .pipe(takeUntil(this.destroy$)).subscribe(text => {
             this.ariaLabel = text;
         });
     }
@@ -3625,7 +3630,7 @@ class EclBreadcrumbComponent extends ECLBaseDirective {
     }
     ngOnInit() {
         this.translate.stream('ecl.breadcrumb.YOU-ARE-HERE')
-            .pipe(takeUntil$1(this.destroy$)).subscribe(text => {
+            .pipe(takeUntil(this.destroy$)).subscribe(text => {
             this.ariaLabel = text;
         });
     }
@@ -4102,7 +4107,7 @@ class EclCategoryFilterComponent extends ECLBaseDirective {
     }
     connectCategoryfilterItemEvents(item) {
         item.itemSelect
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((evt) => { this.onItemSelected(evt); });
     }
     onItemSelected(evt) {
@@ -5132,7 +5137,7 @@ class EclDatePickerDirective extends ECLBaseDirective {
     }
     handlei18nEvents() {
         this.translateService.onLangChange
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((langChangeEvent) => {
             this.initPikaday();
         });
@@ -5764,7 +5769,7 @@ class EclFileUploadDirective extends ECLBaseDirective {
         let uploadButtonLabelKey = this.geti18nUploadButtonLabelKey();
         this.translate
             .stream(uploadButtonLabelKey)
-            .pipe(takeUntil(this.destroy$)).subscribe((translation) => {
+            .pipe(takeUntil$1(this.destroy$)).subscribe((translation) => {
             if (this.buttonEl) {
                 this.buttonEl.textContent = translation;
             }
@@ -6405,7 +6410,7 @@ class EclGalleryComponent extends ECLBaseDirective {
         this.itemsCount = this.galleryItems.length;
         this.galleryItems.forEach(item => {
             item.itemClick
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntil$1(this.destroy$))
                 .subscribe(_ => {
                 this.isDialogVisible = true;
                 this.item = item;
@@ -6497,7 +6502,7 @@ class EclGalleryComponent extends ECLBaseDirective {
     }
     observeBreakpointChanges() {
         this.cdkBreakpointObserver.observe([Breakpoints.Handset, Breakpoints.Tablet])
-            .pipe(takeUntil(this.destroy$), delay(this.BREAKPOINT_CHANGES_TIMEOUT))
+            .pipe(takeUntil$1(this.destroy$), delay(this.BREAKPOINT_CHANGES_TIMEOUT))
             .subscribe(result => {
             this.isMobile = result.matches;
             this.hideItems();
@@ -6858,10 +6863,10 @@ class EclStickyContainerComponent extends ECLBaseDirective {
             !this.isEnabled ? 'ecl-sticky-container--disabled' : ''
         ].join(' ').trim();
     }
-    top() {
+    get top() {
         return this.marginTop || null;
     }
-    bottom() {
+    get bottom() {
         return this.marginBottom || null;
     }
 }
@@ -6938,14 +6943,14 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     handleNavigationItemsScroll() {
         const scrollableContainer = window;
         const sectionElementIds = this.eclNavigationLinkItems.map(item => item.sectionId);
-        fromEvent(scrollableContainer, 'scroll').pipe(takeUntil(this.destroy$)).subscribe((event) => {
+        fromEvent(scrollableContainer, 'scroll').pipe(takeUntil$1(this.destroy$)).subscribe((event) => {
             const sectionElements = sectionElementIds.map(id => document.querySelector(`#${id}`));
             this.handleNavigationLinksHighlight(sectionElements);
         });
     }
     handleNavigationItemsClick() {
         this.eclNavigationLinkItems.forEach(item => {
-            item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            item.itemClick.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
                 this.selectNavigationItem(this.eclNavigationLinkItems, item.sectionElement);
                 if (item.sectionElement) {
                     item.sectionElement.scrollIntoView();
@@ -6992,12 +6997,16 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclInpageNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclInpageNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclInpageNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container>\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclInpageNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclInpageNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container>\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
+            args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
         }], propDecorators: { eclTitle: [{
                 type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
             }], sectionEnter: [{
                 type: Output
             }], eclNavigationLinkItems: [{
@@ -7523,7 +7532,7 @@ class EclMenuMegaComponent extends ECLBaseDirective {
         this.destroy$.unsubscribe();
     }
     createContentChildrenMenuObservable() {
-        return of(this.eclMenuMegaItems).pipe(mergeWith(this.eclMenuMegaItems.changes), takeUntil(this.destroy$));
+        return of(this.eclMenuMegaItems).pipe(mergeWith(this.eclMenuMegaItems.changes), takeUntil$1(this.destroy$));
     }
     onMenuItemChanges() {
         this.diff = this.differ.diff(this.eclMenuMegaItems);
@@ -7540,7 +7549,7 @@ class EclMenuMegaComponent extends ECLBaseDirective {
     }
     connectMenuItemEvents(item) {
         item.menuItemSelect
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => {
             this.onMenuItemSelected(item, evt);
         });
@@ -7643,7 +7652,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
     ngAfterContentInit() {
         if (this.submenu) {
             this.submenu.menuItemSelect
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntil$1(this.destroy$))
                 .subscribe((it) => {
                 this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));
             });
@@ -7824,7 +7833,7 @@ class EclMenuComponent extends ECLBaseDirective {
         return this.eclRootMenuItems.some(item => item.isExpanded);
     }
     createRootMenuItemsChangesObservable() {
-        return of(this.eclRootMenuItems).pipe(mergeWith(this.eclRootMenuItems.changes), takeUntil(this.destroy$));
+        return of(this.eclRootMenuItems).pipe(mergeWith(this.eclRootMenuItems.changes), takeUntil$1(this.destroy$));
     }
     onMenuItemChanges() {
         this.diff = this.differ.diff(this.eclRootMenuItems);
@@ -7841,19 +7850,19 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     connectMenuItemEvents(item) {
         item.menuItemSelect
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemSelected(evt); });
         item.menuItemHover
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemHovered(evt); });
         item.menuItemHoverOut
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemHoveredOut(evt); });
         item.menuMegaItemSelect
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onMenuMegaItemSelected(item, evt); });
         item.menuItemFocus
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemFocused(item, evt); });
     }
     onRootMenuItemFocused(item, evt) {
@@ -7976,7 +7985,7 @@ class EclMenuComponent extends ECLBaseDirective {
     observeRootMenuItemsChanges() {
         this.diff = this.differ.diff(this.eclRootMenuItems);
         this.createRootMenuItemsChangesObservable()
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(this.onMenuItemChanges.bind(this));
     }
     observeSwipeGestures() {
@@ -7985,7 +7994,7 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     observeBreakpointChanges() {
         this.cdkBreakpointObserver.observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(result => {
             this.isMobileBreakpoint = result.matches;
         });
@@ -8379,7 +8388,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         }
     }
     onOptionsChange() {
-        this.eclOptionItems.forEach(i => i.changes.pipe(takeUntil$1(this.destroy$)).subscribe(e => {
+        this.eclOptionItems.forEach(i => i.changes.pipe(takeUntil(this.destroy$)).subscribe(e => {
             setTimeout(() => {
                 this.multiselectWrapper.removeChild(this.multiDropdown);
                 this.multiDropdown.remove();
@@ -8621,7 +8630,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
     handleTranslations() {
         this.translate
             .stream('ecl.multiselect.SELECT-ALL')
-            .pipe(takeUntil$1(this.destroy$)).subscribe((translation) => {
+            .pipe(takeUntil(this.destroy$)).subscribe((translation) => {
             if (this.checkboxLabel) {
                 this.checkboxLabel.textContent = translation;
             }
@@ -12420,7 +12429,7 @@ class EclTableDirective extends ECLBaseDirective {
         const diff = this.differ.diff(this.eclTableHeaders);
         if (diff) {
             diff.forEachAddedItem(change => {
-                change.item.sort.pipe(takeUntil(this.destroy$))
+                change.item.sort.pipe(takeUntil$1(this.destroy$))
                     .subscribe((evt) => {
                     this.sort.emit(evt);
                 });
@@ -12472,7 +12481,7 @@ class EclTableHeadDirective extends ECLBaseDirective {
         const diff = this.differ.diff(this.eclTableHeaders);
         if (diff) {
             diff.forEachAddedItem(change => {
-                change.item.sort.pipe(takeUntil(this.destroy$))
+                change.item.sort.pipe(takeUntil$1(this.destroy$))
                     .subscribe((evt) => {
                     this.eclTableHeaders.forEach(th => {
                         th.removeAriaSort();
@@ -12842,11 +12851,11 @@ class EclTabsComponent extends ECLBaseDirective {
     observeTabsChanges() {
         this.diff = this.differ.diff(this.tabs);
         this.createTabsChangesObservable()
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(this.onTabsChanges.bind(this));
     }
     createTabsChangesObservable() {
-        return of(this.tabs).pipe(mergeWith(this.tabs.changes), takeUntil(this.destroy$));
+        return of(this.tabs).pipe(mergeWith(this.tabs.changes), takeUntil$1(this.destroy$));
     }
     onTabsChanges() {
         this.diff = this.differ.diff(this.tabs);
@@ -12863,7 +12872,7 @@ class EclTabsComponent extends ECLBaseDirective {
     }
     connectTabEvents(tab) {
         tab.select
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(() => {
             this.deactivateAllTabs(this.tabs.toArray());
             this.activateTab(tab);
@@ -13169,7 +13178,7 @@ class EclTimelineItemComponent extends ECLBaseDirective {
     ngAfterContentInit() {
         if (this.timelineItemToggler) {
             this.timelineItemToggler.toggle
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntil$1(this.destroy$))
                 .subscribe(() => {
                 this.handleToggler();
             });
@@ -13248,7 +13257,7 @@ class EclTimelineComponent extends ECLBaseDirective {
         this.timelineItems
             .filter(item => item.isToggler)
             .forEach(it => {
-            it.toggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            it.toggle.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
                 if (this.timelineItems && !evt.defaultPrevented) {
                     this.timelineItems
                         .filter(item => item.toggleGroup === evt.toggleGroup)