import { UntypedFormControl, Validators } from '@angular/forms';
import { Component, EventEmitter, Inject, Output } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Editor } from 'ngx-editor';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
import * as i2 from "@angular/forms";
import * as i3 from "../../core/form-validator.service";
import * as i4 from "../../core/alert.service";
import * as i5 from "./../techlify-update.service";
import * as i6 from "@angular/common";
import * as i7 from "@angular/material/button";
import * as i8 from "@angular/material/form-field";
import * as i9 from "@angular/material/icon";
import * as i10 from "@angular/material/input";
import * as i11 from "@angular/material/datepicker";
import * as i12 from "@angular/material/button-toggle";
import * as i13 from "@angular/flex-layout/flex";
import * as i14 from "ngx-editor";
const errorMessages = {
    title: {
        required: "Title is required",
    },
    released_on: {
        required: "Released On is required",
    },
    version: {
        required: "Version is required",
    },
    description: {
        required: "Description is required",
    },
    learn_more_link: {
        pattern: "Please enter valid link",
    }
};
export class TechlifyUpdateFormComponent {
    constructor(dialogRef, data, fb, formValidatorService, alertService, techlifyUpdateService) {
        this.dialogRef = dialogRef;
        this.data = data;
        this.fb = fb;
        this.formValidatorService = formValidatorService;
        this.alertService = alertService;
        this.techlifyUpdateService = techlifyUpdateService;
        this.onSave = new EventEmitter();
        this.isUpdateMode = false;
        this.toolbar = [
            ['bold', 'italic'],
            ['bullet_list'],
        ];
        this.createForm();
    }
    createForm() {
        this.techlifyUpdateForm = this.fb.group({
            id: new UntypedFormControl(''),
            title: new UntypedFormControl('', Validators.required),
            description: new UntypedFormControl('', Validators.required),
            version: new UntypedFormControl('', Validators.required),
            released_on: new UntypedFormControl('', Validators.required),
            learn_more_link: new UntypedFormControl('', Validators.compose([Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')])),
            is_pinned: [false]
        });
        if (this.data.techlifyUpdateDetails) {
            this.isUpdateMode = true;
            this.techlifyUpdateForm.patchValue(this.data.techlifyUpdateDetails);
        }
    }
    ngOnInit() {
        this.editor = new Editor();
    }
    async submit() {
        if (this.techlifyUpdateForm.valid) {
            let result;
            const model = this.techlifyUpdateForm.value;
            try {
                result = this.isUpdateMode ? await this.techlifyUpdateService.updateTechlifyUpdate(model)
                    : await this.techlifyUpdateService.createTechlifyUpdate(model);
                this.alertService.addAlert("Techlify app update saved successfully", "success");
            }
            catch (error) {
                this.alertService.addAlert("Unable to process, try later", "warn");
            }
            finally {
                if (result) {
                    this.dialogRef.close(result);
                }
            }
        }
    }
    resetFieldValue(field) {
        this.techlifyUpdateForm.get(field).setValue('');
    }
    getFieldValue(field) {
        return this.techlifyUpdateForm.get(field).value;
    }
    /** Method to evaluate form fields*/
    isFieldValid(field) {
        return this.formValidatorService.isFieldValid(field, this.techlifyUpdateForm, true);
    }
    /** Method to find error in form fields*/
    getErrorMessage(field) {
        return this.formValidatorService.getErrorMessage(field, this.techlifyUpdateForm, errorMessages);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyUpdateFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.UntypedFormBuilder }, { token: i3.FormValidatorService }, { token: i4.AlertService }, { token: i5.TechlifyUpdateService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdateFormComponent, selector: "app-techlify-update-form", outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"techlifyUpdateForm\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <h2>\n        App Update Form\n      </h2>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"1rem\">\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Title</mat-label>\n        <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n        <button *ngIf=\"getFieldValue('title')\" matSuffix mat-icon-button (click)=\"resetFieldValue('title')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('title')\">\n          {{getErrorMessage('title')}}\n        </mat-error>\n      </mat-form-field>\n\n      <h3 class=\"text-secondary mb-4\" fxFlex=\"100%\">\n        Is Pinned\n        <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n          formControlName=\"is_pinned\">\n          <mat-button-toggle [value]=\"true\">Yes</mat-button-toggle>\n          <mat-button-toggle [value]=\"false\">No</mat-button-toggle>\n        </mat-button-toggle-group>\n      </h3>\n\n      <mat-form-field fxFlex=\"100%\">\n        <input matInput [matDatepicker]=\"released_on\" formControlName=\"released_on\" placeholder=\"Released on\" readonly\n          (click)=\"released_on.open()\" required />\n        <mat-datepicker-toggle matSuffix [for]=\"released_on\"></mat-datepicker-toggle>\n        <mat-datepicker #released_on></mat-datepicker>\n        <button *ngIf=\"getFieldValue('released_on')\" matSuffix mat-icon-button (click)=\"resetFieldValue('released_on')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('released_on')\">\n          {{getErrorMessage('released_on')}}\n        </mat-error>\n      </mat-form-field>\n\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Version</mat-label>\n        <input matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" required />\n        <button *ngIf=\"getFieldValue('version')\" matSuffix mat-icon-button (click)=\"resetFieldValue('version')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('version')\">\n          {{getErrorMessage('version')}}\n        </mat-error>\n      </mat-form-field>\n\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Learn more link</mat-label>\n        <input matInput formControlName=\"learn_more_link\" placeholder=\"Learn More Link\" autocomplete=\"off\" />\n        <button *ngIf=\"getFieldValue('learn_more_link')\" matSuffix mat-icon-button\n          (click)=\"resetFieldValue('learn_more_link')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('learn_more_link')\">\n          {{getErrorMessage('learn_more_link')}}\n        </mat-error>\n      </mat-form-field>\n\n      <div fxFlex=\"100%\">\n        <div class=\"NgxEditor__Wrapper\">\n          <ngx-editor-menu [toolbar]=\"toolbar\" [editor]=\"editor\"> </ngx-editor-menu>\n          <ngx-editor formControlName=\"description\" [editor]=\"editor\" placeholder=\"Description\">\n          </ngx-editor>\n        </div>\n        <mat-error *ngIf=\"isFieldValid('description')\">\n          {{getErrorMessage('description')}}\n        </mat-error>\n      </div>\n    </div>\n    <div mat-dialog-actions fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n        Cancel\n      </button>\n      <button mat-raised-button type=\"submit\" class=\"btn-primary mt-2\">\n        Save\n      </button>\n    </div>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i12.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i13.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: i13.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: i13.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: i13.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: "component", type: i14.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i14.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyUpdateFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-techlify-update-form', template: "<form [formGroup]=\"techlifyUpdateForm\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <h2>\n        App Update Form\n      </h2>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"1rem\">\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Title</mat-label>\n        <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n        <button *ngIf=\"getFieldValue('title')\" matSuffix mat-icon-button (click)=\"resetFieldValue('title')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('title')\">\n          {{getErrorMessage('title')}}\n        </mat-error>\n      </mat-form-field>\n\n      <h3 class=\"text-secondary mb-4\" fxFlex=\"100%\">\n        Is Pinned\n        <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n          formControlName=\"is_pinned\">\n          <mat-button-toggle [value]=\"true\">Yes</mat-button-toggle>\n          <mat-button-toggle [value]=\"false\">No</mat-button-toggle>\n        </mat-button-toggle-group>\n      </h3>\n\n      <mat-form-field fxFlex=\"100%\">\n        <input matInput [matDatepicker]=\"released_on\" formControlName=\"released_on\" placeholder=\"Released on\" readonly\n          (click)=\"released_on.open()\" required />\n        <mat-datepicker-toggle matSuffix [for]=\"released_on\"></mat-datepicker-toggle>\n        <mat-datepicker #released_on></mat-datepicker>\n        <button *ngIf=\"getFieldValue('released_on')\" matSuffix mat-icon-button (click)=\"resetFieldValue('released_on')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('released_on')\">\n          {{getErrorMessage('released_on')}}\n        </mat-error>\n      </mat-form-field>\n\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Version</mat-label>\n        <input matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" required />\n        <button *ngIf=\"getFieldValue('version')\" matSuffix mat-icon-button (click)=\"resetFieldValue('version')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('version')\">\n          {{getErrorMessage('version')}}\n        </mat-error>\n      </mat-form-field>\n\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Learn more link</mat-label>\n        <input matInput formControlName=\"learn_more_link\" placeholder=\"Learn More Link\" autocomplete=\"off\" />\n        <button *ngIf=\"getFieldValue('learn_more_link')\" matSuffix mat-icon-button\n          (click)=\"resetFieldValue('learn_more_link')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('learn_more_link')\">\n          {{getErrorMessage('learn_more_link')}}\n        </mat-error>\n      </mat-form-field>\n\n      <div fxFlex=\"100%\">\n        <div class=\"NgxEditor__Wrapper\">\n          <ngx-editor-menu [toolbar]=\"toolbar\" [editor]=\"editor\"> </ngx-editor-menu>\n          <ngx-editor formControlName=\"description\" [editor]=\"editor\" placeholder=\"Description\">\n          </ngx-editor>\n        </div>\n        <mat-error *ngIf=\"isFieldValid('description')\">\n          {{getErrorMessage('description')}}\n        </mat-error>\n      </div>\n    </div>\n    <div mat-dialog-actions fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n        Cancel\n      </button>\n      <button mat-raised-button type=\"submit\" class=\"btn-primary mt-2\">\n        Save\n      </button>\n    </div>\n  </div>\n</form>" }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }, { type: i2.UntypedFormBuilder }, { type: i3.FormValidatorService }, { type: i4.AlertService }, { type: i5.TechlifyUpdateService }], propDecorators: { onSave: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 