vcomply-workflow-engine 6.4.8 → 6.5.0

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 (10) hide show
  1. package/esm2022/lib/sharedComponents/checkbox-list/checkbox-list.component.mjs +6 -5
  2. package/esm2022/lib/sharedComponents/checkbox-list/checkbox-list.module.mjs +7 -3
  3. package/esm2022/lib/sharedComponents/document-section/document-section.component.mjs +4 -3
  4. package/esm2022/lib/workflow-engine-container/workflow-engine-container.component.mjs +4 -1
  5. package/esm2022/lib/workflow-policy/workflow-policy.component.mjs +8 -3
  6. package/fesm2022/vcomply-workflow-engine.mjs +20 -8
  7. package/fesm2022/vcomply-workflow-engine.mjs.map +1 -1
  8. package/lib/sharedComponents/checkbox-list/checkbox-list.module.d.ts +2 -1
  9. package/lib/workflow-policy/workflow-policy.component.d.ts +1 -0
  10. package/package.json +1 -1
package/fesm2022/vcomply-workflow-engine.mjs CHANGED
@@ -9603,11 +9603,11 @@ class CheckboxListComponent {
9603
9603
  }
9604
9604
  }
9605
9605
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9606
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: { itemsList: "itemsList", selectedItems: "selectedItems", identifierKey: "identifierKey", displayKey: "displayKey", tooltipKey: "tooltipKey", config: "config", twoColumn: "twoColumn", loaded: "loaded" }, outputs: { closeList: "closeList", saveList: "saveList" }, ngImport: i0, template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\n <div\n class=\"add-risk-rc-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 <!-- <button class=\"add-risk-rc-close\" (click)=close()>\n <i class=\"icons\">&#xe90d;</i>\n </button> -->\n </div>\n <div class=\"add-risk-rc-body\">\n <div class=\"search-block\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n type=\"text\"\n placeholder=\"{{ config?.searchPlaceholder }}\"\n [(ngModel)]=\"searchItem\"\n />\n </div>\n <app-loader-inline *ngIf=\"loaded\"></app-loader-inline>\n <ng-container\n *ngIf=\"itemsList | search : searchItem : displayKey as searchList\"\n >\n <div\n class=\"body-top\"\n *ngIf=\"\n config?.selectAllEnabled &&\n searchList?.length > 0 &&\n searchItem?.trim()?.length === 0\n \"\n >\n <app-cs-checkbox\n [ngValue]=\"\n itemsList?.length === selectedItems?.length &&\n selectedItems?.length > 0\n \"\n (ngValueChange)=\"selectAll($event)\"\n ><strong>\n {{\n itemsList?.length === selectedItems?.length &&\n selectedItems?.length > 0\n ? \"Deselect All\"\n : \"Select All\"\n }}</strong\n >\n </app-cs-checkbox>\n </div>\n <div class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\n <ul [class.two-column]=\"twoColumn\">\n <li *ngFor=\"let item of searchList\" #ulElement>\n <app-cs-checkbox\n *ngIf=\"config.workflow !== 'policy'\"\n [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n [appTooltip]=\"tooltipKey ? item[tooltipKey] : item[displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n {{ item[displayKey]\n }}{{\n item?.parent_items?.length && config.workflow === \"policy\"\n ? \" < \" + item?.parent_items?.join(\" < \")\n : \"\"\n }}\n </app-cs-checkbox>\n <app-cs-checkbox\n *ngIf=\"config.workflow === 'policy'\"\n [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n >\n <ul class=\"add-category-name\">\n <li\n *ngFor=\"let data of item?.parent_items; let i = index\"\n [appTooltip]=\"data\"\n placement=\"bottom-left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <i *ngIf=\"i > 0\" class=\"icons\">&#xe910;</i>{{ data }}\n </li>\n <li\n [appTooltip]=\"item[displayKey]\"\n placement=\"bottom-left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <i *ngIf=\"item?.parent_items?.length > 0\" class=\"icons\"\n >&#xe910;</i\n >\n {{ item[displayKey] }}\n </li>\n </ul>\n </app-cs-checkbox>\n </li>\n </ul>\n </div>\n <app-no-data\n *ngIf=\"searchList?.length === 0 && !loaded\"\n [noDataImage]=\"ASSETS.search_data\"\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 *ngIf=\"!loaded\"\n [selectedData]=\"selectedItems | listMapper : itemsList : identifierKey\"\n [displayElementKey]=\"displayKey\"\n [singularText]=\"config?.floatingTextSingular\"\n [pluralText]=\"\n config?.floatingTextPlural\n ? config?.floatingTextPlural\n : 'Users selected'\n \"\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0\"\n (deleteEvent)=\"deleteItem($event)\"\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 .add-risk-rc{position:fixed;inset:0 500px 0 0;z-index:1}::ng-deep .add-risk-rc:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-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 .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:.5rem 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body .add-risk-rc-list{margin:1rem 0;display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-rc-body .add-risk-rc-list ul{padding:0;margin:0}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important;font-size:12px!important;color:#161b2f!important}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li i,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:first-child,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:last-of-type,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:last-of-type{color:#34aa44}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column{display:flex;flex-wrap:wrap}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column li{width:50%;padding-right:20px}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 200px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ 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: 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: LoaderInlineComponent, selector: "app-loader-inline" }, { 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: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "pipe", type: ListMapperPipe, name: "listMapper" }, { kind: "pipe", type: SearchPipe$1, name: "search" }] }); }
9606
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: { itemsList: "itemsList", selectedItems: "selectedItems", identifierKey: "identifierKey", displayKey: "displayKey", tooltipKey: "tooltipKey", config: "config", twoColumn: "twoColumn", loaded: "loaded" }, outputs: { closeList: "closeList", saveList: "saveList" }, ngImport: i0, template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\n <div class=\"add-risk-rc-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">{{ config?.panelTitle }}</div>\n <!-- <button class=\"add-risk-rc-close\" (click)=close()>\n <i class=\"icons\">&#xe90d;</i>\n </button> -->\n </div>\n <div class=\"add-risk-rc-body\">\n <div class=\"search-block\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" placeholder=\"{{ config?.searchPlaceholder }}\" [(ngModel)]=\"searchItem\" />\n </div>\n <app-loader-inline *ngIf=\"loaded\"></app-loader-inline>\n <ng-container *ngIf=\"itemsList | search : searchItem : displayKey as searchList\">\n <div class=\"body-top\" *ngIf=\"\n config?.selectAllEnabled &&\n searchList?.length > 0 &&\n searchItem?.trim()?.length === 0\n \">\n <app-cs-checkbox [ngValue]=\"\n itemsList?.length === selectedItems?.length &&\n selectedItems?.length > 0\n \" (ngValueChange)=\"selectAll($event)\"><strong>\n {{\n itemsList?.length === selectedItems?.length &&\n selectedItems?.length > 0\n ? \"Deselect All\"\n : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n </div>\n <div class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\n <ul [class.two-column]=\"twoColumn\">\n <li *ngFor=\"let item of searchList\" #ulElement>\n <app-cs-checkbox *ngIf=\"config.workflow !== 'policy'\"\n [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n [appTooltip]=\"tooltipKey ? item[tooltipKey] : item[displayKey]\" placement=\"bottom-left\" delay=\"0\"\n [tooltipMandatory]=\"true\">\n {{ item[displayKey]\n }}{{\n item?.parent_items?.length && config.workflow === \"policy\"\n ? \" < \" + item?.parent_items?.join(\" < \")\n : \"\"\n }}\n </app-cs-checkbox>\n <app-cs-checkbox\n *ngIf=\" config.workflow==='policy'\"\n [ngValue]=\" selectedItems.includes(item[identifierKey])\"\n (ngValueChange)=\"selectItem(item[identifierKey], $event)\">\n <ul class=\"add-category-name\">\n <li *ngFor=\"let data of item?.parent_items; let i = index\" [appTooltip]=\"data\" placement=\"bottom-left\"\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\n <i *ngIf=\"i > 0\" class=\"icons\">&#xe910;</i>{{ data }}\n </li>\n <li [appTooltip]=\"item[displayKey]\" placement=\"bottom-left\" type=\"black\" delay=\"0\"\n [tooltipMandatory]=\"true\">\n <i *ngIf=\"item?.parent_items?.length > 0\" class=\"icons\">&#xe910;</i>\n {{ item[displayKey] }}\n </li>\n </ul>\n </app-cs-checkbox>\n </li>\n </ul>\n </div>\n <app-no-data *ngIf=\"searchList?.length === 0 && !loaded\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n config?.noDataText?.length > 0\n ? config?.noDataText\n : 'No data to display.'\n \"></app-no-data>\n </ng-container>\n\n <app-floating-bar *ngIf=\"!loaded\" [selectedData]=\"selectedItems | listMapper : itemsList : identifierKey\"\n [displayElementKey]=\"displayKey\" [singularText]=\"config?.floatingTextSingular\" [pluralText]=\"\n config?.floatingTextPlural\n ? config?.floatingTextPlural\n : 'Users selected'\n \" (closeEvent)=\"save()\" (closeList)=\"close()\" [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0\"\n (deleteEvent)=\"deleteItem($event)\"></app-floating-bar>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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 .add-risk-rc{position:fixed;inset:0 500px 0 0;z-index:1}::ng-deep .add-risk-rc:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-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 .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:.5rem 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body .add-risk-rc-list{margin:1rem 0;display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-rc-body .add-risk-rc-list ul{padding:0;margin:0}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important;font-size:12px!important;color:#161b2f!important}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li i,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:first-child,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:last-of-type,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:last-of-type{color:#34aa44}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column{display:flex;flex-wrap:wrap}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column li{width:50%;padding-right:20px}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 200px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ 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: 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: LoaderInlineComponent, selector: "app-loader-inline" }, { 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: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "pipe", type: ListMapperPipe, name: "listMapper" }, { kind: "pipe", type: SearchPipe$1, name: "search" }] }); }
9607
9607
  }
