vcomply-workflow-engine 3.0.2 → 3.0.4

package/bundles/vcomply-workflow-engine.umd.js

@@ -6607,7 +6607,7 @@
     WorkflowComplianceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-workflow-compliance',
-                    template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n\r\n    <!-- Behalf -->\r\n    <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row \" [class.active]=\"activeSelector === 'assignors'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assignors' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length==0 || activeSelector === 'assignors'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">I am creating this responsibility on behalf of someone else\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\"\r\n                        (ngValueChange)=\"responsibilityForm.assignors.enable = $event; responsibilityForm.assignors.list = [];\">\r\n                    </app-cs-switch>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assignors?.list?.length === 0 || activeSelector === 'assignors'\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignors',true)\" placeholder=\"Who is responsible for managing this responsibility?\" readonly [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 0 && activeSelector !== 'assignors'\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <ng-container *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,1)\">\r\n                            <i (click)=\"remove('assignors',b_user)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"b_user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{b_user.member_name}}</span>\r\n                        </ng-container>\r\n                        <button *ngIf=\"responsibilityForm?.assignors?.list?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"behalf.popover()\" placement=\"right\">+{{responsibilityForm?.assignors?.list?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n\r\n                    <!-- <div class=\"chip-container\">\r\n                        <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                            {{b_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('assignors',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #behalf [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let b_user of responsibilityForm?.assignors?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                                        {{ b_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n                    person responsible for managing this responsibility.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- What -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'responsibilityName' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n                *ngIf=\"(responsibilityForm?.responsibility?.name.trim() === '') || focus.responsibilityName\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\"> What? <span class=\"required\">*</span>\r\n                    <button *ngIf=\"isFrameworkAvailable && mode !== 'EDIT' && openedFrom !=='RISK_TREATMENT'\"\r\n                        (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n                </label>\r\n                <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\r\n                    [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\"\r\n                    type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                    <i class=\"icons\">&#xea70;</i>\r\n                </span>\r\n                <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\" type=\"text\"\r\n                    [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\r\n                    (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName',true)\"\r\n                    (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.responsibility?.name.trim() !='' && isEditWhat\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"value\">{{responsibilityForm.responsibility?.name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for\r\n                    this responsibility.</p>\r\n                <div class=\"switch-row align-right\">\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n                        (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n                        Responsibility\r\n                    </app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Who -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length==0 || activeSelector === 'assignees'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\r\n\r\n                <div class=\"select\" *ngIf=\"(responsibilityForm?.assignees?.list?.length == 0 && (!featureFlag_groups||(responsibilityForm?.assigneeGroups?.list?.length == 0 && featureFlag_groups)))\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignees',true)\" placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n                </div>\r\n\r\n                <div class=\"selected\" *ngIf=\"((responsibilityForm?.assignees?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.assignees?.list?.length > 0 || responsibilityForm?.assigneeGroups?.list?.length > 0 ) && featureFlag_groups))\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\r\n                        <ng-container *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,1)\">\r\n                            <i (click)=\"remove('assignees',e_user)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"e_user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{e_user.member_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenbg\" appPopover (click)=\"assignees.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">+{{responsibilityForm?.assignees?.list?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"user.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">+{{responsibilityForm?.assignees?.list?.length -1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\">&</span>\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"  appPopover (click)=\"group.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n                        <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                            {{e_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\" >&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\r\n                            <i *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" class=\"icons cross vx-mr-1\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\" >&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\r\n                        </div>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'assignees' && (!featureFlag_groups || (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assignees',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-popover #user [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice : 1\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignees',e_user)\" >&#xe90d;</i>\r\n                                        {{ e_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #group [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let group of responsibilityForm?.assigneeGroups?.list | slice: 1\" >\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i  *ngIf=\"(!featureFlag_groups || (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\" class=\"icons\" (click)=\"remove('groupassignees',group)\" >&#xe90d;</i>\r\n                                        {{group.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n\r\n                <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the person\r\n                    responsible for completing this responsibility.</p>\r\n                    <ng-container *ngIf=\"!isGroupAssigned\">\r\n                      <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n                          (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n                          [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED\r\n                          PERSONS NEED TO\r\n                          COMPLETE THIS<i class=\"icons\"\r\n                              [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                      </app-cs-radio>\r\n                      <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n                          (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n                          [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED\r\n                          PERSON CAN COMPLETE\r\n                          THIS <i class=\"icons\" [appTooltip]=\"'If selected, only one responsibility will be created.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                      </app-cs-radio>\r\n\r\n                      <div class=\"switch-row align-right\" *ngIf=\"(mode == 'EDIT' && (!featureFlag_groups || (responsibilityForm?.assigneeGroups?.list.length === 0 && featureFlag_groups)))\">\r\n                        <app-cs-switch\r\n                            (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"> ANY SELECTED\r\n                            PERSON CAN COMPLETE\r\n                            THIS\r\n                        </app-cs-switch>\r\n                    </div>\r\n                    </ng-container>\r\n                <app-popover #assignees [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                                        {{ e_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- When? -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"(!responsibilityForm?.frequency || activeSelector === 'frequency')\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n                *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.frequency  && activeSelector !== 'frequency' && responsibilityForm?.frequency != '' && responsibilityForm?.frequency != '5~0~0~0'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\r\n                <div *ngIf=\"responsibilityForm?.frequency == '' || responsibilityForm?.frequency == '5~0~0~0'\"\r\n                    class=\"select button-sec\">\r\n                    <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\" readonly>\r\n                    <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                </div>\r\n                <div *ngIf=\"responsibilityForm?.frequency != '' && responsibilityForm?.frequency !== '5~0~0~0'\"\r\n                    class=\"selected button-sec\">\r\n                    <span class=\"chip\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{frequencyPlaceholder}}</span>\r\n                    <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\" (click)=\"activateSelector('frequency',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i>Edit\r\n                    </button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the frequency of occurrence for this responsibility.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Notes -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'notes' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.description).trim() === '') || focus.description\">\r\n\r\n            <svg class=\"checkIcon\"\r\n                *ngIf=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Notes</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                id:'notes',\r\n                placeholder: 'Add more information about completing the responsibility'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Objective -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\"\r\n        [attr.id]=\"'OBJECTIVE'\" [class.active]=\"activeSelector === 'objective'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'objective' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.objective).trim() !=='' && !focus.objective\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() === '') || focus.objective\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim()  !== '') && !focus.objective\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Objective</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                id:'objective',\r\n                link: true,\r\n                placeholder: 'This option lets you specify an objective for the responsibility.'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Responsibility Center -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\r\n        [class.active]=\"activeSelector === 'rc'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                alt=\"\" *ngIf=\"responsibilityForm?.rc?.length==0 || activeSelector === 'rc'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Center </label>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('rc',true)\"\r\n                        aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\r\n                    </div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n                </div>\r\n\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\" [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,1)\">\r\n                        <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe9ae;</i>\r\n                        <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc?.item_name}}</span>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" *ngIf=\"responsibilityForm?.rc?.length > 1\" appPopover (click)=\"rcPopover.popover()\" placement=\"right\">+{{responsibilityForm?.rc?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>{{rc?.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+{{responsibilityForm?.rc?.slice(2).length}}</button>\r\n                    </div> -->\r\n\r\n                    <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let rc of responsibilityForm?.rc | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                        {{ rc.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n\r\n                <ng-container *ngIf=\"isResponsibilityRcLinkEnabled && (mode != 'EDIT' || (responsibilityForm?.rc?.length <= 1))\">\r\n                    <!-- <app-cs-radio><div [appTooltip]=\"'Create separate responsibilities for each responsibility center'\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026</div><i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio> -->\r\n                    <app-cs-radio [class.disabled]=\"mode == 'EDIT' && responsibilityForm.responsibilityCenterType === 1 && responsibilityForm?.rc?.length > 1\" [checked]=\"responsibilityCenterType === 0\" [name]=\"'ff_responsibility_rc_link'\" (checkedEvent)=\"onRcTypeChange(0)\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026<i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\r\n                    <app-cs-radio [class.disabled]=\"mode == 'EDIT' && responsibilityForm.responsibilityCenterType === 1 && responsibilityForm?.rc?.length > 1\" [checked]=\"responsibilityCenterType === 1\" [name]=\"'ff_responsibility_rc_link'\" (checkedEvent)=\"onRcTypeChange(1)\">DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i class=\"icons\" [appTooltip]=\"'If selected, the same responsibility will be linked to each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Program -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"activeSelector && activeSelector !== 'program' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" *ngIf=\"responsibilityForm?.program?.length==0 || activeSelector === 'program'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                        <label class=\"vx-control-panel\">Program</label>\r\n                        <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length ==0\">\r\n                            <div class=\"custom-input\" (click)=\"activateSelector('program',true)\" aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\r\n                            <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n                        </div>\r\n                        <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n                            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                <ng-container *ngFor=\"let program of responsibilityForm?.program\">\r\n                                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"false\" (click)=\"remove('program',program)\">&#xe9ae;</i>\r\n                                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"program?.name??'--'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{program?.name??'--'}}</span>\r\n                                </ng-container>\r\n                                <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"program.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\">+{{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n                            </div>\r\n\r\n                            <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n                                <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\r\n                                <!- - <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->\r\n                                <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n                            </div> -->\r\n\r\n                            <button *ngIf=\"activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                        </div>\r\n\r\n\r\n                        <app-popover #program [dontCloseonClick]=\"true\">\r\n                            <div class=\"wf-action-list\">\r\n                                <ul class=\"action-item\">\r\n                                    <ng-container *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\">\r\n                                        <li class=\"multiple-program\">\r\n                                        <div class=\"avatar-card\">\r\n                                            <span class=\"value\" [appTooltip]=\"responsibilityForm?.program[0]?.name\" placement=\"bottom\"\r\n                                            type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n                                            {{responsibilityForm?.program[0]?.name}}\r\n                                            </span>\r\n                                            <div class=\"primary-label\">PRIMARY</div>\r\n                                        </div>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <li *ngFor=\"let program of responsibilityForm?.linkedProgram; let j = index\">\r\n                                        <div class=\"avatar-card\" *ngIf=\"program?.category_id !== responsibilityForm?.program[0]?.category_id\">\r\n                                            <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\"\r\n                                            type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n                                                <i *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n                                                {{ program?.name }}\r\n                                            </span>\r\n                                        </div>\r\n                                    </li>\r\n                                </ul>\r\n                            </div>\r\n                        </app-popover>\r\n                    <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                        <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                            <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                            <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Responsibility Category -->\r\n    <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\" [attr.id]=\"'CATEGORY'\"\r\n        [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.category?.length==0 || activeSelector === 'category'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Category </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.category?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('category',true)\"\r\n                        aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.category?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.category?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.category?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let category of responsibilityForm?.category?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                            {{category.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.category?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"category.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.category?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #category [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let category of responsibilityForm?.category | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                        {{ category.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                    <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                        <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Format & Evidence -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n        [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'formate_evidence' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired == false && this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 && this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\" alt=\"im\">\r\n\r\n            <svg *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatFiles.length || this.responsibilityForm.formatAndEvidence.formatLinks?.length\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence',$event)\"\r\n                [mode]=\"'responsibility'\" [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\">\r\n            </app-format-and-evidence>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <!-- Assessment -->\r\n    <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n        [attr.id]=\"'ASSESSMENT'\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\r\n            <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\" alt=\"im\">\r\n\r\n            <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n                <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n                    <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\" placeholder=\"Select an assessment for this responsibility\" [disabled]=\"responsibilityForm.checkpoints?.length\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('assessment',category)\">&#xe9ae;</i>\r\n                        <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n                        <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n                            {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n                            'Question'}}</div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"false\" [class.plus]=\"false\">\r\n                        <span class=\"chip with-question\">\r\n                            <span class=\"value\" [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons\" (click)=\"remove('assessment',category)\">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n                            <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n                                {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n                                'Question'}}</span>\r\n                        </span>\r\n                    </div> -->\r\n\r\n                    <button (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\"\r\n                        type=\"button\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <!-- Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\r\n        [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length>0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\r\n                    <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\r\n                        (click)=\"activateSelector('checkpoints',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                    <button [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n                        (click)=\"activateSelector('checkpoints',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <ng-container *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"checkpoint?.label\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{checkpoint?.label}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">{{checkpoint?.label}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                    </div> -->\r\n\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\r\n                <i class=\"icons alert-icon\">&#xe930;</i>\r\n                <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature\r\n                    instead of the old checkpoints functionality to create analytical questions. <button\r\n                        class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to\r\n                    continue.</span>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- New  Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\r\n        [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n                    <!-- <button  class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('checkpoints-new',true)\" placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                    <button (click)=\"activateSelector('checkpoints-new',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe9ae;</i>\r\n                        <span class=\"chipName vx-fs-11 vx-label-txt\">{{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n                        <span class=\"chip\">\r\n                            <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n                            {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                    </div> -->\r\n\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints-new',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Risk Classification -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\r\n        [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'riskCalculator' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    Risk Classification\r\n                    <button (click)=\"activateSelector('riskCalculator',true)\" class=\"button\">+ Risk Calculator</button>\r\n                </label>\r\n\r\n                <div class=\"classification\">\r\n                    <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\r\n                        <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\r\n                            [value]=\"risk?.value\">\r\n                        <span>{{risk?.name}}</span>\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Reviewer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\r\n        [class.active]=\"activeSelector === 'reviewerFrequency'||  activeSelector === 'reviewer'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'reviewer' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length==0 || activeSelector === 'reviewer'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.reviewers?.list?.length>0 && activeSelector !== 'reviewer'\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Reviewer</label>\r\n                <div class=\"select\" *ngIf=\"((responsibilityForm?.reviewers?.list?.length == 0 && !featureFlag_groups)||((responsibilityForm?.reviewers?.list?.length == 0 && responsibilityForm?.groupReviewers?.list?.length == 0) && featureFlag_groups))\">\r\n                    <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select Reviewer\"\r\n                        readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"((responsibilityForm?.reviewers?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.reviewers?.list?.length > 0 || responsibilityForm?.groupReviewers?.list?.length > 0 ) && featureFlag_groups))\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\r\n                        <ng-container *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,1)\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('reviewer',reviewer)\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{reviewer.member_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"reviewer.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">+{{responsibilityForm?.reviewers?.list?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i> {{reviewer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    \r\n                    <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"user.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">+{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\r\n                        </div>\r\n                        <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</div>\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"group.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\" >&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\r\n\r\n                        </div>\r\n                    </div> -->\r\n\r\n                    <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-cs-radio\r\n                    [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('sequential')\" [class.disabled]=\"responsibilityForm?.groupReviewers?.list?.length > 0\">\r\n                    SEQUENTIAL<i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio\r\n                    [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\r\n                    ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                        {{ reviewer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #user [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 1 ; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\" >&#xe90d;</i>\r\n                                        {{ reviewer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #group [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let group of responsibilityForm?.groupReviewers?.list | slice: 1; let i = index\" >\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i  class=\"icons\" (click)=\"remove('groupReviewer',group)\" >&#xe90d;</i>\r\n                                        {{group.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\r\n        [class.active]=\" activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\"\r\n        [class.disabled]=\"activeSelector &&  !['overseerNotify','overseerNotify'].includes(activeSelector) && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n                *ngIf=\"(responsibilityForm?.overseers?.list?.length==0 && responsibilityForm?.overseers?.notifyList?.length == 0)|| activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\">\r\n            <svg class=\"checkIcon\" *ngIf=\"(responsibilityForm?.overseers?.list?.length>0 || responsibilityForm?.overseers?.notifyList?.length>0)\r\n                && !( activeSelector === 'overseerNotify' ||  activeSelector === 'overseer')\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Overseer </label>\r\n                <div class=\"select\" *ngIf=\"((responsibilityForm?.overseers?.list?.length == 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.list?.length == 0 && responsibilityForm?.overseersGroups?.list?.length == 0) && featureFlag_groups))\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseer',true)\" placeholder=\"Who should have oversight of the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"((responsibilityForm?.overseers?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.list?.length > 0 || responsibilityForm?.overseersGroups?.list?.length > 0 ) && featureFlag_groups))\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\r\n                        <ng-container *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,1)\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseer',overseer)\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{overseer.member_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"overseers.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">+{{responsibilityForm?.overseers?.list?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\r\n                        <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\" appPopover (click)=\"overseers.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n                    </div> -->\r\n\r\n                    <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"overseerUser.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">+{{responsibilityForm?.overseers?.list?.length -1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\">&</span>\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\r\n                        </div>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n\r\n                <div class=\"select\" *ngIf=\"((responsibilityForm?.overseers?.notifyList?.length == 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.notifyList?.length == 0 && responsibilityForm?.overseersGroups?.notifyList?.length == 0) && featureFlag_groups))\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseerNotify',true)\"\r\n                        placeholder=\"Who should be notified if the responsibility is not complet...\" readonly\r\n                        [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\"\r\n                        placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"((responsibilityForm?.overseers?.notifyList?.length > 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.notifyList?.length > 0 || responsibilityForm?.overseersGroups?.notifyList?.length > 0 ) && featureFlag_groups))\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\r\n                        <ng-container *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,1)\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{overseer.member_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"notify.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">+{{responsibilityForm?.overseers?.notifyList?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n                        <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\" type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n                    </div> -->\r\n\r\n                    <div class=\"vx-d-flex vx-align-center\">\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"notifyUser.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">+{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\">&</span>\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\" class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\" class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\r\n                        </div>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('overseerNotify',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-popover #overseers [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseers?.list | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer?.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #overseerUser [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseers of responsibilityForm?.overseers?.list | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',overseers)\" >&#xe90d;</i>\r\n                                        {{ overseers?.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #overseerGroup [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseersGroups?.list | slice: 1; let i = index\" >\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i  class=\"icons\" (click)=\"remove('overseerGroup',overseer)\" >&#xe90d;</i>\r\n                                        {{overseer?.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notify [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li\r\n                                *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer?.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notifyUser [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 1 ; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\" >&#xe90d;</i>\r\n                                        {{ overseer?.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notifyGroup [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let group of responsibilityForm?.overseersGroups?.notifyList | slice: 1; let i = index\" >\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i  class=\"icons\" (click)=\"remove('overseerGroupNotifyList',group)\" >&#xe90d;</i>\r\n                                        {{group?.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Assurance -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\"\r\n        [attr.id]=\"'ASSURANCE'\" [class.active]=\"activeSelector === 'assurance'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assurance' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.assuranceList?.length==0 || activeSelector === 'assurance'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.assuranceList?.length>0 && activeSelector !== 'assurance'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Assurance</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\"\r\n                        aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\">\r\n                    </div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <ng-container *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,1)\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('assurance',assurance)\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assurance.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assurance.category_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"assurance.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.assuranceList?.length > 1\">+{{responsibilityForm?.assuranceList?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i> {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\" appPopover (click)=\"assurance.popover()\" placement=\"right\">+{{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Requires Audit -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n        *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\r\n        [class.active]=\"activeSelector === 'requires_audit'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'requires_audit' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.requiresAuditList?.length==0 || activeSelector === 'requires_audit'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.requiresAuditList?.length>0 && activeSelector !== 'requires_audit'\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length ==0\">\r\n                    <!-- <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div> -->\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n\r\n                    <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly (click)=\"activateSelector('requires_audit',true)\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                            {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <!-- <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n                            class=\"icons\">&#xe90c;</i>\r\n                        Edit</button> -->\r\n\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('requires_audit',overseer)\">&#xe9ae;</i>\r\n                        <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.requiresAuditList[0]?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\">\r\n                        <span class=\"chip\">\r\n                            <i class=\"icons\" (click)=\"remove('requires_audit',overseer)\">&#xe90d;</i> {{responsibilityForm?.requiresAuditList[0]?.category_name}}\r\n                        </span>\r\n                    </div> -->\r\n                    <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i\r\n                            class=\"icons\">&#xe90c;</i> Edit</button>\r\n                    <!-- class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button> -->\r\n                </div>\r\n                <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n                    <label class=\"vx-control-panel vx-mt-8\">\r\n                        SAMPLE SIZE\r\n                        <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\r\n                    </label>\r\n                    <div class=\"sample-part\" [class.disabled]=\"!isSample\">\r\n                        <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\r\n                            [checked]=\"selectedSample === 0\">\r\n                            <div class=\"name\">COUNT</div>\r\n                            <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\"\r\n                                [(ngModel)]=\"sampleValue\">\r\n                        </app-cs-radio>\r\n                        <div class=\"or\">OR</div>\r\n                        <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\r\n                            [checked]=\"selectedSample === 1\">\r\n                            <div class=\"name\">PERCENTAGE</div>\r\n                            <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\r\n                                placeholder=\"--\">\r\n                        </app-cs-radio>\r\n                    </div>\r\n                    <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\r\n                    <div class=\"reminder-part\">\r\n                        Send reminder every <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\"> Day by\r\n                        <div class=\"picker-group\">\r\n                            <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\"\r\n                                [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"\r\n                                [min]=\"currentTime\" readonly>\r\n                            <i class=\"icons\">&#xe955;</i>\r\n                            <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n                            </ngx-material-timepicker>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\r\n    [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\r\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors',$event)\"\r\n    (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\r\n  <app-group-users-list *ngIf=\"isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\" [disabledId]=\"disableAssigneeIds\"  [fromResponsibility] = \"'Assignee'\"  [reviewerIds]=\"reviewerIds\" [overseerIds]=\"overseerIds\" [assignorId]=\"assignorId\"\r\n    [groupsList]=\"groupsList\" [assigneeGroupsList] =\"groupAssigneeList\"  [selectedUsers]=\"responsibilityForm?.assignees?.list\" [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\" [userIdKey]=\"'my_member_id'\" [groupIdKey]=\"'group_id'\" [loader]=\"userListLoader || assignorsListLoader\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\" [groupsEnabled]=\"featureFlag_groups\" >\r\n  </app-group-users-list>\r\n  <app-users-radio-list *ngIf=\"!isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\"\r\n    [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" [disabledId]=\"disableRadioAssignee\" [fromResponsibility] = \"'Assignee'\"  [reviewerIds]=\"reviewerIds\" [overseerIds]=\"overseerIds\" [assignorId]=\"assignorId\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n  </app-users-radio-list>\r\n</ng-container>\r\n\r\n\r\n\r\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\r\n    [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n    [checkpointData]=\"responsibilityForm?.checkpoints\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"\r\n    (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\r\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\" [feature]=\"feature\"\r\n    (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n    [radioSelection]=\"(mode == 'EDIT' && (responsibilityCenterType === 0))?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n    [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\r\n    [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n    (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram  && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\" [feature]=\"feature\" [programsList]=\"programsList\"\r\n    [selectedCategories]=\"responsibilityForm.category | refDisconnect\" [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n    (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\" [linkedProgram]=\"responsibilityForm?.linkedProgram\" [mode]=\"(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' ) ? '' : mode\"\r\n    [openedFrom]=\"openedFrom\" [responsibilityId]=\"responsibilityId\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\" [listHeading]=\"'Select a Reviewer'\"\r\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\r\n    [itemNameKey]=\"'member_name'\" [disabledIds]=\"disableReviewerIds\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n    (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [fromResponsibility] = \"'Reviewer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\"  [overseerIds]=\"overseerIds\"\r\n    [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\"\r\n    (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n<user-group-list *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\" [selectedReviewer]=\"true\"  [userlist]=\"reviewerMemberIdsList\" [groupEnabled]=\"true\" [groupList]=\"groupReviewerList\"  [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\"\r\n     [selectedUsers] =\"responsibilityForm?.reviewers?.list\" (cancel)=\"activeDeselector()\" (save) = \"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"  [mode]=\"mode\"  [disabledIds]=\"disableReviewerIds\" [fromResponsibility] = \"'Reviewer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\"  [overseerIds]=\"overseerIds\" [loading]=\"userListLoader || assignorsListLoader\"\r\n     (reviewerWorkflowTypeChange) = \"reviewerTypeChange($event)\"  [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\" [featureflag]=\"featureFlag_groups\">\r\n </user-group-list>\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n    [usersList]=\"allUsersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\"\r\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('overseer',$event)\" [disabledIds]=\"disableOverseerIds\"\r\n    (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\"  >\r\n</app-owner-list >\r\n<user-group-list *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\" [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\"  [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\r\n[userlist]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\" [loading]=\"userListLoader || assignorsListLoader\"\r\n (save)=\"saveSelectedList('overseer',$event)\" (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\r\n</user-group-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'&& !featureFlag_groups\" [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n    [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n    <user-group-list *ngIf=\"activeSelector ==='overseerNotify' && featureFlag_groups\" [userlist]=\"overseersList\" [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\"  [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\" [loading]=\"userListLoader || assignorsListLoader\"\r\n    (save)=\"saveSelectedList('overseerNotify',$event)\" (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\r\n    </user-group-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\r\n    [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\r\n    [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n    [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n    [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n    [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\r\n    [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\"\r\n    [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-framework-list *ngIf=\"activeSelector === 'framework'\"  (assignControl)=\"assignFromFramework($event)\"\r\n[previousSelectedValues]=\"selectedFrameworkValues\"\r\n    (closeFramework)=\"activeDeselector()\" (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator' \" [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n    (saveList)=\"saveSelectedList('calculatedrisk',$event)\" (closeList)=\"activeDeselector()\">\r\n</app-risk-classification>\r\n\r\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [reviewCompleteDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\"\r\n    [reviewNOtCompletedDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\"\r\n    (saveReviewFrequency)=\"saveSelectedList('reviewFrequency',$event)\"\r\n    (closeReviewFrequency)=\"activeDeselector();activateSelector('reviewer',false);responsibilityForm.reviewers.list = [];responsibilityForm.groupReviewers.list = []\"\r\n    (backToUserList)=\"activeDeselector();activateSelector('reviewer',true)\">\r\n</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n    (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\"\r\n    [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n    [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n    (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n    <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\r\n        (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n        [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n    </app-create-assessment-container>\r\n</div>\r\n",
+                    template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n\r\n    <!-- Behalf -->\r\n    <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row \" [class.active]=\"activeSelector === 'assignors'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assignors' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length==0 || activeSelector === 'assignors'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">I am creating this responsibility on behalf of someone else\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\"\r\n                        (ngValueChange)=\"responsibilityForm.assignors.enable = $event; responsibilityForm.assignors.list = [];\">\r\n                    </app-cs-switch>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assignors?.list?.length === 0 || activeSelector === 'assignors'\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignors',true)\" placeholder=\"Who is responsible for managing this responsibility?\" readonly [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 0 && activeSelector !== 'assignors'\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <ng-container *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,1)\">\r\n                            <i (click)=\"remove('assignors',b_user)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"b_user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{b_user.member_name}}</span>\r\n                        </ng-container>\r\n                        <button *ngIf=\"responsibilityForm?.assignors?.list?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"behalf.popover()\" placement=\"right\">+{{responsibilityForm?.assignors?.list?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n\r\n                    <!-- <div class=\"chip-container\">\r\n                        <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                            {{b_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('assignors',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #behalf [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let b_user of responsibilityForm?.assignors?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                                        {{ b_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n                    person responsible for managing this responsibility.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- What -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'responsibilityName' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n                *ngIf=\"(responsibilityForm?.responsibility?.name.trim() === '') || focus.responsibilityName\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\"> What? <span class=\"required\">*</span>\r\n                    <button *ngIf=\"isFrameworkAvailable && mode !== 'EDIT' && openedFrom !=='RISK_TREATMENT'\"\r\n                        (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n                </label>\r\n                <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\r\n                    [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\"\r\n                    type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                    <i class=\"icons\">&#xea70;</i>\r\n                </span>\r\n                <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\" type=\"text\"\r\n                    [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\r\n                    (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName',true)\"\r\n                    (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.responsibility?.name.trim() !='' && isEditWhat\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"value\">{{responsibilityForm.responsibility?.name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for\r\n                    this responsibility.</p>\r\n                <div class=\"switch-row align-right\">\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n                        (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n                        Responsibility\r\n                    </app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Who -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length==0 || activeSelector === 'assignees'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\r\n\r\n                <div class=\"select\" *ngIf=\"(responsibilityForm?.assignees?.list?.length == 0 && (!featureFlag_groups||(responsibilityForm?.assigneeGroups?.list?.length == 0 && featureFlag_groups)))\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignees',true)\" placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n                </div>\r\n\r\n                <div class=\"selected\" *ngIf=\"((responsibilityForm?.assignees?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.assignees?.list?.length > 0 || responsibilityForm?.assigneeGroups?.list?.length > 0 ) && featureFlag_groups))\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\r\n                        <ng-container *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,1)\">\r\n                            <i (click)=\"remove('assignees',e_user)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"e_user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{e_user.member_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenbg\" appPopover (click)=\"assignees.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">+{{responsibilityForm?.assignees?.list?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"user.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">+{{responsibilityForm?.assignees?.list?.length -1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\">&</span>\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"  appPopover (click)=\"group.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n                        <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                            {{e_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\" >&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\r\n                            <i *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" class=\"icons cross vx-mr-1\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\" >&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\r\n                        </div>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'assignees' && (!featureFlag_groups || (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assignees',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-popover #user [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice : 1\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignees',e_user)\" >&#xe90d;</i>\r\n                                        {{ e_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #group [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let group of responsibilityForm?.assigneeGroups?.list | slice: 1\" >\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i  *ngIf=\"(!featureFlag_groups || (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\" class=\"icons\" (click)=\"remove('groupassignees',group)\" >&#xe90d;</i>\r\n                                        {{group.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n\r\n                <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the person\r\n                    responsible for completing this responsibility.</p>\r\n                    <ng-container *ngIf=\"!isGroupAssigned\">\r\n                      <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n                          (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n                          [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED\r\n                          PERSONS NEED TO\r\n                          COMPLETE THIS<i class=\"icons\"\r\n                              [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                      </app-cs-radio>\r\n                      <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n                          (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n                          [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED\r\n                          PERSON CAN COMPLETE\r\n                          THIS <i class=\"icons\" [appTooltip]=\"'If selected, only one responsibility will be created.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                      </app-cs-radio>\r\n\r\n                      <div class=\"switch-row align-right\" *ngIf=\"(mode == 'EDIT' && (!featureFlag_groups || (responsibilityForm?.assigneeGroups?.list.length === 0 && featureFlag_groups)))\">\r\n                        <app-cs-switch\r\n                            (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"> ANY SELECTED\r\n                            PERSON CAN COMPLETE\r\n                            THIS\r\n                        </app-cs-switch>\r\n                    </div>\r\n                    </ng-container>\r\n                <app-popover #assignees [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                                        {{ e_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- When? -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"(!responsibilityForm?.frequency || activeSelector === 'frequency')\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n                *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.frequency  && activeSelector !== 'frequency' && responsibilityForm?.frequency != '' && responsibilityForm?.frequency != '5~0~0~0'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\r\n                <div *ngIf=\"responsibilityForm?.frequency == '' || responsibilityForm?.frequency == '5~0~0~0'\"\r\n                    class=\"select button-sec\">\r\n                    <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\" readonly>\r\n                    <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                </div>\r\n                <div *ngIf=\"responsibilityForm?.frequency != '' && responsibilityForm?.frequency !== '5~0~0~0'\"\r\n                    class=\"selected button-sec\">\r\n                    <span class=\"chip\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{frequencyPlaceholder}}</span>\r\n                    <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\" (click)=\"activateSelector('frequency',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i>Edit\r\n                    </button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the frequency of occurrence for this responsibility.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Notes -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'notes' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.description).trim() === '') || focus.description\">\r\n\r\n            <svg class=\"checkIcon\"\r\n                *ngIf=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Notes</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                id:'notes',\r\n                placeholder: 'Add more information about completing the responsibility'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Objective -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\"\r\n        [attr.id]=\"'OBJECTIVE'\" [class.active]=\"activeSelector === 'objective'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'objective' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.objective).trim() !=='' && !focus.objective\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() === '') || focus.objective\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim()  !== '') && !focus.objective\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Objective</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                id:'objective',\r\n                link: true,\r\n                placeholder: 'This option lets you specify an objective for the responsibility.'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Responsibility Center -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\r\n        [class.active]=\"activeSelector === 'rc'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                alt=\"\" *ngIf=\"responsibilityForm?.rc?.length==0 || activeSelector === 'rc'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Center </label>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('rc',true)\"\r\n                        aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\r\n                    </div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n                </div>\r\n\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\" [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,1)\">\r\n                        <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe9ae;</i>\r\n                        <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc?.item_name}}</span>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" *ngIf=\"responsibilityForm?.rc?.length > 1\" appPopover (click)=\"rcPopover.popover()\" placement=\"right\">+{{responsibilityForm?.rc?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>{{rc?.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+{{responsibilityForm?.rc?.slice(2).length}}</button>\r\n                    </div> -->\r\n\r\n                    <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let rc of responsibilityForm?.rc | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                        {{ rc.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n\r\n                <ng-container *ngIf=\"isResponsibilityRcLinkEnabled && (mode != 'EDIT' || (responsibilityForm?.rc?.length <= 1))\">\r\n                    <!-- <app-cs-radio><div [appTooltip]=\"'Create separate responsibilities for each responsibility center'\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026</div><i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio> -->\r\n                    <app-cs-radio [class.disabled]=\"mode == 'EDIT' && responsibilityForm.responsibilityCenterType === 1 && responsibilityForm?.rc?.length > 1\" [checked]=\"responsibilityCenterType === 0\" [name]=\"'ff_responsibility_rc_link'\" (checkedEvent)=\"onRcTypeChange(0)\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026<i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\r\n                    <app-cs-radio [class.disabled]=\"mode == 'EDIT' && responsibilityForm.responsibilityCenterType === 1 && responsibilityForm?.rc?.length > 1\" [checked]=\"responsibilityCenterType === 1\" [name]=\"'ff_responsibility_rc_link'\" (checkedEvent)=\"onRcTypeChange(1)\">DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i class=\"icons\" [appTooltip]=\"'If selected, the same responsibility will be linked to each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Program -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"activeSelector && activeSelector !== 'program' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" *ngIf=\"responsibilityForm?.program?.length==0 || activeSelector === 'program'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                        <label class=\"vx-control-panel\">Program</label>\r\n                        <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length ==0\">\r\n                            <div class=\"custom-input\" (click)=\"activateSelector('program',true)\" aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\r\n                            <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n                        </div>\r\n                        <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n                            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                <ng-container *ngFor=\"let program of responsibilityForm?.program\">\r\n                                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" (click)=\"remove('program',program)\">&#xe9ae;</i>\r\n                                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"program?.name??'--'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{program?.name??'--'}}</span>\r\n                                </ng-container>\r\n                                <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"program.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\">+{{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n                            </div>\r\n\r\n                            <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n                                <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\r\n                                <!- - <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->\r\n                                <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n                            </div> -->\r\n\r\n                            <button *ngIf=\"activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                        </div>\r\n\r\n\r\n                        <app-popover #program [dontCloseonClick]=\"true\">\r\n                            <div class=\"wf-action-list\">\r\n                                <ul class=\"action-item\">\r\n                                    <ng-container *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\">\r\n                                        <li class=\"multiple-program\">\r\n                                        <div class=\"avatar-card\">\r\n                                            <span class=\"value\" [appTooltip]=\"responsibilityForm?.program[0]?.name\" placement=\"bottom\"\r\n                                            type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n                                            {{responsibilityForm?.program[0]?.name}}\r\n                                            </span>\r\n                                            <div class=\"primary-label\">PRIMARY</div>\r\n                                        </div>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <li *ngFor=\"let program of responsibilityForm?.linkedProgram; let j = index\">\r\n                                        <div class=\"avatar-card\" *ngIf=\"program?.category_id !== responsibilityForm?.program[0]?.category_id\">\r\n                                            <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\"\r\n                                            type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n                                                <i *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n                                                {{ program?.name }}\r\n                                            </span>\r\n                                        </div>\r\n                                    </li>\r\n                                </ul>\r\n                            </div>\r\n                        </app-popover>\r\n                    <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                        <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                            <ng-container *ngIf=\"tag?.tag_name?.trim()\"> \r\n                                <label class=\"vx-control-panel\">{{tag?.tag_name}}</label>\r\n                                <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag?.tag_name}}\">\r\n                            </ng-container>\r\n\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Responsibility Category -->\r\n    <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\" [attr.id]=\"'CATEGORY'\"\r\n        [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.category?.length==0 || activeSelector === 'category'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Category </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.category?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('category',true)\"\r\n                        aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.category?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.category?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.category?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let category of responsibilityForm?.category?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                            {{category.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.category?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"category.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.category?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #category [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let category of responsibilityForm?.category | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                        {{ category.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                    <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                        <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Format & Evidence -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n        [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'formate_evidence' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired == false && this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 && this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\" alt=\"im\">\r\n\r\n            <svg *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatFiles.length || this.responsibilityForm.formatAndEvidence.formatLinks?.length\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence',$event)\"\r\n                [mode]=\"'responsibility'\" [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\">\r\n            </app-format-and-evidence>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <!-- Assessment -->\r\n    <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n        [attr.id]=\"'ASSESSMENT'\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\r\n            <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\" alt=\"im\">\r\n\r\n            <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n                <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n                    <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\" placeholder=\"Select an assessment for this responsibility\" [disabled]=\"responsibilityForm.checkpoints?.length\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('assessment',category)\">&#xe9ae;</i>\r\n                        <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n                        <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n                            {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n                            'Question'}}</div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"false\" [class.plus]=\"false\">\r\n                        <span class=\"chip with-question\">\r\n                            <span class=\"value\" [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i class=\"icons\" (click)=\"remove('assessment',category)\">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n                            <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n                                {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n                                'Question'}}</span>\r\n                        </span>\r\n                    </div> -->\r\n\r\n                    <button (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\"\r\n                        type=\"button\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <!-- Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\r\n        [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length>0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\r\n                    <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\r\n                        (click)=\"activateSelector('checkpoints',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                    <button [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n                        (click)=\"activateSelector('checkpoints',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <ng-container *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"checkpoint?.label\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{checkpoint?.label}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">{{checkpoint?.label}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                    </div> -->\r\n\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\r\n                <i class=\"icons alert-icon\">&#xe930;</i>\r\n                <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature\r\n                    instead of the old checkpoints functionality to create analytical questions. <button\r\n                        class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to\r\n                    continue.</span>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- New  Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\r\n        [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n                    <!-- <button  class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('checkpoints-new',true)\" placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                    <button (click)=\"activateSelector('checkpoints-new',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe9ae;</i>\r\n                        <span class=\"chipName vx-fs-11 vx-label-txt\">{{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n                        <span class=\"chip\">\r\n                            <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n                            {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                    </div> -->\r\n\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints-new',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Risk Classification -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\r\n        [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'riskCalculator' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    Risk Classification\r\n                    <button (click)=\"activateSelector('riskCalculator',true)\" class=\"button\">+ Risk Calculator</button>\r\n                </label>\r\n\r\n                <div class=\"classification\">\r\n                    <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\r\n                        <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\r\n                            [value]=\"risk?.value\">\r\n                        <span>{{risk?.name}}</span>\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Reviewer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\r\n        [class.active]=\"activeSelector === 'reviewerFrequency'||  activeSelector === 'reviewer'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'reviewer' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length==0 || activeSelector === 'reviewer'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.reviewers?.list?.length>0 && activeSelector !== 'reviewer'\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Reviewer</label>\r\n                <div class=\"select\" *ngIf=\"((responsibilityForm?.reviewers?.list?.length == 0 && !featureFlag_groups)||((responsibilityForm?.reviewers?.list?.length == 0 && responsibilityForm?.groupReviewers?.list?.length == 0) && featureFlag_groups))\">\r\n                    <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select Reviewer\"\r\n                        readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"((responsibilityForm?.reviewers?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.reviewers?.list?.length > 0 || responsibilityForm?.groupReviewers?.list?.length > 0 ) && featureFlag_groups))\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\r\n                        <ng-container *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,1)\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('reviewer',reviewer)\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{reviewer.member_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"reviewer.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">+{{responsibilityForm?.reviewers?.list?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\r\n                        [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i> {{reviewer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    \r\n                    <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"user.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">+{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\r\n                        </div>\r\n                        <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</div>\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"group.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\" >&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\r\n\r\n                        </div>\r\n                    </div> -->\r\n\r\n                    <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-cs-radio\r\n                    [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('sequential')\" [class.disabled]=\"responsibilityForm?.groupReviewers?.list?.length > 0\">\r\n                    SEQUENTIAL<i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio\r\n                    [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\r\n                    ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                        {{ reviewer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #user [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 1 ; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\" >&#xe90d;</i>\r\n                                        {{ reviewer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #group [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let group of responsibilityForm?.groupReviewers?.list | slice: 1; let i = index\" >\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i  class=\"icons\" (click)=\"remove('groupReviewer',group)\" >&#xe90d;</i>\r\n                                        {{group.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\r\n        [class.active]=\" activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\"\r\n        [class.disabled]=\"activeSelector &&  !['overseerNotify','overseerNotify'].includes(activeSelector) && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n                *ngIf=\"(responsibilityForm?.overseers?.list?.length==0 && responsibilityForm?.overseers?.notifyList?.length == 0)|| activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\">\r\n            <svg class=\"checkIcon\" *ngIf=\"(responsibilityForm?.overseers?.list?.length>0 || responsibilityForm?.overseers?.notifyList?.length>0)\r\n                && !( activeSelector === 'overseerNotify' ||  activeSelector === 'overseer')\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Overseer </label>\r\n                <div class=\"select\" *ngIf=\"((responsibilityForm?.overseers?.list?.length == 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.list?.length == 0 && responsibilityForm?.overseersGroups?.list?.length == 0) && featureFlag_groups))\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseer',true)\" placeholder=\"Who should have oversight of the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"((responsibilityForm?.overseers?.list?.length > 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.list?.length > 0 || responsibilityForm?.overseersGroups?.list?.length > 0 ) && featureFlag_groups))\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\r\n                        <ng-container *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,1)\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseer',overseer)\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{overseer.member_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"overseers.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">+{{responsibilityForm?.overseers?.list?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\r\n                        <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\" appPopover (click)=\"overseers.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n                    </div> -->\r\n\r\n                    <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"overseerUser.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">+{{responsibilityForm?.overseers?.list?.length -1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\">&</span>\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\r\n                        </div>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n\r\n                <div class=\"select\" *ngIf=\"((responsibilityForm?.overseers?.notifyList?.length == 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.notifyList?.length == 0 && responsibilityForm?.overseersGroups?.notifyList?.length == 0) && featureFlag_groups))\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseerNotify',true)\"\r\n                        placeholder=\"Who should be notified if the responsibility is not complet...\" readonly\r\n                        [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\"\r\n                        placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"((responsibilityForm?.overseers?.notifyList?.length > 0 && !featureFlag_groups)||((responsibilityForm?.overseers?.notifyList?.length > 0 || responsibilityForm?.overseersGroups?.notifyList?.length > 0 ) && featureFlag_groups))\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\r\n                        <ng-container *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,1)\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{overseer.member_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"notify.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">+{{responsibilityForm?.overseers?.notifyList?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n                        <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\" type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n                    </div> -->\r\n\r\n                    <div class=\"vx-d-flex vx-align-center\">\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"notifyUser.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">+{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\">&</span>\r\n                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span>\r\n                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\" class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\r\n                            <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe90d;</i>\r\n                            <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>\r\n                            <button *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\" class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\r\n                        </div>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('overseerNotify',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-popover #overseers [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseers?.list | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer?.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #overseerUser [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseers of responsibilityForm?.overseers?.list | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',overseers)\" >&#xe90d;</i>\r\n                                        {{ overseers?.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #overseerGroup [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseersGroups?.list | slice: 1; let i = index\" >\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i  class=\"icons\" (click)=\"remove('overseerGroup',overseer)\" >&#xe90d;</i>\r\n                                        {{overseer?.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notify [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li\r\n                                *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer?.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notifyUser [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 1 ; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\" >&#xe90d;</i>\r\n                                        {{ overseer?.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notifyGroup [dontCloseonClick]=\"true\" >\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let group of responsibilityForm?.overseersGroups?.notifyList | slice: 1; let i = index\" >\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i  class=\"icons\" (click)=\"remove('overseerGroupNotifyList',group)\" >&#xe90d;</i>\r\n                                        {{group?.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Assurance -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\"\r\n        [attr.id]=\"'ASSURANCE'\" [class.active]=\"activeSelector === 'assurance'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'assurance' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.assuranceList?.length==0 || activeSelector === 'assurance'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.assuranceList?.length>0 && activeSelector !== 'assurance'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Assurance</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\"\r\n                        aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\">\r\n                    </div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <ng-container *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,1)\">\r\n                            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('assurance',assurance)\">&#xe9ae;</i>\r\n                            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assurance.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assurance.category_name}}</span>\r\n                        </ng-container>\r\n                        <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"assurance.popover()\" placement=\"right\" *ngIf=\"responsibilityForm?.assuranceList?.length > 1\">+{{responsibilityForm?.assuranceList?.slice(1).length}}</button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i> {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\" appPopover (click)=\"assurance.popover()\" placement=\"right\">+{{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Requires Audit -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\r\n        *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\r\n        [class.active]=\"activeSelector === 'requires_audit'\"\r\n        [class.disabled]=\"activeSelector && activeSelector !== 'requires_audit' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.requiresAuditList?.length==0 || activeSelector === 'requires_audit'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.requiresAuditList?.length>0 && activeSelector !== 'requires_audit'\"\r\n                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length ==0\">\r\n                    <!-- <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div> -->\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n\r\n                    <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly (click)=\"activateSelector('requires_audit',true)\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                            {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <!-- <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n                            class=\"icons\">&#xe90c;</i>\r\n                        Edit</button> -->\r\n\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                        <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('requires_audit',overseer)\">&#xe9ae;</i>\r\n                        <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"responsibilityForm?.requiresAuditList[0]?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"chip-container\">\r\n                        <span class=\"chip\">\r\n                            <i class=\"icons\" (click)=\"remove('requires_audit',overseer)\">&#xe90d;</i> {{responsibilityForm?.requiresAuditList[0]?.category_name}}\r\n                        </span>\r\n                    </div> -->\r\n                    <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i\r\n                            class=\"icons\">&#xe90c;</i> Edit</button>\r\n                    <!-- class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button> -->\r\n                </div>\r\n                <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n                    <label class=\"vx-control-panel vx-mt-8\">\r\n                        SAMPLE SIZE\r\n                        <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\r\n                    </label>\r\n                    <div class=\"sample-part\" [class.disabled]=\"!isSample\">\r\n                        <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\r\n                            [checked]=\"selectedSample === 0\">\r\n                            <div class=\"name\">COUNT</div>\r\n                            <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\"\r\n                                [(ngModel)]=\"sampleValue\">\r\n                        </app-cs-radio>\r\n                        <div class=\"or\">OR</div>\r\n                        <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\r\n                            [checked]=\"selectedSample === 1\">\r\n                            <div class=\"name\">PERCENTAGE</div>\r\n                            <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\r\n                                placeholder=\"--\">\r\n                        </app-cs-radio>\r\n                    </div>\r\n                    <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\r\n                    <div class=\"reminder-part\">\r\n                        Send reminder every <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\"> Day by\r\n                        <div class=\"picker-group\">\r\n                            <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\"\r\n                                [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"\r\n                                [min]=\"currentTime\" readonly>\r\n                            <i class=\"icons\">&#xe955;</i>\r\n                            <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n                            </ngx-material-timepicker>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\r\n    [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\r\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors',$event)\"\r\n    (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\r\n  <app-group-users-list *ngIf=\"isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\" [disabledId]=\"disableAssigneeIds\"  [fromResponsibility] = \"'Assignee'\"  [reviewerIds]=\"reviewerIds\" [overseerIds]=\"overseerIds\" [assignorId]=\"assignorId\"\r\n    [groupsList]=\"groupsList\" [assigneeGroupsList] =\"groupAssigneeList\"  [selectedUsers]=\"responsibilityForm?.assignees?.list\" [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\" [userIdKey]=\"'my_member_id'\" [groupIdKey]=\"'group_id'\" [loader]=\"userListLoader || assignorsListLoader\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\" [groupsEnabled]=\"featureFlag_groups\" >\r\n  </app-group-users-list>\r\n  <app-users-radio-list *ngIf=\"!isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\"\r\n    [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" [disabledId]=\"disableRadioAssignee\" [fromResponsibility] = \"'Assignee'\"  [reviewerIds]=\"reviewerIds\" [overseerIds]=\"overseerIds\" [assignorId]=\"assignorId\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n  </app-users-radio-list>\r\n</ng-container>\r\n\r\n\r\n\r\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\r\n    [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n    [checkpointData]=\"responsibilityForm?.checkpoints\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"\r\n    (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\r\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\" [feature]=\"feature\"\r\n    (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n    [radioSelection]=\"(mode == 'EDIT' && (responsibilityCenterType === 0))?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n    [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\r\n    [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n    (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram  && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\" [feature]=\"feature\" [programsList]=\"programsList\"\r\n    [selectedCategories]=\"responsibilityForm.category | refDisconnect\" [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n    (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\" [linkedProgram]=\"responsibilityForm?.linkedProgram\" [mode]=\"(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' ) ? '' : mode\"\r\n    [openedFrom]=\"openedFrom\" [responsibilityId]=\"responsibilityId\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\" [listHeading]=\"'Select a Reviewer'\"\r\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\r\n    [itemNameKey]=\"'member_name'\" [disabledIds]=\"disableReviewerIds\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n    (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [fromResponsibility] = \"'Reviewer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\"  [overseerIds]=\"overseerIds\"\r\n    [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\"\r\n    (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n<user-group-list *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\" [selectedReviewer]=\"true\"  [userlist]=\"reviewerMemberIdsList\" [groupEnabled]=\"true\" [groupList]=\"groupReviewerList\"  [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\"\r\n     [selectedUsers] =\"responsibilityForm?.reviewers?.list\" (cancel)=\"activeDeselector()\" (save) = \"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"  [mode]=\"mode\"  [disabledIds]=\"disableReviewerIds\" [fromResponsibility] = \"'Reviewer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\"  [overseerIds]=\"overseerIds\" [loading]=\"userListLoader || assignorsListLoader\"\r\n     (reviewerWorkflowTypeChange) = \"reviewerTypeChange($event)\"  [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\" [featureflag]=\"featureFlag_groups\">\r\n </user-group-list>\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n    [usersList]=\"allUsersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\"\r\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('overseer',$event)\" [disabledIds]=\"disableOverseerIds\"\r\n    (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\"  >\r\n</app-owner-list >\r\n<user-group-list *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\" [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\"  [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\r\n[userlist]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\" [loading]=\"userListLoader || assignorsListLoader\"\r\n (save)=\"saveSelectedList('overseer',$event)\" (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\r\n</user-group-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'&& !featureFlag_groups\" [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n    [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n    <user-group-list *ngIf=\"activeSelector ==='overseerNotify' && featureFlag_groups\" [userlist]=\"overseersList\" [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\"  [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [disabledIds]=\"disableOverseerIds\" [fromResponsibility] = \"'Overseer'\" [assignorId]=\"assignorId\" [assigneeIds]=\"assigneeIds\" [reviewerIds]=\"reviewerIds\" [loading]=\"userListLoader || assignorsListLoader\"\r\n    (save)=\"saveSelectedList('overseerNotify',$event)\" (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\r\n    </user-group-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\r\n    [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\r\n    [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n    [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n    [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n    [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\r\n    [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\"\r\n    [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-framework-list *ngIf=\"activeSelector === 'framework'\"  (assignControl)=\"assignFromFramework($event)\"\r\n[previousSelectedValues]=\"selectedFrameworkValues\"\r\n    (closeFramework)=\"activeDeselector()\" (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator' \" [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n    (saveList)=\"saveSelectedList('calculatedrisk',$event)\" (closeList)=\"activeDeselector()\">\r\n</app-risk-classification>\r\n\r\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [reviewCompleteDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\"\r\n    [reviewNOtCompletedDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\"\r\n    (saveReviewFrequency)=\"saveSelectedList('reviewFrequency',$event)\"\r\n    (closeReviewFrequency)=\"activeDeselector();activateSelector('reviewer',false);responsibilityForm.reviewers.list = [];responsibilityForm.groupReviewers.list = []\"\r\n    (backToUserList)=\"activeDeselector();activateSelector('reviewer',true)\">\r\n</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n    (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\"\r\n    [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n    [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n    (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n    <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\r\n        (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n        [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n    </app-create-assessment-container>\r\n</div>\r\n",
                     styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance marx-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .workflw-compliance marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #DBDBDB;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #DCDCDC;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34AA44;background:#EEFCF0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #DBDBDB;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border:none;border-radius:0;border-bottom:1px solid #DBDBDB;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #F1F1F1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:hover,::ng-deep .workflw-compliance .reminder-part .picker-group input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;top:0;right:30px;bottom:0;left:0;z-index:-1;width:calc(100vw - 30px)}.wf-action-list ul.action-item li.multiple-program{background:#F8F8F8}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.primary-label{background:#7AA7F7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}\n", "@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\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:\"Poppins\",sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;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-top:0}.left .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}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:\"Poppins\";line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:\"Poppins\";width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:\"Poppins\"}::ng-deep marx-editor{display:block}::ng-deep marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep marx-editor .editor-container:hover,::ng-deep marx-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep marx-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep marx-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep marx-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep marx-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep marx-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"]
                 },] }
     ];
@@ -7300,11 +7300,11 @@
          * Fetches Approvers workflow list based on selected policy categories
          * @param id contains selected categories id's
          */
-        WorkflowPolicyComponent.prototype.getApproverWorkFlow = function (id) {
+        WorkflowPolicyComponent.prototype.getApproverWorkFlow = function (id, data) {
             var _this = this;
             this.loader = true;
             this.policyService.getWorkflowList(id).subscribe(function (res) {
-                var _a, _b;
+                var _a, _b, _c;
                 if ((res === null || res === void 0 ? void 0 : res.length) >= 0) {
                     _this.approverWorkFlowList = res; // getting all approver saved workflows
                     (_a = _this.approverWorkFlowList) === null || _a === void 0 ? void 0 : _a.forEach(function (workflow) {
@@ -7313,6 +7313,7 @@
                             (_b = _this.selectedWorkflow) === null || _b === void 0 ? void 0 : _b.push(workflow);
                         }
                     });
+                    var approvalData = [];
                     if (!((_b = _this.selectedWorkflow) === null || _b === void 0 ? void 0 : _b.length)) {
                         _this.noWorkflowSelected = true;
                         var approvalWorkflow_1 = [];
@@ -7331,7 +7332,7 @@
                                 });
                             approvalWorkflow_1.push(Object.assign({ level1: approversLevel }, _this.defaultEditApprovers[approversLevel]));
                         });
-                        _this.selectedWorkflow.push({
+                        approvalData.push({
                             workflow_name: '',
                             workflow_module: 'POLICY',
                             description: {},
@@ -7339,8 +7340,14 @@
                             category_arr: [],
                             creator: {},
                         });
+                        if ((_c = _this.selectedWorkflow) === null || _c === void 0 ? void 0 : _c.length) {
+                            _this.selectedWorkflow[0].approval_workflow = approvalData;
+                        }
                         _this.policyForm.selectedApprovers = _this.selectedWorkflow;
                     }
+                    if (data) {
+                        _this.getApproversAndReviewersList(id, data, [data.ReviewerMemberId], data);
+                    }
                     _this.loader = false;
                 }
             }, function (err) {
@@ -7352,7 +7359,6 @@
             this.selectedWorkflow = [];
             this.policyForm.selectedApprovers = [];
             this.editApprovalWorkflow = undefined;
-            console.log('this edit workflow', this.editApprovalWorkflow, this.editWorkflowLevel);
         };
         /**
          * Fetches Approvers and reviewers list based on selected policy categories
@@ -7377,8 +7383,8 @@
                         }
                     });
                 }
-                if (approverIds) {
-                    var obj = approverIds;
+                if (approverIds === null || approverIds === void 0 ? void 0 : approverIds.approvers) {
+                    var obj = approverIds === null || approverIds === void 0 ? void 0 : approverIds.approvers;
                     var approverLevels = [];
                     for (var item in obj) {
                         var ids = (_b = (_a = obj[item]) === null || _a === void 0 ? void 0 : _a.approvers) === null || _b === void 0 ? void 0 : _b.map(function (approver) { return approver.member_id; });
@@ -7394,8 +7400,8 @@
                         }
                         approverLevels.push(data);
                     }
-                    if (approverIds) {
-                        var obj_1 = approverIds;
+                    if (approverIds === null || approverIds === void 0 ? void 0 : approverIds.approvers) {
+                        var obj_1 = approverIds === null || approverIds === void 0 ? void 0 : approverIds.approvers;
                         var approverLevels_1 = [];
                         for (var item in obj_1) {
                             var ids = (_f = (_e = obj_1[item]) === null || _e === void 0 ? void 0 : _e.approvers) === null || _f === void 0 ? void 0 : _f.map(function (approver) { return approver.member_id; });
@@ -7411,7 +7417,8 @@
                             }
                             approverLevels_1.push(data);
                         }
-                        _this.policyForm.selectedApprovers = approverLevels_1;
+                        _this.selectedWorkflow[0].approval_workflow = approverLevels_1;
+                        _this.policyForm.selectedApprovers = _this.selectedWorkflow;
                     }
                     if (reviewerIds) {
                         _this.policyForm.selectedReviewers = _this.setList(_this.allReviewers, reviewerIds, 'member_id');
@@ -7998,7 +8005,7 @@
          */
         WorkflowPolicyComponent.prototype.validatePolicy = function () {
             var _this = this;
-            var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             setTimeout(function () {
                 _this.submitted = true;
             }, 100);
@@ -8024,7 +8031,8 @@
                 this.policyForm.selectedCategories.length == 0 ||
                 (!((_r = (_q = (_p = this.policyForm) === null || _p === void 0 ? void 0 : _p.selectedApprovers[0]) === null || _q === void 0 ? void 0 : _q.approval_workflow) === null || _r === void 0 ? void 0 : _r.length) &&
                     this.policyApprovalFlag === 0) ||
-                (this.formatEvidence && this.formatEvidence.newLink.containsError)) {
+                (this.formatEvidence && this.formatEvidence.newLink.containsError) ||
+                !((_s = this.policyForm.policy_owners) === null || _s === void 0 ? void 0 : _s.length)) {
                 return false;
             }
             else {
@@ -8333,9 +8341,9 @@
                     var categoryIds = data.category_details_arr.map(function (id) { return id.catObjId; });
                     _this.policyApprovalFlag = data.policyApprovalFlag;
                     _this.approvalWorkflowIds = (_a = data === null || data === void 0 ? void 0 : data.approvalWorkflowDetails) === null || _a === void 0 ? void 0 : _a.map(function (workflow) { return workflow === null || workflow === void 0 ? void 0 : workflow._id; });
+                    _this.selectedWorkflow = [];
                     _this.defaultEditApprovers = data === null || data === void 0 ? void 0 : data.approvers;
-                    _this.getApproverWorkFlow(categoryIds);
-                    _this.getApproversAndReviewersList(categoryIds, data, [data.ReviewerMemberId], data);
+                    _this.getApproverWorkFlow(categoryIds, data);
                     _this.populatePolicyForm(data, categoryIds);
                     _this.frequencyDataPopulation(data);
                     _this.reviewerFrequencyDataPopulation(data);
@@ -8600,7 +8608,7 @@
     WorkflowPolicyComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-workflow-policy',
-                    template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n  <div class=\"workflow-policy\">\r\n    <!-- Policy Name -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n          alt=\"name\"\r\n          *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">\r\n            Policy Name <span class=\"required\">*</span>\r\n          </label>\r\n          <input\r\n            type=\"text\"\r\n            (keydown)=\"activeSelector = 'name'\"\r\n            (focusin)=\"activateSelector('name', true)\"\r\n            *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\r\n            (focusout)=\"activateSelector('name', false)\"\r\n            [ngModel]=\"policyForm.policyName\"\r\n            (ngModelChange)=\"policyForm.policyName = changeName($event)\"\r\n            placeholder=\"Name this policy\"\r\n          />\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"chip-container\">\r\n              <span class=\"value\">{{ policyForm.policyName }}</span>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('name', true)\"\r\n              type=\"button\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n\r\n          <p\r\n            *ngIf=\"submitted && !policyForm.policyName.trim()\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Please enter a name for this policy.\r\n          </p>\r\n          <marx-editor\r\n            [(ngModel)]=\"policyForm.policyNotes\"\r\n            [editorConfig]=\"description\"\r\n          ></marx-editor>\r\n          <app-cs-switch\r\n            [(ngValue)]=\"policyForm.availableOnPortal\"\r\n            (ngValueChange)=\"availabilityOnPortal($event)\"\r\n          >\r\n            Do you want this policy to be available on the portal?\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </app-cs-switch>\r\n          <app-cs-switch\r\n            *ngIf=\"policyForm.availableOnPortal\"\r\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\r\n          >\r\n            Accept suggestions\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            ></app-cs-switch\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Category -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'category'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'category' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedCategories?.length == 0 ||\r\n            activeSelector === 'category'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedCategories?.length > 0 &&\r\n            activeSelector !== 'category'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\"\r\n            >Policy Category <span class=\"required\">*</span>\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.selectedCategories?.length == 0\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('category', true)\"\r\n              placeholder=\"Select a category for this policy.\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.selectedCategories?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let category of policyForm?.selectedCategories?.slice(0, 1)\r\n                \"\r\n              >\r\n                <i\r\n                  (click)=\"remove('category', category)\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"category.item_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ category.item_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                *ngIf=\"policyForm?.selectedCategories?.length > 1\"\r\n                type=\"button\"\r\n                appPopover\r\n                (click)=\"category.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +{{ policyForm?.selectedCategories?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\r\n                          [class.plus]=\"policyForm?.selectedCategories?.length>2\">\r\n                          <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\r\n                                  class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                              {{category.item_name}}</span>\r\n                          <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\r\n                              appPopover (click)=\"category.popover()\" placement=\"right\">+\r\n                              {{policyForm?.selectedCategories?.slice(2).length}}</button>\r\n                      </div> -->\r\n            <button\r\n              *ngIf=\"activeSelector !== 'category'\"\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('category', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #category [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let category of policyForm?.selectedCategories | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('category', category)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ category.item_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <p\r\n            *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Please select the category for this policy.\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\r\n          <ng-container *ngFor=\"let tag of policyForm?.customTags\">\r\n            <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"tag.value\"\r\n              placeholder=\"{{ tag.tagname }}\"\r\n            />\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Effective Date -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Effective Date</label>\r\n          <div class=\"date-time-picker\">\r\n            <div class=\"picker-group\">\r\n              <input\r\n                type=\"text\"\r\n                readonly\r\n                placeholder=\"Select the effective date of the policy.\"\r\n                [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\r\n                (click)=\"openDatePicker()\"\r\n              />\r\n              <i class=\"icons\">&#xe92d;</i>\r\n              <dp-date-picker\r\n                #datePicker\r\n                (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\r\n                [config]=\"dateConfig\"\r\n                [(ngModel)]=\"policyForm.policyDueDate\"\r\n              >\r\n              </dp-date-picker>\r\n              <div\r\n                class=\"vx-overlay\"\r\n                (click)=\"closeDatePicker($event)\"\r\n                *ngIf=\"datePickerOverlay\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Owner -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'owners'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'owners' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\r\n        <img\r\n          *ngIf=\"!policyForm.policy_owners?.length\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.policy_owners?.length\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\r\n          </div>\r\n          <div\r\n            *ngIf=\"!policyForm.policy_owners?.length\"\r\n            (click)=\"activateSelector('owners', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select owners for this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"policyForm.policy_owners?.length\"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div class=\"vx-d-flex vx-align-center\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i\r\n                  (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.policy_owners[0]?.member_name }}</span\r\n                >\r\n\r\n                <button\r\n                  *ngIf=\"policyForm?.policy_owners?.length > 1\"\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"policyUserPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  + {{ policyForm?.policy_owners.length - 1 }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                *ngIf=\"false\"\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\r\n              >\r\n                &\r\n              </div>\r\n              <div\r\n                *ngIf=\"false\"\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >Samantha Jones</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"policyGroupPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  +4\r\n                </button>\r\n              </div>\r\n              <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li\r\n                      *ngFor=\"\r\n                        let owner of policyForm?.policy_owners | slice : 1;\r\n                        let i = index\r\n                      \"\r\n                    >\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"owner?.member_name\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i\r\n                            (click)=\"remove('owners', owner, i + 1)\"\r\n                            class=\"icons\"\r\n                            >&#xe90d;</i\r\n                          >\r\n                          {{ owner?.member_name }}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n              <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i class=\"icons\">&#xe90d;</i>\r\n                          Harshvardhan Kariwala\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n            </div>\r\n            <button\r\n              (click)=\"activateSelector('owners', true)\"\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"\r\n        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\r\n      \"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'reviewer' &&\r\n        activeSelector !== 'reviewerFrequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\r\n        <img\r\n          *ngIf=\"!policyForm?.addReviewers\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.addReviewers\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">REVIEW</label>\r\n          <div\r\n            class=\"reviewSelection vx-p-3 vx-pb-0\"\r\n            [class.disabled]=\"\r\n              activeSelector && sideSelectorElements.includes(activeSelector)\r\n            \"\r\n          >\r\n            <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\r\n              Does this policy need to be reviewed?\r\n            </div>\r\n            <app-cs-radio\r\n              name=\"review-type\"\r\n              [checked]=\"policyForm?.addReviewers\"\r\n              (checkedEvent)=\"typeSelected(true)\"\r\n              ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n                YES\r\n              </div></app-cs-radio\r\n            >\r\n            <app-cs-radio\r\n              name=\"review-type\"\r\n              [checked]=\"!policyForm?.addReviewers\"\r\n              (checkedEvent)=\"typeSelected(false)\"\r\n              ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n                NO\r\n              </div></app-cs-radio\r\n            >\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"policyForm?.addReviewers\">\r\n            <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\r\n            <div\r\n              class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n              *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n              [appScrollInView]=\"scrollToBottom\"\r\n              [class.active]=\"activeSelector === 'reviewer'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewer' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n            >\r\n              <div\r\n                class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n              >\r\n                Select the person responsible for reviewing this policy\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n              [class.active]=\"activeSelector === 'reviewer'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewer' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n              >\r\n                <i\r\n                  (click)=\"remove('reviewer', reviewer)\"\r\n                  class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                >\r\n                  {{ reviewer?.member_name }}</span\r\n                >\r\n              </div>\r\n              <button\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                *ngIf=\"activeSelector !== 'reviewer'\"\r\n                (click)=\"activateSelector('reviewer', true)\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n            <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\r\n            <div\r\n              *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n              class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewerFrequency' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n            >\r\n              <div\r\n                class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n              >\r\n                When does this policy needs to be reviewed?\r\n              </div>\r\n              <div\r\n                (click)=\"activateSelector('reviewerFrequency', true)\"\r\n                class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\r\n              >\r\n                SET A FREQUENCY\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewerFrequency' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n            >\r\n              <div\r\n                class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                [appTooltip]=\"reviewerFrequencyPlaceholder\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n              >\r\n                {{ reviewerFrequencyPlaceholder }}\r\n              </div>\r\n              <button\r\n                *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n                (click)=\"activateSelector('reviewerFrequency', true)\"\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n            <p\r\n              *ngIf=\"\r\n                submitted &&\r\n                policyForm?.selectedReviewers?.length > 0 &&\r\n                !policyForm?.review_frequency_details\r\n              \"\r\n              class=\"error-message\"\r\n              [appScrollInView]=\"true\"\r\n            >\r\n              Select the review schedule for this policy.\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- New Approval Workflow -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'approvers'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'approvers' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length == 0 ||\r\n            activeSelector === 'approvers'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length > 0 &&\r\n            activeSelector !== 'approvers'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\"\r\n              >APPROVAL <span class=\"required\">*</span></label\r\n            >\r\n            <button\r\n              (click)=\"\r\n                createApprovalWorkflow(); activateSelector('approvers', true)\r\n              \"\r\n              [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n              class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\r\n            >\r\n              CREATE A NEW APPROVAL WORKFLOW\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"\r\n              selectedWorkflow?.length === 0 ||\r\n              !selectedWorkflow[0]?.workflow_name\r\n            \"\r\n            (click)=\"\r\n              clickApprovalWorkflow(true); activateSelector('approvers', true)\r\n            \"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the approval workflow for this policy\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"\r\n              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\r\n            \"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\"\r\n          >\r\n            <div\r\n              class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i\r\n                  (click)=\"removeWorkflow()\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ selectedWorkflow[0]?.workflow_name }}</span\r\n                >\r\n              </div>\r\n              <button\r\n                (click)=\"editWorkflow(selectedWorkflow[0])\"\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\r\n            <div\r\n              *ngFor=\"\r\n                let approval of selectedWorkflow[0]?.approval_workflow;\r\n                let approvalIndex = index\r\n              \"\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n            >\r\n              <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"level-left vx-d-flex vx-align-center\">\r\n                  <div class=\"vx-d-block\">\r\n                    <div\r\n                      class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n                      [appTooltip]=\"\r\n                        approval?.alias_name\r\n                          ? approval?.alias_name\r\n                          : approval?.level1\r\n                      \"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                    >\r\n                      {{\r\n                        approval?.alias_name\r\n                          ? approval?.alias_name\r\n                          : approval?.level1\r\n                      }}\r\n                    </div>\r\n                    <div\r\n                      class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n                    >\r\n                      {{\r\n                        approval?.type === \"ROUNDROBIN\"\r\n                          ? \"ROUND-ROBIN\"\r\n                          : approval?.type === \"ANYONE\"\r\n                          ? \"ANY ONE\"\r\n                          : approval?.type\r\n                      }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div\r\n                  class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\r\n                >\r\n                  <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                    >&#xe9ae;</i\r\n                  > -->\r\n                  <div\r\n                    *ngIf=\"\r\n                      approval?.type?.toLowerCase() === 'sequential' &&\r\n                      approval?.approvers?.length < 2\r\n                    \"\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"\r\n                      approval?.approvers?.length > 1 &&\r\n                      approval?.type?.toLowerCase() === 'sequential'\r\n                    \"\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    1\r\n                  </div>\r\n                  <span\r\n                    class=\"chipName vx-fs-11 vx-label-txt\"\r\n                    [appTooltip]=\"approval?.approvers[0]?.member_name\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    >{{ approval?.approvers[0]?.member_name }}</span\r\n                  >\r\n                  <button\r\n                    *ngIf=\"approval?.approvers?.length > 1\"\r\n                    class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                    appPopover\r\n                    (click)=\"workflowPopover.popover()\"\r\n                    placement=\"right\"\r\n                  >\r\n                    +{{ approval?.approvers?.length - 1 }}\r\n                  </button>\r\n                </div>\r\n                <app-popover #workflowPopover [dontCloseonClick]=\"true\">\r\n                  <div class=\"wf-action-list\">\r\n                    <ul class=\"action-item\">\r\n                      <li\r\n                        *ngFor=\"\r\n                          let approver of approval?.approvers | slice : 1;\r\n                          let approvalIndex = index\r\n                        \"\r\n                      >\r\n                        <div class=\"avatar-card\">\r\n                          <span\r\n                            class=\"value\"\r\n                            [appTooltip]=\"approver?.member_name\"\r\n                            placement=\"bottom-left\"\r\n                            delay=\"0\"\r\n                            type=\"black\"\r\n                            [tooltipMandatory]=\"false\"\r\n                          >\r\n                            <!-- <i class=\"icons\">&#xe90d;</i> -->\r\n                            <span\r\n                              *ngIf=\"\r\n                                approval?.type?.toLowerCase() === 'sequential'\r\n                              \"\r\n                              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                              >{{\r\n                                approvalIndex + 1 ===\r\n                                approval?.approvers?.length - 1\r\n                                  ? \"Final\"\r\n                                  : approvalIndex + 2\r\n                              }}</span\r\n                            >\r\n                            {{ approver?.member_name }}\r\n                          </span>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </app-popover>\r\n              </div>\r\n\r\n              <!-- <div class=\"vx-d-flex vx-align-center\">\r\n                <button (click)=\"editLevelClicked(approval,approvalIndex)\"\r\n                  class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                </button>\r\n                <button (click)=\"deleteLevel(approvalIndex)\"\r\n                  class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\r\n                </button>\r\n              </div> -->\r\n            </div>\r\n          </ng-container>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\r\n              !policyApprovalFlag\r\n            \"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select or create an approval workflow for this policy.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Access -->\r\n    <div\r\n      *ngIf=\"false\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"false\"\r\n      [class.disabled]=\"false\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">POLICY ACCESS</label>\r\n          </div>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Who should be able to view this policy?\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\">\r\n            <div\r\n              class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >Samantha Jones</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"policyAccessPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  +4\r\n                </button>\r\n              </div>\r\n              <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i class=\"icons\">&#xe90d;</i>\r\n                          Harshvardhan Kariwala\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n              <button\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"vx-mt-4 vx-mb-2\">\r\n              <app-cs-radio\r\n                ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n                  Everyone who has access to this Policy Category\r\n                </div></app-cs-radio\r\n              >\r\n              <app-cs-radio class=\"vx-mt-1\"\r\n                ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n                  Select users/groups\r\n                </div></app-cs-radio\r\n              >\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"vx-mt-2\">\r\n            <app-cs-switch\r\n              >ACCEPT SUGGESTIONS\r\n              <i\r\n                class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n                [appTooltip]=\"'Accept suggestions info text here...'\"\r\n                placement=\"bottom-right\"\r\n                delay=\"0\"\r\n                type=\"white\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              ></app-cs-switch\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Attestations -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"false\"\r\n      [class.disabled]=\"false\"\r\n      *ngIf=\"false\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/attestations.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">ATTESTATIONS</label>\r\n          </div>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the persons required to attest to this Policy\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"'Samantha Jones'\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >Samantha Jones</span\r\n              >\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"policyAttestationPopover.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +4\r\n              </button>\r\n            </div>\r\n            <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        Harshvardhan Kariwala\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"vx-mt-2\">\r\n            <app-cs-switch\r\n              >REQUIRES E-SIGNATURE FOR ATTESTATION\r\n              <i\r\n                class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n                [appTooltip]=\"\r\n                  'Requires e-signature for attestation info text here...'\r\n                \"\r\n                placement=\"bottom-right\"\r\n                delay=\"0\"\r\n                type=\"white\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              ></app-cs-switch\r\n            >\r\n          </div>\r\n\r\n          <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\r\n          <div\r\n            class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n            >\r\n              What is the attestation schedule for this<br />policy?\r\n            </div>\r\n            <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\r\n              SET A FREQUENCY\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\r\n              Every Wednesday by 11:59 pm\r\n            </div>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <label class=\"vx-control-panel vx-mt-2\"\r\n            >ASSESSMENT OF UNDERSTANDING</label\r\n          >\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n              of the policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\r\n            </div>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Approval Workflow -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      *ngIf=\"false\"\r\n      [class.active]=\"activeSelector === 'approvers'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'approvers' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length == 0 ||\r\n            activeSelector === 'approvers'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length > 0 &&\r\n            activeSelector !== 'approvers'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div\r\n          class=\"vx-form-group approval-workflow\"\r\n          [class.disabled]=\"policyApprovalFlag !== 0\"\r\n        >\r\n          <label class=\"vx-control-panel\">\r\n            Approval workflow <span class=\"required\">*</span>\r\n            <button\r\n              (click)=\"\r\n                activateSelector('approvers', true);\r\n                addMoreLevels = true;\r\n                workflowType = 'SEQUENTIAL'\r\n              \"\r\n              class=\"button\"\r\n            >\r\n              Create a new Approval Workflow\r\n            </button>\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            [class.disabled]=\"approverWorkFlowList?.length == 0\"\r\n            *ngIf=\"\r\n              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\r\n              policyForm?.selectedApprovers.length == 0\r\n            \"\r\n          >\r\n            <cs-select\r\n              [ngModel]=\"selectedApprovalWorkflow\"\r\n              (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n              [placeholder]=\"'Select approval workflow for this policy'\"\r\n              name=\"selectedApprovalWorkflow\"\r\n              [setMaxWidth]=\"true\"\r\n            >\r\n              <cs-option\r\n                *ngFor=\"let data of approverWorkFlowList\"\r\n                [value]=\"data\"\r\n              >\r\n                {{ data.workflow_name }}\r\n              </cs-option>\r\n              <cs-option\r\n                [value]=\"-1\"\r\n                (click)=\"\r\n                  activateSelector('approvers', true);\r\n                  addMoreLevels = true;\r\n                  workflowType = 'SEQUENTIAL'\r\n                \"\r\n                >Create a new approval workflow</cs-option\r\n              >\r\n            </cs-select>\r\n          </div>\r\n          <ng-container\r\n            *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"selected\"\r\n              *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\r\n            >\r\n              <div class=\"workflow-label\">\r\n                <p class=\"title\">Level {{ i + 1 }}</p>\r\n                <p class=\"description\">{{ level.name }}</p>\r\n              </div>\r\n              <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"chip-container\">\r\n                  <span\r\n                    class=\"chip\"\r\n                    *ngFor=\"\r\n                      let approver of level.approvers.slice(0, 1);\r\n                      let j = index\r\n                    \"\r\n                    ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\r\n                      j + 1\r\n                    }}</span\r\n                    >{{ approver.member_name }}</span\r\n                  >\r\n\r\n                  <button\r\n                    class=\"count\"\r\n                    *ngIf=\"level.approvers?.length > 1\"\r\n                    type=\"button\"\r\n                    appPopover\r\n                    (click)=\"labelName.popover()\"\r\n                    placement=\"right\"\r\n                  >\r\n                    +\r\n\r\n                    {{ level.approvers.slice(1).length }}\r\n                  </button>\r\n                  <app-popover #labelName [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                        <li\r\n                          *ngFor=\"\r\n                            let approver of level.approvers | slice : 1;\r\n                            let j = index\r\n                          \"\r\n                        >\r\n                          <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                              <i\r\n                                class=\"icons\"\r\n                                (click)=\"remove('approvers', approver, i)\"\r\n                                >&#xe90d;</i\r\n                              >\r\n                              <span\r\n                                class=\"step\"\r\n                                *ngIf=\"level.name == 'SEQUENTIAL'\"\r\n                              >\r\n                                {{\r\n                                  j == level.approvers.slice(1).length - 1\r\n                                    ? \"Final\"\r\n                                    : j + 2\r\n                                }}\r\n                              </span>\r\n                              {{ approver.member_name }}\r\n                            </span>\r\n                          </div>\r\n                        </li>\r\n                      </ul>\r\n                    </div>\r\n                  </app-popover>\r\n                </div>\r\n                <button\r\n                  class=\"edit\"\r\n                  type=\"button\"\r\n                  (click)=\"\r\n                    activateSelector('approvers', true, level.name);\r\n                    approversListIndex = i\r\n                  \"\r\n                >\r\n                  <i class=\"icons\">&#xe9ba;</i>Edit\r\n                </button>\r\n                <button\r\n                  class=\"close-btn\"\r\n                  (click)=\"remove('workflowLevel', level, i)\"\r\n                >\r\n                  <i class=\"icons\">&#xe90d;</i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              !policyForm?.selectedApprovers?.length &&\r\n              !policyApprovalFlag\r\n            \"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select or create an approval workflow for this policy.\r\n          </p>\r\n\r\n          <label\r\n            class=\"vx-control-panel\"\r\n            *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\r\n            ><button\r\n              class=\"button\"\r\n              (click)=\"\r\n                activateSelector('approvers', true);\r\n                addMoreLevels = true;\r\n                workflowType = 'SEQUENTIAL'\r\n              \"\r\n            >\r\n              + Add More Levels\r\n            </button></label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Who / now Attestation -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'assignees'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'assignees' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedAssignees?.length == 0 ||\r\n            activeSelector === 'assignees'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedAssignees?.length > 0 &&\r\n            activeSelector !== 'assignees'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Attestation</label>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\"\r\n            *ngIf=\"\r\n              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\r\n              (policyForm?.selectedAssignees?.length == 0 &&\r\n                groupEnabled &&\r\n                policyForm?.selectedGroupAssignee.length == 0)\r\n            \"\r\n            (click)=\"activateSelector('assignees', true)\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the persons responsible for attesting this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n            *ngIf=\"\r\n              policyForm?.selectedAssignees?.length > 0 ||\r\n              policyForm?.selectedGroupAssignee?.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)\r\n                \"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('assignees', assignee)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"assignee.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ assignee.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"assigneePopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.selectedAssignees?.length > 1\"\r\n              >\r\n                +{{ policyForm?.selectedAssignees?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n            <ng-container *ngIf=\"groupEnabled\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove('assignees', policyForm?.selectedAssignees[0])\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.selectedAssignees[0]?.employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"UserPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.selectedAssignees.length > 1\"\r\n                >\r\n                  +{{ policyForm?.selectedAssignees.length - 1 }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.selectedAssignees.length > 0 &&\r\n                  policyForm?.selectedGroupAssignee.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove(\r\n                      'groupAssignees',\r\n                      policyForm?.selectedGroupAssignee[0]\r\n                    )\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"\r\n                    policyForm?.selectedGroupAssignee[0]?.group_name\r\n                  \"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.selectedGroupAssignee[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"group.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\r\n                >\r\n                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </ng-container>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              (click)=\"activateSelector('assignees', true)\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              ((policyForm?.selectedAssignees?.length == 0 &&\r\n                policyForm?.frequency_details &&\r\n                !groupEnabled) ||\r\n                (policyForm?.selectedAssignees?.length == 0 &&\r\n                  policyForm.selectedGroupAssignee.length == 0 &&\r\n                  policyForm?.frequency_details &&\r\n                  groupEnabled))\r\n            \"\r\n            id=\"whovalidatemsg\"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select the persons required to attest to this Policy.\r\n          </p>\r\n          <app-cs-switch\r\n            [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n            [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\r\n            class=\"who-toggle\"\r\n            >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, the readers will be required to attest this policy using their electronic signature.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            ></app-cs-switch\r\n          >\r\n          <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ assignee.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #UserPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ assignee.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #group [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.selectedGroupAssignee | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n\r\n          <!-- overseer -->\r\n          <app-popover #overseerPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let overseer of policyForm?.CCEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ overseer?.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.CCGroupEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data?.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <!-- overseer end -->\r\n\r\n          <!-- overseer fail start -->\r\n          <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let overseer of policyForm?.CCFailEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ overseer?.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.CCFailEmailGroup | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        class=\"icons\"\r\n                        (click)=\"remove('ccGroupFailEmail', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data?.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <!-- overseer fail end -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- When -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'frequency'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'frequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        *ngIf=\"false\"\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.frequency_details\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            !policyForm?.frequency_details || activeSelector === 'frequency'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.frequency_details && activeSelector !== 'frequency'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">When?</label>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.frequency_details == ''\"\r\n            class=\"select button-sec\"\r\n          >\r\n            <div\r\n              class=\"custom-input frequency-custom-input\"\r\n              (click)=\"activateSelector('frequency', true)\"\r\n            >\r\n              {{ frequencyPlaceholder }}\r\n            </div>\r\n\r\n            <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\r\n              Set A frequency\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"policyForm?.frequency_details != ''\"\r\n            class=\"selected button-sec\"\r\n          >\r\n            <span class=\"chip\">{{ frequencyPlaceholder }}</span>\r\n            <button\r\n              *ngIf=\"activeSelector !== 'frequency'\"\r\n              type=\"button\"\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('frequency', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i>Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              ((policyForm?.selectedAssignees?.length > 0 &&\r\n                !policyForm?.frequency_details &&\r\n                !groupEnabled) ||\r\n                ((policyForm?.selectedAssignees?.length > 0 ||\r\n                  policyForm?.selectedGroupAssignee?.length > 0) &&\r\n                  !policyForm?.frequency_details &&\r\n                  groupEnabled))\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select an attestation schedule for this policy.\r\n          </p>\r\n\r\n          <!-- <label class=\"vx-control-panel\">Effective Date</label>\r\n                  <div class=\"date-time-picker\">\r\n                      <div class=\"picker-group\">\r\n                          <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\r\n                              [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n                          <i class=\"icons\">&#xe92d;</i>\r\n                          <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\r\n                              [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\r\n                          </dp-date-picker>\r\n                          <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n                      </div>\r\n                  </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Checkpoints / Assessment of Understanding -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"true\"\r\n      [class.active]=\"activeSelector === 'checkpoints'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'checkpoints' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        *ngIf=\"false\"\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.checkpointDetails?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.checkpointDetails?.length == 0 ||\r\n            activeSelector === 'checkpoints'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.checkpointDetails?.length > 0 &&\r\n            activeSelector !== 'checkpoints'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">\r\n            Assessment of Understanding\r\n            <!-- <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n          >\r\n            <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\r\n            <div class=\"custom-input\">\r\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n              of the policy.\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\r\n          >\r\n            <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\r\n\r\n                      <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\r\n\r\n                      <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\r\n\r\n                    </div> -->\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <span class=\"chipName vx-fs-11 vx-label-txt\">{{\r\n                policyForm?.checkpointDetails?.length +\r\n                  (policyForm?.checkpointDetails?.length > 1\r\n                    ? \" Questions\"\r\n                    : \" Question\")\r\n              }}</span>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('checkpoints', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n                  <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                          <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\r\n                              <div class=\"avatar-card\">\r\n                                  <span class=\"value\">\r\n                                      <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\r\n                                      {{ checkpoint?.question }}\r\n                                  </span>\r\n                              </div>\r\n                          </li>\r\n                      </ul>\r\n                  </div>\r\n              </app-popover> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Risk Classification -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      *ngIf=\"showRiskClassification && false\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n          alt=\"im\"\r\n          *ngIf=\"!policyForm?.riskRating\"\r\n        />\r\n\r\n        <svg\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n          *ngIf=\"policyForm?.riskRating\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Risk Classification</label>\r\n          <div class=\"classification\">\r\n            <label\r\n              class=\"low\"\r\n              *ngFor=\"let class of riskClassification\"\r\n              [ngClass]=\"[class.class]\"\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name=\"classification\"\r\n                [value]=\"class.value\"\r\n                [checked]=\"policyForm?.riskRating === class.value\"\r\n                [(ngModel)]=\"policyForm.riskRating\"\r\n              />\r\n              <span>{{ class.name }}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Responsibility Center -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addResponsibilityCenters\"\r\n      [class.active]=\"activeSelector === 'rc'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'rc' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Responsibility Center</label>\r\n          <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('rc', true)\"\r\n              placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('rc', rc)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"rc.item_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ rc.item_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"rcPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.selectedRCs?.length > 1\"\r\n              >\r\n                +{{ policyForm?.selectedRCs?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('rc', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let rc of policyForm?.selectedRCs | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\r\n                      {{ rc.item_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Version -->\r\n    <div\r\n      *ngIf=\"policyForm.addVersion\"\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"\r\n        activeSelector && sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n          alt=\"name\"\r\n          *ngIf=\"!policyForm.policy_version\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.policy_version\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">VERSION</label>\r\n          <input\r\n            [(ngModel)]=\"policyForm.policy_version\"\r\n            (change)=\"onVersion($event)\"\r\n            type=\"text\"\r\n            placeholder=\"Specify the policy version.\"\r\n          />\r\n          <p\r\n            *ngIf=\"!isVersionValid\"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            {{ versionErrorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Reviewer -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addReviewers && false\"\r\n      [class.active]=\"activeSelector === 'reviewer'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'reviewer' &&\r\n        activeSelector !== 'reviewerFrequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedReviewers?.length == 0 ||\r\n            activeSelector === 'reviewer'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedReviewers?.length > 0 &&\r\n            activeSelector !== 'reviewer'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Reviewer </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n              placeholder=\"Select the person responsible for reviewing this policy\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('reviewer', reviewer)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"reviewer.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ reviewer.member_name }}</span\r\n                >\r\n              </ng-container>\r\n            </div>\r\n\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              policyForm?.selectedReviewers?.length == 0 &&\r\n              policyForm?.review_frequency_details\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select a reviewer for this policy.\r\n          </p>\r\n\r\n          <label class=\"vx-control-panel\">When? </label>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n            class=\"select button-sec\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n              [placeholder]=\"reviewerFrequencyPlaceholder\"\r\n              readonly\r\n            />\r\n            <button\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n              type=\"button\"\r\n            >\r\n              Set A frequency\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n            class=\"selected button-sec\"\r\n          >\r\n            <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\r\n            <button\r\n              *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n              type=\"button\"\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i>Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              policyForm?.selectedReviewers?.length > 0 &&\r\n              !policyForm?.review_frequency_details\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select the review schedule for this policy.\r\n          </p>\r\n\r\n          <app-format-and-evidence\r\n            (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\r\n            #formatEvidence\r\n            [mode]=\"'policyReviewer'\"\r\n            [organization_id]=\"organization_id\"\r\n            [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\r\n          >\r\n          </app-format-and-evidence>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addOverseers\"\r\n      [class.active]=\"\r\n        activeSelector === 'ccEmail' || activeSelector === 'ccFail'\r\n      \"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'ccEmail' &&\r\n        activeSelector !== 'ccFail' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"\r\n          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\r\n        \"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            (policyForm?.CCFailEmail?.length == 0 &&\r\n              policyForm?.CCEmail?.length == 0) ||\r\n            activeSelector === 'ccEmail' ||\r\n            activeSelector === 'ccFail'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            (policyForm?.CCFailEmail?.length > 0 ||\r\n              policyForm?.CCEmail?.length > 0) &&\r\n            activeSelector !== 'ccEmail' &&\r\n            activeSelector !== 'ccFail'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Overseer </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"\r\n              policyForm?.CCEmail?.length == 0 &&\r\n              policyForm?.CCGroupEmail.length == 0\r\n            \"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('ccEmail', true)\"\r\n              placeholder=\"Who should have oversight of this policy?\"\r\n              readonly\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"\r\n              policyForm?.CCEmail?.length > 0 ||\r\n              policyForm?.CCGroupEmail.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccEmail', ccEmail)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"ccEmail.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ ccEmail.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"ccEmailPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n              >\r\n                +{{ policyForm?.CCEmail?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCEmail[0].employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"overseerPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.CCEmail.length > 0 &&\r\n                  policyForm?.CCGroupEmail?.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"overseerGroup.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCGroupEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('ccEmail', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"\r\n              policyForm?.CCFailEmail?.length == 0 &&\r\n              policyForm?.CCFailEmailGroup?.length == 0\r\n            \"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('ccFail', true)\"\r\n              placeholder=\"Who should be notified if the policy is not attested on time?\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"\r\n              policyForm?.CCFailEmail?.length > 0 ||\r\n              policyForm?.CCFailEmailGroup?.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccFail', ccFail)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"ccFail.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ ccFail.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"ccFailPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n              >\r\n                +{{ policyForm?.CCFailEmail?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"overseerFailPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCFailEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.CCFailEmail?.length > 0 &&\r\n                  policyForm?.CCFailEmailGroup?.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"overseerFailGroup.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('ccFail', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let ccEmail of policyForm?.CCEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ ccEmail.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let ccFail of policyForm?.CCFailEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ ccFail.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Related Documents -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addAssociatedDocuments\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\">\r\n        <img\r\n          *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\r\n          <app-format-and-evidence\r\n            (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\r\n            [mode]=\"'policy'\"\r\n            [organization_id]=\"organization_id\"\r\n            [formatEvidanceData]=\"policyForm?.associatedDocuments\"\r\n          ></app-format-and-evidence>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Link Programs & Responsibilities -->\r\n    <div\r\n      *ngIf=\"policyForm?.addLinkProgram\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'linkProgram'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'linkProgram' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"\r\n          policyForm?.programSelectedValues?.program?.category_id\r\n        \"\r\n      >\r\n        <img\r\n          *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\"\r\n            >LINK PROGRAMS & RESPONSIBILITIES</label\r\n          >\r\n          <div\r\n            *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n            (click)=\"activateSelector('linkProgram', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select Programs & responsibilities that are<br />associated with\r\n              this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n            *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i\r\n                (click)=\"\r\n                  remove('linkProgram', policyForm?.programSelectedValues)\r\n                \"\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ policyForm?.programSelectedValues?.program?.name }}</span\r\n              >\r\n              <!-- <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"programResponsibilityPopover.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +4\r\n              </button> -->\r\n            </div>\r\n            <app-popover\r\n              #programResponsibilityPopover\r\n              [dontCloseonClick]=\"true\"\r\n            >\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"\r\n                          'Reporting information security weaknesses'\r\n                        \"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        Reporting information security weaknesses\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              (click)=\"activateSelector('linkProgram', true)\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Link Assessment -->\r\n    <div\r\n      *ngIf=\"policyForm.addLinkAssessment\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'isAssessment'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'isAssessment' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\r\n        <img\r\n          *ngIf=\"!policyForm?.assessment?.length\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.assessment?.length\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\r\n          <div\r\n            *ngIf=\"policyForm?.assessment?.length === 0\"\r\n            (click)=\"activateSelector('isAssessment', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select assessments that are associated with this<br />policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.assessment?.length > 0\"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n                }}</span\r\n              >\r\n            </div>\r\n            <app-popover\r\n              #programResponsibilityPopover\r\n              [dontCloseonClick]=\"true\"\r\n            >\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li\r\n                    *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\r\n                  >\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"\r\n                          assessment?.assessmentDetails?.assessment_name\r\n                        \"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        {{ assessment?.assessmentDetails?.assessment_name }}\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              (click)=\"activateSelector('isAssessment', true)\"\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <app-checkbox-list\r\n    [config]=\"categoryConfig\"\r\n    [twoColumn]=\"false\"\r\n    [itemsList]=\"categoryList\"\r\n    [selectedItems]=\"policyForm.selectedCategories\"\r\n    [identifierKey]=\"'_id'\"\r\n    [displayKey]=\"'item_name'\"\r\n    [tooltipKey]=\"'item_name'\"\r\n    *ngIf=\"activeSelector === 'category'\"\r\n    (saveList)=\"saveSelectedList('category', $event)\"\r\n    (closeList)=\"disableSelector()\"\r\n  >\r\n  </app-checkbox-list>\r\n  <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\r\n  [itemsList]=\"\"\r\n  [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CC')\">\r\n</app-checkbox-list> -->\r\n\r\n  <app-responsibility-centers-list\r\n    *ngIf=\"activeSelector === 'rc'\"\r\n    [responsibilityCentersList]=\"rcList\"\r\n    [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\r\n    [rcIdKey]=\"'item_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n    (closeRcList)=\"disableSelector()\"\r\n  >\r\n  </app-responsibility-centers-list>\r\n\r\n  <app-users-radio-list\r\n    *ngIf=\"activeSelector === 'reviewer'\"\r\n    [itemEmailKey]=\"'member_email'\"\r\n    [usersList]=\"allReviewers\"\r\n    [headerText]=\"'Select a Reviewer'\"\r\n    [selectedUsers]=\"policyForm.selectedReviewers\"\r\n    [userIdKey]=\"'member_id'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-users-radio-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\r\n    [usersList]=\"overseersList\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [selectedUsers]=\"policyForm.CCEmail\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"overseersList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [selectedUsers]=\"policyForm.CCEmail\"\r\n    [selectedGroups]=\"policyForm.CCGroupEmail\"\r\n    (save)=\"saveSelectedList('ccEmail', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\r\n    [usersList]=\"overseersList\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [selectedUsers]=\"policyForm.CCFailEmail\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"overseersList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [selectedUsers]=\"policyForm.CCFailEmail\"\r\n    [selectedGroups]=\"policyForm.CCFailEmailGroup\"\r\n    (save)=\"saveSelectedList('ccFail', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-group-users-list\r\n    *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\r\n    [usersList]=\"assigneesList\"\r\n    [groupsList]=\"groupsList\"\r\n    [selectedUsers]=\"policyForm.selectedAssignees\"\r\n    [userIdKey]=\"'my_member_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-group-users-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"ownerlist\"\r\n    [groupList]=\"groupsList\"\r\n    (save)=\"saveSelectedList('assignees', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [selectedGroups]=\"policyForm.selectedGroupAssignee\"\r\n    [selectedUsers]=\"policyForm.selectedAssignees\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'approvers' && false\"\r\n    [listHeading]=\"'Select Approvers'\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [usersList]=\"allApprovers\"\r\n    [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"\r\n      addMoreLevels\r\n        ? []\r\n        : policyForm.selectedApprovers[approversListIndex].approvers\r\n    \"\r\n    [userIdKey]=\"'member_id'\"\r\n    [itemEmailKey]=\"'member_email'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n    [mode]=\"mode\"\r\n    [reviewerWorkflowType]=\"workflowType\"\r\n    (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n    [workflowList]=\"workflowList\"\r\n    [workflowText]=\"'Approval Workflow'\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <app-frequency-container\r\n    *ngIf=\"activeSelector === 'frequency'\"\r\n    [mode]=\"'policy'\"\r\n    [frequencyDetails]=\"frequencyDetails\"\r\n    (selectedFrequency)=\"frequencyData($event)\"\r\n    [feature]=\"feature\"\r\n    [pageType]=\"'policy'\"\r\n    (closeFrequency)=\"disableSelector()\"\r\n  ></app-frequency-container>\r\n\r\n  <app-frequency-container\r\n    *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [mode]=\"'reviewerFrequency'\"\r\n    [frequencyDetails]=\"reviewerFrequencyDetails\"\r\n    (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n    [feature]=\"feature\"\r\n    [pageType]=\"'policy'\"\r\n    (closeFrequency)=\"disableSelector()\"\r\n  ></app-frequency-container>\r\n\r\n  <vc-link-program\r\n    *ngIf=\"activeSelector === 'linkProgram'\"\r\n    (close)=\"disableSelector()\"\r\n    [policy]=\"policyForm\"\r\n    [selectedProgram]=\"policyForm?.programSelectedValues\"\r\n    [mode]=\"mode\"\r\n    [selectedLinkProgram]=\"selectedLinkProgram\"\r\n    (changeTab)=\"changeTab('linkedPrograms')\"\r\n    (updatedProgramDetails)=\"updatedProgramDetails($event)\"\r\n  >\r\n  </vc-link-program>\r\n\r\n  <app-checkpoints-policy-container\r\n    (closeCheckPoint)=\"disableSelector()\"\r\n    [checkpointData]=\"policyForm?.checkpointDetails\"\r\n    [requiredPoint]=\"policyForm?.passingMarks\"\r\n    *ngIf=\"activeSelector === 'checkpoints'\"\r\n    (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\r\n  ></app-checkpoints-policy-container>\r\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n  <app-approval-workflow\r\n    *ngIf=\"enableApprovalWorkflow\"\r\n    [selectedCategory]=\"policyForm?.selectedCategories\"\r\n    [approverWorkFlowList]=\"approverWorkFlowList\"\r\n    [allApprovers]=\"allApprovers\"\r\n    (listCancelClicked)=\"listCancelClicked($event)\"\r\n    (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\r\n    (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\r\n    [editApprovalWorkflow]=\"editApprovalWorkflow\"\r\n    [createApprovalClick]=\"createApprovalClick\"\r\n    (closeCreateClicked)=\"closeClickedCreateForm()\"\r\n    [editWorkflowLevel]=\"editWorkflowLevel\"\r\n  ></app-approval-workflow>\r\n  <!-- <app-select-approvers></app-select-approvers> -->\r\n\r\n  <!-- <app-policy-access></app-policy-access> -->\r\n</ng-container>\r\n<ng-container *ngIf=\"showCreateDocuments\">\r\n  <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\r\n   [organization_id]=\"organization_id\"\r\n   [member_obj_id]=\"member_obj_id\"\r\n   [userInfo]=\"userInfo\"\r\n   [policyId]=\"policyId\"\r\n   [policyName]=\"policyForm.policyName\"\r\n   (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n   (editPolicy)=\"editPolicyFromDocuments()\"\r\n   ></app-create-documents> -->\r\n  <lib-document-section\r\n    *ngIf=\"showCreateDocuments\"\r\n    [organization_id]=\"organization_id\"\r\n    [member_obj_id]=\"member_obj_id\"\r\n    [userInfo]=\"userInfo\"\r\n    [policyId]=\"policyId\"\r\n    [policyName]=\"policyForm.policyName\"\r\n    (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n    (editPolicy)=\"editPolicyFromDocuments()\"\r\n  ></lib-document-section>\r\n</ng-container>\r\n\r\n<app-assessment-list\r\n  *ngIf=\"activeSelector === 'isAssessment'\"\r\n  [program_ids]=\"''\"\r\n  [isEdit]=\"policyForm?.assessment?.length\"\r\n  (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\r\n  [selectedAssessment]=\"policyForm?.assessment[0]\"\r\n  (onAssessmentSelect)=\"\r\n    onAssessmentSelect($event); saveSelectedList('isAssessment', false)\r\n  \"\r\n></app-assessment-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'approvers' && false\"\r\n  [listHeading]=\"'Select Approvers'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allApprovers\"\r\n  [showWorkflow]=\"true\"\r\n  [selectedUsers]=\"\r\n    addMoreLevels\r\n      ? []\r\n      : policyForm.selectedApprovers[approversListIndex].approvers\r\n  \"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n  (closeUsersList)=\"disableSelector()\"\r\n  [mode]=\"mode\"\r\n  [reviewerWorkflowType]=\"workflowType\"\r\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n  [workflowList]=\"workflowList\"\r\n  [workflowText]=\"'Approval Workflow'\"\r\n>\r\n</app-owner-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'owners'\"\r\n  [listHeading]=\"'Select Owner(s)'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allApprovers\"\r\n  [showWorkflow]=\"false\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('owners', $event)\"\r\n  (closeUsersList)=\"disableSelector()\"\r\n  [mode]=\"mode\"\r\n  [selectedUsers]=\"policyForm?.policy_owners ?? []\"\r\n>\r\n</app-owner-list>\r\n",
+                    template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n  <div class=\"workflow-policy\">\r\n    <!-- Policy Name -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n          alt=\"name\"\r\n          *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">\r\n            Policy Name <span class=\"required\">*</span>\r\n          </label>\r\n          <input\r\n            type=\"text\"\r\n            (keydown)=\"activeSelector = 'name'\"\r\n            (focusin)=\"activateSelector('name', true)\"\r\n            *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\r\n            (focusout)=\"activateSelector('name', false)\"\r\n            [ngModel]=\"policyForm.policyName\"\r\n            (ngModelChange)=\"policyForm.policyName = changeName($event)\"\r\n            placeholder=\"Name this policy\"\r\n          />\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\r\n          >\r\n            <div class=\"chip-container\">\r\n              <span class=\"value\">{{ policyForm.policyName }}</span>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('name', true)\"\r\n              type=\"button\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n\r\n          <p\r\n            *ngIf=\"submitted && !policyForm.policyName.trim()\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Please enter a name for this policy.\r\n          </p>\r\n          <marx-editor\r\n            [(ngModel)]=\"policyForm.policyNotes\"\r\n            [editorConfig]=\"description\"\r\n          ></marx-editor>\r\n          <app-cs-switch\r\n            [(ngValue)]=\"policyForm.availableOnPortal\"\r\n            (ngValueChange)=\"availabilityOnPortal($event)\"\r\n          >\r\n            Do you want this policy to be available on the portal?\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </app-cs-switch>\r\n          <app-cs-switch\r\n            *ngIf=\"policyForm.availableOnPortal\"\r\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\r\n          >\r\n            Accept suggestions\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            ></app-cs-switch\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Category -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'category'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'category' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedCategories?.length == 0 ||\r\n            activeSelector === 'category'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedCategories?.length > 0 &&\r\n            activeSelector !== 'category'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\"\r\n            >Policy Category <span class=\"required\">*</span>\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.selectedCategories?.length == 0\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('category', true)\"\r\n              placeholder=\"Select a category for this policy.\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.selectedCategories?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let category of policyForm?.selectedCategories?.slice(0, 1)\r\n                \"\r\n              >\r\n                <i\r\n                  (click)=\"remove('category', category)\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"category.item_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ category.item_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                *ngIf=\"policyForm?.selectedCategories?.length > 1\"\r\n                type=\"button\"\r\n                appPopover\r\n                (click)=\"category.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +{{ policyForm?.selectedCategories?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\r\n                          [class.plus]=\"policyForm?.selectedCategories?.length>2\">\r\n                          <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\r\n                                  class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                              {{category.item_name}}</span>\r\n                          <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\r\n                              appPopover (click)=\"category.popover()\" placement=\"right\">+\r\n                              {{policyForm?.selectedCategories?.slice(2).length}}</button>\r\n                      </div> -->\r\n            <button\r\n              *ngIf=\"activeSelector !== 'category'\"\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('category', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #category [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let category of policyForm?.selectedCategories | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('category', category)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ category.item_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <p\r\n            *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Please select the category for this policy.\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\r\n          <ng-container *ngFor=\"let tag of policyForm?.customTags\">\r\n            <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"tag.value\"\r\n              placeholder=\"{{ tag.tagname }}\"\r\n            />\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Effective Date -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Effective Date</label>\r\n          <div class=\"date-time-picker\">\r\n            <div class=\"picker-group\">\r\n              <input\r\n                type=\"text\"\r\n                readonly\r\n                placeholder=\"Select the effective date of the policy.\"\r\n                [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\r\n                (click)=\"openDatePicker()\"\r\n              />\r\n              <i class=\"icons\">&#xe92d;</i>\r\n              <dp-date-picker\r\n                #datePicker\r\n                (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\r\n                [config]=\"dateConfig\"\r\n                [(ngModel)]=\"policyForm.policyDueDate\"\r\n              >\r\n              </dp-date-picker>\r\n              <div\r\n                class=\"vx-overlay\"\r\n                (click)=\"closeDatePicker($event)\"\r\n                *ngIf=\"datePickerOverlay\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Owner -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'owners'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'owners' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\r\n        <img\r\n          *ngIf=\"!policyForm.policy_owners?.length\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.policy_owners?.length\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\r\n          </div>\r\n          <div\r\n            *ngIf=\"!policyForm.policy_owners?.length\"\r\n            (click)=\"activateSelector('owners', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select owners for this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"policyForm.policy_owners?.length\"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div class=\"vx-d-flex vx-align-center\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i\r\n                  (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.policy_owners[0]?.member_name }}</span\r\n                >\r\n\r\n                <button\r\n                  *ngIf=\"policyForm?.policy_owners?.length > 1\"\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"policyUserPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  + {{ policyForm?.policy_owners.length - 1 }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                *ngIf=\"false\"\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\r\n              >\r\n                &\r\n              </div>\r\n              <div\r\n                *ngIf=\"false\"\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >Samantha Jones</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"policyGroupPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  +4\r\n                </button>\r\n              </div>\r\n              <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li\r\n                      *ngFor=\"\r\n                        let owner of policyForm?.policy_owners | slice : 1;\r\n                        let i = index\r\n                      \"\r\n                    >\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"owner?.member_name\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i\r\n                            (click)=\"remove('owners', owner, i + 1)\"\r\n                            class=\"icons\"\r\n                            >&#xe90d;</i\r\n                          >\r\n                          {{ owner?.member_name }}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n              <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i class=\"icons\">&#xe90d;</i>\r\n                          Harshvardhan Kariwala\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n            </div>\r\n            <button\r\n              (click)=\"activateSelector('owners', true)\"\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"submitted && !policyForm?.policy_owners?.length\"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select owners for this policy.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"\r\n        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\r\n      \"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'reviewer' &&\r\n        activeSelector !== 'reviewerFrequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\r\n        <img\r\n          *ngIf=\"!policyForm?.addReviewers\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.addReviewers\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">REVIEW</label>\r\n          <div\r\n            class=\"reviewSelection vx-p-3 vx-pb-0\"\r\n            [class.disabled]=\"\r\n              activeSelector && sideSelectorElements.includes(activeSelector)\r\n            \"\r\n          >\r\n            <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\r\n              Does this policy need to be reviewed?\r\n            </div>\r\n            <app-cs-radio\r\n              name=\"review-type\"\r\n              [checked]=\"policyForm?.addReviewers\"\r\n              (checkedEvent)=\"typeSelected(true)\"\r\n              ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n                YES\r\n              </div></app-cs-radio\r\n            >\r\n            <app-cs-radio\r\n              name=\"review-type\"\r\n              [checked]=\"!policyForm?.addReviewers\"\r\n              (checkedEvent)=\"typeSelected(false)\"\r\n              ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n                NO\r\n              </div></app-cs-radio\r\n            >\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"policyForm?.addReviewers\">\r\n            <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\r\n            <div\r\n              class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n              *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n              [appScrollInView]=\"scrollToBottom\"\r\n              [class.active]=\"activeSelector === 'reviewer'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewer' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n            >\r\n              <div\r\n                class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n              >\r\n                Select the person responsible for reviewing this policy\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n              [class.active]=\"activeSelector === 'reviewer'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewer' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n              >\r\n                <i\r\n                  (click)=\"remove('reviewer', reviewer)\"\r\n                  class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                >\r\n                  {{ reviewer?.member_name }}</span\r\n                >\r\n              </div>\r\n              <button\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                *ngIf=\"activeSelector !== 'reviewer'\"\r\n                (click)=\"activateSelector('reviewer', true)\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n            <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\r\n            <div\r\n              *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n              class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewerFrequency' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n            >\r\n              <div\r\n                class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n              >\r\n                When does this policy needs to be reviewed?\r\n              </div>\r\n              <div\r\n                (click)=\"activateSelector('reviewerFrequency', true)\"\r\n                class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\r\n              >\r\n                SET A FREQUENCY\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n              [class.disabled]=\"\r\n                activeSelector &&\r\n                activeSelector !== 'reviewerFrequency' &&\r\n                sideSelectorElements.includes(activeSelector)\r\n              \"\r\n              [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n            >\r\n              <div\r\n                class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                [appTooltip]=\"reviewerFrequencyPlaceholder\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n              >\r\n                {{ reviewerFrequencyPlaceholder }}\r\n              </div>\r\n              <button\r\n                *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n                (click)=\"activateSelector('reviewerFrequency', true)\"\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n            <p\r\n              *ngIf=\"\r\n                submitted &&\r\n                policyForm?.selectedReviewers?.length > 0 &&\r\n                !policyForm?.review_frequency_details\r\n              \"\r\n              class=\"error-message\"\r\n              [appScrollInView]=\"true\"\r\n            >\r\n              Select the review schedule for this policy.\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- New Approval Workflow -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'approvers'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'approvers' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length == 0 ||\r\n            activeSelector === 'approvers'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length > 0 &&\r\n            activeSelector !== 'approvers'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\"\r\n              >APPROVAL <span class=\"required\">*</span></label\r\n            >\r\n            <button\r\n              (click)=\"\r\n                createApprovalWorkflow(); activateSelector('approvers', true)\r\n              \"\r\n              [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n              class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\r\n            >\r\n              CREATE A NEW APPROVAL WORKFLOW\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"\r\n              selectedWorkflow?.length === 0 ||\r\n              !selectedWorkflow[0]?.workflow_name\r\n            \"\r\n            (click)=\"\r\n              clickApprovalWorkflow(true); activateSelector('approvers', true)\r\n            \"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the approval workflow for this policy\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"\r\n              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\r\n            \"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\"\r\n          >\r\n            <div\r\n              class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i\r\n                  (click)=\"removeWorkflow()\"\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ selectedWorkflow[0]?.workflow_name }}</span\r\n                >\r\n              </div>\r\n              <button\r\n                (click)=\"editWorkflow(selectedWorkflow[0])\"\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\r\n            <div\r\n              *ngFor=\"\r\n                let approval of selectedWorkflow[0]?.approval_workflow;\r\n                let approvalIndex = index\r\n              \"\r\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n            >\r\n              <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"level-left vx-d-flex vx-align-center\">\r\n                  <div class=\"vx-d-block\">\r\n                    <div\r\n                      class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n                      [appTooltip]=\"\r\n                        approval?.alias_name\r\n                          ? approval?.alias_name\r\n                          : approval?.level1\r\n                      \"\r\n                      placement=\"bottom-left\"\r\n                      delay=\"0\"\r\n                      type=\"black\"\r\n                      [tooltipMandatory]=\"false\"\r\n                    >\r\n                      {{\r\n                        approval?.alias_name\r\n                          ? approval?.alias_name\r\n                          : approval?.level1\r\n                      }}\r\n                    </div>\r\n                    <div\r\n                      class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n                    >\r\n                      {{\r\n                        approval?.type === \"ROUNDROBIN\"\r\n                          ? \"ROUND-ROBIN\"\r\n                          : approval?.type === \"ANYONE\"\r\n                          ? \"ANY ONE\"\r\n                          : approval?.type\r\n                      }}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div\r\n                  class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\r\n                >\r\n                  <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                    >&#xe9ae;</i\r\n                  > -->\r\n                  <div\r\n                    *ngIf=\"\r\n                      approval?.type?.toLowerCase() === 'sequential' &&\r\n                      approval?.approvers?.length < 2\r\n                    \"\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"\r\n                      approval?.approvers?.length > 1 &&\r\n                      approval?.type?.toLowerCase() === 'sequential'\r\n                    \"\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    1\r\n                  </div>\r\n                  <span\r\n                    class=\"chipName vx-fs-11 vx-label-txt\"\r\n                    [appTooltip]=\"approval?.approvers[0]?.member_name\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    >{{ approval?.approvers[0]?.member_name }}</span\r\n                  >\r\n                  <button\r\n                    *ngIf=\"approval?.approvers?.length > 1\"\r\n                    class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                    appPopover\r\n                    (click)=\"workflowPopover.popover()\"\r\n                    placement=\"right\"\r\n                  >\r\n                    +{{ approval?.approvers?.length - 1 }}\r\n                  </button>\r\n                </div>\r\n                <app-popover #workflowPopover [dontCloseonClick]=\"true\">\r\n                  <div class=\"wf-action-list\">\r\n                    <ul class=\"action-item\">\r\n                      <li\r\n                        *ngFor=\"\r\n                          let approver of approval?.approvers | slice : 1;\r\n                          let approvalIndex = index\r\n                        \"\r\n                      >\r\n                        <div class=\"avatar-card\">\r\n                          <span\r\n                            class=\"value\"\r\n                            [appTooltip]=\"approver?.member_name\"\r\n                            placement=\"bottom-left\"\r\n                            delay=\"0\"\r\n                            type=\"black\"\r\n                            [tooltipMandatory]=\"false\"\r\n                          >\r\n                            <!-- <i class=\"icons\">&#xe90d;</i> -->\r\n                            <span\r\n                              *ngIf=\"\r\n                                approval?.type?.toLowerCase() === 'sequential'\r\n                              \"\r\n                              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                              >{{\r\n                                approvalIndex + 1 ===\r\n                                approval?.approvers?.length - 1\r\n                                  ? \"Final\"\r\n                                  : approvalIndex + 2\r\n                              }}</span\r\n                            >\r\n                            {{ approver?.member_name }}\r\n                          </span>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </app-popover>\r\n              </div>\r\n\r\n              <!-- <div class=\"vx-d-flex vx-align-center\">\r\n                <button (click)=\"editLevelClicked(approval,approvalIndex)\"\r\n                  class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                </button>\r\n                <button (click)=\"deleteLevel(approvalIndex)\"\r\n                  class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\r\n                >\r\n                  <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\r\n                </button>\r\n              </div> -->\r\n            </div>\r\n          </ng-container>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\r\n              !policyApprovalFlag\r\n            \"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select or create an approval workflow for this policy.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Policy Access -->\r\n    <div\r\n      *ngIf=\"false\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"false\"\r\n      [class.disabled]=\"false\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">POLICY ACCESS</label>\r\n          </div>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Who should be able to view this policy?\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\">\r\n            <div\r\n              class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"'Samantha Jones'\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >Samantha Jones</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"policyAccessPopover.popover()\"\r\n                  placement=\"right\"\r\n                >\r\n                  +4\r\n                </button>\r\n              </div>\r\n              <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                      <div class=\"avatar-card\">\r\n                        <span\r\n                          class=\"value\"\r\n                          [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                          placement=\"bottom-left\"\r\n                          delay=\"0\"\r\n                          type=\"black\"\r\n                          [tooltipMandatory]=\"false\"\r\n                        >\r\n                          <i class=\"icons\">&#xe90d;</i>\r\n                          Harshvardhan Kariwala\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n              <button\r\n                class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              >\r\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"vx-mt-4 vx-mb-2\">\r\n              <app-cs-radio\r\n                ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n                  Everyone who has access to this Policy Category\r\n                </div></app-cs-radio\r\n              >\r\n              <app-cs-radio class=\"vx-mt-1\"\r\n                ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n                  Select users/groups\r\n                </div></app-cs-radio\r\n              >\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"vx-mt-2\">\r\n            <app-cs-switch\r\n              >ACCEPT SUGGESTIONS\r\n              <i\r\n                class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n                [appTooltip]=\"'Accept suggestions info text here...'\"\r\n                placement=\"bottom-right\"\r\n                delay=\"0\"\r\n                type=\"white\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              ></app-cs-switch\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Attestations -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"false\"\r\n      [class.disabled]=\"false\"\r\n      *ngIf=\"false\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"false\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/attestations.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"false\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n            <label class=\"vx-control-panel\">ATTESTATIONS</label>\r\n          </div>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the persons required to attest to this Policy\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"'Samantha Jones'\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >Samantha Jones</span\r\n              >\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"policyAttestationPopover.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +4\r\n              </button>\r\n            </div>\r\n            <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        Harshvardhan Kariwala\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"vx-mt-2\">\r\n            <app-cs-switch\r\n              >REQUIRES E-SIGNATURE FOR ATTESTATION\r\n              <i\r\n                class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n                [appTooltip]=\"\r\n                  'Requires e-signature for attestation info text here...'\r\n                \"\r\n                placement=\"bottom-right\"\r\n                delay=\"0\"\r\n                type=\"white\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              ></app-cs-switch\r\n            >\r\n          </div>\r\n\r\n          <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\r\n          <div\r\n            class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n            >\r\n              What is the attestation schedule for this<br />policy?\r\n            </div>\r\n            <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\r\n              SET A FREQUENCY\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\r\n              Every Wednesday by 11:59 pm\r\n            </div>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <label class=\"vx-control-panel vx-mt-2\"\r\n            >ASSESSMENT OF UNDERSTANDING</label\r\n          >\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n              of the policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\r\n            </div>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Approval Workflow -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      *ngIf=\"false\"\r\n      [class.active]=\"activeSelector === 'approvers'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'approvers' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length == 0 ||\r\n            activeSelector === 'approvers'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedApprovers?.length > 0 &&\r\n            activeSelector !== 'approvers'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div\r\n          class=\"vx-form-group approval-workflow\"\r\n          [class.disabled]=\"policyApprovalFlag !== 0\"\r\n        >\r\n          <label class=\"vx-control-panel\">\r\n            Approval workflow <span class=\"required\">*</span>\r\n            <button\r\n              (click)=\"\r\n                activateSelector('approvers', true);\r\n                addMoreLevels = true;\r\n                workflowType = 'SEQUENTIAL'\r\n              \"\r\n              class=\"button\"\r\n            >\r\n              Create a new Approval Workflow\r\n            </button>\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            [class.disabled]=\"approverWorkFlowList?.length == 0\"\r\n            *ngIf=\"\r\n              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\r\n              policyForm?.selectedApprovers.length == 0\r\n            \"\r\n          >\r\n            <cs-select\r\n              [ngModel]=\"selectedApprovalWorkflow\"\r\n              (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n              [placeholder]=\"'Select approval workflow for this policy'\"\r\n              name=\"selectedApprovalWorkflow\"\r\n              [setMaxWidth]=\"true\"\r\n            >\r\n              <cs-option\r\n                *ngFor=\"let data of approverWorkFlowList\"\r\n                [value]=\"data\"\r\n              >\r\n                {{ data.workflow_name }}\r\n              </cs-option>\r\n              <cs-option\r\n                [value]=\"-1\"\r\n                (click)=\"\r\n                  activateSelector('approvers', true);\r\n                  addMoreLevels = true;\r\n                  workflowType = 'SEQUENTIAL'\r\n                \"\r\n                >Create a new approval workflow</cs-option\r\n              >\r\n            </cs-select>\r\n          </div>\r\n          <ng-container\r\n            *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"selected\"\r\n              *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\r\n            >\r\n              <div class=\"workflow-label\">\r\n                <p class=\"title\">Level {{ i + 1 }}</p>\r\n                <p class=\"description\">{{ level.name }}</p>\r\n              </div>\r\n              <div class=\"vx-d-flex vx-align-center\">\r\n                <div class=\"chip-container\">\r\n                  <span\r\n                    class=\"chip\"\r\n                    *ngFor=\"\r\n                      let approver of level.approvers.slice(0, 1);\r\n                      let j = index\r\n                    \"\r\n                    ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\r\n                      j + 1\r\n                    }}</span\r\n                    >{{ approver.member_name }}</span\r\n                  >\r\n\r\n                  <button\r\n                    class=\"count\"\r\n                    *ngIf=\"level.approvers?.length > 1\"\r\n                    type=\"button\"\r\n                    appPopover\r\n                    (click)=\"labelName.popover()\"\r\n                    placement=\"right\"\r\n                  >\r\n                    +\r\n\r\n                    {{ level.approvers.slice(1).length }}\r\n                  </button>\r\n                  <app-popover #labelName [dontCloseonClick]=\"true\">\r\n                    <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                        <li\r\n                          *ngFor=\"\r\n                            let approver of level.approvers | slice : 1;\r\n                            let j = index\r\n                          \"\r\n                        >\r\n                          <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                              <i\r\n                                class=\"icons\"\r\n                                (click)=\"remove('approvers', approver, i)\"\r\n                                >&#xe90d;</i\r\n                              >\r\n                              <span\r\n                                class=\"step\"\r\n                                *ngIf=\"level.name == 'SEQUENTIAL'\"\r\n                              >\r\n                                {{\r\n                                  j == level.approvers.slice(1).length - 1\r\n                                    ? \"Final\"\r\n                                    : j + 2\r\n                                }}\r\n                              </span>\r\n                              {{ approver.member_name }}\r\n                            </span>\r\n                          </div>\r\n                        </li>\r\n                      </ul>\r\n                    </div>\r\n                  </app-popover>\r\n                </div>\r\n                <button\r\n                  class=\"edit\"\r\n                  type=\"button\"\r\n                  (click)=\"\r\n                    activateSelector('approvers', true, level.name);\r\n                    approversListIndex = i\r\n                  \"\r\n                >\r\n                  <i class=\"icons\">&#xe9ba;</i>Edit\r\n                </button>\r\n                <button\r\n                  class=\"close-btn\"\r\n                  (click)=\"remove('workflowLevel', level, i)\"\r\n                >\r\n                  <i class=\"icons\">&#xe90d;</i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              !policyForm?.selectedApprovers?.length &&\r\n              !policyApprovalFlag\r\n            \"\r\n            [appScrollInView]=\"true\"\r\n            class=\"error-message\"\r\n          >\r\n            Select or create an approval workflow for this policy.\r\n          </p>\r\n\r\n          <label\r\n            class=\"vx-control-panel\"\r\n            *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\r\n            ><button\r\n              class=\"button\"\r\n              (click)=\"\r\n                activateSelector('approvers', true);\r\n                addMoreLevels = true;\r\n                workflowType = 'SEQUENTIAL'\r\n              \"\r\n            >\r\n              + Add More Levels\r\n            </button></label\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Who / now Attestation -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'assignees'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'assignees' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedAssignees?.length == 0 ||\r\n            activeSelector === 'assignees'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedAssignees?.length > 0 &&\r\n            activeSelector !== 'assignees'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Attestation</label>\r\n          <div\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\"\r\n            *ngIf=\"\r\n              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\r\n              (policyForm?.selectedAssignees?.length == 0 &&\r\n                groupEnabled &&\r\n                policyForm?.selectedGroupAssignee.length == 0)\r\n            \"\r\n            (click)=\"activateSelector('assignees', true)\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select the persons responsible for attesting this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n            *ngIf=\"\r\n              policyForm?.selectedAssignees?.length > 0 ||\r\n              policyForm?.selectedGroupAssignee?.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)\r\n                \"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('assignees', assignee)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"assignee.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ assignee.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"assigneePopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.selectedAssignees?.length > 1\"\r\n              >\r\n                +{{ policyForm?.selectedAssignees?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n            <ng-container *ngIf=\"groupEnabled\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove('assignees', policyForm?.selectedAssignees[0])\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.selectedAssignees[0]?.employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"UserPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.selectedAssignees.length > 1\"\r\n                >\r\n                  +{{ policyForm?.selectedAssignees.length - 1 }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.selectedAssignees.length > 0 &&\r\n                  policyForm?.selectedGroupAssignee.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove(\r\n                      'groupAssignees',\r\n                      policyForm?.selectedGroupAssignee[0]\r\n                    )\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"\r\n                    policyForm?.selectedGroupAssignee[0]?.group_name\r\n                  \"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.selectedGroupAssignee[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"group.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\r\n                >\r\n                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </ng-container>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              (click)=\"activateSelector('assignees', true)\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              ((policyForm?.selectedAssignees?.length == 0 &&\r\n                policyForm?.frequency_details &&\r\n                !groupEnabled) ||\r\n                (policyForm?.selectedAssignees?.length == 0 &&\r\n                  policyForm.selectedGroupAssignee.length == 0 &&\r\n                  policyForm?.frequency_details &&\r\n                  groupEnabled))\r\n            \"\r\n            id=\"whovalidatemsg\"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select the persons required to attest to this Policy.\r\n          </p>\r\n          <app-cs-switch\r\n            [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n            [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\r\n            class=\"who-toggle\"\r\n            >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, the readers will be required to attest this policy using their electronic signature.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            ></app-cs-switch\r\n          >\r\n          <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ assignee.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #UserPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ assignee.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #group [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.selectedGroupAssignee | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n\r\n          <!-- overseer -->\r\n          <app-popover #overseerPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let overseer of policyForm?.CCEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ overseer?.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.CCGroupEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data?.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <!-- overseer end -->\r\n\r\n          <!-- overseer fail start -->\r\n          <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let overseer of policyForm?.CCFailEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ overseer?.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let data of policyForm?.CCFailEmailGroup | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        class=\"icons\"\r\n                        (click)=\"remove('ccGroupFailEmail', data)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ data?.group_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <!-- overseer fail end -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- When -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'frequency'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'frequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        *ngIf=\"false\"\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.frequency_details\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            !policyForm?.frequency_details || activeSelector === 'frequency'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.frequency_details && activeSelector !== 'frequency'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">When?</label>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.frequency_details == ''\"\r\n            class=\"select button-sec\"\r\n          >\r\n            <div\r\n              class=\"custom-input frequency-custom-input\"\r\n              (click)=\"activateSelector('frequency', true)\"\r\n            >\r\n              {{ frequencyPlaceholder }}\r\n            </div>\r\n\r\n            <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\r\n              Set A frequency\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"policyForm?.frequency_details != ''\"\r\n            class=\"selected button-sec\"\r\n          >\r\n            <span class=\"chip\">{{ frequencyPlaceholder }}</span>\r\n            <button\r\n              *ngIf=\"activeSelector !== 'frequency'\"\r\n              type=\"button\"\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('frequency', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i>Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              ((policyForm?.selectedAssignees?.length > 0 &&\r\n                !policyForm?.frequency_details &&\r\n                !groupEnabled) ||\r\n                ((policyForm?.selectedAssignees?.length > 0 ||\r\n                  policyForm?.selectedGroupAssignee?.length > 0) &&\r\n                  !policyForm?.frequency_details &&\r\n                  groupEnabled))\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select an attestation schedule for this policy.\r\n          </p>\r\n\r\n          <!-- <label class=\"vx-control-panel\">Effective Date</label>\r\n                  <div class=\"date-time-picker\">\r\n                      <div class=\"picker-group\">\r\n                          <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\r\n                              [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n                          <i class=\"icons\">&#xe92d;</i>\r\n                          <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\r\n                              [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\r\n                          </dp-date-picker>\r\n                          <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n                      </div>\r\n                  </div> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Checkpoints / Assessment of Understanding -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"true\"\r\n      [class.active]=\"activeSelector === 'checkpoints'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'checkpoints' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        *ngIf=\"false\"\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.checkpointDetails?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.checkpointDetails?.length == 0 ||\r\n            activeSelector === 'checkpoints'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.checkpointDetails?.length > 0 &&\r\n            activeSelector !== 'checkpoints'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">\r\n            Assessment of Understanding\r\n            <!-- <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n          </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n          >\r\n            <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\r\n            <div class=\"custom-input\">\r\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n              of the policy.\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\r\n          >\r\n            <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\r\n\r\n                      <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\r\n\r\n                      <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\r\n\r\n                    </div> -->\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <span class=\"chipName vx-fs-11 vx-label-txt\">{{\r\n                policyForm?.checkpointDetails?.length +\r\n                  (policyForm?.checkpointDetails?.length > 1\r\n                    ? \" Questions\"\r\n                    : \" Question\")\r\n              }}</span>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('checkpoints', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n                  <div class=\"wf-action-list\">\r\n                      <ul class=\"action-item\">\r\n                          <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\r\n                              <div class=\"avatar-card\">\r\n                                  <span class=\"value\">\r\n                                      <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\r\n                                      {{ checkpoint?.question }}\r\n                                  </span>\r\n                              </div>\r\n                          </li>\r\n                      </ul>\r\n                  </div>\r\n              </app-popover> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Risk Classification -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      *ngIf=\"showRiskClassification && false\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n          alt=\"im\"\r\n          *ngIf=\"!policyForm?.riskRating\"\r\n        />\r\n\r\n        <svg\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n          *ngIf=\"policyForm?.riskRating\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Risk Classification</label>\r\n          <div class=\"classification\">\r\n            <label\r\n              class=\"low\"\r\n              *ngFor=\"let class of riskClassification\"\r\n              [ngClass]=\"[class.class]\"\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name=\"classification\"\r\n                [value]=\"class.value\"\r\n                [checked]=\"policyForm?.riskRating === class.value\"\r\n                [(ngModel)]=\"policyForm.riskRating\"\r\n              />\r\n              <span>{{ class.name }}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Responsibility Center -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addResponsibilityCenters\"\r\n      [class.active]=\"activeSelector === 'rc'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'rc' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Responsibility Center</label>\r\n          <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('rc', true)\"\r\n              placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('rc', rc)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"rc.item_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ rc.item_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"rcPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.selectedRCs?.length > 1\"\r\n              >\r\n                +{{ policyForm?.selectedRCs?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('rc', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let rc of policyForm?.selectedRCs | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\r\n                      {{ rc.item_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Version -->\r\n    <div\r\n      *ngIf=\"policyForm.addVersion\"\r\n      class=\"form-group-row\"\r\n      [class.disabled]=\"\r\n        activeSelector && sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\r\n        <img\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n          alt=\"name\"\r\n          *ngIf=\"!policyForm.policy_version\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.policy_version\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">VERSION</label>\r\n          <input\r\n            [(ngModel)]=\"policyForm.policy_version\"\r\n            (change)=\"onVersion($event)\"\r\n            type=\"text\"\r\n            placeholder=\"Specify the policy version.\"\r\n          />\r\n          <p\r\n            *ngIf=\"!isVersionValid\"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            {{ versionErrorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Reviewer -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addReviewers && false\"\r\n      [class.active]=\"activeSelector === 'reviewer'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'reviewer' &&\r\n        activeSelector !== 'reviewerFrequency' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            policyForm?.selectedReviewers?.length == 0 ||\r\n            activeSelector === 'reviewer'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            policyForm?.selectedReviewers?.length > 0 &&\r\n            activeSelector !== 'reviewer'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Reviewer </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n              placeholder=\"Select the person responsible for reviewing this policy\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('reviewer', reviewer)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"reviewer.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ reviewer.member_name }}</span\r\n                >\r\n              </ng-container>\r\n            </div>\r\n\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('reviewer', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              policyForm?.selectedReviewers?.length == 0 &&\r\n              policyForm?.review_frequency_details\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select a reviewer for this policy.\r\n          </p>\r\n\r\n          <label class=\"vx-control-panel\">When? </label>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n            class=\"select button-sec\"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n              [placeholder]=\"reviewerFrequencyPlaceholder\"\r\n              readonly\r\n            />\r\n            <button\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n              type=\"button\"\r\n            >\r\n              Set A frequency\r\n            </button>\r\n          </div>\r\n          <div\r\n            *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n            class=\"selected button-sec\"\r\n          >\r\n            <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\r\n            <button\r\n              *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n              type=\"button\"\r\n              class=\"edit\"\r\n              (click)=\"activateSelector('reviewerFrequency', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i>Edit\r\n            </button>\r\n          </div>\r\n          <p\r\n            *ngIf=\"\r\n              submitted &&\r\n              policyForm?.selectedReviewers?.length > 0 &&\r\n              !policyForm?.review_frequency_details\r\n            \"\r\n            class=\"error-message\"\r\n            [appScrollInView]=\"true\"\r\n          >\r\n            Select the review schedule for this policy.\r\n          </p>\r\n\r\n          <app-format-and-evidence\r\n            (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\r\n            #formatEvidence\r\n            [mode]=\"'policyReviewer'\"\r\n            [organization_id]=\"organization_id\"\r\n            [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\r\n          >\r\n          </app-format-and-evidence>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addOverseers\"\r\n      [class.active]=\"\r\n        activeSelector === 'ccEmail' || activeSelector === 'ccFail'\r\n      \"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'ccEmail' &&\r\n        activeSelector !== 'ccFail' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"\r\n          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\r\n        \"\r\n      >\r\n        <img\r\n          *ngIf=\"\r\n            (policyForm?.CCFailEmail?.length == 0 &&\r\n              policyForm?.CCEmail?.length == 0) ||\r\n            activeSelector === 'ccEmail' ||\r\n            activeSelector === 'ccFail'\r\n          \"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"\r\n            (policyForm?.CCFailEmail?.length > 0 ||\r\n              policyForm?.CCEmail?.length > 0) &&\r\n            activeSelector !== 'ccEmail' &&\r\n            activeSelector !== 'ccFail'\r\n          \"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">Overseer </label>\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"\r\n              policyForm?.CCEmail?.length == 0 &&\r\n              policyForm?.CCGroupEmail.length == 0\r\n            \"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('ccEmail', true)\"\r\n              placeholder=\"Who should have oversight of this policy?\"\r\n              readonly\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"\r\n              policyForm?.CCEmail?.length > 0 ||\r\n              policyForm?.CCGroupEmail.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccEmail', ccEmail)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"ccEmail.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ ccEmail.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"ccEmailPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n              >\r\n                +{{ policyForm?.CCEmail?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCEmail[0].employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"overseerPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.CCEmail.length > 0 &&\r\n                  policyForm?.CCGroupEmail?.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"overseerGroup.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCGroupEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('ccEmail', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n\r\n          <div\r\n            class=\"select\"\r\n            *ngIf=\"\r\n              policyForm?.CCFailEmail?.length == 0 &&\r\n              policyForm?.CCFailEmailGroup?.length == 0\r\n            \"\r\n          >\r\n            <input\r\n              type=\"text\"\r\n              (click)=\"activateSelector('ccFail', true)\"\r\n              placeholder=\"Who should be notified if the policy is not attested on time?\"\r\n              readonly\r\n            />\r\n          </div>\r\n\r\n          <div\r\n            class=\"selected\"\r\n            *ngIf=\"\r\n              policyForm?.CCFailEmail?.length > 0 ||\r\n              policyForm?.CCFailEmailGroup?.length > 0\r\n            \"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"!groupEnabled\"\r\n            >\r\n              <ng-container\r\n                *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccFail', ccFail)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"ccFail.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ ccFail.employee_name }}</span\r\n                >\r\n              </ng-container>\r\n              <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                appPopover\r\n                (click)=\"ccFailPopover.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n              >\r\n                +{{ policyForm?.CCFailEmail?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n\r\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n                  appPopover\r\n                  (click)=\"overseerFailPopover.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCFailEmail?.length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <div\r\n                class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n                *ngIf=\"\r\n                  policyForm?.CCFailEmail?.length > 0 &&\r\n                  policyForm?.CCFailEmailGroup?.length > 0\r\n                \"\r\n              >\r\n                &\r\n              </div>\r\n\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n                *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\r\n              >\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  (click)=\"\r\n                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\r\n                  \"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\r\n                >\r\n                <button\r\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                  appPopover\r\n                  (click)=\"overseerFailGroup.popover()\"\r\n                  placement=\"right\"\r\n                  *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\r\n                >\r\n                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <button\r\n              class=\"edit\"\r\n              type=\"button\"\r\n              (click)=\"activateSelector('ccFail', true)\"\r\n            >\r\n              <i class=\"icons\">&#xe9ba;</i> Edit\r\n            </button>\r\n          </div>\r\n          <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let ccEmail of policyForm?.CCEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ ccEmail.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n          <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\r\n            <div class=\"wf-action-list\">\r\n              <ul class=\"action-item\">\r\n                <li\r\n                  *ngFor=\"\r\n                    let ccFail of policyForm?.CCFailEmail | slice : 1;\r\n                    let j = index\r\n                  \"\r\n                >\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ ccFail.employee_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </app-popover>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Related Documents -->\r\n    <div\r\n      class=\"form-group-row\"\r\n      [appScrollInView]=\"scrollToBottom\"\r\n      *ngIf=\"policyForm.addAssociatedDocuments\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n    >\r\n      <div class=\"left\">\r\n        <img\r\n          *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n          alt=\"im\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\r\n          <app-format-and-evidence\r\n            (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\r\n            [mode]=\"'policy'\"\r\n            [organization_id]=\"organization_id\"\r\n            [formatEvidanceData]=\"policyForm?.associatedDocuments\"\r\n          ></app-format-and-evidence>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Link Programs & Responsibilities -->\r\n    <div\r\n      *ngIf=\"policyForm?.addLinkProgram\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'linkProgram'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'linkProgram' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div\r\n        class=\"left\"\r\n        [class.checked]=\"\r\n          policyForm?.programSelectedValues?.program?.category_id\r\n        \"\r\n      >\r\n        <img\r\n          *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\"\r\n            >LINK PROGRAMS & RESPONSIBILITIES</label\r\n          >\r\n          <div\r\n            *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n            (click)=\"activateSelector('linkProgram', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select Programs & responsibilities that are<br />associated with\r\n              this policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n            *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i\r\n                (click)=\"\r\n                  remove('linkProgram', policyForm?.programSelectedValues)\r\n                \"\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ policyForm?.programSelectedValues?.program?.name }}</span\r\n              >\r\n              <!-- <button\r\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                appPopover\r\n                (click)=\"programResponsibilityPopover.popover()\"\r\n                placement=\"right\"\r\n              >\r\n                +4\r\n              </button> -->\r\n            </div>\r\n            <app-popover\r\n              #programResponsibilityPopover\r\n              [dontCloseonClick]=\"true\"\r\n            >\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"\r\n                          'Reporting information security weaknesses'\r\n                        \"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        Reporting information security weaknesses\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n              (click)=\"activateSelector('linkProgram', true)\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Link Assessment -->\r\n    <div\r\n      *ngIf=\"policyForm.addLinkAssessment\"\r\n      class=\"form-group-row\"\r\n      [class.active]=\"activeSelector === 'isAssessment'\"\r\n      [class.disabled]=\"\r\n        activeSelector &&\r\n        activeSelector !== 'isAssessment' &&\r\n        sideSelectorElements.includes(activeSelector)\r\n      \"\r\n    >\r\n      <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\r\n        <img\r\n          *ngIf=\"!policyForm?.assessment?.length\"\r\n          src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n          alt=\"\"\r\n        />\r\n\r\n        <svg\r\n          *ngIf=\"policyForm?.assessment?.length\"\r\n          class=\"checkIcon\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 52 52\"\r\n        >\r\n          <circle\r\n            class=\"checkIcon__circle\"\r\n            cx=\"26\"\r\n            cy=\"26\"\r\n            r=\"25\"\r\n            fill=\"none\"\r\n          />\r\n          <path\r\n            class=\"checkIcon__check\"\r\n            fill=\"none\"\r\n            d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"vx-form-group\">\r\n          <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\r\n          <div\r\n            *ngIf=\"policyForm?.assessment?.length === 0\"\r\n            (click)=\"activateSelector('isAssessment', true)\"\r\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n            [class.disabled]=\"false\"\r\n          >\r\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n              Select assessments that are associated with this<br />policy.\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"policyForm?.assessment?.length > 0\"\r\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n          >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            >\r\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n                }}</span\r\n              >\r\n            </div>\r\n            <app-popover\r\n              #programResponsibilityPopover\r\n              [dontCloseonClick]=\"true\"\r\n            >\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li\r\n                    *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\r\n                  >\r\n                    <div class=\"avatar-card\">\r\n                      <span\r\n                        class=\"value\"\r\n                        [appTooltip]=\"\r\n                          assessment?.assessmentDetails?.assessment_name\r\n                        \"\r\n                        placement=\"bottom-left\"\r\n                        delay=\"0\"\r\n                        type=\"black\"\r\n                        [tooltipMandatory]=\"false\"\r\n                      >\r\n                        <i class=\"icons\">&#xe90d;</i>\r\n                        {{ assessment?.assessmentDetails?.assessment_name }}\r\n                      </span>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </app-popover>\r\n            <button\r\n              (click)=\"activateSelector('isAssessment', true)\"\r\n              class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n            >\r\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <app-checkbox-list\r\n    [config]=\"categoryConfig\"\r\n    [twoColumn]=\"false\"\r\n    [itemsList]=\"categoryList\"\r\n    [selectedItems]=\"policyForm.selectedCategories\"\r\n    [identifierKey]=\"'_id'\"\r\n    [displayKey]=\"'item_name'\"\r\n    [tooltipKey]=\"'item_name'\"\r\n    *ngIf=\"activeSelector === 'category'\"\r\n    (saveList)=\"saveSelectedList('category', $event)\"\r\n    (closeList)=\"disableSelector()\"\r\n  >\r\n  </app-checkbox-list>\r\n  <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\r\n  [itemsList]=\"\"\r\n  [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CC')\">\r\n</app-checkbox-list> -->\r\n\r\n  <app-responsibility-centers-list\r\n    *ngIf=\"activeSelector === 'rc'\"\r\n    [responsibilityCentersList]=\"rcList\"\r\n    [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\r\n    [rcIdKey]=\"'item_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n    (closeRcList)=\"disableSelector()\"\r\n  >\r\n  </app-responsibility-centers-list>\r\n\r\n  <app-users-radio-list\r\n    *ngIf=\"activeSelector === 'reviewer'\"\r\n    [itemEmailKey]=\"'member_email'\"\r\n    [usersList]=\"allReviewers\"\r\n    [headerText]=\"'Select a Reviewer'\"\r\n    [selectedUsers]=\"policyForm.selectedReviewers\"\r\n    [userIdKey]=\"'member_id'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-users-radio-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\r\n    [usersList]=\"overseersList\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [selectedUsers]=\"policyForm.CCEmail\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"overseersList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [selectedUsers]=\"policyForm.CCEmail\"\r\n    [selectedGroups]=\"policyForm.CCGroupEmail\"\r\n    (save)=\"saveSelectedList('ccEmail', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\r\n    [usersList]=\"overseersList\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [selectedUsers]=\"policyForm.CCFailEmail\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"overseersList\"\r\n    [groupList]=\"overseerGroupsList\"\r\n    [selectedUsers]=\"policyForm.CCFailEmail\"\r\n    [selectedGroups]=\"policyForm.CCFailEmailGroup\"\r\n    (save)=\"saveSelectedList('ccFail', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-group-users-list\r\n    *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\r\n    [usersList]=\"assigneesList\"\r\n    [groupsList]=\"groupsList\"\r\n    [selectedUsers]=\"policyForm.selectedAssignees\"\r\n    [userIdKey]=\"'my_member_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n  >\r\n  </app-group-users-list>\r\n\r\n  <user-group-list\r\n    *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\r\n    [groupEnabled]=\"true\"\r\n    [userlist]=\"ownerlist\"\r\n    [groupList]=\"groupsList\"\r\n    (save)=\"saveSelectedList('assignees', $event)\"\r\n    (cancel)=\"disableSelector()\"\r\n    [selectedGroups]=\"policyForm.selectedGroupAssignee\"\r\n    [selectedUsers]=\"policyForm.selectedAssignees\"\r\n    [featureflag]=\"groupEnabled\"\r\n  >\r\n  </user-group-list>\r\n\r\n  <app-owner-list\r\n    *ngIf=\"activeSelector === 'approvers' && false\"\r\n    [listHeading]=\"'Select Approvers'\"\r\n    [singularText]=\"'User selected'\"\r\n    [pluralText]=\"'Users selected'\"\r\n    [usersList]=\"allApprovers\"\r\n    [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"\r\n      addMoreLevels\r\n        ? []\r\n        : policyForm.selectedApprovers[approversListIndex].approvers\r\n    \"\r\n    [userIdKey]=\"'member_id'\"\r\n    [itemEmailKey]=\"'member_email'\"\r\n    [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n    (closeUsersList)=\"disableSelector()\"\r\n    [mode]=\"mode\"\r\n    [reviewerWorkflowType]=\"workflowType\"\r\n    (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n    [workflowList]=\"workflowList\"\r\n    [workflowText]=\"'Approval Workflow'\"\r\n  >\r\n  </app-owner-list>\r\n\r\n  <app-frequency-container\r\n    *ngIf=\"activeSelector === 'frequency'\"\r\n    [mode]=\"'policy'\"\r\n    [frequencyDetails]=\"frequencyDetails\"\r\n    (selectedFrequency)=\"frequencyData($event)\"\r\n    [feature]=\"feature\"\r\n    [pageType]=\"'policy'\"\r\n    (closeFrequency)=\"disableSelector()\"\r\n  ></app-frequency-container>\r\n\r\n  <app-frequency-container\r\n    *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [mode]=\"'reviewerFrequency'\"\r\n    [frequencyDetails]=\"reviewerFrequencyDetails\"\r\n    (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n    [feature]=\"feature\"\r\n    [pageType]=\"'policy'\"\r\n    (closeFrequency)=\"disableSelector()\"\r\n  ></app-frequency-container>\r\n\r\n  <vc-link-program\r\n    *ngIf=\"activeSelector === 'linkProgram'\"\r\n    (close)=\"disableSelector()\"\r\n    [policy]=\"policyForm\"\r\n    [selectedProgram]=\"policyForm?.programSelectedValues\"\r\n    [mode]=\"mode\"\r\n    [selectedLinkProgram]=\"selectedLinkProgram\"\r\n    (changeTab)=\"changeTab('linkedPrograms')\"\r\n    (updatedProgramDetails)=\"updatedProgramDetails($event)\"\r\n  >\r\n  </vc-link-program>\r\n\r\n  <app-checkpoints-policy-container\r\n    (closeCheckPoint)=\"disableSelector()\"\r\n    [checkpointData]=\"policyForm?.checkpointDetails\"\r\n    [requiredPoint]=\"policyForm?.passingMarks\"\r\n    *ngIf=\"activeSelector === 'checkpoints'\"\r\n    (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\r\n  ></app-checkpoints-policy-container>\r\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n  <app-approval-workflow\r\n    *ngIf=\"enableApprovalWorkflow\"\r\n    [selectedCategory]=\"policyForm?.selectedCategories\"\r\n    [approverWorkFlowList]=\"approverWorkFlowList\"\r\n    [allApprovers]=\"allApprovers\"\r\n    (listCancelClicked)=\"listCancelClicked($event)\"\r\n    (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\r\n    (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\r\n    [editApprovalWorkflow]=\"editApprovalWorkflow\"\r\n    [createApprovalClick]=\"createApprovalClick\"\r\n    (closeCreateClicked)=\"closeClickedCreateForm()\"\r\n    [editWorkflowLevel]=\"editWorkflowLevel\"\r\n  ></app-approval-workflow>\r\n  <!-- <app-select-approvers></app-select-approvers> -->\r\n\r\n  <!-- <app-policy-access></app-policy-access> -->\r\n</ng-container>\r\n<ng-container *ngIf=\"showCreateDocuments\">\r\n  <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\r\n   [organization_id]=\"organization_id\"\r\n   [member_obj_id]=\"member_obj_id\"\r\n   [userInfo]=\"userInfo\"\r\n   [policyId]=\"policyId\"\r\n   [policyName]=\"policyForm.policyName\"\r\n   (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n   (editPolicy)=\"editPolicyFromDocuments()\"\r\n   ></app-create-documents> -->\r\n  <lib-document-section\r\n    *ngIf=\"showCreateDocuments\"\r\n    [organization_id]=\"organization_id\"\r\n    [member_obj_id]=\"member_obj_id\"\r\n    [userInfo]=\"userInfo\"\r\n    [policyId]=\"policyId\"\r\n    [policyName]=\"policyForm.policyName\"\r\n    (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n    (editPolicy)=\"editPolicyFromDocuments()\"\r\n  ></lib-document-section>\r\n</ng-container>\r\n\r\n<app-assessment-list\r\n  *ngIf=\"activeSelector === 'isAssessment'\"\r\n  [program_ids]=\"''\"\r\n  [isEdit]=\"policyForm?.assessment?.length\"\r\n  (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\r\n  [selectedAssessment]=\"policyForm?.assessment[0]\"\r\n  (onAssessmentSelect)=\"\r\n    onAssessmentSelect($event); saveSelectedList('isAssessment', false)\r\n  \"\r\n></app-assessment-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'approvers' && false\"\r\n  [listHeading]=\"'Select Approvers'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allApprovers\"\r\n  [showWorkflow]=\"true\"\r\n  [selectedUsers]=\"\r\n    addMoreLevels\r\n      ? []\r\n      : policyForm.selectedApprovers[approversListIndex].approvers\r\n  \"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n  (closeUsersList)=\"disableSelector()\"\r\n  [mode]=\"mode\"\r\n  [reviewerWorkflowType]=\"workflowType\"\r\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n  [workflowList]=\"workflowList\"\r\n  [workflowText]=\"'Approval Workflow'\"\r\n>\r\n</app-owner-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'owners'\"\r\n  [listHeading]=\"'Select Owner(s)'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allApprovers\"\r\n  [showWorkflow]=\"false\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('owners', $event)\"\r\n  (closeUsersList)=\"disableSelector()\"\r\n  [mode]=\"mode\"\r\n  [selectedUsers]=\"policyForm?.policy_owners ?? []\"\r\n>\r\n</app-owner-list>\r\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\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}\n", "@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\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:\"Poppins\",sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;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-top:0}.left .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}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:\"Poppins\";line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:\"Poppins\";width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:\"Poppins\"}::ng-deep marx-editor{display:block}::ng-deep marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep marx-editor .editor-container:hover,::ng-deep marx-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep marx-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep marx-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep marx-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep marx-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep marx-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"]
                 },] }
     ];
@@ -28445,7 +28453,7 @@
     ProgramListingComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-program-listing',
-                    template: "<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"!showCategories && !hideProgramsList\">\r\n    <div class=\"program-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Program</div>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n        <div class=\"filter-card-row\">\r\n            <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTab('regulations')\">\r\n                <div class=\"left\">\r\n                    <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n                    <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n                        {{programData?.SelectedRegulationProgramsCount}}\r\n                        {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allRegulationProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTab('standards')\">\r\n                <div class=\"left\">\r\n                    <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n                    <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n                        {{programData?.SelectedStandardProgramsCount}}\r\n                        {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allStandardProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'internal_controls'\"\r\n                (click)=\"changeTab('internal_controls')\">\r\n                <div class=\"left\">\r\n                    <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n                    <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n                        {{programData?.SelectedInternalControlsProgramsCount}}\r\n                        {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allInternalControlsProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTab('others')\">\r\n                <div class=\"left\">\r\n                    <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n                    <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n                        {{programData?.SelectedOthersProgramsCount}}\r\n                        {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allOthersProgramsCount}}</span>\r\n            </div>\r\n        </div>\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchProgram (keyup.enter)=\"handleSearch($event.target.value)\"\r\n                placeholder=\"Search Programs\" />\r\n        </div>\r\n        <!-- mode === 'EDIT' -->\r\n        <div *ngIf=\"mode === 'EDIT' && programData?.AllViewOnlyProgramCount\" class=\"program-listing-tab vx-d-flex vx-align-center\">\r\n            <button (click)=\"setProgramSubTab('PROGRAMS')\" class=\"vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"programSubTab === 'PROGRAMS'\">PROGRAMS <span class=\"count vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{programData?.AllProgramsCount}}</span></button>\r\n            <button (click)=\"setProgramSubTab('OTHER_PROGRAMS')\" class=\"vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"programSubTab === 'OTHER_PROGRAMS'\">OTHER PROGRAMS <span class=\"count vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{programData?.AllViewOnlyProgramCount}}</span></button>\r\n        </div>\r\n        <app-pagination *ngIf=\"programData.totalPages > 1\" [start]=\"programData.from\" [end]=\"programData.to\" [total]=\"programData.totalRecords\" [pageCount]=\"programData.totalPages\" [currentPage]=\"programData.currentPage\" (selectedPage)=\"changePage($event,'program')\"></app-pagination>\r\n        <div class=\"program-listing-part vx-mb-4\" [class.with-category-list]=\"!showCategories && !hideProgramsList\" [class.with-pagination]=\"programData.totalPages > 1\">\r\n            <app-no-data *ngIf=\"programData?.data?.length===0 && !loader\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <div class=\"program-listing-item\" [class.active]=\"showCategories && currentProgram?._id == program?._id\" *ngFor=\"let program of programData.data;let i = index\" [class.final-select]=\"false\">\r\n                <!-- after category was select & user move to back and edit then final-select class was show -->\r\n                <!-- [class.disabled]=\"currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') && programSubTab !== 'OTHER_PROGRAMS'\" -->\r\n                <div class=\"table-row main-list\" [class.active]=\"selectedProgramsId?.includes(program?._id)\" [class.disabled]=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag') ? false : (currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') && programSubTab !== 'OTHER_PROGRAMS')\">\r\n                    <div class=\"table-column serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n                        <!-- [disabled]=\"currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM')\" -->\r\n                        <app-cs-checkbox\r\n                            *ngIf=\"programSubTab !== 'OTHER_PROGRAMS'\"\r\n                            [disabled]=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag') ? false : (currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM'))\"\r\n                            [ngValue]=\"selectedProgramsId?.includes(program?._id)\"\r\n                            (ngValueChange)=\"selectProgram($event,program)\"\r\n                        ></app-cs-checkbox>\r\n                        <!-- <app-cs-radio [name]=\"'t'\" [checked]=\"currentProgram?._id == program?._id\" (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio> -->\r\n                    </div>\r\n                    <div class=\"table-column name\">\r\n                        <div class=\"name-inner\">\r\n                            <div class=\"name-with-count\">\r\n                                <div class=\"value\" [appTooltip]=\"program?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"table-column primary-program\" >\r\n                        <ng-container *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\">\r\n                            <app-cs-switch\r\n                                *ngIf=\"!(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') || currentProgram?._id === program?._id\"\r\n                                [disabled]=\"currentProgram?._id === program?._id\"\r\n                                [ngValue]='currentProgram?._id === program?._id' \r\n                                (ngValueChange)=\"setPrimaryProgram($event, program)\"\r\n                            >{{currentProgram?._id === program?._id ? 'PRIMARY PROGRAM' : 'SET AS PRIMARY PROGRAM'}}</app-cs-switch>\r\n                        </ng-container>\r\n                    </div>\r\n                    <!-- <div class=\"table-column action\">\r\n                        <button class=\"arrow\" *ngIf=\"program?.child_id?.length\" [class.disabled]=\"false\"\r\n                            [disabled]=\"false\">\r\n                            <i *ngIf=\"!(showCategories && currentProgram?._id == program?._id)\"\r\n                                (click)=\"selectProgram($event,program)\" class=\"icons\">&#xe970;</i>\r\n                            <i *ngIf=\"showCategories && currentProgram?._id == program?._id\" class=\"icons\">&#xe9e8;</i>\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <app-floating-bar [selectedData]=\"(selectedProgramsDetail?.length) ? selectedProgramsDetail : []\" [displayElementKey]=\"'name'\"\r\n            [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n            (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true\" (closeList)=\"close()\" [defaultSelected]=\"currentProgram\" [nonRemovableUsersList]=\"(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') ? viewOnlyProgramsCategoryId : [currentProgram?.category_id]\" [elementId]=\"'category_id'\">\r\n        </app-floating-bar>\r\n    </div>\r\n    <ng-container *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\">\r\n        <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n            <div class=\"confirmation-top\">\r\n                <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</div>\r\n            </div>\r\n            <div class=\"confirmation-bottom\">\r\n                <div class=\"message\">Are you sure you would like to proceed?</div>\r\n                <div class=\"button-group\">\r\n                    <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\r\n                    <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"program-listing-confirmation\" *ngIf=\"isPrimaryConfirmation && !isPrimaryUnchecked\">\r\n            <div class=\"confirmation-top\">\r\n                <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                <div class=\"text\" [innerHTML]=\"primaryConfirmationMessage\"></div>\r\n            </div>\r\n            <div class=\"confirmation-bottom\">\r\n                <div class=\"message\">Are you sure you would like to proceed?</div>\r\n                <div class=\"button-group\">\r\n                    <button class=\"no-btn\" (click)=\"updatePrimaryProgram(false)\">NO</button>\r\n                    <button class=\"yes-btn\" (click)=\"updatePrimaryProgram(true)\">YES</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"program-listing-confirmation error-confirmation\" *ngIf=\"isPrimaryUnchecked\">\r\n            <div class=\"confirmation-top\">\r\n                <div class=\"vx-d-flex vx-align-center\">\r\n                    <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                    <div class=\"text vx-pr-4\">You cannot deselect this Program since this is the <em>Primary Program</em> for this responsibility. To proceed, first select another Program as the <em>Primary Program</em>.</div>\r\n                </div>\r\n                <button class=\"ok-btn\" (click)=\"updatePrimaryProgram(false)\">OK</button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <!-- <app-floating-bar [selectedData]=\"(currentProgram?.category_id)?[currentProgram]:[]\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n        (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true \" (closeList)=\"close()\">\r\n    </app-floating-bar> -->\r\n\r\n    <!-- ((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true  -->\r\n    <app-floating-bar *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" [selectedData]=\"(selectedProgramsDetail?.length) ? selectedProgramsDetail : []\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n        (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true\" (closeList)=\"close()\" [elementId]=\"'category_id'\">\r\n    </app-floating-bar>\r\n\r\n    <app-floating-bar *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" [selectedData]=\"(selectedProgramsDetail?.length) ? selectedProgramsDetail : []\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n        (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true\" (closeList)=\"close()\" [defaultSelected]=\"currentProgram\" [nonRemovableUsersList]=\"(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') ? viewOnlyProgramsCategoryId : [currentProgram?.category_id]\" [elementId]=\"'category_id'\">\r\n    </app-floating-bar>\r\n\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n</div>\r\n<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"showCategories || hideProgramsList\">\r\n    <div class=\"program-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\r\n            <button class=\"back-btn vx-fs-16 vx-p-0 vx-mr-2\" (click)=\"backToPrograms()\"><i class=\"icons\">&#xe91d;</i></button>\r\n            <!-- <span *ngIf=\"currentProgram?.name\"> {{currentProgram?.name}} > </span> -->\r\n             Program  >  Select Program Categories\r\n        </div>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchCategory (keyup.enter)=\"categorySearch($event.target.value)\"\r\n                placeholder=\"Search Categories\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"categoryData.totalPages > 1\" class=\"category-pagination\" [start]=\"categoryData.from\" [end]=\"categoryData.to\" [total]=\"categoryData.totalRecords\" [pageCount]=\"categoryData.totalPages\" [currentPage]=\"categoryData.currentPage\" (selectedPage)=\"changePage($event,'category')\"></app-pagination>\r\n        <div class=\"program-listing-part vx-mb-4\" [class.with-category-pagination]=\"categoryData.totalPages > 1\">\r\n            <app-no-data *ngIf=\"categoryData?.data?.length===0 && !loader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <ng-container *ngIf=\"!loader && categoryData.data?.length\">\r\n                <ng-container *ngIf=\"false\">\r\n                    <div class=\"selected-area\" *ngIf=\"!loader && (currentProgram?.name ? categoryData.data?.length : programData?.data?.length)\">\r\n                        <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='checked'\" [ngValue]=\"true\" (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox>\r\n                        <app-cs-checkbox-indeterminate *ngIf=\"checkCategoriesSelection()=='indeterminate'\" [ngValue]=\"true\" (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox-indeterminate>\r\n                        <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='unchecked'\" [ngValue]=\"false\" (ngValueChange)=\"selectAllCategories(true)\">Select All</app-cs-checkbox>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"table-head\">\r\n                    <div class=\"table-row\">\r\n                        <div class=\"table-column serial\">#</div>\r\n                        <div class=\"table-column category-name\">CATEGORIES</div>\r\n                        <div class=\"table-column category-within\">WITHIN</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"program-listing-item\" [class.active]=\"subList\" *ngFor=\"let category of categoryData.data;let i = index\" [class.active]=\"selectedIds.includes(category.category_id)\">\r\n                    <div class=\"table-row main-list\" [class.disabled]=\"false\">\r\n                        <div class=\"table-column serial\">\r\n                            <div class=\"sr-no\" [appTooltip]=\"i + categoryData?.from\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n                                [tooltipMandatory]=\"true\">{{i + categoryData?.from}}</div>\r\n                            <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n                                (ngValueChange)=\"selectCategory($event,category)\"></app-cs-checkbox>\r\n                        </div>\r\n                        <div class=\"table-column category-name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"name-with-count\">\r\n                                    <div class=\"value\" [appTooltip]=\"category?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{category?.name}}</div>\r\n                                </div>\r\n                                <!-- <div class=\"within-part\" *ngIf=\"category?.parent_category_name?.length>0\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                        <span *ngFor=\"let parent of category?.parent_category_name;let j=index\">{{(j!=(category?.parent_category_name?.length-1))?\r\n                                            parent+' < ':parent}} </span>\r\n                                    </span>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column category-within\" *ngIf=\"category?.parent_category_name?.length > 0\">\r\n                            <div *ngFor=\"let parent of category?.parent_category_name; let last = last\" class=\"within-name\" [appTooltip]=\"category?.parent_category_name?.slice()?.reverse()?.join(' > ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{parent}} \r\n                                <span *ngIf=\"!last\"> >&nbsp;  </span>\r\n                            </div>\r\n                            <div *ngIf=\"category?.parent_category_ids?.includes(currentProgram?.category_id) && !feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" class=\"primary-label\">PRIMARY</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <app-floating-bar [selectedData]=\"categoryData.selectedCategories\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program Category selected'\"\r\n        [pluralText]=\"'Program Categories selected'\" (closeEvent)=\"save()\"\r\n        (deleteEvent)=\"removeCategories($event)\" (closeList)=\"backToPrograms()\">\r\n        </app-floating-bar>\r\n    </div>\r\n    <ng-container *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\">\r\n        <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n            <div class=\"confirmation-top\">\r\n                <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</div>\r\n            </div>\r\n            <div class=\"confirmation-bottom\">\r\n                <div class=\"message\">Are you sure you would like to proceed?</div>\r\n                <div class=\"button-group\">\r\n                    <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\r\n                    <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <app-floating-bar [selectedData]=\"categoryData.selectedCategories\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program Category selected'\"\r\n        [pluralText]=\"'Program Categories selected'\" (closeEvent)=\"save()\"\r\n        (deleteEvent)=\"removeCategories($event)\" (closeList)=\"backToPrograms()\">\r\n    </app-floating-bar>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n </div>\r\n",
+                    template: "<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"!showCategories && !hideProgramsList\">\r\n    <div class=\"program-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Program</div>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n        <div class=\"filter-card-row\">\r\n            <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTab('regulations')\">\r\n                <div class=\"left\">\r\n                    <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n                    <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n                        {{programData?.SelectedRegulationProgramsCount}}\r\n                        {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allRegulationProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTab('standards')\">\r\n                <div class=\"left\">\r\n                    <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n                    <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n                        {{programData?.SelectedStandardProgramsCount}}\r\n                        {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allStandardProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'internal_controls'\"\r\n                (click)=\"changeTab('internal_controls')\">\r\n                <div class=\"left\">\r\n                    <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n                    <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n                        {{programData?.SelectedInternalControlsProgramsCount}}\r\n                        {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allInternalControlsProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTab('others')\">\r\n                <div class=\"left\">\r\n                    <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n                    <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n                        {{programData?.SelectedOthersProgramsCount}}\r\n                        {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <!-- <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span> -->\r\n                <span class=\"counter\">{{programTabDataCount?.allOthersProgramsCount}}</span>\r\n            </div>\r\n        </div>\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchProgram (keyup.enter)=\"handleSearch($event.target.value)\"\r\n                placeholder=\"Search Programs\" />\r\n        </div>\r\n        <!-- mode === 'EDIT' -->\r\n        <div *ngIf=\"mode === 'EDIT' && programData?.AllViewOnlyProgramCount\" class=\"program-listing-tab vx-d-flex vx-align-center\">\r\n            <button (click)=\"setProgramSubTab('PROGRAMS')\" class=\"vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"programSubTab === 'PROGRAMS'\">PROGRAMS <span class=\"count vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{programData?.AllProgramsCount}}</span></button>\r\n            <button (click)=\"setProgramSubTab('OTHER_PROGRAMS')\" class=\"vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"programSubTab === 'OTHER_PROGRAMS'\">OTHER PROGRAMS <span class=\"count vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{programData?.AllViewOnlyProgramCount}}</span></button>\r\n        </div>\r\n        <app-pagination *ngIf=\"programData.totalPages > 1\" [start]=\"programData.from\" [end]=\"programData.to\" [total]=\"programData.totalRecords\" [pageCount]=\"programData.totalPages\" [currentPage]=\"programData.currentPage\" (selectedPage)=\"changePage($event,'program')\"></app-pagination>\r\n        <div class=\"program-listing-part vx-mb-4\" [class.with-category-list]=\"!showCategories && !hideProgramsList\" [class.with-pagination]=\"programData.totalPages > 1\">\r\n            <app-no-data *ngIf=\"programData?.data?.length===0 && !loader\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <div class=\"program-listing-item\" [class.active]=\"showCategories && currentProgram?._id == program?._id\" *ngFor=\"let program of programData.data;let i = index\" [class.final-select]=\"false\">\r\n                <!-- after category was select & user move to back and edit then final-select class was show -->\r\n                <!-- [class.disabled]=\"currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') && programSubTab !== 'OTHER_PROGRAMS'\" -->\r\n                <div class=\"table-row main-list\" [class.active]=\"selectedProgramsId?.includes(program?._id)\" [class.disabled]=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag') ? false : (currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') && programSubTab !== 'OTHER_PROGRAMS')\">\r\n                    <div class=\"table-column serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n                        <!-- [disabled]=\"currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM')\" -->\r\n                        <app-cs-checkbox\r\n                            *ngIf=\"programSubTab !== 'OTHER_PROGRAMS'\"\r\n                            [disabled]=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag') ? false : (currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM'))\"\r\n                            [ngValue]=\"selectedProgramsId?.includes(program?._id)\"\r\n                            (ngValueChange)=\"selectProgram($event,program)\"\r\n                        ></app-cs-checkbox>\r\n                        <!-- <app-cs-radio [name]=\"'t'\" [checked]=\"currentProgram?._id == program?._id\" (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio> -->\r\n                    </div>\r\n                    <div class=\"table-column name\">\r\n                        <div class=\"name-inner\">\r\n                            <div class=\"name-with-count\">\r\n                                <div class=\"value\" [appTooltip]=\"program?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"table-column primary-program\" >\r\n                        <ng-container *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\">\r\n                            <app-cs-switch\r\n                                *ngIf=\"!(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') || currentProgram?._id === program?._id\"\r\n                                [disabled]=\"currentProgram?._id === program?._id\"\r\n                                [ngValue]='currentProgram?._id === program?._id' \r\n                                (ngValueChange)=\"setPrimaryProgram($event, program)\"\r\n                            >{{currentProgram?._id === program?._id ? 'PRIMARY PROGRAM' : 'SET AS PRIMARY PROGRAM'}}</app-cs-switch>\r\n                        </ng-container>\r\n                    </div>\r\n                    <!-- <div class=\"table-column action\">\r\n                        <button class=\"arrow\" *ngIf=\"program?.child_id?.length\" [class.disabled]=\"false\"\r\n                            [disabled]=\"false\">\r\n                            <i *ngIf=\"!(showCategories && currentProgram?._id == program?._id)\"\r\n                                (click)=\"selectProgram($event,program)\" class=\"icons\">&#xe970;</i>\r\n                            <i *ngIf=\"showCategories && currentProgram?._id == program?._id\" class=\"icons\">&#xe9e8;</i>\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <app-floating-bar *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" [selectedData]=\"(selectedProgramsDetail?.length) ? selectedProgramsDetail : []\" [displayElementKey]=\"'name'\"\r\n            [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n            (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true\" (closeList)=\"close()\" [elementId]=\"'category_id'\">\r\n        </app-floating-bar>\r\n\r\n        <app-floating-bar *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" [selectedData]=\"(selectedProgramsDetail?.length) ? selectedProgramsDetail : []\" [displayElementKey]=\"'name'\"\r\n            [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n            (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true\" (closeList)=\"close()\" [defaultSelected]=\"currentProgram\" [nonRemovableUsersList]=\"(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') ? viewOnlyProgramsCategoryId : [currentProgram?.category_id]\" [elementId]=\"'category_id'\">\r\n        </app-floating-bar>\r\n    </div>\r\n    <ng-container *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\">\r\n        <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n            <div class=\"confirmation-top\">\r\n                <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</div>\r\n            </div>\r\n            <div class=\"confirmation-bottom\">\r\n                <div class=\"message\">Are you sure you would like to proceed?</div>\r\n                <div class=\"button-group\">\r\n                    <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\r\n                    <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"program-listing-confirmation\" *ngIf=\"isPrimaryConfirmation && !isPrimaryUnchecked\">\r\n            <div class=\"confirmation-top\">\r\n                <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                <div class=\"text\" [innerHTML]=\"primaryConfirmationMessage\"></div>\r\n            </div>\r\n            <div class=\"confirmation-bottom\">\r\n                <div class=\"message\">Are you sure you would like to proceed?</div>\r\n                <div class=\"button-group\">\r\n                    <button class=\"no-btn\" (click)=\"updatePrimaryProgram(false)\">NO</button>\r\n                    <button class=\"yes-btn\" (click)=\"updatePrimaryProgram(true)\">YES</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"program-listing-confirmation error-confirmation\" *ngIf=\"isPrimaryUnchecked\">\r\n            <div class=\"confirmation-top\">\r\n                <div class=\"vx-d-flex vx-align-center\">\r\n                    <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                    <div class=\"text vx-pr-4\">You cannot deselect this Program since this is the <em>Primary Program</em> for this responsibility. To proceed, first select another Program as the <em>Primary Program</em>.</div>\r\n                </div>\r\n                <button class=\"ok-btn\" (click)=\"updatePrimaryProgram(false)\">OK</button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <!-- <app-floating-bar [selectedData]=\"(currentProgram?.category_id)?[currentProgram]:[]\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n        (deleteEvent)=\"deleteEvent($event)\" [isDisabled]=\"((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true \" (closeList)=\"close()\">\r\n    </app-floating-bar> -->\r\n\r\n    <!-- ((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true  -->\r\n\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n</div>\r\n<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"showCategories || hideProgramsList\">\r\n    <div class=\"program-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n        <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\r\n            <button class=\"back-btn vx-fs-16 vx-p-0 vx-mr-2\" (click)=\"backToPrograms()\"><i class=\"icons\">&#xe91d;</i></button>\r\n            <!-- <span *ngIf=\"currentProgram?.name\"> {{currentProgram?.name}} > </span> -->\r\n             Program  >  Select Program Categories\r\n        </div>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchCategory (keyup.enter)=\"categorySearch($event.target.value)\"\r\n                placeholder=\"Search Categories\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"categoryData.totalPages > 1\" class=\"category-pagination\" [start]=\"categoryData.from\" [end]=\"categoryData.to\" [total]=\"categoryData.totalRecords\" [pageCount]=\"categoryData.totalPages\" [currentPage]=\"categoryData.currentPage\" (selectedPage)=\"changePage($event,'category')\"></app-pagination>\r\n        <div class=\"program-listing-part vx-mb-4\" [class.with-category-pagination]=\"categoryData.totalPages > 1\">\r\n            <app-no-data *ngIf=\"categoryData?.data?.length===0 && !loader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <ng-container *ngIf=\"!loader && categoryData.data?.length\">\r\n                <ng-container *ngIf=\"false\">\r\n                    <div class=\"selected-area\" *ngIf=\"!loader && (currentProgram?.name ? categoryData.data?.length : programData?.data?.length)\">\r\n                        <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='checked'\" [ngValue]=\"true\" (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox>\r\n                        <app-cs-checkbox-indeterminate *ngIf=\"checkCategoriesSelection()=='indeterminate'\" [ngValue]=\"true\" (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox-indeterminate>\r\n                        <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='unchecked'\" [ngValue]=\"false\" (ngValueChange)=\"selectAllCategories(true)\">Select All</app-cs-checkbox>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"table-head\">\r\n                    <div class=\"table-row\">\r\n                        <div class=\"table-column serial\">#</div>\r\n                        <div class=\"table-column category-name\">CATEGORIES</div>\r\n                        <div class=\"table-column category-within\">WITHIN</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"program-listing-item\" [class.active]=\"subList\" *ngFor=\"let category of categoryData.data;let i = index\" [class.active]=\"selectedIds.includes(category.category_id)\">\r\n                    <div class=\"table-row main-list\" [class.disabled]=\"false\">\r\n                        <div class=\"table-column serial\">\r\n                            <div class=\"sr-no\" [appTooltip]=\"i + categoryData?.from\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n                                [tooltipMandatory]=\"true\">{{i + categoryData?.from}}</div>\r\n                            <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n                                (ngValueChange)=\"selectCategory($event,category)\"></app-cs-checkbox>\r\n                        </div>\r\n                        <div class=\"table-column category-name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"name-with-count\">\r\n                                    <div class=\"value\" [appTooltip]=\"category?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{category?.name}}</div>\r\n                                </div>\r\n                                <!-- <div class=\"within-part\" *ngIf=\"category?.parent_category_name?.length>0\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                        <span *ngFor=\"let parent of category?.parent_category_name;let j=index\">{{(j!=(category?.parent_category_name?.length-1))?\r\n                                            parent+' < ':parent}} </span>\r\n                                    </span>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column category-within\" *ngIf=\"category?.parent_category_name?.length > 0\">\r\n                            <div *ngFor=\"let parent of category?.parent_category_name; let last = last\" class=\"within-name\" [appTooltip]=\"category?.parent_category_name?.slice()?.reverse()?.join(' > ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{parent}} \r\n                                <span *ngIf=\"!last\"> >&nbsp;  </span>\r\n                            </div>\r\n                            <div *ngIf=\"category?.parent_category_ids?.includes(currentProgram?.category_id) && !feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" class=\"primary-label\">PRIMARY</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <app-floating-bar [selectedData]=\"categoryData.selectedCategories\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program Category selected'\"\r\n        [pluralText]=\"'Program Categories selected'\" (closeEvent)=\"save()\"\r\n        (deleteEvent)=\"removeCategories($event)\" (closeList)=\"backToPrograms()\">\r\n        </app-floating-bar>\r\n    </div>\r\n    <ng-container *ngIf=\"!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\">\r\n        <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n            <div class=\"confirmation-top\">\r\n                <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n                <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</div>\r\n            </div>\r\n            <div class=\"confirmation-bottom\">\r\n                <div class=\"message\">Are you sure you would like to proceed?</div>\r\n                <div class=\"button-group\">\r\n                    <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\r\n                    <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n </div>\r\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 .program-listing{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .program-listing:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-listing-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .program-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-listing-body .filter-card{box-shadow:0 0 2px #00000029;border-radius:.125rem;height:55px;cursor:pointer}::ng-deep .program-listing-body .filter-card.active{box-shadow:0 3px 12px #1e5dd340;border:none;pointer-events:none}::ng-deep .program-listing-body .filter-card.active span.counter{background:#F1F1F1;color:#042e7d}::ng-deep .program-listing-body .filter-card label{font-weight:500;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .program-listing-body .filter-card p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .program-listing-body .filter-card span.counter{display:flex;height:28px;min-width:28px;border-radius:2px;background:#042E7D;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 4px;line-height:28px}::ng-deep .program-listing-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .program-listing-body .filter-card+.filter-card{margin-left:4px}::ng-deep .program-listing-body .filter-card-row{display:flex;padding-bottom:8px}::ng-deep .program-listing-body .search-block{position:relative;margin-bottom:8px}::ng-deep .program-listing-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 .program-listing-body .search-block input::placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-listing-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .program-listing-body app-pagination .wk-pagination-sec-ds{padding-top:0!important}::ng-deep .program-listing-body app-pagination.category-pagination .wk-pagination-sec-ds{padding-bottom:0!important}::ng-deep .program-listing-body .program-listing-part{height:calc(100vh - 225px);overflow:auto;padding:0 12px 0 0;width:calc(100% + 12px)}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .program-listing-body .program-listing-part.with-pagination{height:calc(100vh - 244px)}::ng-deep .program-listing-body .program-listing-part.with-category-list{height:calc(100vh - 288px)}::ng-deep .program-listing-body .program-listing-part.with-category-list.with-pagination{height:calc(100vh - 324px)}::ng-deep .program-listing-body .program-listing-part.with-category-pagination{height:calc(100vh - 252px)}::ng-deep .program-listing-body .program-listing-part .selected-area{background:#fff;height:32px;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:100%;height:16px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item{width:100%;position:relative}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .value,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value{color:#161b2f;font-size:12px;font-weight:500;margin-left:24px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value{margin-left:0}::ng-deep .program-listing-body .program-listing-part .table-head{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .table-head .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column{color:#161b2f;font-size:11px;font-weight:500;height:24px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px;text-transform:uppercase}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.category-name{width:calc(100% - 332px);min-width:calc(100% - 332px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.category-within{width:300px;min-width:300px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.final-select{background:#fbfbfb}::ng-deep .program-listing-body .program-listing-part .program-listing-item.final-select .table-row .table-column.serial .sr-no{background:transparent}::ng-deep .program-listing-body .program-listing-part .program-listing-item .main-list{border:1px solid #f1f1f1;border-radius:2px;cursor:pointer;margin-bottom:4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial .sr-no{opacity:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled{pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled .primary-program app-cs-switch .cs-switch .value{opacity:.4}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled .name .name-inner .name-with-count .value{color:#dbdbdb!important}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column{color:#747576;height:40px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{position:absolute;top:14px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:16px;height:16px;top:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .count{background:#1E5DD3;border-radius:20px;color:#fff;font-size:9px;font-weight:500;line-height:16px;min-width:24px;display:inline-block;text-align:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name{width:calc(100% - 332px);min-width:calc(100% - 332px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-name .name-inner .name-with-count .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within{width:300px;min-width:300px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within .within-name{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.category-within .primary-label{background:#7AA7F7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program{width:200px;max-width:200px;justify-content:end}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program app-cs-switch{opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.primary-program app-cs-switch .cs-switch .value{font-size:11px!important;color:#747576!important;font-weight:500!important;width:auto!important;margin-right:8px;cursor:pointer}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.primary-program app-cs-switch,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.primary-program app-cs-switch{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row .table-column.name .name-inner .value{color:#747576;font-size:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox-indeterminate{opacity:1}::ng-deep .program-listing-tab{border-bottom:1px solid #DBDBDB;margin-bottom:8px}::ng-deep .program-listing-tab button{background:transparent;border-radius:0;border:none;border-bottom:3px solid transparent;margin-right:40px!important}::ng-deep .program-listing-tab button span.count{border-radius:20px;color:#74757680;min-width:24px}::ng-deep .program-listing-tab button.active{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .program-listing-tab button.active span.count{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .program-listing-confirmation{background:#161B2F;border-radius:.25rem;position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:1}::ng-deep .program-listing-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .program-listing-confirmation .confirmation-top .icon-block{height:2.25rem;min-width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .program-listing-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .program-listing-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .program-listing-confirmation .confirmation-bottom{background:#282E48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}::ng-deep .program-listing-confirmation.error-confirmation{background:#eb2424}::ng-deep .program-listing-confirmation.error-confirmation .confirmation-top{justify-content:space-between}::ng-deep .program-listing-confirmation.error-confirmation .confirmation-top button{height:1.5rem;width:3rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .program-listing-confirmation.error-confirmation .confirmation-top button.ok-btn{background:#fff;color:#eb2424;margin-left:.25rem}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;font-size:11px!important;color:#747576!important}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}\n"]
                 },] }
     ];