vcomply-workflow-engine 6.0.47 → 6.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/esm2022/lib/sharedComponents/category-list-selection/category-list-selection/category-list-selection.component.mjs +3 -3
  2. package/esm2022/lib/sharedComponents/document-section/document-section.component.mjs +6 -5
  3. package/fesm2022/vcomply-workflow-engine.mjs +7 -6
  4. package/fesm2022/vcomply-workflow-engine.mjs.map +1 -1
  5. package/lib/sharedComponents/document-section/document-section.component.d.ts +1 -1
  6. package/package.json +1 -1
package/fesm2022/vcomply-workflow-engine.mjs CHANGED
@@ -11059,11 +11059,11 @@ class CategoryListSelectionComponent {
11059
11059
  return data;
11060
11060
  }
11061
11061
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryListSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11062
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryListSelectionComponent, selector: "app-category-list-selection", inputs: { setList: ["categoryList", "setList"], config: "config", currentPage: "currentPage", recordStart: "recordStart", recordEnd: "recordEnd", totalRecords: "totalRecords", totalPages: "totalPages", loading: "loading", selectionMode: "selectionMode", setSelected: ["selectedList", "setSelected"] }, outputs: { fetchData: "fetchData", back: "back", next: "next", cancel: "cancel" }, ngImport: i0, template: "<div class=\"radio-list\" [class.animate]=\"animation\">\n <div\n class=\"radio-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\">{{ config?.panelTitle }}</div>\n </div>\n\n <div class=\"radio-list-body\">\n <div class=\"search-block vx-mb-2\" *ngIf=\"true\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n (keydown.enter)=\"search()\"\n type=\"text\"\n [placeholder]=\"config?.searchPlaceholder\"\n [(ngModel)]=\"searchKey\"\n />\n </div>\n\n <app-pagination\n *ngIf=\"totalPages > 1\"\n [start]=\"recordStart\"\n [end]=\"recordEnd\"\n [total]=\"totalRecords\"\n [pageCount]=\"totalPages\"\n [currentPage]=\"currentPage\"\n (selectedPage)=\"pageChanged($event)\"\n ></app-pagination>\n\n <!-- it is visible when list data is available -->\n <ng-container *ngIf=\"!loading && list?.length\">\n <div\n class=\"categories vx-mb-4\"\n [class.mt-2]=\"totalPages === 0\"\n *ngIf=\"selectionMode === 'multiple'\"\n >\n <app-cs-checkbox\n [ngValue]=\"checkSelectAll()\"\n (ngValueChange)=\"selectAll($event)\"\n >\n <span class=\"vx-fw-600 vx-label-txt\">{{\n checkSelectAll() ? \"Deselect All\" : \"Select All\"\n }}</span>\n </app-cs-checkbox>\n </div>\n <ul\n class=\"categories-list vx-mb-4\"\n [class.with-selectAll]=\"selectionMode === 'multiple'\"\n [class.with-pagination]=\"totalPages > 1\"\n >\n <li *ngFor=\"let item of list | search : searchKey; let i = index\">\n <app-cs-radio\n *ngIf=\"selectionMode === 'single'\"\n [checked]=\"selectedIds?.includes(item[config?.identifierKey])\"\n (checkedEvent)=\"itemSelected($event, item)\"\n [appTooltip]=\"item[config.displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <div class=\"name\">{{ item[config.displayKey] }}</div>\n <div\n class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n >\n <div\n class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n *ngIf=\"item[config?.parentKey] != ''\"\n >\n WITHIN\n </div>\n <div\n class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n [appTooltip]=\"item[config?.parentKey] | within : list\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n >\n {{ item[config?.parentKey] | within : list }}\n </div>\n </div>\n </app-cs-radio>\n <app-cs-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [ngValue]=\"selectedIds?.includes(item[config?.identifierKey])\"\n (ngValueChange)=\"itemSelected($event, item)\"\n [appTooltip]=\"item[config.displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <div class=\"name\">{{ item[config.displayKey] }}</div>\n <div\n class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n >\n <div\n class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n *ngIf=\"item[config?.parentKey] != ''\"\n >\n WITHIN\n </div>\n <div\n class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n [appTooltip]=\"item[config?.parentKey] | within : list\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n >\n {{ item[config?.parentKey] | within : list }}\n </div>\n </div>\n </app-cs-checkbox>\n </li>\n </ul>\n </ng-container>\n <!-- It is visible when the list items are getting loaded -->\n <app-listline-loader *ngIf=\"loading\"></app-listline-loader>\n <ng-container *ngIf=\"!loading && list?.length === 0\">\n <app-no-data\n [noDataImage]=\"\n 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\n \"\n [noDataText]=\"\n config?.noDataText?.length > 0\n ? config?.noDataText\n : 'No data to display'\n \"\n ></app-no-data>\n </ng-container>\n\n <app-floating-bar\n [selectedData]=\"selectedList\"\n [displayElementKey]=\"config?.displayKey\"\n [singularText]=\"config?.entitySingular\"\n [pluralText]=\"\n config?.entityPlural ? config?.entityPlural : 'Users selected'\n \"\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n (deleteEvent)=\"deleteItem($event)\"\n [isDisabled]=\"selectedList.length === 0 || list?.length === 0\"\n >\n </app-floating-bar>\n </div>\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 .radio-list{position:fixed;inset:0 500px 0 0}::ng-deep .radio-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .radio-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-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 .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .radio-list-body app-pagination .wk-pagination-sec-ds{padding:0!important}::ng-deep .radio-list-body .categories{height:1rem}::ng-deep .radio-list-body .categories app-cs-radio .radio-item,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value{margin:0!important}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value span{color:#161b2f;font-weight:600;font-size:12px}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 232px);overflow:auto;margin:16px 0 0}::ng-deep .radio-list-body ul.categories-list.with-pagination{height:calc(100vh - 260px)}::ng-deep .radio-list-body ul.categories-list.with-selectAll{height:calc(100vh - 256px)}::ng-deep .radio-list-body ul.categories-list.with-selectAll.with-pagination{height:calc(100vh - 284px)}::ng-deep .radio-list-body ul.categories-list li{padding:0 0 .5rem;list-style:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin:0!important}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#161b2f}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within{display:flex;align-items:center;justify-content:flex-start;margin-top:4px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .block{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;margin-right:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#747576;line-height:16px;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 100px)!important}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .radio-list-footer{background:#fff}::ng-deep .radio-list-footer app-floating-bar .floating-bar{padding:0 16px 16px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.mt-2{margin-top:10px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: LinkTreatmentLoaderComponent, selector: "app-listline-loader" }, { kind: "pipe", type: SearchPipe$1, name: "search" }, { kind: "pipe", type: WithinStructurePipe, name: "within" }] }); }
11062
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryListSelectionComponent, selector: "app-category-list-selection", inputs: { setList: ["categoryList", "setList"], config: "config", currentPage: "currentPage", recordStart: "recordStart", recordEnd: "recordEnd", totalRecords: "totalRecords", totalPages: "totalPages", loading: "loading", selectionMode: "selectionMode", setSelected: ["selectedList", "setSelected"] }, outputs: { fetchData: "fetchData", back: "back", next: "next", cancel: "cancel" }, ngImport: i0, template: "<div class=\"radio-list\" [class.animate]=\"animation\">\n <div\n class=\"radio-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\">{{ config?.panelTitle }}</div>\n </div>\n\n <div class=\"radio-list-body\">\n <div class=\"search-block vx-mb-2\" *ngIf=\"true\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n (keydown.enter)=\"search()\"\n type=\"text\"\n [placeholder]=\"config?.searchPlaceholder\"\n [(ngModel)]=\"searchKey\"\n />\n </div>\n\n <app-pagination\n *ngIf=\"totalPages > 1\"\n [start]=\"recordStart\"\n [end]=\"recordEnd\"\n [total]=\"totalRecords\"\n [pageCount]=\"totalPages\"\n [currentPage]=\"currentPage\"\n (selectedPage)=\"pageChanged($event)\"\n ></app-pagination>\n\n <!-- it is visible when list data is available -->\n <ng-container *ngIf=\"!loading && list?.length\">\n <div class=\"categories vx-mb-4\" [class.mt-2]=\"totalPages === 0\">\n <app-cs-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [ngValue]=\"checkSelectAll()\"\n (ngValueChange)=\"selectAll($event)\"\n >\n <span class=\"vx-fw-600 vx-label-txt\">{{\n checkSelectAll() ? \"Deselect All\" : \"Select All\"\n }}</span>\n </app-cs-checkbox>\n </div>\n <ul\n class=\"categories-list vx-mb-4\"\n [class.with-pagination]=\"totalPages > 1\"\n >\n <li *ngFor=\"let item of list | search : searchKey; let i = index\">\n <app-cs-radio\n *ngIf=\"selectionMode === 'single'\"\n [checked]=\"selectedIds?.includes(item[config?.identifierKey])\"\n (checkedEvent)=\"itemSelected($event, item)\"\n [appTooltip]=\"item[config.displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <div class=\"name\">{{ item[config.displayKey] }}</div>\n <div\n class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n >\n <div\n class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n *ngIf=\"item[config?.parentKey] != ''\"\n >\n WITHIN\n </div>\n <div\n class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n [appTooltip]=\"item[config?.parentKey] | within : list\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n >\n {{ item[config?.parentKey] | within : list }}\n </div>\n </div>\n </app-cs-radio>\n <app-cs-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [ngValue]=\"selectedIds?.includes(item[config?.identifierKey])\"\n (ngValueChange)=\"itemSelected($event, item)\"\n [appTooltip]=\"item[config.displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <div class=\"name\">{{ item[config.displayKey] }}</div>\n <div\n class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n >\n <div\n class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n *ngIf=\"item[config?.parentKey] != ''\"\n >\n WITHIN\n </div>\n <div\n class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n [appTooltip]=\"item[config?.parentKey] | within : list\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n >\n {{ item[config?.parentKey] | within : list }}\n </div>\n </div>\n </app-cs-checkbox>\n </li>\n </ul>\n </ng-container>\n <!-- It is visible when the list items are getting loaded -->\n <app-listline-loader *ngIf=\"loading\"></app-listline-loader>\n <ng-container *ngIf=\"!loading && list?.length === 0\">\n <app-no-data\n [noDataImage]=\"\n 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\n \"\n [noDataText]=\"\n config?.noDataText?.length > 0\n ? config?.noDataText\n : 'No data to display'\n \"\n ></app-no-data>\n </ng-container>\n\n <app-floating-bar\n [selectedData]=\"selectedList\"\n [displayElementKey]=\"config?.displayKey\"\n [singularText]=\"config?.entitySingular\"\n [pluralText]=\"\n config?.entityPlural ? config?.entityPlural : 'Users selected'\n \"\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n (deleteEvent)=\"deleteItem($event)\"\n [isDisabled]=\"selectedList.length === 0 || list?.length === 0\"\n >\n </app-floating-bar>\n </div>\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 .radio-list{position:fixed;inset:0 500px 0 0}::ng-deep .radio-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .radio-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-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 .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .radio-list-body app-pagination .wk-pagination-sec-ds{padding:0!important}::ng-deep .radio-list-body .categories{height:1rem}::ng-deep .radio-list-body .categories app-cs-radio .radio-item,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value{margin:0!important}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value span{color:#161b2f;font-weight:600;font-size:12px}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 256px);overflow:auto;margin:16px 0 0}::ng-deep .radio-list-body ul.categories-list.with-pagination{height:calc(100vh - 284px)}::ng-deep .radio-list-body ul.categories-list li{padding:0 0 .5rem;list-style:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin:0!important}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#161b2f}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within{display:flex;align-items:center;justify-content:flex-start;margin-top:4px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .block{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;margin-right:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#747576;line-height:16px;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 100px)!important}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .radio-list-footer{background:#fff}::ng-deep .radio-list-footer app-floating-bar .floating-bar{padding:0 16px 16px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.mt-2{margin-top:10px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: LinkTreatmentLoaderComponent, selector: "app-listline-loader" }, { kind: "pipe", type: SearchPipe$1, name: "search" }, { kind: "pipe", type: WithinStructurePipe, name: "within" }] }); }
11063
11063
  }
