import { Component, Inject, Input } from '@angular/core';
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 { QMSCKEditorTemplateComponent } from '../qms-ckeditor-template/qms-ckeditor-template.component';
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/common";
import * as i6 from "@angular/material/icon";
import * as i7 from "@angular/material/checkbox";
import * as i8 from "@angular/material/card";
import * as i9 from "@angular/forms";
import * as i10 from "../../../directives/form.directive";
export class QMSCKEditorLoadTemplateComponent extends QMSCKEditorBaseComponent {
    constructor(dialog, translate, templateService, commonService, dialogRef, data) {
        super();
        this.dialog = dialog;
        this.translate = translate;
        this.templateService = templateService;
        this.commonService = commonService;
        this.dialogRef = dialogRef;
        this.data = data;
        this.templates = [];
        this.isReplace = false;
        this.stream_image = "/stream_image.aspx?iEntityId=";
        this.enableEditTemplate = data.enableEditTemplate;
    }
    ngOnInit() {
        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
            if (res) {
                this.LANG = this.translate.getObjectLang(res);
            }
        });
        this.getTemplate();
    }
    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.templates = response;
                this.templates.forEach((item) => {
                    item.imageUrl = this.stream_image + (item.imageId > 0 ? item.imageId.toString() : '0');
                });
            }
        });
    }
    onSelectTemplate(id) {
        const data = new QMSCKEditorDialogData();
        data.title = this.LANG.QMSCKEDITOR.CHANGE_TEMPLATE;
        data.content = this.LANG.QMSCKEDITOR_MESSAGE.CONFIRM_CHANGE_TEMPLATE;
        data.isAdvance = true;
        const dialogRef = this.dialog.open(QMSCKEditorConfirmComponent, {
            width: '500px',
            minHeight: '175px',
            data
        });
        dialogRef
            .afterClosed()
            .pipe(takeUntil(this.ngUnsubcribe))
            .subscribe((result) => {
            if (result) {
                const index = this.templates.findIndex((x) => {
                    return x.id === id;
                });
                const content = this.templates[index].html;
                const detail = {
                    content: content,
                    isReplace: this.isReplace,
                };
                const scrollTop = this.commonService.getScrollTopCkeditor(this.ckEditor);
                this.dialogRef.close(detail);
                this.commonService.setScrollTopEditorContainer(this.ckEditor, scrollTop);
            }
        });
    }
    onEditTemplate(id) {
        const index = this.templates.findIndex((x) => {
            return x.id === id;
        });
        const data = new QMSCKEditorTemplate();
        data.id = this.templates[index].id;
        data.html = this.templates[index].html;
        data.edit = true;
        const dialogTemplate = this.dialog.open(QMSCKEditorTemplateComponent, {
            width: '650px',
            height: '540px',
            data: { template: data },
            disableClose: true
        });
        dialogTemplate.componentInstance.ckEditor = this.ckEditor;
        dialogTemplate
            .afterClosed()
            .pipe(takeUntil(this.ngUnsubcribe))
            .subscribe((result) => {
            if (result) {
                this.templates[index].title = result.title;
                this.templates[index].description = result.description;
            }
        });
    }
    onDeleteTemplate(id) {
        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([id])
                    .pipe(takeUntil(this.ngUnsubcribe))
                    .subscribe((response) => {
                    if (response) {
                        const index = this.templates.findIndex((x) => {
                            return x.id === id;
                        });
                        if (index >= 0) {
                            this.templates.splice(index, 1);
                        }
                        QMSCKEditorToastService.success(this.LANG.QMSCKEDITOR.DELETED);
                    }
                    else {
                        QMSCKEditorToastService.error(this.LANG.QMSCKEDITOR.DELETE_FAILED);
                    }
                });
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorLoadTemplateComponent, deps: [{ token: i1.MatDialog }, { token: i2.TranslateLibraryService }, { token: i3.QMSCKEditorTemplateService }, { token: i4.QMSCKEditorCommonService }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorLoadTemplateComponent, selector: "app-qmsck-load-template", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-load-template\" class=\"qmsckeditor qmsckeditor__loadtemplate__container\">\n  <div id=\"qmsckeditor-load-template-header\">\n    <span id=\"qmsckeditor-load-template-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"load-template_002\">\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\n      <h2 id=\"load-template_002_001_001\">\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor-load-template-content\" class=\"qmsckeditor template-content height\">\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card appearance=\"outlined\" class=\"qmsckeditor card col-12\" *ngFor=\"let template of templates\">\n        <div class=\"row\">\n          <div class=\"qmsckeditor__cursor col-2\"> \n            <img class=\"image-template\" src=\"{{template.imageUrl}}\">\n          </div>\n          <div class=\"qmsckeditor__cursor col-8\" (click)=\"onSelectTemplate(template.id)\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ template.title }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ template.description }}</span>\n            </div>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n  <div class=\"option\">\n    <mat-checkbox qms-group-options [(ngModel)]=\"isReplace\" color=\"primary\">\n      {{ LANG.QMSCKEDITOR.REPLACE_CONTENT }}\n    </mat-checkbox>\n  </div>\n</div>", 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__loadtemplate__container .template-checkbox{padding-top:20px}.qmsckeditor__loadtemplate__container .option{padding-left:15px}.qmsckeditor__loadtemplate__container .image-template{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: i10.AutocompleteOffDirective, selector: "[qms-group-options]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorLoadTemplateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-qmsck-load-template', template: "<div id=\"qmsckeditor-load-template\" class=\"qmsckeditor qmsckeditor__loadtemplate__container\">\n  <div id=\"qmsckeditor-load-template-header\">\n    <span id=\"qmsckeditor-load-template-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"load-template_002\">\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\n      <h2 id=\"load-template_002_001_001\">\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor-load-template-content\" class=\"qmsckeditor template-content height\">\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card appearance=\"outlined\" class=\"qmsckeditor card col-12\" *ngFor=\"let template of templates\">\n        <div class=\"row\">\n          <div class=\"qmsckeditor__cursor col-2\"> \n            <img class=\"image-template\" src=\"{{template.imageUrl}}\">\n          </div>\n          <div class=\"qmsckeditor__cursor col-8\" (click)=\"onSelectTemplate(template.id)\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ template.title }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ template.description }}</span>\n            </div>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n  <div class=\"option\">\n    <mat-checkbox qms-group-options [(ngModel)]=\"isReplace\" color=\"primary\">\n      {{ LANG.QMSCKEDITOR.REPLACE_CONTENT }}\n    </mat-checkbox>\n  </div>\n</div>", 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__loadtemplate__container .template-checkbox{padding-top:20px}.qmsckeditor__loadtemplate__container .option{padding-left:15px}.qmsckeditor__loadtemplate__container .image-template{width:100%;height:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.TranslateLibraryService }, { type: i3.QMSCKEditorTemplateService }, { type: i4.QMSCKEditorCommonService }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }], propDecorators: { ckEditor: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 