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 { QMSCKEditorBaseComponent } from '../../qms-ckeditor-base.component';
import { QMSCKEditorTooltip } from '../../models/qms-ckeditor-tooltip.model';
import CKEditorCommonFunctions from '../../common/functions/common.function';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/translation-registry.service";
import * as i2 from "@angular/material/dialog";
import * as i3 from "../../services/qms-ckeditor-common.services";
import * as i4 from "@angular/material/icon";
import * as i5 from "@angular/material/expansion";
import * as i6 from "@angular/material/input";
import * as i7 from "@angular/material/form-field";
import * as i8 from "@angular/forms";
import * as i9 from "@angular/material/button";
import * as i10 from "../../models/qms-ckeditor-tooltip.model";
export class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
    constructor(cdr, translate, dialogRef, commonService, data) {
        super();
        this.cdr = cdr;
        this.translate = translate;
        this.dialogRef = dialogRef;
        this.commonService = commonService;
        this.data = data;
        this.tooltipFormGroup = new UntypedFormGroup({
            title: new UntypedFormControl('', [Validators.required]),
            content: new UntypedFormControl('', [Validators.required])
        });
        this.language = 'en';
        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.language = 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,|,removeformat', this.LANG, this.language);
    }
    ngAfterViewChecked() {
        this.cdr.detectChanges();
    }
    onCloseDialog() {
        const scrollTop = this.commonService.getScrollTopCkeditor(this.ckEditor);
        this.dialogRef.close();
        this.commonService.setScrollTopEditorContainer(this.ckEditor, scrollTop);
    }
    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;
        const scrollTop = this.commonService.getScrollTopCkeditor(this.ckEditor);
        this.dialogRef.close(tooltip);
        this.commonService.setScrollTopEditorContainer(this.ckEditor, scrollTop);
    }
    cancelTooltip() {
        this.onCloseDialog();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateLibraryService }, { token: i2.MatDialogRef }, { token: i3.QMSCKEditorCommonService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorTooltipComponent, selector: "app-qmsck-tooltip", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\n  <div id=\"qmsckeditor-tooltip-header\">\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\n      </h2>\n    </div>\n  </div>\n  <form [formGroup]=\"tooltipFormGroup\">\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n          <div id=\"qmsckeditor-tooltip-panel_001\">\n            <div id=\"qmsckeditor-tooltip-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 matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0 ps-0 pe-0\">\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n                  formControlName=\"content\">\n                </ckeditor>\n              </div>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n              <div class=\"col-6 pr-0 pe-0\">\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\n                  {{ LANG.QMSCKEDITOR.SAVE }}\n                </button>\n              </div>\n              <div class=\"col-6 pl-0 ps-0\">\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\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__tooltip__container .mat-mdc-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-mdc-input-element{min-height:150px}\n"], dependencies: [{ kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorTooltipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-qmsck-tooltip', template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\n  <div id=\"qmsckeditor-tooltip-header\">\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\n      </h2>\n    </div>\n  </div>\n  <form [formGroup]=\"tooltipFormGroup\">\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n          <div id=\"qmsckeditor-tooltip-panel_001\">\n            <div id=\"qmsckeditor-tooltip-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 matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0 ps-0 pe-0\">\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n                  formControlName=\"content\">\n                </ckeditor>\n              </div>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n              <div class=\"col-6 pr-0 pe-0\">\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\n                  {{ LANG.QMSCKEDITOR.SAVE }}\n                </button>\n              </div>\n              <div class=\"col-6 pl-0 ps-0\">\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\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__tooltip__container .mat-mdc-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-mdc-input-element{min-height:150px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateLibraryService }, { type: i2.MatDialogRef }, { type: i3.QMSCKEditorCommonService }, { type: i10.QMSCKEditorTooltip, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }], propDecorators: { ckEditor: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 