11064
11064
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryListSelectionComponent, decorators: [{
11065
11065
  type: Component,
11066
- args: [{ selector: 'app-category-list-selection', template: "<div class=\"radio-list\" [class.animate]=\"animation\">\n <div\n class=\"radio-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\">{{ config?.panelTitle }}</div>\n </div>\n\n <div class=\"radio-list-body\">\n <div class=\"search-block vx-mb-2\" *ngIf=\"true\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n (keydown.enter)=\"search()\"\n type=\"text\"\n [placeholder]=\"config?.searchPlaceholder\"\n [(ngModel)]=\"searchKey\"\n />\n </div>\n\n <app-pagination\n *ngIf=\"totalPages > 1\"\n [start]=\"recordStart\"\n [end]=\"recordEnd\"\n [total]=\"totalRecords\"\n [pageCount]=\"totalPages\"\n [currentPage]=\"currentPage\"\n (selectedPage)=\"pageChanged($event)\"\n ></app-pagination>\n\n <!-- it is visible when list data is available -->\n <ng-container *ngIf=\"!loading && list?.length\">\n <div\n class=\"categories vx-mb-4\"\n [class.mt-2]=\"totalPages === 0\"\n *ngIf=\"selectionMode === 'multiple'\"\n >\n <app-cs-checkbox\n [ngValue]=\"checkSelectAll()\"\n (ngValueChange)=\"selectAll($event)\"\n >\n <span class=\"vx-fw-600 vx-label-txt\">{{\n checkSelectAll() ? \"Deselect All\" : \"Select All\"\n }}</span>\n </app-cs-checkbox>\n </div>\n <ul\n class=\"categories-list vx-mb-4\"\n [class.with-selectAll]=\"selectionMode === 'multiple'\"\n [class.with-pagination]=\"totalPages > 1\"\n >\n <li *ngFor=\"let item of list | search : searchKey; let i = index\">\n <app-cs-radio\n *ngIf=\"selectionMode === 'single'\"\n [checked]=\"selectedIds?.includes(item[config?.identifierKey])\"\n (checkedEvent)=\"itemSelected($event, item)\"\n [appTooltip]=\"item[config.displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <div class=\"name\">{{ item[config.displayKey] }}</div>\n <div\n class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n >\n <div\n class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n *ngIf=\"item[config?.parentKey] != ''\"\n >\n WITHIN\n </div>\n <div\n class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n [appTooltip]=\"item[config?.parentKey] | within : list\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n >\n {{ item[config?.parentKey] | within : list }}\n </div>\n </div>\n </app-cs-radio>\n <app-cs-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [ngValue]=\"selectedIds?.includes(item[config?.identifierKey])\"\n (ngValueChange)=\"itemSelected($event, item)\"\n [appTooltip]=\"item[config.displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <div class=\"name\">{{ item[config.displayKey] }}</div>\n <div\n class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n >\n <div\n class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n *ngIf=\"item[config?.parentKey] != ''\"\n >\n WITHIN\n </div>\n <div\n class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n [appTooltip]=\"item[config?.parentKey] | within : list\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n >\n {{ item[config?.parentKey] | within : list }}\n </div>\n </div>\n </app-cs-checkbox>\n </li>\n </ul>\n </ng-container>\n <!-- It is visible when the list items are getting loaded -->\n <app-listline-loader *ngIf=\"loading\"></app-listline-loader>\n <ng-container *ngIf=\"!loading && list?.length === 0\">\n <app-no-data\n [noDataImage]=\"\n 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\n \"\n [noDataText]=\"\n config?.noDataText?.length > 0\n ? config?.noDataText\n : 'No data to display'\n \"\n ></app-no-data>\n </ng-container>\n\n <app-floating-bar\n [selectedData]=\"selectedList\"\n [displayElementKey]=\"config?.displayKey\"\n [singularText]=\"config?.entitySingular\"\n [pluralText]=\"\n config?.entityPlural ? config?.entityPlural : 'Users selected'\n \"\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n (deleteEvent)=\"deleteItem($event)\"\n [isDisabled]=\"selectedList.length === 0 || list?.length === 0\"\n >\n </app-floating-bar>\n </div>\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 .radio-list{position:fixed;inset:0 500px 0 0}::ng-deep .radio-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .radio-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-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 .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .radio-list-body app-pagination .wk-pagination-sec-ds{padding:0!important}::ng-deep .radio-list-body .categories{height:1rem}::ng-deep .radio-list-body .categories app-cs-radio .radio-item,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value{margin:0!important}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value span{color:#161b2f;font-weight:600;font-size:12px}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 232px);overflow:auto;margin:16px 0 0}::ng-deep .radio-list-body ul.categories-list.with-pagination{height:calc(100vh - 260px)}::ng-deep .radio-list-body ul.categories-list.with-selectAll{height:calc(100vh - 256px)}::ng-deep .radio-list-body ul.categories-list.with-selectAll.with-pagination{height:calc(100vh - 284px)}::ng-deep .radio-list-body ul.categories-list li{padding:0 0 .5rem;list-style:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin:0!important}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#161b2f}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within{display:flex;align-items:center;justify-content:flex-start;margin-top:4px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .block{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;margin-right:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#747576;line-height:16px;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 100px)!important}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .radio-list-footer{background:#fff}::ng-deep .radio-list-footer app-floating-bar .floating-bar{padding:0 16px 16px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.mt-2{margin-top:10px!important}\n"] }]
11066
+ args: [{ selector: 'app-category-list-selection', template: "<div class=\"radio-list\" [class.animate]=\"animation\">\n <div\n class=\"radio-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\">{{ config?.panelTitle }}</div>\n </div>\n\n <div class=\"radio-list-body\">\n <div class=\"search-block vx-mb-2\" *ngIf=\"true\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n (keydown.enter)=\"search()\"\n type=\"text\"\n [placeholder]=\"config?.searchPlaceholder\"\n [(ngModel)]=\"searchKey\"\n />\n </div>\n\n <app-pagination\n *ngIf=\"totalPages > 1\"\n [start]=\"recordStart\"\n [end]=\"recordEnd\"\n [total]=\"totalRecords\"\n [pageCount]=\"totalPages\"\n [currentPage]=\"currentPage\"\n (selectedPage)=\"pageChanged($event)\"\n ></app-pagination>\n\n <!-- it is visible when list data is available -->\n <ng-container *ngIf=\"!loading && list?.length\">\n <div class=\"categories vx-mb-4\" [class.mt-2]=\"totalPages === 0\">\n <app-cs-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [ngValue]=\"checkSelectAll()\"\n (ngValueChange)=\"selectAll($event)\"\n >\n <span class=\"vx-fw-600 vx-label-txt\">{{\n checkSelectAll() ? \"Deselect All\" : \"Select All\"\n }}</span>\n </app-cs-checkbox>\n </div>\n <ul\n class=\"categories-list vx-mb-4\"\n [class.with-pagination]=\"totalPages > 1\"\n >\n <li *ngFor=\"let item of list | search : searchKey; let i = index\">\n <app-cs-radio\n *ngIf=\"selectionMode === 'single'\"\n [checked]=\"selectedIds?.includes(item[config?.identifierKey])\"\n (checkedEvent)=\"itemSelected($event, item)\"\n [appTooltip]=\"item[config.displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <div class=\"name\">{{ item[config.displayKey] }}</div>\n <div\n class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n >\n <div\n class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n *ngIf=\"item[config?.parentKey] != ''\"\n >\n WITHIN\n </div>\n <div\n class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n [appTooltip]=\"item[config?.parentKey] | within : list\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n >\n {{ item[config?.parentKey] | within : list }}\n </div>\n </div>\n </app-cs-radio>\n <app-cs-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [ngValue]=\"selectedIds?.includes(item[config?.identifierKey])\"\n (ngValueChange)=\"itemSelected($event, item)\"\n [appTooltip]=\"item[config.displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <div class=\"name\">{{ item[config.displayKey] }}</div>\n <div\n class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n >\n <div\n class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n *ngIf=\"item[config?.parentKey] != ''\"\n >\n WITHIN\n </div>\n <div\n class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n [appTooltip]=\"item[config?.parentKey] | within : list\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"false\"\n >\n {{ item[config?.parentKey] | within : list }}\n </div>\n </div>\n </app-cs-checkbox>\n </li>\n </ul>\n </ng-container>\n <!-- It is visible when the list items are getting loaded -->\n <app-listline-loader *ngIf=\"loading\"></app-listline-loader>\n <ng-container *ngIf=\"!loading && list?.length === 0\">\n <app-no-data\n [noDataImage]=\"\n 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\n \"\n [noDataText]=\"\n config?.noDataText?.length > 0\n ? config?.noDataText\n : 'No data to display'\n \"\n ></app-no-data>\n </ng-container>\n\n <app-floating-bar\n [selectedData]=\"selectedList\"\n [displayElementKey]=\"config?.displayKey\"\n [singularText]=\"config?.entitySingular\"\n [pluralText]=\"\n config?.entityPlural ? config?.entityPlural : 'Users selected'\n \"\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n (deleteEvent)=\"deleteItem($event)\"\n [isDisabled]=\"selectedList.length === 0 || list?.length === 0\"\n >\n </app-floating-bar>\n </div>\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 .radio-list{position:fixed;inset:0 500px 0 0}::ng-deep .radio-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .radio-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-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 .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .radio-list-body app-pagination .wk-pagination-sec-ds{padding:0!important}::ng-deep .radio-list-body .categories{height:1rem}::ng-deep .radio-list-body .categories app-cs-radio .radio-item,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value{margin:0!important}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value span{color:#161b2f;font-weight:600;font-size:12px}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 256px);overflow:auto;margin:16px 0 0}::ng-deep .radio-list-body ul.categories-list.with-pagination{height:calc(100vh - 284px)}::ng-deep .radio-list-body ul.categories-list li{padding:0 0 .5rem;list-style:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin:0!important}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#161b2f}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within{display:flex;align-items:center;justify-content:flex-start;margin-top:4px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .block{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;margin-right:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#747576;line-height:16px;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 100px)!important}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .radio-list-footer{background:#fff}::ng-deep .radio-list-footer app-floating-bar .floating-bar{padding:0 16px 16px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.mt-2{margin-top:10px!important}\n"] }]
11067
11067
  }], ctorParameters: function () { return []; }, propDecorators: { fetchData: [{
11068
11068
  type: Output
11069
11069
  }], back: [{
@@ -35446,7 +35446,7 @@ class DocumentSectionComponent {
35446
35446
  this.doc = false;
35447
35447
  this.isUploading = false;
35448
35448
  this.isLoader = false;
35449
- this.ff_policy_ms_word_integration = false;
35449
+ this.is_ms_word_integrated = false;
35450
35450
  this.createWordPolicyText = WORD_CONSTANTS.MS_WORD_OPTION;
35451
35451
  this.selectedDocumentType = '';
35452
35452
  this.templateView = false;
@@ -35489,7 +35489,8 @@ class DocumentSectionComponent {
35489
35489
  }
35490
35490
  }
35491
35491
  initialiseFeatureFlags() {
35492
- this.ff_policy_ms_word_integration = this.feature.isFeatureEnabled('ff_policy_ms_word_integration');
35492
+ this.is_ms_word_integrated = this.feature.isFeatureEnabled('ff_policy_ms_word_integration');
35493
+ console.log(this.is_ms_word_integrated, 'ff_policy_ms_word_integration');
35493
35494
  }
35494
35495
  redirectUserToWordPolicy() {
35495
35496
  window.open(WORD_URL_CONSTANTS.new_word_policy_url, '_blank');
@@ -35650,11 +35651,11 @@ class DocumentSectionComponent {
35650
35651
  this.openTemplate.emit();
35651
35652
  }
35652
35653
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentSectionComponent, deps: [{ token: SnackBarService }, { token: PolicyService }, { token: PolicyAPIService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$1.PlatformLocation }, { token: IframeService }], target: i0.ɵɵFactoryTarget.Component }); }
35653
- 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", isTemplateOpened: "isTemplateOpened" }, outputs: { disconnectRefresh: "disconnectRefresh", editPolicy: "editPolicy", openTemplate: "openTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-section\" [class.grayscale]=\"isTemplateOpened\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 480.8 480.8\"\n style=\"enable-background: new 0 0 480.8 480.8\"\n xml:space=\"preserve\"\n >\n <path\n 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 />\n <g>\n <path\n style=\"fill: #e5e5e5\"\n 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 />\n <path\n style=\"fill: #e5e5e5\"\n 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 />\n </g>\n <g>\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n 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 />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either\n draft it from scratch using VComply's online editor or upload an\n existing DOCX or PDF file.\n </p>\n </div>\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'draft'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n \n <label\n *ngIf=\"ff_policy_ms_word_integration\"\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'word'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label\n class=\"document-box\"\n *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\"\n [class.error]=\"docxError?.visible\"\n >\n <input\n type=\"file\"\n accept=\".docx\"\n id=\"DOCfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #docxUploadButton\n />\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\" 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\" 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\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\"\n >Upload a <strong>DOCX</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'docx' && filename\">{{\n filename\n }}</ng-container>\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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'docx' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label\n class=\"document-box\"\n *ngIf=\"showPdfBlock\"\n [class.active]=\"selectedDocumentType == 'pdf'\"\n >\n <input\n type=\"file\"\n accept=\".pdf\"\n id=\"PDFfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #pdfUploadButton\n />\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\" 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\" 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\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\"\n >Upload a <strong>PDF</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'pdf' && filename\">{{\n filename\n }}</ng-container>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'pdf' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType === 'template'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\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]=\"isTemplateOpened\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"isTemplateOpened\"\n >\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button\n type=\"button\"\n (click)=\"editor(selectedDocumentType)\"\n class=\"next\"\n [class.disabled]=\"!selectedDocumentType || isTemplateOpened || isLoader\"\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>\n", 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}.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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }] }); }
35654
+ 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", isTemplateOpened: "isTemplateOpened" }, outputs: { disconnectRefresh: "disconnectRefresh", editPolicy: "editPolicy", openTemplate: "openTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-section\" [class.grayscale]=\"isTemplateOpened\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 480.8 480.8\"\n style=\"enable-background: new 0 0 480.8 480.8\"\n xml:space=\"preserve\"\n >\n <path\n 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 />\n <g>\n <path\n style=\"fill: #e5e5e5\"\n 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 />\n <path\n style=\"fill: #e5e5e5\"\n 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 />\n </g>\n <g>\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n 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 />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either\n draft it from scratch using VComply's online editor or upload an\n existing DOCX or PDF file.\n </p>\n </div>\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'draft'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n \n <label\n *ngIf=\"is_ms_word_integrated\"\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'word'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label\n class=\"document-box\"\n *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\"\n [class.error]=\"docxError?.visible\"\n >\n <input\n type=\"file\"\n accept=\".docx\"\n id=\"DOCfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #docxUploadButton\n />\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\" 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\" 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\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\"\n >Upload a <strong>DOCX</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'docx' && filename\">{{\n filename\n }}</ng-container>\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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'docx' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label\n class=\"document-box\"\n *ngIf=\"showPdfBlock\"\n [class.active]=\"selectedDocumentType == 'pdf'\"\n >\n <input\n type=\"file\"\n accept=\".pdf\"\n id=\"PDFfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #pdfUploadButton\n />\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\" 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\" 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\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\"\n >Upload a <strong>PDF</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'pdf' && filename\">{{\n filename\n }}</ng-container>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'pdf' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType === 'template'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\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]=\"isTemplateOpened\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"isTemplateOpened\"\n >\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button\n type=\"button\"\n (click)=\"editor(selectedDocumentType)\"\n class=\"next\"\n [class.disabled]=\"!selectedDocumentType || isTemplateOpened || isLoader\"\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>\n", 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}.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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }] }); }
35654
35655
  }
