import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { TldTranslateSystemManagementService } from '../../../tld-common/services';
import { Subject, takeUntil } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngbracket/ngx-layout/extended";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/material/expansion";
import * as i5 from "../system-picker-button/translation-system-picker-button.component";
import * as i6 from "@ngx-translate/core";
import * as i7 from "@tilde-nlp/ngx-common";
export class TranslationSystemPickerSystemListComponent {
    systems;
    titleKey;
    activeId;
    showTitle;
    icon;
    isRecentSystemList;
    isDomainList;
    isSourceOpened;
    isMobile;
    activeDomain;
    clicked = new EventEmitter();
    #system = inject(TldTranslateSystemManagementService);
    isTargetChanged = false;
    initialTargetLang;
    destroy = new Subject();
    ngOnInit() {
        this.#system
            .getActiveData()
            .pipe(takeUntil(this.destroy))
            .subscribe({
            next: (sys) => {
                if (this.initialTargetLang && this.initialTargetLang !== sys.targetLang.lang) {
                    this.isTargetChanged = true;
                }
                this.initialTargetLang = sys.targetLang.lang;
            },
        });
    }
    ngOnDestroy() {
        this.destroy.next(null);
        this.destroy.complete();
    }
    changeSystem(system) {
        this.clicked.emit(system);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationSystemPickerSystemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TranslationSystemPickerSystemListComponent, selector: "tld-translation-system-picker-system-list", inputs: { systems: "systems", titleKey: "titleKey", activeId: "activeId", showTitle: "showTitle", icon: "icon", isRecentSystemList: "isRecentSystemList", isDomainList: "isDomainList", isSourceOpened: "isSourceOpened", isMobile: "isMobile", activeDomain: "activeDomain" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div [ngClass.lt-sm]=\"'mobile'\">\r\n\t<div class=\"span-container\" *ngIf=\"showTitle\">\r\n\t\t<mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\r\n\r\n\t\t@if (!isMobile || isSourceOpened) {\r\n\t\t<span class=\"text-l-semi-bold\" [ngClass.lt-sm]=\"'text-m-semi-bold'\">{{ titleKey | translate }}</span>\r\n\t\t}\r\n\t</div>\r\n\r\n\t<ng-template [ngTemplateOutlet]=\"isMobile && !isSourceOpened ? expandableSystemList : systemList\"></ng-template>\r\n</div>\r\n\r\n<ng-template #systemList>\r\n\t@for (system of systems | sortDomains:isDomainList:'displayName'; let i = $index; track i) {\r\n\t<translation-system-picker-button\r\n\t\t[active]=\"activeId === system.languageId\"\r\n\t\t[isDomainList]=\"isDomainList\"\r\n\t\t[isRecentSystemList]=\"isRecentSystemList\"\r\n\t\t(onClick)=\"changeSystem(system)\"\r\n\t>\r\n\t\t{{ system.displayName | domainTranslate : isDomainList }}\r\n\t</translation-system-picker-button>\r\n\t}\r\n</ng-template>\r\n\r\n<ng-template #expandableSystemList>\r\n\t<mat-accordion>\r\n\t\t<mat-expansion-panel [expanded]=\"isTargetChanged\">\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.TRANSLATION_STYLE\" | translate }}</b\r\n\t\t\t\t\t>&nbsp;{{ activeDomain | domainTranslate : true }}\r\n\t\t\t\t</mat-panel-title>\r\n\t\t\t</mat-expansion-panel-header>\r\n\t\t\t<ng-template [ngTemplateOutlet]=\"systemList\"></ng-template>\r\n\r\n\t\t</mat-expansion-panel>\r\n\t</mat-accordion>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}:host .span-container{display:flex;align-items:center;margin:1rem 0 1.25rem}:host .system-picker-button{width:100%;text-align:left}:host .system-picker-button:not(.active){color:var(--base-10)}:host .mobile .span-container{margin:0 0 .75rem}:host ::ng-deep .system-picker-button{white-space:nowrap}mat-icon{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5.TranslationSystemPickerButtonComponent, selector: "translation-system-picker-button", inputs: ["active", "isRecentSystemList", "isDomainList", "tooltip"], outputs: ["onClick"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.SortDomainsPipe, name: "sortDomains" }, { kind: "pipe", type: i7.DomainTranslatePipe, name: "domainTranslate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationSystemPickerSystemListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tld-translation-system-picker-system-list', template: "<div [ngClass.lt-sm]=\"'mobile'\">\r\n\t<div class=\"span-container\" *ngIf=\"showTitle\">\r\n\t\t<mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\r\n\r\n\t\t@if (!isMobile || isSourceOpened) {\r\n\t\t<span class=\"text-l-semi-bold\" [ngClass.lt-sm]=\"'text-m-semi-bold'\">{{ titleKey | translate }}</span>\r\n\t\t}\r\n\t</div>\r\n\r\n\t<ng-template [ngTemplateOutlet]=\"isMobile && !isSourceOpened ? expandableSystemList : systemList\"></ng-template>\r\n</div>\r\n\r\n<ng-template #systemList>\r\n\t@for (system of systems | sortDomains:isDomainList:'displayName'; let i = $index; track i) {\r\n\t<translation-system-picker-button\r\n\t\t[active]=\"activeId === system.languageId\"\r\n\t\t[isDomainList]=\"isDomainList\"\r\n\t\t[isRecentSystemList]=\"isRecentSystemList\"\r\n\t\t(onClick)=\"changeSystem(system)\"\r\n\t>\r\n\t\t{{ system.displayName | domainTranslate : isDomainList }}\r\n\t</translation-system-picker-button>\r\n\t}\r\n</ng-template>\r\n\r\n<ng-template #expandableSystemList>\r\n\t<mat-accordion>\r\n\t\t<mat-expansion-panel [expanded]=\"isTargetChanged\">\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.TRANSLATION_STYLE\" | translate }}</b\r\n\t\t\t\t\t>&nbsp;{{ activeDomain | domainTranslate : true }}\r\n\t\t\t\t</mat-panel-title>\r\n\t\t\t</mat-expansion-panel-header>\r\n\t\t\t<ng-template [ngTemplateOutlet]=\"systemList\"></ng-template>\r\n\r\n\t\t</mat-expansion-panel>\r\n\t</mat-accordion>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}:host .span-container{display:flex;align-items:center;margin:1rem 0 1.25rem}:host .system-picker-button{width:100%;text-align:left}:host .system-picker-button:not(.active){color:var(--base-10)}:host .mobile .span-container{margin:0 0 .75rem}:host ::ng-deep .system-picker-button{white-space:nowrap}mat-icon{margin-right:5px}\n"] }]
        }], propDecorators: { systems: [{
                type: Input
            }], titleKey: [{
                type: Input
            }], activeId: [{
                type: Input
            }], showTitle: [{
                type: Input
            }], icon: [{
                type: Input
            }], isRecentSystemList: [{
                type: Input
            }], isDomainList: [{
                type: Input
            }], isSourceOpened: [{
                type: Input
            }], isMobile: [{
                type: Input
            }], activeDomain: [{
                type: Input
            }], clicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 