9608
9608
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxListComponent, decorators: [{
9609
9609
  type: Component,
9610
- args: [{ selector: 'app-checkbox-list', template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\n <div\n class=\"add-risk-rc-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 <!-- <button class=\"add-risk-rc-close\" (click)=close()>\n <i class=\"icons\">&#xe90d;</i>\n </button> -->\n </div>\n <div class=\"add-risk-rc-body\">\n <div class=\"search-block\">\n <i class=\"icons\">&#xe90b;</i>\n <input\n type=\"text\"\n placeholder=\"{{ config?.searchPlaceholder }}\"\n [(ngModel)]=\"searchItem\"\n />\n </div>\n <app-loader-inline *ngIf=\"loaded\"></app-loader-inline>\n <ng-container\n *ngIf=\"itemsList | search : searchItem : displayKey as searchList\"\n >\n <div\n class=\"body-top\"\n *ngIf=\"\n config?.selectAllEnabled &&\n searchList?.length > 0 &&\n searchItem?.trim()?.length === 0\n \"\n >\n <app-cs-checkbox\n [ngValue]=\"\n itemsList?.length === selectedItems?.length &&\n selectedItems?.length > 0\n \"\n (ngValueChange)=\"selectAll($event)\"\n ><strong>\n {{\n itemsList?.length === selectedItems?.length &&\n selectedItems?.length > 0\n ? \"Deselect All\"\n : \"Select All\"\n }}</strong\n >\n </app-cs-checkbox>\n </div>\n <div class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\n <ul [class.two-column]=\"twoColumn\">\n <li *ngFor=\"let item of searchList\" #ulElement>\n <app-cs-checkbox\n *ngIf=\"config.workflow !== 'policy'\"\n [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n [appTooltip]=\"tooltipKey ? item[tooltipKey] : item[displayKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n {{ item[displayKey]\n }}{{\n item?.parent_items?.length && config.workflow === \"policy\"\n ? \" < \" + item?.parent_items?.join(\" < \")\n : \"\"\n }}\n </app-cs-checkbox>\n <app-cs-checkbox\n *ngIf=\"config.workflow === 'policy'\"\n [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n >\n <ul class=\"add-category-name\">\n <li\n *ngFor=\"let data of item?.parent_items; let i = index\"\n [appTooltip]=\"data\"\n placement=\"bottom-left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <i *ngIf=\"i > 0\" class=\"icons\">&#xe910;</i>{{ data }}\n </li>\n <li\n [appTooltip]=\"item[displayKey]\"\n placement=\"bottom-left\"\n type=\"black\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >\n <i *ngIf=\"item?.parent_items?.length > 0\" class=\"icons\"\n >&#xe910;</i\n >\n {{ item[displayKey] }}\n </li>\n </ul>\n </app-cs-checkbox>\n </li>\n </ul>\n </div>\n <app-no-data\n *ngIf=\"searchList?.length === 0 && !loaded\"\n [noDataImage]=\"ASSETS.search_data\"\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 *ngIf=\"!loaded\"\n [selectedData]=\"selectedItems | listMapper : itemsList : identifierKey\"\n [displayElementKey]=\"displayKey\"\n [singularText]=\"config?.floatingTextSingular\"\n [pluralText]=\"\n config?.floatingTextPlural\n ? config?.floatingTextPlural\n : 'Users selected'\n \"\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0\"\n (deleteEvent)=\"deleteItem($event)\"\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 .add-risk-rc{position:fixed;inset:0 500px 0 0;z-index:1}::ng-deep .add-risk-rc:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-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 .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:.5rem 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body .add-risk-rc-list{margin:1rem 0;display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-rc-body .add-risk-rc-list ul{padding:0;margin:0}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important;font-size:12px!important;color:#161b2f!important}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li i,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:first-child,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:last-of-type,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:last-of-type{color:#34aa44}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column{display:flex;flex-wrap:wrap}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column li{width:50%;padding-right:20px}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 200px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
9610
+ args: [{ selector: 'app-checkbox-list', template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\n <div class=\"add-risk-rc-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">{{ config?.panelTitle }}</div>\n <!-- <button class=\"add-risk-rc-close\" (click)=close()>\n <i class=\"icons\">&#xe90d;</i>\n </button> -->\n </div>\n <div class=\"add-risk-rc-body\">\n <div class=\"search-block\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" placeholder=\"{{ config?.searchPlaceholder }}\" [(ngModel)]=\"searchItem\" />\n </div>\n <app-loader-inline *ngIf=\"loaded\"></app-loader-inline>\n <ng-container *ngIf=\"itemsList | search : searchItem : displayKey as searchList\">\n <div class=\"body-top\" *ngIf=\"\n config?.selectAllEnabled &&\n searchList?.length > 0 &&\n searchItem?.trim()?.length === 0\n \">\n <app-cs-checkbox [ngValue]=\"\n itemsList?.length === selectedItems?.length &&\n selectedItems?.length > 0\n \" (ngValueChange)=\"selectAll($event)\"><strong>\n {{\n itemsList?.length === selectedItems?.length &&\n selectedItems?.length > 0\n ? \"Deselect All\"\n : \"Select All\"\n }}</strong>\n </app-cs-checkbox>\n </div>\n <div class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\n <ul [class.two-column]=\"twoColumn\">\n <li *ngFor=\"let item of searchList\" #ulElement>\n <app-cs-checkbox *ngIf=\"config.workflow !== 'policy'\"\n [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n [appTooltip]=\"tooltipKey ? item[tooltipKey] : item[displayKey]\" placement=\"bottom-left\" delay=\"0\"\n [tooltipMandatory]=\"true\">\n {{ item[displayKey]\n }}{{\n item?.parent_items?.length && config.workflow === \"policy\"\n ? \" < \" + item?.parent_items?.join(\" < \")\n : \"\"\n }}\n </app-cs-checkbox>\n <app-cs-checkbox\n *ngIf=\" config.workflow==='policy'\"\n [ngValue]=\" selectedItems.includes(item[identifierKey])\"\n (ngValueChange)=\"selectItem(item[identifierKey], $event)\">\n <ul class=\"add-category-name\">\n <li *ngFor=\"let data of item?.parent_items; let i = index\" [appTooltip]=\"data\" placement=\"bottom-left\"\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\n <i *ngIf=\"i > 0\" class=\"icons\">&#xe910;</i>{{ data }}\n </li>\n <li [appTooltip]=\"item[displayKey]\" placement=\"bottom-left\" type=\"black\" delay=\"0\"\n [tooltipMandatory]=\"true\">\n <i *ngIf=\"item?.parent_items?.length > 0\" class=\"icons\">&#xe910;</i>\n {{ item[displayKey] }}\n </li>\n </ul>\n </app-cs-checkbox>\n </li>\n </ul>\n </div>\n <app-no-data *ngIf=\"searchList?.length === 0 && !loaded\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n config?.noDataText?.length > 0\n ? config?.noDataText\n : 'No data to display.'\n \"></app-no-data>\n </ng-container>\n\n <app-floating-bar *ngIf=\"!loaded\" [selectedData]=\"selectedItems | listMapper : itemsList : identifierKey\"\n [displayElementKey]=\"displayKey\" [singularText]=\"config?.floatingTextSingular\" [pluralText]=\"\n config?.floatingTextPlural\n ? config?.floatingTextPlural\n : 'Users selected'\n \" (closeEvent)=\"save()\" (closeList)=\"close()\" [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0\"\n (deleteEvent)=\"deleteItem($event)\"></app-floating-bar>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/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 .add-risk-rc{position:fixed;inset:0 500px 0 0;z-index:1}::ng-deep .add-risk-rc:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-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 .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:.5rem 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body .add-risk-rc-list{margin:1rem 0;display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-rc-body .add-risk-rc-list ul{padding:0;margin:0}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important;font-size:12px!important;color:#161b2f!important}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li i,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:first-child,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:last-of-type,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:last-of-type{color:#34aa44}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column{display:flex;flex-wrap:wrap}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column li{width:50%;padding-right:20px}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 200px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
9611
9611
  }], ctorParameters: function () { return []; }, propDecorators: { itemsList: [{
9612
9612
  type: Input
9613
9613
  }], selectedItems: [{
@@ -36386,6 +36386,7 @@ class DocumentSectionComponent {
36386
36386
  this.isUploading = false;
36387
36387
  }
36388
36388
  }, (err) => {
36389
+ console.log(err);
36389
36390
  this.snackBar.show("Oops! Something went wrong and we were unable to complete this action. Let's give it another try, shall we?", 'alert');
36390
36391
  this.isUploading = false;
36391
36392
  this.selectedDocumentType = '';
@@ -36509,11 +36510,11 @@ class DocumentSectionComponent {
36509
36510
  this.openTemplate.emit();
36510
36511
  }
36511
36512
  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 }); }
36512
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DocumentSectionComponent, selector: "lib-document-section", inputs: { selectedDocumentType: "selectedDocumentType", feature: "feature", templateView: "templateView", policyId: "policyId", policyName: "policyName", organization_id: "organization_id", member_obj_id: "member_obj_id", userInfo: "userInfo", templateUrl: "templateUrl" }, outputs: { disconnectRefresh: "disconnectRefresh", editPolicy: "editPolicy", openTemplate: "openTemplate" }, ngImport: i0, template: "<div class=\"document-section\" [class.grayscale]=\"templateView\">\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 draft it from scratch using VComply's online editor{{ ff_policy_ms_word_integration ? ' or Create a Policy Using MS Word' : '' }}{{ showDocxBlock ? ' or Upload an Existing DOCX file' : '' }}{{ showPdfBlock ? ' or Upload an Existing PDF file' : '' }} or Draft Using a Template.\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 (click)=\"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 (click)=\"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 (click)=\"resetUploads()\"\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 <span *ngIf=\"selectedDocumentType == 'docx' && filename\"\n [appTooltip]=\"filename\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"true\"\n >{{\n filename\n }}</span>\n </div>\n <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n {{ docxError?.message }}\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n <svg\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 (click)=\"resetUploads()\"\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 <span *ngIf=\"selectedDocumentType == 'pdf' && filename\"\n [appTooltip]=\"filename\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"true\"\n >{{\n filename\n }}</span>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\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 (click)=\"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]=\"templateView\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"templateView\"\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]=\"isNextButtonDisabled\"\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: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }] }); }
36513
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DocumentSectionComponent, selector: "lib-document-section", inputs: { selectedDocumentType: "selectedDocumentType", feature: "feature", templateView: "templateView", policyId: "policyId", policyName: "policyName", organization_id: "organization_id", member_obj_id: "member_obj_id", userInfo: "userInfo", templateUrl: "templateUrl" }, outputs: { disconnectRefresh: "disconnectRefresh", editPolicy: "editPolicy", openTemplate: "openTemplate" }, ngImport: i0, template: "<div class=\"document-section\" [class.grayscale]=\"templateView\" [class.no-pointer]=\"isUploading\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\" y=\"0px\" viewBox=\"0 0 480.8 480.8\" style=\"enable-background: new 0 0 480.8 480.8\" xml:space=\"preserve\">\n <path style=\"fill: #ffd517\"\n d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\n c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\" />\n <g>\n <path style=\"fill: #e5e5e5\" d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\" />\n <path style=\"fill: #e5e5e5\" d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\" />\n </g>\n <g>\n <path style=\"fill: #210b20\" d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\n c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\n s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\n c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\n c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\" />\n <path style=\"fill: #210b20\"\n d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\n c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\" />\n <path style=\"fill: #210b20\"\n d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\n c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\" />\n <path style=\"fill: #210b20\"\n d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\n c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\" />\n <path style=\"fill: #210b20\" d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\n C244.712,66.4,247.912,63.2,247.912,58.8z\" />\n <path style=\"fill: #210b20\" d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\n c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\" />\n <path style=\"fill: #210b20\"\n d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\n c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\" />\n <path style=\"fill: #210b20\"\n d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\n l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\" />\n <path style=\"fill: #210b20\"\n d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\n l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\" />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either draft it from scratch using VComply's\n online editor{{ ff_policy_ms_word_integration ? ' or Create a Policy Using MS Word' : '' }}{{ showDocxBlock ? '\n or Upload an Existing DOCX file' : '' }}{{ showPdfBlock ? ' or Upload an Existing PDF file' : '' }} or Draft\n Using a Template.\n </p>\n </div>\n <label class=\"document-box\" [class.active]=\"selectedDocumentType == 'draft'\">\n <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\" />\n <svg id=\"Draft\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20402\" data-name=\"Path 20402\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#565a6f\" />\n <path id=\"Path_20403\" data-name=\"Path 20403\"\n d=\"M21.884,8.51,10.549,10.384,12.426,21.06l4.38-.61a.333.333,0,0,1,.326.435c-.051.219-.338.235-.514.267-1.474.266-3.009.388-4.491.631-.416-.032-.321-.718-.441-1l-3-.365c-.213-.12-.2-.273-.2-.492.019-.622.092-1.251.125-1.872.16-3,.316-6,.5-8.993A9.457,9.457,0,0,1,9.152,8.1a.369.369,0,0,1,.265-.3l8.519.681L22.2,7.8c.225.068.246.19.3.393.553,2.288.758,4.775,1.285,7.083.143.531-.507.731-.642.2ZM17.211,21.932a.563.563,0,0,0-.072.24,8.549,8.549,0,0,0,0,1.187c.019.217.088.393.328.421a9.138,9.138,0,0,0,1.448-.021.53.53,0,0,0,.122-.065l3.756-3.771L21,18.13Zm5.329-5.35c-.365.286-.7.757-1.061,1.062L23.3,19.437c.3-.35.777-.687,1.05-1.044.15-.2.174-.312.017-.516a13.851,13.851,0,0,0-1.327-1.327.393.393,0,0,0-.23-.1.476.476,0,0,0-.271.13\"\n fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\"><strong>Create</strong> a Policy</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n </div>\n </label>\n\n\n <label *ngIf=\"ff_policy_ms_word_integration\" class=\"document-box\" [class.active]=\"selectedDocumentType == 'word'\">\n <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\" />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\" />\n <path id=\"Path_20405\" data-name=\"Path 20405\"\n d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\"\n fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\">{{createWordPolicyText}}</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label class=\"document-box\" *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\" [class.error]=\"docxError?.visible\"\n (click)=\"resetUploads()\">\n <input type=\"file\" accept=\".docx\" id=\"DOCfile\" (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\" #docxUploadButton />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\" />\n <path id=\"Path_20405\" data-name=\"Path 20405\"\n d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\"\n fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\">Upload a\n <strong>DOCX</strong></ng-container>\n <span *ngIf=\"selectedDocumentType == 'docx' && filename\" [appTooltip]=\"filename\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n filename\n }}</span>\n </div>\n <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n {{ docxError?.message }}\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div class=\"line-progress\" *ngIf=\"selectedDocumentType == 'docx' && isUploading\">\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label class=\"document-box\" *ngIf=\"showPdfBlock\" [class.active]=\"selectedDocumentType == 'pdf'\"\n (click)=\"resetUploads()\">\n <input type=\"file\" accept=\".pdf\" id=\"PDFfile\" (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\" #pdfUploadButton />\n <svg id=\"PDF-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20408\" data-name=\"Path 20408\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#a82a1d\" />\n <path id=\"Path_20409\" data-name=\"Path 20409\"\n d=\"M16.125,13.778A1.39,1.39,0,0,0,16.285,15a16.106,16.106,0,0,0,2.106,2.554c.312-.045.6-.047,1.2-.092a6.964,6.964,0,0,1,3.616.239,1.31,1.31,0,0,1,.784,1.361,1.176,1.176,0,0,1-1.075.981c-2.224.336-3.305-.9-4.579-1.746a2.094,2.094,0,0,0-.812.021,25.782,25.782,0,0,0-3.412.916c-.253.089-.338.3-.533.609a11.062,11.062,0,0,1-2.82,3.427,2.145,2.145,0,0,1-1.861.445c-1-.222-1.178-1.182-.5-1.942A9.452,9.452,0,0,1,10,20.462a14.714,14.714,0,0,1,2.418-1.109c.491-.461.556-.686.966-1.764.431-1.136.922-2.25,1.324-3.4a1.679,1.679,0,0,0-.035-1.062,7.7,7.7,0,0,1-.638-3.476,1.4,1.4,0,0,1,.959-1.393,1.279,1.279,0,0,1,1.464.8c.2.479.552,1.75-.331,4.728m-.377,1.377-1.418,3.422,3.353-.883-1.935-2.539m3.222,2.882A4.5,4.5,0,0,0,21.92,19.37c.377,0,.714-.131.733-.6.051-1.251-2.656-.864-3.682-.73m-6.96,2.037a9.788,9.788,0,0,0-2.975,1.8c-.218.171-.446.718-.282.984s.81.067,1-.12a9.29,9.29,0,0,0,2.253-2.664m3.246-7.243c-.045-.878.461-2.172.437-3.224-.008-.355-.051-.747-.5-.772-.364-.02-.534.476-.569.762a5.8,5.8,0,0,0,.636,3.234\"\n fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\">Upload a\n <strong>PDF</strong></ng-container>\n <span *ngIf=\"selectedDocumentType == 'pdf' && filename\" [appTooltip]=\"filename\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n filename\n }}</span>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n </div>\n <div class=\"line-progress\" *ngIf=\"selectedDocumentType == 'pdf' && isUploading\">\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label class=\"document-box\" [class.active]=\"selectedDocumentType === 'template'\">\n <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\" />\n <svg id=\"TMP-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20406\" data-name=\"Path 20406\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#34aa44\" />\n <path id=\"Path_20410\" data-name=\"Path 20410\"\n d=\"M16,1.778V3.555H0V1.778A1.783,1.783,0,0,1,1.778,0H14.223A1.783,1.783,0,0,1,16,1.778M0,4.444H16v8.889a1.778,1.778,0,0,1-1.777,1.778H1.778A1.778,1.778,0,0,1,0,13.333ZM6.99,9.928A.891.891,0,0,0,6.1,9.039H3.642a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889H6.1a.891.891,0,0,0,.888-.889Zm6.306,0a.892.892,0,0,0-.889-.889H9.948a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889h2.459a.892.892,0,0,0,.889-.889ZM2.667,7.111A.889.889,0,0,0,3.556,8h8.889a.889.889,0,0,0,0-1.778H3.556a.889.889,0,0,0-.889.889\"\n transform=\"translate(8 7.999)\" fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\">Draft Using a <strong>Template</strong></div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n </div>\n </label>\n <!-- End Select a template -->\n <app-loader-inline *ngIf=\"isLoader\"></app-loader-inline>\n </div>\n</div>\n<div class=\"bottom-button\" [class.grayscale]=\"templateView\">\n <button type=\"button\" (click)=\"editPolicyEmit()\" class=\"back\" [class.disabled]=\"templateView\">\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button type=\"button\" (click)=\"editor(selectedDocumentType)\" class=\"next\"\n [class.disabled]=\"isNextButtonDisabled || isUploading\">\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%;overflow:hidden;overflow-y:scroll}@media screen and (max-width: 1365px){::ng-deep .document-section{align-items:unset}}::ng-deep .document-section.grayscale{filter:grayscale(1)!important;pointer-events:none!important}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#787a8c;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #CDCED6;border-radius:8px;width:100%;background:transparent;height:64px;padding:0 16px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;inset:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 64px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;font-weight:500;line-height:24px;color:#000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:270px;margin-right:25px}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:24px;left:0;right:0;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:16px;height:16px;position:absolute;right:8px;top:2px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:16px;height:16px;background:#ddf4e0;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:16px;position:relative;top:0;right:8px}::ng-deep .document-section-inner .document-box.active{background:#ddf4e0;border:1px solid #B7E2BD}::ng-deep .document-section-inner .document-box.active .document-box-icon{display:none}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}::ng-deep .document-section-inner .document-box-icon{color:#565a6f}::ng-deep .document-section.no-pointer{pointer-events:none}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }] }); }
36513
36514
  }
36514
36515
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentSectionComponent, decorators: [{
36515
36516
  type: Component,
36516
- args: [{ selector: 'lib-document-section', template: "<div class=\"document-section\" [class.grayscale]=\"templateView\">\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 draft it from scratch using VComply's online editor{{ ff_policy_ms_word_integration ? ' or Create a Policy Using MS Word' : '' }}{{ showDocxBlock ? ' or Upload an Existing DOCX file' : '' }}{{ showPdfBlock ? ' or Upload an Existing PDF file' : '' }} or Draft Using a Template.\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 (click)=\"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 (click)=\"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 (click)=\"resetUploads()\"\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 <span *ngIf=\"selectedDocumentType == 'docx' && filename\"\n [appTooltip]=\"filename\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"true\"\n >{{\n filename\n }}</span>\n </div>\n <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n {{ docxError?.message }}\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n <svg\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 (click)=\"resetUploads()\"\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 <span *ngIf=\"selectedDocumentType == 'pdf' && filename\"\n [appTooltip]=\"filename\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"true\"\n >{{\n filename\n }}</span>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\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 (click)=\"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]=\"templateView\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"templateView\"\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]=\"isNextButtonDisabled\"\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"] }]
36517
+ args: [{ selector: 'lib-document-section', template: "<div class=\"document-section\" [class.grayscale]=\"templateView\" [class.no-pointer]=\"isUploading\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\" y=\"0px\" viewBox=\"0 0 480.8 480.8\" style=\"enable-background: new 0 0 480.8 480.8\" xml:space=\"preserve\">\n <path style=\"fill: #ffd517\"\n d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\n c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\" />\n <g>\n <path style=\"fill: #e5e5e5\" d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\" />\n <path style=\"fill: #e5e5e5\" d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\" />\n </g>\n <g>\n <path style=\"fill: #210b20\" d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\n c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\n s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\n c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\n c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\" />\n <path style=\"fill: #210b20\"\n d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\n c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\" />\n <path style=\"fill: #210b20\"\n d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\n c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\" />\n <path style=\"fill: #210b20\"\n d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\n c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\" />\n <path style=\"fill: #210b20\" d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\n C244.712,66.4,247.912,63.2,247.912,58.8z\" />\n <path style=\"fill: #210b20\" d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\n c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\" />\n <path style=\"fill: #210b20\"\n d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\n c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\" />\n <path style=\"fill: #210b20\"\n d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\n l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\" />\n <path style=\"fill: #210b20\"\n d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\n l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\" />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either draft it from scratch using VComply's\n online editor{{ ff_policy_ms_word_integration ? ' or Create a Policy Using MS Word' : '' }}{{ showDocxBlock ? '\n or Upload an Existing DOCX file' : '' }}{{ showPdfBlock ? ' or Upload an Existing PDF file' : '' }} or Draft\n Using a Template.\n </p>\n </div>\n <label class=\"document-box\" [class.active]=\"selectedDocumentType == 'draft'\">\n <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\" />\n <svg id=\"Draft\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20402\" data-name=\"Path 20402\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#565a6f\" />\n <path id=\"Path_20403\" data-name=\"Path 20403\"\n d=\"M21.884,8.51,10.549,10.384,12.426,21.06l4.38-.61a.333.333,0,0,1,.326.435c-.051.219-.338.235-.514.267-1.474.266-3.009.388-4.491.631-.416-.032-.321-.718-.441-1l-3-.365c-.213-.12-.2-.273-.2-.492.019-.622.092-1.251.125-1.872.16-3,.316-6,.5-8.993A9.457,9.457,0,0,1,9.152,8.1a.369.369,0,0,1,.265-.3l8.519.681L22.2,7.8c.225.068.246.19.3.393.553,2.288.758,4.775,1.285,7.083.143.531-.507.731-.642.2ZM17.211,21.932a.563.563,0,0,0-.072.24,8.549,8.549,0,0,0,0,1.187c.019.217.088.393.328.421a9.138,9.138,0,0,0,1.448-.021.53.53,0,0,0,.122-.065l3.756-3.771L21,18.13Zm5.329-5.35c-.365.286-.7.757-1.061,1.062L23.3,19.437c.3-.35.777-.687,1.05-1.044.15-.2.174-.312.017-.516a13.851,13.851,0,0,0-1.327-1.327.393.393,0,0,0-.23-.1.476.476,0,0,0-.271.13\"\n fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\"><strong>Create</strong> a Policy</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n </div>\n </label>\n\n\n <label *ngIf=\"ff_policy_ms_word_integration\" class=\"document-box\" [class.active]=\"selectedDocumentType == 'word'\">\n <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\" />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\" />\n <path id=\"Path_20405\" data-name=\"Path 20405\"\n d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\"\n fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\">{{createWordPolicyText}}</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label class=\"document-box\" *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\" [class.error]=\"docxError?.visible\"\n (click)=\"resetUploads()\">\n <input type=\"file\" accept=\".docx\" id=\"DOCfile\" (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\" #docxUploadButton />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\" />\n <path id=\"Path_20405\" data-name=\"Path 20405\"\n d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\"\n fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\">Upload a\n <strong>DOCX</strong></ng-container>\n <span *ngIf=\"selectedDocumentType == 'docx' && filename\" [appTooltip]=\"filename\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n filename\n }}</span>\n </div>\n <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n {{ docxError?.message }}\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div class=\"line-progress\" *ngIf=\"selectedDocumentType == 'docx' && isUploading\">\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label class=\"document-box\" *ngIf=\"showPdfBlock\" [class.active]=\"selectedDocumentType == 'pdf'\"\n (click)=\"resetUploads()\">\n <input type=\"file\" accept=\".pdf\" id=\"PDFfile\" (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\" #pdfUploadButton />\n <svg id=\"PDF-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20408\" data-name=\"Path 20408\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#a82a1d\" />\n <path id=\"Path_20409\" data-name=\"Path 20409\"\n d=\"M16.125,13.778A1.39,1.39,0,0,0,16.285,15a16.106,16.106,0,0,0,2.106,2.554c.312-.045.6-.047,1.2-.092a6.964,6.964,0,0,1,3.616.239,1.31,1.31,0,0,1,.784,1.361,1.176,1.176,0,0,1-1.075.981c-2.224.336-3.305-.9-4.579-1.746a2.094,2.094,0,0,0-.812.021,25.782,25.782,0,0,0-3.412.916c-.253.089-.338.3-.533.609a11.062,11.062,0,0,1-2.82,3.427,2.145,2.145,0,0,1-1.861.445c-1-.222-1.178-1.182-.5-1.942A9.452,9.452,0,0,1,10,20.462a14.714,14.714,0,0,1,2.418-1.109c.491-.461.556-.686.966-1.764.431-1.136.922-2.25,1.324-3.4a1.679,1.679,0,0,0-.035-1.062,7.7,7.7,0,0,1-.638-3.476,1.4,1.4,0,0,1,.959-1.393,1.279,1.279,0,0,1,1.464.8c.2.479.552,1.75-.331,4.728m-.377,1.377-1.418,3.422,3.353-.883-1.935-2.539m3.222,2.882A4.5,4.5,0,0,0,21.92,19.37c.377,0,.714-.131.733-.6.051-1.251-2.656-.864-3.682-.73m-6.96,2.037a9.788,9.788,0,0,0-2.975,1.8c-.218.171-.446.718-.282.984s.81.067,1-.12a9.29,9.29,0,0,0,2.253-2.664m3.246-7.243c-.045-.878.461-2.172.437-3.224-.008-.355-.051-.747-.5-.772-.364-.02-.534.476-.569.762a5.8,5.8,0,0,0,.636,3.234\"\n fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\">Upload a\n <strong>PDF</strong></ng-container>\n <span *ngIf=\"selectedDocumentType == 'pdf' && filename\" [appTooltip]=\"filename\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n filename\n }}</span>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n </div>\n <div class=\"line-progress\" *ngIf=\"selectedDocumentType == 'pdf' && isUploading\">\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label class=\"document-box\" [class.active]=\"selectedDocumentType === 'template'\">\n <input type=\"radio\" name=\"selectedDocumentType\" (click)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\" />\n <svg id=\"TMP-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20406\" data-name=\"Path 20406\"\n d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#34aa44\" />\n <path id=\"Path_20410\" data-name=\"Path 20410\"\n d=\"M16,1.778V3.555H0V1.778A1.783,1.783,0,0,1,1.778,0H14.223A1.783,1.783,0,0,1,16,1.778M0,4.444H16v8.889a1.778,1.778,0,0,1-1.777,1.778H1.778A1.778,1.778,0,0,1,0,13.333ZM6.99,9.928A.891.891,0,0,0,6.1,9.039H3.642a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889H6.1a.891.891,0,0,0,.888-.889Zm6.306,0a.892.892,0,0,0-.889-.889H9.948a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889h2.459a.892.892,0,0,0,.889-.889ZM2.667,7.111A.889.889,0,0,0,3.556,8h8.889a.889.889,0,0,0,0-1.778H3.556a.889.889,0,0,0-.889.889\"\n transform=\"translate(8 7.999)\" fill=\"#fff\" />\n </svg>\n\n <div class=\"label-right\">\n <div class=\"value\">Draft Using a <strong>Template</strong></div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n </div>\n </div>\n </label>\n <!-- End Select a template -->\n <app-loader-inline *ngIf=\"isLoader\"></app-loader-inline>\n </div>\n</div>\n<div class=\"bottom-button\" [class.grayscale]=\"templateView\">\n <button type=\"button\" (click)=\"editPolicyEmit()\" class=\"back\" [class.disabled]=\"templateView\">\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button type=\"button\" (click)=\"editor(selectedDocumentType)\" class=\"next\"\n [class.disabled]=\"isNextButtonDisabled || isUploading\">\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%;overflow:hidden;overflow-y:scroll}@media screen and (max-width: 1365px){::ng-deep .document-section{align-items:unset}}::ng-deep .document-section.grayscale{filter:grayscale(1)!important;pointer-events:none!important}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#787a8c;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #CDCED6;border-radius:8px;width:100%;background:transparent;height:64px;padding:0 16px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;inset:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 64px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;font-weight:500;line-height:24px;color:#000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:270px;margin-right:25px}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:24px;left:0;right:0;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:16px;height:16px;position:absolute;right:8px;top:2px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:16px;height:16px;background:#ddf4e0;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:16px;position:relative;top:0;right:8px}::ng-deep .document-section-inner .document-box.active{background:#ddf4e0;border:1px solid #B7E2BD}::ng-deep .document-section-inner .document-box.active .document-box-icon{display:none}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}::ng-deep .document-section-inner .document-box-icon{color:#565a6f}::ng-deep .document-section.no-pointer{pointer-events:none}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"] }]
36517
36518
  }], ctorParameters: function () { return [{ type: SnackBarService }, { type: PolicyService }, { type: PolicyAPIService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$1.PlatformLocation }, { type: IframeService }]; }, propDecorators: { selectedDocumentType: [{
36518
36519
  type: Input
36519
36520
  }], feature: [{
@@ -37823,6 +37824,7 @@ class WorkflowPolicyComponent {
37823
37824
  searchEnabled: true,
37824
37825
  selectAllEnabled: true,
37825
37826
  workflow: 'policy',
37827
+ noDataText: ''
37826
37828
  };
37827
37829
  this.approvalWorkflowConfig = {
37828
37830
  panelTitle: 'Select user(s)',
@@ -38133,6 +38135,9 @@ class WorkflowPolicyComponent {
38133
38135
  this.policyService.getCategoriesList().subscribe((res) => {
38134
38136
  this.categoryList = res;
38135
38137
  this.categoriesListLoaded = true;
38138
+ if (res.length) {
38139
+ this.categoryConfig.noDataText = 'No results matched your search criteria.';
38140
+ }
38136
38141
  }, (err) => {
38137
38142
  console.error(err);
38138
38143
  this.categoriesListLoaded = true;
@@ -38354,7 +38359,7 @@ class WorkflowPolicyComponent {
38354
38359
  let data = {
38355
38360
  type: obj[item]?.name ?? obj[item]?.type,
38356
38361
  approvers: obj[item]?.approvers,
38357
- approval_done: obj[item]?.approval_done ?? false,
38362
+ approval_done: false,
38358
38363
  level1: obj[item]?.level1 || item,
38359
38364
  alias_name: obj[item]?.alias_name,
38360
38365
  };
@@ -38383,6 +38388,7 @@ class WorkflowPolicyComponent {
38383
38388
  });
38384
38389
  }
38385
38390
  hasWorkflowChanges(newApproverIds) {
38391
+ debugger;
38386
38392
  // If there is no workflow selected
38387
38393
  if (!this.selectedWorkflow?.length || !this.selectedWorkflow[0]?.approval_workflow) {
38388
38394
  return true;
@@ -38396,7 +38402,7 @@ class WorkflowPolicyComponent {
38396
38402
  //Compare each level in the workflow
38397
38403
  for (const levelKey in newApprovers) {
38398
38404
  const newLevel = newApprovers[levelKey];
38399
- let existingLevel = existingWorkflow.find((level) => level.level1 === newLevel.level1);
38405
+ let existingLevel = existingWorkflow.find((level) => level.alias_name === newLevel.alias_name);
38400
38406
  if (!existingLevel && existingWorkflow[parseInt(levelKey.replace('level', '')) - 1]) {
38401
38407
  existingLevel = existingWorkflow[parseInt(levelKey.replace('level', '')) - 1];
38402
38408
  }
@@ -49962,6 +49968,9 @@ class WorkflowEngineContainerComponent {
49962
49968
  ].includes(true) ||
49963
49969
  this.program?.activeList ||
49964
49970
  this.compliance?.activeSelector ||
49971
+ this.policy.activeSelector ||
49972
+ this.workflowAssessmentComponent?.activeSelector ||
49973
+ this.riskComponent?.activeSelector ||
49965
49974
  this.grcObject?.openedPopup) {
49966
49975
  //Do Nothing
49967
49976
  }
@@ -52534,13 +52543,15 @@ class CheckboxListModule {
52534
52543
  FloatingBarModule,
52535
52544
  VLoaderModule,
52536
52545
  CommonModule,
52537
- FormgroupModule$1], exports: [CheckboxListComponent] }); }
52546
+ FormgroupModule$1,
52547
+ NoDataModule$1], exports: [CheckboxListComponent] }); }
52538
52548
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxListModule, imports: [FormsModule,
52539
52549
  PipesModule,
52540
52550
  FloatingBarModule,
52541
52551
  VLoaderModule,
52542
52552
  CommonModule,
52543
- FormgroupModule$1] }); }
52553
+ FormgroupModule$1,
52554
+ NoDataModule$1] }); }
52544
52555
  }
52545
52556
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxListModule, decorators: [{
52546
52557
  type: NgModule,
@@ -52554,6 +52565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
52554
52565
  VLoaderModule,
52555
52566
  CommonModule,
52556
52567
  FormgroupModule$1,
52568
+ NoDataModule$1
52557
52569
  ],
52558
52570
  }]
52559
52571
  }] });