import { ChangeDetectorRef, Component, Inject } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { takeUntil } from 'rxjs/operators';
import { TranslateLibraryService } from '../../../services/translation-registry.service';
import { QMSCKEditorBaseComponent } from '../../qms-ckeditor-base.component';
import { QMSCKEditorTooltip } from '../../models/qms-ckeditor-tooltip.model';
import CKEditorCommonFunctions from '../../common/functions/common.function';
export class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
    constructor(cdr, translate, dialogRef, data) {
        super();
        this.cdr = cdr;
        this.translate = translate;
        this.dialogRef = dialogRef;
        this.data = data;
        this.tooltipFormGroup = new FormGroup({
            title: new FormControl('', [Validators.required]),
            content: new FormControl('', [Validators.required])
        });
        this.tooltip = { text: data.text, content: data.content };
        this.editor = data.ckEditor;
    }
    ngOnInit() {
        this.translate.getLanguageSubject$.pipe(takeUntil(this.ngUnsubcribe)).subscribe((res) => {
            if (res) {
                this.LANG = this.translate.getObjectLang(res);
            }
        });
        this.editorConfig = CKEditorCommonFunctions.getCKEditorConfiguration('heading,|,fontsize,fontfamily,fontColor,fontBackgroundColor,|,bold,italic,underline,strikethrough,|,alignment,|,bulletedList,numberedList,|,outdent,indent,|,subscript,superscript,|,undo,redo,|,specialCharacters,blockQuote,insertTable,|,link,anchor,|,timestamp,|,removeformat');
    }
    ngAfterViewChecked() {
        this.cdr.detectChanges();
    }
    onCloseDialog() {
        this.dialogRef.close();
    }
    getOutputContent(content) {
        this.tooltip.content = content;
    }
    onChanged({ editor }) {
        this.tooltip.content = editor.getData();
    }
    onBlur({ editor }) {
        this.tooltip.content = editor.getData();
    }
    onReady(editor) {
        if (this.tooltip.text) {
            editor.setData(this.tooltip.text);
        }
        editor.ui.getEditableElement().parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
    }
    saveTooltip() {
        const tooltip = new QMSCKEditorTooltip();
        tooltip.content = this.tooltip.content;
        tooltip.text = this.tooltip.text;
        this.dialogRef.close(tooltip);
    }
    cancelTooltip() {
        this.dialogRef.close();
    }
}
QMSCKEditorTooltipComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-qmsck-tooltip',
                template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\r\n  <div id=\"qmsckeditor-tooltip-header\">\r\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n      (click)=\"onCloseDialog()\">\r\n      <mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\r\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\r\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\r\n      </h2>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"tooltipFormGroup\">\r\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\r\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\r\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n          <div id=\"qmsckeditor-tooltip-panel_001\">\r\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\r\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\r\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\r\n                <input matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\r\n              </mat-form-field>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\r\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\r\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0 ps-0 pe-0\">\r\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\r\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\r\n                  formControlName=\"content\">\r\n                </ckeditor>\r\n              </div>\r\n            </div>\r\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\r\n              <div class=\"col-6 pr-0 pe-0\">\r\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\r\n                  {{ LANG.QMSCKEDITOR.SAVE }}\r\n                </button>\r\n              </div>\r\n              <div class=\"col-6 pl-0 ps-0\">\r\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\r\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n    </div>\r\n  </form>\r\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-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{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 .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}.qmsckeditor__tooltip__container .mat-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-input-element{min-height:150px}"]
            },] }
];
QMSCKEditorTooltipComponent.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: TranslateLibraryService },
    { type: MatDialogRef },
    { type: QMSCKEditorTooltip, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];
//# sourceMappingURL=data:application/json;base64, 