import { ViewChild } from '@angular/core';
import { Component, Input, Output, EventEmitter, } from '@angular/core';
import { cloneDeep } from 'lodash-es';
import { ASSETS } from '../../constants/assets.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "../../formgroup/cs-checkbox/cs-checkbox.component";
import * as i4 from "../../ui-kit/tooltip/tooltip.directive";
import * as i5 from "../no-data/no-data.component";
import * as i6 from "../floating-bar/floating-bar.component";
import * as i7 from "../pipes/filterPipe";
// import isEqual from 'lodash-es/isEqual';
export class CategoryMultiSelectComponent {
    constructor() {
        this.allCategories = [];
        this.selectedCategories = [];
        this.ASSETS = ASSETS;
        this.search = '';
        this.activeTab = '';
        this.selectedIds = [];
        this.animation = false;
        this.saveSelectedCategory = new EventEmitter();
        this.closeList = new EventEmitter();
        this.closeCategoriesList = new EventEmitter();
    }
    ngOnChanges() { }
    ngOnInit() {
        this.animation = true;
        setTimeout(() => {
            this.animation = false;
        }, 300);
        this.selectedIds = [];
        if (this.selectedCategories) {
            this.selectedCategories.forEach((element) => {
                this.selectedIds.push(element[this.categoryIdKey]);
            });
        }
        this.setList();
        setTimeout(() => {
            this.blockWidth = this.listBlock?.nativeElement?.offsetWidth;
        }, 10);
    }
    selectCategory(mode, activeTab, category) {
        if (mode) {
            this.selectedIds.push(category[this.categoryIdKey]);
        }
        else {
            const index = this.selectedIds.findIndex((element) => element == category[this.categoryIdKey]);
            this.selectedIds.splice(index, 1);
        }
        this.setList();
    }
    deleteEvent(event) {
        const index = this.selectedIds.findIndex((element) => element == event[this.categoryIdKey]);
        this.selectedIds.splice(index, 1);
        this.setList();
    }
    selectAll(mode, activeTab) {
        if (mode) {
            const list = [...this.categoryList[activeTab].list];
            list.forEach((element) => {
                if (!this.selectedIds.includes(element[this.categoryIdKey])) {
                    this.selectedIds.push(element[this.categoryIdKey]);
                }
            });
        }
        else {
            const list = [...this.categoryList[activeTab].list];
            list.forEach((element) => {
                if (this.selectedIds.includes(element[this.categoryIdKey])) {
                    let idIndex = this.selectedIds.findIndex((id) => id == element[this.categoryIdKey]);
                    this.selectedIds.splice(idIndex, 1);
                }
            });
        }
        this.setList();
    }
    setList() {
        const data = [];
        const categoryList = cloneDeep(this.allCategories);
        const selectedIds = cloneDeep(this.selectedIds);
        this.categoryList.regulations.selectedList = [];
        this.categoryList.standards.selectedList = [];
        this.categoryList.internalControls.selectedList = [];
        this.categoryList.others.selectedList = [];
        categoryList.forEach((element) => {
            if (selectedIds.includes(element[this.categoryIdKey])) {
                data.push(element);
            }
        });
        this.selectedCategories = data;
        this.categoryList.regulations.list.forEach((category) => {
            if (selectedIds.includes(category[this.categoryIdKey])) {
                this.categoryList.regulations.selectedList.push(category);
            }
        });
        this.categoryList.standards.list.forEach((category) => {
            if (selectedIds.includes(category[this.categoryIdKey])) {
                this.categoryList.standards.selectedList.push(category);
            }
        });
        this.categoryList.internalControls.list.forEach((category) => {
            if (selectedIds.includes(category[this.categoryIdKey])) {
                this.categoryList.internalControls.selectedList.push(category);
            }
        });
        this.categoryList.others.list.forEach((category) => {
            if (selectedIds.includes(category[this.categoryIdKey])) {
                this.categoryList.others.selectedList.push(category);
            }
        });
        if (!this.activeTab) {
            this.setActiveTab();
        }
    }
    setActiveTab() {
        if (this.categoryList.regulations.selectedList.length > 0) {
            this.activeTab = 'regulations';
        }
        else if (this.categoryList.standards.selectedList.length > 0) {
            this.activeTab = 'standards';
        }
        else if (this.categoryList.internalControls.selectedList.length > 0) {
            this.activeTab = 'internalControls';
        }
        else if (this.categoryList.others.selectedList.length > 0) {
            this.activeTab = 'others';
        }
        else {
            this.activeTab = 'regulations';
        }
    }
    checkSelectAll(activeTab) {
        const data = this.categoryList[activeTab].list.every((user) => this.selectedIds.includes(user[this.categoryIdKey]));
        return data;
    }
    save() {
        this.saveSelectedCategory.emit(this.selectedCategories);
    }
    close() {
        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" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryMultiSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-category-multi-select', 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"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { listBlock: [{
                type: ViewChild,
                args: ['listBlock', { static: false }]
            }], categoryList: [{
                type: Input
            }], allCategories: [{
                type: Input
            }], categoryIdKey: [{
                type: Input
            }], selectedCategories: [{
                type: Input
            }], saveSelectedCategory: [{
                type: Output
            }], closeList: [{
                type: Output
            }], closeCategoriesList: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 