import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
import { forkJoin } from 'rxjs';
import { NO_DATA_FOUND_IMAGE, NO_DATA_FOUND_MESSAGE, } from '../constants/template.constant';
import * as i0 from "@angular/core";
import * as i1 from "../services/template.service";
import * as i2 from "../../../workflow-services/policy.service";
import * as i3 from "../../../configurations";
import * as i4 from "@angular/common";
import * as i5 from "../../../ui-kit/tooltip/tooltip.directive";
import * as i6 from "../../no-data/no-data.component";
import * as i7 from "../../v-loader/loader-inline/loader-inline.component";
import * as i8 from "../../../ui-kit/multi-select/cs-multiselect/cs-multiselect.component";
import * as i9 from "../../../ui-kit/multi-select/cs-multiselect-option/cs-multiselect-option.component";
import * as i10 from "../../floating-bar/floating-bar.component";
import * as i11 from "@angular/forms";
import * as i12 from "ngx-doc-viewer";
import * as i13 from "../template-list-table/template-list-table.component";
import * as i14 from "../template-pipes/search-template.pipe";
export class SelectTemplateListComponent {
    constructor(templateService, policyService, config) {
        this.templateService = templateService;
        this.policyService = policyService;
        this.fileUrl = '';
        this.animation = false;
        this.defaultTemplates = [];
        this.customTemplates = null;
        this.templateList = [];
        this.currentTab = 'VCOMPLY';
        this.loader = false;
        this.categoryList = [];
        this.defaultCategoryList = [];
        this.userCreatedCategoryList = [];
        this.sortStatus = -1;
        this.searchCategory = '';
        this.searchTemplate = '';
        this.selectedCategory = [];
        this.NO_DATA_FOUND_IMAGE = NO_DATA_FOUND_IMAGE;
        this.NO_DATA_FOUND_MESSAGE = NO_DATA_FOUND_MESSAGE;
        this.selectedTemplate = [];
        this.isPreview = false;
        this.selectedCategoryId = [];
        this.onTemplateSelect = new EventEmitter();
        if (config) {
            this.env = config?.envConfig;
        }
    }
    ngOnInit() {
        this.setAnimation();
        this.getTemplate();
    }
    setAnimation() {
        this.animation = true;
        setTimeout(() => {
            this.animation = false;
        }, 300);
    }
    switchTab(tab) {
        this.currentTab = tab;
        this.selectedCategory = [];
        if (tab === 'VCOMPLY') {
            this.templateList = [...this.defaultTemplates];
            this.categoryList = this.defaultCategoryList;
        }
        else {
            if (this.customTemplates === null) {
                this.getCustomTemplates();
            }
            else {
                this.templateList = [...this.customTemplates];
                this.categoryList = this.userCreatedCategoryList;
            }
        }
    }
    getCustomTemplates() {
        this.loader = true;
        const payload = {
            type: 'custom',
            categoryId: this.selectedCategoryId.map((category) => category.item_id),
        };
        this.templateService.fetchTemplates(payload).subscribe((res) => {
            this.customTemplates = res?.templates ?? [];
            this.mapCustomTemplate();
        });
    }
    mapCustomTemplate() {
        this.policyService.getCategoriesList().subscribe((res) => {
            this.userCreatedCategoryList = [...res];
            this.userCreatedCategoryList = this.userCreatedCategoryList.map((res) => {
                const parentItems = [...new Set(res?.parent_items ?? [])];
                parentItems.unshift(res.item_name);
                return {
                    ...res,
                    name: parentItems?.join(' < '),
                    parent_items: res?.parent_items.reverse(),
                };
            });
            if (this.customTemplates) {
                this.customTemplates = this.customTemplates.map((template) => {
                    return {
                        ...template,
                        categoryDetails: this.userCreatedCategoryList.filter((category) => template?.categoryId?.includes(category.item_id)),
                    };
                });
            }
            this.templateList = [...new Set(this.customTemplates ?? [])];
            if (this.selectedCategoryId?.length) {
                const categoryIds = this.selectedCategoryId.map((category) => category.item_id);
                this.userCreatedCategoryList = this.userCreatedCategoryList.filter((category) => categoryIds?.includes(category.item_id));
            }
            this.loader = false;
            this.categoryList = this.userCreatedCategoryList;
        });
    }
    getTemplate() {
        this.loader = true;
        const payload = {
            type: 'default',
        };
        forkJoin([
            this.templateService.fetchTemplates(payload),
            this.templateService.fetchDefaultCategories(),
        ]).subscribe((res) => {
            this.defaultTemplates = res[0]?.templates;
            this.defaultCategoryList = res[1];
            this.mapDefaultTemplate();
            this.categoryList = [...new Set(this.defaultCategoryList)];
            this.templateList = this.defaultTemplates;
            this.loader = false;
        });
    }
    mapDefaultTemplate() {
        this.defaultTemplates = this.defaultTemplates.map((template) => {
            const category = this.defaultCategoryList.filter((category) => template?.categoryId?.includes(category.item_id));
            return {
                ...template,
                categoryDetails: category,
            };
        });
    }
    sortBy(key) {
        this.sortStatus = this.sortStatus * -1;
        this.templateList = this.templateService.sortByKey(this.templateList, key, this.sortStatus);
    }
    onSelectCategory(category, event) {
        if (event.target.checked) {
            this.selectedCategory.push(category?.item_id);
        }
        else {
            this.selectedCategory = this.selectedCategory.filter((id) => id !== category?.item_id);
        }
        this.selectedCategory = [...new Set(this.selectedCategory)];
    }
    onRestoreSelectedData(event) {
        if (event?.length === 0) {
            this.selectedCategory = [];
        }
        else {
            this.selectedCategory = [...new Set(event)];
        }
    }
    onApplyFilter(event) {
        if (!event) {
            this.selectedCategory = [];
            return;
        }
        let selectedTemplate = this.currentTab === 'VCOMPLY'
            ? this.defaultTemplates
            : this.customTemplates ?? [];
        selectedTemplate = [...new Set(selectedTemplate)];
        if (this.selectedCategory.length === 0) {
            this.templateList = selectedTemplate;
            return;
        }
        this.templateList = selectedTemplate.filter((template) => {
            return template?.categoryId?.some((id) => this.selectedCategory.includes(id));
        });
    }
    onSelectTemplate(template) {
        this.selectedTemplate = [template];
    }
    save() {
        this.onTemplateSelect.emit(this.selectedTemplate);
    }
    close() {
        this.onTemplateSelect.emit([]);
    }
    deleteEvent() {
        this.selectedTemplate = [];
    }
    onPreview(details) {
        this.loader = false;
        this.isPreview = true;
        this.previewTemplate = details;
        this.fileUrl = `${this.env?.s3Url}${this.env?.s3Bucket}/${details?.s3DocxPath}`;
        console.log(this.fileUrl, 'fileUrl');
    }
    onClosePreview() {
        this.isPreview = false;
        this.previewTemplate = null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectTemplateListComponent, deps: [{ token: i1.TemplateService }, { token: i2.PolicyService }, { token: i3.Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectTemplateListComponent, selector: "app-select-template-list", inputs: { selectedCategoryId: "selectedCategoryId", feature: "feature" }, outputs: { onTemplateSelect: "onTemplateSelect" }, ngImport: i0, template: "<div\n  class=\"select-template-list\"\n  [class.animate]=\"animation\"\n  [class.withPreview]=\"isPreview\"\n>\n  <ng-container *ngIf=\"!isPreview\">\n    <div\n      class=\"select-template-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Template</div>\n    </div>\n    <div class=\"select-template-list-body\">\n      <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n      <div class=\"select-template-list-tab vx-d-flex vx-align-center vx-mb-2\">\n        <button\n          (click)=\"switchTab('VCOMPLY')\"\n          class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n          [class.active]=\"currentTab === 'VCOMPLY'\"\n        >\n          VCOMPLY TEMPLATES\n        </button>\n        <button\n          (click)=\"switchTab('USER_CREATED')\"\n          class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n          [class.active]=\"currentTab === 'USER_CREATED'\"\n        >\n          USER-CREATED TEMPLATES\n        </button>\n      </div>\n      <div class=\"search-block vx-mb-2\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input type=\"text\" [(ngModel)]=\"searchTemplate\" placeholder=\"Search\" />\n      </div>\n      <div *ngIf=\"categoryList?.length\" class=\"body-top vx-d-flex vx-align-center vx-justify-end vx-mb-2\">\n        <cs-multi-select\n          (searchText)=\"searchCategory = $event\"\n          [placeholder]=\"'Select Category'\"\n          [value]=\"selectedCategory\"\n          (restoreSelectedData)=\"onRestoreSelectedData($event)\"\n          (applyFilter)=\"onApplyFilter($event)\"\n        >\n          <ng-container\n            *ngFor=\"\n              let eachCategory of categoryList\n                | SearchByKeys : ['name'] : searchCategory\n            \"\n          >\n            <cs-multi-select-option\n              [appTooltip]=\"eachCategory?.name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              [value]=\"eachCategory?.item_id\"\n              (change)=\"onSelectCategory(eachCategory, $event)\"\n              [tooltipMandatory]=\"true\"\n            >\n              {{ eachCategory?.name }}\n            </cs-multi-select-option>\n          </ng-container>\n        </cs-multi-select>\n      </div>\n      <div class=\"body-inner vx-mb-1\">\n        <ng-container *ngIf=\"!loader\">\n          <ng-container\n            *ngIf=\"\n              templateList\n                | SearchByKeys\n                  : ['name', 'categoryDetails']\n                  : searchTemplate as allTemplate\n            \"\n          >\n            <app-template-list-table\n              *ngIf=\"allTemplate.length\"\n              [templateList]=\"allTemplate\"\n              [loader]=\"loader\"\n              [categoryList]=\"categoryList\"\n              [selectedTemplate]=\"selectedTemplate[0]\"\n              [feature]=\"feature\"\n              (onSort)=\"sortBy($event)\"\n              (onSelectTemplate)=\"onSelectTemplate($event)\"\n              (onPreview)=\"onPreview($event)\"\n            ></app-template-list-table>\n            <app-no-data\n              *ngIf=\"!allTemplate?.length\"\n              [noDataImage]=\"NO_DATA_FOUND_IMAGE\"\n              [noDataText]=\"NO_DATA_FOUND_MESSAGE\"\n            ></app-no-data>\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <app-floating-bar\n        (closeEvent)=\"save()\"\n        (closeList)=\"close()\"\n        [isDisabled]=\"selectedTemplate?.length === 0\"\n        [selectedData]=\"selectedTemplate\"\n        [displayElementKey]=\"'name'\"\n        [singularText]=\"'Template Selected'\"\n        (deleteEvent)=\"deleteEvent()\"\n      >\n      </app-floating-bar>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"isPreview\">\n    <div\n      class=\"select-template-list-head vx-d-flex vx-align-center vx-pl-4 vx-pr-4\"\n    >\n      <button\n        (click)=\"onClosePreview()\"\n        class=\"previewBtn vx-fs-14 vx-fw-500 vx-label-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n      >\n        <i class=\"icons vx-mr-1\">&#xe91d;</i>Preview\n      </button>\n      <div\n        class=\"template-name vx-fs-14 vx-ml-1\"\n        [appTooltip]=\"previewTemplate?.name\"\n        placement=\"bottom-left\"\n        delay=\"0\"\n        type=\"black\"\n        [tooltipMandatory]=\"false\"\n      >\n        {{ previewTemplate?.name }}\n      </div>\n    </div>\n    <div class=\"preview-template-body vx-d-flex vx-justify-center\">\n      <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n      <div *ngIf=\"!loader\" class=\"preview-template-body-inner\">\n        <ngx-doc-viewer\n          [url]=\"fileUrl\"\n          viewer=\"office\"\n          style=\"width: 100%; height: 100%; margin: 0\"\n          disableContent=\"popout-hide\"\n        >\n        </ngx-doc-viewer>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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 .select-template-list{background:#fff;position:fixed;inset:0 500px 0 0;z-index:10}::ng-deep .select-template-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .select-template-list:after{background:#f1f1f1;content:\"\";position:absolute;top:3px;right:0;width:1px;height:calc(100% - 3px)}::ng-deep .select-template-list.withPreview{background:#f2f2f5}::ng-deep .select-template-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .select-template-list-head button.previewBtn{background:transparent;border-radius:0;border:none}::ng-deep .select-template-list-head .template-name{color:#787a8c;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .select-template-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .select-template-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;color:#565a6f;height:23px;margin-right:1.75rem!important}::ng-deep .select-template-list-tab button.active{pointer-events:none}::ng-deep .select-template-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .select-template-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .select-template-list-body .search-block{position:relative}::ng-deep .select-template-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .select-template-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .select-template-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .select-template-list-body .body-top cs-multi-select{display:block;width:320px}::ng-deep .select-template-list-body .body-inner{height:calc(100% - 180px);width:calc(100% + 2rem);padding-right:2rem;overflow:hidden;overflow-y:auto;scrollbar-width:thin}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-track{background-color:#f1f1f1}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .select-template-list .preview-template-body{margin-top:3rem;height:calc(100% - 6rem)}::ng-deep .select-template-list .preview-template-body-inner{background:#fff;border-radius:8px 8px 0 0;border:1px solid #dbdbdb;width:50rem}::ng-deep .select-template-list .preview-template-body-inner app-view-policy{display:block;height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn{height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane{height:calc(100% - 30px)}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor .e-documenteditor-optionspane{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i6.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i7.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: i8.CsMultiselectComponent, selector: "cs-multi-select", inputs: ["isRequired", "dropdownLabel", "dropdownSubLabel", "disabled", "placeholder", "searchPlaceholder", "value", "selectedItem"], outputs: ["valueChange", "applyFilter", "searchText", "resetSelectedData", "restoreSelectedData"] }, { kind: "component", type: i9.CsMultiselectOptionComponent, selector: "cs-multi-select-option", inputs: ["value"] }, { kind: "component", type: i10.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "directive", type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "component", type: i13.TemplateListTableComponent, selector: "app-template-list-table", inputs: ["selectedTemplate", "templateList", "loader", "categoryList", "feature"], outputs: ["onSort", "onSelectTemplate", "onPreview"] }, { kind: "pipe", type: i14.SearchByKeysPipe, name: "SearchByKeys" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectTemplateListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-select-template-list', template: "<div\n  class=\"select-template-list\"\n  [class.animate]=\"animation\"\n  [class.withPreview]=\"isPreview\"\n>\n  <ng-container *ngIf=\"!isPreview\">\n    <div\n      class=\"select-template-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Template</div>\n    </div>\n    <div class=\"select-template-list-body\">\n      <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n      <div class=\"select-template-list-tab vx-d-flex vx-align-center vx-mb-2\">\n        <button\n          (click)=\"switchTab('VCOMPLY')\"\n          class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n          [class.active]=\"currentTab === 'VCOMPLY'\"\n        >\n          VCOMPLY TEMPLATES\n        </button>\n        <button\n          (click)=\"switchTab('USER_CREATED')\"\n          class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n          [class.active]=\"currentTab === 'USER_CREATED'\"\n        >\n          USER-CREATED TEMPLATES\n        </button>\n      </div>\n      <div class=\"search-block vx-mb-2\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input type=\"text\" [(ngModel)]=\"searchTemplate\" placeholder=\"Search\" />\n      </div>\n      <div *ngIf=\"categoryList?.length\" class=\"body-top vx-d-flex vx-align-center vx-justify-end vx-mb-2\">\n        <cs-multi-select\n          (searchText)=\"searchCategory = $event\"\n          [placeholder]=\"'Select Category'\"\n          [value]=\"selectedCategory\"\n          (restoreSelectedData)=\"onRestoreSelectedData($event)\"\n          (applyFilter)=\"onApplyFilter($event)\"\n        >\n          <ng-container\n            *ngFor=\"\n              let eachCategory of categoryList\n                | SearchByKeys : ['name'] : searchCategory\n            \"\n          >\n            <cs-multi-select-option\n              [appTooltip]=\"eachCategory?.name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              [value]=\"eachCategory?.item_id\"\n              (change)=\"onSelectCategory(eachCategory, $event)\"\n              [tooltipMandatory]=\"true\"\n            >\n              {{ eachCategory?.name }}\n            </cs-multi-select-option>\n          </ng-container>\n        </cs-multi-select>\n      </div>\n      <div class=\"body-inner vx-mb-1\">\n        <ng-container *ngIf=\"!loader\">\n          <ng-container\n            *ngIf=\"\n              templateList\n                | SearchByKeys\n                  : ['name', 'categoryDetails']\n                  : searchTemplate as allTemplate\n            \"\n          >\n            <app-template-list-table\n              *ngIf=\"allTemplate.length\"\n              [templateList]=\"allTemplate\"\n              [loader]=\"loader\"\n              [categoryList]=\"categoryList\"\n              [selectedTemplate]=\"selectedTemplate[0]\"\n              [feature]=\"feature\"\n              (onSort)=\"sortBy($event)\"\n              (onSelectTemplate)=\"onSelectTemplate($event)\"\n              (onPreview)=\"onPreview($event)\"\n            ></app-template-list-table>\n            <app-no-data\n              *ngIf=\"!allTemplate?.length\"\n              [noDataImage]=\"NO_DATA_FOUND_IMAGE\"\n              [noDataText]=\"NO_DATA_FOUND_MESSAGE\"\n            ></app-no-data>\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <app-floating-bar\n        (closeEvent)=\"save()\"\n        (closeList)=\"close()\"\n        [isDisabled]=\"selectedTemplate?.length === 0\"\n        [selectedData]=\"selectedTemplate\"\n        [displayElementKey]=\"'name'\"\n        [singularText]=\"'Template Selected'\"\n        (deleteEvent)=\"deleteEvent()\"\n      >\n      </app-floating-bar>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"isPreview\">\n    <div\n      class=\"select-template-list-head vx-d-flex vx-align-center vx-pl-4 vx-pr-4\"\n    >\n      <button\n        (click)=\"onClosePreview()\"\n        class=\"previewBtn vx-fs-14 vx-fw-500 vx-label-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n      >\n        <i class=\"icons vx-mr-1\">&#xe91d;</i>Preview\n      </button>\n      <div\n        class=\"template-name vx-fs-14 vx-ml-1\"\n        [appTooltip]=\"previewTemplate?.name\"\n        placement=\"bottom-left\"\n        delay=\"0\"\n        type=\"black\"\n        [tooltipMandatory]=\"false\"\n      >\n        {{ previewTemplate?.name }}\n      </div>\n    </div>\n    <div class=\"preview-template-body vx-d-flex vx-justify-center\">\n      <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n      <div *ngIf=\"!loader\" class=\"preview-template-body-inner\">\n        <ngx-doc-viewer\n          [url]=\"fileUrl\"\n          viewer=\"office\"\n          style=\"width: 100%; height: 100%; margin: 0\"\n          disableContent=\"popout-hide\"\n        >\n        </ngx-doc-viewer>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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 .select-template-list{background:#fff;position:fixed;inset:0 500px 0 0;z-index:10}::ng-deep .select-template-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .select-template-list:after{background:#f1f1f1;content:\"\";position:absolute;top:3px;right:0;width:1px;height:calc(100% - 3px)}::ng-deep .select-template-list.withPreview{background:#f2f2f5}::ng-deep .select-template-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .select-template-list-head button.previewBtn{background:transparent;border-radius:0;border:none}::ng-deep .select-template-list-head .template-name{color:#787a8c;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .select-template-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .select-template-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;color:#565a6f;height:23px;margin-right:1.75rem!important}::ng-deep .select-template-list-tab button.active{pointer-events:none}::ng-deep .select-template-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .select-template-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .select-template-list-body .search-block{position:relative}::ng-deep .select-template-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .select-template-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .select-template-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .select-template-list-body .body-top cs-multi-select{display:block;width:320px}::ng-deep .select-template-list-body .body-inner{height:calc(100% - 180px);width:calc(100% + 2rem);padding-right:2rem;overflow:hidden;overflow-y:auto;scrollbar-width:thin}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-track{background-color:#f1f1f1}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .select-template-list .preview-template-body{margin-top:3rem;height:calc(100% - 6rem)}::ng-deep .select-template-list .preview-template-body-inner{background:#fff;border-radius:8px 8px 0 0;border:1px solid #dbdbdb;width:50rem}::ng-deep .select-template-list .preview-template-body-inner app-view-policy{display:block;height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn{height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane{height:calc(100% - 30px)}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor .e-documenteditor-optionspane{height:100%}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.TemplateService }, { type: i2.PolicyService }, { type: i3.Configurations, decorators: [{
                    type: Optional
                }] }]; }, propDecorators: { selectedCategoryId: [{
                type: Input
            }], feature: [{
                type: Input
            }], onTemplateSelect: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 