import { Component, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { nanoid } from 'nanoid';
import * as i0 from "@angular/core";
import * as i1 from "../multi-select.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "../../popover/popover.component";
import * as i5 from "../../popover/popover.directive";
export class CsMultiselectComponent {
    set content(content) {
        if (content) {
            // initially setter gets called with undefined
            this.optionList = content;
        }
    }
    constructor(multiSelectService) {
        this.multiSelectService = multiSelectService;
        this.placeholder = '';
        this.selectedItem = [];
        this.valueChange = new EventEmitter();
        this.applyFilter = new EventEmitter();
        this.searchText = new EventEmitter();
        this.resetSelectedData = new EventEmitter();
        this.restoreSelectedData = new EventEmitter();
        this.previousItems = [];
        this.itemsDisplayedList = [];
        this.filterApplied = true;
        this.tempSelectedData = [];
        this.value = [];
        this.items = [];
        this.name = nanoid();
        this.searchPlaceholder = 'Search...';
        // alert(this.tempSelectedData.length);
    }
    /**
     *
     * @param index - Represents the index of the value to be removed
     */
    removeValue(index) {
        this.items.splice(index, 1);
        this.value.splice(index, 1);
        this.writeValue(this.value);
        this.itemsDisplayedList = [...new Set(this.items)];
        this.applyFilter.emit(this.filterApplied);
        this.tempSelectedData = [...this.value];
        this.previousItems = [...new Set(this.items)];
        this.multiSelectService.overflowHidden = false;
    }
    resetState(type) {
        this.value = [];
        this.items = [];
        if (type === 'allReset') {
            this.previousItems = [];
            this.tempSelectedData = [];
        }
        if (this.previousItems?.length === 0) {
            this.resetSelectedData.emit(true);
        }
    }
    ngOnChanges(changes) {
        if (changes.searchPlaceholder) {
            this.searchPlaceholder = this.searchPlaceholder || 'Search...';
        }
    }
    ngAfterViewInit() {
        if (this.selectedItem && this.selectedItem?.length) {
            this.selectedItem.forEach((ele) => {
                // this.addValue({key: ele?.rc_name ?? ele?.category_name , value: ele});
                this.addValue({ key: ele?.item_short_name, value: ele });
            });
        }
        this.tempSelectedData = this.selectedItem ? [...this.selectedItem] : [];
        this.previousItems = [...new Set(this.items)];
    }
    set CheckBoxVal(val) {
        if (val !== undefined && val !== null) {
            this.value = val;
            this.valueChange.emit(this.value);
        }
    }
    search(event) {
        this.searchText.emit(event);
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            this.searchKey = event;
        }, 400);
    }
    writeValue(value) {
        if (value?.length) {
            this.CheckBoxVal = value;
        }
    }
    /**
     *
     * @param obj - Represents the object which is added to the value list
     */
    addValue(obj) {
        this.items.push(obj.key);
        this.value.push(obj.value);
        this.writeValue(this.value);
    }
    /**
     *
     * @param value - Represents the value to be removed from the value list
     */
    removeValueFromCheckbox(value) {
        let index = this.value.indexOf(value);
        this.items.splice(index, 1);
        this.value.splice(index, 1);
        this.writeValue(this.value);
    }
    openDropdown(event) {
        this.dropdownOption = true;
        this.multiSelectService.overflowHidden = true;
        setTimeout(() => {
            const dropdown = event.target.getBoundingClientRect();
            const selectOption = this.optionList.nativeElement.offsetHeight;
            if (dropdown.top + selectOption + 50 > window.innerHeight) {
                this.getTop = dropdown.top - selectOption;
            }
            else {
                this.getTop = dropdown.top + dropdown.height;
            }
            this.getLeft = dropdown.left;
            this.getWidth = dropdown.width;
            this.maxWidth = dropdown.width * 1.25;
        }, 10);
        setTimeout(() => {
            this.activeDropdown = true;
        }, 100);
    }
    /**
     *
     * @param applyFilter - Determines whether filter is applied or not
     */
    closeDropdown(applyFilter) {
        this.dropdownOption = false;
        this.search('');
        this.filterApplied = applyFilter;
        this.multiSelectService.overflowHidden = false;
        this.searchKey = '';
        if (applyFilter) {
            this.tempSelectedData = [...new Set(this.value)];
            this.previousItems = [...new Set(this.items)];
            this.itemsDisplayedList = [...new Set(this.items)];
            this.applyFilter.emit(applyFilter);
        }
        else {
            this.filterApplied = true;
            this.tempSelectedData?.forEach((ele) => {
                // this.addValue({key: ele?.rc_name ?? ele?.category_name, value: ele});
                this.addValue({ key: ele?.item_short_name, value: ele });
            });
            this.resetToLastState();
        }
    }
    resetToLastState() {
        this.value = [...new Set(this.tempSelectedData)];
        this.items = [...new Set(this.previousItems)];
        this.restoreSelectedData.emit([...new Set(this.tempSelectedData)]);
    }
    checkChanges() {
        if (this.previousItems?.length === 0 && this.items?.length > 0) {
            return false;
        }
        else if (this.previousItems?.length === 0 && this.items?.length === 0) {
            return true;
        }
        else {
            return (this.previousItems?.every((element) => this.items?.includes(element)) &&
                this.previousItems?.length === this.items?.length);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsMultiselectComponent, deps: [{ token: i1.MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsMultiselectComponent, selector: "cs-multi-select", inputs: { isRequired: "isRequired", dropdownLabel: "dropdownLabel", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", value: "value", selectedItem: "selectedItem" }, outputs: { valueChange: "valueChange", applyFilter: "applyFilter", searchText: "searchText", resetSelectedData: "resetSelectedData", restoreSelectedData: "restoreSelectedData" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"multi-select-input-group\" (clickOutside)=\"dropdownOption = false\">\n  <label *ngIf=\"dropdownLabel\">\n    {{ dropdownLabel }}\n    <span class=\"sub-label\" *ngIf=\"dropdownSubLabel\">{{\n      dropdownSubLabel\n    }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <div class=\"multiple-value vx-d-flex vx-align-center vx-justify-between\">\n      <div\n        class=\"multiple-value-inner vx-d-flex vx-align-center vx-justify-end vx-pr-2\"\n        (click)=\"openDropdown($event)\"\n      ></div>\n      <span class=\"placeholder\" *ngIf=\"!value || value?.length === 0\">{{\n        placeholder\n      }}</span>\n      <!-- <i class=\"icons arrow-down vx-fs-9\">&#xe9e8;</i> -->\n      <div class=\"vx-d-flex vx-align-center\" *ngIf=\"value && value?.length > 0\">\n        <div\n          class=\"chip\"\n          *ngFor=\"let data of items | slice : 0 : 1; let i = index\"\n        >\n          <span class=\"close\" (click)=\"removeValue(i)\">&times;</span\n          ><span class=\"value\">{{ data }}</span>\n        </div>\n        <span\n          class=\"counter\"\n          *ngIf=\"items.length > 1\"\n          appPopover\n          (click)=\"actionButton.popover()\"\n          placement=\"right\"\n          >+{{ items.length - 1 }}</span\n        >\n        <app-popover #actionButton>\n          <div class=\"template-filter-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"let data of items.slice(1); let j = index\">\n                <div class=\"chip-item\">\n                  <i class=\"icons\" (click)=\"removeValue(j + 1)\">&#xe90d;</i>\n                  <span>{{ data }}</span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"overlay active\"\n    *ngIf=\"dropdownOption === true\"\n    (click)=\"closeDropdown(false)\"\n  ></div>\n  <ul\n    class=\"list-of-option\"\n    *ngIf=\"dropdownOption === true\"\n    #optionList\n    (keyup.Escape)=\"closeDropdown(false)\"\n    [style.top.px]=\"getTop\"\n    [style.left.px]=\"getLeft\"\n    [style.min-width.px]=\"getWidth\"\n    [style.max-width.px]=\"maxWidth\"\n    [class.active]=\"activeDropdown\"\n  >\n    <div class=\"input-group\">\n      <input\n        type=\"text\"\n        [placeholder]=\"searchPlaceholder\"\n        [ngModel]=\"searchKey\"\n        (ngModelChange)=\"search($event)\"\n      />\n    </div>\n    <ng-content></ng-content>\n    <div class=\"button-block\">\n      <button\n        type=\"button\"\n        [class.disabled]=\"checkChanges()\"\n        (click)=\"closeDropdown(true)\"\n      >\n        Apply\n      </button>\n    </div>\n  </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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/padding/padding-right.css\";::ng-deep .multi-select-input-group{position:relative;margin-bottom:0}::ng-deep .multi-select-input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .multi-select-input-group label span.required{color:#eb2424;font-size:14px}::ng-deep .multi-select-input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:4px}::ng-deep .multi-select-input-group .multiple-value{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #cdced6;border-radius:4px;width:100%;display:flex;padding:6px 25px 6px 6px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;position:relative}::ng-deep .multi-select-input-group .multiple-value-inner{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .multi-select-input-group .multiple-value-inner:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:8px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .multi-select-input-group .multiple-value .placeholder{color:#565a6f;font-size:11px;line-height:16px;pointer-events:none}::ng-deep .multi-select-input-group .multiple-value .arrow-down{position:relative;right:-16px;z-index:1}::ng-deep .multi-select-input-group .multiple-value.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}::ng-deep .multi-select-input-group .multiple-value .chip{display:inline-flex;border-radius:2px;background:#f8f8f8;border:1px solid #f8f8f8;height:22px;padding:0 5px;pointer-events:none;max-width:100%;position:relative;z-index:1;box-shadow:0 1px 4px #1e5dd340;max-width:150px}::ng-deep .multi-select-input-group .multiple-value .chip span{display:inline-block}::ng-deep .multi-select-input-group .multiple-value .chip span.close{cursor:pointer;color:#1e5dd3;font-size:16px;line-height:20px;pointer-events:auto}::ng-deep .multi-select-input-group .multiple-value .chip span.value{color:#747576;margin-left:5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .multi-select-input-group .multiple-value .chip+.chip{margin-left:4px}::ng-deep .multi-select-input-group .multiple-value .counter{display:inline-flex;border-radius:2px;background:#34aa44;border:1px solid #34aa44;height:22px;padding:0 5px;color:#fff;margin-left:5px;cursor:pointer;position:relative;z-index:1}::ng-deep .multi-select-input-group .multiple-value app-popover .action-list ul.action-item li .chip-item span{color:#747576}::ng-deep .multi-select-input-group .custom-select-box{position:relative}::ng-deep .multi-select-input-group .custom-select-box input[type=text],::ng-deep .multi-select-input-group .custom-select-box .input{cursor:pointer;padding-right:30px}::ng-deep .multi-select-input-group .custom-select-box input[type=text].line,::ng-deep .multi-select-input-group .custom-select-box .input.line{padding-right:20px}::ng-deep .multi-select-input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}ul.list-of-option{position:fixed;overflow:hidden;overflow-y:auto;max-height:260px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:9;background:#fff;border-radius:2px;opacity:0;width:230px;max-width:230px!important}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option app-cs-multi-select-option{display:block;width:100%}ul.list-of-option .input-group{padding:4px 10px;position:sticky;top:0;background:#fff;box-shadow:0 0 3px #1e5dd240;z-index:1;margin-bottom:4px}ul.list-of-option .input-group input{border:1px solid transparent;border-bottom-color:transparent;color:#747576;outline:none;width:100%;padding:0}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multi-select{padding:0 15px}ul.list-of-option li label.multi-select span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option .button-block{width:100%;display:flex;justify-content:flex-end;position:sticky;bottom:0;padding:4px 8px;background:#fff;box-shadow:0 0 3px #1e5dd240;z-index:1}ul.list-of-option .button-block button{display:flex;padding:0 12px;font-size:11px;text-transform:uppercase;font-weight:500;cursor:pointer;background:#1e5dd3;color:#fff;border:none;outline:none;border-radius:2px}.overlay{position:fixed;inset:0;z-index:2}.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}.template-filter-list{width:220px}.template-filter-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.template-filter-list ul.action-item{display:block}.template-filter-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.template-filter-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.template-filter-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.template-filter-list ul.action-item li button:hover{background:#f3f3f3}.template-filter-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.template-filter-list ul.action-item li .avatar-card.within-con{display:block}.template-filter-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.template-filter-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%}.template-filter-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.template-filter-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.template-filter-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.template-filter-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.template-filter-list ul.action-item li .avatar-card.no-image{display:block}.template-filter-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.template-filter-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.template-filter-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.template-filter-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-filter-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.template-filter-list ul.action-item li .chip-item span.id{font-size:9px}.template-filter-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.template-filter-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.template-filter-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.template-filter-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsMultiselectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cs-multi-select', template: "<div class=\"multi-select-input-group\" (clickOutside)=\"dropdownOption = false\">\n  <label *ngIf=\"dropdownLabel\">\n    {{ dropdownLabel }}\n    <span class=\"sub-label\" *ngIf=\"dropdownSubLabel\">{{\n      dropdownSubLabel\n    }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <div class=\"multiple-value vx-d-flex vx-align-center vx-justify-between\">\n      <div\n        class=\"multiple-value-inner vx-d-flex vx-align-center vx-justify-end vx-pr-2\"\n        (click)=\"openDropdown($event)\"\n      ></div>\n      <span class=\"placeholder\" *ngIf=\"!value || value?.length === 0\">{{\n        placeholder\n      }}</span>\n      <!-- <i class=\"icons arrow-down vx-fs-9\">&#xe9e8;</i> -->\n      <div class=\"vx-d-flex vx-align-center\" *ngIf=\"value && value?.length > 0\">\n        <div\n          class=\"chip\"\n          *ngFor=\"let data of items | slice : 0 : 1; let i = index\"\n        >\n          <span class=\"close\" (click)=\"removeValue(i)\">&times;</span\n          ><span class=\"value\">{{ data }}</span>\n        </div>\n        <span\n          class=\"counter\"\n          *ngIf=\"items.length > 1\"\n          appPopover\n          (click)=\"actionButton.popover()\"\n          placement=\"right\"\n          >+{{ items.length - 1 }}</span\n        >\n        <app-popover #actionButton>\n          <div class=\"template-filter-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"let data of items.slice(1); let j = index\">\n                <div class=\"chip-item\">\n                  <i class=\"icons\" (click)=\"removeValue(j + 1)\">&#xe90d;</i>\n                  <span>{{ data }}</span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"overlay active\"\n    *ngIf=\"dropdownOption === true\"\n    (click)=\"closeDropdown(false)\"\n  ></div>\n  <ul\n    class=\"list-of-option\"\n    *ngIf=\"dropdownOption === true\"\n    #optionList\n    (keyup.Escape)=\"closeDropdown(false)\"\n    [style.top.px]=\"getTop\"\n    [style.left.px]=\"getLeft\"\n    [style.min-width.px]=\"getWidth\"\n    [style.max-width.px]=\"maxWidth\"\n    [class.active]=\"activeDropdown\"\n  >\n    <div class=\"input-group\">\n      <input\n        type=\"text\"\n        [placeholder]=\"searchPlaceholder\"\n        [ngModel]=\"searchKey\"\n        (ngModelChange)=\"search($event)\"\n      />\n    </div>\n    <ng-content></ng-content>\n    <div class=\"button-block\">\n      <button\n        type=\"button\"\n        [class.disabled]=\"checkChanges()\"\n        (click)=\"closeDropdown(true)\"\n      >\n        Apply\n      </button>\n    </div>\n  </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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/padding/padding-right.css\";::ng-deep .multi-select-input-group{position:relative;margin-bottom:0}::ng-deep .multi-select-input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .multi-select-input-group label span.required{color:#eb2424;font-size:14px}::ng-deep .multi-select-input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:4px}::ng-deep .multi-select-input-group .multiple-value{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #cdced6;border-radius:4px;width:100%;display:flex;padding:6px 25px 6px 6px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;position:relative}::ng-deep .multi-select-input-group .multiple-value-inner{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .multi-select-input-group .multiple-value-inner:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:8px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .multi-select-input-group .multiple-value .placeholder{color:#565a6f;font-size:11px;line-height:16px;pointer-events:none}::ng-deep .multi-select-input-group .multiple-value .arrow-down{position:relative;right:-16px;z-index:1}::ng-deep .multi-select-input-group .multiple-value.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}::ng-deep .multi-select-input-group .multiple-value .chip{display:inline-flex;border-radius:2px;background:#f8f8f8;border:1px solid #f8f8f8;height:22px;padding:0 5px;pointer-events:none;max-width:100%;position:relative;z-index:1;box-shadow:0 1px 4px #1e5dd340;max-width:150px}::ng-deep .multi-select-input-group .multiple-value .chip span{display:inline-block}::ng-deep .multi-select-input-group .multiple-value .chip span.close{cursor:pointer;color:#1e5dd3;font-size:16px;line-height:20px;pointer-events:auto}::ng-deep .multi-select-input-group .multiple-value .chip span.value{color:#747576;margin-left:5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .multi-select-input-group .multiple-value .chip+.chip{margin-left:4px}::ng-deep .multi-select-input-group .multiple-value .counter{display:inline-flex;border-radius:2px;background:#34aa44;border:1px solid #34aa44;height:22px;padding:0 5px;color:#fff;margin-left:5px;cursor:pointer;position:relative;z-index:1}::ng-deep .multi-select-input-group .multiple-value app-popover .action-list ul.action-item li .chip-item span{color:#747576}::ng-deep .multi-select-input-group .custom-select-box{position:relative}::ng-deep .multi-select-input-group .custom-select-box input[type=text],::ng-deep .multi-select-input-group .custom-select-box .input{cursor:pointer;padding-right:30px}::ng-deep .multi-select-input-group .custom-select-box input[type=text].line,::ng-deep .multi-select-input-group .custom-select-box .input.line{padding-right:20px}::ng-deep .multi-select-input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}ul.list-of-option{position:fixed;overflow:hidden;overflow-y:auto;max-height:260px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:9;background:#fff;border-radius:2px;opacity:0;width:230px;max-width:230px!important}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option app-cs-multi-select-option{display:block;width:100%}ul.list-of-option .input-group{padding:4px 10px;position:sticky;top:0;background:#fff;box-shadow:0 0 3px #1e5dd240;z-index:1;margin-bottom:4px}ul.list-of-option .input-group input{border:1px solid transparent;border-bottom-color:transparent;color:#747576;outline:none;width:100%;padding:0}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multi-select{padding:0 15px}ul.list-of-option li label.multi-select span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option .button-block{width:100%;display:flex;justify-content:flex-end;position:sticky;bottom:0;padding:4px 8px;background:#fff;box-shadow:0 0 3px #1e5dd240;z-index:1}ul.list-of-option .button-block button{display:flex;padding:0 12px;font-size:11px;text-transform:uppercase;font-weight:500;cursor:pointer;background:#1e5dd3;color:#fff;border:none;outline:none;border-radius:2px}.overlay{position:fixed;inset:0;z-index:2}.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}.template-filter-list{width:220px}.template-filter-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.template-filter-list ul.action-item{display:block}.template-filter-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.template-filter-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.template-filter-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.template-filter-list ul.action-item li button:hover{background:#f3f3f3}.template-filter-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.template-filter-list ul.action-item li .avatar-card.within-con{display:block}.template-filter-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.template-filter-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%}.template-filter-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.template-filter-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.template-filter-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.template-filter-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.template-filter-list ul.action-item li .avatar-card.no-image{display:block}.template-filter-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.template-filter-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.template-filter-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.template-filter-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-filter-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.template-filter-list ul.action-item li .chip-item span.id{font-size:9px}.template-filter-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.template-filter-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.template-filter-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.template-filter-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.MultiSelectService }]; }, propDecorators: { isRequired: [{
                type: Input
            }], dropdownLabel: [{
                type: Input
            }], dropdownSubLabel: [{
                type: Input
            }], disabled: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], searchPlaceholder: [{
                type: Input
            }], value: [{
                type: Input
            }], selectedItem: [{
                type: Input
            }], valueChange: [{
                type: Output
            }], applyFilter: [{
                type: Output
            }], searchText: [{
                type: Output
            }], resetSelectedData: [{
                type: Output
            }], restoreSelectedData: [{
                type: Output
            }], content: [{
                type: ViewChild,
                args: ['optionList']
            }] } });
//# sourceMappingURL=data:application/json;base64, 