import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@tilde-nlp/ngx-common";
import * as i3 from "../../../../components/shared/text-to-speech/text-to-speech.component";
import * as i4 from "@ngbracket/ngx-layout/flex";
import * as i5 from "@ngbracket/ngx-layout/extended";
import * as i6 from "@angular/cdk/scrolling";
export class SourceAndTargetWrapperComponent {
    clearButton;
    clearSourceVisible;
    clearSourceTooltip;
    clearDisabled;
    textToSpeechSourceSettings;
    onSourceClear = new EventEmitter();
    constructor() { }
    ngOnInit() {
    }
    clearSource() {
        this.onSourceClear.emit();
    }
    focusClearButton() {
        this.clearButton?.clearButton.focus();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SourceAndTargetWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SourceAndTargetWrapperComponent, selector: "tld-source-and-target-wrapper", inputs: { clearSourceVisible: "clearSourceVisible", clearSourceTooltip: "clearSourceTooltip", clearDisabled: "clearDisabled", textToSpeechSourceSettings: "textToSpeechSourceSettings" }, outputs: { onSourceClear: "onSourceClear" }, viewQueries: [{ propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"row\" class=\"source-target-wrapper\" fxLayout.lt-md=\"column\">\r\n  <div class=\"source-wrapper\" [ngClass.gt-sm]=\"'tld-default-border-right'\" [ngClass.lt-md]=\"'tld-default-border-bottom'\"\r\n    fxFlex fxLayout=\"column\">\r\n    <div fxLayout=\"column\" class=\"source-wrapper-action-buttons\">\r\n      <tld-close-button [tooltip]=\"clearSourceTooltip\" #clearButton (tldClick)=\"clearSource()\"\r\n      *ngIf=\"clearSourceVisible\" [disabled]=\"clearDisabled\"></tld-close-button>\r\n      <ng-content select=\"[dictation]\"></ng-content>\r\n      <ng-content select=\"[compactUpload]\"></ng-content>\r\n      <tld-text-to-speech *ngIf=\"textToSpeechSourceSettings\" [settings]=\"textToSpeechSourceSettings\">\r\n      </tld-text-to-speech>\r\n    </div>\r\n    <div class=\"source-container\" fxFlex>\r\n      <ng-content select=\"[sourceMain]\"></ng-content>\r\n    </div>\r\n    <div class=\"source-action-wrapper\">\r\n      <ng-content select=\"[sourceActions]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"target-wrapper\" fxLayout=\"column\" fxFlex=\"50\">\r\n    <div class=\"target-container\" fxFlex cdkScrollable>\r\n      <ng-content select=\"[targetMain]\"></ng-content>\r\n    </div>\r\n    <div class=\"target-action-wrapper\">\r\n      <ng-content select=\"[targetActions]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".source-wrapper{position:relative}.source-wrapper .source-wrapper-action-buttons{padding:.2rem;position:absolute;top:0;right:0;z-index:2}.target-container,.source-container{flex:1 1 0!important}.source-container-wrapper,.target-container-wrapper,.source-target-wrapper{height:100%}.source-container,.target-container{overflow-y:auto}.target-wrapper{background:#fff;position:relative}:host{height:100%;max-height:100%}:host.empty-target .target-wrapper{background:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CloseButtonComponent, selector: "tld-close-button", inputs: ["ariaCode", "disabled", "tooltip"], outputs: ["tldClick"] }, { kind: "component", type: i3.TextToSpeechComponent, selector: "tld-text-to-speech", inputs: ["settings"] }, { kind: "directive", type: i4.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: i4.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: i5.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: i6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SourceAndTargetWrapperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tld-source-and-target-wrapper', template: "<div fxLayout=\"row\" class=\"source-target-wrapper\" fxLayout.lt-md=\"column\">\r\n  <div class=\"source-wrapper\" [ngClass.gt-sm]=\"'tld-default-border-right'\" [ngClass.lt-md]=\"'tld-default-border-bottom'\"\r\n    fxFlex fxLayout=\"column\">\r\n    <div fxLayout=\"column\" class=\"source-wrapper-action-buttons\">\r\n      <tld-close-button [tooltip]=\"clearSourceTooltip\" #clearButton (tldClick)=\"clearSource()\"\r\n      *ngIf=\"clearSourceVisible\" [disabled]=\"clearDisabled\"></tld-close-button>\r\n      <ng-content select=\"[dictation]\"></ng-content>\r\n      <ng-content select=\"[compactUpload]\"></ng-content>\r\n      <tld-text-to-speech *ngIf=\"textToSpeechSourceSettings\" [settings]=\"textToSpeechSourceSettings\">\r\n      </tld-text-to-speech>\r\n    </div>\r\n    <div class=\"source-container\" fxFlex>\r\n      <ng-content select=\"[sourceMain]\"></ng-content>\r\n    </div>\r\n    <div class=\"source-action-wrapper\">\r\n      <ng-content select=\"[sourceActions]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"target-wrapper\" fxLayout=\"column\" fxFlex=\"50\">\r\n    <div class=\"target-container\" fxFlex cdkScrollable>\r\n      <ng-content select=\"[targetMain]\"></ng-content>\r\n    </div>\r\n    <div class=\"target-action-wrapper\">\r\n      <ng-content select=\"[targetActions]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".source-wrapper{position:relative}.source-wrapper .source-wrapper-action-buttons{padding:.2rem;position:absolute;top:0;right:0;z-index:2}.target-container,.source-container{flex:1 1 0!important}.source-container-wrapper,.target-container-wrapper,.source-target-wrapper{height:100%}.source-container,.target-container{overflow-y:auto}.target-wrapper{background:#fff;position:relative}:host{height:100%;max-height:100%}:host.empty-target .target-wrapper{background:#fff}\n"] }]
        }], ctorParameters: () => [], propDecorators: { clearButton: [{
                type: ViewChild,
                args: ["clearButton"]
            }], clearSourceVisible: [{
                type: Input
            }], clearSourceTooltip: [{
                type: Input
            }], clearDisabled: [{
                type: Input
            }], textToSpeechSourceSettings: [{
                type: Input
            }], onSourceClear: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 