import { ChangeDetectionStrategy, Component } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "../../form-field/form-field-control.directive";
import * as i5 from "../../modal-dialog/dialog-buttons.directive";
import * as i6 from "@ngx-translate/core";
export class ExternalImageDialogComponent {
    constructor() {
        this.previewLoaded = false;
    }
    ngOnInit() {
        this.form = new UntypedFormGroup({
            src: new UntypedFormControl(this.existing ? this.existing.src : '', Validators.required),
            title: new UntypedFormControl(this.existing ? this.existing.title : ''),
            alt: new UntypedFormControl(this.existing ? this.existing.alt : ''),
        });
    }
    select() {
        this.resolveWith(this.form.value);
    }
    onImageLoad(event) {
        this.previewLoaded = true;
    }
    onImageError(event) {
        this.previewLoaded = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExternalImageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\n        <clr-input-container class=\"expand\">\n            <label>{{ 'editor.image-src' | translate }}</label>\n            <input clrInput type=\"text\" formControlName=\"src\" />\n        </clr-input-container>\n        <clr-input-container class=\"expand\">\n            <label>{{ 'editor.image-title' | translate }}</label>\n            <input clrInput type=\"text\" formControlName=\"title\" />\n        </clr-input-container>\n        <clr-input-container class=\"expand\">\n            <label>{{ 'editor.image-alt' | translate }}</label>\n            <input clrInput type=\"text\" formControlName=\"alt\" />\n        </clr-input-container>\n    </form>\n    <div class=\"preview\">\n        <img\n            [src]=\"form.get('src')?.value\"\n            [class.visible]=\"previewLoaded\"\n            (load)=\"onImageLoad($event)\"\n            (error)=\"onImageError($event)\"\n        />\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\n        </div>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\n        <ng-container *ngIf=\"existing; else doesNotExist\">{{ 'common.update' | translate }}</ng-container>\n        <ng-template #doesNotExist>{{ 'editor.insert-image' | translate }}</ng-template>\n    </button>\n</ng-template>\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-inline-start:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i5.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExternalImageDialogComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-external-image-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\n        <clr-input-container class=\"expand\">\n            <label>{{ 'editor.image-src' | translate }}</label>\n            <input clrInput type=\"text\" formControlName=\"src\" />\n        </clr-input-container>\n        <clr-input-container class=\"expand\">\n            <label>{{ 'editor.image-title' | translate }}</label>\n            <input clrInput type=\"text\" formControlName=\"title\" />\n        </clr-input-container>\n        <clr-input-container class=\"expand\">\n            <label>{{ 'editor.image-alt' | translate }}</label>\n            <input clrInput type=\"text\" formControlName=\"alt\" />\n        </clr-input-container>\n    </form>\n    <div class=\"preview\">\n        <img\n            [src]=\"form.get('src')?.value\"\n            [class.visible]=\"previewLoaded\"\n            (load)=\"onImageLoad($event)\"\n            (error)=\"onImageError($event)\"\n        />\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\n        </div>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\n        <ng-container *ngIf=\"existing; else doesNotExist\">{{ 'common.update' | translate }}</ng-container>\n        <ng-template #doesNotExist>{{ 'editor.insert-image' | translate }}</ng-template>\n    </button>\n</ng-template>\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-inline-start:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 