vcomply-workflow-engine 3.4.70 → 3.4.72

package/fesm2015/vcomply-workflow-engine.mjs

@@ -34053,9 +34053,11 @@ class LinkResponsibilityListComponent {
         this.getResponsibilityList();
     }
     deleteItem(item) {
-        this.selectedResponsibilityValues = {};
+        const index = this.selectedResponsibilityId.findIndex((element) => element == item[this.respIdKey]);
+        this.selectedResponsibilityId.splice(index, 1);
+        this.selectedResponsibilityValues = this.selectedResponsibilityValues.filter((ele) => ele[this.respIdKey] !== item[this.respIdKey]);
         this.isValidObj = false;
-        this.selectedResponsibilityId = [];
+        this.setList();
     }
     save(event) {
         this.closeButton.emit();
@@ -34101,45 +34103,39 @@ class LinkResponsibilityListComponent {
         }
         else {
             this.selectedResponsibilityId.splice(index, 1);
+            this.selectedResponsibilityValues = this.selectedResponsibilityValues.filter((ele) => ele[this.respIdKey] !== resp);
             this.setList();
         }
     }
     setList() {
-        var _a;
+        var _a, _b;
         const data = [];
         const respValues = cloneDeep(this.selectedResponsibilityValues);
         const respList = cloneDeep(this.responsibilitiesData.data);
         const selectedResponsibilityId = cloneDeep(this.selectedResponsibilityId);
-        respList.forEach((element) => {
-            if (selectedResponsibilityId.includes(element[this.respIdKey])) {
-                data.push(element);
-                const index = selectedResponsibilityId.indexOf(element[this.respIdKey]);
-                if (index !== -1) {
-                    selectedResponsibilityId.splice(index, 1);
-                }
+        selectedResponsibilityId.forEach((element) => {
+            const foundResponsibility = respList.find((ele) => ele[this.respIdKey] === element);
+            if (foundResponsibility) {
+                data.push(foundResponsibility);
             }
         });
-        if (this.selectedResponsibilityValues.length > 0) {
-            data.forEach((element) => {
-                if (!respValues.find((ele) => ele[this.respIdKey] === element[this.respIdKey])) {
-                    respValues.push(element);
-                }
-            });
-            this.selectedResponsibilityValues = respValues;
+        if (((_a = this.selectedResponsibilityValues) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const newData = data.filter(element => !respValues.some((value) => value[this.respIdKey] === element[this.respIdKey]));
+            this.selectedResponsibilityValues = [...respValues, ...newData];
         }
         else {
             this.selectedResponsibilityValues = data;
         }
         this.isValidObj = this.selectedResponsibilityValues
-            ? ((_a = Object.keys(this.selectedResponsibilityValues)) === null || _a === void 0 ? void 0 : _a.length) > 0
+            ? ((_b = Object.keys(this.selectedResponsibilityValues)) === null || _b === void 0 ? void 0 : _b.length) > 0
             : false;
     }
 }
 LinkResponsibilityListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LinkResponsibilityListComponent, deps: [{ token: FrequencyService }], target: i0.ɵɵFactoryTarget.Component });
-LinkResponsibilityListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LinkResponsibilityListComponent, selector: "app-link-responsibility-list", inputs: { onCompletionOfResponsibility: "onCompletionOfResponsibility", feature: "feature", respIdKey: "respIdKey", selectedResponsibilityValues: "selectedResponsibilityValues", radioSelection: "radioSelection" }, outputs: { closeButton: "closeButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\r\n  <div\r\n    class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\"\r\n  >\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"frequency-responsibility-list-body\">\r\n    <div\r\n      *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\r\n      class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n    >\r\n      <ng-container *ngFor=\"let tab of responsibilityTabs; let i = index\">\r\n        <div\r\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\r\n          [class.active]=\"currentTab === i + 1 || (currentTab === 0 && i === 3)\"\r\n          (click)=\"onClickTabChange(tab)\"\r\n          [class.pointer-none]=\"responsibilityLoader\"\r\n        >\r\n          <div class=\"left vx-d-block vx-w-100\">\r\n            <div class=\"label vx-d-flex vx-align-center\">\r\n              <label\r\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\r\n                >{{ tab.name }}</label\r\n              >\r\n            </div>\r\n          </div>\r\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n            <span\r\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\r\n              >{{\r\n                responsibilityTabCount[typeToCountProperty[tab.type]] || 0\r\n              }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\r\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"responsibilitySearchText\"\r\n        (keyup.enter)=\"search()\"\r\n        placeholder=\"Search Responsibilities\"\r\n      />\r\n    </div>\r\n    <app-pagination\r\n      *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\r\n      [start]=\"responsibilitiesData?.responsibilities_from\"\r\n      [end]=\"responsibilitiesData?.responsibilities_to\"\r\n      [total]=\"responsibilitiesData?.total_responsibilities\"\r\n      [pageCount]=\"responsibilitiesData?.total_pages\"\r\n      [currentPage]=\"responsibilityCurrentPage\"\r\n      (selectedPage)=\"responsibilityPageChange($event)\"\r\n    >\r\n    </app-pagination>\r\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\r\n    <div\r\n      class=\"frequency-responsibility-list-mid vx-mb-4\"\r\n      [class.with-pagination]=\"\r\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\r\n      \"\r\n    >\r\n      <app-no-data\r\n        *ngIf=\"\r\n          responsibilitiesData?.data?.length === 0 && !responsibilityLoader\r\n        \"\r\n        [noDataImage]=\"noDataImagePath\"\r\n        [noDataText]=\"noDataMessage\"\r\n      ></app-no-data>\r\n      <ng-container\r\n        *ngIf=\"responsibilitiesData?.data?.length > 0 && !responsibilityLoader\"\r\n      >\r\n        <div class=\"table-header\">\r\n          <div class=\"table-row\">\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\r\n            >\r\n              #\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\r\n              [class.with-rc]=\"isOnCompletionRc\"\r\n            >\r\n              RESPONSIBILITIES\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\"\r\n              *ngIf=\"isOnCompletionRc\"\r\n            >\r\n              RESPONSIBILITY CENTER\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\"\r\n            >\r\n              PROGRAMS\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"table-body\">\r\n          <div\r\n            class=\"table-row\"\r\n            [class.active]=\"\r\n              selectedResponsibilityId?.includes(responsibility?.ReportId)\r\n            \"\r\n            *ngFor=\"\r\n              let responsibility of responsibilitiesData?.data;\r\n              let i = index\r\n            \"\r\n          >\r\n            <div\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\r\n            >\r\n              <app-cs-checkbox\r\n                [ngValue]=\"\r\n                  selectedResponsibilityId?.includes(responsibility?.ReportId)\r\n                \"\r\n                (ngValueChange)=\"selectResp(responsibility?.ReportId, $event)\"\r\n              >\r\n              </app-cs-checkbox>\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\r\n              [class.with-rc]=\"isOnCompletionRc\"\r\n            >\r\n              <div\r\n                class=\"value vx-fs-12 vx-label-txt vx-pr-5\"\r\n                [appTooltip]=\"responsibility?.ReportName\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"true\"\r\n              >\r\n                {{ responsibility?.ControlId }} {{ responsibility?.ReportName }}\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"\r\n                responsibility?.category_details_array[0]\r\n                  ?.category_name as categoryName\r\n              \"\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\"\r\n            >\r\n              <div class=\"program-inner vx-d-block\">\r\n                <div\r\n                  class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\"\r\n                  [appTooltip]=\"\r\n                    responsibility?.category_details_array[0]?.category_name ??\r\n                    '--'\r\n                  \"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"true\"\r\n                >\r\n                  {{ categoryName ?? \"--\" }}\r\n                </div>\r\n                <div\r\n                  *ngIf=\"\r\n                    responsibility?.category_details_array[0]\r\n                      ?.parent_category_name?.length\r\n                  \"\r\n                  class=\"within-part vx-d-flex vx-align-center vx-pr-3\"\r\n                >\r\n                  <div\r\n                    class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\"\r\n                  >\r\n                    Within\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"\r\n                      responsibility?.category_details_array[0]?.parent_category_name\r\n                        ?.slice()\r\n                        ?.reverse()\r\n                        ?.join(' < ') as parent_category\r\n                    \"\r\n                    class=\"within-value vx-fs-11 vx-paragraph-txt\"\r\n                    [appTooltip]=\"parent_category\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"true\"\r\n                  >\r\n                    {{ parent_category }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <button\r\n                *ngIf=\"responsibility?.category_details_array?.length >= 2\"\r\n                appPopover\r\n                (click)=\"programPopup.popover()\"\r\n                placement=\"right\"\r\n                class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n              >\r\n                +{{ responsibility?.category_details_array?.length - 1 }}\r\n              </button>\r\n              <app-popover #programPopup>\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li\r\n                      *ngFor=\"\r\n                        let subCategory of responsibility?.category_details_array\r\n                          | slice : 1\r\n                      \"\r\n                    >\r\n                      <div class=\"avatar-card\">\r\n                        <div class=\"vx-d-block vx-w-100\">\r\n                          <span\r\n                            class=\"value\"\r\n                            [appTooltip]=\"subCategory?.category_name\"\r\n                            placement=\"bottom-left\"\r\n                            delay=\"0\"\r\n                            type=\"black\"\r\n                            [tooltipMandatory]=\"true\"\r\n                            >{{ subCategory?.category_name }}</span\r\n                          >\r\n                          <div\r\n                            *ngIf=\"\r\n                              responsibility?.category_details_array[0]\r\n                                ?.parent_category_name?.length\r\n                            \"\r\n                            class=\"within-part vx-d-flex vx-align-center vx-pr-3\"\r\n                          >\r\n                            <div\r\n                              class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\"\r\n                            >\r\n                              Within\r\n                            </div>\r\n                            <div\r\n                              *ngIf=\"\r\n                                responsibility?.category_details_array[0]?.parent_category_name\r\n                                  ?.slice()\r\n                                  ?.reverse()\r\n                                  ?.join(' < ') as parent_category\r\n                              \"\r\n                              class=\"within-value vx-fs-11 vx-paragraph-txt\"\r\n                              [appTooltip]=\"parent_category\"\r\n                              placement=\"bottom-left\"\r\n                              delay=\"0\"\r\n                              type=\"black\"\r\n                              [tooltipMandatory]=\"true\"\r\n                            >\r\n                              {{ parent_category }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <app-floating-bar\r\n      [selectedData]=\"isValidObj ? selectedResponsibilityValues : []\"\r\n      [displayElementKey]=\"'ReportName'\"\r\n      (closeList)=\"back()\"\r\n      (closeEvent)=\"save($event)\"\r\n      (deleteEvent)=\"deleteItem($event)\"\r\n      [isDisabled]=\"!isValidObj\"\r\n    ></app-floating-bar>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 17.5rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-checkbox{display:flex}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 15.5rem);min-width:calc(100% - 15.5rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility.with-rc{width:calc(100% - 31rem);min-width:calc(100% - 31rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:15.5rem;min-width:15.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program{width:13.5rem;min-width:13.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent$1, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent$1, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: PaginationComponent$1, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
+LinkResponsibilityListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LinkResponsibilityListComponent, selector: "app-link-responsibility-list", inputs: { onCompletionOfResponsibility: "onCompletionOfResponsibility", feature: "feature", respIdKey: "respIdKey", selectedResponsibilityValues: "selectedResponsibilityValues", radioSelection: "radioSelection" }, outputs: { closeButton: "closeButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\r\n  <div\r\n    class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\"\r\n  >\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"frequency-responsibility-list-body\">\r\n    <div\r\n      *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\r\n      class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n    >\r\n      <ng-container *ngFor=\"let tab of responsibilityTabs; let i = index\">\r\n        <div\r\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\r\n          [class.active]=\"currentTab === i + 1 || (currentTab === 0 && i === 3)\"\r\n          (click)=\"onClickTabChange(tab)\"\r\n          [class.pointer-none]=\"responsibilityLoader\"\r\n        >\r\n          <div class=\"left vx-d-block vx-w-100\">\r\n            <div class=\"label vx-d-flex vx-align-center\">\r\n              <label\r\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\r\n                >{{ tab.name }}</label\r\n              >\r\n            </div>\r\n          </div>\r\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n            <span\r\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\r\n              >{{\r\n                responsibilityTabCount[typeToCountProperty[tab.type]] || 0\r\n              }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\r\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"responsibilitySearchText\"\r\n        (keyup.enter)=\"search()\"\r\n        placeholder=\"Search Responsibilities\"\r\n      />\r\n    </div>\r\n    <app-pagination\r\n      *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\r\n      [start]=\"responsibilitiesData?.responsibilities_from\"\r\n      [end]=\"responsibilitiesData?.responsibilities_to\"\r\n      [total]=\"responsibilitiesData?.total_responsibilities\"\r\n      [pageCount]=\"responsibilitiesData?.total_pages\"\r\n      [currentPage]=\"responsibilityCurrentPage\"\r\n      (selectedPage)=\"responsibilityPageChange($event)\"\r\n    >\r\n    </app-pagination>\r\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\r\n    <div\r\n      class=\"frequency-responsibility-list-mid vx-mb-4\"\r\n      [class.with-pagination]=\"\r\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\r\n      \"\r\n    >\r\n      <app-no-data\r\n        *ngIf=\"\r\n          responsibilitiesData?.data?.length === 0 && !responsibilityLoader\r\n        \"\r\n        [noDataImage]=\"noDataImagePath\"\r\n        [noDataText]=\"noDataMessage\"\r\n      ></app-no-data>\r\n      <ng-container\r\n        *ngIf=\"responsibilitiesData?.data?.length > 0 && !responsibilityLoader\"\r\n      >\r\n        <div class=\"table-header\">\r\n          <div class=\"table-row\">\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\r\n            >\r\n              #\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\r\n              [class.with-rc]=\"isOnCompletionRc\"\r\n            >\r\n              RESPONSIBILITIES\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\"\r\n              *ngIf=\"isOnCompletionRc\"\r\n            >\r\n              RESPONSIBILITY CENTER\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\"\r\n            >\r\n              PROGRAMS\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"table-body\">\r\n          <div\r\n            class=\"table-row\"\r\n            [class.active]=\"\r\n              selectedResponsibilityId?.includes(responsibility?.ReportId)\r\n            \"\r\n            *ngFor=\"\r\n              let responsibility of responsibilitiesData?.data;\r\n              let i = index\r\n            \"\r\n          >\r\n            <div\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\r\n            >\r\n              <app-cs-checkbox\r\n                [ngValue]=\"\r\n                  selectedResponsibilityId?.includes(responsibility?.ReportId)\r\n                \"\r\n                (ngValueChange)=\"selectResp(responsibility?.ReportId, $event)\"\r\n              >\r\n              </app-cs-checkbox>\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\r\n              [class.with-rc]=\"isOnCompletionRc\"\r\n            >\r\n              <div\r\n                class=\"value vx-fs-12 vx-label-txt vx-pr-5\"\r\n                [appTooltip]=\"responsibility?.ReportName\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"true\"\r\n              >\r\n                {{ responsibility?.ControlId }} {{ responsibility?.ReportName }}\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"\r\n                responsibility?.category_details_array[0]\r\n                  ?.category_name as categoryName\r\n              \"\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\"\r\n            >\r\n              <div class=\"program-inner vx-d-block\">\r\n                <div\r\n                  class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\"\r\n                  [appTooltip]=\"\r\n                    responsibility?.category_details_array[0]?.category_name ??\r\n                    '--'\r\n                  \"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"true\"\r\n                >\r\n                  {{ categoryName ?? \"--\" }}\r\n                </div>\r\n                <div\r\n                  *ngIf=\"\r\n                    responsibility?.category_details_array[0]\r\n                      ?.parent_category_name?.length\r\n                  \"\r\n                  class=\"within-part vx-d-flex vx-align-center vx-pr-3\"\r\n                >\r\n                  <div\r\n                    class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\"\r\n                  >\r\n                    Within\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"\r\n                      responsibility?.category_details_array[0]?.parent_category_name\r\n                        ?.slice()\r\n                        ?.reverse()\r\n                        ?.join(' < ') as parent_category\r\n                    \"\r\n                    class=\"within-value vx-fs-11 vx-paragraph-txt\"\r\n                    [appTooltip]=\"parent_category\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"true\"\r\n                  >\r\n                    {{ parent_category }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <button\r\n                *ngIf=\"responsibility?.category_details_array?.length >= 2\"\r\n                appPopover\r\n                (click)=\"programPopup.popover()\"\r\n                placement=\"right\"\r\n                class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n              >\r\n                +{{ responsibility?.category_details_array?.length - 1 }}\r\n              </button>\r\n              <app-popover #programPopup>\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li\r\n                      *ngFor=\"\r\n                        let subCategory of responsibility?.category_details_array\r\n                          | slice : 1\r\n                      \"\r\n                    >\r\n                      <div class=\"avatar-card\">\r\n                        <div class=\"vx-d-block vx-w-100\">\r\n                          <span\r\n                            class=\"value\"\r\n                            [appTooltip]=\"subCategory?.category_name\"\r\n                            placement=\"bottom-left\"\r\n                            delay=\"0\"\r\n                            type=\"black\"\r\n                            [tooltipMandatory]=\"true\"\r\n                            >{{ subCategory?.category_name }}</span\r\n                          >\r\n                          <div\r\n                            *ngIf=\"\r\n                              responsibility?.category_details_array[0]\r\n                                ?.parent_category_name?.length\r\n                            \"\r\n                            class=\"within-part vx-d-flex vx-align-center vx-pr-3\"\r\n                          >\r\n                            <div\r\n                              class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\"\r\n                            >\r\n                              Within\r\n                            </div>\r\n                            <div\r\n                              *ngIf=\"\r\n                                responsibility?.category_details_array[0]?.parent_category_name\r\n                                  ?.slice()\r\n                                  ?.reverse()\r\n                                  ?.join(' < ') as parent_category\r\n                              \"\r\n                              class=\"within-value vx-fs-11 vx-paragraph-txt\"\r\n                              [appTooltip]=\"parent_category\"\r\n                              placement=\"bottom-left\"\r\n                              delay=\"0\"\r\n                              type=\"black\"\r\n                              [tooltipMandatory]=\"true\"\r\n                            >\r\n                              {{ parent_category }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <app-floating-bar\r\n      [selectedData]=\"isValidObj ? selectedResponsibilityValues : []\"\r\n      [displayElementKey]=\"'ReportName'\"\r\n      (closeList)=\"back()\"\r\n      (closeEvent)=\"save($event)\"\r\n      (deleteEvent)=\"deleteItem($event)\"\r\n      [isDisabled]=\"!isValidObj\"\r\n    ></app-floating-bar>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 17.5rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-checkbox{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-checkbox{display:flex}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 15.5rem);min-width:calc(100% - 15.5rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility.with-rc{width:calc(100% - 31rem);min-width:calc(100% - 31rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:15.5rem;min-width:15.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program{width:13.5rem;min-width:13.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsCheckboxComponent$1, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent$1, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: PaginationComponent$1, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LinkResponsibilityListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-link-responsibility-list', template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\r\n  <div\r\n    class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\"\r\n  >\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"frequency-responsibility-list-body\">\r\n    <div\r\n      *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\r\n      class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n    >\r\n      <ng-container *ngFor=\"let tab of responsibilityTabs; let i = index\">\r\n        <div\r\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\r\n          [class.active]=\"currentTab === i + 1 || (currentTab === 0 && i === 3)\"\r\n          (click)=\"onClickTabChange(tab)\"\r\n          [class.pointer-none]=\"responsibilityLoader\"\r\n        >\r\n          <div class=\"left vx-d-block vx-w-100\">\r\n            <div class=\"label vx-d-flex vx-align-center\">\r\n              <label\r\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\r\n                >{{ tab.name }}</label\r\n              >\r\n            </div>\r\n          </div>\r\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n            <span\r\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\r\n              >{{\r\n                responsibilityTabCount[typeToCountProperty[tab.type]] || 0\r\n              }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\r\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"responsibilitySearchText\"\r\n        (keyup.enter)=\"search()\"\r\n        placeholder=\"Search Responsibilities\"\r\n      />\r\n    </div>\r\n    <app-pagination\r\n      *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\r\n      [start]=\"responsibilitiesData?.responsibilities_from\"\r\n      [end]=\"responsibilitiesData?.responsibilities_to\"\r\n      [total]=\"responsibilitiesData?.total_responsibilities\"\r\n      [pageCount]=\"responsibilitiesData?.total_pages\"\r\n      [currentPage]=\"responsibilityCurrentPage\"\r\n      (selectedPage)=\"responsibilityPageChange($event)\"\r\n    >\r\n    </app-pagination>\r\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\r\n    <div\r\n      class=\"frequency-responsibility-list-mid vx-mb-4\"\r\n      [class.with-pagination]=\"\r\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\r\n      \"\r\n    >\r\n      <app-no-data\r\n        *ngIf=\"\r\n          responsibilitiesData?.data?.length === 0 && !responsibilityLoader\r\n        \"\r\n        [noDataImage]=\"noDataImagePath\"\r\n        [noDataText]=\"noDataMessage\"\r\n      ></app-no-data>\r\n      <ng-container\r\n        *ngIf=\"responsibilitiesData?.data?.length > 0 && !responsibilityLoader\"\r\n      >\r\n        <div class=\"table-header\">\r\n          <div class=\"table-row\">\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\r\n            >\r\n              #\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\r\n              [class.with-rc]=\"isOnCompletionRc\"\r\n            >\r\n              RESPONSIBILITIES\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\"\r\n              *ngIf=\"isOnCompletionRc\"\r\n            >\r\n              RESPONSIBILITY CENTER\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\"\r\n            >\r\n              PROGRAMS\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"table-body\">\r\n          <div\r\n            class=\"table-row\"\r\n            [class.active]=\"\r\n              selectedResponsibilityId?.includes(responsibility?.ReportId)\r\n            \"\r\n            *ngFor=\"\r\n              let responsibility of responsibilitiesData?.data;\r\n              let i = index\r\n            \"\r\n          >\r\n            <div\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\r\n            >\r\n              <app-cs-checkbox\r\n                [ngValue]=\"\r\n                  selectedResponsibilityId?.includes(responsibility?.ReportId)\r\n                \"\r\n                (ngValueChange)=\"selectResp(responsibility?.ReportId, $event)\"\r\n              >\r\n              </app-cs-checkbox>\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\r\n              [class.with-rc]=\"isOnCompletionRc\"\r\n            >\r\n              <div\r\n                class=\"value vx-fs-12 vx-label-txt vx-pr-5\"\r\n                [appTooltip]=\"responsibility?.ReportName\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"true\"\r\n              >\r\n                {{ responsibility?.ControlId }} {{ responsibility?.ReportName }}\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"\r\n                responsibility?.category_details_array[0]\r\n                  ?.category_name as categoryName\r\n              \"\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\"\r\n            >\r\n              <div class=\"program-inner vx-d-block\">\r\n                <div\r\n                  class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\"\r\n                  [appTooltip]=\"\r\n                    responsibility?.category_details_array[0]?.category_name ??\r\n                    '--'\r\n                  \"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"true\"\r\n                >\r\n                  {{ categoryName ?? \"--\" }}\r\n                </div>\r\n                <div\r\n                  *ngIf=\"\r\n                    responsibility?.category_details_array[0]\r\n                      ?.parent_category_name?.length\r\n                  \"\r\n                  class=\"within-part vx-d-flex vx-align-center vx-pr-3\"\r\n                >\r\n                  <div\r\n                    class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\"\r\n                  >\r\n                    Within\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"\r\n                      responsibility?.category_details_array[0]?.parent_category_name\r\n                        ?.slice()\r\n                        ?.reverse()\r\n                        ?.join(' < ') as parent_category\r\n                    \"\r\n                    class=\"within-value vx-fs-11 vx-paragraph-txt\"\r\n                    [appTooltip]=\"parent_category\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"true\"\r\n                  >\r\n                    {{ parent_category }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <button\r\n                *ngIf=\"responsibility?.category_details_array?.length >= 2\"\r\n                appPopover\r\n                (click)=\"programPopup.popover()\"\r\n                placement=\"right\"\r\n                class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n              >\r\n                +{{ responsibility?.category_details_array?.length - 1 }}\r\n              </button>\r\n              <app-popover #programPopup>\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li\r\n                      *ngFor=\"\r\n                        let subCategory of responsibility?.category_details_array\r\n                          | slice : 1\r\n                      \"\r\n                    >\r\n                      <div class=\"avatar-card\">\r\n                        <div class=\"vx-d-block vx-w-100\">\r\n                          <span\r\n                            class=\"value\"\r\n                            [appTooltip]=\"subCategory?.category_name\"\r\n                            placement=\"bottom-left\"\r\n                            delay=\"0\"\r\n                            type=\"black\"\r\n                            [tooltipMandatory]=\"true\"\r\n                            >{{ subCategory?.category_name }}</span\r\n                          >\r\n                          <div\r\n                            *ngIf=\"\r\n                              responsibility?.category_details_array[0]\r\n                                ?.parent_category_name?.length\r\n                            \"\r\n                            class=\"within-part vx-d-flex vx-align-center vx-pr-3\"\r\n                          >\r\n                            <div\r\n                              class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\"\r\n                            >\r\n                              Within\r\n                            </div>\r\n                            <div\r\n                              *ngIf=\"\r\n                                responsibility?.category_details_array[0]?.parent_category_name\r\n                                  ?.slice()\r\n                                  ?.reverse()\r\n                                  ?.join(' < ') as parent_category\r\n                              \"\r\n                              class=\"within-value vx-fs-11 vx-paragraph-txt\"\r\n                              [appTooltip]=\"parent_category\"\r\n                              placement=\"bottom-left\"\r\n                              delay=\"0\"\r\n                              type=\"black\"\r\n                              [tooltipMandatory]=\"true\"\r\n                            >\r\n                              {{ parent_category }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <app-floating-bar\r\n      [selectedData]=\"isValidObj ? selectedResponsibilityValues : []\"\r\n      [displayElementKey]=\"'ReportName'\"\r\n      (closeList)=\"back()\"\r\n      (closeEvent)=\"save($event)\"\r\n      (deleteEvent)=\"deleteItem($event)\"\r\n      [isDisabled]=\"!isValidObj\"\r\n    ></app-floating-bar>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 17.5rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-checkbox{display:flex}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 15.5rem);min-width:calc(100% - 15.5rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility.with-rc{width:calc(100% - 31rem);min-width:calc(100% - 31rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:15.5rem;min-width:15.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program{width:13.5rem;min-width:13.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
+            args: [{ selector: 'app-link-responsibility-list', template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\r\n  <div\r\n    class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\"\r\n  >\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"frequency-responsibility-list-body\">\r\n    <div\r\n      *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\r\n      class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n    >\r\n      <ng-container *ngFor=\"let tab of responsibilityTabs; let i = index\">\r\n        <div\r\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\r\n          [class.active]=\"currentTab === i + 1 || (currentTab === 0 && i === 3)\"\r\n          (click)=\"onClickTabChange(tab)\"\r\n          [class.pointer-none]=\"responsibilityLoader\"\r\n        >\r\n          <div class=\"left vx-d-block vx-w-100\">\r\n            <div class=\"label vx-d-flex vx-align-center\">\r\n              <label\r\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\r\n                >{{ tab.name }}</label\r\n              >\r\n            </div>\r\n          </div>\r\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n            <span\r\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\r\n              >{{\r\n                responsibilityTabCount[typeToCountProperty[tab.type]] || 0\r\n              }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\r\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"responsibilitySearchText\"\r\n        (keyup.enter)=\"search()\"\r\n        placeholder=\"Search Responsibilities\"\r\n      />\r\n    </div>\r\n    <app-pagination\r\n      *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\r\n      [start]=\"responsibilitiesData?.responsibilities_from\"\r\n      [end]=\"responsibilitiesData?.responsibilities_to\"\r\n      [total]=\"responsibilitiesData?.total_responsibilities\"\r\n      [pageCount]=\"responsibilitiesData?.total_pages\"\r\n      [currentPage]=\"responsibilityCurrentPage\"\r\n      (selectedPage)=\"responsibilityPageChange($event)\"\r\n    >\r\n    </app-pagination>\r\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\r\n    <div\r\n      class=\"frequency-responsibility-list-mid vx-mb-4\"\r\n      [class.with-pagination]=\"\r\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\r\n      \"\r\n    >\r\n      <app-no-data\r\n        *ngIf=\"\r\n          responsibilitiesData?.data?.length === 0 && !responsibilityLoader\r\n        \"\r\n        [noDataImage]=\"noDataImagePath\"\r\n        [noDataText]=\"noDataMessage\"\r\n      ></app-no-data>\r\n      <ng-container\r\n        *ngIf=\"responsibilitiesData?.data?.length > 0 && !responsibilityLoader\"\r\n      >\r\n        <div class=\"table-header\">\r\n          <div class=\"table-row\">\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\r\n            >\r\n              #\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\r\n              [class.with-rc]=\"isOnCompletionRc\"\r\n            >\r\n              RESPONSIBILITIES\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\"\r\n              *ngIf=\"isOnCompletionRc\"\r\n            >\r\n              RESPONSIBILITY CENTER\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\"\r\n            >\r\n              PROGRAMS\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"table-body\">\r\n          <div\r\n            class=\"table-row\"\r\n            [class.active]=\"\r\n              selectedResponsibilityId?.includes(responsibility?.ReportId)\r\n            \"\r\n            *ngFor=\"\r\n              let responsibility of responsibilitiesData?.data;\r\n              let i = index\r\n            \"\r\n          >\r\n            <div\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\r\n            >\r\n              <app-cs-checkbox\r\n                [ngValue]=\"\r\n                  selectedResponsibilityId?.includes(responsibility?.ReportId)\r\n                \"\r\n                (ngValueChange)=\"selectResp(responsibility?.ReportId, $event)\"\r\n              >\r\n              </app-cs-checkbox>\r\n            </div>\r\n            <div\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\r\n              [class.with-rc]=\"isOnCompletionRc\"\r\n            >\r\n              <div\r\n                class=\"value vx-fs-12 vx-label-txt vx-pr-5\"\r\n                [appTooltip]=\"responsibility?.ReportName\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"true\"\r\n              >\r\n                {{ responsibility?.ControlId }} {{ responsibility?.ReportName }}\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"\r\n                responsibility?.category_details_array[0]\r\n                  ?.category_name as categoryName\r\n              \"\r\n              class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\"\r\n            >\r\n              <div class=\"program-inner vx-d-block\">\r\n                <div\r\n                  class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\"\r\n                  [appTooltip]=\"\r\n                    responsibility?.category_details_array[0]?.category_name ??\r\n                    '--'\r\n                  \"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"true\"\r\n                >\r\n                  {{ categoryName ?? \"--\" }}\r\n                </div>\r\n                <div\r\n                  *ngIf=\"\r\n                    responsibility?.category_details_array[0]\r\n                      ?.parent_category_name?.length\r\n                  \"\r\n                  class=\"within-part vx-d-flex vx-align-center vx-pr-3\"\r\n                >\r\n                  <div\r\n                    class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\"\r\n                  >\r\n                    Within\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"\r\n                      responsibility?.category_details_array[0]?.parent_category_name\r\n                        ?.slice()\r\n                        ?.reverse()\r\n                        ?.join(' < ') as parent_category\r\n                    \"\r\n                    class=\"within-value vx-fs-11 vx-paragraph-txt\"\r\n                    [appTooltip]=\"parent_category\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"true\"\r\n                  >\r\n                    {{ parent_category }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <button\r\n                *ngIf=\"responsibility?.category_details_array?.length >= 2\"\r\n                appPopover\r\n                (click)=\"programPopup.popover()\"\r\n                placement=\"right\"\r\n                class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n              >\r\n                +{{ responsibility?.category_details_array?.length - 1 }}\r\n              </button>\r\n              <app-popover #programPopup>\r\n                <div class=\"wf-action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li\r\n                      *ngFor=\"\r\n                        let subCategory of responsibility?.category_details_array\r\n                          | slice : 1\r\n                      \"\r\n                    >\r\n                      <div class=\"avatar-card\">\r\n                        <div class=\"vx-d-block vx-w-100\">\r\n                          <span\r\n                            class=\"value\"\r\n                            [appTooltip]=\"subCategory?.category_name\"\r\n                            placement=\"bottom-left\"\r\n                            delay=\"0\"\r\n                            type=\"black\"\r\n                            [tooltipMandatory]=\"true\"\r\n                            >{{ subCategory?.category_name }}</span\r\n                          >\r\n                          <div\r\n                            *ngIf=\"\r\n                              responsibility?.category_details_array[0]\r\n                                ?.parent_category_name?.length\r\n                            \"\r\n                            class=\"within-part vx-d-flex vx-align-center vx-pr-3\"\r\n                          >\r\n                            <div\r\n                              class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\"\r\n                            >\r\n                              Within\r\n                            </div>\r\n                            <div\r\n                              *ngIf=\"\r\n                                responsibility?.category_details_array[0]?.parent_category_name\r\n                                  ?.slice()\r\n                                  ?.reverse()\r\n                                  ?.join(' < ') as parent_category\r\n                              \"\r\n                              class=\"within-value vx-fs-11 vx-paragraph-txt\"\r\n                              [appTooltip]=\"parent_category\"\r\n                              placement=\"bottom-left\"\r\n                              delay=\"0\"\r\n                              type=\"black\"\r\n                              [tooltipMandatory]=\"true\"\r\n                            >\r\n                              {{ parent_category }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <app-floating-bar\r\n      [selectedData]=\"isValidObj ? selectedResponsibilityValues : []\"\r\n      [displayElementKey]=\"'ReportName'\"\r\n      (closeList)=\"back()\"\r\n      (closeEvent)=\"save($event)\"\r\n      (deleteEvent)=\"deleteItem($event)\"\r\n      [isDisabled]=\"!isValidObj\"\r\n    ></app-floating-bar>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 17.5rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-checkbox{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-checkbox{display:flex}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 15.5rem);min-width:calc(100% - 15.5rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility.with-rc{width:calc(100% - 31rem);min-width:calc(100% - 31rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:15.5rem;min-width:15.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program{width:13.5rem;min-width:13.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: FrequencyService }]; }, propDecorators: { onCompletionOfResponsibility: [{
                 type: Input
             }], feature: [{
@@ -34645,6 +34641,7 @@ class LogAnIssueComponent {
                 this.fieldDeselector(type);
                 break;
             case 'LINK_MORE_RESPONSIBILITY': {
+                this.getRCData(evt);
                 this.logIssueForm.responsibilityLinked = evt;
                 this.fieldDeselector(type);
                 break;
@@ -34704,14 +34701,35 @@ class LogAnIssueComponent {
                 }
                 break;
             case 'LINK_MORE_RESPONSIBILITY': {
-                const itemIndex = this.logIssueForm.responsibilityLinked.findIndex((item) => item['Report'] === element['ReportId']);
+                const itemIndex = this.logIssueForm.responsibilityLinked.findIndex((item) => item.ReportId === element.ReportId);
                 if (itemIndex > -1) {
                     this.logIssueForm.responsibilityLinked.splice(itemIndex, 1);
                 }
+                this.getRCData(this.logIssueForm.responsibilityLinked);
                 break;
             }
         }
     }
+    getRcId(rc) {
+        var _a, _b;
+        return ((_a = rc === null || rc === void 0 ? void 0 : rc.responsibilityCenterArr) === null || _a === void 0 ? void 0 : _a.length) ? rc.responsibilityCenterArr : (((_b = rc === null || rc === void 0 ? void 0 : rc.rc_id_arr) === null || _b === void 0 ? void 0 : _b.length) ? rc.rc_id_arr : []);
+    }
+    getRCData(evt) {
+        const rcSelected = [];
+        evt.forEach((element) => {
+            const rcId = this.getRcId(element);
+            if (rcId === null || rcId === void 0 ? void 0 : rcId.length) {
+                rcId.forEach((rcId) => {
+                    var _a;
+                    const rcData = (_a = this.listData) === null || _a === void 0 ? void 0 : _a.rcList.find((el) => (el === null || el === void 0 ? void 0 : el.rc_id) === rcId);
+                    if (rcData && !rcSelected.some((selectedEl) => (selectedEl === null || selectedEl === void 0 ? void 0 : selectedEl.rc_id) === (rcData === null || rcData === void 0 ? void 0 : rcData.rc_id))) {
+                        rcSelected.push(rcData);
+                    }
+                });
+            }
+        });
+        this.logIssueForm.issueRC = rcSelected;
+    }
     assignMyself(event) {
         this.removeError('entrustTo');
         this.logIssueForm.entrustTo = [];
@@ -34839,7 +34857,7 @@ class LogAnIssueComponent {
         }
     }
     addIssue() {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _e, _f, _g, _h, _j;
         const form = cloneDeep(this.logIssueForm);
         if (form.isAssignToMyself) {
             form.entrustTo = this.listData.userList.filter((emplist) => emplist.my_member_id === this.currentUser.id);
@@ -34851,29 +34869,16 @@ class LogAnIssueComponent {
         }
         const PAYLOAD = this.logService.payloadBuilder(form, this.additionalOptionStatus);
         if (this.mode === 'CREATE') {
-            PAYLOAD.linkage_object = {
-                source: this.openedFrom,
-                type: '',
-                type_id: 0,
-                source_id: 0,
-                source_object_id: '',
-            };
             if (this.openedFrom === 'COMPLIANCE_WORKROOM' &&
                 ((_a = this.reponsibilityData) === null || _a === void 0 ? void 0 : _a.responsibilityId)) {
-                PAYLOAD.linkage_object = {
-                    source_id: (_b = this.reponsibilityData) === null || _b === void 0 ? void 0 : _b.responsibilityId,
-                    type: '',
-                    type_id: 0,
-                    source: this.openedFrom,
-                    source_object_id: (_c = this.reponsibilityData) === null || _c === void 0 ? void 0 : _c.responsibilityObjectId,
-                };
+                PAYLOAD.responsibilities_Linked.push((_b = this.reponsibilityData) === null || _b === void 0 ? void 0 : _b.responsibilityId);
             }
             if (['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(this.openedFrom)) {
-                if (((_e = this.logIssueForm) === null || _e === void 0 ? void 0 : _e.linkageType) &&
-                    ((_f = this.logIssueForm) === null || _f === void 0 ? void 0 : _f.linkedControlRisk.length) > 0) {
-                    if (['RISK', 'RESPONSIBILITY'].includes((_g = this.logIssueForm) === null || _g === void 0 ? void 0 : _g.linkageType)) {
+                if (((_c = this.logIssueForm) === null || _c === void 0 ? void 0 : _c.linkageType) &&
+                    ((_e = this.logIssueForm) === null || _e === void 0 ? void 0 : _e.linkedControlRisk.length) > 0) {
+                    if (['RISK', 'RESPONSIBILITY'].includes((_f = this.logIssueForm) === null || _f === void 0 ? void 0 : _f.linkageType)) {
                         PAYLOAD.linkage_object.source_id =
-                            (_j = (_h = this.logIssueForm) === null || _h === void 0 ? void 0 : _h.linkedControlRisk[0]) === null || _j === void 0 ? void 0 : _j.itemId;
+                            (_h = (_g = this.logIssueForm) === null || _g === void 0 ? void 0 : _g.linkedControlRisk[0]) === null || _h === void 0 ? void 0 : _h.itemId;
                     }
                 }
             }
@@ -34891,7 +34896,7 @@ class LogAnIssueComponent {
             }
         }
         if (this.mode === 'EDIT') {
-            PAYLOAD.IssueLinkage = (_k = this.dataForEdit) === null || _k === void 0 ? void 0 : _k.linkage_object;
+            PAYLOAD.IssueLinkage = (_j = this.dataForEdit) === null || _j === void 0 ? void 0 : _j.linkage_object;
         }
         this.loader = true;
         this.uiKitService.isLoader = true;
@@ -34993,7 +34998,7 @@ class LogAnIssueComponent {
      * @param issueData issue data fetched from API
      */
     populateForm(issueData) {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
         return __awaiter(this, void 0, void 0, function* () {
             this.dataForEdit = issueData;
             this.loader = false;
@@ -35012,45 +35017,48 @@ class LogAnIssueComponent {
                     ? this.listData.categoryList.filter((e) => e.category_id === (issueData === null || issueData === void 0 ? void 0 : issueData.category_id))
                     : [],
                 issueCustomTag: (_k = issueData === null || issueData === void 0 ? void 0 : issueData.custom_tags) !== null && _k !== void 0 ? _k : [],
-                issueRC: ((_l = issueData === null || issueData === void 0 ? void 0 : issueData.rc_id) === null || _l === void 0 ? void 0 : _l.length)
-                    ? this.listData.rcList.filter((e) => { var _a; return (_a = issueData === null || issueData === void 0 ? void 0 : issueData.rc_id) === null || _a === void 0 ? void 0 : _a.includes(e === null || e === void 0 ? void 0 : e.rc_id); })
+                issueRC: ((_l = issueData === null || issueData === void 0 ? void 0 : issueData.rc_ids) === null || _l === void 0 ? void 0 : _l.length)
+                    ? this.listData.rcList.filter((e) => { var _a; return (_a = issueData === null || issueData === void 0 ? void 0 : issueData.rc_ids) === null || _a === void 0 ? void 0 : _a.includes(e === null || e === void 0 ? void 0 : e.rc_id); })
+                    : [],
+                responsibilityLinked: ((_m = issueData === null || issueData === void 0 ? void 0 : issueData.linkage_responsibility_details) === null || _m === void 0 ? void 0 : _m.length)
+                    ? issueData === null || issueData === void 0 ? void 0 : issueData.linkage_responsibility_details
                     : [],
-                recommendedActionsAttachments: ((_m = issueData === null || issueData === void 0 ? void 0 : issueData.recommendation) === null || _m === void 0 ? void 0 : _m.length)
-                    ? (_o = issueData === null || issueData === void 0 ? void 0 : issueData.recommendation[0]) === null || _o === void 0 ? void 0 : _o.attachments
+                recommendedActionsAttachments: ((_o = issueData === null || issueData === void 0 ? void 0 : issueData.recommendation) === null || _o === void 0 ? void 0 : _o.length)
+                    ? (_p = issueData === null || issueData === void 0 ? void 0 : issueData.recommendation[0]) === null || _p === void 0 ? void 0 : _p.attachments
                     : [],
                 associatedRisksAttachments: [],
                 isAssignToMyself: (issueData === null || issueData === void 0 ? void 0 : issueData.assignee_id) === this.currentUser.id ? true : false,
                 entrustTo: (issueData === null || issueData === void 0 ? void 0 : issueData.assignee_id) === this.currentUser.id
                     ? []
                     : this.listData.userList.filter((e) => e.my_member_id === (issueData === null || issueData === void 0 ? void 0 : issueData.assignee_id)),
-                issueDueDate: ((_p = issueData === null || issueData === void 0 ? void 0 : issueData.frequency_details) === null || _p === void 0 ? void 0 : _p.frequency_date)
+                issueDueDate: ((_q = issueData === null || issueData === void 0 ? void 0 : issueData.frequency_details) === null || _q === void 0 ? void 0 : _q.frequency_date)
                     ? moment(`${issueDueDate[0]}-${issueDueDate[1]}-${issueDueDate[2]}`)
                     : '',
                 issueDueTime: this.logService.convertFrom24To12Format(issueData.frequency_details.frequency_time),
-                exceptionType: (_q = issueData.exception_type) !== null && _q !== void 0 ? _q : 1,
-                issueRiskRating: (_r = issueData.risk_class) !== null && _r !== void 0 ? _r : 1,
-                issuePriority: (_s = issueData.priority) !== null && _s !== void 0 ? _s : 1,
-                issueRecommendation: ((_t = issueData === null || issueData === void 0 ? void 0 : issueData.recommendation) === null || _t === void 0 ? void 0 : _t.length)
-                    ? (_u = issueData === null || issueData === void 0 ? void 0 : issueData.recommendation[0]) === null || _u === void 0 ? void 0 : _u.text
+                exceptionType: (_r = issueData.exception_type) !== null && _r !== void 0 ? _r : 1,
+                issueRiskRating: (_s = issueData.risk_class) !== null && _s !== void 0 ? _s : 1,
+                issuePriority: (_t = issueData.priority) !== null && _t !== void 0 ? _t : 1,
+                issueRecommendation: ((_u = issueData === null || issueData === void 0 ? void 0 : issueData.recommendation) === null || _u === void 0 ? void 0 : _u.length)
+                    ? (_v = issueData === null || issueData === void 0 ? void 0 : issueData.recommendation[0]) === null || _v === void 0 ? void 0 : _v.text
                     : '',
-                issueAssociatedRisk: ((_v = issueData === null || issueData === void 0 ? void 0 : issueData.associated_risk) === null || _v === void 0 ? void 0 : _v.length)
-                    ? (_w = issueData === null || issueData === void 0 ? void 0 : issueData.associated_risk[0]) === null || _w === void 0 ? void 0 : _w.text
+                issueAssociatedRisk: ((_w = issueData === null || issueData === void 0 ? void 0 : issueData.associated_risk) === null || _w === void 0 ? void 0 : _w.length)
+                    ? (_x = issueData === null || issueData === void 0 ? void 0 : issueData.associated_risk[0]) === null || _x === void 0 ? void 0 : _x.text
                     : '',
-                issueCCUsers: ((_x = issueData.overseer) === null || _x === void 0 ? void 0 : _x.cc_email.length)
-                    ? yield this.generateOverseerList(this.listData.userList, (_y = issueData.overseer) === null || _y === void 0 ? void 0 : _y.cc_email)
+                issueCCUsers: ((_y = issueData.overseer) === null || _y === void 0 ? void 0 : _y.cc_email.length)
+                    ? yield this.generateOverseerList(this.listData.userList, (_z = issueData.overseer) === null || _z === void 0 ? void 0 : _z.cc_email)
                     : [],
-                failureCCUsers: ((_z = issueData.overseer) === null || _z === void 0 ? void 0 : _z.failure_cc_email.length)
-                    ? yield this.generateOverseerList(this.listData.userList, (_0 = issueData.overseer) === null || _0 === void 0 ? void 0 : _0.failure_cc_email)
+                failureCCUsers: ((_0 = issueData.overseer) === null || _0 === void 0 ? void 0 : _0.failure_cc_email.length)
+                    ? yield this.generateOverseerList(this.listData.userList, (_1 = issueData.overseer) === null || _1 === void 0 ? void 0 : _1.failure_cc_email)
                     : [],
                 linkedControlRisk: [],
                 linkageType: 'RESPONSIBILITY',
                 issueType: issueData.issueType ? issueData.issueType : 'issue',
             };
             if (this.mode === 'EDIT') {
-                ((_1 = this.logIssueForm.issueRC) === null || _1 === void 0 ? void 0 : _1.length) > 0
+                ((_2 = this.logIssueForm.issueRC) === null || _2 === void 0 ? void 0 : _2.length) > 0
                     ? (this.isRCPreSelected = true)
                     : (this.isRCPreSelected = false);
-                ((_2 = issueData.linkage_object) === null || _2 === void 0 ? void 0 : _2.source) === 'GLOBAL' && (issueData === null || issueData === void 0 ? void 0 : issueData.rc_id)
+                ((_3 = issueData.linkage_object) === null || _3 === void 0 ? void 0 : _3.source) === 'GLOBAL' && (issueData === null || issueData === void 0 ? void 0 : issueData.rc_id)
                     ? (this.isRCPreSelected = false)
                     : (this.isRCPreSelected = true);
             }
@@ -35120,6 +35128,7 @@ class LogAnIssueComponent {
             issueAssociatedRisk: '',
             issueCCUsers: [],
             failureCCUsers: [],
+            responsibilityLinked: [],
         };
         for (const key of Object.keys(this.additionalOptionStatus)) {
             this.additionalOptionStatus[key] = false;
@@ -35167,10 +35176,10 @@ class LogAnIssueComponent {
     }
 }
 LogAnIssueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogAnIssueComponent, deps: [{ token: LogIssueService }, { token: AuthService }, { token: UiKitService }, { token: SnackBarService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LogAnIssueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogAnIssueComponent, selector: "app-log-an-issue", inputs: { openedFrom: "openedFrom", issueId: "issueId", reponsibilityData: "reponsibilityData", issueDetails: "issueDetails", mode: "mode", config: "config", responsibilitiesData: "responsibilitiesData" }, outputs: { pickerChanged: "pickerChanged", populateOption: "populateOption", closeWorkflow: "closeWorkflow", modeChange: "modeChange", disconnectRefresh: "disconnectRefresh" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <p>log-an-issue works!</p> -->\r\n<div class=\"log-an-issue\" *ngIf=\"!showSmiley\">\r\n  <div class=\"form-group-row\">\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Linked to\r\n          <button\r\n            class=\"button\"\r\n            (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n          >\r\n            Link More Responsibilities\r\n          </button>\r\n        </label>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Select a responsibility\"\r\n          readonly\r\n          *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom) && logIssueForm?.responsibilityLinked.length === 0\"\r\n          (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n        />\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.responsibilityLinked.length >0 || ['COMPLIANCE_WORKROOM'].includes(openedFrom)\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <span\r\n            *ngIf=\"['COMPLIANCE_WORKROOM'].includes(openedFrom) && reponsibilityData?.responsibilityName\"\r\n              class=\"chipName vx-fs-11 vx-label-txt full-width\"\r\n              [appTooltip]=\"reponsibilityData?.responsibilityName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ reponsibilityData?.responsibilityName }}</span\r\n            >\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom)\"\r\n              (click)=\"deleteItem('LINK_MORE_RESPONSIBILITY', logIssueForm?.responsibilityLinked[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n              <span\r\n              *ngIf=\"logIssueForm?.responsibilityLinked.length > 0\"\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.responsibilityLinked[0]?.ReportName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.responsibilityLinked[0]?.ReportName }}</span>\r\n            <button\r\n              *ngIf=\"logIssueForm?.responsibilityLinked.length > 1\"\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"linkResp.popover()\"\r\n              placement=\"right\"\r\n            >\r\n              +{{ logIssueForm?.responsibilityLinked?.length - 1 }}\r\n            </button>\r\n          </div>\r\n          <button\r\n            *ngIf=\"activeField !== 'LINK_MORE_RESPONSIBILITY' && logIssueForm?.responsibilityLinked.length > 0\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        \r\n      </div>\r\n      <app-popover #linkResp [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let resp of logIssueForm?.responsibilityLinked | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('LINK_MORE_RESPONSIBILITY', resp)\"\r\n                    >&#xe90d;</i\r\n                  >\r\n                  {{ resp?.ReportName }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n    \r\n  </div>\r\n\r\n\r\n  <div\r\n    class=\"form-group-row\"\r\n    *ngIf=\"\r\n      ['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(\r\n        openedFrom\r\n      ) || isRiskControlVisible\r\n    \"\r\n    [class.active]=\"activeField === 'ISSUE_CONTROL_RISK'\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_CONTROL_RISK' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"logIssueForm?.linkedControlRisk?.length > 0\"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          logIssueForm?.linkedControlRisk?.length === 0 ||\r\n          activeField === 'ISSUE_CONTROL_RISK'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm?.linkedControlRisk?.length > 0 &&\r\n          activeField !== 'ISSUE_CONTROL_RISK'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Select a control or risk</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.linkedControlRisk ||\r\n            logIssueForm?.linkedControlRisk?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"\r\n              setActiveFieldSelector('ISSUE_CONTROL_RISK', 'ISSUE_CONTROL_RISK')\r\n            \"\r\n            type=\"text\"\r\n            placeholder=\"Select a control or risk.\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"logIssueForm?.linkedControlRisk?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"\r\n                deleteItem(\r\n                  'ISSUE_CONTROL_RISK',\r\n                  logIssueForm?.linkedControlRisk[0]\r\n                )\r\n              \"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.linkedControlRisk[0]?.itemControlName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.linkedControlRisk[0]?.itemControlName }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_CONTROL_RISK',logIssueForm?.linkedControlRisk[0])\">&#xe90d;</i>{{logIssueForm?.linkedControlRisk[0]?.itemControlName}}</span>\r\n                  </div> -->\r\n          <button\r\n            class=\"edit\"\r\n            *ngIf=\"activeField !== 'ISSUE_CONTROL_RISK'\"\r\n            type=\"button\"\r\n            (click)=\"\r\n              setActiveFieldSelector('ISSUE_CONTROL_RISK', 'ISSUE_CONTROL_RISK')\r\n            \"\r\n          >\r\n            <i class=\"icons\">&#xe90c;</i>Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"vx-form-group\"\r\n        *ngFor=\"let tag of logIssueForm.issueCustomTag | keyvalue\"\r\n      >\r\n        <!-- {{logIssueForm.issueCustomTag|json}} -->\r\n        <label class=\"vx-control-panel\">{{\r\n          tag?.value?.custom_tag_name\r\n        }}</label>\r\n        <input\r\n          type=\"text\"\r\n          [placeholder]=\"tag?.value?.custom_tag_name\"\r\n          [(ngModel)]=\"tag.value.custom_tag_value\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Issue Title -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_TITLE' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueName.trim().length\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n        alt=\"name\"\r\n        *ngIf=\"\r\n          !logIssueForm.issueName.trim().length || activeField === 'ISSUE_TITLE'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm.issueName.trim().length && activeField !== 'ISSUE_TITLE'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Issue Title <span class=\"required\">*</span>\r\n        </label>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Add a name for this issue\"\r\n          [(ngModel)]=\"logIssueForm.issueName\"\r\n          (focusin)=\"setActiveFieldSelector('ISSUE_TITLE', 'ISSUE_TITLE')\"\r\n          (keyup)=\"\r\n            logIssueForm.issueName?.trim()?.length > 0\r\n              ? removeError('issueName')\r\n              : null\r\n          \"\r\n          (focusout)=\"setActiveFieldSelector('', '')\"\r\n          *ngIf=\"\r\n            logIssueForm.issueName == '' || activeSelector === 'ISSUE_TITLE'\r\n          \"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            logIssueForm.issueName.length && activeSelector !== 'ISSUE_TITLE'\r\n          \"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ logIssueForm.issueName }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_TITLE', 'ISSUE_TITLE')\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueName')\">\r\n          Enter a name for this issue.\r\n        </p>\r\n        <ng-container *ngIf=\"AttachmentTrack[0]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[0]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.issueDescriptionAttachements?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.issueDescriptionAttachements\"\r\n          >\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')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            file: false,\r\n            colorPalette: true,\r\n            link: true,\r\n            placeholder: 'Description'\r\n          }\"\r\n          [(ngModel)]=\"logIssueForm.issueDescription\"\r\n          (sendSavedFiles)=\"selectFile('ISSUE_DESCRIPTION', $event)\"\r\n          (clickOutside)=\"checkDescription()\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- issue type start-->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_TITLE' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left checked\">\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\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"> Issue Type </label>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          name=\"issue-type\"\r\n          [checked]=\"logIssueForm?.issueType === 'issue'\"\r\n          (checkedEvent)=\"setIssueType('issue')\"\r\n          >Issue\r\n          <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          name=\"issue-type\"\r\n          [checked]=\"logIssueForm?.issueType === 'incident'\"\r\n          (checkedEvent)=\"setIssueType('incident')\"\r\n          >Incident\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  <!-- Issue Category -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeField === 'ISSUE_CATEGORY'\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_CATEGORY' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueCategory?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCategory?.length === 0 ||\r\n          activeField === 'ISSUE_CATEGORY'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCategory?.length > 0 &&\r\n          activeField !== 'ISSUE_CATEGORY'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Issue Category</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.issueCategory ||\r\n            logIssueForm?.issueCategory?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_CATEGORY', 'ISSUE_CATEGORY')\"\r\n            type=\"text\"\r\n            placeholder=\"Select a category for this issue\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueCategory?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"\r\n                deleteItem('ISSUE_CATEGORY', logIssueForm?.issueCategory[0])\r\n              \"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueCategory[0]?.category_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueCategory[0]?.category_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_CATEGORY',logIssueForm?.issueCategory[0])\">&#xe90d;</i>{{logIssueForm?.issueCategory[0]?.category_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            class=\"edit\"\r\n            *ngIf=\"activeField !== 'ISSUE_CATEGORY'\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CATEGORY', 'ISSUE_CATEGORY')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueCategory')\"\r\n        >\r\n          Select an issue category.\r\n        </p>\r\n      </div>\r\n      <div\r\n        class=\"vx-form-group\"\r\n        *ngFor=\"let tag of logIssueForm.issueCustomTag\"\r\n      >\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  <!-- Responsibility Center -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    *ngIf=\"isRCVisible\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_RC' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueRC?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"logIssueForm?.issueRC?.length === 0\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"logIssueForm?.issueRC?.length > 0 && activeField !== 'ISSUE_RC'\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Responsibility Center\r\n          <span class=\"required\" *ngIf=\"isRCMandatory\">*</span>\r\n        </label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"!logIssueForm?.issueRC || logIssueForm?.issueRC?.length === 0\"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_RC', 'ISSUE_RC')\"\r\n            type=\"text\"\r\n            placeholder=\"Select Responsibility Center(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueRC?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!isRCPreSelected\"\r\n              (click)=\"deleteItem('ISSUE_RC', logIssueForm?.issueRC[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueRC[0]?.item_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueRC[0]?.item_name }}</span\r\n            >\r\n            <button\r\n              *ngIf=\"logIssueForm?.issueRC?.length > 1\"\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"RC.popover()\"\r\n              placement=\"right\"\r\n            >\r\n              +{{ logIssueForm?.issueRC?.slice(1)?.length }}\r\n            </button>\r\n          </div>\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_RC' && !isRCPreSelected\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_RC', 'ISSUE_RC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueRC')\">\r\n          Select the Responsibility Center associated with this issue.\r\n        </p>\r\n      </div>\r\n      <app-popover #RC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let rc of logIssueForm?.issueRC | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_RC', rc)\"\r\n                    >&#xe90d;</i\r\n                  >\r\n                  {{ rc?.item_name }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Who -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_WHO' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.entrustTo?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          (logIssueForm?.entrustTo?.length === 0 &&\r\n            !logIssueForm?.isAssignToMyself) ||\r\n          activeField === 'ISSUE_WHO'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          (logIssueForm?.entrustTo?.length > 0 ||\r\n            logIssueForm?.isAssignToMyself) &&\r\n          activeField !== 'ISSUE_WHO'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Who? <span class=\"required\">*</span></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          [class.disabled]=\"logIssueForm?.isAssignToMyself\"\r\n          *ngIf=\"\r\n            !logIssueForm?.entrustTo || logIssueForm?.entrustTo?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_WHO', 'ISSUE_WHO')\"\r\n            [disabled]=\"logIssueForm?.isAssignToMyself\"\r\n            type=\"text\"\r\n            placeholder=\"Who is responsible for completing the responsibility?\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.entrustTo?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_WHO', logIssueForm?.entrustTo[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.entrustTo[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.entrustTo[0]?.employee_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_WHO',logIssueForm?.entrustTo[0])\">&#xe90d;</i>{{logIssueForm?.entrustTo[0]?.employee_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_WHO'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_WHO', 'ISSUE_WHO')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('entrustTo')\">\r\n          Select the person responsible for resolving this issue.\r\n        </p>\r\n        <div\r\n          class=\"switch-row align-right\"\r\n          [class.disabled]=\"activeField === 'ISSUE_WHO'\"\r\n        >\r\n          <app-cs-switch\r\n            [disabled]=\"activeField === 'ISSUE_WHO'\"\r\n            [(ngValue)]=\"logIssueForm.isAssignToMyself\"\r\n            (ngValueChange)=\"assignMyself($event)\"\r\n            >OR ASSIGN TO MYSELF</app-cs-switch\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Maximun Time to Resolve -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_DATE_TIME' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueDueDate\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueDueDate || activeField === 'ISSUE_DATE_TIME'\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueDueDate && activeField !== 'ISSUE_DATE_TIME'\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Maximum Time to Resolve <span class=\"required\">*</span></label\r\n        >\r\n        <div class=\"date-time-picker\">\r\n          <div class=\"picker-group\">\r\n            <input\r\n              type=\"text\"\r\n              readonly\r\n              placeholder=\"Set a deadline.\"\r\n              [value]=\"logIssueForm.issueDueDate | date : 'dd MMM yyyy'\"\r\n              (click)=\"openDatePicker()\"\r\n            />\r\n            <i class=\"icons\">&#xe92d;</i>\r\n            <dp-date-picker\r\n              #datePicker\r\n              (onSelect)=\"\r\n                datePickerOverlay = false;\r\n                closeDatePicker($event);\r\n                removeError('issueDueDate')\r\n              \"\r\n              [config]=\"dateConfig\"\r\n              [(ngModel)]=\"logIssueForm.issueDueDate\"\r\n            >\r\n            </dp-date-picker>\r\n            <div\r\n              class=\"vx-overlay\"\r\n              (click)=\"closeDatePicker($event)\"\r\n              *ngIf=\"datePickerOverlay\"\r\n            ></div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"picker-group\"\r\n            appPopover\r\n            (click)=\"timePicker.popover()\"\r\n            placement=\"right\"\r\n          >\r\n            <input\r\n              (mouseover)=\"setCurrentTime()\"\r\n              [(ngModel)]=\"logIssueForm.issueDueTime\"\r\n              [value]=\"logIssueForm.issueDueTime\"\r\n              readonly\r\n              class=\"time\"\r\n              placeholder=\"Select Time\"\r\n              type=\"text\"\r\n              [min]=\"currentTime\"\r\n            />\r\n            <i class=\"icons\">&#xe955;</i>\r\n          </div>\r\n          <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n            <app-time-picker\r\n              [time]=\"logIssueForm.issueDueTime\"\r\n              (onTimeSelection)=\"\r\n                onTimeChanged($event); timePicker.closePopover('top')\r\n              \"\r\n            ></app-time-picker>\r\n          </app-popover>\r\n        </div>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueDueDate')\"\r\n        >\r\n          Select the date by which this issue needs to be resolved.\r\n        </p>\r\n\r\n        <p class=\"error-message\" *ngIf=\"!isFutureDate\">\r\n          {{ getDateValidationMessage }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Recommended Actions -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueRecommendation\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/recommended-action.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!(logIssueForm.issueRecommendation | spaceBreaker).length\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"(logIssueForm.issueRecommendation | spaceBreaker).length > 0\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Recommended Actions <span class=\"required\">*</span></label\r\n        >\r\n        <ng-container *ngIf=\"AttachmentTrack[1]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[1]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.recommendedActionsAttachments?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.recommendedActionsAttachments\"\r\n          >\r\n            <div class=\"file-container\">\r\n              <span class=\"file-name\">{{ file?.name }}</span>\r\n              <button>\r\n                <i\r\n                  class=\"icons\"\r\n                  (click)=\"deleteFile(file, 'RECOMMENDED_ACTIONS')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"logIssueForm.issueRecommendation\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            file: true,\r\n            placeholder: 'Recommended actions'\r\n          }\"\r\n          (ngModelChange)=\"\r\n            logIssueForm?.issueRecommendation?.trim()?.length > 0\r\n              ? removeError('issueRecommendation')\r\n              : null\r\n          \"\r\n          (clickOutside)=\"checkDescription()\"\r\n          (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS', $event)\"\r\n        ></vcomply-editor>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueRecommendation')\"\r\n        >\r\n          Specify the recommended actions to resolve this issue.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- *ngIf=\"!hiddenList.includes('RISK_CLASSIFICATION')\"  [class.disabled]=\"activeField  && sideSelectorElements.includes(activeField)\" -->\r\n  <!-- removed the above condition since Risk Classification should be displayed by default in log an issue form -->\r\n\r\n  <!-- Risk Classification -->\r\n  <div class=\"form-group-row\" id=\"risk_classification\">\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueRiskRating\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueRiskRating\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueRiskRating\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Risk Classification</label>\r\n        <div class=\"classification\">\r\n          <label\r\n            class=\"low\"\r\n            *ngFor=\"let class of riskClassification\"\r\n            [ngClass]=\"[class.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification\"\r\n              [value]=\"class.value\"\r\n              [checked]=\"logIssueForm?.issueRiskRating === class.value\"\r\n              [(ngModel)]=\"logIssueForm.issueRiskRating\"\r\n            />\r\n            <span>{{ class.name }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Exception Type -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.EXCEPTION_TYPE\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.exceptionType > -1\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/exception-type.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"logIssueForm?.exceptionType === null\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.exceptionType > -1\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Exception Type</label>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          [value]=\"1\"\r\n          name=\"exception-type\"\r\n          [checked]=\"logIssueForm?.exceptionType === 1\"\r\n          (checkedEvent)=\"setException(1)\"\r\n          >Design Exception\r\n          <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          [value]=\"2\"\r\n          name=\"exception-type\"\r\n          [checked]=\"logIssueForm?.exceptionType === 2\"\r\n          (checkedEvent)=\"setException(2)\"\r\n          >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  <!-- Priority -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.PRIORITY\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issuePriority\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issuePriority\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issuePriority > 0\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Priority</label>\r\n        <div class=\"classification\">\r\n          <label\r\n            *ngFor=\"let priority of riskPrority\"\r\n            [ngClass]=\"[priority.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification-priority\"\r\n              [value]=\"priority.value\"\r\n              [checked]=\"logIssueForm?.issuePriority === priority.value\"\r\n              [(ngModel)]=\"logIssueForm.issuePriority\"\r\n            />\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  <!-- Associated Risks -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueAssociatedRisk\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueAssociatedRisk.trim().length\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueAssociatedRisk.trim().length\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Associated Risks </label>\r\n        <ng-container *ngIf=\"AttachmentTrack[2]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[2]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.associatedRisksAttachments?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.associatedRisksAttachments\"\r\n          >\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')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"logIssueForm.issueAssociatedRisk\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            file: false,\r\n            placeholder: 'Associated Risks'\r\n          }\"\r\n          (clickOutside)=\"checkDescription()\"\r\n          (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS', $event)\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    *ngIf=\"additionalOptionStatus.OVERSIGHT\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      !['ISSUE_CC', 'ISSUE_FCC'].includes(activeField) &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        logIssueForm?.issueCCUsers?.length > 0 ||\r\n        logIssueForm?.failureCCUsers?.length > 0\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          (logIssueForm?.issueCCUsers?.length === 0 &&\r\n            logIssueForm?.failureCCUsers?.length === 0) ||\r\n          activeField === 'ISSUE_CC' ||\r\n          activeField === 'ISSUE_FCC'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCCUsers?.length > 0 ||\r\n          (logIssueForm?.failureCCUsers?.length > 0 &&\r\n            activeField !== 'ISSUE_CC') ||\r\n          activeField !== 'ISSUE_FCC'\r\n        \"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Oversight</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.issueCCUsers ||\r\n            logIssueForm?.issueCCUsers?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CC', 'ISSUE_CC')\"\r\n            placeholder=\"Who should have oversight of this issue?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueCCUsers?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_CC', logIssueForm?.issueCCUsers[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueCCUsers[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueCCUsers[0]?.employee_name }}</span\r\n            >\r\n            <button\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"CC.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"logIssueForm?.issueCCUsers?.length > 1\"\r\n            >\r\n              +{{ logIssueForm?.issueCCUsers?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (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 (click)=\"CC.popover()\" placement=\"right\">+{{logIssueForm?.issueCCUsers?.slice(1).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_CC'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CC', 'ISSUE_CC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.failureCCUsers ||\r\n            logIssueForm?.failureCCUsers?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_FCC', 'ISSUE_FCC')\"\r\n            type=\"text\"\r\n            placeholder=\"Who should be notified if the issue is not resolved?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.failureCCUsers?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_FCC', logIssueForm?.failureCCUsers[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.failureCCUsers[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.failureCCUsers[0]?.employee_name }}</span\r\n            >\r\n            <button\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"FCC.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"logIssueForm?.failureCCUsers?.length > 1\"\r\n            >\r\n              +{{ logIssueForm?.failureCCUsers?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (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 (click)=\"FCC.popover()\" placement=\"right\">+{{logIssueForm?.failureCCUsers?.slice(1).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_FCC'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_FCC', 'ISSUE_FCC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <app-popover #CC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let cc of logIssueForm?.issueCCUsers | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_CC', cc)\"\r\n                    >&#xe90d;</i\r\n                  >\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      <app-popover #FCC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let fcc of logIssueForm?.failureCCUsers | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_FCC', fcc)\"\r\n                    >&#xe90d;</i\r\n                  >\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  </div>\r\n\r\n  <!-- Evidence -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.EVIDENCE\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\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\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Evidence</label>\r\n        <div class=\"upload-format\">\r\n          <span class=\"text\"\r\n            >Do you want evidence of completion of the issue to be\r\n            uploaded?</span\r\n          >\r\n          <div class=\"radio-group\">\r\n            <app-cs-radio\r\n              [name]=\"'file-evidence'\"\r\n              [value]=\"1\"\r\n              [checked]=\"logIssueForm?.evidenceRequired === 1\"\r\n              (checkedEvent)=\"setEvidence(1)\"\r\n              >Yes\r\n            </app-cs-radio>\r\n            <app-cs-radio\r\n              [name]=\"'file-evidence'\"\r\n              [value]=\"0\"\r\n              [checked]=\"logIssueForm?.evidenceRequired === 0\"\r\n              (checkedEvent)=\"setEvidence(0)\"\r\n              >No\r\n            </app-cs-radio>\r\n          </div>\r\n        </div>\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\r\n  [config]=\"selectorConfig?.ISSUE_CATGORY\"\r\n  [itemsList]=\"listData?.categoryList\"\r\n  [selectedItems]=\"logIssueForm.issueCategory\"\r\n  [identifierKey]=\"'category_id'\"\r\n  [displayKey]=\"'category_name'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CATEGORY'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CATEGORY')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CATEGORY')\"\r\n>\r\n</app-radio-list>\r\n\r\n<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'ISSUE_RC'\"\r\n  [responsibilityCentersList]=\"listData?.rcList\"\r\n  [radioSelection]=\"false\"\r\n  [selectedResponsibilityCenters]=\"logIssueForm?.issueRC\"\r\n  [rcIdKey]=\"'item_id'\"\r\n  (saveSelectedList)=\"selectorAction($event, 'ISSUE_RC')\"\r\n  (closeRcList)=\"fieldDeselector('ISSUE_RC')\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-radio-list\r\n  [config]=\"selectorConfig?.ISSUE_WHO\"\r\n  [itemsList]=\"listData?.userList\"\r\n  [twoColumn]=\"true\"\r\n  [selectedItems]=\"logIssueForm.entrustTo\"\r\n  [identifierKey]=\"'employee_id'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_WHO'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_WHO')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_WHO')\"\r\n></app-radio-list>\r\n\r\n<app-radio-list\r\n  [config]=\"selectorConfig?.ISSUE_TYPE\"\r\n  [itemsList]=\"listData?.issueTypeList\"\r\n  [selectedItems]=\"logIssueForm.issueType\"\r\n  [identifierKey]=\"'issue_id'\"\r\n  [displayKey]=\"'issue_type_name'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_TYPE'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_TYPE')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_TYPE')\"\r\n></app-radio-list>\r\n\r\n<app-checkbox-list\r\n  [config]=\"selectorConfig?.ISSUE_CC\"\r\n  [twoColumn]=\"true\"\r\n  [itemsList]=\"\r\n    listData.userList\r\n      | userFilter\r\n        : 'employee_email'\r\n        : logIssueForm.entrustTo\r\n        : { employee_email: currentUser?.email }\r\n  \"\r\n  [selectedItems]=\"logIssueForm.issueCCUsers\"\r\n  [identifierKey]=\"'employee_email'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CC'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CC')\"\r\n></app-checkbox-list>\r\n\r\n<app-checkbox-list\r\n  [config]=\"selectorConfig?.ISSUE_FCC\"\r\n  [twoColumn]=\"true\"\r\n  [itemsList]=\"\r\n    listData.userList\r\n      | userFilter\r\n        : 'employee_email'\r\n        : logIssueForm.entrustTo\r\n        : { employee_email: currentUser?.email }\r\n  \"\r\n  [selectedItems]=\"logIssueForm.failureCCUsers\"\r\n  [identifierKey]=\"'employee_email'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_FCC'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_FCC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_FCC')\"\r\n></app-checkbox-list>\r\n\r\n<app-responsibility-risk-selector\r\n  [loading]=\"isRiskControlLoading\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CONTROL_RISK'\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CONTROL_RISK')\"\r\n  (fetchList)=\"getLinkage(issueDetails?.auditObjId, $event)\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CONTROL_RISK')\"\r\n  [activeEntity]=\"logIssueForm?.linkageType\"\r\n  [listItems]=\"listData?.linkageList\"\r\n  [selectedItems]=\"logIssueForm?.linkedControlRisk\"\r\n></app-responsibility-risk-selector>\r\n\r\n<app-smiley-dialog-inline\r\n  *ngIf=\"showSmiley\"\r\n  [message]=\"message\"\r\n  [actionButtons]=\"actionButtons\"\r\n  (action)=\"action($event)\"\r\n  (closeSmiley)=\"closeSmiley($event)\"\r\n>\r\n</app-smiley-dialog-inline>\r\n\r\n<app-link-responsibility-list\r\n  *ngIf=\"activeSelector === 'LINK_MORE_RESPONSIBILITY'\"\r\n  [selectedResponsibilityValues]=\"logIssueForm?.responsibilityLinked\"\r\n  (closeButton)=\"fieldDeselector('LINK_MORE_RESPONSIBILITY')\"\r\n  [respIdKey]=\"'ReportId'\"\r\n  [radioSelection]=\"false\"\r\n  (selectedResponsibility)=\"selectorAction($event, 'LINK_MORE_RESPONSIBILITY')\"\r\n></app-link-responsibility-list>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .log-an-issue{position:relative}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-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 vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-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 vcomply-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 vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.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:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i9.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent$1, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent$1, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LineLoaderComponent, selector: "app-line-loader", inputs: ["loaderHeight"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: ["message", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "directive", type: ClickOutsideDirective$1, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn"], outputs: ["closeList", "saveList"] }, { kind: "component", type: RadioListComponent, selector: "app-radio-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn"], outputs: ["closeList", "saveList"] }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: ResponsibilityRiskSelectorComponent, selector: "app-responsibility-risk-selector", inputs: ["activeEntity", "listItems", "selectedItems", "loading"], outputs: ["fetchList", "closeList", "saveList"] }, { kind: "component", type: LinkResponsibilityListComponent, selector: "app-link-responsibility-list", inputs: ["onCompletionOfResponsibility", "feature", "respIdKey", "selectedResponsibilityValues", "radioSelection"], outputs: ["closeButton", "selectedResponsibility"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceBreakerPipe, name: "spaceBreaker" }, { kind: "pipe", type: UserFilterPipe, name: "userFilter" }] });
+LogAnIssueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogAnIssueComponent, selector: "app-log-an-issue", inputs: { openedFrom: "openedFrom", issueId: "issueId", reponsibilityData: "reponsibilityData", issueDetails: "issueDetails", mode: "mode", config: "config", responsibilitiesData: "responsibilitiesData" }, outputs: { pickerChanged: "pickerChanged", populateOption: "populateOption", closeWorkflow: "closeWorkflow", modeChange: "modeChange", disconnectRefresh: "disconnectRefresh" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <p>log-an-issue works!</p> -->\r\n<div class=\"log-an-issue\" *ngIf=\"!showSmiley\">\r\n  <div class=\"form-group-row\">\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Linked to\r\n          <button\r\n            class=\"button\"\r\n            (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n          >\r\n            Link More Responsibilities\r\n          </button>\r\n        </label>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Select a responsibility\"\r\n          readonly\r\n          *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom) && !logIssueForm?.responsibilityLinked?.length \"\r\n          (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n        />\r\n        <div class=\"selected\" *ngIf=\"['COMPLIANCE_WORKROOM'].includes(openedFrom) || logIssueForm?.responsibilityLinked?.length\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <span\r\n            *ngIf=\"['COMPLIANCE_WORKROOM'].includes(openedFrom) && reponsibilityData?.responsibilityName\"\r\n              class=\"chipName vx-fs-11 vx-label-txt full-width\"\r\n              [appTooltip]=\"reponsibilityData?.responsibilityName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ reponsibilityData?.responsibilityName }}</span\r\n            >\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom)\"\r\n              (click)=\"deleteItem('LINK_MORE_RESPONSIBILITY', logIssueForm?.responsibilityLinked[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n              <span\r\n              *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom) && logIssueForm?.responsibilityLinked?.length\"\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.responsibilityLinked[0]?.ReportName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.responsibilityLinked[0]?.ReportName }}</span>\r\n            <button\r\n              *ngIf=\"(['COMPLIANCE_WORKROOM'].includes(openedFrom) && logIssueForm?.responsibilityLinked?.length ) || logIssueForm?.responsibilityLinked?.length >1\"\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"linkResp.popover()\"\r\n              placement=\"right\"\r\n            >\r\n            +{{ !['COMPLIANCE_WORKROOM'].includes(openedFrom) ? logIssueForm?.responsibilityLinked?.length -1 : logIssueForm?.responsibilityLinked?.length }}\r\n            </button>\r\n          </div>\r\n          <button\r\n            *ngIf=\"activeField !== 'LINK_MORE_RESPONSIBILITY' && logIssueForm?.responsibilityLinked?.length\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        \r\n      </div>\r\n      <app-popover #linkResp [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n            *ngFor=\"let resp of logIssueForm?.responsibilityLinked | slice: !['COMPLIANCE_WORKROOM'].includes(openedFrom) ? 1 : 0\"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('LINK_MORE_RESPONSIBILITY', resp)\"\r\n                    >&#xe90d;</i\r\n                  >\r\n                  {{ resp?.ReportName }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n    \r\n  </div>\r\n\r\n\r\n  <div\r\n    class=\"form-group-row\"\r\n    *ngIf=\"\r\n      ['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(\r\n        openedFrom\r\n      ) || isRiskControlVisible\r\n    \"\r\n    [class.active]=\"activeField === 'ISSUE_CONTROL_RISK'\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_CONTROL_RISK' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"logIssueForm?.linkedControlRisk?.length > 0\"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          logIssueForm?.linkedControlRisk?.length === 0 ||\r\n          activeField === 'ISSUE_CONTROL_RISK'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm?.linkedControlRisk?.length > 0 &&\r\n          activeField !== 'ISSUE_CONTROL_RISK'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Select a control or risk</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.linkedControlRisk ||\r\n            logIssueForm?.linkedControlRisk?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"\r\n              setActiveFieldSelector('ISSUE_CONTROL_RISK', 'ISSUE_CONTROL_RISK')\r\n            \"\r\n            type=\"text\"\r\n            placeholder=\"Select a control or risk.\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"logIssueForm?.linkedControlRisk?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"\r\n                deleteItem(\r\n                  'ISSUE_CONTROL_RISK',\r\n                  logIssueForm?.linkedControlRisk[0]\r\n                )\r\n              \"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.linkedControlRisk[0]?.itemControlName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.linkedControlRisk[0]?.itemControlName }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_CONTROL_RISK',logIssueForm?.linkedControlRisk[0])\">&#xe90d;</i>{{logIssueForm?.linkedControlRisk[0]?.itemControlName}}</span>\r\n                  </div> -->\r\n          <button\r\n            class=\"edit\"\r\n            *ngIf=\"activeField !== 'ISSUE_CONTROL_RISK'\"\r\n            type=\"button\"\r\n            (click)=\"\r\n              setActiveFieldSelector('ISSUE_CONTROL_RISK', 'ISSUE_CONTROL_RISK')\r\n            \"\r\n          >\r\n            <i class=\"icons\">&#xe90c;</i>Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"vx-form-group\"\r\n        *ngFor=\"let tag of logIssueForm.issueCustomTag | keyvalue\"\r\n      >\r\n        <!-- {{logIssueForm.issueCustomTag|json}} -->\r\n        <label class=\"vx-control-panel\">{{\r\n          tag?.value?.custom_tag_name\r\n        }}</label>\r\n        <input\r\n          type=\"text\"\r\n          [placeholder]=\"tag?.value?.custom_tag_name\"\r\n          [(ngModel)]=\"tag.value.custom_tag_value\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Issue Title -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_TITLE' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueName.trim().length\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n        alt=\"name\"\r\n        *ngIf=\"\r\n          !logIssueForm.issueName.trim().length || activeField === 'ISSUE_TITLE'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm.issueName.trim().length && activeField !== 'ISSUE_TITLE'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Issue Title <span class=\"required\">*</span>\r\n        </label>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Add a name for this issue\"\r\n          [(ngModel)]=\"logIssueForm.issueName\"\r\n          (focusin)=\"setActiveFieldSelector('ISSUE_TITLE', 'ISSUE_TITLE')\"\r\n          (keyup)=\"\r\n            logIssueForm.issueName?.trim()?.length > 0\r\n              ? removeError('issueName')\r\n              : null\r\n          \"\r\n          (focusout)=\"setActiveFieldSelector('', '')\"\r\n          *ngIf=\"\r\n            logIssueForm.issueName == '' || activeSelector === 'ISSUE_TITLE'\r\n          \"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            logIssueForm.issueName.length && activeSelector !== 'ISSUE_TITLE'\r\n          \"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ logIssueForm.issueName }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_TITLE', 'ISSUE_TITLE')\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueName')\">\r\n          Enter a name for this issue.\r\n        </p>\r\n        <ng-container *ngIf=\"AttachmentTrack[0]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[0]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.issueDescriptionAttachements?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.issueDescriptionAttachements\"\r\n          >\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')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            file: false,\r\n            colorPalette: true,\r\n            link: true,\r\n            placeholder: 'Description'\r\n          }\"\r\n          [(ngModel)]=\"logIssueForm.issueDescription\"\r\n          (sendSavedFiles)=\"selectFile('ISSUE_DESCRIPTION', $event)\"\r\n          (clickOutside)=\"checkDescription()\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- issue type start-->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_TITLE' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left checked\">\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\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"> Issue Type </label>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          name=\"issue-type\"\r\n          [checked]=\"logIssueForm?.issueType === 'issue'\"\r\n          (checkedEvent)=\"setIssueType('issue')\"\r\n          >Issue\r\n          <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          name=\"issue-type\"\r\n          [checked]=\"logIssueForm?.issueType === 'incident'\"\r\n          (checkedEvent)=\"setIssueType('incident')\"\r\n          >Incident\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  <!-- Issue Category -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeField === 'ISSUE_CATEGORY'\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_CATEGORY' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueCategory?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCategory?.length === 0 ||\r\n          activeField === 'ISSUE_CATEGORY'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCategory?.length > 0 &&\r\n          activeField !== 'ISSUE_CATEGORY'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Issue Category</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.issueCategory ||\r\n            logIssueForm?.issueCategory?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_CATEGORY', 'ISSUE_CATEGORY')\"\r\n            type=\"text\"\r\n            placeholder=\"Select a category for this issue\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueCategory?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"\r\n                deleteItem('ISSUE_CATEGORY', logIssueForm?.issueCategory[0])\r\n              \"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueCategory[0]?.category_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueCategory[0]?.category_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_CATEGORY',logIssueForm?.issueCategory[0])\">&#xe90d;</i>{{logIssueForm?.issueCategory[0]?.category_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            class=\"edit\"\r\n            *ngIf=\"activeField !== 'ISSUE_CATEGORY'\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CATEGORY', 'ISSUE_CATEGORY')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueCategory')\"\r\n        >\r\n          Select an issue category.\r\n        </p>\r\n      </div>\r\n      <div\r\n        class=\"vx-form-group\"\r\n        *ngFor=\"let tag of logIssueForm.issueCustomTag\"\r\n      >\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  <!-- Responsibility Center -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    *ngIf=\"logIssueForm?.issueRC?.length\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_RC' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueRC?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"logIssueForm?.issueRC?.length === 0\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"logIssueForm?.issueRC?.length > 0 && activeField !== 'ISSUE_RC'\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Responsibility Center\r\n          <span class=\"required\" *ngIf=\"isRCMandatory\">*</span>\r\n        </label>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueRC?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueRC[0]?.item_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueRC[0]?.item_name }}</span\r\n            >\r\n            <button\r\n              *ngIf=\"logIssueForm?.issueRC?.length > 1\"\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"RC.popover()\"\r\n              placement=\"right\"\r\n            >\r\n              +{{ logIssueForm?.issueRC?.slice(1)?.length }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <app-popover #RC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let rc of logIssueForm?.issueRC | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  {{ rc?.item_name }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Who -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_WHO' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.entrustTo?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          (logIssueForm?.entrustTo?.length === 0 &&\r\n            !logIssueForm?.isAssignToMyself) ||\r\n          activeField === 'ISSUE_WHO'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          (logIssueForm?.entrustTo?.length > 0 ||\r\n            logIssueForm?.isAssignToMyself) &&\r\n          activeField !== 'ISSUE_WHO'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Who? <span class=\"required\">*</span></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          [class.disabled]=\"logIssueForm?.isAssignToMyself\"\r\n          *ngIf=\"\r\n            !logIssueForm?.entrustTo || logIssueForm?.entrustTo?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_WHO', 'ISSUE_WHO')\"\r\n            [disabled]=\"logIssueForm?.isAssignToMyself\"\r\n            type=\"text\"\r\n            placeholder=\"Who is responsible for completing the responsibility?\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.entrustTo?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_WHO', logIssueForm?.entrustTo[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.entrustTo[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.entrustTo[0]?.employee_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_WHO',logIssueForm?.entrustTo[0])\">&#xe90d;</i>{{logIssueForm?.entrustTo[0]?.employee_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_WHO'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_WHO', 'ISSUE_WHO')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('entrustTo')\">\r\n          Select the person responsible for resolving this issue.\r\n        </p>\r\n        <div\r\n          class=\"switch-row align-right\"\r\n          [class.disabled]=\"activeField === 'ISSUE_WHO'\"\r\n        >\r\n          <app-cs-switch\r\n            [disabled]=\"activeField === 'ISSUE_WHO'\"\r\n            [(ngValue)]=\"logIssueForm.isAssignToMyself\"\r\n            (ngValueChange)=\"assignMyself($event)\"\r\n            >OR ASSIGN TO MYSELF</app-cs-switch\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Maximun Time to Resolve -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_DATE_TIME' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueDueDate\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueDueDate || activeField === 'ISSUE_DATE_TIME'\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueDueDate && activeField !== 'ISSUE_DATE_TIME'\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Maximum Time to Resolve <span class=\"required\">*</span></label\r\n        >\r\n        <div class=\"date-time-picker\">\r\n          <div class=\"picker-group\">\r\n            <input\r\n              type=\"text\"\r\n              readonly\r\n              placeholder=\"Set a deadline.\"\r\n              [value]=\"logIssueForm.issueDueDate | date : 'dd MMM yyyy'\"\r\n              (click)=\"openDatePicker()\"\r\n            />\r\n            <i class=\"icons\">&#xe92d;</i>\r\n            <dp-date-picker\r\n              #datePicker\r\n              (onSelect)=\"\r\n                datePickerOverlay = false;\r\n                closeDatePicker($event);\r\n                removeError('issueDueDate')\r\n              \"\r\n              [config]=\"dateConfig\"\r\n              [(ngModel)]=\"logIssueForm.issueDueDate\"\r\n            >\r\n            </dp-date-picker>\r\n            <div\r\n              class=\"vx-overlay\"\r\n              (click)=\"closeDatePicker($event)\"\r\n              *ngIf=\"datePickerOverlay\"\r\n            ></div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"picker-group\"\r\n            appPopover\r\n            (click)=\"timePicker.popover()\"\r\n            placement=\"right\"\r\n          >\r\n            <input\r\n              (mouseover)=\"setCurrentTime()\"\r\n              [(ngModel)]=\"logIssueForm.issueDueTime\"\r\n              [value]=\"logIssueForm.issueDueTime\"\r\n              readonly\r\n              class=\"time\"\r\n              placeholder=\"Select Time\"\r\n              type=\"text\"\r\n              [min]=\"currentTime\"\r\n            />\r\n            <i class=\"icons\">&#xe955;</i>\r\n          </div>\r\n          <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n            <app-time-picker\r\n              [time]=\"logIssueForm.issueDueTime\"\r\n              (onTimeSelection)=\"\r\n                onTimeChanged($event); timePicker.closePopover('top')\r\n              \"\r\n            ></app-time-picker>\r\n          </app-popover>\r\n        </div>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueDueDate')\"\r\n        >\r\n          Select the date by which this issue needs to be resolved.\r\n        </p>\r\n\r\n        <p class=\"error-message\" *ngIf=\"!isFutureDate\">\r\n          {{ getDateValidationMessage }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Recommended Actions -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueRecommendation\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/recommended-action.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!(logIssueForm.issueRecommendation | spaceBreaker).length\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"(logIssueForm.issueRecommendation | spaceBreaker).length > 0\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Recommended Actions <span class=\"required\">*</span></label\r\n        >\r\n        <ng-container *ngIf=\"AttachmentTrack[1]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[1]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.recommendedActionsAttachments?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.recommendedActionsAttachments\"\r\n          >\r\n            <div class=\"file-container\">\r\n              <span class=\"file-name\">{{ file?.name }}</span>\r\n              <button>\r\n                <i\r\n                  class=\"icons\"\r\n                  (click)=\"deleteFile(file, 'RECOMMENDED_ACTIONS')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"logIssueForm.issueRecommendation\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            file: true,\r\n            placeholder: 'Recommended actions'\r\n          }\"\r\n          (ngModelChange)=\"\r\n            logIssueForm?.issueRecommendation?.trim()?.length > 0\r\n              ? removeError('issueRecommendation')\r\n              : null\r\n          \"\r\n          (clickOutside)=\"checkDescription()\"\r\n          (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS', $event)\"\r\n        ></vcomply-editor>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueRecommendation')\"\r\n        >\r\n          Specify the recommended actions to resolve this issue.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- *ngIf=\"!hiddenList.includes('RISK_CLASSIFICATION')\"  [class.disabled]=\"activeField  && sideSelectorElements.includes(activeField)\" -->\r\n  <!-- removed the above condition since Risk Classification should be displayed by default in log an issue form -->\r\n\r\n  <!-- Risk Classification -->\r\n  <div class=\"form-group-row\" id=\"risk_classification\">\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueRiskRating\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueRiskRating\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueRiskRating\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Risk Classification</label>\r\n        <div class=\"classification\">\r\n          <label\r\n            class=\"low\"\r\n            *ngFor=\"let class of riskClassification\"\r\n            [ngClass]=\"[class.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification\"\r\n              [value]=\"class.value\"\r\n              [checked]=\"logIssueForm?.issueRiskRating === class.value\"\r\n              [(ngModel)]=\"logIssueForm.issueRiskRating\"\r\n            />\r\n            <span>{{ class.name }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Exception Type -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.EXCEPTION_TYPE\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.exceptionType > -1\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/exception-type.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"logIssueForm?.exceptionType === null\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.exceptionType > -1\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Exception Type</label>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          [value]=\"1\"\r\n          name=\"exception-type\"\r\n          [checked]=\"logIssueForm?.exceptionType === 1\"\r\n          (checkedEvent)=\"setException(1)\"\r\n          >Design Exception\r\n          <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          [value]=\"2\"\r\n          name=\"exception-type\"\r\n          [checked]=\"logIssueForm?.exceptionType === 2\"\r\n          (checkedEvent)=\"setException(2)\"\r\n          >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  <!-- Priority -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.PRIORITY\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issuePriority\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issuePriority\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issuePriority > 0\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Priority</label>\r\n        <div class=\"classification\">\r\n          <label\r\n            *ngFor=\"let priority of riskPrority\"\r\n            [ngClass]=\"[priority.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification-priority\"\r\n              [value]=\"priority.value\"\r\n              [checked]=\"logIssueForm?.issuePriority === priority.value\"\r\n              [(ngModel)]=\"logIssueForm.issuePriority\"\r\n            />\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  <!-- Associated Risks -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueAssociatedRisk\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueAssociatedRisk.trim().length\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueAssociatedRisk.trim().length\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Associated Risks </label>\r\n        <ng-container *ngIf=\"AttachmentTrack[2]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[2]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.associatedRisksAttachments?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.associatedRisksAttachments\"\r\n          >\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')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"logIssueForm.issueAssociatedRisk\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            file: false,\r\n            placeholder: 'Associated Risks'\r\n          }\"\r\n          (clickOutside)=\"checkDescription()\"\r\n          (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS', $event)\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    *ngIf=\"additionalOptionStatus.OVERSIGHT\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      !['ISSUE_CC', 'ISSUE_FCC'].includes(activeField) &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        logIssueForm?.issueCCUsers?.length > 0 ||\r\n        logIssueForm?.failureCCUsers?.length > 0\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          (logIssueForm?.issueCCUsers?.length === 0 &&\r\n            logIssueForm?.failureCCUsers?.length === 0) ||\r\n          activeField === 'ISSUE_CC' ||\r\n          activeField === 'ISSUE_FCC'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCCUsers?.length > 0 ||\r\n          (logIssueForm?.failureCCUsers?.length > 0 &&\r\n            activeField !== 'ISSUE_CC') ||\r\n          activeField !== 'ISSUE_FCC'\r\n        \"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Oversight</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.issueCCUsers ||\r\n            logIssueForm?.issueCCUsers?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CC', 'ISSUE_CC')\"\r\n            placeholder=\"Who should have oversight of this issue?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueCCUsers?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_CC', logIssueForm?.issueCCUsers[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueCCUsers[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueCCUsers[0]?.employee_name }}</span\r\n            >\r\n            <button\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"CC.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"logIssueForm?.issueCCUsers?.length > 1\"\r\n            >\r\n              +{{ logIssueForm?.issueCCUsers?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (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 (click)=\"CC.popover()\" placement=\"right\">+{{logIssueForm?.issueCCUsers?.slice(1).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_CC'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CC', 'ISSUE_CC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.failureCCUsers ||\r\n            logIssueForm?.failureCCUsers?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_FCC', 'ISSUE_FCC')\"\r\n            type=\"text\"\r\n            placeholder=\"Who should be notified if the issue is not resolved?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.failureCCUsers?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_FCC', logIssueForm?.failureCCUsers[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.failureCCUsers[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.failureCCUsers[0]?.employee_name }}</span\r\n            >\r\n            <button\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"FCC.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"logIssueForm?.failureCCUsers?.length > 1\"\r\n            >\r\n              +{{ logIssueForm?.failureCCUsers?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (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 (click)=\"FCC.popover()\" placement=\"right\">+{{logIssueForm?.failureCCUsers?.slice(1).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_FCC'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_FCC', 'ISSUE_FCC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <app-popover #CC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let cc of logIssueForm?.issueCCUsers | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_CC', cc)\"\r\n                    >&#xe90d;</i\r\n                  >\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      <app-popover #FCC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let fcc of logIssueForm?.failureCCUsers | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_FCC', fcc)\"\r\n                    >&#xe90d;</i\r\n                  >\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  </div>\r\n\r\n  <!-- Evidence -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.EVIDENCE\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\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\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Evidence</label>\r\n        <div class=\"upload-format\">\r\n          <span class=\"text\"\r\n            >Do you want evidence of completion of the issue to be\r\n            uploaded?</span\r\n          >\r\n          <div class=\"radio-group\">\r\n            <app-cs-radio\r\n              [name]=\"'file-evidence'\"\r\n              [value]=\"1\"\r\n              [checked]=\"logIssueForm?.evidenceRequired === 1\"\r\n              (checkedEvent)=\"setEvidence(1)\"\r\n              >Yes\r\n            </app-cs-radio>\r\n            <app-cs-radio\r\n              [name]=\"'file-evidence'\"\r\n              [value]=\"0\"\r\n              [checked]=\"logIssueForm?.evidenceRequired === 0\"\r\n              (checkedEvent)=\"setEvidence(0)\"\r\n              >No\r\n            </app-cs-radio>\r\n          </div>\r\n        </div>\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\r\n  [config]=\"selectorConfig?.ISSUE_CATGORY\"\r\n  [itemsList]=\"listData?.categoryList\"\r\n  [selectedItems]=\"logIssueForm.issueCategory\"\r\n  [identifierKey]=\"'category_id'\"\r\n  [displayKey]=\"'category_name'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CATEGORY'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CATEGORY')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CATEGORY')\"\r\n>\r\n</app-radio-list>\r\n\r\n<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'ISSUE_RC'\"\r\n  [responsibilityCentersList]=\"listData?.rcList\"\r\n  [radioSelection]=\"false\"\r\n  [selectedResponsibilityCenters]=\"logIssueForm?.issueRC\"\r\n  [rcIdKey]=\"'item_id'\"\r\n  (saveSelectedList)=\"selectorAction($event, 'ISSUE_RC')\"\r\n  (closeRcList)=\"fieldDeselector('ISSUE_RC')\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-radio-list\r\n  [config]=\"selectorConfig?.ISSUE_WHO\"\r\n  [itemsList]=\"listData?.userList\"\r\n  [twoColumn]=\"true\"\r\n  [selectedItems]=\"logIssueForm.entrustTo\"\r\n  [identifierKey]=\"'employee_id'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_WHO'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_WHO')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_WHO')\"\r\n></app-radio-list>\r\n\r\n<app-radio-list\r\n  [config]=\"selectorConfig?.ISSUE_TYPE\"\r\n  [itemsList]=\"listData?.issueTypeList\"\r\n  [selectedItems]=\"logIssueForm.issueType\"\r\n  [identifierKey]=\"'issue_id'\"\r\n  [displayKey]=\"'issue_type_name'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_TYPE'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_TYPE')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_TYPE')\"\r\n></app-radio-list>\r\n\r\n<app-checkbox-list\r\n  [config]=\"selectorConfig?.ISSUE_CC\"\r\n  [twoColumn]=\"true\"\r\n  [itemsList]=\"\r\n    listData.userList\r\n      | userFilter\r\n        : 'employee_email'\r\n        : logIssueForm.entrustTo\r\n        : { employee_email: currentUser?.email }\r\n  \"\r\n  [selectedItems]=\"logIssueForm.issueCCUsers\"\r\n  [identifierKey]=\"'employee_email'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CC'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CC')\"\r\n></app-checkbox-list>\r\n\r\n<app-checkbox-list\r\n  [config]=\"selectorConfig?.ISSUE_FCC\"\r\n  [twoColumn]=\"true\"\r\n  [itemsList]=\"\r\n    listData.userList\r\n      | userFilter\r\n        : 'employee_email'\r\n        : logIssueForm.entrustTo\r\n        : { employee_email: currentUser?.email }\r\n  \"\r\n  [selectedItems]=\"logIssueForm.failureCCUsers\"\r\n  [identifierKey]=\"'employee_email'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_FCC'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_FCC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_FCC')\"\r\n></app-checkbox-list>\r\n\r\n<app-responsibility-risk-selector\r\n  [loading]=\"isRiskControlLoading\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CONTROL_RISK'\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CONTROL_RISK')\"\r\n  (fetchList)=\"getLinkage(issueDetails?.auditObjId, $event)\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CONTROL_RISK')\"\r\n  [activeEntity]=\"logIssueForm?.linkageType\"\r\n  [listItems]=\"listData?.linkageList\"\r\n  [selectedItems]=\"logIssueForm?.linkedControlRisk\"\r\n></app-responsibility-risk-selector>\r\n\r\n<app-smiley-dialog-inline\r\n  *ngIf=\"showSmiley\"\r\n  [message]=\"message\"\r\n  [actionButtons]=\"actionButtons\"\r\n  (action)=\"action($event)\"\r\n  (closeSmiley)=\"closeSmiley($event)\"\r\n>\r\n</app-smiley-dialog-inline>\r\n\r\n<app-link-responsibility-list\r\n  *ngIf=\"activeSelector === 'LINK_MORE_RESPONSIBILITY'\"\r\n  [selectedResponsibilityValues]=\"logIssueForm?.responsibilityLinked\"\r\n  (closeButton)=\"fieldDeselector('LINK_MORE_RESPONSIBILITY')\"\r\n  [respIdKey]=\"'ReportId'\"\r\n  [radioSelection]=\"false\"\r\n  (selectedResponsibility)=\"selectorAction($event, 'LINK_MORE_RESPONSIBILITY')\"\r\n></app-link-responsibility-list>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .log-an-issue{position:relative}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-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 vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-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 vcomply-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 vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.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:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i9.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent$1, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent$1, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LineLoaderComponent, selector: "app-line-loader", inputs: ["loaderHeight"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: ["message", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "directive", type: ClickOutsideDirective$1, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn"], outputs: ["closeList", "saveList"] }, { kind: "component", type: RadioListComponent, selector: "app-radio-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn"], outputs: ["closeList", "saveList"] }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: ResponsibilityRiskSelectorComponent, selector: "app-responsibility-risk-selector", inputs: ["activeEntity", "listItems", "selectedItems", "loading"], outputs: ["fetchList", "closeList", "saveList"] }, { kind: "component", type: LinkResponsibilityListComponent, selector: "app-link-responsibility-list", inputs: ["onCompletionOfResponsibility", "feature", "respIdKey", "selectedResponsibilityValues", "radioSelection"], outputs: ["closeButton", "selectedResponsibility"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceBreakerPipe, name: "spaceBreaker" }, { kind: "pipe", type: UserFilterPipe, name: "userFilter" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: 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\">\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Linked to\r\n          <button\r\n            class=\"button\"\r\n            (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n          >\r\n            Link More Responsibilities\r\n          </button>\r\n        </label>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Select a responsibility\"\r\n          readonly\r\n          *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom) && logIssueForm?.responsibilityLinked.length === 0\"\r\n          (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n        />\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.responsibilityLinked.length >0 || ['COMPLIANCE_WORKROOM'].includes(openedFrom)\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <span\r\n            *ngIf=\"['COMPLIANCE_WORKROOM'].includes(openedFrom) && reponsibilityData?.responsibilityName\"\r\n              class=\"chipName vx-fs-11 vx-label-txt full-width\"\r\n              [appTooltip]=\"reponsibilityData?.responsibilityName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ reponsibilityData?.responsibilityName }}</span\r\n            >\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom)\"\r\n              (click)=\"deleteItem('LINK_MORE_RESPONSIBILITY', logIssueForm?.responsibilityLinked[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n              <span\r\n              *ngIf=\"logIssueForm?.responsibilityLinked.length > 0\"\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.responsibilityLinked[0]?.ReportName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.responsibilityLinked[0]?.ReportName }}</span>\r\n            <button\r\n              *ngIf=\"logIssueForm?.responsibilityLinked.length > 1\"\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"linkResp.popover()\"\r\n              placement=\"right\"\r\n            >\r\n              +{{ logIssueForm?.responsibilityLinked?.length - 1 }}\r\n            </button>\r\n          </div>\r\n          <button\r\n            *ngIf=\"activeField !== 'LINK_MORE_RESPONSIBILITY' && logIssueForm?.responsibilityLinked.length > 0\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        \r\n      </div>\r\n      <app-popover #linkResp [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let resp of logIssueForm?.responsibilityLinked | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('LINK_MORE_RESPONSIBILITY', resp)\"\r\n                    >&#xe90d;</i\r\n                  >\r\n                  {{ resp?.ReportName }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n    \r\n  </div>\r\n\r\n\r\n  <div\r\n    class=\"form-group-row\"\r\n    *ngIf=\"\r\n      ['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(\r\n        openedFrom\r\n      ) || isRiskControlVisible\r\n    \"\r\n    [class.active]=\"activeField === 'ISSUE_CONTROL_RISK'\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_CONTROL_RISK' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"logIssueForm?.linkedControlRisk?.length > 0\"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          logIssueForm?.linkedControlRisk?.length === 0 ||\r\n          activeField === 'ISSUE_CONTROL_RISK'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm?.linkedControlRisk?.length > 0 &&\r\n          activeField !== 'ISSUE_CONTROL_RISK'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Select a control or risk</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.linkedControlRisk ||\r\n            logIssueForm?.linkedControlRisk?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"\r\n              setActiveFieldSelector('ISSUE_CONTROL_RISK', 'ISSUE_CONTROL_RISK')\r\n            \"\r\n            type=\"text\"\r\n            placeholder=\"Select a control or risk.\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"logIssueForm?.linkedControlRisk?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"\r\n                deleteItem(\r\n                  'ISSUE_CONTROL_RISK',\r\n                  logIssueForm?.linkedControlRisk[0]\r\n                )\r\n              \"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.linkedControlRisk[0]?.itemControlName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.linkedControlRisk[0]?.itemControlName }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_CONTROL_RISK',logIssueForm?.linkedControlRisk[0])\">&#xe90d;</i>{{logIssueForm?.linkedControlRisk[0]?.itemControlName}}</span>\r\n                  </div> -->\r\n          <button\r\n            class=\"edit\"\r\n            *ngIf=\"activeField !== 'ISSUE_CONTROL_RISK'\"\r\n            type=\"button\"\r\n            (click)=\"\r\n              setActiveFieldSelector('ISSUE_CONTROL_RISK', 'ISSUE_CONTROL_RISK')\r\n            \"\r\n          >\r\n            <i class=\"icons\">&#xe90c;</i>Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"vx-form-group\"\r\n        *ngFor=\"let tag of logIssueForm.issueCustomTag | keyvalue\"\r\n      >\r\n        <!-- {{logIssueForm.issueCustomTag|json}} -->\r\n        <label class=\"vx-control-panel\">{{\r\n          tag?.value?.custom_tag_name\r\n        }}</label>\r\n        <input\r\n          type=\"text\"\r\n          [placeholder]=\"tag?.value?.custom_tag_name\"\r\n          [(ngModel)]=\"tag.value.custom_tag_value\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Issue Title -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_TITLE' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueName.trim().length\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n        alt=\"name\"\r\n        *ngIf=\"\r\n          !logIssueForm.issueName.trim().length || activeField === 'ISSUE_TITLE'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm.issueName.trim().length && activeField !== 'ISSUE_TITLE'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Issue Title <span class=\"required\">*</span>\r\n        </label>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Add a name for this issue\"\r\n          [(ngModel)]=\"logIssueForm.issueName\"\r\n          (focusin)=\"setActiveFieldSelector('ISSUE_TITLE', 'ISSUE_TITLE')\"\r\n          (keyup)=\"\r\n            logIssueForm.issueName?.trim()?.length > 0\r\n              ? removeError('issueName')\r\n              : null\r\n          \"\r\n          (focusout)=\"setActiveFieldSelector('', '')\"\r\n          *ngIf=\"\r\n            logIssueForm.issueName == '' || activeSelector === 'ISSUE_TITLE'\r\n          \"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            logIssueForm.issueName.length && activeSelector !== 'ISSUE_TITLE'\r\n          \"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ logIssueForm.issueName }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_TITLE', 'ISSUE_TITLE')\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueName')\">\r\n          Enter a name for this issue.\r\n        </p>\r\n        <ng-container *ngIf=\"AttachmentTrack[0]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[0]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.issueDescriptionAttachements?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.issueDescriptionAttachements\"\r\n          >\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')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            file: false,\r\n            colorPalette: true,\r\n            link: true,\r\n            placeholder: 'Description'\r\n          }\"\r\n          [(ngModel)]=\"logIssueForm.issueDescription\"\r\n          (sendSavedFiles)=\"selectFile('ISSUE_DESCRIPTION', $event)\"\r\n          (clickOutside)=\"checkDescription()\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- issue type start-->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_TITLE' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left checked\">\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\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"> Issue Type </label>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          name=\"issue-type\"\r\n          [checked]=\"logIssueForm?.issueType === 'issue'\"\r\n          (checkedEvent)=\"setIssueType('issue')\"\r\n          >Issue\r\n          <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          name=\"issue-type\"\r\n          [checked]=\"logIssueForm?.issueType === 'incident'\"\r\n          (checkedEvent)=\"setIssueType('incident')\"\r\n          >Incident\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  <!-- Issue Category -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeField === 'ISSUE_CATEGORY'\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_CATEGORY' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueCategory?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCategory?.length === 0 ||\r\n          activeField === 'ISSUE_CATEGORY'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCategory?.length > 0 &&\r\n          activeField !== 'ISSUE_CATEGORY'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Issue Category</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.issueCategory ||\r\n            logIssueForm?.issueCategory?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_CATEGORY', 'ISSUE_CATEGORY')\"\r\n            type=\"text\"\r\n            placeholder=\"Select a category for this issue\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueCategory?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"\r\n                deleteItem('ISSUE_CATEGORY', logIssueForm?.issueCategory[0])\r\n              \"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueCategory[0]?.category_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueCategory[0]?.category_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_CATEGORY',logIssueForm?.issueCategory[0])\">&#xe90d;</i>{{logIssueForm?.issueCategory[0]?.category_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            class=\"edit\"\r\n            *ngIf=\"activeField !== 'ISSUE_CATEGORY'\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CATEGORY', 'ISSUE_CATEGORY')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueCategory')\"\r\n        >\r\n          Select an issue category.\r\n        </p>\r\n      </div>\r\n      <div\r\n        class=\"vx-form-group\"\r\n        *ngFor=\"let tag of logIssueForm.issueCustomTag\"\r\n      >\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  <!-- Responsibility Center -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    *ngIf=\"isRCVisible\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_RC' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueRC?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"logIssueForm?.issueRC?.length === 0\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"logIssueForm?.issueRC?.length > 0 && activeField !== 'ISSUE_RC'\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Responsibility Center\r\n          <span class=\"required\" *ngIf=\"isRCMandatory\">*</span>\r\n        </label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"!logIssueForm?.issueRC || logIssueForm?.issueRC?.length === 0\"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_RC', 'ISSUE_RC')\"\r\n            type=\"text\"\r\n            placeholder=\"Select Responsibility Center(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueRC?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!isRCPreSelected\"\r\n              (click)=\"deleteItem('ISSUE_RC', logIssueForm?.issueRC[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueRC[0]?.item_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueRC[0]?.item_name }}</span\r\n            >\r\n            <button\r\n              *ngIf=\"logIssueForm?.issueRC?.length > 1\"\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"RC.popover()\"\r\n              placement=\"right\"\r\n            >\r\n              +{{ logIssueForm?.issueRC?.slice(1)?.length }}\r\n            </button>\r\n          </div>\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_RC' && !isRCPreSelected\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_RC', 'ISSUE_RC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueRC')\">\r\n          Select the Responsibility Center associated with this issue.\r\n        </p>\r\n      </div>\r\n      <app-popover #RC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let rc of logIssueForm?.issueRC | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_RC', rc)\"\r\n                    >&#xe90d;</i\r\n                  >\r\n                  {{ rc?.item_name }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Who -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_WHO' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.entrustTo?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          (logIssueForm?.entrustTo?.length === 0 &&\r\n            !logIssueForm?.isAssignToMyself) ||\r\n          activeField === 'ISSUE_WHO'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          (logIssueForm?.entrustTo?.length > 0 ||\r\n            logIssueForm?.isAssignToMyself) &&\r\n          activeField !== 'ISSUE_WHO'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Who? <span class=\"required\">*</span></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          [class.disabled]=\"logIssueForm?.isAssignToMyself\"\r\n          *ngIf=\"\r\n            !logIssueForm?.entrustTo || logIssueForm?.entrustTo?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_WHO', 'ISSUE_WHO')\"\r\n            [disabled]=\"logIssueForm?.isAssignToMyself\"\r\n            type=\"text\"\r\n            placeholder=\"Who is responsible for completing the responsibility?\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.entrustTo?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_WHO', logIssueForm?.entrustTo[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.entrustTo[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.entrustTo[0]?.employee_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_WHO',logIssueForm?.entrustTo[0])\">&#xe90d;</i>{{logIssueForm?.entrustTo[0]?.employee_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_WHO'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_WHO', 'ISSUE_WHO')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('entrustTo')\">\r\n          Select the person responsible for resolving this issue.\r\n        </p>\r\n        <div\r\n          class=\"switch-row align-right\"\r\n          [class.disabled]=\"activeField === 'ISSUE_WHO'\"\r\n        >\r\n          <app-cs-switch\r\n            [disabled]=\"activeField === 'ISSUE_WHO'\"\r\n            [(ngValue)]=\"logIssueForm.isAssignToMyself\"\r\n            (ngValueChange)=\"assignMyself($event)\"\r\n            >OR ASSIGN TO MYSELF</app-cs-switch\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Maximun Time to Resolve -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_DATE_TIME' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueDueDate\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueDueDate || activeField === 'ISSUE_DATE_TIME'\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueDueDate && activeField !== 'ISSUE_DATE_TIME'\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Maximum Time to Resolve <span class=\"required\">*</span></label\r\n        >\r\n        <div class=\"date-time-picker\">\r\n          <div class=\"picker-group\">\r\n            <input\r\n              type=\"text\"\r\n              readonly\r\n              placeholder=\"Set a deadline.\"\r\n              [value]=\"logIssueForm.issueDueDate | date : 'dd MMM yyyy'\"\r\n              (click)=\"openDatePicker()\"\r\n            />\r\n            <i class=\"icons\">&#xe92d;</i>\r\n            <dp-date-picker\r\n              #datePicker\r\n              (onSelect)=\"\r\n                datePickerOverlay = false;\r\n                closeDatePicker($event);\r\n                removeError('issueDueDate')\r\n              \"\r\n              [config]=\"dateConfig\"\r\n              [(ngModel)]=\"logIssueForm.issueDueDate\"\r\n            >\r\n            </dp-date-picker>\r\n            <div\r\n              class=\"vx-overlay\"\r\n              (click)=\"closeDatePicker($event)\"\r\n              *ngIf=\"datePickerOverlay\"\r\n            ></div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"picker-group\"\r\n            appPopover\r\n            (click)=\"timePicker.popover()\"\r\n            placement=\"right\"\r\n          >\r\n            <input\r\n              (mouseover)=\"setCurrentTime()\"\r\n              [(ngModel)]=\"logIssueForm.issueDueTime\"\r\n              [value]=\"logIssueForm.issueDueTime\"\r\n              readonly\r\n              class=\"time\"\r\n              placeholder=\"Select Time\"\r\n              type=\"text\"\r\n              [min]=\"currentTime\"\r\n            />\r\n            <i class=\"icons\">&#xe955;</i>\r\n          </div>\r\n          <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n            <app-time-picker\r\n              [time]=\"logIssueForm.issueDueTime\"\r\n              (onTimeSelection)=\"\r\n                onTimeChanged($event); timePicker.closePopover('top')\r\n              \"\r\n            ></app-time-picker>\r\n          </app-popover>\r\n        </div>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueDueDate')\"\r\n        >\r\n          Select the date by which this issue needs to be resolved.\r\n        </p>\r\n\r\n        <p class=\"error-message\" *ngIf=\"!isFutureDate\">\r\n          {{ getDateValidationMessage }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Recommended Actions -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueRecommendation\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/recommended-action.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!(logIssueForm.issueRecommendation | spaceBreaker).length\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"(logIssueForm.issueRecommendation | spaceBreaker).length > 0\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Recommended Actions <span class=\"required\">*</span></label\r\n        >\r\n        <ng-container *ngIf=\"AttachmentTrack[1]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[1]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.recommendedActionsAttachments?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.recommendedActionsAttachments\"\r\n          >\r\n            <div class=\"file-container\">\r\n              <span class=\"file-name\">{{ file?.name }}</span>\r\n              <button>\r\n                <i\r\n                  class=\"icons\"\r\n                  (click)=\"deleteFile(file, 'RECOMMENDED_ACTIONS')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"logIssueForm.issueRecommendation\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            file: true,\r\n            placeholder: 'Recommended actions'\r\n          }\"\r\n          (ngModelChange)=\"\r\n            logIssueForm?.issueRecommendation?.trim()?.length > 0\r\n              ? removeError('issueRecommendation')\r\n              : null\r\n          \"\r\n          (clickOutside)=\"checkDescription()\"\r\n          (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS', $event)\"\r\n        ></vcomply-editor>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueRecommendation')\"\r\n        >\r\n          Specify the recommended actions to resolve this issue.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- *ngIf=\"!hiddenList.includes('RISK_CLASSIFICATION')\"  [class.disabled]=\"activeField  && sideSelectorElements.includes(activeField)\" -->\r\n  <!-- removed the above condition since Risk Classification should be displayed by default in log an issue form -->\r\n\r\n  <!-- Risk Classification -->\r\n  <div class=\"form-group-row\" id=\"risk_classification\">\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueRiskRating\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueRiskRating\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueRiskRating\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Risk Classification</label>\r\n        <div class=\"classification\">\r\n          <label\r\n            class=\"low\"\r\n            *ngFor=\"let class of riskClassification\"\r\n            [ngClass]=\"[class.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification\"\r\n              [value]=\"class.value\"\r\n              [checked]=\"logIssueForm?.issueRiskRating === class.value\"\r\n              [(ngModel)]=\"logIssueForm.issueRiskRating\"\r\n            />\r\n            <span>{{ class.name }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Exception Type -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.EXCEPTION_TYPE\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.exceptionType > -1\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/exception-type.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"logIssueForm?.exceptionType === null\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.exceptionType > -1\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Exception Type</label>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          [value]=\"1\"\r\n          name=\"exception-type\"\r\n          [checked]=\"logIssueForm?.exceptionType === 1\"\r\n          (checkedEvent)=\"setException(1)\"\r\n          >Design Exception\r\n          <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          [value]=\"2\"\r\n          name=\"exception-type\"\r\n          [checked]=\"logIssueForm?.exceptionType === 2\"\r\n          (checkedEvent)=\"setException(2)\"\r\n          >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  <!-- Priority -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.PRIORITY\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issuePriority\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issuePriority\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issuePriority > 0\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Priority</label>\r\n        <div class=\"classification\">\r\n          <label\r\n            *ngFor=\"let priority of riskPrority\"\r\n            [ngClass]=\"[priority.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification-priority\"\r\n              [value]=\"priority.value\"\r\n              [checked]=\"logIssueForm?.issuePriority === priority.value\"\r\n              [(ngModel)]=\"logIssueForm.issuePriority\"\r\n            />\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  <!-- Associated Risks -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueAssociatedRisk\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueAssociatedRisk.trim().length\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueAssociatedRisk.trim().length\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Associated Risks </label>\r\n        <ng-container *ngIf=\"AttachmentTrack[2]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[2]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.associatedRisksAttachments?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.associatedRisksAttachments\"\r\n          >\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')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"logIssueForm.issueAssociatedRisk\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            file: false,\r\n            placeholder: 'Associated Risks'\r\n          }\"\r\n          (clickOutside)=\"checkDescription()\"\r\n          (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS', $event)\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    *ngIf=\"additionalOptionStatus.OVERSIGHT\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      !['ISSUE_CC', 'ISSUE_FCC'].includes(activeField) &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        logIssueForm?.issueCCUsers?.length > 0 ||\r\n        logIssueForm?.failureCCUsers?.length > 0\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          (logIssueForm?.issueCCUsers?.length === 0 &&\r\n            logIssueForm?.failureCCUsers?.length === 0) ||\r\n          activeField === 'ISSUE_CC' ||\r\n          activeField === 'ISSUE_FCC'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCCUsers?.length > 0 ||\r\n          (logIssueForm?.failureCCUsers?.length > 0 &&\r\n            activeField !== 'ISSUE_CC') ||\r\n          activeField !== 'ISSUE_FCC'\r\n        \"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Oversight</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.issueCCUsers ||\r\n            logIssueForm?.issueCCUsers?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CC', 'ISSUE_CC')\"\r\n            placeholder=\"Who should have oversight of this issue?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueCCUsers?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_CC', logIssueForm?.issueCCUsers[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueCCUsers[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueCCUsers[0]?.employee_name }}</span\r\n            >\r\n            <button\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"CC.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"logIssueForm?.issueCCUsers?.length > 1\"\r\n            >\r\n              +{{ logIssueForm?.issueCCUsers?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (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 (click)=\"CC.popover()\" placement=\"right\">+{{logIssueForm?.issueCCUsers?.slice(1).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_CC'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CC', 'ISSUE_CC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.failureCCUsers ||\r\n            logIssueForm?.failureCCUsers?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_FCC', 'ISSUE_FCC')\"\r\n            type=\"text\"\r\n            placeholder=\"Who should be notified if the issue is not resolved?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.failureCCUsers?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_FCC', logIssueForm?.failureCCUsers[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.failureCCUsers[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.failureCCUsers[0]?.employee_name }}</span\r\n            >\r\n            <button\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"FCC.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"logIssueForm?.failureCCUsers?.length > 1\"\r\n            >\r\n              +{{ logIssueForm?.failureCCUsers?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (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 (click)=\"FCC.popover()\" placement=\"right\">+{{logIssueForm?.failureCCUsers?.slice(1).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_FCC'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_FCC', 'ISSUE_FCC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <app-popover #CC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let cc of logIssueForm?.issueCCUsers | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_CC', cc)\"\r\n                    >&#xe90d;</i\r\n                  >\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      <app-popover #FCC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let fcc of logIssueForm?.failureCCUsers | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_FCC', fcc)\"\r\n                    >&#xe90d;</i\r\n                  >\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  </div>\r\n\r\n  <!-- Evidence -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.EVIDENCE\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\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\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Evidence</label>\r\n        <div class=\"upload-format\">\r\n          <span class=\"text\"\r\n            >Do you want evidence of completion of the issue to be\r\n            uploaded?</span\r\n          >\r\n          <div class=\"radio-group\">\r\n            <app-cs-radio\r\n              [name]=\"'file-evidence'\"\r\n              [value]=\"1\"\r\n              [checked]=\"logIssueForm?.evidenceRequired === 1\"\r\n              (checkedEvent)=\"setEvidence(1)\"\r\n              >Yes\r\n            </app-cs-radio>\r\n            <app-cs-radio\r\n              [name]=\"'file-evidence'\"\r\n              [value]=\"0\"\r\n              [checked]=\"logIssueForm?.evidenceRequired === 0\"\r\n              (checkedEvent)=\"setEvidence(0)\"\r\n              >No\r\n            </app-cs-radio>\r\n          </div>\r\n        </div>\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\r\n  [config]=\"selectorConfig?.ISSUE_CATGORY\"\r\n  [itemsList]=\"listData?.categoryList\"\r\n  [selectedItems]=\"logIssueForm.issueCategory\"\r\n  [identifierKey]=\"'category_id'\"\r\n  [displayKey]=\"'category_name'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CATEGORY'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CATEGORY')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CATEGORY')\"\r\n>\r\n</app-radio-list>\r\n\r\n<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'ISSUE_RC'\"\r\n  [responsibilityCentersList]=\"listData?.rcList\"\r\n  [radioSelection]=\"false\"\r\n  [selectedResponsibilityCenters]=\"logIssueForm?.issueRC\"\r\n  [rcIdKey]=\"'item_id'\"\r\n  (saveSelectedList)=\"selectorAction($event, 'ISSUE_RC')\"\r\n  (closeRcList)=\"fieldDeselector('ISSUE_RC')\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-radio-list\r\n  [config]=\"selectorConfig?.ISSUE_WHO\"\r\n  [itemsList]=\"listData?.userList\"\r\n  [twoColumn]=\"true\"\r\n  [selectedItems]=\"logIssueForm.entrustTo\"\r\n  [identifierKey]=\"'employee_id'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_WHO'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_WHO')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_WHO')\"\r\n></app-radio-list>\r\n\r\n<app-radio-list\r\n  [config]=\"selectorConfig?.ISSUE_TYPE\"\r\n  [itemsList]=\"listData?.issueTypeList\"\r\n  [selectedItems]=\"logIssueForm.issueType\"\r\n  [identifierKey]=\"'issue_id'\"\r\n  [displayKey]=\"'issue_type_name'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_TYPE'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_TYPE')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_TYPE')\"\r\n></app-radio-list>\r\n\r\n<app-checkbox-list\r\n  [config]=\"selectorConfig?.ISSUE_CC\"\r\n  [twoColumn]=\"true\"\r\n  [itemsList]=\"\r\n    listData.userList\r\n      | userFilter\r\n        : 'employee_email'\r\n        : logIssueForm.entrustTo\r\n        : { employee_email: currentUser?.email }\r\n  \"\r\n  [selectedItems]=\"logIssueForm.issueCCUsers\"\r\n  [identifierKey]=\"'employee_email'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CC'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CC')\"\r\n></app-checkbox-list>\r\n\r\n<app-checkbox-list\r\n  [config]=\"selectorConfig?.ISSUE_FCC\"\r\n  [twoColumn]=\"true\"\r\n  [itemsList]=\"\r\n    listData.userList\r\n      | userFilter\r\n        : 'employee_email'\r\n        : logIssueForm.entrustTo\r\n        : { employee_email: currentUser?.email }\r\n  \"\r\n  [selectedItems]=\"logIssueForm.failureCCUsers\"\r\n  [identifierKey]=\"'employee_email'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_FCC'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_FCC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_FCC')\"\r\n></app-checkbox-list>\r\n\r\n<app-responsibility-risk-selector\r\n  [loading]=\"isRiskControlLoading\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CONTROL_RISK'\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CONTROL_RISK')\"\r\n  (fetchList)=\"getLinkage(issueDetails?.auditObjId, $event)\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CONTROL_RISK')\"\r\n  [activeEntity]=\"logIssueForm?.linkageType\"\r\n  [listItems]=\"listData?.linkageList\"\r\n  [selectedItems]=\"logIssueForm?.linkedControlRisk\"\r\n></app-responsibility-risk-selector>\r\n\r\n<app-smiley-dialog-inline\r\n  *ngIf=\"showSmiley\"\r\n  [message]=\"message\"\r\n  [actionButtons]=\"actionButtons\"\r\n  (action)=\"action($event)\"\r\n  (closeSmiley)=\"closeSmiley($event)\"\r\n>\r\n</app-smiley-dialog-inline>\r\n\r\n<app-link-responsibility-list\r\n  *ngIf=\"activeSelector === 'LINK_MORE_RESPONSIBILITY'\"\r\n  [selectedResponsibilityValues]=\"logIssueForm?.responsibilityLinked\"\r\n  (closeButton)=\"fieldDeselector('LINK_MORE_RESPONSIBILITY')\"\r\n  [respIdKey]=\"'ReportId'\"\r\n  [radioSelection]=\"false\"\r\n  (selectedResponsibility)=\"selectorAction($event, 'LINK_MORE_RESPONSIBILITY')\"\r\n></app-link-responsibility-list>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .log-an-issue{position:relative}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-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 vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-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 vcomply-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 vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.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:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"] }]
+            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\">\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Linked to\r\n          <button\r\n            class=\"button\"\r\n            (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n          >\r\n            Link More Responsibilities\r\n          </button>\r\n        </label>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Select a responsibility\"\r\n          readonly\r\n          *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom) && !logIssueForm?.responsibilityLinked?.length \"\r\n          (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n        />\r\n        <div class=\"selected\" *ngIf=\"['COMPLIANCE_WORKROOM'].includes(openedFrom) || logIssueForm?.responsibilityLinked?.length\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <span\r\n            *ngIf=\"['COMPLIANCE_WORKROOM'].includes(openedFrom) && reponsibilityData?.responsibilityName\"\r\n              class=\"chipName vx-fs-11 vx-label-txt full-width\"\r\n              [appTooltip]=\"reponsibilityData?.responsibilityName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ reponsibilityData?.responsibilityName }}</span\r\n            >\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom)\"\r\n              (click)=\"deleteItem('LINK_MORE_RESPONSIBILITY', logIssueForm?.responsibilityLinked[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n              <span\r\n              *ngIf=\"!['COMPLIANCE_WORKROOM'].includes(openedFrom) && logIssueForm?.responsibilityLinked?.length\"\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.responsibilityLinked[0]?.ReportName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.responsibilityLinked[0]?.ReportName }}</span>\r\n            <button\r\n              *ngIf=\"(['COMPLIANCE_WORKROOM'].includes(openedFrom) && logIssueForm?.responsibilityLinked?.length ) || logIssueForm?.responsibilityLinked?.length >1\"\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"linkResp.popover()\"\r\n              placement=\"right\"\r\n            >\r\n            +{{ !['COMPLIANCE_WORKROOM'].includes(openedFrom) ? logIssueForm?.responsibilityLinked?.length -1 : logIssueForm?.responsibilityLinked?.length }}\r\n            </button>\r\n          </div>\r\n          <button\r\n            *ngIf=\"activeField !== 'LINK_MORE_RESPONSIBILITY' && logIssueForm?.responsibilityLinked?.length\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('LINK_MORE_RESPONSIBILITY', 'LINK_MORE_RESPONSIBILITY')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        \r\n      </div>\r\n      <app-popover #linkResp [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n            *ngFor=\"let resp of logIssueForm?.responsibilityLinked | slice: !['COMPLIANCE_WORKROOM'].includes(openedFrom) ? 1 : 0\"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('LINK_MORE_RESPONSIBILITY', resp)\"\r\n                    >&#xe90d;</i\r\n                  >\r\n                  {{ resp?.ReportName }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n    \r\n  </div>\r\n\r\n\r\n  <div\r\n    class=\"form-group-row\"\r\n    *ngIf=\"\r\n      ['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(\r\n        openedFrom\r\n      ) || isRiskControlVisible\r\n    \"\r\n    [class.active]=\"activeField === 'ISSUE_CONTROL_RISK'\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_CONTROL_RISK' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"logIssueForm?.linkedControlRisk?.length > 0\"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          logIssueForm?.linkedControlRisk?.length === 0 ||\r\n          activeField === 'ISSUE_CONTROL_RISK'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm?.linkedControlRisk?.length > 0 &&\r\n          activeField !== 'ISSUE_CONTROL_RISK'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Select a control or risk</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.linkedControlRisk ||\r\n            logIssueForm?.linkedControlRisk?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"\r\n              setActiveFieldSelector('ISSUE_CONTROL_RISK', 'ISSUE_CONTROL_RISK')\r\n            \"\r\n            type=\"text\"\r\n            placeholder=\"Select a control or risk.\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"logIssueForm?.linkedControlRisk?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"\r\n                deleteItem(\r\n                  'ISSUE_CONTROL_RISK',\r\n                  logIssueForm?.linkedControlRisk[0]\r\n                )\r\n              \"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.linkedControlRisk[0]?.itemControlName\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.linkedControlRisk[0]?.itemControlName }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_CONTROL_RISK',logIssueForm?.linkedControlRisk[0])\">&#xe90d;</i>{{logIssueForm?.linkedControlRisk[0]?.itemControlName}}</span>\r\n                  </div> -->\r\n          <button\r\n            class=\"edit\"\r\n            *ngIf=\"activeField !== 'ISSUE_CONTROL_RISK'\"\r\n            type=\"button\"\r\n            (click)=\"\r\n              setActiveFieldSelector('ISSUE_CONTROL_RISK', 'ISSUE_CONTROL_RISK')\r\n            \"\r\n          >\r\n            <i class=\"icons\">&#xe90c;</i>Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"vx-form-group\"\r\n        *ngFor=\"let tag of logIssueForm.issueCustomTag | keyvalue\"\r\n      >\r\n        <!-- {{logIssueForm.issueCustomTag|json}} -->\r\n        <label class=\"vx-control-panel\">{{\r\n          tag?.value?.custom_tag_name\r\n        }}</label>\r\n        <input\r\n          type=\"text\"\r\n          [placeholder]=\"tag?.value?.custom_tag_name\"\r\n          [(ngModel)]=\"tag.value.custom_tag_value\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Issue Title -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_TITLE' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueName.trim().length\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n        alt=\"name\"\r\n        *ngIf=\"\r\n          !logIssueForm.issueName.trim().length || activeField === 'ISSUE_TITLE'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm.issueName.trim().length && activeField !== 'ISSUE_TITLE'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Issue Title <span class=\"required\">*</span>\r\n        </label>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"Add a name for this issue\"\r\n          [(ngModel)]=\"logIssueForm.issueName\"\r\n          (focusin)=\"setActiveFieldSelector('ISSUE_TITLE', 'ISSUE_TITLE')\"\r\n          (keyup)=\"\r\n            logIssueForm.issueName?.trim()?.length > 0\r\n              ? removeError('issueName')\r\n              : null\r\n          \"\r\n          (focusout)=\"setActiveFieldSelector('', '')\"\r\n          *ngIf=\"\r\n            logIssueForm.issueName == '' || activeSelector === 'ISSUE_TITLE'\r\n          \"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            logIssueForm.issueName.length && activeSelector !== 'ISSUE_TITLE'\r\n          \"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ logIssueForm.issueName }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_TITLE', 'ISSUE_TITLE')\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('issueName')\">\r\n          Enter a name for this issue.\r\n        </p>\r\n        <ng-container *ngIf=\"AttachmentTrack[0]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[0]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.issueDescriptionAttachements?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.issueDescriptionAttachements\"\r\n          >\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')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            file: false,\r\n            colorPalette: true,\r\n            link: true,\r\n            placeholder: 'Description'\r\n          }\"\r\n          [(ngModel)]=\"logIssueForm.issueDescription\"\r\n          (sendSavedFiles)=\"selectFile('ISSUE_DESCRIPTION', $event)\"\r\n          (clickOutside)=\"checkDescription()\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- issue type start-->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_TITLE' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left checked\">\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\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"> Issue Type </label>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          name=\"issue-type\"\r\n          [checked]=\"logIssueForm?.issueType === 'issue'\"\r\n          (checkedEvent)=\"setIssueType('issue')\"\r\n          >Issue\r\n          <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          name=\"issue-type\"\r\n          [checked]=\"logIssueForm?.issueType === 'incident'\"\r\n          (checkedEvent)=\"setIssueType('incident')\"\r\n          >Incident\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  <!-- Issue Category -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeField === 'ISSUE_CATEGORY'\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_CATEGORY' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueCategory?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCategory?.length === 0 ||\r\n          activeField === 'ISSUE_CATEGORY'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCategory?.length > 0 &&\r\n          activeField !== 'ISSUE_CATEGORY'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Issue Category</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.issueCategory ||\r\n            logIssueForm?.issueCategory?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_CATEGORY', 'ISSUE_CATEGORY')\"\r\n            type=\"text\"\r\n            placeholder=\"Select a category for this issue\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueCategory?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"\r\n                deleteItem('ISSUE_CATEGORY', logIssueForm?.issueCategory[0])\r\n              \"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueCategory[0]?.category_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueCategory[0]?.category_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_CATEGORY',logIssueForm?.issueCategory[0])\">&#xe90d;</i>{{logIssueForm?.issueCategory[0]?.category_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            class=\"edit\"\r\n            *ngIf=\"activeField !== 'ISSUE_CATEGORY'\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CATEGORY', 'ISSUE_CATEGORY')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueCategory')\"\r\n        >\r\n          Select an issue category.\r\n        </p>\r\n      </div>\r\n      <div\r\n        class=\"vx-form-group\"\r\n        *ngFor=\"let tag of logIssueForm.issueCustomTag\"\r\n      >\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  <!-- Responsibility Center -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    *ngIf=\"logIssueForm?.issueRC?.length\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_RC' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueRC?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"logIssueForm?.issueRC?.length === 0\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"logIssueForm?.issueRC?.length > 0 && activeField !== 'ISSUE_RC'\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Responsibility Center\r\n          <span class=\"required\" *ngIf=\"isRCMandatory\">*</span>\r\n        </label>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueRC?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueRC[0]?.item_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueRC[0]?.item_name }}</span\r\n            >\r\n            <button\r\n              *ngIf=\"logIssueForm?.issueRC?.length > 1\"\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"RC.popover()\"\r\n              placement=\"right\"\r\n            >\r\n              +{{ logIssueForm?.issueRC?.slice(1)?.length }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <app-popover #RC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let rc of logIssueForm?.issueRC | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  {{ rc?.item_name }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Who -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_WHO' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.entrustTo?.length > 0\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          (logIssueForm?.entrustTo?.length === 0 &&\r\n            !logIssueForm?.isAssignToMyself) ||\r\n          activeField === 'ISSUE_WHO'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          (logIssueForm?.entrustTo?.length > 0 ||\r\n            logIssueForm?.isAssignToMyself) &&\r\n          activeField !== 'ISSUE_WHO'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Who? <span class=\"required\">*</span></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          [class.disabled]=\"logIssueForm?.isAssignToMyself\"\r\n          *ngIf=\"\r\n            !logIssueForm?.entrustTo || logIssueForm?.entrustTo?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_WHO', 'ISSUE_WHO')\"\r\n            [disabled]=\"logIssueForm?.isAssignToMyself\"\r\n            type=\"text\"\r\n            placeholder=\"Who is responsible for completing the responsibility?\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.entrustTo?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_WHO', logIssueForm?.entrustTo[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.entrustTo[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.entrustTo[0]?.employee_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"deleteItem('ISSUE_WHO',logIssueForm?.entrustTo[0])\">&#xe90d;</i>{{logIssueForm?.entrustTo[0]?.employee_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_WHO'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_WHO', 'ISSUE_WHO')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p class=\"error-message\" *ngIf=\"fieldsWithError.includes('entrustTo')\">\r\n          Select the person responsible for resolving this issue.\r\n        </p>\r\n        <div\r\n          class=\"switch-row align-right\"\r\n          [class.disabled]=\"activeField === 'ISSUE_WHO'\"\r\n        >\r\n          <app-cs-switch\r\n            [disabled]=\"activeField === 'ISSUE_WHO'\"\r\n            [(ngValue)]=\"logIssueForm.isAssignToMyself\"\r\n            (ngValueChange)=\"assignMyself($event)\"\r\n            >OR ASSIGN TO MYSELF</app-cs-switch\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Maximun Time to Resolve -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      activeField !== 'ISSUE_DATE_TIME' &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issueDueDate\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueDueDate || activeField === 'ISSUE_DATE_TIME'\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueDueDate && activeField !== 'ISSUE_DATE_TIME'\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Maximum Time to Resolve <span class=\"required\">*</span></label\r\n        >\r\n        <div class=\"date-time-picker\">\r\n          <div class=\"picker-group\">\r\n            <input\r\n              type=\"text\"\r\n              readonly\r\n              placeholder=\"Set a deadline.\"\r\n              [value]=\"logIssueForm.issueDueDate | date : 'dd MMM yyyy'\"\r\n              (click)=\"openDatePicker()\"\r\n            />\r\n            <i class=\"icons\">&#xe92d;</i>\r\n            <dp-date-picker\r\n              #datePicker\r\n              (onSelect)=\"\r\n                datePickerOverlay = false;\r\n                closeDatePicker($event);\r\n                removeError('issueDueDate')\r\n              \"\r\n              [config]=\"dateConfig\"\r\n              [(ngModel)]=\"logIssueForm.issueDueDate\"\r\n            >\r\n            </dp-date-picker>\r\n            <div\r\n              class=\"vx-overlay\"\r\n              (click)=\"closeDatePicker($event)\"\r\n              *ngIf=\"datePickerOverlay\"\r\n            ></div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"picker-group\"\r\n            appPopover\r\n            (click)=\"timePicker.popover()\"\r\n            placement=\"right\"\r\n          >\r\n            <input\r\n              (mouseover)=\"setCurrentTime()\"\r\n              [(ngModel)]=\"logIssueForm.issueDueTime\"\r\n              [value]=\"logIssueForm.issueDueTime\"\r\n              readonly\r\n              class=\"time\"\r\n              placeholder=\"Select Time\"\r\n              type=\"text\"\r\n              [min]=\"currentTime\"\r\n            />\r\n            <i class=\"icons\">&#xe955;</i>\r\n          </div>\r\n          <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n            <app-time-picker\r\n              [time]=\"logIssueForm.issueDueTime\"\r\n              (onTimeSelection)=\"\r\n                onTimeChanged($event); timePicker.closePopover('top')\r\n              \"\r\n            ></app-time-picker>\r\n          </app-popover>\r\n        </div>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueDueDate')\"\r\n        >\r\n          Select the date by which this issue needs to be resolved.\r\n        </p>\r\n\r\n        <p class=\"error-message\" *ngIf=\"!isFutureDate\">\r\n          {{ getDateValidationMessage }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Recommended Actions -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueRecommendation\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/recommended-action.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!(logIssueForm.issueRecommendation | spaceBreaker).length\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"(logIssueForm.issueRecommendation | spaceBreaker).length > 0\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >Recommended Actions <span class=\"required\">*</span></label\r\n        >\r\n        <ng-container *ngIf=\"AttachmentTrack[1]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[1]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.recommendedActionsAttachments?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.recommendedActionsAttachments\"\r\n          >\r\n            <div class=\"file-container\">\r\n              <span class=\"file-name\">{{ file?.name }}</span>\r\n              <button>\r\n                <i\r\n                  class=\"icons\"\r\n                  (click)=\"deleteFile(file, 'RECOMMENDED_ACTIONS')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"logIssueForm.issueRecommendation\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            file: true,\r\n            placeholder: 'Recommended actions'\r\n          }\"\r\n          (ngModelChange)=\"\r\n            logIssueForm?.issueRecommendation?.trim()?.length > 0\r\n              ? removeError('issueRecommendation')\r\n              : null\r\n          \"\r\n          (clickOutside)=\"checkDescription()\"\r\n          (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS', $event)\"\r\n        ></vcomply-editor>\r\n        <p\r\n          class=\"error-message\"\r\n          *ngIf=\"fieldsWithError.includes('issueRecommendation')\"\r\n        >\r\n          Specify the recommended actions to resolve this issue.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- *ngIf=\"!hiddenList.includes('RISK_CLASSIFICATION')\"  [class.disabled]=\"activeField  && sideSelectorElements.includes(activeField)\" -->\r\n  <!-- removed the above condition since Risk Classification should be displayed by default in log an issue form -->\r\n\r\n  <!-- Risk Classification -->\r\n  <div class=\"form-group-row\" id=\"risk_classification\">\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueRiskRating\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueRiskRating\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueRiskRating\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Risk Classification</label>\r\n        <div class=\"classification\">\r\n          <label\r\n            class=\"low\"\r\n            *ngFor=\"let class of riskClassification\"\r\n            [ngClass]=\"[class.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification\"\r\n              [value]=\"class.value\"\r\n              [checked]=\"logIssueForm?.issueRiskRating === class.value\"\r\n              [(ngModel)]=\"logIssueForm.issueRiskRating\"\r\n            />\r\n            <span>{{ class.name }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Exception Type -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.EXCEPTION_TYPE\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.exceptionType > -1\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/exception-type.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"logIssueForm?.exceptionType === null\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.exceptionType > -1\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Exception Type</label>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          [value]=\"1\"\r\n          name=\"exception-type\"\r\n          [checked]=\"logIssueForm?.exceptionType === 1\"\r\n          (checkedEvent)=\"setException(1)\"\r\n          >Design Exception\r\n          <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          class=\"main-filed\"\r\n          [value]=\"2\"\r\n          name=\"exception-type\"\r\n          [checked]=\"logIssueForm?.exceptionType === 2\"\r\n          (checkedEvent)=\"setException(2)\"\r\n          >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  <!-- Priority -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.PRIORITY\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm?.issuePriority\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issuePriority\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issuePriority > 0\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Priority</label>\r\n        <div class=\"classification\">\r\n          <label\r\n            *ngFor=\"let priority of riskPrority\"\r\n            [ngClass]=\"[priority.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification-priority\"\r\n              [value]=\"priority.value\"\r\n              [checked]=\"logIssueForm?.issuePriority === priority.value\"\r\n              [(ngModel)]=\"logIssueForm.issuePriority\"\r\n            />\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  <!-- Associated Risks -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"logIssueForm.issueAssociatedRisk\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!logIssueForm?.issueAssociatedRisk.trim().length\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"logIssueForm?.issueAssociatedRisk.trim().length\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Associated Risks </label>\r\n        <ng-container *ngIf=\"AttachmentTrack[2]?.length > 0\">\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let uploadingFile of AttachmentTrack[2]\"\r\n          >\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\r\n          *ngIf=\"logIssueForm?.associatedRisksAttachments?.length > 0\"\r\n        >\r\n          <div\r\n            class=\"file-list\"\r\n            *ngFor=\"let file of logIssueForm?.associatedRisksAttachments\"\r\n          >\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')\"\r\n                  >&#xe90d;</i\r\n                >\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"logIssueForm.issueAssociatedRisk\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            file: false,\r\n            placeholder: 'Associated Risks'\r\n          }\"\r\n          (clickOutside)=\"checkDescription()\"\r\n          (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS', $event)\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    *ngIf=\"additionalOptionStatus.OVERSIGHT\"\r\n    [class.disabled]=\"\r\n      activeField &&\r\n      !['ISSUE_CC', 'ISSUE_FCC'].includes(activeField) &&\r\n      sideSelectorElements.includes(activeField)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        logIssueForm?.issueCCUsers?.length > 0 ||\r\n        logIssueForm?.failureCCUsers?.length > 0\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          (logIssueForm?.issueCCUsers?.length === 0 &&\r\n            logIssueForm?.failureCCUsers?.length === 0) ||\r\n          activeField === 'ISSUE_CC' ||\r\n          activeField === 'ISSUE_FCC'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          logIssueForm?.issueCCUsers?.length > 0 ||\r\n          (logIssueForm?.failureCCUsers?.length > 0 &&\r\n            activeField !== 'ISSUE_CC') ||\r\n          activeField !== 'ISSUE_FCC'\r\n        \"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Oversight</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.issueCCUsers ||\r\n            logIssueForm?.issueCCUsers?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CC', 'ISSUE_CC')\"\r\n            placeholder=\"Who should have oversight of this issue?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.issueCCUsers?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_CC', logIssueForm?.issueCCUsers[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.issueCCUsers[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.issueCCUsers[0]?.employee_name }}</span\r\n            >\r\n            <button\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"CC.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"logIssueForm?.issueCCUsers?.length > 1\"\r\n            >\r\n              +{{ logIssueForm?.issueCCUsers?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (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 (click)=\"CC.popover()\" placement=\"right\">+{{logIssueForm?.issueCCUsers?.slice(1).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_CC'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_CC', 'ISSUE_CC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            !logIssueForm?.failureCCUsers ||\r\n            logIssueForm?.failureCCUsers?.length === 0\r\n          \"\r\n        >\r\n          <input\r\n            (click)=\"setActiveFieldSelector('ISSUE_FCC', 'ISSUE_FCC')\"\r\n            type=\"text\"\r\n            placeholder=\"Who should be notified if the issue is not resolved?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div class=\"selected\" *ngIf=\"logIssueForm?.failureCCUsers?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"deleteItem('ISSUE_FCC', logIssueForm?.failureCCUsers[0])\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"logIssueForm?.failureCCUsers[0]?.employee_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ logIssueForm?.failureCCUsers[0]?.employee_name }}</span\r\n            >\r\n            <button\r\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n              appPopover\r\n              (click)=\"FCC.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"logIssueForm?.failureCCUsers?.length > 1\"\r\n            >\r\n              +{{ logIssueForm?.failureCCUsers?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (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 (click)=\"FCC.popover()\" placement=\"right\">+{{logIssueForm?.failureCCUsers?.slice(1).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeField !== 'ISSUE_FCC'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"setActiveFieldSelector('ISSUE_FCC', 'ISSUE_FCC')\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <app-popover #CC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let cc of logIssueForm?.issueCCUsers | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_CC', cc)\"\r\n                    >&#xe90d;</i\r\n                  >\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      <app-popover #FCC [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let fcc of logIssueForm?.failureCCUsers | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  <i class=\"icons\" (click)=\"deleteItem('ISSUE_FCC', fcc)\"\r\n                    >&#xe90d;</i\r\n                  >\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  </div>\r\n\r\n  <!-- Evidence -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"additionalOptionStatus.EVIDENCE\"\r\n    [class.disabled]=\"activeField && sideSelectorElements.includes(activeField)\"\r\n  >\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\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n        <path\r\n          class=\"checkIcon__check\"\r\n          fill=\"none\"\r\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n        />\r\n      </svg>\r\n    </div>\r\n    <div class=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Evidence</label>\r\n        <div class=\"upload-format\">\r\n          <span class=\"text\"\r\n            >Do you want evidence of completion of the issue to be\r\n            uploaded?</span\r\n          >\r\n          <div class=\"radio-group\">\r\n            <app-cs-radio\r\n              [name]=\"'file-evidence'\"\r\n              [value]=\"1\"\r\n              [checked]=\"logIssueForm?.evidenceRequired === 1\"\r\n              (checkedEvent)=\"setEvidence(1)\"\r\n              >Yes\r\n            </app-cs-radio>\r\n            <app-cs-radio\r\n              [name]=\"'file-evidence'\"\r\n              [value]=\"0\"\r\n              [checked]=\"logIssueForm?.evidenceRequired === 0\"\r\n              (checkedEvent)=\"setEvidence(0)\"\r\n              >No\r\n            </app-cs-radio>\r\n          </div>\r\n        </div>\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\r\n  [config]=\"selectorConfig?.ISSUE_CATGORY\"\r\n  [itemsList]=\"listData?.categoryList\"\r\n  [selectedItems]=\"logIssueForm.issueCategory\"\r\n  [identifierKey]=\"'category_id'\"\r\n  [displayKey]=\"'category_name'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CATEGORY'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CATEGORY')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CATEGORY')\"\r\n>\r\n</app-radio-list>\r\n\r\n<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'ISSUE_RC'\"\r\n  [responsibilityCentersList]=\"listData?.rcList\"\r\n  [radioSelection]=\"false\"\r\n  [selectedResponsibilityCenters]=\"logIssueForm?.issueRC\"\r\n  [rcIdKey]=\"'item_id'\"\r\n  (saveSelectedList)=\"selectorAction($event, 'ISSUE_RC')\"\r\n  (closeRcList)=\"fieldDeselector('ISSUE_RC')\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-radio-list\r\n  [config]=\"selectorConfig?.ISSUE_WHO\"\r\n  [itemsList]=\"listData?.userList\"\r\n  [twoColumn]=\"true\"\r\n  [selectedItems]=\"logIssueForm.entrustTo\"\r\n  [identifierKey]=\"'employee_id'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_WHO'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_WHO')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_WHO')\"\r\n></app-radio-list>\r\n\r\n<app-radio-list\r\n  [config]=\"selectorConfig?.ISSUE_TYPE\"\r\n  [itemsList]=\"listData?.issueTypeList\"\r\n  [selectedItems]=\"logIssueForm.issueType\"\r\n  [identifierKey]=\"'issue_id'\"\r\n  [displayKey]=\"'issue_type_name'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_TYPE'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_TYPE')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_TYPE')\"\r\n></app-radio-list>\r\n\r\n<app-checkbox-list\r\n  [config]=\"selectorConfig?.ISSUE_CC\"\r\n  [twoColumn]=\"true\"\r\n  [itemsList]=\"\r\n    listData.userList\r\n      | userFilter\r\n        : 'employee_email'\r\n        : logIssueForm.entrustTo\r\n        : { employee_email: currentUser?.email }\r\n  \"\r\n  [selectedItems]=\"logIssueForm.issueCCUsers\"\r\n  [identifierKey]=\"'employee_email'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CC'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CC')\"\r\n></app-checkbox-list>\r\n\r\n<app-checkbox-list\r\n  [config]=\"selectorConfig?.ISSUE_FCC\"\r\n  [twoColumn]=\"true\"\r\n  [itemsList]=\"\r\n    listData.userList\r\n      | userFilter\r\n        : 'employee_email'\r\n        : logIssueForm.entrustTo\r\n        : { employee_email: currentUser?.email }\r\n  \"\r\n  [selectedItems]=\"logIssueForm.failureCCUsers\"\r\n  [identifierKey]=\"'employee_email'\"\r\n  [displayKey]=\"'employee_name'\"\r\n  [tooltipKey]=\"'employee_email'\"\r\n  *ngIf=\"activeSelector === 'ISSUE_FCC'\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_FCC')\"\r\n  (closeList)=\"fieldDeselector('ISSUE_FCC')\"\r\n></app-checkbox-list>\r\n\r\n<app-responsibility-risk-selector\r\n  [loading]=\"isRiskControlLoading\"\r\n  *ngIf=\"activeSelector === 'ISSUE_CONTROL_RISK'\"\r\n  (closeList)=\"fieldDeselector('ISSUE_CONTROL_RISK')\"\r\n  (fetchList)=\"getLinkage(issueDetails?.auditObjId, $event)\"\r\n  (saveList)=\"selectorAction($event, 'ISSUE_CONTROL_RISK')\"\r\n  [activeEntity]=\"logIssueForm?.linkageType\"\r\n  [listItems]=\"listData?.linkageList\"\r\n  [selectedItems]=\"logIssueForm?.linkedControlRisk\"\r\n></app-responsibility-risk-selector>\r\n\r\n<app-smiley-dialog-inline\r\n  *ngIf=\"showSmiley\"\r\n  [message]=\"message\"\r\n  [actionButtons]=\"actionButtons\"\r\n  (action)=\"action($event)\"\r\n  (closeSmiley)=\"closeSmiley($event)\"\r\n>\r\n</app-smiley-dialog-inline>\r\n\r\n<app-link-responsibility-list\r\n  *ngIf=\"activeSelector === 'LINK_MORE_RESPONSIBILITY'\"\r\n  [selectedResponsibilityValues]=\"logIssueForm?.responsibilityLinked\"\r\n  (closeButton)=\"fieldDeselector('LINK_MORE_RESPONSIBILITY')\"\r\n  [respIdKey]=\"'ReportId'\"\r\n  [radioSelection]=\"false\"\r\n  (selectedResponsibility)=\"selectorAction($event, 'LINK_MORE_RESPONSIBILITY')\"\r\n></app-link-responsibility-list>\r\n\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .log-an-issue{position:relative}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-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 vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-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 vcomply-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 vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.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:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"] }]
         }], ctorParameters: function () { return [{ type: LogIssueService }, { type: AuthService }, { type: UiKitService }, { type: SnackBarService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { openedFrom: [{
                 type: Input
             }], issueId: [{