import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { OpenedMenu } from '../models';
import { AUTO_LANGUAGE_DETECTION_KEY } from '../../../tld-common/models/auto-language-detection-key.const';
import { Subject, takeUntil } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../../../tld-common/services";
import * as i2 from "../services";
import * as i3 from "@angular/common";
import * as i4 from "@ngbracket/ngx-layout/extended";
import * as i5 from "@angular/material/expansion";
import * as i6 from "../system-picker-button/translation-system-picker-button.component";
import * as i7 from "@ngx-translate/core";
import * as i8 from "@tilde-nlp/ngx-common";
export class TranslationSystemPickerLanguageListComponent {
    systemManagementService;
    systemPickerService;
    config;
    expandableLanguagePanel;
    languages = [];
    activeCode;
    isMobile;
    showTitle;
    isSourceOpened;
    showFiltered;
    menuState;
    clicked = new EventEmitter();
    openedSourceState = OpenedMenu.SOURCE;
    languageAutoDetectionKey = AUTO_LANGUAGE_DETECTION_KEY;
    titleKey = 'SYSTEM_PICKER.ALL_LANGUAGES';
    // If languages are less than this number, languages will be displayed in single column.
    singleColumnLength = 10;
    get singleLanguageColumn() {
        return this.languages?.length < this.singleColumnLength;
    }
    get isAutoLanguageDetectionEnabled() {
        return this.config.textConfig.isAutoLanguageDetectionEnabled;
    }
    destroy = new Subject();
    constructor(systemManagementService, systemPickerService, config) {
        this.systemManagementService = systemManagementService;
        this.systemPickerService = systemPickerService;
        this.config = config;
    }
    ngOnInit() {
        this.systemManagementService
            .getActiveData()
            .pipe(takeUntil(this.destroy))
            .subscribe({
            next: () => {
                if (this.showFiltered) {
                    this.expandableLanguagePanel.close();
                }
            },
        });
    }
    ngOnDestroy() {
        this.destroy.next(null);
        this.destroy.complete();
    }
    languageClick(language) {
        if (!this.isSourceOpened && this.isMobile) {
            this.expandableLanguagePanel.close();
        }
        this.clicked.emit(language);
    }
    enableLanguageDetection() {
        this.systemManagementService.enableLanguageDetection();
        this.systemPickerService.closeOpened();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationSystemPickerLanguageListComponent, deps: [{ token: i1.TldTranslateSystemManagementService }, { token: i2.TranslationSystemPickerService }, { token: i1.TldTranslateConfigService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TranslationSystemPickerLanguageListComponent, selector: "tld-translation-system-picker-language-list", inputs: { languages: "languages", activeCode: "activeCode", isMobile: "isMobile", showTitle: "showTitle", isSourceOpened: "isSourceOpened", showFiltered: "showFiltered", menuState: "menuState" }, outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "expandableLanguagePanel", first: true, predicate: ["expandableLanguagePanel"], descendants: true }], ngImport: i0, template: "<div [class.single-column]=\"singleLanguageColumn\" class=\"translation-system-picker-wrapper\">\r\n\t<h1 class=\"text-m-semi-bold\" *ngIf=\"showTitle\">{{ titleKey | translate }}</h1>\r\n\r\n\t<div *ngIf=\"isAutoLanguageDetectionEnabled && menuState === openedSourceState\" class=\"language-group\">\r\n\t\t<translation-system-picker-button class=\"detect-language-btn\" [active]=\"activeCode === languageAutoDetectionKey\" (onClick)=\"enableLanguageDetection()\">\r\n\t\t\t{{ \"LANGUAGES.AUTO\" | translate }}\r\n\t\t</translation-system-picker-button>\r\n\t</div>\r\n\r\n\t<ng-template [ngTemplateOutlet]=\"isMobile && !isSourceOpened ? expandableLanguageGroup : languageGroup\"></ng-template>\r\n</div>\r\n\r\n<ng-template #languageGroup>\r\n\t<div *ngFor=\"let group of languages\" class=\"language-group\">\r\n\t\t<span class=\"text-l-semi-bold grouped-by-symbol\">{{ group.groupedBy | uppercase }}</span>\r\n\t\t<ul [ngClass.lt-sm]=\"'mobile'\">\r\n\t\t\t<li *ngFor=\"let language of group.group\">\r\n\t\t\t\t<translation-system-picker-button [active]=\"activeCode === language.code\" (onClick)=\"languageClick(language)\">\r\n\t\t\t\t\t{{ language.displayName }}\r\n\t\t\t\t</translation-system-picker-button>\r\n\t\t\t</li>\r\n\t\t</ul>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #expandableLanguageGroup>\r\n\t<mat-accordion>\r\n\t\t<mat-expansion-panel #expandableLanguagePanel [expanded]=\"true\" [class.mob-language-list]=\"expandableLanguagePanel.expanded\">\r\n\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t<b>{{ \"SYSTEM_PICKER.LANGUAGE\" | translate }}</b\r\n\t\t\t\t\t>&nbsp;{{ activeCode | languageTranslate }}\r\n\t\t\t\t</mat-panel-title>\r\n\t\t\t</mat-expansion-panel-header>\r\n\t\t\t<ng-content></ng-content>\r\n\r\n\t\t\t@if (!showFiltered) {\r\n\t\t\t<ng-template [ngTemplateOutlet]=\"languageGroup\"> </ng-template>\r\n\t\t\t}\r\n\t\t</mat-expansion-panel>\r\n\t</mat-accordion>\r\n</ng-template>\r\n", styles: ["ul{list-style-type:none;padding:0;margin:0}ul.mobile{width:100%}ul button{line-height:1.625rem;margin-bottom:1rem}h1{margin:0 0 1rem}@media (min-width: 600px){.translation-system-picker-wrapper{margin-left:-1rem;column-count:4;column-gap:1rem;column-width:13.75rem;column-fill:balance}}.single-column{column-count:1}.detect-language-btn{margin-left:1.4rem;white-space:nowrap}:host ::ng-deep .detect-language-btn button{max-width:inherit!important}.detect-language-mobile{width:18px!important}.language-group{display:flex;flex-direction:row;justify-content:start;align-items:flex-start}.grouped-by-symbol{width:1.5rem;margin-top:-1px!important;display:inline-flex;align-items:center;height:36px}.language-group-col{display:flex;flex-direction:column;width:100%}.mob-language-list{max-height:70dvh;overflow-y:auto}@media (min-width: 0) and (max-width: 599.9px){.grouped-by-symbol,.detect-language-icon{margin:0}}@media (min-width: 600px){.grouped-by-symbol:not(.detect-language-icon){margin:0 0 0 1rem}}@media (min-width: 600px){.detect-language-btn{margin:0 0 0 2.4rem}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6.TranslationSystemPickerButtonComponent, selector: "translation-system-picker-button", inputs: ["active", "isRecentSystemList", "isDomainList", "tooltip"], outputs: ["onClick"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.LanguageTranslatePipe, name: "languageTranslate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationSystemPickerLanguageListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tld-translation-system-picker-language-list', template: "<div [class.single-column]=\"singleLanguageColumn\" class=\"translation-system-picker-wrapper\">\r\n\t<h1 class=\"text-m-semi-bold\" *ngIf=\"showTitle\">{{ titleKey | translate }}</h1>\r\n\r\n\t<div *ngIf=\"isAutoLanguageDetectionEnabled && menuState === openedSourceState\" class=\"language-group\">\r\n\t\t<translation-system-picker-button class=\"detect-language-btn\" [active]=\"activeCode === languageAutoDetectionKey\" (onClick)=\"enableLanguageDetection()\">\r\n\t\t\t{{ \"LANGUAGES.AUTO\" | translate }}\r\n\t\t</translation-system-picker-button>\r\n\t</div>\r\n\r\n\t<ng-template [ngTemplateOutlet]=\"isMobile && !isSourceOpened ? expandableLanguageGroup : languageGroup\"></ng-template>\r\n</div>\r\n\r\n<ng-template #languageGroup>\r\n\t<div *ngFor=\"let group of languages\" class=\"language-group\">\r\n\t\t<span class=\"text-l-semi-bold grouped-by-symbol\">{{ group.groupedBy | uppercase }}</span>\r\n\t\t<ul [ngClass.lt-sm]=\"'mobile'\">\r\n\t\t\t<li *ngFor=\"let language of group.group\">\r\n\t\t\t\t<translation-system-picker-button [active]=\"activeCode === language.code\" (onClick)=\"languageClick(language)\">\r\n\t\t\t\t\t{{ language.displayName }}\r\n\t\t\t\t</translation-system-picker-button>\r\n\t\t\t</li>\r\n\t\t</ul>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #expandableLanguageGroup>\r\n\t<mat-accordion>\r\n\t\t<mat-expansion-panel #expandableLanguagePanel [expanded]=\"true\" [class.mob-language-list]=\"expandableLanguagePanel.expanded\">\r\n\t\t\t<mat-expansion-panel-header>\r\n\t\t\t\t<mat-panel-title>\r\n\t\t\t\t\t<b>{{ \"SYSTEM_PICKER.LANGUAGE\" | translate }}</b\r\n\t\t\t\t\t>&nbsp;{{ activeCode | languageTranslate }}\r\n\t\t\t\t</mat-panel-title>\r\n\t\t\t</mat-expansion-panel-header>\r\n\t\t\t<ng-content></ng-content>\r\n\r\n\t\t\t@if (!showFiltered) {\r\n\t\t\t<ng-template [ngTemplateOutlet]=\"languageGroup\"> </ng-template>\r\n\t\t\t}\r\n\t\t</mat-expansion-panel>\r\n\t</mat-accordion>\r\n</ng-template>\r\n", styles: ["ul{list-style-type:none;padding:0;margin:0}ul.mobile{width:100%}ul button{line-height:1.625rem;margin-bottom:1rem}h1{margin:0 0 1rem}@media (min-width: 600px){.translation-system-picker-wrapper{margin-left:-1rem;column-count:4;column-gap:1rem;column-width:13.75rem;column-fill:balance}}.single-column{column-count:1}.detect-language-btn{margin-left:1.4rem;white-space:nowrap}:host ::ng-deep .detect-language-btn button{max-width:inherit!important}.detect-language-mobile{width:18px!important}.language-group{display:flex;flex-direction:row;justify-content:start;align-items:flex-start}.grouped-by-symbol{width:1.5rem;margin-top:-1px!important;display:inline-flex;align-items:center;height:36px}.language-group-col{display:flex;flex-direction:column;width:100%}.mob-language-list{max-height:70dvh;overflow-y:auto}@media (min-width: 0) and (max-width: 599.9px){.grouped-by-symbol,.detect-language-icon{margin:0}}@media (min-width: 600px){.grouped-by-symbol:not(.detect-language-icon){margin:0 0 0 1rem}}@media (min-width: 600px){.detect-language-btn{margin:0 0 0 2.4rem}}\n"] }]
        }], ctorParameters: () => [{ type: i1.TldTranslateSystemManagementService }, { type: i2.TranslationSystemPickerService }, { type: i1.TldTranslateConfigService }], propDecorators: { expandableLanguagePanel: [{
                type: ViewChild,
                args: ['expandableLanguagePanel']
            }], languages: [{
                type: Input
            }], activeCode: [{
                type: Input
            }], isMobile: [{
                type: Input
            }], showTitle: [{
                type: Input
            }], isSourceOpened: [{
                type: Input
            }], showFiltered: [{
                type: Input
            }], menuState: [{
                type: Input
            }], clicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 