npm - vcomply-workflow-engine - Versions diffs - 6.1.10 → 6.1.12 - Mend

vcomply-workflow-engine 6.1.10 → 6.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/esm2022/lib/sharedComponents/assessment-list/assessment-list.component.mjs CHANGED Viewed

@@ -186,7 +186,7 @@ export class AssessmentListComponent {
         this.isDeleted = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssessmentListComponent, deps: [{ token: i1.ResponsibilityService }, { token: i2.AssessmentService }, { token: i3.AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssessmentListComponent, selector: "app-assessment-list", inputs: { isEdit: "isEdit", mode: "mode", selectedAssessment: "selectedAssessment", selectedAssessmentData: "selectedAssessmentData", program_ids: "program_ids" }, outputs: { onAssessmentSelect: "onAssessmentSelect", cancelAssessment: "cancelAssessment" }, ngImport: i0, template: "<app-preview\n  *ngIf=\"isPreview\"\n  [questionData]=\"previewQuestionData\"\n  (previewBack)=\"previewBack()\"\n></app-preview>\n<div class=\"assessment-list\" [class.animate]=\"animation\">\n  <div\n    class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\n  </div>\n  <div class=\"assessment-list-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchAssessments\"\n        (change)=\"onAssessmentSearch($event.target.value)\"\n        placeholder=\"Search Assessment Category\"\n      />\n    </div>\n    <app-workflow-pagination\n      [pageCount]=\"assessmentCategory?.totalPage\"\n      [total]=\"assessmentCategory?.totalRecords\"\n      [start]=\"assessmentCategory?.start_value\"\n      [end]=\"assessmentCategory?.end_value\"\n      [activeAlphabet]=\"''\"\n      (selectedAlphabet)=\"onAlphabetSelected($event)\"\n      (selectedPage)=\"onPageSelection($event)\"\n    ></app-workflow-pagination>\n    <div\n      *ngIf=\"\n        assessmentCategory.data.length === 0 && !isLoader && searchAssessments\n      \"\n      class=\"assessment-list-part vx-mb-4\"\n    >\n      <app-no-data\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Assessments Found.'\"\n      ></app-no-data>\n    </div>\n    <div\n      *ngIf=\"assessmentCategory.data.length || isLoader\"\n      class=\"assessment-list-part vx-mb-4\"\n    >\n      <div\n        *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\"\n        class=\"assessment-list-selected\"\n      >\n        <div class=\"assessment-list-heading\">\n          {{\n            mode === \"policy\"\n              ? \"Assessment already selected\"\n              : \"Assessment already selected for this responsibility\"\n          }}\n        </div>\n        <div class=\"assessment-list-item\">\n          <div class=\"table-row\">\n            <div class=\"table-column serial disabled\">\n              <app-cs-radio\n                [disabled]=\"true\"\n                class=\"disabled\"\n                [checked]=\"true\"\n                [readonly]=\"true\"\n              ></app-cs-radio>\n            </div>\n            <div class=\"table-column sub-name\">\n              <div class=\"name-inner\">\n                <div\n                  class=\"value\"\n                  [appTooltip]=\"\n                    selectedAssessment?.assessmentDetails?.assessment_name\n                  \"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ selectedAssessment?.assessmentDetails?.assessment_name }}\n                </div>\n                <div class=\"within-part\">\n                  <span class=\"within-box\">Within</span>\n                  <span\n                    class=\"value\"\n                    [appTooltip]=\"\n                      selectedAssessment?.category_details?.category_name +\n                      (selectedAssessment?.category_details?.parent_tree\n                        ? ' > ' +\n                          selectedAssessment?.category_details?.parent_tree\n                        : '')\n                    \"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                    >{{\n                      selectedAssessment?.category_details?.category_name +\n                        (selectedAssessment?.category_details?.parent_tree\n                          ? \" > \" +\n                            selectedAssessment?.category_details?.parent_tree\n                          : \"\")\n                    }}</span\n                  >\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column question\">\n              <div class=\"buttons\">\n                <button\n                  class=\"action-btn\"\n                  (click)=\"preview(selectedAssessment?.assessmentDetails)\"\n                >\n                  <i class=\"icons\">&#xeae5;</i> Preview\n                </button>\n                <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\n              </div>\n              <div class=\"label\">\n                {{ selectedAssessment?.assessmentDetails?.questions }}\n                {{\n                  selectedAssessment?.assessmentDetails?.questions > 1\n                    ? \"Questions\"\n                    : \"Question\"\n                }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"assessment-list-heading\">\n        {{\n          mode === \"policy\"\n            ? \"Select an Assessment\"\n            : \"Select an Assessment for this responsibility\"\n        }}\n      </div>\n\n      <!--\n                    Assessment category list \n                    active class is used for highlighting opened element\n            -->\n      <ng-container *ngIf=\"!isLoader\">\n        <div\n          *ngFor=\"let data of assessmentCategory.data; let i = index\"\n          class=\"assessment-list-item\"\n          [class.active]=\"\n            openedCategory.includes(i) ||\n            data.id === selectedAssessment?.category_id\n          \"\n        >\n          <div\n            class=\"table-row main-list\"\n            (click)=\"showSubList(i, data?.id)\"\n            [class.disabled]=\"data?.assessmentcount < 1\"\n          >\n            <div class=\"table-column serial\">\n              <div\n                [id]=\"'sr-no' + i\"\n                class=\"sr-no\"\n                [appTooltip]=\"i + 1\"\n                placement=\"bottom\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"true\"\n              >\n                {{ dataPerPage * (assessmentPayload.page_no - 1) + (i + 1) }}\n              </div>\n            </div>\n            <div class=\"table-column name\">\n              <div class=\"name-inner\">\n                <div\n                  class=\"value\"\n                  [appTooltip]=\"data.category_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ data?.category_name }}\n                </div>\n                <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\n                  <span class=\"within-box\">Within</span>\n                  <span\n                    class=\"value\"\n                    [appTooltip]=\"data.parent_tree\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                    >{{ data?.parent_tree }}</span\n                  >\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column action\">\n              <button\n                [id]=\"'arrow' + i\"\n                class=\"arrow\"\n                [class.disabled]=\"data?.assessmentcount < 1\"\n                [disabled]=\"data?.assessmentcount < 1\"\n              >\n                <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\"\n                  >&#xe970;</i\n                >\n                <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\n              </button>\n            </div>\n          </div>\n\n          <!-- Assessment list start from here -->\n          <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\n            <ng-container *ngIf=\"data.assessmentData?.length > 0\">\n              <div\n                class=\"table-row\"\n                *ngFor=\"let assessment of data.assessmentData; let j = index\"\n                [class.active]=\"\n                  assessment.id === selectedAssessment?.assessment_id &&\n                  data.id === selectedAssessment?.category_id\n                \"\n              >\n                <div class=\"table-column serial\">\n                  <div\n                    [id]=\"'sub-sr-no' + i + j\"\n                    class=\"sr-no\"\n                    appTooltip=\"{{\n                      dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\"\n                    placement=\"bottom\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"true\"\n                  >\n                    {{\n                      dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\n                    <app-cs-radio\n                      name=\"assessment\"\n                      [value]=\"assessment.id\"\n                      [checked]=\"\n                        assessment?.id === selectedAssessment?.assessment_id &&\n                        data?.id === selectedAssessment?.category_id\n                      \"\n                      (checkedEvent)=\"setAssessment(data, assessment)\"\n                    ></app-cs-radio>\n                  </div>\n                </div>\n                <div class=\"table-column sub-name\">\n                  <div\n                    class=\"value\"\n                    [appTooltip]=\"\n                      'Mission and message, communications to external audiences'\n                    \"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ assessment?.assessment_name }}\n                  </div>\n                </div>\n                <div class=\"table-column question\">\n                  <div class=\"buttons\">\n                    <button class=\"action-btn\" (click)=\"preview(assessment)\">\n                      <i class=\"icons\">&#xeae5;</i> Preview\n                    </button>\n                    <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\n                  </div>\n                  <div class=\"label\">\n                    {{ assessment?.questions }}\n                    {{ assessment?.questions > 1 ? \"Questions\" : \"Question\" }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <!-- Loader loading isLoader  -->\n            <app-assessment-list-sub-loader\n              *ngIf=\"!data.assessmentData?.length\"\n            ></app-assessment-list-sub-loader>\n            <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\n          </div>\n        </div>\n      </ng-container>\n      <!-- Loader loading isLoader  -->\n      <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\n    </div>\n    <!-- No data image  -->\n    <app-no-data\n      *ngIf=\"!assessmentCategory.data.length && !isLoader && !searchAssessments\"\n      [noDataImage]=\"ASSETS.search_data\"\n      [noDataText]=\"'No Data to Display'\"\n    ></app-no-data>\n\n    <app-floating-bar\n      [selectedData]=\"[]\"\n      (closeEvent)=\"save()\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\"\n      [selectedData]=\"\n        selectedAssessment?.assessment_id\n          ? [selectedAssessment?.assessmentDetails]\n          : []\n      \"\n      [displayElementKey]=\"'assessment_name'\"\n      [pluralText]=\"'Risk Categories selected'\"\n      (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n    >\n    </app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;inset:0 500px 0 0}::ng-deep .assessment-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 242px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .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 .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;opacity:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:22px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .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}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}::ng-deep .assessment-list-body app-no-data .no-data-wrapper{height:calc(100% - 118px)}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i7.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i9.PreviewComponent, selector: "app-preview", inputs: ["questionData"], outputs: ["previewBack"] }, { kind: "component", type: i10.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: i11.WorkflowPaginationComponent, selector: "app-workflow-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "noFilter", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: i12.AssessmentListLoaderComponent, selector: "app-assessment-list-loader" }, { kind: "component", type: i13.AssessmentListSubLoaderComponent, selector: "app-assessment-list-sub-loader" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssessmentListComponent, selector: "app-assessment-list", inputs: { isEdit: "isEdit", mode: "mode", selectedAssessment: "selectedAssessment", selectedAssessmentData: "selectedAssessmentData", program_ids: "program_ids" }, outputs: { onAssessmentSelect: "onAssessmentSelect", cancelAssessment: "cancelAssessment" }, ngImport: i0, template: "<app-preview\n  *ngIf=\"isPreview\"\n  [questionData]=\"previewQuestionData\"\n  (previewBack)=\"previewBack()\"\n></app-preview>\n<div class=\"assessment-list\" [class.animate]=\"animation\">\n  <div\n    class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\n  </div>\n  <div class=\"assessment-list-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchAssessments\"\n        (change)=\"onAssessmentSearch($event.target.value)\"\n        placeholder=\"Search Assessment Category\"\n      />\n    </div>\n    <app-workflow-pagination\n      [pageCount]=\"assessmentCategory?.totalPage\"\n      [total]=\"assessmentCategory?.totalRecords\"\n      [start]=\"assessmentCategory?.start_value\"\n      [end]=\"assessmentCategory?.end_value\"\n      [activeAlphabet]=\"''\"\n      (selectedAlphabet)=\"onAlphabetSelected($event)\"\n      (selectedPage)=\"onPageSelection($event)\"\n    ></app-workflow-pagination>\n    <div\n      *ngIf=\"\n        assessmentCategory.data.length === 0 && !isLoader && searchAssessments\n      \"\n      class=\"assessment-list-part vx-mb-4\"\n    >\n      <app-no-data\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Assessments Found.'\"\n      ></app-no-data>\n    </div>\n    <div\n      *ngIf=\"assessmentCategory.data.length || isLoader\"\n      class=\"assessment-list-part vx-mb-4\"\n    >\n      <div\n        *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\"\n        class=\"assessment-list-selected\"\n      >\n        <div class=\"assessment-list-heading\">\n          {{\n            mode === \"policy\"\n              ? \"Assessment already selected\"\n              : \"Assessment already selected for this responsibility\"\n          }}\n        </div>\n        <div class=\"assessment-list-item\">\n          <div class=\"table-row\">\n            <div class=\"table-column serial disabled\">\n              <app-cs-radio\n                [disabled]=\"true\"\n                class=\"disabled\"\n                [checked]=\"true\"\n                [readonly]=\"true\"\n              ></app-cs-radio>\n            </div>\n            <div class=\"table-column sub-name\">\n              <div class=\"name-inner\">\n                <div\n                  class=\"value\"\n                  [appTooltip]=\"\n                    selectedAssessment?.assessmentDetails?.assessment_name\n                  \"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ selectedAssessment?.assessmentDetails?.assessment_name }}\n                </div>\n                <div class=\"within-part\">\n                  <span class=\"within-box\">Within</span>\n                  <span\n                    class=\"value\"\n                    [appTooltip]=\"\n                      selectedAssessment?.category_details?.category_name +\n                      (selectedAssessment?.category_details?.parent_tree\n                        ? ' > ' +\n                          selectedAssessment?.category_details?.parent_tree\n                        : '')\n                    \"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                    >{{\n                      selectedAssessment?.category_details?.category_name +\n                        (selectedAssessment?.category_details?.parent_tree\n                          ? \" > \" +\n                            selectedAssessment?.category_details?.parent_tree\n                          : \"\")\n                    }}</span\n                  >\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column question\">\n              <div class=\"buttons\">\n                <button\n                  class=\"action-btn\"\n                  (click)=\"preview(selectedAssessment?.assessmentDetails)\"\n                >\n                  <i class=\"icons\">&#xeae5;</i> Preview\n                </button>\n                <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\n              </div>\n              <div class=\"label\">\n                {{ selectedAssessment?.assessmentDetails?.questions }}\n                {{\n                  selectedAssessment?.assessmentDetails?.questions > 1\n                    ? \"Questions\"\n                    : \"Question\"\n                }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"assessment-list-heading\">\n        {{\n          mode === \"policy\"\n            ? \"Select an Assessment\"\n            : \"Select an Assessment for this responsibility\"\n        }}\n      </div>\n\n      <!--\n                    Assessment category list \n                    active class is used for highlighting opened element\n            -->\n      <ng-container *ngIf=\"!isLoader\">\n        <div\n          *ngFor=\"let data of assessmentCategory.data; let i = index\"\n          class=\"assessment-list-item\"\n          [class.active]=\"\n            openedCategory.includes(i) ||\n            data.id === selectedAssessment?.category_id\n          \"\n        >\n          <div\n            class=\"table-row main-list\"\n            (click)=\"showSubList(i, data?.id)\"\n            [class.disabled]=\"data?.assessmentcount < 1\"\n          >\n            <div class=\"table-column serial\">\n              <div\n                [id]=\"'sr-no' + i\"\n                class=\"sr-no\"\n                [appTooltip]=\"i + 1\"\n                placement=\"bottom\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"true\"\n              >\n                {{ dataPerPage * (assessmentPayload.page_no - 1) + (i + 1) }}\n              </div>\n            </div>\n            <div class=\"table-column name\">\n              <div class=\"name-inner\">\n                <div\n                  class=\"value\"\n                  [appTooltip]=\"data.category_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ data?.category_name }}\n                </div>\n                <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\n                  <span class=\"within-box\">Within</span>\n                  <span\n                    class=\"value\"\n                    [appTooltip]=\"data.parent_tree\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                    >{{ data?.parent_tree }}</span\n                  >\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column action\">\n              <button\n                [id]=\"'arrow' + i\"\n                class=\"arrow\"\n                [class.disabled]=\"data?.assessmentcount < 1\"\n                [disabled]=\"data?.assessmentcount < 1\"\n              >\n                <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\"\n                  >&#xe970;</i\n                >\n                <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\n              </button>\n            </div>\n          </div>\n\n          <!-- Assessment list start from here -->\n          <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\n            <ng-container *ngIf=\"data.assessmentData?.length > 0\">\n              <div\n                class=\"table-row\"\n                *ngFor=\"let assessment of data.assessmentData; let j = index\"\n                [class.active]=\"\n                  assessment.id === selectedAssessment?.assessment_id &&\n                  data.id === selectedAssessment?.category_id\n                \"\n              >\n                <div class=\"table-column serial\">\n                  <div\n                    [id]=\"'sub-sr-no' + i + j\"\n                    class=\"sr-no\"\n                    appTooltip=\"{{\n                      dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\"\n                    placement=\"bottom\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"true\"\n                  >\n                    {{\n                      dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\n                    <app-cs-radio\n                      name=\"assessment\"\n                      [value]=\"assessment.id\"\n                      [checked]=\"\n                        assessment?.id === selectedAssessment?.assessment_id &&\n                        data?.id === selectedAssessment?.category_id\n                      \"\n                      (checkedEvent)=\"setAssessment(data, assessment)\"\n                    ></app-cs-radio>\n                  </div>\n                </div>\n                <div class=\"table-column sub-name\">\n                  <div\n                    class=\"value\"\n                    [appTooltip]=\"\n                      'Mission and message, communications to external audiences'\n                    \"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ assessment?.assessment_name }}\n                  </div>\n                </div>\n                <div class=\"table-column question\">\n                  <div class=\"buttons\">\n                    <button class=\"action-btn\" (click)=\"preview(assessment)\">\n                      <i class=\"icons\">&#xeae5;</i> Preview\n                    </button>\n                    <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\n                  </div>\n                  <div class=\"label\">\n                    {{ assessment?.questions }}\n                    {{ assessment?.questions > 1 ? \"Questions\" : \"Question\" }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <!-- Loader loading isLoader  -->\n            <app-assessment-list-sub-loader\n              *ngIf=\"!data.assessmentData?.length\"\n            ></app-assessment-list-sub-loader>\n            <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\n          </div>\n        </div>\n      </ng-container>\n      <!-- Loader loading isLoader  -->\n      <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\n    </div>\n    <!-- No data image  -->\n    <app-no-data\n      *ngIf=\"!assessmentCategory.data.length && !isLoader && !searchAssessments\"\n      [noDataImage]=\"ASSETS.search_data\"\n      [noDataText]=\"'No Data to Display'\"\n    ></app-no-data>\n\n    <app-floating-bar\n      [selectedData]=\"[]\"\n      (closeEvent)=\"save()\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\"\n      [selectedData]=\"\n        selectedAssessment?.assessment_id\n          ? [selectedAssessment?.assessmentDetails]\n          : []\n      \"\n      [displayElementKey]=\"'assessment_name'\"\n      [pluralText]=\"'Risk Categories selected'\"\n      (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n    >\n    </app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;inset:0 500px 0 0}::ng-deep .assessment-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 242px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .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 .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;opacity:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:22px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .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}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}::ng-deep .assessment-list-body app-no-data .no-data-wrapper{height:calc(100% - 118px)}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i7.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i9.PreviewComponent, selector: "app-preview", inputs: ["questionData"], outputs: ["previewBack"] }, { kind: "component", type: i10.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: i11.WorkflowPaginationComponent, selector: "app-workflow-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "noFilter", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: i12.AssessmentListLoaderComponent, selector: "app-assessment-list-loader" }, { kind: "component", type: i13.AssessmentListSubLoaderComponent, selector: "app-assessment-list-sub-loader" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssessmentListComponent, decorators: [{
             type: Component,

package/esm2022/lib/sharedComponents/audit-category-list/audit-category-list.component.mjs CHANGED Viewed

@@ -44,7 +44,7 @@ export class AuditCategoryListComponent {
         this.selectedIndex = this.auditCategory.findIndex((category) => category.category_id === this.selectedData.category_id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuditCategoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuditCategoryListComponent, selector: "app-audit-category-list", inputs: { selectedData: "selectedData", selectedIndex: "selectedIndex", auditCategory: "auditCategory" }, outputs: { closeList: "closeList", saveSelectedList: "saveSelectedList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"audit-category-list\" [class.animate]=\"animation\">\n  <div\n    class=\"audit-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Audit Category</div>\n  </div>\n  <div class=\"audit-category-list-body\">\n    <div class=\"search-block vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchInput\"\n        placeholder=\"Search Audit Category\"\n      />\n    </div>\n    <ng-container>\n      <ul\n        *ngIf=\"(auditCategory | search : searchInput)?.length\"\n        class=\"category-list vx-mb-4\"\n      >\n        <li\n          *ngFor=\"\n            let data of auditCategory | search : searchInput;\n            let i = index\n          \"\n        >\n          <app-cs-radio\n            [value]=\"i\"\n            (checkedEvent)=\"onCategorySelection(i)\"\n            [checked]=\"selectedIndex === i\"\n          >\n            <ul class=\"category-name\">\n              <li\n                *ngFor=\"\n                  let parentCategory of data?.parent_category_names.slice()\n                \"\n                [appTooltip]=\"parentCategory\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n              >\n                {{ parentCategory }}<i class=\"icons\">&#xe910;</i>\n              </li>\n              <li\n                [appTooltip]=\"data?.category_name\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n              >\n                {{ data?.category_name }}\n              </li>\n            </ul>\n          </app-cs-radio>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"(auditCategory | search : searchInput)?.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Audit Category Found'\"\n      ></app-no-data>\n    </ng-container>\n\n    <app-floating-bar\n      [selectedData]=\"\n        auditCategory[selectedIndex]?.category_name\n          ? [auditCategory[selectedIndex]]\n          : []\n      \"\n      [displayElementKey]=\"'category_name'\"\n      [singularText]=\"'Audit Category selected'\"\n      (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"auditCategory.length === 0 || !auditCategory[selectedIndex]\"\n    ></app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .audit-category-list{position:fixed;inset:0 500px 0 0}::ng-deep .audit-category-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .audit-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .audit-category-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .audit-category-list-body .search-block{position:relative}::ng-deep .audit-category-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .audit-category-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .audit-category-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .audit-category-list-body ul{padding:0;margin:0}::ng-deep .audit-category-list-body ul.category-list{height:calc(100vh - 224px);overflow:auto;scrollbar-width:thin}::ng-deep .audit-category-list-body ul.category-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .audit-category-list-body ul.category-list li{padding:0 20px 12px 0;list-style:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio{display:flex}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label{width:100%}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value{width:100%;justify-content:flex-start;flex-wrap:wrap}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul{display:flex!important;align-items:center}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul.category-name,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul.category-name{color:#747576;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li{padding:0;max-width:100%}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li:first-child,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li:first-child{color:#1e5dd3}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li:last-child,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li:last-child{color:#34aa44}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li i,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li i{font-size:8px;color:#747576;margin:0 8px}::ng-deep .audit-category-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .audit-category-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}::-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}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i6.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: i7.SearchPipe, name: "search" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuditCategoryListComponent, selector: "app-audit-category-list", inputs: { selectedData: "selectedData", selectedIndex: "selectedIndex", auditCategory: "auditCategory" }, outputs: { closeList: "closeList", saveSelectedList: "saveSelectedList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"audit-category-list\" [class.animate]=\"animation\">\n  <div\n    class=\"audit-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Audit Category</div>\n  </div>\n  <div class=\"audit-category-list-body\">\n    <div class=\"search-block vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchInput\"\n        placeholder=\"Search Audit Category\"\n      />\n    </div>\n    <ng-container>\n      <ul\n        *ngIf=\"(auditCategory | search : searchInput)?.length\"\n        class=\"category-list vx-mb-4\"\n      >\n        <li\n          *ngFor=\"\n            let data of auditCategory | search : searchInput;\n            let i = index\n          \"\n        >\n          <app-cs-radio\n            [value]=\"i\"\n            (checkedEvent)=\"onCategorySelection(i)\"\n            [checked]=\"selectedIndex === i\"\n          >\n            <ul class=\"category-name\">\n              <li\n                *ngFor=\"\n                  let parentCategory of data?.parent_category_names.slice()\n                \"\n                [appTooltip]=\"parentCategory\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n              >\n                {{ parentCategory }}<i class=\"icons\">&#xe910;</i>\n              </li>\n              <li\n                [appTooltip]=\"data?.category_name\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n              >\n                {{ data?.category_name }}\n              </li>\n            </ul>\n          </app-cs-radio>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"(auditCategory | search : searchInput)?.length == 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Audit Category Found'\"\n      ></app-no-data>\n    </ng-container>\n\n    <app-floating-bar\n      [selectedData]=\"\n        auditCategory[selectedIndex]?.category_name\n          ? [auditCategory[selectedIndex]]\n          : []\n      \"\n      [displayElementKey]=\"'category_name'\"\n      [singularText]=\"'Audit Category selected'\"\n      (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"auditCategory.length === 0 || !auditCategory[selectedIndex]\"\n    ></app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .audit-category-list{position:fixed;inset:0 500px 0 0}::ng-deep .audit-category-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .audit-category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .audit-category-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .audit-category-list-body .search-block{position:relative}::ng-deep .audit-category-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .audit-category-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .audit-category-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .audit-category-list-body ul{padding:0;margin:0}::ng-deep .audit-category-list-body ul.category-list{height:calc(100vh - 224px);overflow:auto;scrollbar-width:thin}::ng-deep .audit-category-list-body ul.category-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .audit-category-list-body ul.category-list li{padding:0 20px 12px 0;list-style:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio{display:flex}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label{width:100%}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value{width:100%;justify-content:flex-start;flex-wrap:wrap}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul{display:flex!important;align-items:center}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul.category-name,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul.category-name{color:#747576;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li{padding:0;max-width:100%}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li:first-child,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li:first-child{color:#1e5dd3}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li:last-child,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li:last-child{color:#34aa44}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li i,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li i{font-size:8px;color:#747576;margin:0 8px}::ng-deep .audit-category-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .audit-category-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}::-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}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i6.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "pipe", type: i7.SearchPipe, name: "search" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuditCategoryListComponent, decorators: [{
             type: Component,

package/esm2022/lib/sharedComponents/category-list/category-list.component.mjs CHANGED Viewed

@@ -69,7 +69,7 @@ export class CategoryListComponent {
         this.closeCategoriesList.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryListComponent, selector: "app-category-list", inputs: { categoryList: "categoryList", selectedCategory: "selectedCategory", loaded: "loaded" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"category-list\" [class.animate]=\"animation\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Risk Category</div>\n  </div>\n  <div class=\"category-list-body\">\n    <div\n      class=\"filter-card-row vx-d-flex vx-align-center vx-justify-between vx-pb-2\"\n    >\n      <div\n        class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n      >\n        <div class=\"left\">\n          <label\n            class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n            >{{ categoryList?.strategic?.name }}</label\n          >\n          <p\n            *ngIf=\"\n              selectedCategory.type == 'strategic' &&\n              selectedCategory.selectedCategory.length != 0\n            \"\n          >\n            1 Category selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.data?.length }}</span>\n      </div>\n      <div\n        class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n      >\n        <div class=\"left\">\n          <label\n            class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n            >{{ categoryList?.operational?.name }}</label\n          >\n          <p\n            *ngIf=\"\n              selectedCategory.type == 'operational' &&\n              selectedCategory.selectedCategory.length != 0\n            \"\n          >\n            1 Category selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.data?.length\n        }}</span>\n      </div>\n      <div\n        class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n      >\n        <div class=\"left\">\n          <label\n            class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n            >{{ categoryList?.compliance?.name }}</label\n          >\n          <p\n            *ngIf=\"\n              selectedCategory.type == 'compliance' &&\n              selectedCategory.selectedCategory.length != 0\n            \"\n          >\n            1 Category selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.data?.length\n        }}</span>\n      </div>\n      <div\n        class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label\n            class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n            >{{ categoryList?.others?.name }}</label\n          >\n          <p\n            *ngIf=\"\n              selectedCategory.type == 'others' &&\n              selectedCategory.selectedCategory.length != 0\n            \"\n          >\n            1 Category selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.data?.length }}</span>\n      </div>\n    </div>\n    <div class=\"search-block vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"!loaded\"></app-loader-inline>\n    <ng-container\n      *ngIf=\"categoryList[activeTab]?.data | filter : search as searchList\"\n    >\n      <ul class=\"categories vx-mb-4\" *ngIf=\"searchList.length > 0\">\n        <li *ngFor=\"let category of searchList\">\n          <app-cs-radio\n            (checkedEvent)=\"selectCategory(activeTab, category)\"\n            [name]=\"'category'\"\n            [checked]=\"\n              selectedCategory?.selectedCategory?.category_id ===\n              category?.category_id\n            \"\n          >\n            <span\n              class=\"name\"\n              [appTooltip]=\"category.category_name\"\n              placement=\"bottom-left\"\n              type=\"black\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n            >\n              {{ category?.category_name }}</span\n            >\n          </app-cs-radio>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length === 0 && loaded\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Categories Found'\"\n      ></app-no-data>\n    </ng-container>\n\n    <app-floating-bar\n      *ngIf=\"loaded\"\n      [selectedData]=\"\n        selectedCategory?.selectedCategory?.category_name\n          ? [selectedCategory.selectedCategory]\n          : []\n      \"\n      [displayElementKey]=\"'category_name'\"\n      [singularText]=\"'Risk Category selected'\"\n      [pluralText]=\"'Risk Categories selected'\"\n      (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"\n        categoryList.length === 0 || !selectedCategory?.selectedCategory\n      \"\n    >\n    </app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{position:fixed;inset:0 500px 0 0}::ng-deep .category-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .category-list-body .filter-card{box-shadow:0 0 3px #1e5dd345;border-radius:.25rem;height:55px;cursor:pointer}::ng-deep .category-list-body .filter-card.active{pointer-events:none;box-shadow:0 3px 12px #1e5dd350;z-index:1}::ng-deep .category-list-body .filter-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-body .filter-card span.counter{display:flex;height:28px;min-width:28px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;justify-content:center;align-items:center;padding:0 4px}::ng-deep .category-list-body .filter-card+.filter-card{margin-left:4px}::ng-deep .category-list-body .search-block{position:relative}::ng-deep .category-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .category-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-body ul{padding:0;margin:0}::ng-deep .category-list-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-body ul.categories li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .category-list-body ul.categories li app-cs-radio{display:flex}::ng-deep .category-list-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .category-list-body ul.categories li app-cs-radio label.radio-item span.value{width:auto;color:#161b2f;font-size:12px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .category-list-body app-no-data .no-data-wrapper{height:calc(100% - 164px)!important}::ng-deep .category-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i6.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: i7.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: i8.FilterPipe, name: "filter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryListComponent, selector: "app-category-list", inputs: { categoryList: "categoryList", selectedCategory: "selectedCategory", loaded: "loaded" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"category-list\" [class.animate]=\"animation\">\n  <div\n    class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Risk Category</div>\n  </div>\n  <div class=\"category-list-body\">\n    <div\n      class=\"filter-card-row vx-d-flex vx-align-center vx-justify-between vx-pb-2\"\n    >\n      <div\n        class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n        [class.active]=\"activeTab == 'strategic'\"\n        (click)=\"activeTab = 'strategic'\"\n      >\n        <div class=\"left\">\n          <label\n            class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n            >{{ categoryList?.strategic?.name }}</label\n          >\n          <p\n            *ngIf=\"\n              selectedCategory.type == 'strategic' &&\n              selectedCategory.selectedCategory.length != 0\n            \"\n          >\n            1 Category selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.strategic?.data?.length }}</span>\n      </div>\n      <div\n        class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n        [class.active]=\"activeTab == 'operational'\"\n        (click)=\"activeTab = 'operational'\"\n      >\n        <div class=\"left\">\n          <label\n            class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n            >{{ categoryList?.operational?.name }}</label\n          >\n          <p\n            *ngIf=\"\n              selectedCategory.type == 'operational' &&\n              selectedCategory.selectedCategory.length != 0\n            \"\n          >\n            1 Category selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.operational?.data?.length\n        }}</span>\n      </div>\n      <div\n        class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n        [class.active]=\"activeTab == 'compliance'\"\n        (click)=\"activeTab = 'compliance'\"\n      >\n        <div class=\"left\">\n          <label\n            class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n            >{{ categoryList?.compliance?.name }}</label\n          >\n          <p\n            *ngIf=\"\n              selectedCategory.type == 'compliance' &&\n              selectedCategory.selectedCategory.length != 0\n            \"\n          >\n            1 Category selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.compliance?.data?.length\n        }}</span>\n      </div>\n      <div\n        class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label\n            class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n            >{{ categoryList?.others?.name }}</label\n          >\n          <p\n            *ngIf=\"\n              selectedCategory.type == 'others' &&\n              selectedCategory.selectedCategory.length != 0\n            \"\n          >\n            1 Category selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.data?.length }}</span>\n      </div>\n    </div>\n    <div class=\"search-block vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Risk Category\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"!loaded\"></app-loader-inline>\n    <ng-container\n      *ngIf=\"categoryList[activeTab]?.data | filter : search as searchList\"\n    >\n      <ul class=\"categories vx-mb-4\" *ngIf=\"searchList.length > 0\">\n        <li *ngFor=\"let category of searchList\">\n          <app-cs-radio\n            (checkedEvent)=\"selectCategory(activeTab, category)\"\n            [name]=\"'category'\"\n            [checked]=\"\n              selectedCategory?.selectedCategory?.category_id ===\n              category?.category_id\n            \"\n          >\n            <span\n              class=\"name\"\n              [appTooltip]=\"category.category_name\"\n              placement=\"bottom-left\"\n              type=\"black\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n            >\n              {{ category?.category_name }}</span\n            >\n          </app-cs-radio>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length === 0 && loaded\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Categories Found'\"\n      ></app-no-data>\n    </ng-container>\n\n    <app-floating-bar\n      *ngIf=\"loaded\"\n      [selectedData]=\"\n        selectedCategory?.selectedCategory?.category_name\n          ? [selectedCategory.selectedCategory]\n          : []\n      \"\n      [displayElementKey]=\"'category_name'\"\n      [singularText]=\"'Risk Category selected'\"\n      [pluralText]=\"'Risk Categories selected'\"\n      (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"\n        categoryList.length === 0 || !selectedCategory?.selectedCategory\n      \"\n    >\n    </app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .category-list{position:fixed;inset:0 500px 0 0}::ng-deep .category-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .category-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .category-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .category-list-body .filter-card{box-shadow:0 0 3px #1e5dd345;border-radius:.25rem;height:55px;cursor:pointer}::ng-deep .category-list-body .filter-card.active{pointer-events:none;box-shadow:0 3px 12px #1e5dd350;z-index:1}::ng-deep .category-list-body .filter-card.active span.counter{background:#f1f1f1;color:#042e7d}::ng-deep .category-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-body .filter-card span.counter{display:flex;height:28px;min-width:28px;border-radius:2px;background:#042e7d;color:#fff;font-size:11px;font-weight:500;justify-content:center;align-items:center;padding:0 4px}::ng-deep .category-list-body .filter-card+.filter-card{margin-left:4px}::ng-deep .category-list-body .search-block{position:relative}::ng-deep .category-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .category-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .category-list-body ul{padding:0;margin:0}::ng-deep .category-list-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 288px);overflow:hidden;overflow-y:auto}::ng-deep .category-list-body ul.categories li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .category-list-body ul.categories li app-cs-radio{display:flex}::ng-deep .category-list-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .category-list-body ul.categories li app-cs-radio label.radio-item span.value{width:auto;color:#161b2f;font-size:12px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .category-list-body app-no-data .no-data-wrapper{height:calc(100% - 164px)!important}::ng-deep .category-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i6.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: i7.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "pipe", type: i8.FilterPipe, name: "filter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryListComponent, decorators: [{
             type: Component,

package/esm2022/lib/sharedComponents/category-list-selection/category-list-selection/category-list-selection.component.mjs CHANGED Viewed

@@ -103,7 +103,7 @@ export class CategoryListSelectionComponent {
         return data;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryListSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryListSelectionComponent, selector: "app-category-list-selection", inputs: { setList: ["categoryList", "setList"], config: "config", currentPage: "currentPage", recordStart: "recordStart", recordEnd: "recordEnd", totalRecords: "totalRecords", totalPages: "totalPages", loading: "loading", selectionMode: "selectionMode", setSelected: ["selectedList", "setSelected"] }, outputs: { fetchData: "fetchData", back: "back", next: "next", cancel: "cancel" }, ngImport: i0, template: "<div class=\"radio-list\" [class.animate]=\"animation\">\n  <div\n    class=\"radio-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">{{ config?.panelTitle }}</div>\n  </div>\n\n  <div class=\"radio-list-body\">\n    <div class=\"search-block vx-mb-2\" *ngIf=\"true\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        (keydown.enter)=\"search()\"\n        type=\"text\"\n        [placeholder]=\"config?.searchPlaceholder\"\n        [(ngModel)]=\"searchKey\"\n      />\n    </div>\n\n    <app-pagination\n      *ngIf=\"totalPages > 1\"\n      [start]=\"recordStart\"\n      [end]=\"recordEnd\"\n      [total]=\"totalRecords\"\n      [pageCount]=\"totalPages\"\n      [currentPage]=\"currentPage\"\n      (selectedPage)=\"pageChanged($event)\"\n    ></app-pagination>\n\n    <!-- it is visible when list data is available -->\n    <ng-container\n      *ngIf=\"!loading && (list | search: searchKey) as filteredList\"\n    >\n      <div *ngIf=\"filteredList.length > 0\">\n        <div\n          class=\"categories vx-mb-4\"\n          [class.mt-2]=\"totalPages === 0\"\n          *ngIf=\"selectionMode === 'multiple'\"\n        >\n          <app-cs-checkbox\n            [ngValue]=\"checkSelectAll()\"\n            (ngValueChange)=\"selectAll($event)\"\n          >\n            <span class=\"vx-fw-600 vx-label-txt\">{{\n              checkSelectAll() ? \"Deselect All\" : \"Select All\"\n            }}</span>\n          </app-cs-checkbox>\n        </div>\n        <ul\n          class=\"categories-list vx-mb-4\"\n          [class.with-selectAll]=\"selectionMode === 'multiple'\"\n          [class.with-pagination]=\"totalPages > 1\"\n        >\n          <li *ngFor=\"let item of filteredList; let i = index\">\n            <app-cs-radio\n              *ngIf=\"selectionMode === 'single'\"\n              [checked]=\"selectedIds?.includes(item[config?.identifierKey])\"\n              (checkedEvent)=\"itemSelected($event, item)\"\n              [appTooltip]=\"item[config.displayKey]\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n            >\n              <div class=\"name\">{{ item[config.displayKey] }}</div>\n              <div\n                class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n              >\n                <div\n                  class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n                  *ngIf=\"item[config?.parentKey] != ''\"\n                >\n                  WITHIN\n                </div>\n                <div\n                  class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n                  [appTooltip]=\"item[config?.parentKey] | within: list\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ item[config?.parentKey] | within: list }}\n                </div>\n              </div>\n            </app-cs-radio>\n            <app-cs-checkbox\n              *ngIf=\"selectionMode === 'multiple'\"\n              [ngValue]=\"selectedIds?.includes(item[config?.identifierKey])\"\n              (ngValueChange)=\"itemSelected($event, item)\"\n              [appTooltip]=\"item[config.displayKey]\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n            >\n              <div class=\"name\">{{ item[config.displayKey] }}</div>\n              <div\n                class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n              >\n                <div\n                  class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n                  *ngIf=\"item[config?.parentKey] != ''\"\n                >\n                  WITHIN\n                </div>\n                <div\n                  class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n                  [appTooltip]=\"item[config?.parentKey] | within: list\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ item[config?.parentKey] | within: list }}\n                </div>\n              </div>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"filteredList.length === 0 && searchKey?.trim()?.length > 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"\n          config?.noDataText?.length > 0\n            ? config?.noDataText\n            : 'No data to display'\n        \"\n      ></app-no-data>\n    </ng-container>\n    <!-- It is visible when the list items are getting loaded -->\n    <app-listline-loader *ngIf=\"loading\"></app-listline-loader>\n\n    <app-floating-bar\n      [selectedData]=\"selectedList\"\n      [displayElementKey]=\"config?.displayKey\"\n      [singularText]=\"config?.entitySingular\"\n      [pluralText]=\"\n        config?.entityPlural ? config?.entityPlural : 'Users selected'\n      \"\n      (closeEvent)=\"save()\"\n      (closeList)=\"close()\"\n      (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"selectedList.length === 0 || list?.length === 0\"\n    >\n    </app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .radio-list{position:fixed;inset:0 500px 0 0}::ng-deep .radio-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .radio-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .radio-list-body app-pagination .wk-pagination-sec-ds{padding:0!important}::ng-deep .radio-list-body .categories{height:1rem}::ng-deep .radio-list-body .categories app-cs-radio .radio-item,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value{margin:0!important}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value span{color:#161b2f;font-weight:600;font-size:12px}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 232px);overflow:auto;margin:16px 0 0}::ng-deep .radio-list-body ul.categories-list.with-pagination{height:calc(100vh - 260px)}::ng-deep .radio-list-body ul.categories-list.with-selectAll{height:calc(100vh - 256px)}::ng-deep .radio-list-body ul.categories-list.with-selectAll.with-pagination{height:calc(100vh - 284px)}::ng-deep .radio-list-body ul.categories-list li{padding:0 0 .5rem;list-style:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin:0!important}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#161b2f}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within{display:flex;align-items:center;justify-content:flex-start;margin-top:4px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .block{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;margin-right:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#747576;line-height:16px;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 100px)!important}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .radio-list-footer{background:#fff}::ng-deep .radio-list-footer app-floating-bar .floating-bar{padding:0 16px 16px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.mt-2{margin-top:10px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: i3.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: i4.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i7.PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: i8.LinkTreatmentLoaderComponent, selector: "app-listline-loader" }, { kind: "pipe", type: i9.SearchPipe, name: "search" }, { kind: "pipe", type: i10.WithinStructurePipe, name: "within" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryListSelectionComponent, selector: "app-category-list-selection", inputs: { setList: ["categoryList", "setList"], config: "config", currentPage: "currentPage", recordStart: "recordStart", recordEnd: "recordEnd", totalRecords: "totalRecords", totalPages: "totalPages", loading: "loading", selectionMode: "selectionMode", setSelected: ["selectedList", "setSelected"] }, outputs: { fetchData: "fetchData", back: "back", next: "next", cancel: "cancel" }, ngImport: i0, template: "<div class=\"radio-list\" [class.animate]=\"animation\">\n  <div\n    class=\"radio-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">{{ config?.panelTitle }}</div>\n  </div>\n\n  <div class=\"radio-list-body\">\n    <div class=\"search-block vx-mb-2\" *ngIf=\"true\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        (keydown.enter)=\"search()\"\n        type=\"text\"\n        [placeholder]=\"config?.searchPlaceholder\"\n        [(ngModel)]=\"searchKey\"\n      />\n    </div>\n\n    <app-pagination\n      *ngIf=\"totalPages > 1\"\n      [start]=\"recordStart\"\n      [end]=\"recordEnd\"\n      [total]=\"totalRecords\"\n      [pageCount]=\"totalPages\"\n      [currentPage]=\"currentPage\"\n      (selectedPage)=\"pageChanged($event)\"\n    ></app-pagination>\n\n    <!-- it is visible when list data is available -->\n    <ng-container\n      *ngIf=\"!loading && (list | search: searchKey) as filteredList\"\n    >\n      <div *ngIf=\"filteredList.length > 0\">\n        <div\n          class=\"categories vx-mb-4\"\n          [class.mt-2]=\"totalPages === 0\"\n          *ngIf=\"selectionMode === 'multiple'\"\n        >\n          <app-cs-checkbox\n            [ngValue]=\"checkSelectAll()\"\n            (ngValueChange)=\"selectAll($event)\"\n          >\n            <span class=\"vx-fw-600 vx-label-txt\">{{\n              checkSelectAll() ? \"Deselect All\" : \"Select All\"\n            }}</span>\n          </app-cs-checkbox>\n        </div>\n        <ul\n          class=\"categories-list vx-mb-4\"\n          [class.with-selectAll]=\"selectionMode === 'multiple'\"\n          [class.with-pagination]=\"totalPages > 1\"\n        >\n          <li *ngFor=\"let item of filteredList; let i = index\">\n            <app-cs-radio\n              *ngIf=\"selectionMode === 'single'\"\n              [checked]=\"selectedIds?.includes(item[config?.identifierKey])\"\n              (checkedEvent)=\"itemSelected($event, item)\"\n              [appTooltip]=\"item[config.displayKey]\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n            >\n              <div class=\"name\">{{ item[config.displayKey] }}</div>\n              <div\n                class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n              >\n                <div\n                  class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n                  *ngIf=\"item[config?.parentKey] != ''\"\n                >\n                  WITHIN\n                </div>\n                <div\n                  class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n                  [appTooltip]=\"item[config?.parentKey] | within: list\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ item[config?.parentKey] | within: list }}\n                </div>\n              </div>\n            </app-cs-radio>\n            <app-cs-checkbox\n              *ngIf=\"selectionMode === 'multiple'\"\n              [ngValue]=\"selectedIds?.includes(item[config?.identifierKey])\"\n              (ngValueChange)=\"itemSelected($event, item)\"\n              [appTooltip]=\"item[config.displayKey]\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n            >\n              <div class=\"name\">{{ item[config.displayKey] }}</div>\n              <div\n                class=\"within vx-d-flex vx-align-center vx-justify-start vx-mt-1\"\n              >\n                <div\n                  class=\"block vx-fs-9 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2\"\n                  *ngIf=\"item[config?.parentKey] != ''\"\n                >\n                  WITHIN\n                </div>\n                <div\n                  class=\"data vx-fs-11 vx-paragraph-txt vx-lh-4 vx-pr-5\"\n                  [appTooltip]=\"item[config?.parentKey] | within: list\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ item[config?.parentKey] | within: list }}\n                </div>\n              </div>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"filteredList.length === 0 && searchKey?.trim()?.length > 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"\n          config?.noDataText?.length > 0\n            ? config?.noDataText\n            : 'No data to display'\n        \"\n      ></app-no-data>\n    </ng-container>\n    <!-- It is visible when the list items are getting loaded -->\n    <app-listline-loader *ngIf=\"loading\"></app-listline-loader>\n\n    <app-floating-bar\n      [selectedData]=\"selectedList\"\n      [displayElementKey]=\"config?.displayKey\"\n      [singularText]=\"config?.entitySingular\"\n      [pluralText]=\"\n        config?.entityPlural ? config?.entityPlural : 'Users selected'\n      \"\n      (closeEvent)=\"save()\"\n      (closeList)=\"close()\"\n      (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"selectedList.length === 0 || list?.length === 0\"\n    >\n    </app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .radio-list{position:fixed;inset:0 500px 0 0}::ng-deep .radio-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .radio-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .radio-list-body app-pagination .wk-pagination-sec-ds{padding:0!important}::ng-deep .radio-list-body .categories{height:1rem}::ng-deep .radio-list-body .categories app-cs-radio .radio-item,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body .categories app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value{margin:0!important}::ng-deep .radio-list-body .categories app-cs-radio .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .radio-item .value span,::ng-deep .radio-list-body .categories app-cs-radio .checkbox-item .value span,::ng-deep .radio-list-body .categories app-cs-checkbox .checkbox-item .value span{color:#161b2f;font-weight:600;font-size:12px}::ng-deep .radio-list-body ul{padding:0;margin:0}::ng-deep .radio-list-body ul.categories-list{display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 232px);overflow:auto;margin:16px 0 0}::ng-deep .radio-list-body ul.categories-list.with-pagination{height:calc(100vh - 260px)}::ng-deep .radio-list-body ul.categories-list.with-selectAll{height:calc(100vh - 256px)}::ng-deep .radio-list-body ul.categories-list.with-selectAll.with-pagination{height:calc(100vh - 284px)}::ng-deep .radio-list-body ul.categories-list li{padding:0 0 .5rem;list-style:none}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item{position:relative;padding-left:24px;width:100%}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radio,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .radiomark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkbox,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .checkmark,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin:0!important}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .name,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#161b2f}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within{display:flex;align-items:center;justify-content:flex-start;margin-top:4px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .block,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .block{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;margin-right:8px}::ng-deep .radio-list-body ul.categories-list li app-cs-radio .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .radio-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-radio .checkbox-item .value .within .data,::ng-deep .radio-list-body ul.categories-list li app-cs-checkbox .checkbox-item .value .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#747576;line-height:16px;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 100px)!important}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .radio-list-footer{background:#fff}::ng-deep .radio-list-footer app-floating-bar .floating-bar{padding:0 16px 16px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.mt-2{margin-top:10px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: i3.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: i4.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i7.PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: i8.LinkTreatmentLoaderComponent, selector: "app-listline-loader" }, { kind: "pipe", type: i9.SearchPipe, name: "search" }, { kind: "pipe", type: i10.WithinStructurePipe, name: "within" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryListSelectionComponent, decorators: [{
             type: Component,

package/esm2022/lib/sharedComponents/category-multiselect/category-multi-select.component.mjs CHANGED Viewed

@@ -142,7 +142,7 @@ export class CategoryMultiSelectComponent {
         this.closeCategoriesList.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryMultiSelectComponent, selector: "app-category-multi-select", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, viewQueries: [{ propertyName: "listBlock", first: true, predicate: ["listBlock"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"category-multi-select\" [class.animate]=\"animation\">\n  <div class=\"category-multi-select-head\">\n    <h3 class=\"category-multi-select-title\">Select Programs</h3>\n  </div>\n  <div class=\"category-multi-select-body\">\n    <div class=\"filter-card-row\">\n      <div\n        class=\"filter-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n      >\n        <div class=\"left\">\n          <label>REGULATIONS</label>\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\n            {{ categoryList?.regulations?.selectedList?.length }}\n            {{\n              categoryList?.regulations?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"filter-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n      >\n        <div class=\"left\">\n          <label>STANDARDS</label>\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\n            {{ categoryList?.standards?.selectedList?.length }}\n            {{\n              categoryList?.standards?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"filter-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n      >\n        <div class=\"left\">\n          <label>INTERNAL CONTROLS</label>\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\n            {{ categoryList?.internalControls?.selectedList?.length }}\n            {{\n              categoryList?.internalControls?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"filter-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Category\"\n      />\n    </div>\n    <!-- <div class=\"body-top\">\n      <div class=\"pagination\"></div>\n    </div> -->\n    <ng-container\n      *ngIf=\"categoryList[activeTab].list | filter : search as searchList\"\n    >\n      <div\n        class=\"body-top\"\n        *ngIf=\"searchList?.length > 0 && search.trim()?.length === 0\"\n      >\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <ul class=\"categories\" *ngIf=\"searchList?.length > 0\">\n        <li *ngFor=\"let category of searchList\">\n          <app-cs-checkbox\n            [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n            (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n          >\n            <ul class=\"category-name\" #listBlock>\n              <li\n                *ngFor=\"let entity of category.category_name; let j = index\"\n                [appTooltip]=\"entity\"\n                placement=\"bottom\"\n                type=\"black\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                [style.max-width.px]=\"\n                  blockWidth / category.category_name.length\n                \"\n              >\n                <span>\n                  <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\n                </span>\n              </li>\n            </ul>\n          </app-cs-checkbox>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length === 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Categories Found'\"\n      ></app-no-data>\n    </ng-container>\n  </div>\n  <div class=\"category-multi-select-footer\">\n    <app-floating-bar\n      [selectedData]=\"selectedCategories\"\n      [displayElementKey]=\"'item_name'\"\n      [singularText]=\"'Program selected'\"\n      [pluralText]=\"'Programs selected'\"\n      (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"\n        selectedCategories?.length === 0 ||\n        categoryList[activeTab]?.list?.length === 0\n      \"\n    >\n    </app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .category-multi-select{position:fixed;inset:0 500px 0 0;border-top:3px solid #1E5DD3;z-index:-1}::ng-deep .category-multi-select-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .category-multi-select-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .category-multi-select-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .category-multi-select-body{padding:24px 40px 24px 36px;background:#fff;height:calc(100vh - 124px)}::ng-deep .category-multi-select-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-multi-select-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .category-multi-select-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .category-multi-select-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-multi-select-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .category-multi-select-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .category-multi-select-body .filter-card+.filter-card{margin-left:10px}::ng-deep .category-multi-select-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .category-multi-select-body .search-block{position:relative}::ng-deep .category-multi-select-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .category-multi-select-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .category-multi-select-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .category-multi-select-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .category-multi-select-body .body-top app-cs-checkbox,::ng-deep .category-multi-select-body .body-top app-cs-radio{display:flex}::ng-deep .category-multi-select-body .body-top app-cs-checkbox label span.value strong,::ng-deep .category-multi-select-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .category-multi-select-body ul{padding:0;margin:0}::ng-deep .category-multi-select-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 300px);min-height:calc(100vh - 300px);overflow:auto;padding:16px 0 0}::ng-deep .category-multi-select-body ul.categories li{width:100%;padding:0 0 16px;list-style:none}::ng-deep .category-multi-select-body ul.categories li app-cs-radio,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox{display:flex}::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.radio-item,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.radio-item,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.checkbox-item,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.radio-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.radio-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.checkbox-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.checkbox-item span.value{color:#161b2f;font-size:13px;font-weight:400;width:100%}::ng-deep .category-multi-select-body ul.categories li ul.category-name{display:flex;justify-content:flex-start;width:100%}::ng-deep .category-multi-select-body ul.categories li ul.category-name li{list-style:none;color:#747576;width:auto;padding:0 8px 0 0;max-width:40%;display:inline-flex}::ng-deep .category-multi-select-body ul.categories li ul.category-name li span{font-size:14px;font-weight:400;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}::ng-deep .category-multi-select-body ul.categories li ul.category-name li i{font-size:8px;padding-left:0;padding-right:4px}::ng-deep .category-multi-select-body ul.categories li ul.category-name li:first-child span{color:#4681ef}::ng-deep .category-multi-select-body ul.categories li ul.category-name li:last-of-type span{color:#66bf72}::ng-deep .category-multi-select-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .category-multi-select-body.no-footer{height:calc(100vh - 42px)}::ng-deep .category-multi-select-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .category-multi-select-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px #1e5dd345;min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .category-multi-select-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .category-multi-select-body .card-row .card-block.active{box-shadow:0 0 10px #1e5dd2e6;z-index:1}::ng-deep .category-multi-select-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .category-multi-select-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .category-multi-select.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i6.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: i7.FilterPipe, name: "filter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryMultiSelectComponent, selector: "app-category-multi-select", inputs: { categoryList: "categoryList", allCategories: "allCategories", categoryIdKey: "categoryIdKey", selectedCategories: "selectedCategories" }, outputs: { saveSelectedCategory: "saveSelectedCategory", closeList: "closeList", closeCategoriesList: "closeCategoriesList" }, viewQueries: [{ propertyName: "listBlock", first: true, predicate: ["listBlock"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"category-multi-select\" [class.animate]=\"animation\">\n  <div class=\"category-multi-select-head\">\n    <h3 class=\"category-multi-select-title\">Select Programs</h3>\n  </div>\n  <div class=\"category-multi-select-body\">\n    <div class=\"filter-card-row\">\n      <div\n        class=\"filter-card\"\n        [class.active]=\"activeTab == 'regulations'\"\n        (click)=\"activeTab = 'regulations'\"\n      >\n        <div class=\"left\">\n          <label>REGULATIONS</label>\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\n            {{ categoryList?.regulations?.selectedList?.length }}\n            {{\n              categoryList?.regulations?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.regulations?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"filter-card\"\n        [class.active]=\"activeTab == 'standards'\"\n        (click)=\"activeTab = 'standards'\"\n      >\n        <div class=\"left\">\n          <label>STANDARDS</label>\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\n            {{ categoryList?.standards?.selectedList?.length }}\n            {{\n              categoryList?.standards?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.standards?.list?.length }}</span>\n      </div>\n      <div\n        class=\"filter-card\"\n        [class.active]=\"activeTab == 'internalControls'\"\n        (click)=\"activeTab = 'internalControls'\"\n      >\n        <div class=\"left\">\n          <label>INTERNAL CONTROLS</label>\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\n            {{ categoryList?.internalControls?.selectedList?.length }}\n            {{\n              categoryList?.internalControls?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{\n          categoryList?.internalControls?.list?.length\n        }}</span>\n      </div>\n      <div\n        class=\"filter-card\"\n        [class.active]=\"activeTab == 'others'\"\n        (click)=\"activeTab = 'others'\"\n      >\n        <div class=\"left\">\n          <label>OTHERS</label>\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\n            {{ categoryList?.others?.selectedList?.length }}\n            {{\n              categoryList?.others?.selectedList?.length == 1\n                ? \"Category\"\n                : \"Categories\"\n            }}\n            selected\n          </p>\n        </div>\n        <span class=\"counter\">{{ categoryList?.others?.list?.length }}</span>\n      </div>\n    </div>\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"search\"\n        placeholder=\"Search Responsibility Category\"\n      />\n    </div>\n    <!-- <div class=\"body-top\">\n      <div class=\"pagination\"></div>\n    </div> -->\n    <ng-container\n      *ngIf=\"categoryList[activeTab].list | filter : search as searchList\"\n    >\n      <div\n        class=\"body-top\"\n        *ngIf=\"searchList?.length > 0 && search.trim()?.length === 0\"\n      >\n        <app-cs-checkbox\n          [ngValue]=\"checkSelectAll(activeTab)\"\n          (ngValueChange)=\"selectAll($event, activeTab)\"\n        >\n          <strong>{{\n            checkSelectAll(activeTab) ? \"Deselect All\" : \"Select All\"\n          }}</strong>\n        </app-cs-checkbox>\n      </div>\n      <ul class=\"categories\" *ngIf=\"searchList?.length > 0\">\n        <li *ngFor=\"let category of searchList\">\n          <app-cs-checkbox\n            [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\n            (ngValueChange)=\"selectCategory($event, activeTab, category)\"\n          >\n            <ul class=\"category-name\" #listBlock>\n              <li\n                *ngFor=\"let entity of category.category_name; let j = index\"\n                [appTooltip]=\"entity\"\n                placement=\"bottom\"\n                type=\"black\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                [style.max-width.px]=\"\n                  blockWidth / category.category_name.length\n                \"\n              >\n                <span>\n                  <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\n                </span>\n              </li>\n            </ul>\n          </app-cs-checkbox>\n        </li>\n      </ul>\n      <app-no-data\n        *ngIf=\"searchList.length === 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Categories Found'\"\n      ></app-no-data>\n    </ng-container>\n  </div>\n  <div class=\"category-multi-select-footer\">\n    <app-floating-bar\n      [selectedData]=\"selectedCategories\"\n      [displayElementKey]=\"'item_name'\"\n      [singularText]=\"'Program selected'\"\n      [pluralText]=\"'Programs selected'\"\n      (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"\n        selectedCategories?.length === 0 ||\n        categoryList[activeTab]?.list?.length === 0\n      \"\n    >\n    </app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .category-multi-select{position:fixed;inset:0 500px 0 0;border-top:3px solid #1E5DD3;z-index:-1}::ng-deep .category-multi-select-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .category-multi-select-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .category-multi-select-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .category-multi-select-body{padding:24px 40px 24px 36px;background:#fff;height:calc(100vh - 124px)}::ng-deep .category-multi-select-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-multi-select-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .category-multi-select-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .category-multi-select-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-multi-select-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .category-multi-select-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .category-multi-select-body .filter-card+.filter-card{margin-left:10px}::ng-deep .category-multi-select-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .category-multi-select-body .search-block{position:relative}::ng-deep .category-multi-select-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .category-multi-select-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .category-multi-select-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .category-multi-select-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .category-multi-select-body .body-top app-cs-checkbox,::ng-deep .category-multi-select-body .body-top app-cs-radio{display:flex}::ng-deep .category-multi-select-body .body-top app-cs-checkbox label span.value strong,::ng-deep .category-multi-select-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .category-multi-select-body ul{padding:0;margin:0}::ng-deep .category-multi-select-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 300px);min-height:calc(100vh - 300px);overflow:auto;padding:16px 0 0}::ng-deep .category-multi-select-body ul.categories li{width:100%;padding:0 0 16px;list-style:none}::ng-deep .category-multi-select-body ul.categories li app-cs-radio,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox{display:flex}::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.radio-item,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.radio-item,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.checkbox-item,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.radio-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.radio-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.checkbox-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.checkbox-item span.value{color:#161b2f;font-size:13px;font-weight:400;width:100%}::ng-deep .category-multi-select-body ul.categories li ul.category-name{display:flex;justify-content:flex-start;width:100%}::ng-deep .category-multi-select-body ul.categories li ul.category-name li{list-style:none;color:#747576;width:auto;padding:0 8px 0 0;max-width:40%;display:inline-flex}::ng-deep .category-multi-select-body ul.categories li ul.category-name li span{font-size:14px;font-weight:400;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}::ng-deep .category-multi-select-body ul.categories li ul.category-name li i{font-size:8px;padding-left:0;padding-right:4px}::ng-deep .category-multi-select-body ul.categories li ul.category-name li:first-child span{color:#4681ef}::ng-deep .category-multi-select-body ul.categories li ul.category-name li:last-of-type span{color:#66bf72}::ng-deep .category-multi-select-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .category-multi-select-body.no-footer{height:calc(100vh - 42px)}::ng-deep .category-multi-select-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .category-multi-select-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px #1e5dd345;min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .category-multi-select-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .category-multi-select-body .card-row .card-block.active{box-shadow:0 0 10px #1e5dd2e6;z-index:1}::ng-deep .category-multi-select-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .category-multi-select-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .category-multi-select.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i6.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "pipe", type: i7.FilterPipe, name: "filter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryMultiSelectComponent, decorators: [{
             type: Component,

package/esm2022/lib/sharedComponents/checkbox-list/checkbox-list.component.mjs CHANGED Viewed

@@ -67,7 +67,7 @@ export class CheckboxListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: { itemsList: "itemsList", selectedItems: "selectedItems", identifierKey: "identifierKey", displayKey: "displayKey", tooltipKey: "tooltipKey", config: "config", twoColumn: "twoColumn", loaded: "loaded" }, outputs: { closeList: "closeList", saveList: "saveList" }, ngImport: i0, template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\n  <div\n    class=\"add-risk-rc-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">{{ config?.panelTitle }}</div>\n    <!-- <button class=\"add-risk-rc-close\" (click)=close()>\n            <i class=\"icons\">&#xe90d;</i>\n        </button> -->\n  </div>\n  <div class=\"add-risk-rc-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        placeholder=\"{{ config?.searchPlaceholder }}\"\n        [(ngModel)]=\"searchItem\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"loaded\"></app-loader-inline>\n    <ng-container\n      *ngIf=\"itemsList | search : searchItem : displayKey as searchList\"\n    >\n      <div\n        class=\"body-top\"\n        *ngIf=\"\n          config?.selectAllEnabled &&\n          searchList?.length > 0 &&\n          searchItem?.trim()?.length === 0\n        \"\n      >\n        <app-cs-checkbox\n          [ngValue]=\"\n            itemsList?.length === selectedItems?.length &&\n            selectedItems?.length > 0\n          \"\n          (ngValueChange)=\"selectAll($event)\"\n          ><strong>\n            {{\n              itemsList?.length === selectedItems?.length &&\n              selectedItems?.length > 0\n                ? \"Deselect All\"\n                : \"Select All\"\n            }}</strong\n          >\n        </app-cs-checkbox>\n      </div>\n      <div class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\n        <ul [class.two-column]=\"twoColumn\">\n          <li *ngFor=\"let item of searchList\" #ulElement>\n            <app-cs-checkbox\n              *ngIf=\"config.workflow !== 'policy'\"\n              [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n              (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n              [appTooltip]=\"tooltipKey ? item[tooltipKey] : item[displayKey]\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n            >\n              {{ item[displayKey]\n              }}{{\n                item?.parent_items?.length && config.workflow === \"policy\"\n                  ? \" < \" + item?.parent_items?.join(\" < \")\n                  : \"\"\n              }}\n            </app-cs-checkbox>\n            <app-cs-checkbox\n              *ngIf=\"config.workflow === 'policy'\"\n              [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n              (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n            >\n              <ul class=\"add-category-name\">\n                <li\n                  *ngFor=\"let data of item?.parent_items; let i = index\"\n                  [appTooltip]=\"data\"\n                  placement=\"bottom-left\"\n                  type=\"black\"\n                  delay=\"0\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  <i *ngIf=\"i > 0\" class=\"icons\">&#xe910;</i>{{ data }}\n                </li>\n                <li\n                  [appTooltip]=\"item[displayKey]\"\n                  placement=\"bottom-left\"\n                  type=\"black\"\n                  delay=\"0\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  <i *ngIf=\"item?.parent_items?.length > 0\" class=\"icons\"\n                    >&#xe910;</i\n                  >\n                  {{ item[displayKey] }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList?.length === 0 && !loaded\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"\n          config?.noDataText?.length > 0\n            ? config?.noDataText\n            : 'No data to display'\n        \"\n      ></app-no-data>\n    </ng-container>\n\n    <app-floating-bar\n      *ngIf=\"!loaded\"\n      [selectedData]=\"selectedItems | listMapper : itemsList : identifierKey\"\n      [displayElementKey]=\"displayKey\"\n      [singularText]=\"config?.floatingTextSingular\"\n      [pluralText]=\"\n        config?.floatingTextPlural\n          ? config?.floatingTextPlural\n          : 'Users selected'\n      \"\n      (closeEvent)=\"save()\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0\"\n      (deleteEvent)=\"deleteItem($event)\"\n    ></app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .add-risk-rc{position:fixed;inset:0 500px 0 0;z-index:1}::ng-deep .add-risk-rc:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:.5rem 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body .add-risk-rc-list{margin:1rem 0;display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-rc-body .add-risk-rc-list ul{padding:0;margin:0}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important;font-size:12px!important;color:#161b2f!important}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li i,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:first-child,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:last-of-type,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:last-of-type{color:#34aa44}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column{display:flex;flex-wrap:wrap}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column li{width:50%;padding-right:20px}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 200px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: i3.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "pipe", type: i6.ListMapperPipe, name: "listMapper" }, { kind: "pipe", type: i7.SearchPipe, name: "search" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: { itemsList: "itemsList", selectedItems: "selectedItems", identifierKey: "identifierKey", displayKey: "displayKey", tooltipKey: "tooltipKey", config: "config", twoColumn: "twoColumn", loaded: "loaded" }, outputs: { closeList: "closeList", saveList: "saveList" }, ngImport: i0, template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\n  <div\n    class=\"add-risk-rc-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">{{ config?.panelTitle }}</div>\n    <!-- <button class=\"add-risk-rc-close\" (click)=close()>\n            <i class=\"icons\">&#xe90d;</i>\n        </button> -->\n  </div>\n  <div class=\"add-risk-rc-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        placeholder=\"{{ config?.searchPlaceholder }}\"\n        [(ngModel)]=\"searchItem\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"loaded\"></app-loader-inline>\n    <ng-container\n      *ngIf=\"itemsList | search : searchItem : displayKey as searchList\"\n    >\n      <div\n        class=\"body-top\"\n        *ngIf=\"\n          config?.selectAllEnabled &&\n          searchList?.length > 0 &&\n          searchItem?.trim()?.length === 0\n        \"\n      >\n        <app-cs-checkbox\n          [ngValue]=\"\n            itemsList?.length === selectedItems?.length &&\n            selectedItems?.length > 0\n          \"\n          (ngValueChange)=\"selectAll($event)\"\n          ><strong>\n            {{\n              itemsList?.length === selectedItems?.length &&\n              selectedItems?.length > 0\n                ? \"Deselect All\"\n                : \"Select All\"\n            }}</strong\n          >\n        </app-cs-checkbox>\n      </div>\n      <div class=\"add-risk-rc-list\" *ngIf=\"searchList?.length > 0\">\n        <ul [class.two-column]=\"twoColumn\">\n          <li *ngFor=\"let item of searchList\" #ulElement>\n            <app-cs-checkbox\n              *ngIf=\"config.workflow !== 'policy'\"\n              [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n              (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n              [appTooltip]=\"tooltipKey ? item[tooltipKey] : item[displayKey]\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n            >\n              {{ item[displayKey]\n              }}{{\n                item?.parent_items?.length && config.workflow === \"policy\"\n                  ? \" < \" + item?.parent_items?.join(\" < \")\n                  : \"\"\n              }}\n            </app-cs-checkbox>\n            <app-cs-checkbox\n              *ngIf=\"config.workflow === 'policy'\"\n              [ngValue]=\"selectedItems.includes(item[identifierKey])\"\n              (ngValueChange)=\"selectItem(item[identifierKey], $event)\"\n            >\n              <ul class=\"add-category-name\">\n                <li\n                  *ngFor=\"let data of item?.parent_items; let i = index\"\n                  [appTooltip]=\"data\"\n                  placement=\"bottom-left\"\n                  type=\"black\"\n                  delay=\"0\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  <i *ngIf=\"i > 0\" class=\"icons\">&#xe910;</i>{{ data }}\n                </li>\n                <li\n                  [appTooltip]=\"item[displayKey]\"\n                  placement=\"bottom-left\"\n                  type=\"black\"\n                  delay=\"0\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  <i *ngIf=\"item?.parent_items?.length > 0\" class=\"icons\"\n                    >&#xe910;</i\n                  >\n                  {{ item[displayKey] }}\n                </li>\n              </ul>\n            </app-cs-checkbox>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList?.length === 0 && !loaded\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"\n          config?.noDataText?.length > 0\n            ? config?.noDataText\n            : 'No data to display'\n        \"\n      ></app-no-data>\n    </ng-container>\n\n    <app-floating-bar\n      *ngIf=\"!loaded\"\n      [selectedData]=\"selectedItems | listMapper : itemsList : identifierKey\"\n      [displayElementKey]=\"displayKey\"\n      [singularText]=\"config?.floatingTextSingular\"\n      [pluralText]=\"\n        config?.floatingTextPlural\n          ? config?.floatingTextPlural\n          : 'Users selected'\n      \"\n      (closeEvent)=\"save()\"\n      (closeList)=\"close()\"\n      [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0\"\n      (deleteEvent)=\"deleteItem($event)\"\n    ></app-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .add-risk-rc{position:fixed;inset:0 500px 0 0;z-index:1}::ng-deep .add-risk-rc:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:.5rem 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body .add-risk-rc-list{margin:1rem 0;display:block;align-items:flex-start;flex-wrap:wrap;height:calc(100vh - 16rem);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-rc-body .add-risk-rc-list::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-rc-body .add-risk-rc-list ul{padding:0;margin:0}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li{width:100%;padding:0 0 1rem;list-style:none}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important;font-size:12px!important;color:#161b2f!important}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li{list-style:none;color:#747576;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li i,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:first-child,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:first-child{color:#1e5dd3;max-width:100%}::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-checkbox ul.add-category-name li:last-of-type,::ng-deep .add-risk-rc-body .add-risk-rc-list ul li app-cs-radio ul.add-category-name li:last-of-type{color:#34aa44}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column{display:flex;flex-wrap:wrap}::ng-deep .add-risk-rc-body .add-risk-rc-list ul.two-column li{width:50%;padding-right:20px}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 200px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: i3.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "pipe", type: i6.ListMapperPipe, name: "listMapper" }, { kind: "pipe", type: i7.SearchPipe, name: "search" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxListComponent, decorators: [{
             type: Component,