import { Component, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../tld-common/services";
import * as i2 from "@angular/common";
import * as i3 from "@ngbracket/ngx-layout/flex";
import * as i4 from "@ngbracket/ngx-layout/extended";
import * as i5 from "../../tld-common/components/tld-lang-list/tld-lang-list.component";
import * as i6 from "../../tld-common/components/tld-loader/tld-loader.component";
import * as i7 from "../../tld-common/components/translate-button/translate-button.component";
import * as i8 from "../../tld-common/components/tld-list-menu/tld-list-menu.component";
import * as i9 from "@tilde-nlp/ngx-common";
import * as i10 from "@angular/material/tooltip";
import * as i11 from "@angular/material/button";
import * as i12 from "../tld-domain-list/tld-domain-list.component";
import * as i13 from "@ngx-translate/core";
export class TldTranslateSwitcherComponent {
    config;
    tldSystem;
    elRef;
    wrapper;
    fromLabel;
    sourceAside;
    toLabel;
    domainWrapper;
    vendorWrapper;
    collectionWrapper;
    onResize() {
        const pxPerLanguage = 110;
        const componentWidth = this.getElementRefWidth(this.wrapper);
        const parentWidth = this.elRef?.nativeElement?.parentElement.offsetWidth || 0;
        const wrapperWidth = this.useParentWidth ? parentWidth : componentWidth;
        const fromWidth = this.getElementRefWidth(this.fromLabel);
        const sourceAsideWidth = this.getElementRefWidth(this.sourceAside);
        const toWidth = this.getElementRefWidth(this.toLabel);
        const domainsWidth = this.getElementRefWidth(this.domainWrapper);
        const vendorsWidth = this.getElementRefWidth(this.vendorWrapper);
        const collectionsWidth = this.getElementRefWidth(this.collectionWrapper);
        // additional px to distract because swap lang button and dropdown icons.
        const extra = 100;
        const freeWidth = wrapperWidth - fromWidth - sourceAsideWidth - toWidth - domainsWidth - vendorsWidth - collectionsWidth - extra;
        const languageCount = Math.floor(freeWidth / 2 / pxPerLanguage);
        this.languageCountByScreenSize = languageCount > 0 ? languageCount : 1;
    }
    buttonDisabled = false;
    showTranslateButton = true;
    hideOnSmallScreens = true;
    disabled;
    hideLangMenuLabels = false;
    maxDisplayedLanguages;
    collections;
    showDomainsWithLanguageName;
    isCollectionsActivated;
    /** If this is set to true, component parent is checked for displayed language count. */
    useParentWidth;
    /** Show loader instead of translate button */
    loader;
    settings;
    onDomainChange = new EventEmitter();
    onActionClick = new EventEmitter();
    onSourceLanguageChange = new EventEmitter();
    onTargetLanguageChange = new EventEmitter();
    onLanguageSwap = new EventEmitter();
    onVendorChange = new EventEmitter();
    languageCountByScreenSize;
    system;
    get visibleLanguageCount() {
        if (this.languageCountByScreenSize && this.languageCountByScreenSize < this.maxDisplayedLanguages) {
            return this.languageCountByScreenSize;
        }
        return this.maxDisplayedLanguages;
    }
    get collectionsVisible() {
        return this.isCollectionsActivated
            && this.isTerminologySupported;
    }
    get showVendors() {
        return this.config?.coreConfig.showVendors && this.settings.vendors?.length > 0;
    }
    get showDomains() {
        const singleDomainAvailable = this.config?.textConfig.displaySingleAvailableDomain && this.settings?.domains?.domains?.length >= 1;
        return (this.config?.coreConfig.showDomains &&
            !this.showDomainsWithLanguageName &&
            ((this.settings?.domains?.domains?.length > 1 && this.settings?.source) ||
                singleDomainAvailable));
    }
    get isSwapLanguagesDisabled() {
        return this.disabled || !this.settings.swapActive;
    }
    get domainSide() { return this.config.coreConfig.domainSide; }
    get swapIconPosition() { return this.config.coreConfig.swapIconPosition; }
    destroy$ = new Subject();
    srcLangTestId = "src-lang-menu";
    trgLangTestId = "trg-lang-menu";
    isTerminologySupported;
    constructor(config, tldSystem, elRef) {
        this.config = config;
        this.tldSystem = tldSystem;
        this.elRef = elRef;
    }
    ngOnInit() {
        this.subscribeToActiveData();
    }
    ngAfterViewInit() {
        this.onResize();
    }
    ngOnDestroy() {
        this.destroy$.next(null);
        this.destroy$.complete();
    }
    actionClick() {
        this.onActionClick.emit();
    }
    domainChange(systemId) {
        this.onDomainChange.emit(systemId);
    }
    sourceLangChange(language) {
        this.onSourceLanguageChange.emit(language);
    }
    swapSourceAndTarget() {
        this.onLanguageSwap.emit();
    }
    targetLangChange(language) {
        this.onTargetLanguageChange.emit(language);
    }
    vendorChange(systemId) {
        this.onVendorChange.emit(systemId);
    }
    getElementRefWidth(element) {
        return element?.nativeElement.offsetWidth || 0;
    }
    subscribeToActiveData() {
        this.tldSystem.getActiveData()
            .pipe(takeUntil(this.destroy$))
            .subscribe((active) => {
            this.system = { systemId: active.systemId, sourceLanguageCode: active.sourceLang.lang, targetLanguageCode: active.targetLang.lang };
            if (!active) {
                this.isTerminologySupported = false;
                return;
            }
            this.isTerminologySupported = this.tldSystem.isTerminologySupported(active.system);
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TldTranslateSwitcherComponent, deps: [{ token: i1.TldTranslateConfigService }, { token: i1.TldTranslateSystemManagementService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TldTranslateSwitcherComponent, selector: "tld-translate-switcher", inputs: { buttonDisabled: "buttonDisabled", showTranslateButton: "showTranslateButton", hideOnSmallScreens: "hideOnSmallScreens", disabled: "disabled", hideLangMenuLabels: "hideLangMenuLabels", maxDisplayedLanguages: "maxDisplayedLanguages", collections: "collections", showDomainsWithLanguageName: "showDomainsWithLanguageName", isCollectionsActivated: "isCollectionsActivated", useParentWidth: "useParentWidth", loader: "loader", settings: "settings" }, outputs: { onDomainChange: "onDomainChange", onActionClick: "onActionClick", onSourceLanguageChange: "onSourceLanguageChange", onTargetLanguageChange: "onTargetLanguageChange", onLanguageSwap: "onLanguageSwap", onVendorChange: "onVendorChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "fromLabel", first: true, predicate: ["fromLabel"], descendants: true }, { propertyName: "sourceAside", first: true, predicate: ["sourceAside"], descendants: true }, { propertyName: "toLabel", first: true, predicate: ["toLabel"], descendants: true }, { propertyName: "domainWrapper", first: true, predicate: ["domainWrapper"], descendants: true }, { propertyName: "vendorWrapper", first: true, predicate: ["vendorWrapper"], descendants: true }, { propertyName: "collectionWrapper", first: true, predicate: ["collectionWrapper"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"tld-translate-switcher-container\" #wrapper\r\n  [ngClass.lt-md]=\"'tld-translate-switcher-container-tablet'\"\r\n  [ngClass.lt-sm]=\"'tld-translate-switcher-container-mobile'\"\r\n  [class.tld-switcher-with-collections]=\"collectionsVisible\">\r\n\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n    <div fxHide.lt-md *ngIf=\"!hideLangMenuLabels\" #fromLabel>{{'TLD_TRANSLATE.FROM' | translate}}</div>\r\n    <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n      <tld-lang-list id=\"tld-source-language-list\" [disabled]=\"disabled\" [testId]=\"srcLangTestId\"\r\n        [languages]=\"settings.sourceLanguageList\" (onLanguageChange)=\"sourceLangChange($event)\"\r\n        [selected]=\"settings.source\" [maxDisplayedLanguages]=\"visibleLanguageCount\"></tld-lang-list>\r\n      <ng-container *ngIf=\"domainSide==='src'\">\r\n        <ng-container *ngTemplateOutlet=\"domainTemplate;\">\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div #sourceAside *ngIf=\"swapIconPosition==='src'\">\r\n      <ng-container *ngTemplateOutlet=\"swapButtonTemplate;\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"swapIconPosition==='center'\">\r\n    <ng-container *ngTemplateOutlet=\"swapButtonTemplate;\"></ng-container>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutAlign.lt-sm=\"end center\">\r\n    <div fxHide.lt-md *ngIf=\"!hideLangMenuLabels\" #toLabel>{{'TLD_TRANSLATE.TO' | translate}}</div>\r\n    <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n      <tld-lang-list [disabled]=\"disabled\" id=\"tld-target-language-list\" [languages]=\"settings.targetLanguageList\"\r\n        (onLanguageChange)=\"targetLangChange($event)\" [selected]=\"settings.target\"\r\n        [maxDisplayedLanguages]=\"visibleLanguageCount\" [testId]=\"trgLangTestId\" (onDomainChange)=\"domainChange($event)\"\r\n        [showDomainsWithLanguageName]=\"showDomainsWithLanguageName\">\r\n        <ng-container *ngIf=\"domainSide==='trg'\">\r\n          <ng-container *ngTemplateOutlet=\"domainTemplate;\">\r\n          </ng-container>\r\n        </ng-container>\r\n        <div class=\"tld-translate-vendor-selection\" fxLayoutAlign=\"center center\" *ngIf=\"showVendors\" #vendorWrapper>\r\n          <tld-list-menu (selectionChange)=\"domainChange($event)\" [list]=\"settings.vendors\" [titleKey]=\"'title'\"\r\n            [valueKey]=\"'systemId'\" testId=\"tld-vendor-list\" [disabled]=\"disabled\" [showContent]=\"false\"\r\n            [ariaLabel]=\"'TLD_TRANSLATE.VENDORS_ARIA_LABEL' | translate\" [selectedValue]=\"settings.systemId\">\r\n          </tld-list-menu>\r\n        </div>\r\n      </tld-lang-list>\r\n    </div>\r\n    <div fxLayout=\"row\" fxLayoutGap.gt-xs=\"16px\">\r\n      <div *ngIf=\"collectionsVisible\" #collectionWrapper>\r\n        <lib-terminology [system]=\"system\" [disabled]=\"buttonDisabled\"></lib-terminology>\r\n      </div>\r\n      <tld-loader *ngIf=\"loader\" fxHide.lt-sm></tld-loader>\r\n      <tld-translate-button [enablePulseAnimation]=\"true\" *ngIf=\"showTranslateButton && !loader\" class=\"switcher-translate-button\"\r\n        [fxHide.lt-sm]=\"hideOnSmallScreens\" [disabled]=\"buttonDisabled\"></tld-translate-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #swapButtonTemplate>\r\n  <button [disabled]=\"isSwapLanguagesDisabled\" class=\"swap-languages-button\" mat-icon-button\r\n    (click)=\"swapSourceAndTarget()\" aria-label=\"swap languages\" color=\"primary\"\r\n    matTooltip=\"{{'TOOLTIPS.SWAP_LANGUAGES' | translate}}\">\r\n    <span class=\"material-icons\" aria-hidden=\"false\"\r\n      [attr.aria-label]=\"'ARIA_LABELS.SWAP_LANGUAGES' | translate\">swap_horiz</span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #domainTemplate>\r\n  <div class=\"tld-translate-domain-selection\" fxLayoutAlign=\"center center\" *ngIf=\"showDomains\" #domainWrapper>\r\n    <tld-domain-list fxLayoutAlign=\"center center\" (selectionChange)=\"domainChange($event)\"\r\n      [list]=\"settings.domains.domains\" [selected]=\"settings.domains.active\" [selected]=\"settings.domains.active\"\r\n      [disabled]=\"disabled\"></tld-domain-list>\r\n  </div>\r\n</ng-template>\r\n", styles: [".tld-translate-switcher-container:not(.tld-translate-switcher-container-tablet,.tld-translate-switcher-container-mobile) tld-lang-list{margin:0 10px}.tld-translate-switcher-container-mobile :host ::ng-deep button{padding:0!important}.swap-icon{color:#5a6672}.switcher-translate-button{min-width:100px}mat-select{min-width:75px;max-width:125px}.swap-languages-button[disabled]{cursor:not-allowed}.tld-translate-domain-selection,tld-translate-vendor-selection{height:100%}tld-loader{margin:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.TldLangListComponent, selector: "tld-lang-list", inputs: ["disabled", "pxPerLanguage", "languages", "testId", "selected", "maxDisplayedLanguages", "showDomainsWithLanguageName"], outputs: ["onLanguageChange", "onDomainChange"] }, { kind: "component", type: i6.TldLoaderComponent, selector: "tld-loader" }, { kind: "component", type: i7.TldTranslateButtonComponent, selector: "tld-translate-button", inputs: ["disabled", "enablePulseAnimation"], outputs: ["clicked"] }, { kind: "component", type: i8.TldListMenuComponent, selector: "tld-list-menu", inputs: ["titleKey", "list", "showContent", "selectedValue", "disabled", "ariaLabel", "valueKey", "testId"], outputs: ["selectionChange"] }, { kind: "component", type: i9.TerminologyComponent, selector: "lib-terminology", inputs: ["selectedCollectionId", "system", "disabled", "storeSelectedInLocalStorage", "setSelectedFromLocalStorage", "showMenuIconOnMobile"], outputs: ["glossarySelectEvent", "menuToggleEvent"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.TldDomainListComponent, selector: "tld-domain-list", inputs: ["list", "selected", "disabled"], outputs: ["selectionChange"] }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TldTranslateSwitcherComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tld-translate-switcher', template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"tld-translate-switcher-container\" #wrapper\r\n  [ngClass.lt-md]=\"'tld-translate-switcher-container-tablet'\"\r\n  [ngClass.lt-sm]=\"'tld-translate-switcher-container-mobile'\"\r\n  [class.tld-switcher-with-collections]=\"collectionsVisible\">\r\n\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n    <div fxHide.lt-md *ngIf=\"!hideLangMenuLabels\" #fromLabel>{{'TLD_TRANSLATE.FROM' | translate}}</div>\r\n    <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n      <tld-lang-list id=\"tld-source-language-list\" [disabled]=\"disabled\" [testId]=\"srcLangTestId\"\r\n        [languages]=\"settings.sourceLanguageList\" (onLanguageChange)=\"sourceLangChange($event)\"\r\n        [selected]=\"settings.source\" [maxDisplayedLanguages]=\"visibleLanguageCount\"></tld-lang-list>\r\n      <ng-container *ngIf=\"domainSide==='src'\">\r\n        <ng-container *ngTemplateOutlet=\"domainTemplate;\">\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div #sourceAside *ngIf=\"swapIconPosition==='src'\">\r\n      <ng-container *ngTemplateOutlet=\"swapButtonTemplate;\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"swapIconPosition==='center'\">\r\n    <ng-container *ngTemplateOutlet=\"swapButtonTemplate;\"></ng-container>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutAlign.lt-sm=\"end center\">\r\n    <div fxHide.lt-md *ngIf=\"!hideLangMenuLabels\" #toLabel>{{'TLD_TRANSLATE.TO' | translate}}</div>\r\n    <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n      <tld-lang-list [disabled]=\"disabled\" id=\"tld-target-language-list\" [languages]=\"settings.targetLanguageList\"\r\n        (onLanguageChange)=\"targetLangChange($event)\" [selected]=\"settings.target\"\r\n        [maxDisplayedLanguages]=\"visibleLanguageCount\" [testId]=\"trgLangTestId\" (onDomainChange)=\"domainChange($event)\"\r\n        [showDomainsWithLanguageName]=\"showDomainsWithLanguageName\">\r\n        <ng-container *ngIf=\"domainSide==='trg'\">\r\n          <ng-container *ngTemplateOutlet=\"domainTemplate;\">\r\n          </ng-container>\r\n        </ng-container>\r\n        <div class=\"tld-translate-vendor-selection\" fxLayoutAlign=\"center center\" *ngIf=\"showVendors\" #vendorWrapper>\r\n          <tld-list-menu (selectionChange)=\"domainChange($event)\" [list]=\"settings.vendors\" [titleKey]=\"'title'\"\r\n            [valueKey]=\"'systemId'\" testId=\"tld-vendor-list\" [disabled]=\"disabled\" [showContent]=\"false\"\r\n            [ariaLabel]=\"'TLD_TRANSLATE.VENDORS_ARIA_LABEL' | translate\" [selectedValue]=\"settings.systemId\">\r\n          </tld-list-menu>\r\n        </div>\r\n      </tld-lang-list>\r\n    </div>\r\n    <div fxLayout=\"row\" fxLayoutGap.gt-xs=\"16px\">\r\n      <div *ngIf=\"collectionsVisible\" #collectionWrapper>\r\n        <lib-terminology [system]=\"system\" [disabled]=\"buttonDisabled\"></lib-terminology>\r\n      </div>\r\n      <tld-loader *ngIf=\"loader\" fxHide.lt-sm></tld-loader>\r\n      <tld-translate-button [enablePulseAnimation]=\"true\" *ngIf=\"showTranslateButton && !loader\" class=\"switcher-translate-button\"\r\n        [fxHide.lt-sm]=\"hideOnSmallScreens\" [disabled]=\"buttonDisabled\"></tld-translate-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #swapButtonTemplate>\r\n  <button [disabled]=\"isSwapLanguagesDisabled\" class=\"swap-languages-button\" mat-icon-button\r\n    (click)=\"swapSourceAndTarget()\" aria-label=\"swap languages\" color=\"primary\"\r\n    matTooltip=\"{{'TOOLTIPS.SWAP_LANGUAGES' | translate}}\">\r\n    <span class=\"material-icons\" aria-hidden=\"false\"\r\n      [attr.aria-label]=\"'ARIA_LABELS.SWAP_LANGUAGES' | translate\">swap_horiz</span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #domainTemplate>\r\n  <div class=\"tld-translate-domain-selection\" fxLayoutAlign=\"center center\" *ngIf=\"showDomains\" #domainWrapper>\r\n    <tld-domain-list fxLayoutAlign=\"center center\" (selectionChange)=\"domainChange($event)\"\r\n      [list]=\"settings.domains.domains\" [selected]=\"settings.domains.active\" [selected]=\"settings.domains.active\"\r\n      [disabled]=\"disabled\"></tld-domain-list>\r\n  </div>\r\n</ng-template>\r\n", styles: [".tld-translate-switcher-container:not(.tld-translate-switcher-container-tablet,.tld-translate-switcher-container-mobile) tld-lang-list{margin:0 10px}.tld-translate-switcher-container-mobile :host ::ng-deep button{padding:0!important}.swap-icon{color:#5a6672}.switcher-translate-button{min-width:100px}mat-select{min-width:75px;max-width:125px}.swap-languages-button[disabled]{cursor:not-allowed}.tld-translate-domain-selection,tld-translate-vendor-selection{height:100%}tld-loader{margin:auto}\n"] }]
        }], ctorParameters: () => [{ type: i1.TldTranslateConfigService }, { type: i1.TldTranslateSystemManagementService }, { type: i0.ElementRef }], propDecorators: { wrapper: [{
                type: ViewChild,
                args: ["wrapper"]
            }], fromLabel: [{
                type: ViewChild,
                args: ["fromLabel"]
            }], sourceAside: [{
                type: ViewChild,
                args: ["sourceAside"]
            }], toLabel: [{
                type: ViewChild,
                args: ["toLabel"]
            }], domainWrapper: [{
                type: ViewChild,
                args: ["domainWrapper"]
            }], vendorWrapper: [{
                type: ViewChild,
                args: ["vendorWrapper"]
            }], collectionWrapper: [{
                type: ViewChild,
                args: ["collectionWrapper"]
            }], onResize: [{
                type: HostListener,
                args: ['window:resize']
            }], buttonDisabled: [{
                type: Input
            }], showTranslateButton: [{
                type: Input
            }], hideOnSmallScreens: [{
                type: Input
            }], disabled: [{
                type: Input
            }], hideLangMenuLabels: [{
                type: Input
            }], maxDisplayedLanguages: [{
                type: Input
            }], collections: [{
                type: Input
            }], showDomainsWithLanguageName: [{
                type: Input
            }], isCollectionsActivated: [{
                type: Input
            }], useParentWidth: [{
                type: Input
            }], loader: [{
                type: Input
            }], settings: [{
                type: Input
            }], onDomainChange: [{
                type: Output
            }], onActionClick: [{
                type: Output
            }], onSourceLanguageChange: [{
                type: Output
            }], onTargetLanguageChange: [{
                type: Output
            }], onLanguageSwap: [{
                type: Output
            }], onVendorChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 