import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../../../ui-kit/dialog/dialog-config";
import * as i2 from "../../../../ui-kit/dialog/dialog-ref";
import * as i3 from "@vcomply/editor";
import * as i4 from "@angular/forms";
import * as i5 from "../single-line-editor/single-line-editor.component";
export class AddPageDetailsComponent {
    constructor(config, dialogRef) {
        this.config = config;
        this.dialogRef = dialogRef;
        this.pageDetails = { pageName: '', pageNumber: 0, pageDescription: '' };
        this.description = {
            mode: 'prime',
            placeholder: 'Add description',
        };
        this.fd = config.data?.ref;
    }
    ngOnInit() {
        this.tempPageDetails = JSON.stringify(this.config.data);
        this.pageDetails.pageNumber = this.config.data.page;
        this.pageDetails.pageName = this.config.data.pageDetails.pageName;
        this.pageDetails.pageDescription = this.config.data.pageDetails.pageDescription;
        this.pageDesc = this.config.data.pageDetails.pageDescription;
        this.populatePageDetailsList();
    }
    savePageDetails() {
        this.pageDetails.pageName = this.extractContent(this.pageDetails.pageName).trim().length > 0 ? this.pageDetails.pageName : '';
        this.pageDetails.pageDescription = this.extractContent(this.pageDetails.pageDescription).trim().length > 0 ? this.pageDetails.pageDescription : '';
        this.fd.currentPageDetails = { ...this.pageDetails };
        this.populatePageDetailsList();
        if (this.pageDetails.pageName.trim().length > 0 || this.pageDetails.pageDescription.trim().length > 0) {
            this.fd.showAddPageOption = false;
            this.fd.showPageDetails = true;
        }
        else {
            this.fd.showAddPageOption = true;
            this.fd.showPageDetails = false;
        }
        this.dialogRef.close('SAVE');
    }
    extractContent(s) {
        var span = document.createElement('span');
        span.innerHTML = s;
        return span.textContent || span.innerText;
    }
    ;
    populatePageDetailsList() {
        let pagePresent = false;
        this.fd.formsPage.pageDetailsList.forEach((pageDetails) => {
            if (this.pageDetails.pageNumber === pageDetails.pageNumber) {
                pageDetails.pageName = this.pageDetails.pageName;
                pageDetails.pageDescription = this.pageDetails.pageDescription;
                pagePresent = true;
            }
        });
        if (!pagePresent) {
            this.fd.formsPage.pageDetailsList.push({ ...this.pageDetails });
        }
    }
    cancelPageDetails() {
        //this.cancel.emit();
        this.pageDetails = JSON.parse(this.tempPageDetails)?.pageDetails;
        this.fd.currentPageDetails = JSON.parse(this.tempPageDetails)?.pageDetails;
        this.populatePageDetailsList();
        this.dialogRef.close('CANCEL');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddPageDetailsComponent, deps: [{ token: i1.DialogConfig }, { token: i2.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddPageDetailsComponent, selector: "app-add-page-details", ngImport: i0, template: "<div class=\"form-dialog\">\n    <div class=\"form-dialog-heading vx-d-flex vx-align-center vx-justify-between vx-pt-3 vx-pb-3 vx-pl-4 vx-pr-4 vx-mb-5\">\n        <div class=\"heading vx-fs-14 vx-fw-500 vx-label-txt\">Add Page Details</div>\n        <button (click)=\"cancelPageDetails()\" class=\"close vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons vx-fs-16 vx-label-txt\">&#xe93f;</i></button>\n    </div>\n\n    <div class=\"form-dialog-mid vx-pb-5\">\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">PAGE TITLE</label>\n            <!-- <div class=\"input-field\">\n                <input type=\"text\" placeholder=\"Page title\" [class.error]=\"false\" />\n                <button class=\"action vx-fs-13 vx-label-txt vx-p-0 vx-m-0 vx-ad-flex vx-align-center vx-justify-center\" (click)=\"clickEditor()\">Aa</button>\n                <div class=\"editor-option\" *ngIf=\"showEditor\">\n                    <ul class=\"vx-d-flex vx-align-center vx-m-0\">\n                        <li><button class=\"vx-fs-13 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"true\">B</button></li>\n                        <li><button class=\"vx-fs-13 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"false\"><em>I</em></button></li>\n                        <li><button class=\"vx-fs-11 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"false\"><i class=\"icons\">&#xeb0a;</i></button></li>\n                    </ul>\n                </div>\n            </div> -->\n            <app-single-line-editor [placeholder]=\"'Page title'\" [label]=\"false\" [editorMode]=\"'multiline'\" [(ngModel)]=\"pageDetails.pageName\"></app-single-line-editor>\n            <!-- <div class=\"overlay\" *ngIf=\"showEditor\" ></div> -->\n        </div>\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">PAGE DESCRIPTION</label>\n            <vcomply-editor [editorConfig]=\"description\" [(ngModel)]='pageDetails.pageDescription'></vcomply-editor>\n        </div>\n    </div>\n    <div class=\"form-dialog-btn vx-mt-4 vx-p-3 vx-d-flex vx-align-center vx-justify-end\">\n        <button class=\"cancel-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-m-0 vx-p-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"cancelPageDetails()\">CANCEL</button>\n        <button class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-m-0 vx-ml-1 vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.disabled]=\"false\" (click)=\"savePageDetails()\">SAVE</button>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .form-dialog{background:#fff;width:31.25rem;height:100vh}::ng-deep .form-dialog-heading{background:#f8f8f8;border-bottom:1px solid #F1F1F1;height:2.75rem}::ng-deep .form-dialog-heading button.close{background:transparent;border:none;border-radius:0}::ng-deep .form-dialog-mid{padding-left:2rem;padding-right:2rem;height:calc(100vh - 8.125rem);overflow:auto}::ng-deep .form-dialog-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .form-dialog-mid .from-group{position:relative}::ng-deep .form-dialog-mid .from-group .input-field{position:relative;z-index:2}::ng-deep .form-dialog-mid .from-group .input-field input[type=text]{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.5rem .75rem;line-height:1.25rem;font-size:13px;font-weight:400;color:#747576;transition:all .2s ease-in-out;width:100%}::ng-deep .form-dialog-mid .from-group .input-field input[type=text]:hover,::ng-deep .form-dialog-mid .from-group .input-field input[type=text]:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-dialog-mid .from-group .input-field input[type=text]:hover+button.action,::ng-deep .form-dialog-mid .from-group .input-field input[type=text]:focus+button.action{border-color:#1e5dd3}::ng-deep .form-dialog-mid .from-group .input-field input[type=text]::placeholder{color:#dbdbdb;opacity:1}::ng-deep .form-dialog-mid .from-group .input-field button.action{background:#f1f1f1;border-radius:0 .25rem .25rem 0;border:1px solid #DBDBDB;border-left:none;position:absolute;top:0;right:0;width:2.5rem;height:2.5rem;transition:all .2s ease-in-out}::ng-deep .form-dialog-mid .from-group .input-field .editor-option{background:#161b2f;border-radius:0 0 .25rem .25rem;position:absolute;top:2.5rem;right:0;z-index:1}::ng-deep .form-dialog-mid .from-group .input-field .editor-option ul{list-style-type:none;padding:0 .125rem}::ng-deep .form-dialog-mid .from-group .input-field .editor-option ul li button{background:transparent;border:1px solid transparent;border-radius:0;width:2rem;height:2rem;margin:.25rem .125rem}::ng-deep .form-dialog-mid .from-group .input-field .editor-option ul li button.active{border-color:#f1f1f150}::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .editable-box.multiline{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.5rem 2.5rem .5rem .75rem!important;line-height:1.5rem;font-size:13px;font-weight:400;color:#747576;transition:all .2s ease-in-out;width:100%}::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .editable-box.multiline:hover,::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .editable-box.multiline:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .editable-box.multiline:before{color:#747576}::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .action{bottom:1px;right:1px;background:#fff;padding:.625rem;border-radius:0 .25rem .25rem 0}::ng-deep .form-dialog-mid .from-group vcomply-editor .editor-container .editable-block{max-height:calc(100vh - 400px)}::ng-deep .form-dialog-btn{background:#f8f8f8;border-top:1px solid #F1F1F1;height:3.125rem}::ng-deep .form-dialog-btn button{border-radius:.125rem;height:1.75rem;width:4.5rem}::ng-deep .form-dialog-btn button.cancel-btn{background:#fff;border:1px solid #F1F1F1}::ng-deep .form-dialog-btn button.save-btn{background:#1e5dd3;border:none}::ng-deep .form-dialog-btn button.disabled{background:#f1f1f1;color:#747576;pointer-events:none}\n"], dependencies: [{ kind: "component", type: i3.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.SingleLineEditorComponent, selector: "app-single-line-editor", inputs: ["placeholder", "editorMode", "label", "id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddPageDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-add-page-details', template: "<div class=\"form-dialog\">\n    <div class=\"form-dialog-heading vx-d-flex vx-align-center vx-justify-between vx-pt-3 vx-pb-3 vx-pl-4 vx-pr-4 vx-mb-5\">\n        <div class=\"heading vx-fs-14 vx-fw-500 vx-label-txt\">Add Page Details</div>\n        <button (click)=\"cancelPageDetails()\" class=\"close vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons vx-fs-16 vx-label-txt\">&#xe93f;</i></button>\n    </div>\n\n    <div class=\"form-dialog-mid vx-pb-5\">\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">PAGE TITLE</label>\n            <!-- <div class=\"input-field\">\n                <input type=\"text\" placeholder=\"Page title\" [class.error]=\"false\" />\n                <button class=\"action vx-fs-13 vx-label-txt vx-p-0 vx-m-0 vx-ad-flex vx-align-center vx-justify-center\" (click)=\"clickEditor()\">Aa</button>\n                <div class=\"editor-option\" *ngIf=\"showEditor\">\n                    <ul class=\"vx-d-flex vx-align-center vx-m-0\">\n                        <li><button class=\"vx-fs-13 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"true\">B</button></li>\n                        <li><button class=\"vx-fs-13 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"false\"><em>I</em></button></li>\n                        <li><button class=\"vx-fs-11 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"false\"><i class=\"icons\">&#xeb0a;</i></button></li>\n                    </ul>\n                </div>\n            </div> -->\n            <app-single-line-editor [placeholder]=\"'Page title'\" [label]=\"false\" [editorMode]=\"'multiline'\" [(ngModel)]=\"pageDetails.pageName\"></app-single-line-editor>\n            <!-- <div class=\"overlay\" *ngIf=\"showEditor\" ></div> -->\n        </div>\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">PAGE DESCRIPTION</label>\n            <vcomply-editor [editorConfig]=\"description\" [(ngModel)]='pageDetails.pageDescription'></vcomply-editor>\n        </div>\n    </div>\n    <div class=\"form-dialog-btn vx-mt-4 vx-p-3 vx-d-flex vx-align-center vx-justify-end\">\n        <button class=\"cancel-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-m-0 vx-p-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"cancelPageDetails()\">CANCEL</button>\n        <button class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-m-0 vx-ml-1 vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.disabled]=\"false\" (click)=\"savePageDetails()\">SAVE</button>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .form-dialog{background:#fff;width:31.25rem;height:100vh}::ng-deep .form-dialog-heading{background:#f8f8f8;border-bottom:1px solid #F1F1F1;height:2.75rem}::ng-deep .form-dialog-heading button.close{background:transparent;border:none;border-radius:0}::ng-deep .form-dialog-mid{padding-left:2rem;padding-right:2rem;height:calc(100vh - 8.125rem);overflow:auto}::ng-deep .form-dialog-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .form-dialog-mid .from-group{position:relative}::ng-deep .form-dialog-mid .from-group .input-field{position:relative;z-index:2}::ng-deep .form-dialog-mid .from-group .input-field input[type=text]{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.5rem .75rem;line-height:1.25rem;font-size:13px;font-weight:400;color:#747576;transition:all .2s ease-in-out;width:100%}::ng-deep .form-dialog-mid .from-group .input-field input[type=text]:hover,::ng-deep .form-dialog-mid .from-group .input-field input[type=text]:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-dialog-mid .from-group .input-field input[type=text]:hover+button.action,::ng-deep .form-dialog-mid .from-group .input-field input[type=text]:focus+button.action{border-color:#1e5dd3}::ng-deep .form-dialog-mid .from-group .input-field input[type=text]::placeholder{color:#dbdbdb;opacity:1}::ng-deep .form-dialog-mid .from-group .input-field button.action{background:#f1f1f1;border-radius:0 .25rem .25rem 0;border:1px solid #DBDBDB;border-left:none;position:absolute;top:0;right:0;width:2.5rem;height:2.5rem;transition:all .2s ease-in-out}::ng-deep .form-dialog-mid .from-group .input-field .editor-option{background:#161b2f;border-radius:0 0 .25rem .25rem;position:absolute;top:2.5rem;right:0;z-index:1}::ng-deep .form-dialog-mid .from-group .input-field .editor-option ul{list-style-type:none;padding:0 .125rem}::ng-deep .form-dialog-mid .from-group .input-field .editor-option ul li button{background:transparent;border:1px solid transparent;border-radius:0;width:2rem;height:2rem;margin:.25rem .125rem}::ng-deep .form-dialog-mid .from-group .input-field .editor-option ul li button.active{border-color:#f1f1f150}::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .editable-box.multiline{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.5rem 2.5rem .5rem .75rem!important;line-height:1.5rem;font-size:13px;font-weight:400;color:#747576;transition:all .2s ease-in-out;width:100%}::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .editable-box.multiline:hover,::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .editable-box.multiline:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .editable-box.multiline:before{color:#747576}::ng-deep .form-dialog-mid .from-group app-single-line-editor .single-line-editor .action{bottom:1px;right:1px;background:#fff;padding:.625rem;border-radius:0 .25rem .25rem 0}::ng-deep .form-dialog-mid .from-group vcomply-editor .editor-container .editable-block{max-height:calc(100vh - 400px)}::ng-deep .form-dialog-btn{background:#f8f8f8;border-top:1px solid #F1F1F1;height:3.125rem}::ng-deep .form-dialog-btn button{border-radius:.125rem;height:1.75rem;width:4.5rem}::ng-deep .form-dialog-btn button.cancel-btn{background:#fff;border:1px solid #F1F1F1}::ng-deep .form-dialog-btn button.save-btn{background:#1e5dd3;border:none}::ng-deep .form-dialog-btn button.disabled{background:#f1f1f1;color:#747576;pointer-events:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DialogConfig }, { type: i2.DialogRef }]; } });
//# sourceMappingURL=data:application/json;base64, 