vcomply-workflow-engine 1.0.2 → 1.1.2

package/fesm2015/vcomply-workflow-engine.js

@@ -10756,7 +10756,7 @@ class BulkResponsibilityViewComponent {
 BulkResponsibilityViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-bulk-responsibility-view',
-                template: "<div class=\"bulk-view\">\r\n  <div class=\"bulk-view-head\">\r\n      <h2 class=\"bulk-view-title\">\r\n          {{fileName}}\r\n      </h2>\r\n  </div>\r\n  <div class=\"bulk-view-body\">\r\n      <div class=\"exel-view\">\r\n          <div class=\"exel-view-row head\">\r\n              <div class=\"exel-view-column sl-no\">#</div>\r\n              <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                  [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                  <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                      {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                      <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                      <div class=\"exel-view-row\">\r\n                          <div class=\"exel-view-column large\">Due Date</div>\r\n                      </div>\r\n                      <div class=\"exel-view-row multi-column\">\r\n                          <div class=\"exel-view-column\">Day</div>\r\n                          <div class=\"exel-view-column\">Month</div>\r\n                      </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                      <div class=\"exel-view-row\">\r\n                          <div class=\"exel-view-column large\">Oversight </div>\r\n                      </div>\r\n                      <div class=\"exel-view-row multi-column\">\r\n                          <div class=\"exel-view-column\">Always Notify</div>\r\n                          <div class=\"exel-view-column\">Notify on Failure</div>\r\n                      </div>\r\n                  </ng-container>\r\n              </div>\r\n\r\n          </div>\r\n          <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n              <div class=\"exel-view-column sl-no\" [class.error]=\"!report.isValid\">{{i+1}}</div>\r\n\r\n              <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                  <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                      [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                      delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n              </div>\r\n              <div class=\"exel-view-column\" [class.error]=\"report?.assignor && ((report?.assignor == report?.alwaysNotify) || (report?.assignor == report?.notifyOnFailure))\">\r\n                  {{report?.assignor}}\r\n                  <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                      class=\"icons\"\r\n                      [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                  </i>\r\n<!--\r\n                  <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                      class=\"icons\"\r\n                      [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                  </i>     -->\r\n              </div>\r\n              <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || ((report?.assignee == report?.reviewer)\r\n              || (report?.assignee == report?.alwaysNotify) || (report?.assignee == report?.notifyOnFailure)) || (!report?.isValidUser)\">\r\n                  {{report?.assignee}}\r\n\r\n                  <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                      class=\"icons\"\r\n                      [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                  </i>\r\n\r\n                  <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                      class=\"icons\"\r\n                      [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                  </i>\r\n                  <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                  class=\"icons\"\r\n                  [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                  </i>\r\n              </div>\r\n              <div class=\"exel-view-column\">{{report?.responsibilityCategory}}</div>\r\n              <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                  <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n              </div>\r\n              <div class=\"exel-view-column multi-column\">\r\n                  <div class=\"exel-view-row\">\r\n                      <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                          <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                          <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                      </div>\r\n                      <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                          <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                          <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n              <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n              <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n              <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n              <div class=\"exel-view-column\"\r\n                  [class.error]=\"report?.reviewer && ((report?.reviewer == report?.alwaysNotify) ||  (report?.reviewer == report?.notifyOnFailure)\r\n                    || (report?.reviewer == report?.assignee) )\">\r\n                  {{report?.reviewer}}\r\n\r\n                  <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                      class=\"icons\"\r\n                      [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                  </i>\r\n\r\n                  <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                      [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                  </i>\r\n                  <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                      class=\"icons\"\r\n                      [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                  </i> -->\r\n              </div>\r\n              <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n              <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n              <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n              <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n              <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n              <div class=\"exel-view-column multi-column\">\r\n                  <div class=\"exel-view-row\">\r\n                      <div class=\"exel-view-column\" [class.error]=\"report?.alwaysNotify && ((report?.alwaysNotify == report?.reviewer)\r\n                      || (report?.alwaysNotify == report?.assignor) || (report?.alwaysNotify == report?.assignee) ||\r\n                      ((!report?.assignor)&&(report?.alwaysNotify == defaultOwner)))\">\r\n                          {{report?.alwaysNotify}}\r\n                          <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                              class=\"icons\"\r\n                              [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                          </i>\r\n\r\n                          <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                              [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                          </i>\r\n                          <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                              class=\"icons\"\r\n                              [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                              placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                          </i>\r\n                      </div>\r\n                      <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && ((report?.notifyOnFailure == report?.reviewer)\r\n                      || (report?.notifyOnFailure == report?.assignor) || (report?.notifyOnFailure == report?.assignee) ||\r\n                      ((!report?.assignor)&&(report?.notifyOnFailure == defaultOwner)))\">\r\n                          {{report?.notifyOnFailure}}\r\n                          <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                          class=\"icons\"\r\n                          [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                          placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                      </i>\r\n\r\n                      <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                          [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                          placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                      </i>\r\n                      <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                          class=\"icons\"\r\n                          [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                          placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                      </i>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n\r\n\r\n              <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n              <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n          </div>\r\n      </div>\r\n  </div>\r\n  <div class=\"bulk-view-footer\">\r\n      <div class=\"left\">\r\n          <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n              uploaded.</p>\r\n      </div>\r\n      <div class=\"right\">\r\n          <button (click)=\"close()\">Cancel</button>\r\n          <button (click)=\"submit()\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n      </div>\r\n  </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n",
+                template: "\r\n<ng-container>\r\n<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Due Date</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Day</div>\r\n                            <div class=\"exel-view-column\">Month</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Oversight </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                <div class=\"exel-view-column sl-no\" [class.error]=\"!report.isValid\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"report?.assignor && ((report?.assignor == report?.alwaysNotify) || (report?.assignor == report?.notifyOnFailure))\">\r\n                    {{report?.assignor}}\r\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n<!--\r\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>     -->\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || ((report?.assignee == report?.reviewer)\r\n                || (report?.assignee == report?.alwaysNotify) || (report?.assignee == report?.notifyOnFailure)) || (!report?.isValidUser)\">\r\n                    {{report?.assignee}}\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                    class=\"icons\"\r\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCategory}}</div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                <div class=\"exel-view-column\"\r\n                    [class.error]=\"report?.reviewer && ((report?.reviewer == report?.alwaysNotify) ||  (report?.reviewer == report?.notifyOnFailure)\r\n                      || (report?.reviewer == report?.assignee) )\">\r\n                    {{report?.reviewer}}\r\n\r\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i> -->\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"report?.alwaysNotify && ((report?.alwaysNotify == report?.reviewer)\r\n                        || (report?.alwaysNotify == report?.assignor) || (report?.alwaysNotify == report?.assignee) ||\r\n                        ((!report?.assignor)&&(report?.alwaysNotify == defaultOwner)))\">\r\n                            {{report?.alwaysNotify}}\r\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n\r\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && ((report?.notifyOnFailure == report?.reviewer)\r\n                        || (report?.notifyOnFailure == report?.assignor) || (report?.notifyOnFailure == report?.assignee) ||\r\n                        ((!report?.assignor)&&(report?.notifyOnFailure == defaultOwner)))\">\r\n                            {{report?.notifyOnFailure}}\r\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n        <div class=\"left\">\r\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                uploaded.</p>\r\n        </div>\r\n        <div class=\"right\">\r\n            <button (click)=\"close()\">Cancel</button>\r\n            <button (click)=\"submit()\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n",
                 styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;top:0;right:0;bottom:0;left:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#fff}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #eb2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;padding-right:10px;border:none;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-footer{height:50px;box-shadow:0 0 15px rgba(30,93,210,.35);padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}"]
             },] }
 ];
