import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { ASSETS } from '../../../constants/assets.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../floating-bar/floating-bar.component";
import * as i3 from "../../no-data/no-data.component";
import * as i4 from "@angular/forms";
import * as i5 from "../../../formgroup/cs-checkbox/cs-checkbox.component";
import * as i6 from "../../../formgroup/cs-radio/cs-radio.component";
import * as i7 from "../../../ui-kit/pagination/pagination/pagination.component";
import * as i8 from "../../radio-list-with-pagination/link-treatment-loader/link-treatment-loader.component";
import * as i9 from "../../../pipes/search.pipe";
import * as i10 from "../../../pipes/within.pipe";
export class CategoryListSelectionComponent {
    set setList(value) {
        this.list = value;
    }
    set setSelected(value) {
        if (value) {
            this.selectedList = [...value];
            this.setSelectedIds();
        }
    }
    constructor() {
        this.fetchData = new EventEmitter();
        this.back = new EventEmitter();
        this.next = new EventEmitter();
        this.cancel = new EventEmitter();
        this.ASSETS = ASSETS;
        this.list = [];
        this.searchKey = '';
        this.selectedList = [];
        this.currentPage = 1;
        this.recordStart = 1;
        this.recordEnd = 1;
        this.totalRecords = 1;
        this.totalPages = 1;
        this.loading = true;
        this.selectionMode = 'multiple';
        this.animation = true;
        this.selectedIds = [];
    }
    ngOnInit() { }
    //This method handles the page change
    pageChanged(page) {
        this.currentPage = page;
        this.fetchData.emit({ page: this.currentPage, searchKey: this.searchKey });
    }
    //This method handles the search
    search() {
        this.currentPage = 1;
        this.fetchData.emit({ page: this.currentPage, searchKey: this.searchKey });
    }
    itemSelected(event, item) {
        if (this.selectionMode === 'single') {
            this.selectedList = [item];
            this.setSelectedIds();
        }
        else {
            if (event) {
                this.selectedList.push(item);
                this.setSelectedIds();
            }
            else {
                let index = this.selectedList.findIndex((x) => x?._id === item?._id);
                if (index >= 0) {
                    this.selectedList = this.selectedList.filter((ele) => ele[this.config?.identifierKey] !==
                        item[this.config?.identifierKey]);
                    this.setSelectedIds();
                }
            }
        }
    }
    setSelectedIds() {
        this.selectedIds = this.selectedList.map((ele) => ele[this.config?.identifierKey]);
        this.selectedList = Array.from(new Set(this.selectedList.map((a) => a._id))).map((id) => {
            return this.selectedList.find((a) => a._id === id);
        });
    }
    deleteItem(evt) {
        this.selectedList = this.selectedList.filter((ele) => ele[this.config?.identifierKey] !== evt[this.config?.identifierKey]);
        this.setSelectedIds();
    }
    close() {
        this.cancel.emit();
    }
    save() {
        this.next.emit(this.selectedList);
    }
    selectAll(evt) {
        if (evt) {
            this.selectedList = [...this.selectedList, ...this.list];
            this.setSelectedIds();
        }
        else if (evt === false) {
            const currentPageList = this.list.map((ele) => ele._id);
            this.selectedList = this.selectedList.filter((ele) => !currentPageList.includes(ele?._id));
            this.setSelectedIds();
        }
    }
    checkSelectAll() {
        const data = this.list.every((rc) => this.selectedIds.includes(rc[this.config.identifierKey]));
        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 *ngIf=\"!loading && list?.length\">\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 list | search : searchKey; 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    </ng-container>\n    <!-- It is visible when the list items are getting loaded -->\n    <app-listline-loader *ngIf=\"loading\"></app-listline-loader>\n    <ng-container *ngIf=\"!loading && list?.length === 0\">\n      <app-no-data\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      [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.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { 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: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: i6.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { 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,
            args: [{ selector: 'app-category-list-selection', 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 *ngIf=\"!loading && list?.length\">\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 list | search : searchKey; 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    </ng-container>\n    <!-- It is visible when the list items are getting loaded -->\n    <app-listline-loader *ngIf=\"loading\"></app-listline-loader>\n    <ng-container *ngIf=\"!loading && list?.length === 0\">\n      <app-no-data\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      [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"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { fetchData: [{
                type: Output
            }], back: [{
                type: Output
            }], next: [{
                type: Output
            }], cancel: [{
                type: Output
            }], setList: [{
                type: Input,
                args: ['categoryList']
            }], config: [{
                type: Input
            }], currentPage: [{
                type: Input
            }], recordStart: [{
                type: Input
            }], recordEnd: [{
                type: Input
            }], totalRecords: [{
                type: Input
            }], totalPages: [{
                type: Input
            }], loading: [{
                type: Input
            }], selectionMode: [{
                type: Input
            }], setSelected: [{
                type: Input,
                args: ['selectedList']
            }] } });
//# sourceMappingURL=data:application/json;base64, 