import { Component, Inject, Input } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { takeUntil } from 'rxjs/operators';
import { QMSCKEditorDialogData } from '../../common/models/qms-ckeditor-dialog.model';
import { QMSCKEditorConfirmComponent } from '../../common/module/confirm/qms-ckeditor-confirm.component';
import { QMSCKEditorToastService } from '../../common/toast/qms-ckeditor-toast.service';
import { QMSCKEditorTemplate } from '../../models/qms-ckeditor-template.model';
import { QMSCKEditorBaseComponent } from '../../qms-ckeditor-base.component';
import { IconSvg } from '../../common/constants/iconSvg.constants';
import { requiredFileType } from '../../../directives/file-upload/file-upload-selector.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
import * as i2 from "../../../services/translation-registry.service";
import * as i3 from "../../services/qms-ckedtior-template.service";
import * as i4 from "../../services/qms-ckeditor-common.services";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/platform-browser";
import * as i7 from "../../services/qms-ckeditor-upload.service";
import * as i8 from "@angular/common";
import * as i9 from "@angular/material/expansion";
import * as i10 from "@angular/material/input";
import * as i11 from "@angular/material/form-field";
import * as i12 from "@angular/forms";
import * as i13 from "@angular/material/select";
import * as i14 from "@angular/material/core";
import * as i15 from "@angular/material/button";
import * as i16 from "@angular/material/progress-spinner";
import * as i17 from "../../../components/button/button";
import * as i18 from "../../../directives/search-field.directive";
import * as i19 from "../../../directives/form.directive";
import * as i20 from "../../../directives/file-upload/file-upload.directive";
import * as i21 from "../../../directives/file-upload/file-upload-display.directive";
import * as i22 from "../../../directives/file-upload/file-upload-selector.directive";
export class QMSCKEditorTemplateComponent extends QMSCKEditorBaseComponent {
    constructor(cdr, dialog, translate, templateService, commonService, dialogRef, iconRegistry, sanitizer, uploadService, data) {
        super();
        this.cdr = cdr;
        this.dialog = dialog;
        this.translate = translate;
        this.templateService = templateService;
        this.commonService = commonService;
        this.dialogRef = dialogRef;
        this.iconRegistry = iconRegistry;
        this.sanitizer = sanitizer;
        this.uploadService = uploadService;
        this.data = data;
        this.templateFormGroup = new UntypedFormGroup({
            templateList: new UntypedFormControl(),
            title: new UntypedFormControl('', [Validators.required]),
            description: new UntypedFormControl('', [Validators.required]),
            imageAcceptType: new UntypedFormControl('', [
                requiredFileType(['pjp', 'jpg', 'pjpeg', 'jpeg', 'jfif', 'png', 'gif', 'bmp', 'webp', 'tif', 'tiff'])
            ]),
            imageInfo: new UntypedFormControl()
        });
        this.isExpanded = true;
        this.templateList = [];
        this.templates = [];
        this.template = new QMSCKEditorTemplate();
        this.selectedId = 0;
        this.isEdit = false;
        this.qmsInputImageFile = null;
        this.isLoadingImageFile = false;
        this.imageUpload = new Image();
        this.content = data.html;
        this.selectedId = data.id;
        this.isEdit = data.edit;
        this.iconRegistry.addSvgIconLiteral('upload', this.sanitizer.bypassSecurityTrustHtml(IconSvg.UPLOAD_ICON));
    }
    ngOnInit() {
        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
            if (res) {
                this.LANG = this.translate.getObjectLang(res);
            }
        });
        this.getTemplate();
    }
    ngAfterViewChecked() {
        this.cdr.detectChanges();
    }
    onCloseDialog() {
        const scrollTop = this.commonService.getScrollTopCkeditor(this.ckEditor);
        this.dialogRef.close();
        this.commonService.setScrollTopEditorContainer(this.ckEditor, scrollTop);
    }
    getTemplate() {
        this.templateService
            .getTemplate()
            .pipe(takeUntil(this.ngUnsubcribe))
            .subscribe((response) => {
            if (response) {
                this.templateList = response;
                this.templates = response.map((x) => {
                    return {
                        id: x.id,
                        title: x.title
                    };
                });
                this.addNoneTemplate(this.templates);
            }
            else {
                this.addNoneTemplate(this.templates);
            }
            if (this.isEdit && this.selectedId !== 0) {
                this.onSelectChange();
            }
        });
    }
    addNoneTemplate(template) {
        if (template && !this.isEdit) {
            template.unshift({
                id: 0,
                title: this.LANG.QMSCKEDITOR.CREATE_NEW_TEMPLATE
            });
        }
    }
    onSelectChange() {
        if (this.selectedId === 0) {
            this.template.id = this.selectedId;
            this.template.title = '';
            this.template.description = '';
            this.template.html = this.content;
            this.template.deleted = false;
            this.template.createdBy = 0;
        }
        else if (this.templateList.length > 0) {
            const index = this.templateList.findIndex((x) => {
                return x.id === this.selectedId;
            });
            this.template.id = this.templateList[index].id;
            this.template.title = this.templateList[index].title;
            this.template.description = this.templateList[index].description;
            this.template.html = this.templateList[index].html;
            this.template.deleted = this.templateList[index].deleted;
            this.template.createdBy = this.templateList[index].createdBy;
        }
    }
    deleteTemplate() {
        const data = new QMSCKEditorDialogData();
        data.title = this.LANG.QMSCKEDITOR.DELETE_TEMPLATE;
        data.content = this.LANG.QMSCKEDITOR_MESSAGE.CONFIRM_DELETE_TEMPLATE;
        const dialogRef = this.dialog.open(QMSCKEditorConfirmComponent, {
            width: '500px',
            minHeight: '175px',
            data
        });
        dialogRef
            .afterClosed()
            .pipe(takeUntil(this.ngUnsubcribe))
            .subscribe((result) => {
            if (result) {
                this.templateService
                    .deleteTemplate([this.selectedId])
                    .pipe(takeUntil(this.ngUnsubcribe))
                    .subscribe((response) => {
                    if (response) {
                        const index = this.templates.findIndex((x) => {
                            return x.id === this.selectedId;
                        });
                        if (index >= 0) {
                            this.templates.splice(index, 1);
                        }
                        this.selectedId = 0;
                        this.onSelectChange();
                        QMSCKEditorToastService.success(this.LANG.QMSCKEDITOR.DELETED);
                    }
                    else {
                        QMSCKEditorToastService.error(this.LANG.QMSCKEDITOR.DELETE_FAILED);
                    }
                });
            }
        });
    }
    async saveTemplate() {
        if (this.selectedId === 0) {
            this.template.html = this.content;
        }
        if (this.qmsInputImageFile) {
            var imageExtraId = await this.uploadService.uploadImage(this.qmsInputImageFile.file, this.imageUpload.height, this.imageUpload.width, this.imageInfo).toPromise();
            imageExtraId = imageExtraId?.replace('/stream_image.aspx?iEntityId=', '');
            if (imageExtraId.length) {
                var imageId = await this.templateService.getImageIdByExtraId(imageExtraId).toPromise();
                this.template.imageId = imageId ? imageId : 0;
            }
        }
        this.templateService
            .modifyTemplate(this.template)
            .pipe(takeUntil(this.ngUnsubcribe))
            .subscribe((result) => {
            if (result) {
                const index = this.templates.findIndex((x) => {
                    return x.id === this.selectedId;
                });
                if (index >= 0 && this.selectedId !== 0) {
                    this.templates[index].title = this.template.title;
                }
                QMSCKEditorToastService.success(this.LANG.QMSCKEDITOR.SAVED);
                this.dialogRef.close();
            }
            else {
                QMSCKEditorToastService.error(this.LANG.QMSCKEDITOR.SAVE_FAILED);
            }
        });
    }
    cancelTemplate() {
        const scrollTop = this.commonService.getScrollTopCkeditor(this.ckEditor);
        this.dialogRef.close();
        this.commonService.setScrollTopEditorContainer(this.ckEditor, scrollTop);
    }
    updateTemplate() {
        this.templateService
            .modifyTemplate(this.template)
            .pipe(takeUntil(this.ngUnsubcribe))
            .subscribe((result) => {
            if (result) {
                if (this.isEdit) {
                    const scrollTop = this.commonService.getScrollTopCkeditor(this.ckEditor);
                    this.dialogRef.close(this.template);
                    this.commonService.setScrollTopEditorContainer(this.ckEditor, scrollTop);
                }
                else {
                    let index = this.templates.findIndex((x) => {
                        return x.id === this.template.id;
                    });
                    if (index >= 0) {
                        this.templates[index].title = this.template.title;
                    }
                    index = this.templateList.findIndex((x) => {
                        return x.id === this.template.id;
                    });
                    if (index >= 0) {
                        this.templateList[index].description = this.template.description;
                    }
                }
                QMSCKEditorToastService.success(this.LANG.QMSCKEDITOR.SAVED);
            }
            else {
                QMSCKEditorToastService.error(this.LANG.QMSCKEDITOR.SAVE_FAILED);
            }
        });
    }
    clearQMSInputImageFile() {
        this.qmsInputImageFile = null;
    }
    onChangeImage(event) {
        const readerImage = new FileReader();
        readerImage.readAsDataURL(this.qmsInputImageFile.file);
        readerImage.onload = async (event) => {
            this.imageUpload.src = event.target.result.toString();
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: i2.TranslateLibraryService }, { token: i3.QMSCKEditorTemplateService }, { token: i4.QMSCKEditorCommonService }, { token: i1.MatDialogRef }, { token: i5.MatIconRegistry }, { token: i6.DomSanitizer }, { token: i7.QMSCKEditorUploadService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorTemplateComponent, selector: "app-qmsck-template", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div\n  id=\"qmsckeditor-template\"\n  class=\"qmsckeditor qmsckeditor__template__container\"\n>\n  <div id=\"qmsckeditor-template-header\">\n    <span\n      id=\"qmsckeditor-template-header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div\n      id=\"qmsckeditor-template-header_002\"\n      mat-dialog-content\n      *ngIf=\"!isEdit\"\n    >\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CREATE_NEW_TEMPLATE }}\n      </h2>\n    </div>\n    <div id=\"qmsckeditor-template-header_002\" mat-dialog-content *ngIf=\"isEdit\">\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.UPDATE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n\n  <form [formGroup]=\"templateFormGroup\">\n    <div\n      id=\"qmsckeditor-template-content\"\n      class=\"qmsckeditor template-content height form-content-height\"\n    >\n      <div id=\"qmsckeditor-template-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel\n          id=\"qmsckeditor-template-panel\"\n          [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\"\n        >\n          <div id=\"qmsckeditor-template-panel_001\">\n            <div id=\"qmsckeditor-template-panel_001_000\" class=\"mt-2\">\n              <mat-form-field appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TEMPLATE }}</mat-label>\n                <mat-select\n                  formControlName=\"templateList\"\n                  [(ngModel)]=\"selectedId\"\n                  (ngModelChange)=\"onSelectChange()\"\n                  [disabled]=\"isEdit\"\n                >\n                  <mat-option\n                    *ngFor=\"let template of templates\"\n                    [value]=\"template.id\"\n                  >\n                    {{ template.title }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"template.title\"\n                  formControlName=\"title\"\n                />\n                <mat-error\n                  *ngIf=\"templateFormGroup.get('title').hasError('required')\"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_002\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.DESCRIPTION }}</mat-label>\n                <textarea\n                  matInput\n                  [(ngModel)]=\"template.description\"\n                  formControlName=\"description\"\n                ></textarea>\n                <mat-error\n                  *ngIf=\"\n                    templateFormGroup.get('description').hasError('required')\n                  \"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_003\" class=\"selected-image\">\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"{{ LANG.QMSCKEDITOR.ADD_IMAGE }}\" formControlName=\"imageAcceptType\" [readOnly]=\"true\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\">\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  (change)=\"onChangeImage($event)\">\n              \n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20' *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n              </mat-form-field>\n            </div>\n\n            <div id=\"qmsckeditor-template-panel_001_004\" *ngIf=\"qmsInputImageFile\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.IMAGE_INFO }}</mat-label>\n                <textarea matInput [(ngModel)]=\"imageInfo\" formControlName=\"imageInfo\"></textarea>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n  <div id=\"qmsckeditor-template-panel_001_005\" class=\"qmsckeditor button__groups template-button-group row mr-0 ml-0 ms-0 me-0\">\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"!isEdit\">\n      <button class=\"delete\" mat-flat-button (click)=\"deleteTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.DELETE }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"!isEdit && selectedId === 0\">\n      <button class=\"save\" mat-flat-button (click)=\"saveTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.SAVE }}\n      </button>\n    </div>\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"isEdit\">\n      <button class=\"cancel\" mat-flat-button (click)=\"cancelTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.CANCEL }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"isEdit || selectedId !== 0\">\n      <button class=\"save\" mat-flat-button (click)=\"updateTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.UPDATE }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__template__container .mat-mdc-form-field{width:100%}.qmsckeditor__template__container textarea.mat-mdc-input-element{min-height:150px}.qmsckeditor__template__container .template-checkbox{padding-top:20px}.qmsckeditor__template__container .selected-image{display:flex;align-items:center;padding-bottom:10px}.qmsckeditor__template__container .selected-image .input-upload{height:60px}.qmsckeditor__template__container .form-content-height{min-height:350px;max-height:410px}.qmsckeditor__template__container .template-button-group{padding-top:10px;padding-right:.5rem;padding-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i11.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i12.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i12.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: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i12.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i12.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i15.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i17.QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: i18.QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: i19.QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: i20.QMSFileUploadDirective, selector: "[qms-file-upload]", inputs: ["isLoading"] }, { kind: "directive", type: i21.QMSFileUploadDisplayDirective, selector: "[qms-file-upload-display]", inputs: ["value"] }, { kind: "directive", type: i22.QMSFileUploadSelectorDirective, selector: "[qms-file-upload-selector]", inputs: ["inputFile", "acceptExtensions", "maxSize"], outputs: ["inputFileChange", "onFileUploaded"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorTemplateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-qmsck-template', template: "<div\n  id=\"qmsckeditor-template\"\n  class=\"qmsckeditor qmsckeditor__template__container\"\n>\n  <div id=\"qmsckeditor-template-header\">\n    <span\n      id=\"qmsckeditor-template-header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div\n      id=\"qmsckeditor-template-header_002\"\n      mat-dialog-content\n      *ngIf=\"!isEdit\"\n    >\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CREATE_NEW_TEMPLATE }}\n      </h2>\n    </div>\n    <div id=\"qmsckeditor-template-header_002\" mat-dialog-content *ngIf=\"isEdit\">\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.UPDATE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n\n  <form [formGroup]=\"templateFormGroup\">\n    <div\n      id=\"qmsckeditor-template-content\"\n      class=\"qmsckeditor template-content height form-content-height\"\n    >\n      <div id=\"qmsckeditor-template-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel\n          id=\"qmsckeditor-template-panel\"\n          [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\"\n        >\n          <div id=\"qmsckeditor-template-panel_001\">\n            <div id=\"qmsckeditor-template-panel_001_000\" class=\"mt-2\">\n              <mat-form-field appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TEMPLATE }}</mat-label>\n                <mat-select\n                  formControlName=\"templateList\"\n                  [(ngModel)]=\"selectedId\"\n                  (ngModelChange)=\"onSelectChange()\"\n                  [disabled]=\"isEdit\"\n                >\n                  <mat-option\n                    *ngFor=\"let template of templates\"\n                    [value]=\"template.id\"\n                  >\n                    {{ template.title }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"template.title\"\n                  formControlName=\"title\"\n                />\n                <mat-error\n                  *ngIf=\"templateFormGroup.get('title').hasError('required')\"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_002\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.DESCRIPTION }}</mat-label>\n                <textarea\n                  matInput\n                  [(ngModel)]=\"template.description\"\n                  formControlName=\"description\"\n                ></textarea>\n                <mat-error\n                  *ngIf=\"\n                    templateFormGroup.get('description').hasError('required')\n                  \"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_003\" class=\"selected-image\">\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"{{ LANG.QMSCKEDITOR.ADD_IMAGE }}\" formControlName=\"imageAcceptType\" [readOnly]=\"true\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\">\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  (change)=\"onChangeImage($event)\">\n              \n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20' *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n              </mat-form-field>\n            </div>\n\n            <div id=\"qmsckeditor-template-panel_001_004\" *ngIf=\"qmsInputImageFile\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.IMAGE_INFO }}</mat-label>\n                <textarea matInput [(ngModel)]=\"imageInfo\" formControlName=\"imageInfo\"></textarea>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n  <div id=\"qmsckeditor-template-panel_001_005\" class=\"qmsckeditor button__groups template-button-group row mr-0 ml-0 ms-0 me-0\">\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"!isEdit\">\n      <button class=\"delete\" mat-flat-button (click)=\"deleteTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.DELETE }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"!isEdit && selectedId === 0\">\n      <button class=\"save\" mat-flat-button (click)=\"saveTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.SAVE }}\n      </button>\n    </div>\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"isEdit\">\n      <button class=\"cancel\" mat-flat-button (click)=\"cancelTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.CANCEL }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"isEdit || selectedId !== 0\">\n      <button class=\"save\" mat-flat-button (click)=\"updateTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.UPDATE }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__template__container .mat-mdc-form-field{width:100%}.qmsckeditor__template__container textarea.mat-mdc-input-element{min-height:150px}.qmsckeditor__template__container .template-checkbox{padding-top:20px}.qmsckeditor__template__container .selected-image{display:flex;align-items:center;padding-bottom:10px}.qmsckeditor__template__container .selected-image .input-upload{height:60px}.qmsckeditor__template__container .form-content-height{min-height:350px;max-height:410px}.qmsckeditor__template__container .template-button-group{padding-top:10px;padding-right:.5rem;padding-left:.5rem}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i2.TranslateLibraryService }, { type: i3.QMSCKEditorTemplateService }, { type: i4.QMSCKEditorCommonService }, { type: i1.MatDialogRef }, { type: i5.MatIconRegistry }, { type: i6.DomSanitizer }, { type: i7.QMSCKEditorUploadService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }], propDecorators: { ckEditor: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 