@@ -11567,7 +11567,6 @@ class LogIssueService {
     }
     payloadBuilder(issueData, optionFieldsStatus) {
         var _a, _b, _c, _d, _e;
-        console.log(issueData);
         const selectedDate = new Date(issueData.issueDueDate);
         const dateSplit = [selectedDate.getFullYear(), selectedDate.getMonth() + 1, selectedDate.getDate()];
         const payload = {
@@ -11604,7 +11603,7 @@ class LogIssueService {
             failure_cc_email: optionFieldsStatus.OVERSIGHT ? (issueData.failureCCUsers.length ? issueData.failureCCUsers.map((x) => { var _a; return { member_id: (_a = x.my_member_id) !== null && _a !== void 0 ? _a : 0, alert_enable: 1 }; }) : []) : []
         };
         payload.custom_tags = issueData === null || issueData === void 0 ? void 0 : issueData.issueCustomTag;
-        console.log(payload);
+        payload.issueType = issueData === null || issueData === void 0 ? void 0 : issueData.issueType;
         return payload;
     }
     arrayToId(array, key) {
@@ -11727,7 +11726,7 @@ class LogAnIssueComponent {
             issueCategory: [],
             issueCustomTag: [],
             issueRC: [],
-            issueType: [],
+            issueType: 'issue',
             isAssignToMyself: false,
             entrustTo: [],
             issueDueDate: '',
@@ -11742,7 +11741,7 @@ class LogAnIssueComponent {
             issueCCUsers: [],
             failureCCUsers: [],
             linkedControlRisk: [],
-            linkageType: 'RISK'
+            linkageType: 'RISK',
         };
         this.AttachmentTrack = [[], [], []];
         this.additionalOptionStatus = {
@@ -12026,7 +12025,7 @@ class LogAnIssueComponent {
         this.pickerChanged.emit(false);
     }
     selectorAction(evt, type) {
-        var _a, _b, _c, _e, _f, _g, _h;
+        var _a, _b, _c, _e, _f, _g, _h, _j;
         console.log(evt, type);
         switch (type) {
             case 'ISSUE_CATEGORY': {
@@ -12061,6 +12060,12 @@ class LogAnIssueComponent {
             }
             case 'ISSUE_WHO': {
                 this.logIssueForm.entrustTo = this.idToArray(evt, this.listData.userList, 'employee_id');
+                if (((_g = this.logIssueForm.entrustTo[0]) === null || _g === void 0 ? void 0 : _g.my_member_id) === this.currentUser.id) {
+                    this.logIssueForm.isAssignToMyself = true;
+                }
+                else {
+                    this.logIssueForm.isAssignToMyself = false;
+                }
                 this.fieldDeselector(type);
                 if ((evt === null || evt === void 0 ? void 0 : evt.length) > 0) {
                     this.removeError('entrustTo');
@@ -12084,7 +12089,7 @@ class LogAnIssueComponent {
             }
             case 'ISSUE_CONTROL_RISK':
                 this.logIssueForm.linkedControlRisk = this.idToArray(evt, this.listData.linkageList, 'itemId');
-                this.logIssueForm.linkageType = (_h = (_g = this.logIssueForm) === null || _g === void 0 ? void 0 : _g.linkedControlRisk[0]) === null || _h === void 0 ? void 0 : _h.itemType;
+                this.logIssueForm.linkageType = (_j = (_h = this.logIssueForm) === null || _h === void 0 ? void 0 : _h.linkedControlRisk[0]) === null || _j === void 0 ? void 0 : _j.itemType;
                 this.fieldDeselector(type);
                 break;
         }
@@ -12111,6 +12116,7 @@ class LogAnIssueComponent {
                 if (itemIndex !== -1) {
                     this.logIssueForm.entrustTo.splice(itemIndex, 1);
                 }
+                this.logIssueForm.isAssignToMyself = false;
                 break;
             }
             case 'ISSUE_TYPE': {
@@ -12145,9 +12151,13 @@ class LogAnIssueComponent {
     assignMyself(event) {
         this.removeError('entrustTo');
         this.logIssueForm.entrustTo = [];
+        if (event) {
+            this.logIssueForm.entrustTo = this.listData.userList.filter((emplist) => emplist.my_member_id === this.currentUser.id);
+        }
     }
     setException(type) { this.logIssueForm.exceptionType = type; }
     setEvidence(type) { this.logIssueForm.evidenceRequired = type; }
+    setIssueType(type) { this.logIssueForm.issueType = type; }
     addMoreInfo(event) {
         this.additionalOptionStatus[event.code] = event.checked;
         this.scrollToBottom = true;
@@ -12522,7 +12532,7 @@ class LogAnIssueComponent {
 LogAnIssueComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-log-an-issue',
-                template: "<!-- <p>log-an-issue works!</p> -->\r\n<div class=\"log-an-issue\" *ngIf=\"!showSmiley\">\r\n    <div class=\"form-group-row\" *ngIf=\"['COMPLIANCE_WORKROOM'].includes(openedFrom)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\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                    Linked to\r\n                </label>\r\n\r\n                <div class=\"selected\">\r\n                  <div class=\"chip-container\">\r\n                      <span class=\"chip\">\r\n                              {{reponsibilityData?.responsibilityName}}</span>\r\n                  </div>\r\n\r\n              </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" *ngIf=\"['AUDIT_WORKROOM','VIEW_AUDIT_EXECUTION_SUMMARY','EXECUTE_AUDIT_PLAN'].includes(openedFrom)\">\r\n      <div class=\"left\" [class.checked]=\"false\">\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                  Issue linked with\r\n              </label>\r\n              <div class=\"selected\">\r\n                <div class=\"chip-container\">\r\n                    <span class=\"chip\">\r\n                            {{issueDetails?.auditPlanName}}</span>\r\n                </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n      </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"form-group-row\" *ngIf=\"['VIEW_AUDIT_EXECUTION_SUMMARY','EXECUTE_AUDIT_PLAN'].includes(openedFrom) || isRiskControlVisible\" [class.active]=\"activeField === 'ISSUE_CONTROL_RISK'\"\r\n  [class.disabled]=\"activeField && activeField !== 'ISSUE_CONTROL_RISK' && sideSelectorElements.includes(activeField)\">\r\n  <div class=\"left\" [class.checked]=\"logIssueForm?.linkedControlRisk?.length > 0 \">\r\n      <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n          *ngIf=\"logIssueForm?.linkedControlRisk?.length === 0 || activeField === 'ISSUE_CONTROL_RISK' \" />\r\n\r\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n          *ngIf=\"logIssueForm?.linkedControlRisk?.length > 0 && activeField !== 'ISSUE_CONTROL_RISK'\">\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\">Select a control or risk</label>\r\n          <div class=\"select\" *ngIf=\"!logIssueForm?.linkedControlRisk || logIssueForm?.linkedControlRisk?.length === 0\">\r\n              <input (click)=\"setActiveFieldSelector('ISSUE_CONTROL_RISK','ISSUE_CONTROL_RISK')\" type=\"text\"\r\n                  placeholder=\"Select a control or risk.\" readonly>\r\n          </div>\r\n          <div class=\"selected\" *ngIf=\"logIssueForm?.linkedControlRisk?.length > 0\">\r\n              <div class=\"chip-container\">\r\n                  <span class=\"chip\"><i class=\"icons\"\r\n                          (click)=\"deleteItem('ISSUE_CONTROL_RISK',logIssueForm?.linkedControlRisk[0])\">&#xe90d;</i>{{logIssueForm?.linkedControlRisk[0]?.itemControlName}}</span>\r\n              </div>\r\n              <button class=\"edit\" *ngIf=\"activeField !=='ISSUE_CONTROL_RISK'\" type=\"button\"\r\n                  (click)=\"setActiveFieldSelector('ISSUE_CONTROL_RISK','ISSUE_CONTROL_RISK')\"><i\r\n                      class=\"icons\">&#xe90c;</i>Edit</button>\r\n          </div>\r\n      </div>\r\n      <div class=\"vx-form-group\" *ngFor=\"let tag of logIssueForm.issueCustomTag|keyvalue\">\r\n          <!-- {{logIssueForm.issueCustomTag|json}} -->\r\n          <label class=\"vx-control-panel\">{{tag?.value?.custom_tag_name}}</label>\r\n          <input type=\"text\" [placeholder]=\"tag?.value?.custom_tag_name\" [(ngModel)]=\"tag.value.custom_tag_value\">\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n    <div class=\"form-group-row\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_TITLE' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueName.trim().length\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"name\"\r\n                *ngIf=\"!logIssueForm.issueName.trim().length || activeField === 'ISSUE_TITLE'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm.issueName.trim().length && activeField !== 'ISSUE_TITLE'\">\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                    Issue Title <span class=\"required\">*</span>\r\n                </label>\r\n                <input type=\"text\" placeholder=\"Enter issue Title\" [(ngModel)]=\"logIssueForm.issueName\"\r\n                    (focusin)=\"setActiveFieldSelector('ISSUE_TITLE','ISSUE_TITLE')\"\r\n                    (keyup)=\"logIssueForm.issueName?.trim()?.length > 0 ? removeError('issueName'): null\"\r\n                    (focusout)=\"setActiveFieldSelector('','')\"  *ngIf=\"logIssueForm.issueName =='' || activeSelector === 'ISSUE_TITLE'\">\r\n                    <div class=\"selected\" *ngIf=\"logIssueForm.issueName.length && activeSelector !== 'ISSUE_TITLE'\">\r\n                      <div class=\"chip-container\">\r\n                          <span class=\"value\">{{logIssueForm.issueName}}</span>\r\n                      </div>\r\n                      <button class=\"edit\"  (click)=\"setActiveFieldSelector('ISSUE_TITLE','ISSUE_TITLE')\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                  </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueName')\">Enter a name for this issue.</p>\r\n                <ng-container *ngIf=\"AttachmentTrack[0]?.length > 0 \">\r\n                    <div class=\"file-list\" *ngFor=\"let uploadingFile of AttachmentTrack[0]\">\r\n                        <div class=\"file-container\">\r\n                            <span class=\"file-name\">{{uploadingFile}}</span>\r\n                            <!-- <button>\r\n                                <i class=\"icons\">&#xe90d;</i>\r\n                            </button> -->\r\n                        </div>\r\n                        <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"logIssueForm?.issueDescriptionAttachements?.length > 0\">\r\n                    <div class=\"file-list\" *ngFor=\"let file of logIssueForm?.issueDescriptionAttachements\">\r\n                        <div class=\"file-container\">\r\n                            <span class=\"file-name\">{{file?.name}}</span>\r\n                            <button>\r\n                                <i class=\"icons\" (click)=\"deleteFile(file,'ISSUE_DESCRIPTION')\">&#xe90d;</i>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <marx-editor [editorConfig]=\"{mode: 'prime',file:false,\r\n                colorPalette: true,\r\n                link: true,\r\n                placeholder: 'Description'}\" [(ngModel)]=\"logIssueForm.issueDescription\"\r\n                (sendSavedFiles)=\"selectFile('ISSUE_DESCRIPTION',$event)\" (clickOutside)=\"checkDescription()\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" [class.active]=\"activeField === 'ISSUE_CATEGORY'\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_CATEGORY' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issueCategory?.length > 0 \">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n                *ngIf=\"logIssueForm?.issueCategory?.length === 0 || activeField === 'ISSUE_CATEGORY' \" />\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issueCategory?.length > 0 && activeField !== 'ISSUE_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\">Issue Category</label>\r\n                <div class=\"select\" *ngIf=\"!logIssueForm?.issueCategory || logIssueForm?.issueCategory?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_CATEGORY','ISSUE_CATEGORY')\" type=\"text\"\r\n                        placeholder=\"Select a category for this issue\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.issueCategory?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_CATEGORY',logIssueForm?.issueCategory[0])\">&#xe90d;</i>{{logIssueForm?.issueCategory[0]?.category_name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" *ngIf=\"activeField !=='ISSUE_CATEGORY'\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_CATEGORY','ISSUE_CATEGORY')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueCategory')\">Select an issue\r\n                    category.</p>\r\n            </div>\r\n            <div class=\"vx-form-group\" *ngFor=\"let tag of logIssueForm.issueCustomTag\">\r\n                <!-- {{logIssueForm.issueCustomTag|json}} -->\r\n                <label class=\"vx-control-panel\">{{tag?.name}}</label>\r\n                <input type=\"text\" [placeholder]=\"tag?.name\" [(ngModel)]=\"tag.value\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" *ngIf=\"isRCVisible\" [class.active]=\"false\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_RC' && sideSelectorElements.includes(activeField)\"\r\n        >\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issueRC?.length > 0\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\" alt=\"\" *ngIf=\"logIssueForm?.issueRC?.length === 0\">\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"logIssueForm?.issueRC?.length > 0 && activeField !== 'ISSUE_RC'\"\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\">Responsibility Center\r\n                  <span class=\"required\" *ngIf=\"isRCMandatory\">*</span>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"!logIssueForm?.issueRC || logIssueForm?.issueRC?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_RC','ISSUE_RC')\" type=\"text\"\r\n                        placeholder=\"Select Responsibility Center(s)\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.issueRC?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\" *ngIf=\"!isRCPreSelected\"\r\n                                (click)=\"deleteItem('ISSUE_RC',logIssueForm?.issueRC[0])\">&#xe90d;</i>{{logIssueForm?.issueRC[0]?.item_name}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeField !=='ISSUE_RC' && !isRCPreSelected\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_RC','ISSUE_RC')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueRC')\">Select the Responsibility Center associated with this issue.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_WHO' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.entrustTo?.length > 0\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"(logIssueForm?.entrustTo?.length === 0 && !logIssueForm?.isAssignToMyself) || activeField === 'ISSUE_WHO' \">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(logIssueForm?.entrustTo?.length > 0 || logIssueForm?.isAssignToMyself ) && activeField !== 'ISSUE_WHO'\">\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                <div class=\"select\" [class.disabled]=\"logIssueForm?.isAssignToMyself\"\r\n                    *ngIf=\"!logIssueForm?.entrustTo || logIssueForm?.entrustTo?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_WHO','ISSUE_WHO')\"\r\n                        [disabled]=\"logIssueForm?.isAssignToMyself\" type=\"text\"\r\n                        placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.entrustTo?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_WHO',logIssueForm?.entrustTo[0])\">&#xe90d;</i>{{logIssueForm?.entrustTo[0]?.employee_name}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeField !=='ISSUE_WHO'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_WHO','ISSUE_WHO')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('entrustTo')\">Select the person responsible for resolving this issue.</p>\r\n                <div class=\"switch-row align-right\" [class.disabled]=\"activeField === 'ISSUE_WHO'\">\r\n                    <app-cs-switch [disabled]=\"activeField === 'ISSUE_WHO'\" [(ngValue)]=\"logIssueForm.isAssignToMyself\" (ngValueChange)=\"assignMyself($event)\">OR\r\n                        ASSIGN TO MYSELF\r\n                    </app-cs-switch>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_DATE_TIME' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issueDueDate \">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n                *ngIf=\"!logIssueForm?.issueDueDate || activeField === 'ISSUE_DATE_TIME' \">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issueDueDate && activeField !== 'ISSUE_DATE_TIME'\">\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\">Maximum Time to Resolve <span class=\"required\">*</span></label>\r\n                <div class=\"date-time-picker\">\r\n                    <div class=\"picker-group\">\r\n                        <input type=\"text\" readonly placeholder=\"Set a deadline.\"\r\n                        [value]=\"logIssueForm.issueDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n                        <i class=\"icons\">&#xe92d;</i>\r\n                        <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event);removeError('issueDueDate')\"   [config]=\"dateConfig\"\r\n                            [(ngModel)]=\"logIssueForm.issueDueDate\" >\r\n                        </dp-date-picker>\r\n                        <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n                    </div>\r\n\r\n                    <div class=\"picker-group\">\r\n\r\n                        <input  (mouseover)=\"setCurrentTime()\" [(ngModel)]=\"logIssueForm.issueDueTime\" [value]=\"logIssueForm.issueDueTime\" readonly\r\n                            class=\"time\" aria-label=\"12hr format\" [ngxTimepicker]=\"dailyTime\" placeholder=\"Select Time\"\r\n                            type=\"text\"  [min]=\"currentTime\" readonly>\r\n                        <i class=\"icons\">&#xe955;</i>\r\n                        <ngx-material-timepicker  (opened)=\"setActiveFieldSelector('ISSUE_DATE_TIME', 'ISSUE_DATE_TIME')\"\r\n                            (closed)=\"setActiveFieldSelector('','')\" #dailyTime [defaultTime]=\"'11:59 pm'\">\r\n                        </ngx-material-timepicker>\r\n                    </div>\r\n\r\n                </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueDueDate')\">Select the date by which this issue needs to be resolved.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" [class.disabled]=\"activeField  && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueRecommendation\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/recommended-action.svg\" alt=\"im\" *ngIf=\"!(logIssueForm.issueRecommendation | spaceBreaker).length\">\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(logIssueForm.issueRecommendation | spaceBreaker).length>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\">Recommended Actions <span class=\"required\">*</span></label>\r\n                <ng-container *ngIf=\"AttachmentTrack[1]?.length > 0 \">\r\n                  <div class=\"file-list\" *ngFor=\"let uploadingFile of AttachmentTrack[1]\">\r\n                      <div class=\"file-container\">\r\n                          <span class=\"file-name\">{{uploadingFile}}</span>\r\n                          <!-- <button>\r\n                              <i class=\"icons\">&#xe90d;</i>\r\n                          </button> -->\r\n                      </div>\r\n                      <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\r\n                  </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"logIssueForm?.recommendedActionsAttachments?.length > 0\">\r\n                  <div class=\"file-list\" *ngFor=\"let file of logIssueForm?.recommendedActionsAttachments\">\r\n                      <div class=\"file-container\">\r\n                          <span class=\"file-name\">{{file?.name}}</span>\r\n                          <button>\r\n                              <i class=\"icons\" (click)=\"deleteFile(file,'RECOMMENDED_ACTIONS')\">&#xe90d;</i>\r\n                          </button>\r\n                      </div>\r\n                  </div>\r\n              </ng-container>\r\n                <marx-editor [(ngModel)]=\"logIssueForm.issueRecommendation\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                file:true,\r\n                placeholder: 'Recommended actions'}\" (ngModelChange)=\"logIssueForm?.issueRecommendation?.trim()?.length > 0 ? removeError('issueRecommendation'):null\"\r\n                (clickOutside)=\"checkDescription()\" (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS',$event)\"></marx-editor>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueRecommendation')\">Specify the recommended actions to resolve this issue.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" *ngIf=\"!hiddenList.includes('RISK_CLASSIFICATION')\" [class.disabled]=\"activeField  && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueRiskRating\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\" *ngIf=\"!logIssueForm?.issueRiskRating\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issueRiskRating\">\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\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 class=\"low\" *ngFor=\" let class of riskClassification\" [ngClass]=\"[class.class]\">\r\n                        <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\r\n                            [checked]=\"logIssueForm?.issueRiskRating === class.value\"\r\n                            [(ngModel)]=\"logIssueForm.issueRiskRating\">\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    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"additionalOptionStatus.EXCEPTION_TYPE\"\r\n        [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.exceptionType > -1\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/exception-type.svg\" alt=\"im\" *ngIf=\"logIssueForm?.exceptionType === null\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.exceptionType > -1\">\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                    Exception Type\r\n                </label>\r\n                <app-cs-radio class=\"main-filed\" [value]=\"1\" [checked]=\"logIssueForm?.exceptionType === 1\"\r\n                    (checkedEvent)=\"setException(1)\">Design Exception\r\n                    <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n                </app-cs-radio>\r\n                <app-cs-radio class=\"main-filed\" [value]=\"2\" [checked]=\"logIssueForm?.exceptionType === 2\"\r\n                    (checkedEvent)=\"setException(2)\">Effectiveness Exception\r\n                    <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n                </app-cs-radio>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"activeField === 'ISSUE_TYPE'\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_TYPE' && sideSelectorElements.includes(activeField)\"\r\n        *ngIf=\"additionalOptionStatus.ISSUE_TYPE\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issueType?.length > 0\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/issue-type.svg\" alt=\"\"\r\n                *ngIf=\"logIssueForm?.issueType?.length === 0 || activeField === 'ISSUE_TYPE' \">\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"logIssueForm?.issueType?.length > 0 && activeField !== 'ISSUE_TYPE'\"\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\">Issue Type</label>\r\n                <div class=\"select\" *ngIf=\"!logIssueForm?.issueType || logIssueForm?.issueType?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_TYPE','ISSUE_TYPE')\" type=\"text\"\r\n                        placeholder=\"Select the Issue Type associated with this issue.\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.issueType?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_TYPE',logIssueForm?.issueType[0])\">&#xe90d;</i>{{logIssueForm?.issueType[0]?.issue_type_name}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeField !=='ISSUE_TYPE'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_TYPE','ISSUE_TYPE')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"additionalOptionStatus.PRIORITY\"\r\n        [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issuePriority\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\" alt=\"im\" *ngIf=\"!logIssueForm?.issuePriority\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issuePriority > 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\">Priority</label>\r\n                <div class=\"classification\">\r\n                    <label *ngFor=\" let priority of riskPrority\" [ngClass]=\"[priority.class]\">\r\n                        <input type=\"radio\" name=\"classification-priority\" [value]=\"priority.value\"\r\n                            [checked]=\"logIssueForm?.issuePriority === priority.value\"\r\n                            [(ngModel)]=\"logIssueForm.issuePriority\">\r\n                        <span>{{priority.name}}</span>\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\r\n        [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueAssociatedRisk\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\" alt=\"im\" *ngIf=\"!logIssueForm?.issueAssociatedRisk.trim().length\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issueAssociatedRisk.trim().length\">\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\">Associated Risks </label>\r\n                <ng-container *ngIf=\"AttachmentTrack[2]?.length > 0 \">\r\n                  <div class=\"file-list\" *ngFor=\"let uploadingFile of AttachmentTrack[2]\">\r\n                      <div class=\"file-container\">\r\n                          <span class=\"file-name\">{{uploadingFile}}</span>\r\n                          <!-- <button>\r\n                              <i class=\"icons\">&#xe90d;</i>\r\n                          </button> -->\r\n                      </div>\r\n                  </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"logIssueForm?.associatedRisksAttachments?.length > 0\">\r\n                  <div class=\"file-list\" *ngFor=\"let file of logIssueForm?.associatedRisksAttachments\">\r\n                      <div class=\"file-container\">\r\n                          <span class=\"file-name\">{{file?.name}}</span>\r\n                          <button>\r\n                              <i class=\"icons\" (click)=\"deleteFile(file,'ASSOCIATED_RISKS')\">&#xe90d;</i>\r\n                          </button>\r\n                      </div>\r\n                  </div>\r\n              </ng-container>\r\n                <marx-editor [(ngModel)]=\"logIssueForm.issueAssociatedRisk\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                file:false,\r\n                placeholder: 'Associated Risks'}\" (clickOutside)=\"checkDescription()\" (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS',$event)\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"false\" *ngIf=\"additionalOptionStatus.OVERSIGHT\"\r\n        [class.disabled]=\"activeField && !(['ISSUE_CC','ISSUE_FCC'].includes(activeField)) && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"logIssueForm?.issueCCUsers?.length > 0 || logIssueForm?.failureCCUsers?.length > 0\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n                *ngIf=\"(logIssueForm?.issueCCUsers?.length === 0 && logIssueForm?.failureCCUsers?.length === 0)|| activeField === 'ISSUE_CC'|| activeField === 'ISSUE_FCC' \">\r\n\r\n            <svg class=\"checkIcon\"\r\n                *ngIf=\"logIssueForm?.issueCCUsers?.length > 0 || logIssueForm?.failureCCUsers?.length > 0 && activeField !== 'ISSUE_CC'||  activeField !== 'ISSUE_FCC'\"\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=\"!logIssueForm?.issueCCUsers || logIssueForm?.issueCCUsers?.length === 0\">\r\n                    <input type=\"text\" (click)=\"setActiveFieldSelector('ISSUE_CC','ISSUE_CC')\"\r\n                        placeholder=\"Who should have oversight of this issue?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.issueCCUsers?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_CC',logIssueForm?.issueCCUsers[0])\">&#xe90d;</i>{{logIssueForm?.issueCCUsers[0]?.employee_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"logIssueForm?.issueCCUsers?.length > 1\" type=\"button\" appPopover\r\n                            (click)=\"CC.popover()\" placement=\"right\">+\r\n                            {{logIssueForm?.issueCCUsers?.slice(1).length}}</button>\r\n                        <app-popover #CC [dontCloseonClick]=\"true\">\r\n                            <div class=\"action-list\">\r\n                                <ul class=\"action-item\">\r\n                                    <li *ngFor=\"let cc of logIssueForm?.issueCCUsers | slice: 1; let j = index\">\r\n                                        <div class=\"avatar-card\">\r\n                                            <span class=\"value\">\r\n                                                <i class=\"icons\" (click)=\"deleteItem('ISSUE_CC',cc)\">&#xe90d;</i>\r\n                                                {{cc?.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                    <button *ngIf=\"activeField !=='ISSUE_CC'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_CC','ISSUE_CC')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n                <div class=\"select\" *ngIf=\"!logIssueForm?.failureCCUsers || logIssueForm?.failureCCUsers?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_FCC','ISSUE_FCC')\" type=\"text\"\r\n                        placeholder=\"Who should be notified if the issue is not resolved?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.failureCCUsers?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_FCC',logIssueForm?.failureCCUsers[0])\">&#xe90d;</i>{{logIssueForm?.failureCCUsers[0]?.employee_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"logIssueForm?.failureCCUsers?.length > 1\" type=\"button\" appPopover\r\n                            (click)=\"FCC.popover()\" placement=\"right\">+\r\n                            {{logIssueForm?.failureCCUsers?.slice(1).length}}</button>\r\n                        <app-popover #FCC [dontCloseonClick]=\"true\">\r\n                            <div class=\"action-list\">\r\n                                <ul class=\"action-item\">\r\n                                    <li *ngFor=\"let fcc of logIssueForm?.failureCCUsers | slice: 1; let j = index\">\r\n                                        <div class=\"avatar-card\">\r\n                                            <span class=\"value\">\r\n                                                <i class=\"icons\" (click)=\"deleteItem('ISSUE_FCC',fcc)\">&#xe90d;</i>\r\n                                                {{fcc?.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                    <button *ngIf=\"activeField !=='ISSUE_FCC'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_FCC','ISSUE_FCC')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"additionalOptionStatus.EVIDENCE\"\r\n        [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"true\">\r\n            <!-- <img src=\"https://cdn.v-comply.com/format-evidence.svg\" alt=\"im\"> -->\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                    Evidence\r\n                </label>\r\n                <div class=\"upload-format\">\r\n                    <span class=\"text\">Do you want evidence of completion of the issue to be uploaded?</span>\r\n                    <div class=\"radio-group\">\r\n                        <app-cs-radio [name]=\"'file-evidence'\" [value]=\"1\"\r\n                            [checked]=\"logIssueForm?.evidenceRequired === 1\" (checkedEvent)=\"setEvidence(1)\">Yes\r\n                        </app-cs-radio>\r\n                        <app-cs-radio [name]=\"'file-evidence'\" [value]=\"0\"\r\n                            [checked]=\"logIssueForm?.evidenceRequired === 0\" (checkedEvent)=\"setEvidence(0)\">No\r\n                        </app-cs-radio>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-radio-list [config]=\"selectorConfig?.ISSUE_CATGORY\" [itemsList]=\"listData?.categoryList\"\r\n    [selectedItems]=\"logIssueForm.issueCategory\" [identifierKey]=\"'category_id'\"\r\n    [displayKey]=\"'category_name'\" *ngIf=\"activeSelector==='ISSUE_CATEGORY'\"\r\n    (saveList)=\"selectorAction($event,'ISSUE_CATEGORY')\" (closeList)=\"fieldDeselector('ISSUE_CATEGORY')\">\r\n</app-radio-list>\r\n\r\n<app-radio-list [config]=\"selectorConfig?.ISSUE_RC\" [itemsList]=\"listData?.rcList\"\r\n    [selectedItems]=\"logIssueForm.issueRC\" [identifierKey]=\"'rc_id'\" [displayKey]=\"'rc_name'\"\r\n    *ngIf=\"activeSelector==='ISSUE_RC'\" (saveList)=\"selectorAction($event,'ISSUE_RC')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_RC')\"></app-radio-list>\r\n\r\n<app-radio-list [config]=\"selectorConfig?.ISSUE_WHO\" [itemsList]=\"listData?.userList\" [twoColumn]=\"true\"\r\n    [selectedItems]=\"logIssueForm.entrustTo\" [identifierKey]=\"'employee_id'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n    *ngIf=\"activeSelector==='ISSUE_WHO'\" (saveList)=\"selectorAction($event,'ISSUE_WHO')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_WHO')\"></app-radio-list>\r\n\r\n<app-radio-list [config]=\"selectorConfig?.ISSUE_TYPE\" [itemsList]=\"listData?.issueTypeList\"\r\n    [selectedItems]=\"logIssueForm.issueType\" [identifierKey]=\"'issue_id'\" [displayKey]=\"'issue_type_name'\"\r\n    *ngIf=\"activeSelector==='ISSUE_TYPE'\" (saveList)=\"selectorAction($event,'ISSUE_TYPE')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_TYPE')\"></app-radio-list>\r\n\r\n<app-checkbox-list [config]=\"selectorConfig?.ISSUE_CC\" [twoColumn]=\"true\"\r\n    [itemsList]=\"listData.userList|userFilter:'employee_email':logIssueForm.entrustTo:{'employee_email':currentUser?.email}\"\r\n    [selectedItems]=\"logIssueForm.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')\"></app-checkbox-list>\r\n\r\n<app-checkbox-list [config]=\"selectorConfig?.ISSUE_FCC\" [twoColumn]=\"true\"\r\n    [itemsList]=\"listData.userList|userFilter:'employee_email':logIssueForm.entrustTo:{'employee_email':currentUser?.email}\"\r\n    [selectedItems]=\"logIssueForm.failureCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n    *ngIf=\"activeSelector==='ISSUE_FCC'\" (saveList)=\"selectorAction($event,'ISSUE_FCC')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_FCC')\"></app-checkbox-list>\r\n\r\n<app-responsibility-risk-selector [loading]=\"isRiskControlLoading\"  *ngIf=\"activeSelector==='ISSUE_CONTROL_RISK'\"\r\n (closeList)=\"fieldDeselector('ISSUE_CONTROL_RISK')\" (fetchList)=\"getLinkage(issueDetails?.auditObjId, $event)\"\r\n (saveList)=\"selectorAction($event,'ISSUE_CONTROL_RISK')\"\r\n[activeEntity]=\"logIssueForm?.linkageType\" [listItems]=\"listData?.linkageList\" [selectedItems]=\"logIssueForm?.linkedControlRisk\"></app-responsibility-risk-selector>\r\n\r\n<app-smiley-dialog-inline\r\n    *ngIf=\"showSmiley\"\r\n    [message]=\"smileyMessage\"\r\n    [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\"\r\n    (closeSmiley)=\"closeSmiley($event)\">\r\n</app-smiley-dialog-inline>\r\n",
+                template: "<!-- <p>log-an-issue works!</p> -->\r\n<div class=\"log-an-issue\" *ngIf=\"!showSmiley\">\r\n    <div class=\"form-group-row\" *ngIf=\"['COMPLIANCE_WORKROOM'].includes(openedFrom)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\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                    Linked to\r\n                </label>\r\n\r\n                <div class=\"selected\">\r\n                  <div class=\"chip-container\">\r\n                      <span class=\"chip\">\r\n                              {{reponsibilityData?.responsibilityName}}</span>\r\n                  </div>\r\n\r\n              </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" *ngIf=\"['AUDIT_WORKROOM','VIEW_AUDIT_EXECUTION_SUMMARY','EXECUTE_AUDIT_PLAN'].includes(openedFrom)\">\r\n      <div class=\"left\" [class.checked]=\"false\">\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                  Issue linked with\r\n              </label>\r\n              <div class=\"selected\">\r\n                <div class=\"chip-container\">\r\n                    <span class=\"chip\">\r\n                            {{issueDetails?.auditPlanName}}</span>\r\n                </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n      </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"form-group-row\" *ngIf=\"['VIEW_AUDIT_EXECUTION_SUMMARY','EXECUTE_AUDIT_PLAN'].includes(openedFrom) || isRiskControlVisible\" [class.active]=\"activeField === 'ISSUE_CONTROL_RISK'\"\r\n  [class.disabled]=\"activeField && activeField !== 'ISSUE_CONTROL_RISK' && sideSelectorElements.includes(activeField)\">\r\n  <div class=\"left\" [class.checked]=\"logIssueForm?.linkedControlRisk?.length > 0 \">\r\n      <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n          *ngIf=\"logIssueForm?.linkedControlRisk?.length === 0 || activeField === 'ISSUE_CONTROL_RISK' \" />\r\n\r\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n          *ngIf=\"logIssueForm?.linkedControlRisk?.length > 0 && activeField !== 'ISSUE_CONTROL_RISK'\">\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\">Select a control or risk</label>\r\n          <div class=\"select\" *ngIf=\"!logIssueForm?.linkedControlRisk || logIssueForm?.linkedControlRisk?.length === 0\">\r\n              <input (click)=\"setActiveFieldSelector('ISSUE_CONTROL_RISK','ISSUE_CONTROL_RISK')\" type=\"text\"\r\n                  placeholder=\"Select a control or risk.\" readonly>\r\n          </div>\r\n          <div class=\"selected\" *ngIf=\"logIssueForm?.linkedControlRisk?.length > 0\">\r\n              <div class=\"chip-container\">\r\n                  <span class=\"chip\"><i class=\"icons\"\r\n                          (click)=\"deleteItem('ISSUE_CONTROL_RISK',logIssueForm?.linkedControlRisk[0])\">&#xe90d;</i>{{logIssueForm?.linkedControlRisk[0]?.itemControlName}}</span>\r\n              </div>\r\n              <button class=\"edit\" *ngIf=\"activeField !=='ISSUE_CONTROL_RISK'\" type=\"button\"\r\n                  (click)=\"setActiveFieldSelector('ISSUE_CONTROL_RISK','ISSUE_CONTROL_RISK')\"><i\r\n                      class=\"icons\">&#xe90c;</i>Edit</button>\r\n          </div>\r\n      </div>\r\n      <div class=\"vx-form-group\" *ngFor=\"let tag of logIssueForm.issueCustomTag|keyvalue\">\r\n          <!-- {{logIssueForm.issueCustomTag|json}} -->\r\n          <label class=\"vx-control-panel\">{{tag?.value?.custom_tag_name}}</label>\r\n          <input type=\"text\" [placeholder]=\"tag?.value?.custom_tag_name\" [(ngModel)]=\"tag.value.custom_tag_value\">\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n    <div class=\"form-group-row\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_TITLE' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueName.trim().length\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"name\"\r\n                *ngIf=\"!logIssueForm.issueName.trim().length || activeField === 'ISSUE_TITLE'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm.issueName.trim().length && activeField !== 'ISSUE_TITLE'\">\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                    Issue Title <span class=\"required\">*</span>\r\n                </label>\r\n                <input type=\"text\" placeholder=\"Add a name for this issue\" [(ngModel)]=\"logIssueForm.issueName\"\r\n                    (focusin)=\"setActiveFieldSelector('ISSUE_TITLE','ISSUE_TITLE')\"\r\n                    (keyup)=\"logIssueForm.issueName?.trim()?.length > 0 ? removeError('issueName'): null\"\r\n                    (focusout)=\"setActiveFieldSelector('','')\"  *ngIf=\"logIssueForm.issueName =='' || activeSelector === 'ISSUE_TITLE'\">\r\n                    <div class=\"selected\" *ngIf=\"logIssueForm.issueName.length && activeSelector !== 'ISSUE_TITLE'\">\r\n                      <div class=\"chip-container\">\r\n                          <span class=\"value\">{{logIssueForm.issueName}}</span>\r\n                      </div>\r\n                      <button class=\"edit\"  (click)=\"setActiveFieldSelector('ISSUE_TITLE','ISSUE_TITLE')\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                  </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueName')\">Enter a name for this issue.</p>\r\n                <ng-container *ngIf=\"AttachmentTrack[0]?.length > 0 \">\r\n                    <div class=\"file-list\" *ngFor=\"let uploadingFile of AttachmentTrack[0]\">\r\n                        <div class=\"file-container\">\r\n                            <span class=\"file-name\">{{uploadingFile}}</span>\r\n                            <!-- <button>\r\n                                <i class=\"icons\">&#xe90d;</i>\r\n                            </button> -->\r\n                        </div>\r\n                        <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"logIssueForm?.issueDescriptionAttachements?.length > 0\">\r\n                    <div class=\"file-list\" *ngFor=\"let file of logIssueForm?.issueDescriptionAttachements\">\r\n                        <div class=\"file-container\">\r\n                            <span class=\"file-name\">{{file?.name}}</span>\r\n                            <button>\r\n                                <i class=\"icons\" (click)=\"deleteFile(file,'ISSUE_DESCRIPTION')\">&#xe90d;</i>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <marx-editor [editorConfig]=\"{mode: 'prime',file:false,\r\n                colorPalette: true,\r\n                link: true,\r\n                placeholder: 'Description'}\" [(ngModel)]=\"logIssueForm.issueDescription\"\r\n                (sendSavedFiles)=\"selectFile('ISSUE_DESCRIPTION',$event)\" (clickOutside)=\"checkDescription()\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- issue type start-->\r\n    <div class=\"form-group-row\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_TITLE' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueName.trim().length\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"name\"\r\n                *ngIf=\"!logIssueForm.issueName.trim().length || activeField === 'ISSUE_TITLE'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm.issueName.trim().length && activeField !== 'ISSUE_TITLE'\">\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                Issue Type\r\n              </label>\r\n              <app-cs-radio class=\"main-filed\"   [checked]=\"logIssueForm?.issueType === 'issue'\"\r\n                  (checkedEvent)=\"setIssueType('issue')\">Issue\r\n                  <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n              </app-cs-radio>\r\n              <app-cs-radio class=\"main-filed\"  [checked]=\"logIssueForm?.issueType === 'incident'\"\r\n                  (checkedEvent)=\"setIssueType('incident')\">Incident\r\n                  <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n              </app-cs-radio>\r\n          </div>\r\n      </div>\r\n    </div>\r\n    <!-- issue type end -->\r\n\r\n    <div class=\"form-group-row\" [class.active]=\"activeField === 'ISSUE_CATEGORY'\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_CATEGORY' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issueCategory?.length > 0 \">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\"\r\n                *ngIf=\"logIssueForm?.issueCategory?.length === 0 || activeField === 'ISSUE_CATEGORY' \" />\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issueCategory?.length > 0 && activeField !== 'ISSUE_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\">Issue Category</label>\r\n                <div class=\"select\" *ngIf=\"!logIssueForm?.issueCategory || logIssueForm?.issueCategory?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_CATEGORY','ISSUE_CATEGORY')\" type=\"text\"\r\n                        placeholder=\"Select a category for this issue\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.issueCategory?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_CATEGORY',logIssueForm?.issueCategory[0])\">&#xe90d;</i>{{logIssueForm?.issueCategory[0]?.category_name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" *ngIf=\"activeField !=='ISSUE_CATEGORY'\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_CATEGORY','ISSUE_CATEGORY')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueCategory')\">Select an issue\r\n                    category.</p>\r\n            </div>\r\n            <div class=\"vx-form-group\" *ngFor=\"let tag of logIssueForm.issueCustomTag\">\r\n                <!-- {{logIssueForm.issueCustomTag|json}} -->\r\n                <label class=\"vx-control-panel\">{{tag?.name}}</label>\r\n                <input type=\"text\" [placeholder]=\"tag?.name\" [(ngModel)]=\"tag.value\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" *ngIf=\"isRCVisible\" [class.active]=\"false\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_RC' && sideSelectorElements.includes(activeField)\"\r\n        >\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issueRC?.length > 0\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\" alt=\"\" *ngIf=\"logIssueForm?.issueRC?.length === 0\">\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"logIssueForm?.issueRC?.length > 0 && activeField !== 'ISSUE_RC'\"\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\">Responsibility Center\r\n                  <span class=\"required\" *ngIf=\"isRCMandatory\">*</span>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"!logIssueForm?.issueRC || logIssueForm?.issueRC?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_RC','ISSUE_RC')\" type=\"text\"\r\n                        placeholder=\"Select Responsibility Center(s)\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.issueRC?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\" *ngIf=\"!isRCPreSelected\"\r\n                                (click)=\"deleteItem('ISSUE_RC',logIssueForm?.issueRC[0])\">&#xe90d;</i>{{logIssueForm?.issueRC[0]?.item_name}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeField !=='ISSUE_RC' && !isRCPreSelected\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_RC','ISSUE_RC')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueRC')\">Select the Responsibility Center associated with this issue.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_WHO' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.entrustTo?.length > 0\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"(logIssueForm?.entrustTo?.length === 0 && !logIssueForm?.isAssignToMyself) || activeField === 'ISSUE_WHO' \">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(logIssueForm?.entrustTo?.length > 0 || logIssueForm?.isAssignToMyself ) && activeField !== 'ISSUE_WHO'\">\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                <div class=\"select\" [class.disabled]=\"logIssueForm?.isAssignToMyself\"\r\n                    *ngIf=\"!logIssueForm?.entrustTo || logIssueForm?.entrustTo?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_WHO','ISSUE_WHO')\"\r\n                        [disabled]=\"logIssueForm?.isAssignToMyself\" type=\"text\"\r\n                        placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.entrustTo?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_WHO',logIssueForm?.entrustTo[0])\">&#xe90d;</i>{{logIssueForm?.entrustTo[0]?.employee_name}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeField !=='ISSUE_WHO'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_WHO','ISSUE_WHO')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('entrustTo')\">Select the person responsible for resolving this issue.</p>\r\n                <div class=\"switch-row align-right\" [class.disabled]=\"activeField === 'ISSUE_WHO'\">\r\n                    <app-cs-switch [disabled]=\"activeField === 'ISSUE_WHO'\" [(ngValue)]=\"logIssueForm.isAssignToMyself\" (ngValueChange)=\"assignMyself($event)\">OR\r\n                        ASSIGN TO MYSELF\r\n                    </app-cs-switch>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_DATE_TIME' && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issueDueDate \">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n                *ngIf=\"!logIssueForm?.issueDueDate || activeField === 'ISSUE_DATE_TIME' \">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issueDueDate && activeField !== 'ISSUE_DATE_TIME'\">\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\">Maximum Time to Resolve <span class=\"required\">*</span></label>\r\n                <div class=\"date-time-picker\">\r\n                    <div class=\"picker-group\">\r\n                        <input type=\"text\" readonly placeholder=\"Set a deadline.\"\r\n                        [value]=\"logIssueForm.issueDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n                        <i class=\"icons\">&#xe92d;</i>\r\n                        <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event);removeError('issueDueDate')\"   [config]=\"dateConfig\"\r\n                            [(ngModel)]=\"logIssueForm.issueDueDate\" >\r\n                        </dp-date-picker>\r\n                        <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n                    </div>\r\n\r\n                    <div class=\"picker-group\">\r\n\r\n                        <input  (mouseover)=\"setCurrentTime()\" [(ngModel)]=\"logIssueForm.issueDueTime\" [value]=\"logIssueForm.issueDueTime\" readonly\r\n                            class=\"time\" aria-label=\"12hr format\" [ngxTimepicker]=\"dailyTime\" placeholder=\"Select Time\"\r\n                            type=\"text\"  [min]=\"currentTime\" readonly>\r\n                        <i class=\"icons\">&#xe955;</i>\r\n                        <ngx-material-timepicker  (opened)=\"setActiveFieldSelector('ISSUE_DATE_TIME', 'ISSUE_DATE_TIME')\"\r\n                            (closed)=\"setActiveFieldSelector('','')\" #dailyTime [defaultTime]=\"'11:59 pm'\">\r\n                        </ngx-material-timepicker>\r\n                    </div>\r\n\r\n                </div>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueDueDate')\">Select the date by which this issue needs to be resolved.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" [class.disabled]=\"activeField  && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueRecommendation\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/recommended-action.svg\" alt=\"im\" *ngIf=\"!(logIssueForm.issueRecommendation | spaceBreaker).length\">\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(logIssueForm.issueRecommendation | spaceBreaker).length>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\">Recommended Actions <span class=\"required\">*</span></label>\r\n                <ng-container *ngIf=\"AttachmentTrack[1]?.length > 0 \">\r\n                  <div class=\"file-list\" *ngFor=\"let uploadingFile of AttachmentTrack[1]\">\r\n                      <div class=\"file-container\">\r\n                          <span class=\"file-name\">{{uploadingFile}}</span>\r\n                          <!-- <button>\r\n                              <i class=\"icons\">&#xe90d;</i>\r\n                          </button> -->\r\n                      </div>\r\n                      <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\r\n                  </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"logIssueForm?.recommendedActionsAttachments?.length > 0\">\r\n                  <div class=\"file-list\" *ngFor=\"let file of logIssueForm?.recommendedActionsAttachments\">\r\n                      <div class=\"file-container\">\r\n                          <span class=\"file-name\">{{file?.name}}</span>\r\n                          <button>\r\n                              <i class=\"icons\" (click)=\"deleteFile(file,'RECOMMENDED_ACTIONS')\">&#xe90d;</i>\r\n                          </button>\r\n                      </div>\r\n                  </div>\r\n              </ng-container>\r\n                <marx-editor [(ngModel)]=\"logIssueForm.issueRecommendation\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                file:true,\r\n                placeholder: 'Recommended actions'}\" (ngModelChange)=\"logIssueForm?.issueRecommendation?.trim()?.length > 0 ? removeError('issueRecommendation'):null\"\r\n                (clickOutside)=\"checkDescription()\" (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS',$event)\"></marx-editor>\r\n                <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueRecommendation')\">Specify the recommended actions to resolve this issue.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-group-row\" *ngIf=\"!hiddenList.includes('RISK_CLASSIFICATION')\" [class.disabled]=\"activeField  && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueRiskRating\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\" *ngIf=\"!logIssueForm?.issueRiskRating\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issueRiskRating\">\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\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 class=\"low\" *ngFor=\" let class of riskClassification\" [ngClass]=\"[class.class]\">\r\n                        <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\r\n                            [checked]=\"logIssueForm?.issueRiskRating === class.value\"\r\n                            [(ngModel)]=\"logIssueForm.issueRiskRating\">\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    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"additionalOptionStatus.EXCEPTION_TYPE\"\r\n        [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.exceptionType > -1\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/exception-type.svg\" alt=\"im\" *ngIf=\"logIssueForm?.exceptionType === null\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.exceptionType > -1\">\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                    Exception Type\r\n                </label>\r\n                <app-cs-radio class=\"main-filed\" [value]=\"1\" [checked]=\"logIssueForm?.exceptionType === 1\"\r\n                    (checkedEvent)=\"setException(1)\">Design Exception\r\n                    <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n                </app-cs-radio>\r\n                <app-cs-radio class=\"main-filed\" [value]=\"2\" [checked]=\"logIssueForm?.exceptionType === 2\"\r\n                    (checkedEvent)=\"setException(2)\">Effectiveness Exception\r\n                    <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n                </app-cs-radio>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"activeField === 'ISSUE_TYPE'\"\r\n        [class.disabled]=\"activeField && activeField !== 'ISSUE_TYPE' && sideSelectorElements.includes(activeField)\"\r\n        *ngIf=\"additionalOptionStatus.ISSUE_TYPE\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issueType?.length > 0\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/issue-type.svg\" alt=\"\"\r\n                *ngIf=\"logIssueForm?.issueType?.length === 0 || activeField === 'ISSUE_TYPE' \">\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"logIssueForm?.issueType?.length > 0 && activeField !== 'ISSUE_TYPE'\"\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\">Issue Type</label>\r\n                <div class=\"select\" *ngIf=\"!logIssueForm?.issueType || logIssueForm?.issueType?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_TYPE','ISSUE_TYPE')\" type=\"text\"\r\n                        placeholder=\"Select the Issue Type associated with this issue.\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.issueType?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_TYPE',logIssueForm?.issueType[0])\">&#xe90d;</i>{{logIssueForm?.issueType[0]?.issue_type_name}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeField !=='ISSUE_TYPE'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_TYPE','ISSUE_TYPE')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"additionalOptionStatus.PRIORITY\"\r\n        [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm?.issuePriority\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\" alt=\"im\" *ngIf=\"!logIssueForm?.issuePriority\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issuePriority > 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\">Priority</label>\r\n                <div class=\"classification\">\r\n                    <label *ngFor=\" let priority of riskPrority\" [ngClass]=\"[priority.class]\">\r\n                        <input type=\"radio\" name=\"classification-priority\" [value]=\"priority.value\"\r\n                            [checked]=\"logIssueForm?.issuePriority === priority.value\"\r\n                            [(ngModel)]=\"logIssueForm.issuePriority\">\r\n                        <span>{{priority.name}}</span>\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\r\n        [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"logIssueForm.issueAssociatedRisk\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\" alt=\"im\" *ngIf=\"!logIssueForm?.issueAssociatedRisk.trim().length\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"logIssueForm?.issueAssociatedRisk.trim().length\">\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\">Associated Risks </label>\r\n                <ng-container *ngIf=\"AttachmentTrack[2]?.length > 0 \">\r\n                  <div class=\"file-list\" *ngFor=\"let uploadingFile of AttachmentTrack[2]\">\r\n                      <div class=\"file-container\">\r\n                          <span class=\"file-name\">{{uploadingFile}}</span>\r\n                          <!-- <button>\r\n                              <i class=\"icons\">&#xe90d;</i>\r\n                          </button> -->\r\n                      </div>\r\n                  </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"logIssueForm?.associatedRisksAttachments?.length > 0\">\r\n                  <div class=\"file-list\" *ngFor=\"let file of logIssueForm?.associatedRisksAttachments\">\r\n                      <div class=\"file-container\">\r\n                          <span class=\"file-name\">{{file?.name}}</span>\r\n                          <button>\r\n                              <i class=\"icons\" (click)=\"deleteFile(file,'ASSOCIATED_RISKS')\">&#xe90d;</i>\r\n                          </button>\r\n                      </div>\r\n                  </div>\r\n              </ng-container>\r\n                <marx-editor [(ngModel)]=\"logIssueForm.issueAssociatedRisk\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                file:false,\r\n                placeholder: 'Associated Risks'}\" (clickOutside)=\"checkDescription()\" (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS',$event)\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"false\" *ngIf=\"additionalOptionStatus.OVERSIGHT\"\r\n        [class.disabled]=\"activeField && !(['ISSUE_CC','ISSUE_FCC'].includes(activeField)) && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\"\r\n            [class.checked]=\"logIssueForm?.issueCCUsers?.length > 0 || logIssueForm?.failureCCUsers?.length > 0\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n                *ngIf=\"(logIssueForm?.issueCCUsers?.length === 0 && logIssueForm?.failureCCUsers?.length === 0)|| activeField === 'ISSUE_CC'|| activeField === 'ISSUE_FCC' \">\r\n\r\n            <svg class=\"checkIcon\"\r\n                *ngIf=\"logIssueForm?.issueCCUsers?.length > 0 || logIssueForm?.failureCCUsers?.length > 0 && activeField !== 'ISSUE_CC'||  activeField !== 'ISSUE_FCC'\"\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=\"!logIssueForm?.issueCCUsers || logIssueForm?.issueCCUsers?.length === 0\">\r\n                    <input type=\"text\" (click)=\"setActiveFieldSelector('ISSUE_CC','ISSUE_CC')\"\r\n                        placeholder=\"Who should have oversight of this issue?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.issueCCUsers?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_CC',logIssueForm?.issueCCUsers[0])\">&#xe90d;</i>{{logIssueForm?.issueCCUsers[0]?.employee_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"logIssueForm?.issueCCUsers?.length > 1\" type=\"button\" appPopover\r\n                            (click)=\"CC.popover()\" placement=\"right\">+\r\n                            {{logIssueForm?.issueCCUsers?.slice(1).length}}</button>\r\n                        <app-popover #CC [dontCloseonClick]=\"true\">\r\n                            <div class=\"action-list\">\r\n                                <ul class=\"action-item\">\r\n                                    <li *ngFor=\"let cc of logIssueForm?.issueCCUsers | slice: 1; let j = index\">\r\n                                        <div class=\"avatar-card\">\r\n                                            <span class=\"value\">\r\n                                                <i class=\"icons\" (click)=\"deleteItem('ISSUE_CC',cc)\">&#xe90d;</i>\r\n                                                {{cc?.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                    <button *ngIf=\"activeField !=='ISSUE_CC'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_CC','ISSUE_CC')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n                <div class=\"select\" *ngIf=\"!logIssueForm?.failureCCUsers || logIssueForm?.failureCCUsers?.length === 0\">\r\n                    <input (click)=\"setActiveFieldSelector('ISSUE_FCC','ISSUE_FCC')\" type=\"text\"\r\n                        placeholder=\"Who should be notified if the issue is not resolved?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"logIssueForm?.failureCCUsers?.length > 0\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"deleteItem('ISSUE_FCC',logIssueForm?.failureCCUsers[0])\">&#xe90d;</i>{{logIssueForm?.failureCCUsers[0]?.employee_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"logIssueForm?.failureCCUsers?.length > 1\" type=\"button\" appPopover\r\n                            (click)=\"FCC.popover()\" placement=\"right\">+\r\n                            {{logIssueForm?.failureCCUsers?.slice(1).length}}</button>\r\n                        <app-popover #FCC [dontCloseonClick]=\"true\">\r\n                            <div class=\"action-list\">\r\n                                <ul class=\"action-item\">\r\n                                    <li *ngFor=\"let fcc of logIssueForm?.failureCCUsers | slice: 1; let j = index\">\r\n                                        <div class=\"avatar-card\">\r\n                                            <span class=\"value\">\r\n                                                <i class=\"icons\" (click)=\"deleteItem('ISSUE_FCC',fcc)\">&#xe90d;</i>\r\n                                                {{fcc?.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                    <button *ngIf=\"activeField !=='ISSUE_FCC'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"setActiveFieldSelector('ISSUE_FCC','ISSUE_FCC')\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"additionalOptionStatus.EVIDENCE\"\r\n        [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\">\r\n        <div class=\"left\" [class.checked]=\"true\">\r\n            <!-- <img src=\"https://cdn.v-comply.com/format-evidence.svg\" alt=\"im\"> -->\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                    Evidence\r\n                </label>\r\n                <div class=\"upload-format\">\r\n                    <span class=\"text\">Do you want evidence of completion of the issue to be uploaded?</span>\r\n                    <div class=\"radio-group\">\r\n                        <app-cs-radio [name]=\"'file-evidence'\" [value]=\"1\"\r\n                            [checked]=\"logIssueForm?.evidenceRequired === 1\" (checkedEvent)=\"setEvidence(1)\">Yes\r\n                        </app-cs-radio>\r\n                        <app-cs-radio [name]=\"'file-evidence'\" [value]=\"0\"\r\n                            [checked]=\"logIssueForm?.evidenceRequired === 0\" (checkedEvent)=\"setEvidence(0)\">No\r\n                        </app-cs-radio>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-radio-list [config]=\"selectorConfig?.ISSUE_CATGORY\" [itemsList]=\"listData?.categoryList\"\r\n    [selectedItems]=\"logIssueForm.issueCategory\" [identifierKey]=\"'category_id'\"\r\n    [displayKey]=\"'category_name'\" *ngIf=\"activeSelector==='ISSUE_CATEGORY'\"\r\n    (saveList)=\"selectorAction($event,'ISSUE_CATEGORY')\" (closeList)=\"fieldDeselector('ISSUE_CATEGORY')\">\r\n</app-radio-list>\r\n\r\n<app-radio-list [config]=\"selectorConfig?.ISSUE_RC\" [itemsList]=\"listData?.rcList\"\r\n    [selectedItems]=\"logIssueForm.issueRC\" [identifierKey]=\"'rc_id'\" [displayKey]=\"'rc_name'\"\r\n    *ngIf=\"activeSelector==='ISSUE_RC'\" (saveList)=\"selectorAction($event,'ISSUE_RC')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_RC')\"></app-radio-list>\r\n\r\n<app-radio-list [config]=\"selectorConfig?.ISSUE_WHO\" [itemsList]=\"listData?.userList\" [twoColumn]=\"true\"\r\n    [selectedItems]=\"logIssueForm.entrustTo\" [identifierKey]=\"'employee_id'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n    *ngIf=\"activeSelector==='ISSUE_WHO'\" (saveList)=\"selectorAction($event,'ISSUE_WHO')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_WHO')\"></app-radio-list>\r\n\r\n<app-radio-list [config]=\"selectorConfig?.ISSUE_TYPE\" [itemsList]=\"listData?.issueTypeList\"\r\n    [selectedItems]=\"logIssueForm.issueType\" [identifierKey]=\"'issue_id'\" [displayKey]=\"'issue_type_name'\"\r\n    *ngIf=\"activeSelector==='ISSUE_TYPE'\" (saveList)=\"selectorAction($event,'ISSUE_TYPE')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_TYPE')\"></app-radio-list>\r\n\r\n<app-checkbox-list [config]=\"selectorConfig?.ISSUE_CC\" [twoColumn]=\"true\"\r\n    [itemsList]=\"listData.userList|userFilter:'employee_email':logIssueForm.entrustTo:{'employee_email':currentUser?.email}\"\r\n    [selectedItems]=\"logIssueForm.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')\"></app-checkbox-list>\r\n\r\n<app-checkbox-list [config]=\"selectorConfig?.ISSUE_FCC\" [twoColumn]=\"true\"\r\n    [itemsList]=\"listData.userList|userFilter:'employee_email':logIssueForm.entrustTo:{'employee_email':currentUser?.email}\"\r\n    [selectedItems]=\"logIssueForm.failureCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n    *ngIf=\"activeSelector==='ISSUE_FCC'\" (saveList)=\"selectorAction($event,'ISSUE_FCC')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_FCC')\"></app-checkbox-list>\r\n\r\n<app-responsibility-risk-selector [loading]=\"isRiskControlLoading\"  *ngIf=\"activeSelector==='ISSUE_CONTROL_RISK'\"\r\n (closeList)=\"fieldDeselector('ISSUE_CONTROL_RISK')\" (fetchList)=\"getLinkage(issueDetails?.auditObjId, $event)\"\r\n (saveList)=\"selectorAction($event,'ISSUE_CONTROL_RISK')\"\r\n[activeEntity]=\"logIssueForm?.linkageType\" [listItems]=\"listData?.linkageList\" [selectedItems]=\"logIssueForm?.linkedControlRisk\"></app-responsibility-risk-selector>\r\n\r\n<app-smiley-dialog-inline\r\n    *ngIf=\"showSmiley\"\r\n    [message]=\"smileyMessage\"\r\n    [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\"\r\n    (closeSmiley)=\"closeSmiley($event)\">\r\n</app-smiley-dialog-inline>\r\n",
                 styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .log-an-issue{position:relative}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.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-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::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-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;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:#fff;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 rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::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}::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}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::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:12px \u200B24px}::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%}::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:#fff}::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:11px!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;width:100%;margin-top:4px;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;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 .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;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::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .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 .input-group.counter input,::ng-deep .vx-form-group input[type=text] .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 .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::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 .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:#fff;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}::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 button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:2px 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:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;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:#fff;box-shadow:0 0 5px #1e5dd3;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%}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .vx-form-group marx-editor .editor-container .editable-block:before{opacity:.72}}}::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}::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:22px}::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}::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}::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}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::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:#fff;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::-moz-placeholder{color:#999;font-size:13px}::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:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;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 .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}::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:30px;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:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;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;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;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.hide{opacity:0;transition:all .2s ease-in-out}.form-group-row.disabled{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:#fff;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 .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.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}.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}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.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}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.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}.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}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@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{-webkit-animation:rotate 2s linear infinite;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;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-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}}@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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{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-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn: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:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .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-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays 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-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays 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-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-left 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)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@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;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:20px}::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,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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 0;background:#fff}::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,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .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,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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:rgba(0,0,0,.05)!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:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid 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:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid 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}"]
             },] }
 ];
@@ -15125,7 +15135,7 @@ class ImportAnAssessmentComponent {
         this.errorMessage = "invalid file error";
         this.downloadStatus = 'NOT_DOWNLOADING';
         this.downloadPercent = 0;
-        this.smileyMessage = `You're All Set! We're processing your request and you will be notified via email upon completion.`;
+        this.smileyMessageAction = `You're All Set!`;
         this.actionButtons = [
             { buttonText: 'Import More Assessments', class: 'white-btn', id: smileyActions.IMPORT_MORE },
             { buttonText: 'View Assessments', class: 'blue-btn', id: smileyActions.VIEW_ASSESSMENTS },
@@ -15649,7 +15659,7 @@ class ImportAnAssessmentComponent {
 ImportAnAssessmentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-import-an-assessment',
-                template: "<div class=\"import-an-assessment\" [attr.id]=\"'scrollReference'\">\r\n  <!-- main container starts here -->\r\n  <div class=\"import-an-assessment-body\">\r\n    <div class=\"import-an-assessment-container\">\r\n      <div class=\"image\">\r\n        <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/spreadsheet-multiple-category.svg\"\r\n          alt=\"\" />\r\n      </div>\r\n\r\n      <h4>You can import an assessment in just two easy steps:</h4>\r\n      <ul class=\"list\">\r\n        <li>Download the template and fill in the details.</li>\r\n        <li>Upload the .xlsx file and you\u2019re good to go!</li>\r\n      </ul>\r\n\r\n      <button class=\"download\" *ngIf=\"downloadStatus === 'NOT_DOWNLOADING'\" (click)=\"downloadTemplate()\"\r\n        type=\"button\"><i class=\"icons\">&#xe91b;</i> Download Template</button>\r\n      <div class=\"bulk-btn-progress\" *ngIf=\"downloadStatus === 'DOWNLOADING'\">\r\n        Download in Progress\r\n        <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n      </div>\r\n      <ng-container *ngIf=\"downloadStatus === 'DOWNLOADED'\">\r\n        <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n        <div class=\"bulk-btn-again\">\r\n          Is the file not downloaded?\r\n          <button (click)=\"downloadTemplate()\">Retry Download</button>\r\n        </div>\r\n      </ng-container>\r\n      <p class=\"error-message\" *ngIf=\"isWrongFormat\">{{errorMessage}}</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-loader-inline *ngIf=\"isShowLoader\"></app-loader-inline>\r\n\r\n<input type=\"file\" [(ngModel)]=\"fileValue\" id=\"iaa-file-input\" accept=\".xlsx\" class=\"hidden-input\" onclick=\"this.value = null\"\r\n  (change)=\"uploadFile($event)\" />\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n  (action)=\"smileyAction($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"isUploaded\">\r\n  <app-create-assessment-container #editor [openPortal]=\"'ASSESSMENT_IMPORT'\" (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n    [assessmentJSON]=\"convertedData\">\r\n  </app-create-assessment-container>\r\n</div>\r\n",
+                template: "<div class=\"import-an-assessment\" [attr.id]=\"'scrollReference'\">\r\n  <!-- main container starts here -->\r\n  <div class=\"import-an-assessment-body\">\r\n    <div class=\"import-an-assessment-container\">\r\n      <div class=\"image\">\r\n        <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/spreadsheet-multiple-category.svg\"\r\n          alt=\"\" />\r\n      </div>\r\n\r\n      <h4>You can import an assessment in just two easy steps:</h4>\r\n      <ul class=\"list\">\r\n        <li>Download the template and fill in the details.</li>\r\n        <li>Upload the .xlsx file and you\u2019re good to go!</li>\r\n      </ul>\r\n\r\n      <button class=\"download\" *ngIf=\"downloadStatus === 'NOT_DOWNLOADING'\" (click)=\"downloadTemplate()\"\r\n        type=\"button\"><i class=\"icons\">&#xe91b;</i> Download Template</button>\r\n      <div class=\"bulk-btn-progress\" *ngIf=\"downloadStatus === 'DOWNLOADING'\">\r\n        Download in Progress\r\n        <app-line-loader [loaderHeight]=\"'2'\"></app-line-loader>\r\n      </div>\r\n      <ng-container *ngIf=\"downloadStatus === 'DOWNLOADED'\">\r\n        <div class=\"bulk-btn-progress\"><i class=\"icons\">&#xe91c;</i>Download Complete</div>\r\n        <div class=\"bulk-btn-again\">\r\n          Is the file not downloaded?\r\n          <button (click)=\"downloadTemplate()\">Retry Download</button>\r\n        </div>\r\n      </ng-container>\r\n      <p class=\"error-message\" *ngIf=\"isWrongFormat\">{{errorMessage}}</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-loader-inline *ngIf=\"isShowLoader\"></app-loader-inline>\r\n\r\n<input type=\"file\" [(ngModel)]=\"fileValue\" id=\"iaa-file-input\" accept=\".xlsx\" class=\"hidden-input\" onclick=\"this.value = null\"\r\n  (change)=\"uploadFile($event)\" />\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessageAction\" [actionButtons]=\"actionButtons\"\r\n  (action)=\"smileyAction($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"isUploaded\">\r\n  <app-create-assessment-container #editor [openPortal]=\"'ASSESSMENT_IMPORT'\" (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n    [assessmentJSON]=\"convertedData\">\r\n  </app-create-assessment-container>\r\n</div>\r\n",
                 styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .import-an-assessment{background:#fff;position:relative;z-index:1}@media only screen and (min-width:1920px){::ng-deep .import-an-assessment{height:calc(100vh - 200px);display:flex;align-items:center}}::ng-deep .import-an-assessment-body{padding:0;display:block}::ng-deep .import-an-assessment-container{display:block;text-align:center}::ng-deep .import-an-assessment-container .image{width:300px;margin:0 auto 24px}::ng-deep .import-an-assessment-container h4{font-size:20px;line-height:30px;margin:0 0 20px;font-weight:500}::ng-deep .import-an-assessment-container ul.list{padding:0;margin:0 0 40px;display:block;counter-reset:my-awesome-counter}::ng-deep .import-an-assessment-container ul.list li{text-align:left;color:#747576;font-size:15px;line-height:38px;font-weight:400;list-style:none;counter-increment:my-awesome-counter;background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:0 12px}::ng-deep .import-an-assessment-container ul.list li:before{content:counter(my-awesome-counter) \". \"}::ng-deep .import-an-assessment-container ul.list li+li{margin-top:4px}::ng-deep .import-an-assessment-container button.download{background:#fff;height:36px;border-radius:2px;cursor:pointer;border:1px solid #1e5dd3;color:#1e5dd3;text-transform:uppercase;padding:0 30px;font-weight:500;font-size:11px}::ng-deep .import-an-assessment-container .bulk-btn-progress{background:#f8f8f8;height:36px;border-radius:2px;cursor:pointer;border:1px solid #f8f8f8;color:#747576;text-transform:uppercase;padding:0 30px;font-weight:500;font-size:11px;position:relative;display:inline-block;line-height:34px}::ng-deep .import-an-assessment-container .bulk-btn-progress i{color:#34aa44;font-size:14px;float:left;position:relative;margin:0 10px 0 0;font-weight:400}::ng-deep .import-an-assessment-container .bulk-btn-progress span.progress{height:3px;position:absolute;bottom:0;left:0;width:100%;background:#1e5dd3}::ng-deep .import-an-assessment-container .bulk-btn-again{color:#161b2f;font-size:11px;margin-top:10px}::ng-deep .import-an-assessment-container .bulk-btn-again button{background:transparent;border:none;padding:0;font-size:11px;color:#1e5dd3;font-weight:500;text-decoration:underline;cursor:pointer;text-transform:uppercase;display:inline-block}.hidden-input{opacity:0}.import{position:fixed;top:0;right:30px;bottom:0;left:0;z-index:9;width:calc(100vw - 30px)}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.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-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::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-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;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:#fff;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 rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::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}::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}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::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:12px \u200B24px}::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%}::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:#fff}::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:11px!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;width:100%;margin-top:4px;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;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 .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;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::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .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 .input-group.counter input,::ng-deep .vx-form-group input[type=text] .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 .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::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 .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:#fff;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}::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 button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:2px 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:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;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:#fff;box-shadow:0 0 5px #1e5dd3;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%}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .vx-form-group marx-editor .editor-container .editable-block:before{opacity:.72}}}::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}::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:22px}::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}::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}::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}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::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:#fff;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::-moz-placeholder{color:#999;font-size:13px}::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:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;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 .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}::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:30px;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:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;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;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;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.hide{opacity:0;transition:all .2s ease-in-out}.form-group-row.disabled{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:#fff;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 .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.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}.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}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.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}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.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}.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}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@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{-webkit-animation:rotate 2s linear infinite;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;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-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}}@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:#fff;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;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{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-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn: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:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .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-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays 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-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays 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-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-left 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)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@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;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:20px}::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,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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 0;background:#fff}::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,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .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,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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:rgba(0,0,0,.05)!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:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid 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:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid 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}"]
             },] }
 ];
@@ -17654,6 +17664,9 @@ class CreateAssessmentContainerComponent {
     set assessmentData(value) {
         this.initializeAssessment(value);
     }
+    set checkpointData(value) {
+        this.initializeAssessment(value);
+    }
     ngOnInit() {
         this.editorService.addPage();
         this.editorService.numberOfPages();
@@ -17670,6 +17683,12 @@ class CreateAssessmentContainerComponent {
             this.assessmentCategory = assessmentData.metadata.category_arr;
         }
     }
+    initializeCheckpoint(checkpointData) {
+        var _a;
+        if (checkpointData && ((_a = Object.keys(checkpointData)) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.editorService.formsPage = checkpointData;
+        }
+    }
     setAllPages() {
         this.editorService.allPages = [...new Set(this.editorService.formsPage.elements.map((ele) => ele.page))];
         this.getPageName(1);
@@ -17997,7 +18016,7 @@ class CreateAssessmentContainerComponent {
         }
     }
     save(mode) {
-        if (mode === 'ACTIVE') {
+        if (mode === 'ACTIVE' && this.openPortal !== 'RESPONSIBILITY_CHECKPOINT') {
             const ref = this.dialog.open(ActiveComponent, {
                 data: {
                     message: `Once published, this assessment will be active and can be associated with a compliance responsibility.`
@@ -18021,7 +18040,7 @@ class CreateAssessmentContainerComponent {
 CreateAssessmentContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-create-assessment-container',
-                template: "<ng-container>\r\n    <div *ngIf=\"pageMode === 'EDIT'\" class=\"create-assessment-container\" [class.full-page]=\"expandPage\">\r\n        <div class=\"create-assessment-head vx-p-2 vx-pl-3 vx-d-flex vx-align-center vx-justify-between\">\r\n            <div class=\"left vx-d-flex vx-align-center\" [class.with-template-btn]=\"false\">\r\n                <span class=\"id vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-2\">{{assessmentControlId}}</span>\r\n                <span class=\"heading vx-fs-16 vx-label-txt vx-mr-2 vx-lh-6\" [appTooltip]=\"assessmentName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assessmentName}}</span>\r\n                <!-- <button class=\"edit-btn vx-fs-14 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons\">&#xe9ba;</i></button> -->\r\n            </div>\r\n            <div class=\"right vx-d-flex vx-align-center\">\r\n                <button  class=\"page-dropdown vx-p-0 vx-pl-1 vx-pr-2 vx-m-0 vx-d-flex vx-align-center\" appPopover (click)=\"action.popover()\" placement=\"right\">\r\n                    <span class=\"page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\" *ngIf=\"editorService.currentPageNumber > 0\">PAGE {{editorService?.currentPageNumber}}</span>\r\n                    <span class=\"page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\" *ngIf=\"editorService.currentPageNumber === -1\">Welcome Screen</span>\r\n                    <span class=\"page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\" *ngIf=\"editorService.currentPageNumber === -2\">Thankyou Screen</span>\r\n                    <!-- <span class=\"page-number vx-fs-11 vx-paragraph-txt\" *ngIf=\"editorService.stepIdentifier=='pagescreen'\">{{editorService?.currentPageDetails?.pageName}}</span> -->\r\n                    <i class=\"icons arrow vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\r\n                </button>\r\n                <app-popover #action>\r\n                    <div class=\"page-dropdown-popup\">\r\n                        <ul class=\"vx-p-0 vx-m-0\">\r\n                            <li class=\"vx-d-flex vx-align-center\" *ngFor=\"let data of generatePageDropdown()\">\r\n                                <button class=\"vx-d-block vx-p-2 vx-m-0 vx-w-100\" [innerHTML]=\"data?.template\" (click)=\"pageChanged(data)\">\r\n                                    <!-- <span class=\"page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">PAGE</span>\r\n                                    <span class=\"page-number vx-fs-11 vx-paragraph-txt\">1</span>\r\n                                    {{data|json}} -->\r\n                                </button>\r\n                            </li>\r\n                        </ul>\r\n                        <div class=\"action-bottom vx-d-flex vx-align-center vx-justify-end vx-p-2\">\r\n                            <button (click)=\"addNewPage()\" class=\"add-page vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center\">ADD NEW PAGE</button>\r\n                        </div>\r\n                    </div>\r\n                </app-popover>\r\n                <button class=\"settings-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-lh-6 vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-ml-1 vx-d-flex vx-align-center\" (click)=\"assessmentSettings()\"><i class=\"icons vx-fs-12 vx-d-flex vx-mr-1\">&#xe913;</i> ASSESSMENT SETTINGS</button>\r\n                <button *ngIf=\"false\" class=\"template-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-lh-6 vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-ml-1 vx-d-flex vx-align-center\"><i class=\"icons vx-fs-12 vx-d-flex vx-mr-1\">&#xe9ed;</i> SAVE AS TEMPLATE</button>\r\n            </div>\r\n        </div>\r\n        <div class=\"create-assessment-body\">\r\n            \r\n            <ng-container *ngIf=\"editorService.stepIdentifier=='pagescreen'\">\r\n                <div *ngIf=\"isPageEmpty()\" class=\"select-question-part vx-d-flex vx-align-center vx-justify-center\">\r\n                    <div class=\"question-inner vx-pl-5 vx-pb-5\">\r\n                        <!-- <button class=\"page-title vx-fs-11 vx-fw-600 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center vx-w-100\" (click)=\"addPageDetails()\"><i class=\"icons vx-fs-16 vx-mr-1\">&#xe90a;</i> PAGE TITLE</button> -->\r\n                        <div class=\"heading vx-fs-18 vx-paragraph-txt vx-text-center vx-w-100\">Select a question type to begin:</div>\r\n                        <app-question-type (addQuestion)=\"editorService.addQuestion($event)\"></app-question-type>\r\n                    </div>\r\n\r\n                    <!-- <ng-template #elseBlock>\r\n                        <div>\r\n                            <app-editor-loader></app-editor-loader>\r\n                        </div>\r\n                    </ng-template> -->\r\n\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!isPageEmpty() || editorService.currentPageNumber < 0\">\r\n                <div class=\"editor-section\">\r\n                    <div class=\"editor-section-body vx-d-flex\">\r\n                        <app-toolkit (addQuestion)=\"editorService.addQuestion($event)\"></app-toolkit>\r\n\r\n                        <div class=\"editor-section-inner\">\r\n                            <app-welcome-thankyou *ngIf='editorService.stepIdentifier==\"welcomescreen\"' [entityData]=\"editorService?.formsPage\" [service]=\"editorService\" (deleteQuestion)=\"deleteQuestionWithValidation('welcome')\"></app-welcome-thankyou>\r\n                        <!-- <app-preview-welcome></app-preview-welcome> -->\r\n                    <ng-container *ngIf='editorService.stepIdentifier==\"pagescreen\"'>\r\n                        <button *ngIf='editorService.stepIdentifier==\"pagescreen\" && editorService.showAddPageOption ' class=\"page-title vx-fs-11 vx-fw-600 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-mb-2 vx-d-flex vx-align-center vx-justify-center vx-w-100\" (click)=\"addPageDetails()\"><i class=\"icons vx-fs-16 vx-mr-1\">&#xe90a;</i> PAGE TITLE</button>\r\n                            <app-page-header (edit)=\"addPageDetails()\" *ngIf='editorService.stepIdentifier==\"pagescreen\" && editorService.showPageDetails' [pageName]=\"editorService.currentPageDetails.pageName\" [pageDescription]=\"editorService.currentPageDetails.pageDescription\"></app-page-header>\r\n                            <ng-container *ngFor=\"let question of editorService.formsPage.elements;let questionIndex = index\">\r\n                                <ng-container *ngIf=\"question.page === editorService.currentPageNumber && editorService.stepIdentifier=='pagescreen'\">\r\n                                    <app-editor-wrapper  *ngIf=\"editorService.activeQuestion === questionIndex\" [service]=\"editorService\" [question]=\"question\" [questionIndex]=\"questionIndex\"\r\n                                    (validQuestionData)=\"checkforError($event)\"\r\n                                    (deleteQuestion)=\"deleteQuestionWithValidation($event)\"\r\n                                    (copyQuestion)=\"editorService.copyQuestion($event)\"></app-editor-wrapper>\r\n                                    <app-preview-wrapper *ngIf=\"editorService.activeQuestion !== questionIndex\"  [question]=\"question\" [questionIndex]=\"questionIndex\"\r\n                                    (makeActiveQuestion)=\"editorService.activeQuestion = $event\"></app-preview-wrapper>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <div class=\"next-question-area\">\r\n                                <button class=\"page-title vx-fs-11 vx-fw-600 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-mb-2 vx-d-flex vx-align-center vx-justify-center vx-w-100\" (click)=\"openQuestion()\"><i class=\"icons vx-fs-16 vx-mr-1\">&#xe90a;</i> NEXT QUESTION</button>\r\n                                <div class=\"next-question-popup vx-p-3\" *ngIf=\"hideQuestion\">\r\n                                    <app-question-type (addQuestion)=\"editorService.addQuestion($event);closeQuestion()\"></app-question-type>\r\n                                </div>\r\n                                <div class=\"overlay\" *ngIf=\"hideQuestion\" (click)=\"closeQuestion()\"></div>\r\n                            </div>\r\n                            <button (click)=\"addNewPage()\" class=\"page-title vx-fs-11 vx-fw-600 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-mb-2 vx-d-flex vx-align-center vx-justify-center vx-w-100\"><i class=\"icons vx-fs-16 vx-mr-1\">&#xe90a;</i> ADD NEW PAGE</button>\r\n                        </ng-container>\r\n                        </div>\r\n\r\n                        <div class=\"right-side-btn\">\r\n                            <button *ngIf=\"!expandPage\" (click)=\"clickExpand()\" class=\"fullscreen-btn vx-fs-14 vx-txt-blue vx-p-0 vx-m-0 vx-mb-3 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Expand Page'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xe945;</i></button>\r\n                            <button *ngIf=\"expandPage\" (click)=\"closeExpand()\" class=\"fullscreen-btn vx-fs-14 vx-txt-blue vx-p-0 vx-m-0 vx-mb-3 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Shrink Page'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xe944;</i></button>\r\n                            <button *ngIf=\"editorService.stepIdentifier=='pagescreen'\" (click)=\"deletePage()\" class=\"delete-btn vx-fs-14 vx-txt-red vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Delete Page'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xe923;</i></button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"editor-section-footer vx-d-flex vx-align-center vx-justify-center vx-mt-4\">\r\n                        <button (click)=\"setIsUploaded.emit(false)\" class=\"cancel-btn vx-fs-14 vx-fw-500 vx-txt-red vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center\">CANCEL</button>\r\n                        <button   (click)=\"submitAfterErrorCheck('DRAFT')\" [class.disabled]=\"assessmentCurrentState === 'ACTIVE'\" class=\" white-btn vx-fs-14 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center\">SAVE AS DRAFT</button>\r\n                        <button (click)=\"submitAfterErrorCheck('ACTIVE')\" class=\" blue-btn vx-fs-14 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center\">PUBLISH</button>\r\n                        <!-- <button (click)=\"pageMode = 'PREVIEW'\" class=\"preview-btn vx-fs-20 vx-txt-white vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Preview'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xeae5;</i></button> -->\r\n                        <button *ngIf=\"false\" class=\"close-btn vx-fs-12 vx-txt-white vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Close'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xe90d;</i></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            \r\n        </div>\r\n    </div>\r\n    <!-- <app-assessment-preview-container *ngIf=\"pageMode === 'PREVIEW'\" [questionDetails]=\"editorService.formsPage\"></app-assessment-preview-container> -->\r\n</ng-container>\r\n\r\n<!-- <app-editor-loader *ngIf=\"!isLoaded\"></app-editor-loader> -->",
+                template: "<ng-container>\r\n    <div *ngIf=\"pageMode === 'EDIT'\" class=\"create-assessment-container\" [class.full-page]=\"expandPage\">\r\n        <div class=\"create-assessment-head vx-p-2 vx-pl-3 vx-d-flex vx-align-center vx-justify-between\">\r\n            <div class=\"left vx-d-flex vx-align-center\" [class.with-template-btn]=\"false\">\r\n                <span class=\"id vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-2\">{{assessmentControlId}}</span>\r\n                <span class=\"heading vx-fs-16 vx-label-txt vx-mr-2 vx-lh-6\" [appTooltip]=\"assessmentName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assessmentName}}</span>\r\n                <!-- <button class=\"edit-btn vx-fs-14 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons\">&#xe9ba;</i></button> -->\r\n            </div>\r\n            <div class=\"right vx-d-flex vx-align-center\">\r\n                <button [class.disabled]=\"openPortal === 'RESPONSIBILITY_CHECKPOINT'\" class=\"page-dropdown vx-p-0 vx-pl-1 vx-pr-2 vx-m-0 vx-d-flex vx-align-center\" appPopover (click)=\"action.popover()\" placement=\"right\">\r\n                    <span class=\"page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\" *ngIf=\"editorService.currentPageNumber > 0\">PAGE {{editorService?.currentPageNumber}}</span>\r\n                    <span class=\"page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\" *ngIf=\"editorService.currentPageNumber === -1\">Welcome Screen</span>\r\n                    <span class=\"page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\" *ngIf=\"editorService.currentPageNumber === -2\">Thankyou Screen</span>\r\n                    <!-- <span class=\"page-number vx-fs-11 vx-paragraph-txt\" *ngIf=\"editorService.stepIdentifier=='pagescreen'\">{{editorService?.currentPageDetails?.pageName}}</span> -->\r\n                    <i class=\"icons arrow vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\r\n                </button>\r\n                <app-popover #action>\r\n                    <div class=\"page-dropdown-popup\">\r\n                        <ul class=\"vx-p-0 vx-m-0\">\r\n                            <li class=\"vx-d-flex vx-align-center\" *ngFor=\"let data of generatePageDropdown()\">\r\n                                <button class=\"vx-d-block vx-p-2 vx-m-0 vx-w-100\" [innerHTML]=\"data?.template\" (click)=\"pageChanged(data)\">\r\n                                    <!-- <span class=\"page-label vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">PAGE</span>\r\n                                    <span class=\"page-number vx-fs-11 vx-paragraph-txt\">1</span>\r\n                                    {{data|json}} -->\r\n                                </button>\r\n                            </li>\r\n                        </ul>\r\n                        <div class=\"action-bottom vx-d-flex vx-align-center vx-justify-end vx-p-2\" >\r\n                            <button (click)=\"addNewPage()\" class=\"add-page vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center\">ADD NEW PAGE</button>\r\n                        </div>\r\n                    </div>\r\n                </app-popover>\r\n                <button *ngIf=\"openPortal !== 'RESPONSIBILITY_CHECKPOINT'\" class=\"settings-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-lh-6 vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-ml-1 vx-d-flex vx-align-center\" (click)=\"assessmentSettings()\"><i class=\"icons vx-fs-12 vx-d-flex vx-mr-1\">&#xe913;</i> ASSESSMENT SETTINGS</button>\r\n                <button *ngIf=\"false\" class=\"template-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-lh-6 vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-ml-1 vx-d-flex vx-align-center\"><i class=\"icons vx-fs-12 vx-d-flex vx-mr-1\">&#xe9ed;</i> SAVE AS TEMPLATE</button>\r\n            </div>\r\n        </div>\r\n        <div class=\"create-assessment-body\">\r\n            \r\n            <ng-container *ngIf=\"editorService.stepIdentifier=='pagescreen'\">\r\n                <div *ngIf=\"isPageEmpty()\" class=\"select-question-part vx-d-flex vx-align-center vx-justify-center\">\r\n                    <div class=\"question-inner vx-pl-5 vx-pb-5\">\r\n                        <!-- <button class=\"page-title vx-fs-11 vx-fw-600 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center vx-w-100\" (click)=\"addPageDetails()\"><i class=\"icons vx-fs-16 vx-mr-1\">&#xe90a;</i> PAGE TITLE</button> -->\r\n                        <div class=\"heading vx-fs-18 vx-paragraph-txt vx-text-center vx-w-100\">Select a question type to begin:</div>\r\n                        <app-question-type (addQuestion)=\"editorService.addQuestion($event)\"></app-question-type>\r\n                    </div>\r\n\r\n                    <!-- <ng-template #elseBlock>\r\n                        <div>\r\n                            <app-editor-loader></app-editor-loader>\r\n                        </div>\r\n                    </ng-template> -->\r\n\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!isPageEmpty() || editorService.currentPageNumber < 0\">\r\n                <div class=\"editor-section\">\r\n                    <div class=\"editor-section-body vx-d-flex\">\r\n                        <app-toolkit (addQuestion)=\"editorService.addQuestion($event)\"></app-toolkit>\r\n\r\n                        <div class=\"editor-section-inner\">\r\n                            <app-welcome-thankyou *ngIf='editorService.stepIdentifier==\"welcomescreen\"' [entityData]=\"editorService?.formsPage\" [service]=\"editorService\" (deleteQuestion)=\"deleteQuestionWithValidation('welcome')\"></app-welcome-thankyou>\r\n                        <!-- <app-preview-welcome></app-preview-welcome> -->\r\n                    <ng-container *ngIf='editorService.stepIdentifier==\"pagescreen\"'>\r\n                        <button *ngIf='editorService.stepIdentifier==\"pagescreen\" && editorService.showAddPageOption ' class=\"page-title vx-fs-11 vx-fw-600 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-mb-2 vx-d-flex vx-align-center vx-justify-center vx-w-100\" (click)=\"addPageDetails()\"><i class=\"icons vx-fs-16 vx-mr-1\">&#xe90a;</i> PAGE TITLE</button>\r\n                            <app-page-header (edit)=\"addPageDetails()\" *ngIf='editorService.stepIdentifier==\"pagescreen\" && editorService.showPageDetails' [pageName]=\"editorService.currentPageDetails.pageName\" [pageDescription]=\"editorService.currentPageDetails.pageDescription\"></app-page-header>\r\n                            <ng-container *ngFor=\"let question of editorService.formsPage.elements;let questionIndex = index\">\r\n                                <ng-container *ngIf=\"question.page === editorService.currentPageNumber && editorService.stepIdentifier=='pagescreen'\">\r\n                                    <app-editor-wrapper  *ngIf=\"editorService.activeQuestion === questionIndex\" [service]=\"editorService\" [question]=\"question\" [questionIndex]=\"questionIndex\"\r\n                                    (validQuestionData)=\"checkforError($event)\"\r\n                                    (deleteQuestion)=\"deleteQuestionWithValidation($event)\"\r\n                                    (copyQuestion)=\"editorService.copyQuestion($event)\"></app-editor-wrapper>\r\n                                    <app-preview-wrapper *ngIf=\"editorService.activeQuestion !== questionIndex\"  [question]=\"question\" [questionIndex]=\"questionIndex\"\r\n                                    (makeActiveQuestion)=\"editorService.activeQuestion = $event\"></app-preview-wrapper>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <div class=\"next-question-area\">\r\n                                <button class=\"page-title vx-fs-11 vx-fw-600 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-mb-2 vx-d-flex vx-align-center vx-justify-center vx-w-100\" (click)=\"openQuestion()\"><i class=\"icons vx-fs-16 vx-mr-1\">&#xe90a;</i> NEXT QUESTION</button>\r\n                                <div class=\"next-question-popup vx-p-3\" *ngIf=\"hideQuestion\">\r\n                                    <app-question-type (addQuestion)=\"editorService.addQuestion($event);closeQuestion()\"></app-question-type>\r\n                                </div>\r\n                                <div class=\"overlay\" *ngIf=\"hideQuestion\" (click)=\"closeQuestion()\"></div>\r\n                            </div>\r\n                            <button *ngIf=\"openPortal !== 'RESPONSIBILITY_CHECKPOINT'\" (click)=\"addNewPage()\" class=\"page-title vx-fs-11 vx-fw-600 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-mb-2 vx-d-flex vx-align-center vx-justify-center vx-w-100\"><i class=\"icons vx-fs-16 vx-mr-1\">&#xe90a;</i> ADD NEW PAGE</button>\r\n                        </ng-container>\r\n                        </div>\r\n\r\n                        <div class=\"right-side-btn\">\r\n                            <button *ngIf=\"!expandPage\" (click)=\"clickExpand()\" class=\"fullscreen-btn vx-fs-14 vx-txt-blue vx-p-0 vx-m-0 vx-mb-3 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Expand Page'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xe945;</i></button>\r\n                            <button *ngIf=\"expandPage\" (click)=\"closeExpand()\" class=\"fullscreen-btn vx-fs-14 vx-txt-blue vx-p-0 vx-m-0 vx-mb-3 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Shrink Page'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xe944;</i></button>\r\n                            <button *ngIf=\"editorService.stepIdentifier=='pagescreen'\" (click)=\"deletePage()\" class=\"delete-btn vx-fs-14 vx-txt-red vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Delete Page'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xe923;</i></button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"editor-section-footer vx-d-flex vx-align-center vx-justify-center vx-mt-4\">\r\n                        <button (click)=\"setIsUploaded.emit(false)\" class=\"cancel-btn vx-fs-14 vx-fw-500 vx-txt-red vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center\">CANCEL</button>\r\n                        <button  *ngIf=\"openPortal === 'ASSESSMENT_IMPORT'\" (click)=\"submitAfterErrorCheck('DRAFT')\" [class.disabled]=\"assessmentCurrentState === 'ACTIVE'\" class=\" white-btn vx-fs-14 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center\">SAVE AS DRAFT</button>\r\n                        <button  *ngIf=\"openPortal === 'ASSESSMENT_IMPORT'\" (click)=\"submitAfterErrorCheck('ACTIVE')\" class=\" blue-btn vx-fs-14 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center\">PUBLISH</button>\r\n                        <button *ngIf=\"openPortal === 'RESPONSIBILITY_CHECKPOINT'\" (click)=\"submitAfterErrorCheck('ACTIVE')\" class=\" blue-btn vx-fs-14 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-mr-1 vx-d-flex vx-align-center vx-justify-center\">NEXT &nbsp;<i class=\"icons\">&#xe91e;</i></button>\r\n                        <!-- <button (click)=\"pageMode = 'PREVIEW'\" class=\"preview-btn vx-fs-20 vx-txt-white vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Preview'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xeae5;</i></button> -->\r\n                        <button *ngIf=\"false\" class=\"close-btn vx-fs-12 vx-txt-white vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" [appTooltip]=\"'Close'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons\">&#xe90d;</i></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            \r\n        </div>\r\n    </div>\r\n    <!-- <app-assessment-preview-container *ngIf=\"pageMode === 'PREVIEW'\" [questionDetails]=\"editorService.formsPage\"></app-assessment-preview-container> -->\r\n</ng-container>\r\n\r\n<!-- <app-editor-loader *ngIf=\"!isLoaded\"></app-editor-loader> -->",
                 providers: [EditorService],
                 styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");.create-assessment-container{position:relative}.create-assessment-container.full-page{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;margin:0!important;z-index:9}.create-assessment-container.full-page .create-assessment-head{border-radius:0}.create-assessment-container.full-page .create-assessment-body{border-radius:0;height:calc(100vh - 2.5rem)}.create-assessment-container.full-page .create-assessment-body .editor-section-body .right-side-btn{top:4.75rem;right:5rem}.create-assessment-container.full-page .create-assessment-body .editor-section-footer{border-radius:0}.create-assessment-head{background:#fbfbfb;border-top:3px solid #1e5dd3;border-bottom:1px solid #f1f1f1;height:2.5rem}.create-assessment-head .left{width:calc(100% - 22rem)}.create-assessment-head .left .heading{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 10rem)}.create-assessment-head .left button.edit-btn{background:transparent;border:none;border-radius:0}.create-assessment-head .left.with-template-btn{width:calc(100% - 30rem)}.create-assessment-head .right button.page-dropdown{background:#fff;border-radius:.125rem;border:1px solid #bcbcbc;position:relative;height:1.5rem;width:11.5rem}.create-assessment-head .right button.page-dropdown .page-label{background:#f1f1f1;border-radius:.125rem;color:#042e7d}.create-assessment-head .right button.page-dropdown .arrow{position:absolute;top:.375rem;right:.5rem}.create-assessment-head .right button.settings-btn{background:#1e5dd3;border-radius:.125rem;border:none;height:1.5rem}.create-assessment-head .right button.template-btn{background:#34aa44;border-radius:.125rem;border:none;height:1.5rem}.create-assessment-body{background:#fff;border-radius:0 0 .125rem .125rem;height:calc(100vh - 2.5rem);scrollbar-width:thin}.create-assessment-body::-webkit-scrollbar-track{background-color:#f1f1f1}.create-assessment-body::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}.create-assessment-body app-toolkit{position:sticky;top:0}.create-assessment-body .select-question-part{padding-top:2.5rem;padding-bottom:3.75rem}.create-assessment-body .select-question-part .question-inner{padding-top:2.75rem;width:calc(64rem + 5rem);height:calc(100vh - 9rem);overflow:auto;padding-right:3.75rem;position:relative;left:.625rem}.create-assessment-body .select-question-part .question-inner::-webkit-scrollbar-track{background-color:transparent}.create-assessment-body .select-question-part .question-inner .heading{margin-top:4rem;margin-bottom:2rem}.create-assessment-body .editor-section{height:100%}.create-assessment-body .editor-section-body{height:calc(100% - 5.25rem);position:relative;overflow:auto}.create-assessment-body .editor-section-body::-webkit-scrollbar-track{background-color:transparent}.create-assessment-body .editor-section-body .right-side-btn{position:fixed;top:180px;right:100px}.create-assessment-body .editor-section-body .right-side-btn button{background:#f8f8f8;border-radius:.125rem;border:none;width:1.5rem;height:1.5rem}.create-assessment-body .editor-section-inner{width:60rem;margin:0 auto;padding:2rem 0;height:100%}@media screen and (max-width:1366px){.create-assessment-body .editor-section-inner{width:55rem!important}}.create-assessment-body .editor-section-inner .next-question-area{position:relative}.create-assessment-body .editor-section-inner .next-question-area ::ng-deep app-question-type .question-type ul li{width:10rem!important}.create-assessment-body .editor-section-inner .next-question-area .overlay{z-index:8}.create-assessment-body .editor-section-inner .next-question-popup{background:#fff;border-radius:.25rem;box-shadow:0 0 6px #1e5dd326;position:absolute;left:0;right:0;bottom:0;z-index:9}.create-assessment-body .editor-section-footer{background:#fff;border-radius:0 0 .125rem .125rem;box-shadow:0 -3px 6px #1e5dd326;height:4.25rem;position:relative}.create-assessment-body .editor-section-footer button{border-radius:.125rem;width:12.5rem;height:2.75rem;letter-spacing:1.5px}.create-assessment-body .editor-section-footer button.cancel-btn,.create-assessment-body .editor-section-footer button.white-btn{background:#fff;border:1px solid #dbdbdb}.create-assessment-body .editor-section-footer button.blue-btn{background:#1e5dd3;border:none}.create-assessment-body .editor-section-footer button.disabled{opacity:.7;pointer-events:none;cursor:not-allowed}.create-assessment-body .editor-section-footer button.preview-btn{background:#34aa44;border-radius:.125rem;border:none;width:2.75rem;height:2.5rem;position:absolute;bottom:.875rem;right:1rem}.create-assessment-body .editor-section-footer button.close-btn{background:#d93b41;border-radius:.125rem;border:none;width:2.75rem;height:2.5rem;position:absolute;bottom:.875rem;right:1rem}button.page-title{background:#fff;border:1px dashed #dbdbdb;border-radius:.25rem;height:3.125rem;transition:all .3s ease-in-out}button.page-title:hover{border-color:#1e5dd3;color:#1e5dd3}.page-dropdown-popup{background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:.25rem;width:11.5rem;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}.page-dropdown-popup ul{list-style-type:none;max-height:12rem;overflow-y:auto}.page-dropdown-popup ul li{border-bottom:1px solid #f1f1f1;list-style-type:none}.page-dropdown-popup ul li:last-of-type,.page-dropdown-popup ul li:only-child{border-bottom:none}.page-dropdown-popup ul li button{background:transparent;border:none;border-radius:0;text-align:left}.page-dropdown-popup ul li button .page-label{background:#f1f1f1;border-radius:.125rem;color:#042e7d}.page-dropdown-popup .action-bottom{background:#f8f8f8;border-top:1px solid #f1f1f1;border-radius:0 0 .125rem .125rem}.page-dropdown-popup .action-bottom button{border-radius:.125rem;height:1.5rem}.page-dropdown-popup .action-bottom button.add-page{background:#1e5dd3;border:1px solid #1e5dd3}.page-number{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.disabled{opacity:.7;pointer-events:none;cursor:not-allowed}"]
             },] }
@@ -18037,7 +18056,8 @@ CreateAssessmentContainerComponent.propDecorators = {
     openPortal: [{ type: Input }],
     setIsUploaded: [{ type: Output }],
     postAssessment: [{ type: Output }],
-    assessmentData: [{ type: Input, args: ['assessmentJSON',] }]
+    assessmentData: [{ type: Input, args: ['assessmentJSON',] }],
+    checkpointData: [{ type: Input, args: ['checkpointJSON',] }]
 };
 
 class QuestionTypeComponent {