import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { WORD_CONSTANTS, WORD_URL_CONSTANTS } from '../../workflow-policy/ms-word.constants';
import * as i0 from "@angular/core";
import * as i1 from "../../ui-kit/snack-bar/snack-bar.service";
import * as i2 from "../../workflow-services/policy.service";
import * as i3 from "../../workflow-services/policy-api.service";
import * as i4 from "@angular/router";
import * as i5 from "@angular/common";
import * as i6 from "../../services/iframe.service";
import * as i7 from "../../ui-kit/tooltip/tooltip.directive";
import * as i8 from "../v-loader/loader-inline/loader-inline.component";
export class DocumentSectionComponent {
    constructor(snackBar, policyService, policyAPIService, router, route, platformLocation, iframeService) {
        this.snackBar = snackBar;
        this.policyService = policyService;
        this.policyAPIService = policyAPIService;
        this.router = router;
        this.route = route;
        this.iframeService = iframeService;
        this.filename = '';
        this.fileType = '';
        this.pdf = false;
        this.draft = false;
        this.doc = false;
        this.isUploading = false;
        this.isLoader = false;
        this.ff_policy_ms_word_integration = false;
        this.createWordPolicyText = WORD_CONSTANTS.MS_WORD_OPTION;
        this.selectedDocumentType = '';
        this.templateView = false;
        this.policyId = '';
        this.policyName = '';
        this.organization_id = '';
        this.templateUrl = '';
        this.disconnectRefresh = new EventEmitter();
        this.editPolicy = new EventEmitter();
        this.openTemplate = new EventEmitter();
        this.baseURL = '';
        this.docxError = {
            visible: false,
            message: '',
        };
        this.showPdfBlock = true;
        this.showDocxBlock = true;
        this.baseURL = location?.origin;
        if (this.baseURL == 'http://localhost:4200') {
            this.baseURL = 'https://dev.v-comply.com';
        }
    }
    ngOnInit() {
        this.initialiseFeatureFlags();
        this.checkTemplateView();
        const data = JSON.parse(localStorage.getItem('lastFileNameAndType') ?? '"{}"');
        if (data.name !== null &&
            data.name !== undefined &&
            data.type !== null &&
            data.type !== undefined &&
            data.policyId == this.policyId) {
            this.selectedDocumentType = data.type;
            this.filename = data.name;
            localStorage.removeItem('lastFileNameAndType');
        }
    }
    checkTemplateView() {
        this.templateViewSubscription = this.policyService.templateView.subscribe((res) => {
            if (!res) {
                this.selectedDocumentType = '';
            }
        });
    }
    ngOnDestroy() {
        if (this.templateViewSubscription) {
            this.templateViewSubscription.unsubscribe();
        }
    }
    initialiseFeatureFlags() {
        this.ff_policy_ms_word_integration = this.feature.isFeatureEnabled('ff_policy_ms_word_integration');
    }
    redirectUserToWordPolicy() {
        window.open(WORD_URL_CONSTANTS.new_word_policy_url, '_blank');
        window.location.href = this.baseURL + WORD_URL_CONSTANTS.workroom_url + this.policyId;
    }
    createWordPolicy() {
        this.isLoader = true;
        this.policyAPIService.createWordPolicy(this.policyId).subscribe((res) => {
            if (res) {
                this.redirectUserToWordPolicy();
            }
            this.isLoader = false;
        }, (err) => {
            this.isLoader = false;
            this.snackBar.show(WORD_CONSTANTS.createWordPolicy_snackbar_message, 'alert');
        });
    }
    handleFileInput(files) {
        this.fileToUpload = files[0];
        this.filename = this.fileToUpload.name;
        this.fileType = this.fileToUpload.name
            .slice(this.fileToUpload.name.lastIndexOf('.') + 1, this.fileToUpload.name.length)
            .toLowerCase();
        if (this.fileType === 'pdf') {
            this.uploadFile({ file: this.fileToUpload, fileType: this.fileType });
        }
        else if (this.fileType === 'docx') {
            this.uploadFile({ file: this.fileToUpload, fileType: this.fileType });
        }
        else {
            this.snackBar.show('Please upload a valid file', 'alert');
        }
    }
    get isNextButtonDisabled() {
        return !this.selectedDocumentType || this.templateView || this.isLoader || this.isUploading;
    }
    uploadFile(event) {
        this.isUploading = true;
        if (event.fileType === 'docx') {
            this.changeDocType('docx');
            this.uploadDocxfile(event);
        }
        else if (event.fileType === 'pdf') {
            this.changeDocType('pdf');
            this.showPdfBlock = false;
            setTimeout(() => {
                this.showPdfBlock = true;
            }, 10);
            const uploadData = new FormData();
            uploadData.append('file', event.file);
            const path = 'o/' + this.organization_id + '/policy/';
            this.policyService.uploadFile(uploadData, this.policyId, path).subscribe((res) => {
                if (res) {
                    this.isUploading = false;
                }
            }, (err) => {
                console.log(err);
                this.snackBar.show("Oops! Something went wrong and we were unable to complete this action. Let's give it another try, shall we?", 'alert');
                this.isUploading = false;
                this.selectedDocumentType = '';
            });
        }
    }
    uploadDocxfile(event) {
        this.resetDocsError();
        this.showDocxBlock = false;
        setTimeout(() => {
            this.showDocxBlock = true;
        }, 10);
        const uploadData = new FormData();
        uploadData.append('file', event.file);
        const path = 'o/' + this.organization_id + '/policy/';
        this.policyService
            .uploadDocxFile(uploadData, this.policyId, path)
            .subscribe((res) => {
            if (res) {
                this.isUploading = false;
                if (res?.message?.includes('done')) {
                    this.resetDocsError();
                }
                else {
                    if (res.message?.includes('RangeError')) {
                        this.docxError = {
                            visible: true,
                            message: 'The file size is too large and cannot be uploaded.',
                        };
                    }
                    else {
                        this.docxError = {
                            visible: true,
                            message: 'Oops! An error occurred while uploading this file.',
                        };
                    }
                }
            }
        }, (err) => {
            this.snackBar.show("Oops! Something went wrong and we were unable to complete this action. Let's give it another try, shall we?", 'alert');
            this.isUploading = false;
            this.selectedDocumentType = '';
        });
    }
    resetUploads() {
        this.selectedDocumentType = '';
        this.filename = '';
        this.fileType = '';
        this.pdf = false;
        this.doc = false;
        this.isUploading = false;
        this.isLoader = false;
        this.resetDocsError();
    }
    resetDocsError() {
        this.docxError = {
            visible: false,
            message: '',
        };
    }
    changeDocType(event) {
        this.resetDocsError();
        if (this.selectedDocumentType === event) {
            this.selectedDocumentType = '';
            return;
        }
        this.selectedDocumentType = event;
        if (event === 'template') {
            this.openTemplateList();
        }
    }
    editor(event) {
        this.disconnectRefresh.emit(false);
        if (event === 'draft') {
            // If it is a draft go directly to the editor
            const uname = this.userInfo ? this.userInfo.name : '';
            const uid = this.member_obj_id;
            const name = this.policyName.trim();
            const id = this.policyId;
            this.isLoader = true;
            this.policyService
                .savePolicyDetails(uname, uid, id, name, '', 0)
                .subscribe((res) => {
                if (res) {
                    this.isLoader = false;
                    const url = this.baseURL + '/all/policy/edit-policy?id=' + this.policyId;
                    this.iframeService.redirectIfInIframe(url, true);
                }
            }, (err) => {
                this.isLoader = false;
                this.snackBar.show("Oops! Something went wrong and we were unable to complete this action. Let's give it another try, shall we?", 'alert');
            });
        }
        else if (event === 'docx') {
            const url = this.baseURL + '/all/policy/edit-policy?id=' + this.policyId;
            this.iframeService.redirectIfInIframe(url, true);
        }
        else if (event === 'word') {
            this.createWordPolicy();
        }
        else if (event === 'pdf') {
            // If it is a pdf send to the workroom
            const url = this.baseURL + '/all/policy/workroom?id=' + this.policyId;
            this.iframeService.redirectIfInIframe(url, true);
        }
        else if (event === 'template') {
            this.iframeService.redirectIfInIframe(this.templateUrl, true);
        }
        localStorage.setItem('_dId', this.policyId);
    }
    editPolicyEmit() {
        this.selectedDocumentType = '';
        localStorage.setItem('lastFileNameAndType', JSON.stringify({
            type: this.selectedDocumentType,
            name: this.filename,
            policyId: this.policyId,
        }));
        this.editPolicy.emit();
    }
    openTemplateList() {
        this.openTemplate.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentSectionComponent, deps: [{ token: i1.SnackBarService }, { token: i2.PolicyService }, { token: i3.PolicyAPIService }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i5.PlatformLocation }, { token: i6.IframeService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DocumentSectionComponent, selector: "lib-document-section", inputs: { selectedDocumentType: "selectedDocumentType", feature: "feature", templateView: "templateView", policyId: "policyId", policyName: "policyName", organization_id: "organization_id", member_obj_id: "member_obj_id", userInfo: "userInfo", templateUrl: "templateUrl" }, outputs: { disconnectRefresh: "disconnectRefresh", editPolicy: "editPolicy", openTemplate: "openTemplate" }, ngImport: i0, template: "<div class=\"document-section\" [class.grayscale]=\"templateView\" [class.no-pointer]=\"isUploading\">\n  <div class=\"document-section-inner\">\n    <div class=\"message-box\">\n      <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\" y=\"0px\" viewBox=\"0 0 480.8 480.8\" style=\"enable-background: new 0 0 480.8 480.8\" xml:space=\"preserve\">\n        <path style=\"fill: #ffd517\"\n          d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\n                                        c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\" />\n        <g>\n          <path style=\"fill: #e5e5e5\" d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n                                            h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\" />\n          <path style=\"fill: #e5e5e5\" d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n                                            h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\" />\n        </g>\n        <g>\n          <path style=\"fill: #210b20\" d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\n                                            c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\n                                            s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\n                                            c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\n                                            c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\n                                            c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\n                                            c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\n                                            c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\n                                            c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\n                                            c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\" />\n          <path style=\"fill: #210b20\" d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\n                                            C244.712,66.4,247.912,63.2,247.912,58.8z\" />\n          <path style=\"fill: #210b20\" d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\n                                            c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\n                                            c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\n                                            l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\n                                            l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\" />\n        </g>\n      </svg>\n      <p>\n        There are multiple ways to create a policy on VComply. You can either draft it from scratch using VComply's\n        online editor{{ ff_policy_ms_word_integration ? ' or Create a Policy Using MS Word' : '' }}{{ showDocxBlock ? '\n        or Upload an Existing DOCX file' : '' }}{{ showPdfBlock ? ' or Upload an Existing PDF file' : '' }} or Draft\n        Using a Template.\n      </p>\n    </div>\n    <label class=\"document-box\" [class.active]=\"selectedDocumentType == 'draft'\">\n      <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('draft')\"\n        [checked]=\"selectedDocumentType === 'draft'\" />\n      <svg id=\"Draft\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20402\" data-name=\"Path 20402\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#565a6f\" />\n        <path id=\"Path_20403\" data-name=\"Path 20403\"\n          d=\"M21.884,8.51,10.549,10.384,12.426,21.06l4.38-.61a.333.333,0,0,1,.326.435c-.051.219-.338.235-.514.267-1.474.266-3.009.388-4.491.631-.416-.032-.321-.718-.441-1l-3-.365c-.213-.12-.2-.273-.2-.492.019-.622.092-1.251.125-1.872.16-3,.316-6,.5-8.993A9.457,9.457,0,0,1,9.152,8.1a.369.369,0,0,1,.265-.3l8.519.681L22.2,7.8c.225.068.246.19.3.393.553,2.288.758,4.775,1.285,7.083.143.531-.507.731-.642.2ZM17.211,21.932a.563.563,0,0,0-.072.24,8.549,8.549,0,0,0,0,1.187c.019.217.088.393.328.421a9.138,9.138,0,0,0,1.448-.021.53.53,0,0,0,.122-.065l3.756-3.771L21,18.13Zm5.329-5.35c-.365.286-.7.757-1.061,1.062L23.3,19.437c.3-.35.777-.687,1.05-1.044.15-.2.174-.312.017-.516a13.851,13.851,0,0,0-1.327-1.327.393.393,0,0,0-.23-.1.476.476,0,0,0-.271.13\"\n          fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\"><strong>Create</strong> a Policy</div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n        <div class=\"check-circle\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n      </div>\n    </label>\n\n\n    <label *ngIf=\"ff_policy_ms_word_integration\" class=\"document-box\" [class.active]=\"selectedDocumentType == 'word'\">\n      <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('word')\"\n        [checked]=\"selectedDocumentType === 'word'\" />\n      <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20404\" data-name=\"Path 20404\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\" />\n        <path id=\"Path_20405\" data-name=\"Path 20405\"\n          d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\"\n          fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\">{{createWordPolicyText}}</div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n        <div class=\"check-circle\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n      </div>\n    </label>\n\n\n\n    <label class=\"document-box\" *ngIf=\"showDocxBlock\"\n      [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\" [class.error]=\"docxError?.visible\"\n      (click)=\"resetUploads()\">\n      <input type=\"file\" accept=\".docx\" id=\"DOCfile\" (change)=\"handleFileInput($event.target.files)\"\n        onclick=\"event.stopPropagation();\" #docxUploadButton />\n      <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20404\" data-name=\"Path 20404\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\" />\n        <path id=\"Path_20405\" data-name=\"Path 20405\"\n          d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\"\n          fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\">\n          <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\">Upload a\n            <strong>DOCX</strong></ng-container>\n          <span *ngIf=\"selectedDocumentType == 'docx' && filename\" [appTooltip]=\"filename\" placement=\"bottom-left\"\n            delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n            filename\n            }}</span>\n        </div>\n        <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n          {{ docxError?.message }}\n        </div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n        <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n        <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n      </div>\n      <div class=\"line-progress\" *ngIf=\"selectedDocumentType == 'docx' && isUploading\">\n        <div class=\"line-progress-bar\"></div>\n      </div>\n    </label>\n    <label class=\"document-box\" *ngIf=\"showPdfBlock\" [class.active]=\"selectedDocumentType == 'pdf'\"\n      (click)=\"resetUploads()\">\n      <input type=\"file\" accept=\".pdf\" id=\"PDFfile\" (change)=\"handleFileInput($event.target.files)\"\n        onclick=\"event.stopPropagation();\" #pdfUploadButton />\n      <svg id=\"PDF-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20408\" data-name=\"Path 20408\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#a82a1d\" />\n        <path id=\"Path_20409\" data-name=\"Path 20409\"\n          d=\"M16.125,13.778A1.39,1.39,0,0,0,16.285,15a16.106,16.106,0,0,0,2.106,2.554c.312-.045.6-.047,1.2-.092a6.964,6.964,0,0,1,3.616.239,1.31,1.31,0,0,1,.784,1.361,1.176,1.176,0,0,1-1.075.981c-2.224.336-3.305-.9-4.579-1.746a2.094,2.094,0,0,0-.812.021,25.782,25.782,0,0,0-3.412.916c-.253.089-.338.3-.533.609a11.062,11.062,0,0,1-2.82,3.427,2.145,2.145,0,0,1-1.861.445c-1-.222-1.178-1.182-.5-1.942A9.452,9.452,0,0,1,10,20.462a14.714,14.714,0,0,1,2.418-1.109c.491-.461.556-.686.966-1.764.431-1.136.922-2.25,1.324-3.4a1.679,1.679,0,0,0-.035-1.062,7.7,7.7,0,0,1-.638-3.476,1.4,1.4,0,0,1,.959-1.393,1.279,1.279,0,0,1,1.464.8c.2.479.552,1.75-.331,4.728m-.377,1.377-1.418,3.422,3.353-.883-1.935-2.539m3.222,2.882A4.5,4.5,0,0,0,21.92,19.37c.377,0,.714-.131.733-.6.051-1.251-2.656-.864-3.682-.73m-6.96,2.037a9.788,9.788,0,0,0-2.975,1.8c-.218.171-.446.718-.282.984s.81.067,1-.12a9.29,9.29,0,0,0,2.253-2.664m3.246-7.243c-.045-.878.461-2.172.437-3.224-.008-.355-.051-.747-.5-.772-.364-.02-.534.476-.569.762a5.8,5.8,0,0,0,.636,3.234\"\n          fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\">\n          <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\">Upload a\n            <strong>PDF</strong></ng-container>\n          <span *ngIf=\"selectedDocumentType == 'pdf' && filename\" [appTooltip]=\"filename\" placement=\"bottom-left\"\n            delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n            filename\n            }}</span>\n        </div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n        <div class=\"check-circle\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n      </div>\n      <div class=\"line-progress\" *ngIf=\"selectedDocumentType == 'pdf' && isUploading\">\n        <div class=\"line-progress-bar\"></div>\n      </div>\n    </label>\n    <!-- Select a template -->\n    <label class=\"document-box\" [class.active]=\"selectedDocumentType === 'template'\">\n      <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('template')\"\n        [checked]=\"selectedDocumentType === 'template'\" />\n      <svg id=\"TMP-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20406\" data-name=\"Path 20406\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#34aa44\" />\n        <path id=\"Path_20410\" data-name=\"Path 20410\"\n          d=\"M16,1.778V3.555H0V1.778A1.783,1.783,0,0,1,1.778,0H14.223A1.783,1.783,0,0,1,16,1.778M0,4.444H16v8.889a1.778,1.778,0,0,1-1.777,1.778H1.778A1.778,1.778,0,0,1,0,13.333ZM6.99,9.928A.891.891,0,0,0,6.1,9.039H3.642a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889H6.1a.891.891,0,0,0,.888-.889Zm6.306,0a.892.892,0,0,0-.889-.889H9.948a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889h2.459a.892.892,0,0,0,.889-.889ZM2.667,7.111A.889.889,0,0,0,3.556,8h8.889a.889.889,0,0,0,0-1.778H3.556a.889.889,0,0,0-.889.889\"\n          transform=\"translate(8 7.999)\" fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\">Draft Using a <strong>Template</strong></div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n        <div class=\"check-circle\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n      </div>\n    </label>\n    <!-- End Select a template -->\n    <app-loader-inline *ngIf=\"isLoader\"></app-loader-inline>\n  </div>\n</div>\n<div class=\"bottom-button\" [class.grayscale]=\"templateView\">\n  <button type=\"button\" (click)=\"editPolicyEmit()\" class=\"back\" [class.disabled]=\"templateView\">\n    <i class=\"icons\">&#xe91d;</i> Back\n  </button>\n  <button type=\"button\" (click)=\"editor(selectedDocumentType)\" class=\"next\"\n    [class.disabled]=\"isNextButtonDisabled || isUploading\">\n    Next <i class=\"icons\">&#xe91e;</i>\n  </button>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%;overflow:hidden;overflow-y:scroll}@media screen and (max-width: 1365px){::ng-deep .document-section{align-items:unset}}::ng-deep .document-section.grayscale{filter:grayscale(1)!important;pointer-events:none!important}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#787a8c;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #CDCED6;border-radius:8px;width:100%;background:transparent;height:64px;padding:0 16px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;inset:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 64px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;font-weight:500;line-height:24px;color:#000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:270px;margin-right:25px}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:24px;left:0;right:0;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:16px;height:16px;position:absolute;right:8px;top:2px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:16px;height:16px;background:#ddf4e0;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:16px;position:relative;top:0;right:8px}::ng-deep .document-section-inner .document-box.active{background:#ddf4e0;border:1px solid #B7E2BD}::ng-deep .document-section-inner .document-box.active .document-box-icon{display:none}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}::ng-deep .document-section-inner .document-box-icon{color:#565a6f}::ng-deep .document-section.no-pointer{pointer-events:none}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i8.LoaderInlineComponent, selector: "app-loader-inline" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentSectionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-document-section', template: "<div class=\"document-section\" [class.grayscale]=\"templateView\" [class.no-pointer]=\"isUploading\">\n  <div class=\"document-section-inner\">\n    <div class=\"message-box\">\n      <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\" y=\"0px\" viewBox=\"0 0 480.8 480.8\" style=\"enable-background: new 0 0 480.8 480.8\" xml:space=\"preserve\">\n        <path style=\"fill: #ffd517\"\n          d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\n                                        c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\" />\n        <g>\n          <path style=\"fill: #e5e5e5\" d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n                                            h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\" />\n          <path style=\"fill: #e5e5e5\" d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n                                            h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\" />\n        </g>\n        <g>\n          <path style=\"fill: #210b20\" d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\n                                            c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\n                                            s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\n                                            c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\n                                            c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\n                                            c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\n                                            c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\n                                            c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\n                                            c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\n                                            c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\" />\n          <path style=\"fill: #210b20\" d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\n                                            C244.712,66.4,247.912,63.2,247.912,58.8z\" />\n          <path style=\"fill: #210b20\" d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\n                                            c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\n                                            c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\n                                            l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\" />\n          <path style=\"fill: #210b20\"\n            d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\n                                            l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\" />\n        </g>\n      </svg>\n      <p>\n        There are multiple ways to create a policy on VComply. You can either draft it from scratch using VComply's\n        online editor{{ ff_policy_ms_word_integration ? ' or Create a Policy Using MS Word' : '' }}{{ showDocxBlock ? '\n        or Upload an Existing DOCX file' : '' }}{{ showPdfBlock ? ' or Upload an Existing PDF file' : '' }} or Draft\n        Using a Template.\n      </p>\n    </div>\n    <label class=\"document-box\" [class.active]=\"selectedDocumentType == 'draft'\">\n      <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('draft')\"\n        [checked]=\"selectedDocumentType === 'draft'\" />\n      <svg id=\"Draft\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20402\" data-name=\"Path 20402\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#565a6f\" />\n        <path id=\"Path_20403\" data-name=\"Path 20403\"\n          d=\"M21.884,8.51,10.549,10.384,12.426,21.06l4.38-.61a.333.333,0,0,1,.326.435c-.051.219-.338.235-.514.267-1.474.266-3.009.388-4.491.631-.416-.032-.321-.718-.441-1l-3-.365c-.213-.12-.2-.273-.2-.492.019-.622.092-1.251.125-1.872.16-3,.316-6,.5-8.993A9.457,9.457,0,0,1,9.152,8.1a.369.369,0,0,1,.265-.3l8.519.681L22.2,7.8c.225.068.246.19.3.393.553,2.288.758,4.775,1.285,7.083.143.531-.507.731-.642.2ZM17.211,21.932a.563.563,0,0,0-.072.24,8.549,8.549,0,0,0,0,1.187c.019.217.088.393.328.421a9.138,9.138,0,0,0,1.448-.021.53.53,0,0,0,.122-.065l3.756-3.771L21,18.13Zm5.329-5.35c-.365.286-.7.757-1.061,1.062L23.3,19.437c.3-.35.777-.687,1.05-1.044.15-.2.174-.312.017-.516a13.851,13.851,0,0,0-1.327-1.327.393.393,0,0,0-.23-.1.476.476,0,0,0-.271.13\"\n          fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\"><strong>Create</strong> a Policy</div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n        <div class=\"check-circle\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n      </div>\n    </label>\n\n\n    <label *ngIf=\"ff_policy_ms_word_integration\" class=\"document-box\" [class.active]=\"selectedDocumentType == 'word'\">\n      <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('word')\"\n        [checked]=\"selectedDocumentType === 'word'\" />\n      <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20404\" data-name=\"Path 20404\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\" />\n        <path id=\"Path_20405\" data-name=\"Path 20405\"\n          d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\"\n          fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\">{{createWordPolicyText}}</div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n        <div class=\"check-circle\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n      </div>\n    </label>\n\n\n\n    <label class=\"document-box\" *ngIf=\"showDocxBlock\"\n      [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\" [class.error]=\"docxError?.visible\"\n      (click)=\"resetUploads()\">\n      <input type=\"file\" accept=\".docx\" id=\"DOCfile\" (change)=\"handleFileInput($event.target.files)\"\n        onclick=\"event.stopPropagation();\" #docxUploadButton />\n      <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20404\" data-name=\"Path 20404\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\" />\n        <path id=\"Path_20405\" data-name=\"Path 20405\"\n          d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\"\n          fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\">\n          <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\">Upload a\n            <strong>DOCX</strong></ng-container>\n          <span *ngIf=\"selectedDocumentType == 'docx' && filename\" [appTooltip]=\"filename\" placement=\"bottom-left\"\n            delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n            filename\n            }}</span>\n        </div>\n        <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n          {{ docxError?.message }}\n        </div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n        <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n        <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n      </div>\n      <div class=\"line-progress\" *ngIf=\"selectedDocumentType == 'docx' && isUploading\">\n        <div class=\"line-progress-bar\"></div>\n      </div>\n    </label>\n    <label class=\"document-box\" *ngIf=\"showPdfBlock\" [class.active]=\"selectedDocumentType == 'pdf'\"\n      (click)=\"resetUploads()\">\n      <input type=\"file\" accept=\".pdf\" id=\"PDFfile\" (change)=\"handleFileInput($event.target.files)\"\n        onclick=\"event.stopPropagation();\" #pdfUploadButton />\n      <svg id=\"PDF-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20408\" data-name=\"Path 20408\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#a82a1d\" />\n        <path id=\"Path_20409\" data-name=\"Path 20409\"\n          d=\"M16.125,13.778A1.39,1.39,0,0,0,16.285,15a16.106,16.106,0,0,0,2.106,2.554c.312-.045.6-.047,1.2-.092a6.964,6.964,0,0,1,3.616.239,1.31,1.31,0,0,1,.784,1.361,1.176,1.176,0,0,1-1.075.981c-2.224.336-3.305-.9-4.579-1.746a2.094,2.094,0,0,0-.812.021,25.782,25.782,0,0,0-3.412.916c-.253.089-.338.3-.533.609a11.062,11.062,0,0,1-2.82,3.427,2.145,2.145,0,0,1-1.861.445c-1-.222-1.178-1.182-.5-1.942A9.452,9.452,0,0,1,10,20.462a14.714,14.714,0,0,1,2.418-1.109c.491-.461.556-.686.966-1.764.431-1.136.922-2.25,1.324-3.4a1.679,1.679,0,0,0-.035-1.062,7.7,7.7,0,0,1-.638-3.476,1.4,1.4,0,0,1,.959-1.393,1.279,1.279,0,0,1,1.464.8c.2.479.552,1.75-.331,4.728m-.377,1.377-1.418,3.422,3.353-.883-1.935-2.539m3.222,2.882A4.5,4.5,0,0,0,21.92,19.37c.377,0,.714-.131.733-.6.051-1.251-2.656-.864-3.682-.73m-6.96,2.037a9.788,9.788,0,0,0-2.975,1.8c-.218.171-.446.718-.282.984s.81.067,1-.12a9.29,9.29,0,0,0,2.253-2.664m3.246-7.243c-.045-.878.461-2.172.437-3.224-.008-.355-.051-.747-.5-.772-.364-.02-.534.476-.569.762a5.8,5.8,0,0,0,.636,3.234\"\n          fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\">\n          <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\">Upload a\n            <strong>PDF</strong></ng-container>\n          <span *ngIf=\"selectedDocumentType == 'pdf' && filename\" [appTooltip]=\"filename\" placement=\"bottom-left\"\n            delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n            filename\n            }}</span>\n        </div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n        <div class=\"check-circle\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n      </div>\n      <div class=\"line-progress\" *ngIf=\"selectedDocumentType == 'pdf' && isUploading\">\n        <div class=\"line-progress-bar\"></div>\n      </div>\n    </label>\n    <!-- Select a template -->\n    <label class=\"document-box\" [class.active]=\"selectedDocumentType === 'template'\">\n      <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('template')\"\n        [checked]=\"selectedDocumentType === 'template'\" />\n      <svg id=\"TMP-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n        <path id=\"Path_20406\" data-name=\"Path 20406\"\n          d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#34aa44\" />\n        <path id=\"Path_20410\" data-name=\"Path 20410\"\n          d=\"M16,1.778V3.555H0V1.778A1.783,1.783,0,0,1,1.778,0H14.223A1.783,1.783,0,0,1,16,1.778M0,4.444H16v8.889a1.778,1.778,0,0,1-1.777,1.778H1.778A1.778,1.778,0,0,1,0,13.333ZM6.99,9.928A.891.891,0,0,0,6.1,9.039H3.642a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889H6.1a.891.891,0,0,0,.888-.889Zm6.306,0a.892.892,0,0,0-.889-.889H9.948a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889h2.459a.892.892,0,0,0,.889-.889ZM2.667,7.111A.889.889,0,0,0,3.556,8h8.889a.889.889,0,0,0,0-1.778H3.556a.889.889,0,0,0-.889.889\"\n          transform=\"translate(8 7.999)\" fill=\"#fff\" />\n      </svg>\n\n      <div class=\"label-right\">\n        <div class=\"value\">Draft Using a <strong>Template</strong></div>\n        <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n        <div class=\"check-circle\">\n          <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n        </div>\n      </div>\n    </label>\n    <!-- End Select a template -->\n    <app-loader-inline *ngIf=\"isLoader\"></app-loader-inline>\n  </div>\n</div>\n<div class=\"bottom-button\" [class.grayscale]=\"templateView\">\n  <button type=\"button\" (click)=\"editPolicyEmit()\" class=\"back\" [class.disabled]=\"templateView\">\n    <i class=\"icons\">&#xe91d;</i> Back\n  </button>\n  <button type=\"button\" (click)=\"editor(selectedDocumentType)\" class=\"next\"\n    [class.disabled]=\"isNextButtonDisabled || isUploading\">\n    Next <i class=\"icons\">&#xe91e;</i>\n  </button>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%;overflow:hidden;overflow-y:scroll}@media screen and (max-width: 1365px){::ng-deep .document-section{align-items:unset}}::ng-deep .document-section.grayscale{filter:grayscale(1)!important;pointer-events:none!important}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#787a8c;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #CDCED6;border-radius:8px;width:100%;background:transparent;height:64px;padding:0 16px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;inset:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 64px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;font-weight:500;line-height:24px;color:#000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:270px;margin-right:25px}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:24px;left:0;right:0;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:16px;height:16px;position:absolute;right:8px;top:2px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:16px;height:16px;background:#ddf4e0;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:16px;position:relative;top:0;right:8px}::ng-deep .document-section-inner .document-box.active{background:#ddf4e0;border:1px solid #B7E2BD}::ng-deep .document-section-inner .document-box.active .document-box-icon{display:none}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}::ng-deep .document-section-inner .document-box-icon{color:#565a6f}::ng-deep .document-section.no-pointer{pointer-events:none}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.SnackBarService }, { type: i2.PolicyService }, { type: i3.PolicyAPIService }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i5.PlatformLocation }, { type: i6.IframeService }]; }, propDecorators: { selectedDocumentType: [{
                type: Input
            }], feature: [{
                type: Input
            }], templateView: [{
                type: Input
            }], policyId: [{
                type: Input
            }], policyName: [{
                type: Input
            }], organization_id: [{
                type: Input
            }], member_obj_id: [{
                type: Input
            }], userInfo: [{
                type: Input
            }], templateUrl: [{
                type: Input
            }], disconnectRefresh: [{
                type: Output
            }], editPolicy: [{
                type: Output
            }], openTemplate: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 