35655
35656
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentSectionComponent, decorators: [{
35656
35657
  type: Component,
35657
- args: [{ selector: 'lib-document-section', template: "<div class=\"document-section\" [class.grayscale]=\"isTemplateOpened\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 480.8 480.8\"\n style=\"enable-background: new 0 0 480.8 480.8\"\n xml:space=\"preserve\"\n >\n <path\n 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 />\n <g>\n <path\n style=\"fill: #e5e5e5\"\n 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 />\n <path\n style=\"fill: #e5e5e5\"\n 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 />\n </g>\n <g>\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n 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 />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either\n draft it from scratch using VComply's online editor or upload an\n existing DOCX or PDF file.\n </p>\n </div>\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'draft'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n \n <label\n *ngIf=\"ff_policy_ms_word_integration\"\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'word'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label\n class=\"document-box\"\n *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\"\n [class.error]=\"docxError?.visible\"\n >\n <input\n type=\"file\"\n accept=\".docx\"\n id=\"DOCfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #docxUploadButton\n />\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\" 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\" 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\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\"\n >Upload a <strong>DOCX</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'docx' && filename\">{{\n filename\n }}</ng-container>\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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'docx' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label\n class=\"document-box\"\n *ngIf=\"showPdfBlock\"\n [class.active]=\"selectedDocumentType == 'pdf'\"\n >\n <input\n type=\"file\"\n accept=\".pdf\"\n id=\"PDFfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #pdfUploadButton\n />\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\" 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\" 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\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\"\n >Upload a <strong>PDF</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'pdf' && filename\">{{\n filename\n }}</ng-container>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'pdf' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType === 'template'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\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]=\"isTemplateOpened\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"isTemplateOpened\"\n >\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button\n type=\"button\"\n (click)=\"editor(selectedDocumentType)\"\n class=\"next\"\n [class.disabled]=\"!selectedDocumentType || isTemplateOpened || isLoader\"\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>\n", 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}.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"] }]
35658
+ args: [{ selector: 'lib-document-section', template: "<div class=\"document-section\" [class.grayscale]=\"isTemplateOpened\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 480.8 480.8\"\n style=\"enable-background: new 0 0 480.8 480.8\"\n xml:space=\"preserve\"\n >\n <path\n 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 />\n <g>\n <path\n style=\"fill: #e5e5e5\"\n 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 />\n <path\n style=\"fill: #e5e5e5\"\n 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 />\n </g>\n <g>\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n style=\"fill: #210b20\"\n 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 />\n <path\n 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 />\n <path\n 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 />\n <path\n 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 />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either\n draft it from scratch using VComply's online editor or upload an\n existing DOCX or PDF file.\n </p>\n </div>\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'draft'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n \n <label\n *ngIf=\"is_ms_word_integrated\"\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'word'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label\n class=\"document-box\"\n *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\"\n [class.error]=\"docxError?.visible\"\n >\n <input\n type=\"file\"\n accept=\".docx\"\n id=\"DOCfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #docxUploadButton\n />\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\" 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\" 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\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\"\n >Upload a <strong>DOCX</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'docx' && filename\">{{\n filename\n }}</ng-container>\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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'docx' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label\n class=\"document-box\"\n *ngIf=\"showPdfBlock\"\n [class.active]=\"selectedDocumentType == 'pdf'\"\n >\n <input\n type=\"file\"\n accept=\".pdf\"\n id=\"PDFfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #pdfUploadButton\n />\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\" 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\" 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\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\"\n >Upload a <strong>PDF</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'pdf' && filename\">{{\n filename\n }}</ng-container>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'pdf' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType === 'template'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\"\n />\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\" 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\" 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\" 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\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\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]=\"isTemplateOpened\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"isTemplateOpened\"\n >\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button\n type=\"button\"\n (click)=\"editor(selectedDocumentType)\"\n class=\"next\"\n [class.disabled]=\"!selectedDocumentType || isTemplateOpened || isLoader\"\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>\n", 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}.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"] }]
35658
35659
  }], ctorParameters: function () { return [{ type: SnackBarService }, { type: PolicyService }, { type: PolicyAPIService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$1.PlatformLocation }, { type: IframeService }]; }, propDecorators: { selectedDocumentType: [{
35659
35660
  type: Input
35660
35661
  }], feature: [{