import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, Injector, Input, Output, ViewChild } from '@angular/core';
import { BehaviorSubject, combineLatest, fromEvent, of, Subject } from 'rxjs';
import { debounceTime, filter, map, scan, takeUntil, tap } from 'rxjs/operators';
import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { isNullOrUndefined } from '@ironsource/fusion-ui/utils';
import { IncludeExcludeTestIdModifiers } from '@ironsource/fusion-ui/entities';
import { TestIdsService } from '@ironsource/fusion-ui/services/test-ids';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ironsource/fusion-ui/components/checkbox/v3";
import * as i3 from "@ironsource/fusion-ui/components/loader-inline/v2";
import * as i4 from "../dropdown-dual-multi-select-loading/dropdown-dual-multi-select-loading.component";
import * as i5 from "./dropdown-dual-multi-select-body-item/dropdown-dual-multi-select-body-item.component";
import * as i6 from "@ironsource/fusion-ui/pipes/collection";
import * as i7 from "@ironsource/fusion-ui/pipes/generic";
const _c0 = ["wrapperLeft"];
const _c1 = ["containerLeft"];
const _c2 = ["wrapperRight"];
const _c3 = ["containerRight"];
function DropdownDualMultiSelectBodyComponent_label_4_Template(rf, ctx) { if (rf & 1) {
    const _r21 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "label", 23)(1, "fusion-checkbox", 24);
    i0.ɵɵlistener("changed", function DropdownDualMultiSelectBodyComponent_label_4_Template_fusion_checkbox_changed_1_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.selectAll($event)); });
    i0.ɵɵpipe(2, "generic");
    i0.ɵɵpipe(3, "async");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span", 25);
    i0.ɵɵtext(5, "Select all");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("isIndeterminate", ctx_r0.isIndeterminate)("checked", ctx_r0.isAllSelected)("isDisabled", i0.ɵɵpipeBind1(3, 8, ctx_r0.isSelectAllDisabled$));
    i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(2, 4, ctx_r0.testIdsService.getTestAttribute.bind(ctx_r0), ctx_r0.testId, ctx_r0.testIdIncludeExcludeModifiers.SELECT_ALL));
} }
function DropdownDualMultiSelectBodyComponent_div_11_Template(rf, ctx) { if (rf & 1) {
    const _r23 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 26);
    i0.ɵɵlistener("click", function DropdownDualMultiSelectBodyComponent_div_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.clearAll()); });
    i0.ɵɵpipe(1, "generic");
    i0.ɵɵtext(2, "Clear all");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(1, 1, ctx_r1.testIdsService.getTestAttribute.bind(ctx_r1), ctx_r1.testId, ctx_r1.testIdIncludeExcludeModifiers.CLEAR_ALL_BUTTON));
} }
function DropdownDualMultiSelectBodyComponent_ng_container_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0, 27);
} if (rf & 2) {
    i0.ɵɵnextContext();
    const _r19 = i0.ɵɵreference(41);
    i0.ɵɵproperty("ngTemplateOutlet", _r19);
} }
function DropdownDualMultiSelectBodyComponent_ng_container_20_li_1_Template(rf, ctx) { if (rf & 1) {
    const _r27 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li")(1, "fusion-dropdown-dual-multi-select-body-item", 29);
    i0.ɵɵlistener("changeSelected", function DropdownDualMultiSelectBodyComponent_ng_container_20_li_1_Template_fusion_dropdown_dual_multi_select_body_item_changeSelected_1_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r26.changeSelected($event)); });
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const item_r25 = ctx.$implicit;
    const ctx_r24 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("testId", ctx_r24.testId)("isSelectedItem", ctx_r24.selectedItemsMapping[item_r25.id])("isDisabled", item_r25.isDisabled)("item", item_r25)("bodySide", "left");
    i0.ɵɵattribute("data-testid", ctx_r24.testIdsService.getTestAttribute(ctx_r24.testId, ctx_r24.testIdIncludeExcludeModifiers.OPTION));
} }
function DropdownDualMultiSelectBodyComponent_ng_container_20_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, DropdownDualMultiSelectBodyComponent_ng_container_20_li_1_Template, 2, 6, "li", 28);
    i0.ɵɵpipe(2, "async");
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r5 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 2, ctx_r5.displayOptions$))("ngForTrackBy", ctx_r5.trackById);
} }
function DropdownDualMultiSelectBodyComponent_ng_container_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0, 27);
} if (rf & 2) {
    i0.ɵɵnextContext();
    const _r15 = i0.ɵɵreference(37);
    i0.ɵɵproperty("ngTemplateOutlet", _r15);
} }
function DropdownDualMultiSelectBodyComponent_ng_container_29_li_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "li")(1, "fusion-dropdown-dual-multi-select-body-item", 30);
    i0.ɵɵpipe(2, "generic");
    i0.ɵɵtext(3, " (clearSelect)=\"clearSelect($event)\" ");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const selectedItem_r29 = ctx.$implicit;
    const ctx_r28 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("testId", ctx_r28.testId)("isDisabled", selectedItem_r29.isDisabled)("item", selectedItem_r29)("bodySide", "right");
    i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(2, 5, ctx_r28.testIdsService.getTestAttribute.bind(ctx_r28), ctx_r28.testId, ctx_r28.testIdIncludeExcludeModifiers.SELECTED_OPTION));
} }
function DropdownDualMultiSelectBodyComponent_ng_container_29_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, DropdownDualMultiSelectBodyComponent_ng_container_29_li_1_Template, 4, 9, "li", 28);
    i0.ɵɵpipe(2, "async");
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r9 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 2, ctx_r9.selectedOptions$))("ngForTrackBy", ctx_r9.trackById);
} }
function DropdownDualMultiSelectBodyComponent_ng_container_30_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0, 27);
} if (rf & 2) {
    i0.ɵɵnextContext();
    const _r17 = i0.ɵɵreference(39);
    i0.ɵɵproperty("ngTemplateOutlet", _r17);
} }
function DropdownDualMultiSelectBodyComponent_ng_container_31_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0, 27);
} if (rf & 2) {
    i0.ɵɵnextContext();
    const _r13 = i0.ɵɵreference(35);
    i0.ɵɵproperty("ngTemplateOutlet", _r13);
} }
function DropdownDualMultiSelectBodyComponent_ng_template_34_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 31);
    i0.ɵɵelement(1, "div", 32);
    i0.ɵɵelementStart(2, "div", 33);
    i0.ɵɵtext(3, "No results found");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 34);
    i0.ɵɵtext(5, "Try different keyword");
    i0.ɵɵelementEnd()();
} }
function DropdownDualMultiSelectBodyComponent_ng_template_36_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "li", 35)(1, "label", 36);
    i0.ɵɵtext(2, "Loading...");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(3, "fusion-loader-inline", 37);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("status", true);
} }
function DropdownDualMultiSelectBodyComponent_ng_template_38_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 38);
    i0.ɵɵelement(1, "fusion-dropdown-dual-multi-select-loading", 39)(2, "fusion-dropdown-dual-multi-select-loading", 40);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵproperty("amount", 3)("position", "left");
    i0.ɵɵadvance();
    i0.ɵɵproperty("amount", 3)("position", "right");
} }
function DropdownDualMultiSelectBodyComponent_ng_template_40_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 41);
    i0.ɵɵelement(1, "fusion-dropdown-dual-multi-select-loading", 42)(2, "fusion-dropdown-dual-multi-select-loading", 43);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵproperty("amount", 1)("position", "left");
    i0.ɵɵadvance();
    i0.ɵɵproperty("amount", 1)("position", "right");
} }
const _c4 = () => ({});
const PAGINATION_CHUNK = 20;
export class DropdownDualMultiSelectBodyComponent {
    set items(data) {
        this.options$.next(data || []);
        this.isDisplayOptionAllDisabled(data);
    }
    set searchTerm(data) {
        this.searchTerm$.next(data);
    }
    set autoComplete(value) {
        this.autoComplete$.next(value);
    }
    set loadingLeft(value) {
        this.loadingLeft$.next(value);
    }
    constructor(injector) {
        this.injector = injector;
        this.hasSelectAll = true;
        this.hasBackendPagination = false;
        this.scrollDown = new EventEmitter();
        /** @internal */
        this.testIdIncludeExcludeModifiers = IncludeExcludeTestIdModifiers;
        /** @internal */
        this.testIdsService = this.injector.get(TestIdsService);
        this.isSelectAllDisabled$ = new BehaviorSubject(false);
        this.selectedControl = new FormControl([]);
        this.options$ = new BehaviorSubject([]);
        this.selectedItemsWorker$ = new BehaviorSubject([]);
        this.loadingLeft$ = new BehaviorSubject(false);
        this.selectedItemsMapping = {};
        this.isAllSelected = false;
        this.isIndeterminate = false;
        this.isNoFoundDataToDisplay = false;
        this.leftPagePagination$ = new BehaviorSubject(1);
        this.rightPagePagination$ = new BehaviorSubject(1);
        this.onDestroy$ = new Subject();
        this.searchTerm$ = new BehaviorSubject('');
        this.autoComplete$ = new BehaviorSubject(true);
        this.propagateChange = (_) => { };
        this.propagateTouched = () => { };
    }
    ngOnInit() {
        this.displayOptions$ = this.generateOptions('left').pipe(tap(val => {
            this.displayItemsAmount = val.length;
            this.isDisplayOptionsEmpty(val);
        }));
        this.selectedOptions$ = this.generateOptions('right').pipe(tap(val => {
            this.selectedItemsAmount = val?.length;
        }));
        this.initializeListeners();
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
    selectAll(checked) {
        this.isAllSelected = checked;
        this.isIndeterminate = false;
        this.selectedControl.setValue(this.options$.getValue().filter(item => !item.isDisabled || this.selectedItemsMapping[item.id]));
        if (!checked) {
            this.clearAll();
        }
    }
    changeSelected(item) {
        if (!item.isDisabled) {
            const objSelectedIndex = this.getSelectedIndex(item);
            const tempSelected = this.selectedControl.value ? [...this.selectedControl.value] : [];
            if (objSelectedIndex > -1) {
                tempSelected.splice(objSelectedIndex, 1);
            }
            else {
                tempSelected.push(item);
            }
            this.selectedControl.setValue(tempSelected);
        }
    }
    clearSelect(item) {
        this.changeSelected(item);
    }
    clearAll() {
        const clearedList = this.selectedControl.value.filter(item => {
            return !!item.isDisabled;
        });
        this.selectedControl.setValue(clearedList);
    }
    showClearAllButton() {
        return (this.selectedItemsWorker$.getValue() && this.selectedItemsWorker$.getValue().length !== 0 && this.options$.getValue().length > 0);
    }
    trackById(index, item) {
        return item.id;
    }
    writeValue(value) {
        this.selectedControl.setValue(value);
    }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    registerOnTouched(fn) {
        this.propagateTouched = fn;
    }
    setDisabledState(isDisabled) { }
    generateOptions(optionToDisplay) {
        const options$ = this.options$.asObservable();
        const term$ = this.autoComplete$.getValue() ? this.searchTerm$.asObservable() : of('');
        const leftPagePagination$ = this.getPaginationObservable('left');
        const rightPagePagination$ = this.getPaginationObservable('right');
        const selected$ = this.selectedItemsWorker$.asObservable();
        let conditionToDisplayOptions = optionToDisplay === 'left'
            ? { items$: options$, term$, pagination$: leftPagePagination$ }
            : { items$: selected$, term$, pagination$: rightPagePagination$ };
        return this.getOptionsDisplayObservable(conditionToDisplayOptions);
    }
    isItemsSelected(items) {
        this.selectedItemsMapping = items?.reduce((acc, crr) => {
            acc[crr.id] = true;
            return acc;
        }, {});
    }
    isDisplayOptionAllDisabled(items) {
        this.isSelectAllDisabled$.next(items.filter(item => item.isDisabled).length === items.length);
    }
    isDisplayOptionsEmpty(items) {
        this.isNoFoundDataToDisplay = items.length === 0 && this.options$.getValue()?.length !== 0;
    }
    getSelectedIndex(item) {
        let optionSelectedIndex = -1;
        let selectedList = this.selectedControl.value || [];
        selectedList.forEach((selectedItem, index) => {
            if (selectedItem.id === item.id) {
                optionSelectedIndex = index;
            }
        });
        return optionSelectedIndex;
    }
    initializeListeners() {
        const scrollLeft$ = this.onScrollChange({ wrapper: this.wrapperLeftRef, container: this.containerLeftRef });
        const scrollRight$ = this.onScrollChange({ wrapper: this.wrapperRightRef, container: this.containerRightRef });
        scrollLeft$.subscribe(this.onLeftScrollReachBottom.bind(this));
        scrollRight$.subscribe(this.onRightScrollReachBottom.bind(this));
        this.selectedControl.valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe(this.onSelectedControlValueChange.bind(this));
    }
    onScrollChange({ wrapper, container }) {
        return fromEvent(wrapper.nativeElement, 'scroll').pipe(filter(_ => {
            const top = wrapper.nativeElement.scrollTop;
            const space = container.nativeElement.offsetHeight - this.wrapperLeftRef.nativeElement.offsetHeight - 10;
            return top >= space;
        }), debounceTime(10));
    }
    onSelectedControlValueChange(items) {
        this.isItemsSelected(items || []);
        this.selectedItemsWorker$.next(items || []);
        this.isIndeterminate = items?.length > 0 && items?.length < this.options$?.getValue().length;
        this.isAllSelected = this.isSelectAllDisabled$.getValue() ? this.isAllSelected : items?.length === this.options$?.getValue().length;
        this.propagateChange(items || []);
    }
    onLeftScrollReachBottom() {
        if (this.hasBackendPagination) {
            this.totalItems = this.totalItems || this.options$?.getValue().length;
        }
        const isInputLengthLessThanTotalItem = this.options$?.getValue().length < this.totalItems;
        const isDisplayLengthEqualInputLength = this.displayItemsAmount === this.options$?.getValue().length;
        const isDisplayLengthLessThanInputLength = this.displayItemsAmount < this.options$?.getValue().length;
        const isLoadingLeft = isDisplayLengthEqualInputLength && isInputLengthLessThanTotalItem;
        this.loadingLeft$.next(isLoadingLeft);
        if (isDisplayLengthLessThanInputLength) {
            this.leftPagePagination$.next(1);
        }
        if (isDisplayLengthEqualInputLength) {
            this.scrollDown.emit();
        }
    }
    onRightScrollReachBottom() {
        const isDisplaySelectedLengthLessThanSelectedWorkerLength = this.selectedItemsAmount < this.selectedItemsWorker$?.getValue().length;
        if (isDisplaySelectedLengthLessThanSelectedWorkerLength) {
            this.rightPagePagination$.next(1);
        }
    }
    getOptionsDisplayObservable({ items$, term$, pagination$ }) {
        return combineLatest([items$, term$, pagination$]).pipe(map(this.filterOptions.bind(this)));
    }
    filterOptions([items, term, pagination]) {
        let response = items;
        if (term && items) {
            const searchTerm = term.toLowerCase();
            response = items.filter(item => {
                if (Array.isArray(this.searchByProperties) && !!this.searchByProperties.length) {
                    let found = false;
                    this.searchByProperties.forEach(property => {
                        if (!isNullOrUndefined(item[property]) && !found) {
                            found = item[property].toString().toLowerCase().indexOf(searchTerm) !== -1;
                        }
                    });
                    return found;
                }
                else {
                    if (item.title) {
                        return item.title.toLowerCase().indexOf(searchTerm) !== -1;
                    }
                    else {
                        return item.displayText.toLowerCase().indexOf(searchTerm) !== -1;
                    }
                }
            });
        }
        return response?.slice(0, pagination * PAGINATION_CHUNK);
    }
    getPaginationObservable(side) {
        return (side === 'left' ? this.leftPagePagination$ : this.rightPagePagination$).asObservable().pipe(scan((acc, curr) => {
            return curr ? (acc += curr) : 1;
        }, 0));
    }
    static { this.ɵfac = function DropdownDualMultiSelectBodyComponent_Factory(t) { return new (t || DropdownDualMultiSelectBodyComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DropdownDualMultiSelectBodyComponent, selectors: [["fusion-dropdown-dual-multi-select-body"]], viewQuery: function DropdownDualMultiSelectBodyComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 7, ElementRef);
            i0.ɵɵviewQuery(_c1, 7, ElementRef);
            i0.ɵɵviewQuery(_c2, 7, ElementRef);
            i0.ɵɵviewQuery(_c3, 7, ElementRef);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.wrapperLeftRef = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerLeftRef = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.wrapperRightRef = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerRightRef = _t.first);
        } }, inputs: { totalItems: "totalItems", isPendingItems: "isPendingItems", hasSelectAll: "hasSelectAll", testId: "testId", items: "items", searchTerm: "searchTerm", autoComplete: "autoComplete", loadingLeft: "loadingLeft", hasBackendPagination: "hasBackendPagination", searchByProperties: "searchByProperties" }, outputs: { scrollDown: "scrollDown" }, features: [i0.ɵɵProvidersFeature([
                {
                    provide: NG_VALUE_ACCESSOR,
                    useExisting: forwardRef(() => DropdownDualMultiSelectBodyComponent),
                    multi: true
                }
            ])], decls: 42, vars: 33, consts: [[1, "is-dropdown-dual-multi-select-body"], [1, "header-control"], [1, "content-col-left"], [1, "body-header"], ["class", "option-header-body", 4, "ngIf"], [1, "content-col-right"], [1, "fu-select-label"], ["class", "clear-all-btn", 3, "click", 4, "ngIf"], [3, "ngTemplateOutlet", 4, "ngIf"], [1, "body-control"], [1, "options-wrapper", "content-col"], [1, "items-holder"], ["wrapperLeft", ""], [1, "options-data-list"], ["containerLeft", ""], [4, "ngIf"], [1, "selected-list", "content-col"], ["wrapperRight", ""], ["containerRight", ""], ["noData", ""], ["loadingTemplate", ""], ["pendingItems", ""], ["pendingHeadControl", ""], [1, "option-header-body"], [1, "fu-check-all", 3, "isIndeterminate", "checked", "isDisabled", "changed"], [1, "fu-options-label"], [1, "clear-all-btn", 3, "click"], [3, "ngTemplateOutlet"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "testId", "isSelectedItem", "isDisabled", "item", "bodySide", "changeSelected"], [3, "testId", "isDisabled", "item", "bodySide"], [1, "fu-no-data"], [1, "fu-no-data-img"], [1, "fu-no-data-text"], [1, "fu-retry-text"], [1, "fu-content-loading"], [1, "loading-label"], [1, "loading-icon", 3, "status"], [1, "fu-multiselect-list-loader"], [1, "left-loading", 3, "amount", "position"], [1, "right-loading", 3, "amount", "position"], [1, "fu-multiselect-control-loader"], [1, "control-left-loading", 3, "amount", "position"], [1, "control-right-loading", 3, "amount", "position"]], template: function DropdownDualMultiSelectBodyComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
            i0.ɵɵtemplate(4, DropdownDualMultiSelectBodyComponent_label_4_Template, 6, 10, "label", 4);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(5, "div", 5)(6, "div", 3)(7, "label", 6);
            i0.ɵɵpipe(8, "generic");
            i0.ɵɵtext(9);
            i0.ɵɵpipe(10, "objectLengthWhereValueTrue");
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(11, DropdownDualMultiSelectBodyComponent_div_11_Template, 3, 5, "div", 7);
            i0.ɵɵelementEnd()();
            i0.ɵɵtemplate(12, DropdownDualMultiSelectBodyComponent_ng_container_12_Template, 1, 1, "ng-container", 8);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "div", 11, 12);
            i0.ɵɵpipe(17, "generic");
            i0.ɵɵelementStart(18, "ul", 13, 14);
            i0.ɵɵtemplate(20, DropdownDualMultiSelectBodyComponent_ng_container_20_Template, 3, 4, "ng-container", 15)(21, DropdownDualMultiSelectBodyComponent_ng_container_21_Template, 1, 1, "ng-container", 8);
            i0.ɵɵpipe(22, "async");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(23, "div", 16)(24, "div", 11, 17);
            i0.ɵɵpipe(26, "generic");
            i0.ɵɵelementStart(27, "ul", 13, 18);
            i0.ɵɵtemplate(29, DropdownDualMultiSelectBodyComponent_ng_container_29_Template, 3, 4, "ng-container", 15);
            i0.ɵɵelementEnd()()();
            i0.ɵɵtemplate(30, DropdownDualMultiSelectBodyComponent_ng_container_30_Template, 1, 1, "ng-container", 8);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(31, DropdownDualMultiSelectBodyComponent_ng_container_31_Template, 1, 1, "ng-container", 8);
            i0.ɵɵpipe(32, "async");
            i0.ɵɵpipe(33, "async");
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(34, DropdownDualMultiSelectBodyComponent_ng_template_34_Template, 6, 0, "ng-template", null, 19, i0.ɵɵtemplateRefExtractor)(36, DropdownDualMultiSelectBodyComponent_ng_template_36_Template, 4, 1, "ng-template", null, 20, i0.ɵɵtemplateRefExtractor)(38, DropdownDualMultiSelectBodyComponent_ng_template_38_Template, 3, 4, "ng-template", null, 21, i0.ɵɵtemplateRefExtractor)(40, DropdownDualMultiSelectBodyComponent_ng_template_40_Template, 3, 4, "ng-template", null, 22, i0.ɵɵtemplateRefExtractor);
        } if (rf & 2) {
            let tmp_11_0;
            i0.ɵɵadvance(4);
            i0.ɵɵproperty("ngIf", !ctx.isPendingItems && ctx.hasSelectAll);
            i0.ɵɵadvance(3);
            i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(8, 12, ctx.testIdsService.getTestAttribute.bind(ctx), ctx.testId, ctx.testIdIncludeExcludeModifiers.SELECTED_AMOUNT));
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 16, ctx.selectedItemsMapping ? ctx.selectedItemsMapping : i0.ɵɵpureFunction0(32, _c4)), " selected ");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.showClearAllButton());
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.isPendingItems);
            i0.ɵɵadvance(3);
            i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(17, 18, ctx.testIdsService.getTestAttribute.bind(ctx), ctx.testId, ctx.testIdIncludeExcludeModifiers.OPTIONS_LIST));
            i0.ɵɵadvance(5);
            i0.ɵɵproperty("ngIf", !ctx.isPendingItems);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(22, 22, ctx.loadingLeft$));
            i0.ɵɵadvance(3);
            i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(26, 24, ctx.testIdsService.getTestAttribute.bind(ctx), ctx.testId, ctx.testIdIncludeExcludeModifiers.SELECTED_OPTIONS_LIST));
            i0.ɵɵadvance(5);
            i0.ɵɵproperty("ngIf", !ctx.isPendingItems);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.isPendingItems);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", (ctx.isNoFoundDataToDisplay || ((tmp_11_0 = i0.ɵɵpipeBind1(32, 28, ctx.options$)) == null ? null : tmp_11_0.length) === 0 && i0.ɵɵpipeBind1(33, 30, ctx.loadingLeft$) === false) && !ctx.isPendingItems);
        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i2.CheckboxComponent, i3.LoaderInlineComponent, i4.DropdownDualMultiSelectLoadingComponent, i5.DropdownDualMultiSelectBodyItemComponent, i1.AsyncPipe, i6.GetObjectLengthPipe, i7.GenericPipe], styles: ["@font-face{font-family:NHaasGroteskDSPro;src:url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.eot);src:url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.eot?#iefix) format(\"embedded-opentype\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.woff2) format(\"woff2\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.woff) format(\"woff\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.ttf) format(\"truetype\")}@font-face{font-family:NHaasGroteskDSPro-65Md;src:url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.eot);src:url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.eot?#iefix) format(\"embedded-opentype\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.woff2) format(\"woff2\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.woff) format(\"woff\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.ttf) format(\"truetype\")}@font-face{font-family:HelveticaNeue;src:url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.eot);src:url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.eot?#iefix) format(\"embedded-opentype\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.woff2) format(\"woff2\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.woff) format(\"woff\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.ttf) format(\"truetype\")}@font-face{font-family:HelveticaNeue-Medium;src:url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.eot);src:url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.eot?#iefix) format(\"embedded-opentype\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.woff2) format(\"woff2\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.woff) format(\"woff\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.ttf) format(\"truetype\")}.font-heading-6[_ngcontent-%COMP%], .font-heading-5[_ngcontent-%COMP%], .font-heading-4[_ngcontent-%COMP%], .font-heading-3[_ngcontent-%COMP%], .font-heading-2[_ngcontent-%COMP%], .font-heading-1[_ngcontent-%COMP%]{font-family:NHaasGroteskDSPro,sans-serif}.font-heading-1[_ngcontent-%COMP%]{font-size:60px}.font-heading-2[_ngcontent-%COMP%]{font-size:32px}.font-heading-3[_ngcontent-%COMP%]{font-size:22px}.font-heading-4[_ngcontent-%COMP%]{font-size:18px}.font-heading-5[_ngcontent-%COMP%]{font-size:15px}.font-heading-6[_ngcontent-%COMP%]{font-size:13px}.font-heading-label[_ngcontent-%COMP%]{font-size:11px;font-family:NHaasGroteskDSPro-65Md,sans-serif;letter-spacing:.25px}.font-caption[_ngcontent-%COMP%], .font-bodyXSmall[_ngcontent-%COMP%], [_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]   .fu-retry-text[_ngcontent-%COMP%], [_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%], .font-bodySmall[_ngcontent-%COMP%], .font-bodyMedium[_ngcontent-%COMP%], .font-bodyLarge[_ngcontent-%COMP%]{font-family:HelveticaNeue,helvetica,sans-serif;line-height:1.5}.font-bodyXSmallStrong[_ngcontent-%COMP%], .font-bodySmallStrong[_ngcontent-%COMP%], .font-bodyMediumStrong[_ngcontent-%COMP%], [_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]   .fu-no-data-text[_ngcontent-%COMP%], .font-bodyLargeStrong[_ngcontent-%COMP%]{font-family:HelveticaNeue-Medium,helvetica,sans-serif;line-height:1.5}.font-bodyLarge[_ngcontent-%COMP%]{font-size:16px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]   .fu-no-data-text[_ngcontent-%COMP%], .font-bodyLargeStrong[_ngcontent-%COMP%]{font-size:16px}.font-bodyMedium[_ngcontent-%COMP%], .font-bodyMediumStrong[_ngcontent-%COMP%]{font-size:14px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]   .fu-retry-text[_ngcontent-%COMP%], [_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%], .font-bodySmall[_ngcontent-%COMP%]{font-size:13px;letter-spacing:.24px}.font-bodySmallStrong[_ngcontent-%COMP%]{font-size:13px;letter-spacing:.24px}.font-bodyXSmall[_ngcontent-%COMP%], .font-bodyXSmallStrong[_ngcontent-%COMP%]{font-size:12px;letter-spacing:.24px}.font-caption[_ngcontent-%COMP%]{font-size:11px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]   .fu-no-data-img[_ngcontent-%COMP%]{background:url(\"data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='40' fill='%23F1F3F4'/%3E%3Crect x='33.816' y='40.348' width='9.739' height='26.307' rx='4.87' transform='rotate(44.722 33.816 40.348)' fill='%2353575B'/%3E%3Ccircle transform='matrix(-1 0 0 1 43.13 36.87)' fill='%2353575B' r='20.174'/%3E%3Ccircle transform='matrix(-1 0 0 1 43.13 36.87)' fill='%23DDDFE1' r='15.304'/%3E%3C/svg%3E\") center center no-repeat}@keyframes _ngcontent-%COMP%_rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes _ngcontent-%COMP%_shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%], [_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .options-wrapper[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]{height:216px;max-height:216px;overflow-y:scroll;overflow-x:hidden}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]::-webkit-scrollbar, [_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .options-wrapper[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]::-webkit-scrollbar{background-color:#fff;width:8px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, [_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .options-wrapper[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background-color:#53575b4d;border-radius:13px;border:2px solid #fff}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .options-wrapper[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]   .options-data-list[_ngcontent-%COMP%]   .fu-content-loading[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;color:#e5e7e9}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]{display:block;align-items:center;height:257px;position:relative}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]{display:flex;align-items:center}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .fu-multiselect-control-loader[_ngcontent-%COMP%]{position:absolute;display:flex}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .fu-multiselect-control-loader[_ngcontent-%COMP%]   .control-right-loading[_ngcontent-%COMP%]{margin-left:20px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .content-col-left[_ngcontent-%COMP%]{width:272px;padding:4px 12px 3px;border-bottom:1px solid var(--fu-light-400, #DDDFE1)}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .content-col-left[_ngcontent-%COMP%]   .body-header[_ngcontent-%COMP%]{height:32px;display:flex;align-items:center}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .content-col-left[_ngcontent-%COMP%]   .body-header[_ngcontent-%COMP%]   .option-header-body[_ngcontent-%COMP%]{display:flex;align-items:center;color:var(--fu-black-500, #53575B);gap:8px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .content-col-left[_ngcontent-%COMP%]   .body-header[_ngcontent-%COMP%]   .option-header-body[_ngcontent-%COMP%]   .fu-check-all[_ngcontent-%COMP%]{margin-left:2px;width:16px;height:16px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .content-col-right[_ngcontent-%COMP%]{width:272px;padding:4px 10px 3px;border-bottom:1px solid var(--fu-light-400, #DDDFE1);border-left:1px solid var(--fu-light-400, #DDDFE1)}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .content-col-right[_ngcontent-%COMP%]   .body-header[_ngcontent-%COMP%]{height:32px;gap:4px;display:flex;align-items:center;justify-content:space-between;color:var(--fu-light-900, #7B838C)}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .content-col-right[_ngcontent-%COMP%]   .body-header[_ngcontent-%COMP%]   .fu-select-label[_ngcontent-%COMP%]{padding:4px 4px 5px 5px;color:var(--fu-black-500, #53575B)}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .header-control[_ngcontent-%COMP%]   .content-col-right[_ngcontent-%COMP%]   .body-header[_ngcontent-%COMP%]   .clear-all-btn[_ngcontent-%COMP%]{margin-left:auto;text-decoration:underline;cursor:pointer;padding-right:4px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]{display:flex;overflow-y:hidden;align-items:center;background-color:#fff;position:relative}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .options-wrapper.content-col[_ngcontent-%COMP%]{height:216px;max-height:216px;width:272px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .options-wrapper[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]   .options-data-list[_ngcontent-%COMP%]{list-style:none;width:auto;margin:2px 0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .options-wrapper[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]   .options-data-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{min-height:32px;height:-moz-fit-content;height:fit-content;width:252px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]{border-left:1px solid #e5e7e9}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .selected-list.content-col[_ngcontent-%COMP%]{height:216px;max-height:216px;width:272px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]   .options-data-list[_ngcontent-%COMP%]{list-style:none;width:auto;margin:2px 0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .selected-list[_ngcontent-%COMP%]   .items-holder[_ngcontent-%COMP%]   .options-data-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{min-height:32px;height:-moz-fit-content;height:fit-content;width:252px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .fu-multiselect-list-loader[_ngcontent-%COMP%]{position:absolute;top:0;display:flex}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .body-control[_ngcontent-%COMP%]   .fu-multiselect-list-loader[_ngcontent-%COMP%]   .right-loading[_ngcontent-%COMP%]{margin-left:20px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]{position:absolute;top:0;background-color:#fff;width:545px;height:257px;max-height:257px;display:flex;flex-direction:column;justify-content:center;align-items:center}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]   .fu-no-data-text[_ngcontent-%COMP%]{line-height:19.54px;color:var(--fu-black-200, #696A6B);margin-bottom:8px}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]   .fu-retry-text[_ngcontent-%COMP%]{line-height:19.5px;letter-spacing:.24px;color:var(--fu-black-200, #696A6B)}[_nghost-%COMP%]   .is-dropdown-dual-multi-select-body[_ngcontent-%COMP%]   .fu-no-data[_ngcontent-%COMP%]   .fu-no-data-img[_ngcontent-%COMP%]{display:block;width:114px;height:85px;margin-bottom:11px}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DropdownDualMultiSelectBodyComponent, [{
        type: Component,
        args: [{ selector: 'fusion-dropdown-dual-multi-select-body', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => DropdownDualMultiSelectBodyComponent),
                        multi: true
                    }
                ], template: "<div class=\"is-dropdown-dual-multi-select-body\">\n    <div class=\"header-control\">\n        <div class=\"content-col-left\">\n            <div class=\"body-header\">\n                <label class=\"option-header-body\" *ngIf=\"!isPendingItems && hasSelectAll\">\n                    <fusion-checkbox\n                        class=\"fu-check-all\"\n                        [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdIncludeExcludeModifiers.SELECT_ALL\"\n                        [isIndeterminate]=\"isIndeterminate\"\n                        [checked]=\"isAllSelected\"\n                        (changed)=\"selectAll($event)\"\n                        [isDisabled]=\"isSelectAllDisabled$ | async\"\n                    ></fusion-checkbox>\n                    <span class=\"fu-options-label\">Select all</span>\n                </label>\n            </div>\n        </div>\n        <div class=\"content-col-right\">\n            <div class=\"body-header\">\n                <label class=\"fu-select-label\" [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdIncludeExcludeModifiers.SELECTED_AMOUNT\">\n                    {{(selectedItemsMapping ? selectedItemsMapping : {}) | objectLengthWhereValueTrue}} selected\n                </label>\n                <div\n                    *ngIf=\"showClearAllButton()\"\n                    [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdIncludeExcludeModifiers.CLEAR_ALL_BUTTON\"\n                    (click)=\"clearAll()\" class=\"clear-all-btn\">Clear all</div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"isPendingItems\" [ngTemplateOutlet]=\"pendingHeadControl\"></ng-container>\n    </div>\n    <div class=\"body-control\">\n        <div class=\"options-wrapper content-col\">\n            <div class=\"items-holder\" #wrapperLeft [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdIncludeExcludeModifiers.OPTIONS_LIST\">\n                <ul class=\"options-data-list\" #containerLeft>\n                    <ng-container *ngIf=\"!isPendingItems\">\n                        <li *ngFor=\"let item of displayOptions$ | async;trackBy: trackById\">\n                            <fusion-dropdown-dual-multi-select-body-item\n                                [testId]=\"testId\"\n                                [attr.data-testid]=\"testIdsService.getTestAttribute(testId, testIdIncludeExcludeModifiers.OPTION)\"\n                                [isSelectedItem]=\"selectedItemsMapping[item.id]\"\n                                [isDisabled]=\"item.isDisabled\"\n                                (changeSelected)=\"changeSelected($event)\"\n                                [item]=\"item\"\n                                [bodySide]=\"'left'\">\n                            </fusion-dropdown-dual-multi-select-body-item>\n                        </li>\n                    </ng-container>\n                    <ng-container *ngIf=\"loadingLeft$ | async\" [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n                </ul>\n            </div>\n        </div>\n        <div class=\"selected-list content-col\">\n            <div class=\"items-holder\" #wrapperRight  [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdIncludeExcludeModifiers.SELECTED_OPTIONS_LIST\">\n                <ul class=\"options-data-list\" #containerRight>\n                    <ng-container *ngIf=\"!isPendingItems\">\n                        <li *ngFor=\"let selectedItem of selectedOptions$ | async;trackBy: trackById\">\n                            <fusion-dropdown-dual-multi-select-body-item\n                                [testId]=\"testId\"\n                                [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdIncludeExcludeModifiers.SELECTED_OPTION\"\n                                [isDisabled]=\"selectedItem.isDisabled\"\n                                [item]=\"selectedItem\"\n                                [bodySide]=\"'right'\">\n                                (clearSelect)=\"clearSelect($event)\"\n                            </fusion-dropdown-dual-multi-select-body-item>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n        <ng-container *ngIf=\"isPendingItems\" [ngTemplateOutlet]=\"pendingItems\"> </ng-container>\n    </div>\n    <ng-container *ngIf=\"(isNoFoundDataToDisplay || ((options$ | async)?.length === 0 && (loadingLeft$ | async) === false)) && !isPendingItems\" [ngTemplateOutlet]=\"noData\"> </ng-container>\n</div>\n\n\n<ng-template #noData>\n    <div class=\"fu-no-data\">\n        <div class=\"fu-no-data-img\"></div>\n        <div class=\"fu-no-data-text\">No results found</div>\n        <div class=\"fu-retry-text\">Try different keyword</div>\n    </div>\n</ng-template>\n\n<ng-template #loadingTemplate>\n    <li class=\"fu-content-loading\">\n        <label class=\"loading-label\">Loading...</label>\n        <fusion-loader-inline class=\"loading-icon\" [status]=\"true\"></fusion-loader-inline>\n    </li>\n</ng-template>\n\n<ng-template #pendingItems>\n    <div class=\"fu-multiselect-list-loader\">\n        <fusion-dropdown-dual-multi-select-loading class=\"left-loading\" [amount]=\"3\" [position]=\"'left'\"></fusion-dropdown-dual-multi-select-loading>\n        <fusion-dropdown-dual-multi-select-loading class=\"right-loading\" [amount]=\"3\" [position]=\"'right'\"></fusion-dropdown-dual-multi-select-loading>\n    </div>\n</ng-template>\n\n<ng-template #pendingHeadControl>\n    <div class=\"fu-multiselect-control-loader\">\n        <fusion-dropdown-dual-multi-select-loading class=\"control-left-loading\" [amount]=\"1\" [position]=\"'left'\"></fusion-dropdown-dual-multi-select-loading>\n        <fusion-dropdown-dual-multi-select-loading class=\"control-right-loading\" [amount]=\"1\" [position]=\"'right'\"></fusion-dropdown-dual-multi-select-loading>\n    </div>\n</ng-template>\n", styles: ["@font-face{font-family:NHaasGroteskDSPro;src:url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.eot);src:url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.eot?#iefix) format(\"embedded-opentype\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.woff2) format(\"woff2\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.woff) format(\"woff\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-75Bd.ttf) format(\"truetype\")}@font-face{font-family:NHaasGroteskDSPro-65Md;src:url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.eot);src:url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.eot?#iefix) format(\"embedded-opentype\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.woff2) format(\"woff2\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.woff) format(\"woff\"),url(https://fusion.ironsrc.net/assets/fonts/NHaasGroteskDSPro-65Md.ttf) format(\"truetype\")}@font-face{font-family:HelveticaNeue;src:url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.eot);src:url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.eot?#iefix) format(\"embedded-opentype\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.woff2) format(\"woff2\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.woff) format(\"woff\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue.ttf) format(\"truetype\")}@font-face{font-family:HelveticaNeue-Medium;src:url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.eot);src:url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.eot?#iefix) format(\"embedded-opentype\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.woff2) format(\"woff2\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.woff) format(\"woff\"),url(https://fusion.ironsrc.net/assets/fonts/HelveticaNeue-Medium.ttf) format(\"truetype\")}.font-heading-6,.font-heading-5,.font-heading-4,.font-heading-3,.font-heading-2,.font-heading-1{font-family:NHaasGroteskDSPro,sans-serif}.font-heading-1{font-size:60px}.font-heading-2{font-size:32px}.font-heading-3{font-size:22px}.font-heading-4{font-size:18px}.font-heading-5{font-size:15px}.font-heading-6{font-size:13px}.font-heading-label{font-size:11px;font-family:NHaasGroteskDSPro-65Md,sans-serif;letter-spacing:.25px}.font-caption,.font-bodyXSmall,:host .is-dropdown-dual-multi-select-body .fu-no-data .fu-retry-text,:host .is-dropdown-dual-multi-select-body .header-control,.font-bodySmall,.font-bodyMedium,.font-bodyLarge{font-family:HelveticaNeue,helvetica,sans-serif;line-height:1.5}.font-bodyXSmallStrong,.font-bodySmallStrong,.font-bodyMediumStrong,:host .is-dropdown-dual-multi-select-body .fu-no-data .fu-no-data-text,.font-bodyLargeStrong{font-family:HelveticaNeue-Medium,helvetica,sans-serif;line-height:1.5}.font-bodyLarge{font-size:16px}:host .is-dropdown-dual-multi-select-body .fu-no-data .fu-no-data-text,.font-bodyLargeStrong{font-size:16px}.font-bodyMedium,.font-bodyMediumStrong{font-size:14px}:host .is-dropdown-dual-multi-select-body .fu-no-data .fu-retry-text,:host .is-dropdown-dual-multi-select-body .header-control,.font-bodySmall{font-size:13px;letter-spacing:.24px}.font-bodySmallStrong{font-size:13px;letter-spacing:.24px}.font-bodyXSmall,.font-bodyXSmallStrong{font-size:12px;letter-spacing:.24px}.font-caption{font-size:11px}:host .is-dropdown-dual-multi-select-body *{box-sizing:border-box}:host .is-dropdown-dual-multi-select-body .fu-no-data .fu-no-data-img{background:url(\"data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='40' fill='%23F1F3F4'/%3E%3Crect x='33.816' y='40.348' width='9.739' height='26.307' rx='4.87' transform='rotate(44.722 33.816 40.348)' fill='%2353575B'/%3E%3Ccircle transform='matrix(-1 0 0 1 43.13 36.87)' fill='%2353575B' r='20.174'/%3E%3Ccircle transform='matrix(-1 0 0 1 43.13 36.87)' fill='%23DDDFE1' r='15.304'/%3E%3C/svg%3E\") center center no-repeat}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}:host .is-dropdown-dual-multi-select-body .body-control .selected-list .items-holder,:host .is-dropdown-dual-multi-select-body .body-control .options-wrapper .items-holder{height:216px;max-height:216px;overflow-y:scroll;overflow-x:hidden}:host .is-dropdown-dual-multi-select-body .body-control .selected-list .items-holder::-webkit-scrollbar,:host .is-dropdown-dual-multi-select-body .body-control .options-wrapper .items-holder::-webkit-scrollbar{background-color:#fff;width:8px}:host .is-dropdown-dual-multi-select-body .body-control .selected-list .items-holder::-webkit-scrollbar-thumb,:host .is-dropdown-dual-multi-select-body .body-control .options-wrapper .items-holder::-webkit-scrollbar-thumb{background-color:#53575b4d;border-radius:13px;border:2px solid #fff}:host .is-dropdown-dual-multi-select-body .body-control .options-wrapper .items-holder .options-data-list .fu-content-loading{display:flex;justify-content:center;align-items:center;color:#e5e7e9}:host .is-dropdown-dual-multi-select-body{display:block;align-items:center;height:257px;position:relative}:host .is-dropdown-dual-multi-select-body .header-control{display:flex;align-items:center}:host .is-dropdown-dual-multi-select-body .header-control .fu-multiselect-control-loader{position:absolute;display:flex}:host .is-dropdown-dual-multi-select-body .header-control .fu-multiselect-control-loader .control-right-loading{margin-left:20px}:host .is-dropdown-dual-multi-select-body .header-control .content-col-left{width:272px;padding:4px 12px 3px;border-bottom:1px solid var(--fu-light-400, #DDDFE1)}:host .is-dropdown-dual-multi-select-body .header-control .content-col-left .body-header{height:32px;display:flex;align-items:center}:host .is-dropdown-dual-multi-select-body .header-control .content-col-left .body-header .option-header-body{display:flex;align-items:center;color:var(--fu-black-500, #53575B);gap:8px}:host .is-dropdown-dual-multi-select-body .header-control .content-col-left .body-header .option-header-body .fu-check-all{margin-left:2px;width:16px;height:16px}:host .is-dropdown-dual-multi-select-body .header-control .content-col-right{width:272px;padding:4px 10px 3px;border-bottom:1px solid var(--fu-light-400, #DDDFE1);border-left:1px solid var(--fu-light-400, #DDDFE1)}:host .is-dropdown-dual-multi-select-body .header-control .content-col-right .body-header{height:32px;gap:4px;display:flex;align-items:center;justify-content:space-between;color:var(--fu-light-900, #7B838C)}:host .is-dropdown-dual-multi-select-body .header-control .content-col-right .body-header .fu-select-label{padding:4px 4px 5px 5px;color:var(--fu-black-500, #53575B)}:host .is-dropdown-dual-multi-select-body .header-control .content-col-right .body-header .clear-all-btn{margin-left:auto;text-decoration:underline;cursor:pointer;padding-right:4px}:host .is-dropdown-dual-multi-select-body .body-control{display:flex;overflow-y:hidden;align-items:center;background-color:#fff;position:relative}:host .is-dropdown-dual-multi-select-body .body-control .options-wrapper.content-col{height:216px;max-height:216px;width:272px}:host .is-dropdown-dual-multi-select-body .body-control .options-wrapper .items-holder .options-data-list{list-style:none;width:auto;margin:2px 0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center}:host .is-dropdown-dual-multi-select-body .body-control .options-wrapper .items-holder .options-data-list li{min-height:32px;height:-moz-fit-content;height:fit-content;width:252px}:host .is-dropdown-dual-multi-select-body .body-control .selected-list{border-left:1px solid #e5e7e9}:host .is-dropdown-dual-multi-select-body .body-control .selected-list.content-col{height:216px;max-height:216px;width:272px}:host .is-dropdown-dual-multi-select-body .body-control .selected-list .items-holder .options-data-list{list-style:none;width:auto;margin:2px 0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center}:host .is-dropdown-dual-multi-select-body .body-control .selected-list .items-holder .options-data-list li{min-height:32px;height:-moz-fit-content;height:fit-content;width:252px}:host .is-dropdown-dual-multi-select-body .body-control .fu-multiselect-list-loader{position:absolute;top:0;display:flex}:host .is-dropdown-dual-multi-select-body .body-control .fu-multiselect-list-loader .right-loading{margin-left:20px}:host .is-dropdown-dual-multi-select-body .fu-no-data{position:absolute;top:0;background-color:#fff;width:545px;height:257px;max-height:257px;display:flex;flex-direction:column;justify-content:center;align-items:center}:host .is-dropdown-dual-multi-select-body .fu-no-data .fu-no-data-text{line-height:19.54px;color:var(--fu-black-200, #696A6B);margin-bottom:8px}:host .is-dropdown-dual-multi-select-body .fu-no-data .fu-retry-text{line-height:19.5px;letter-spacing:.24px;color:var(--fu-black-200, #696A6B)}:host .is-dropdown-dual-multi-select-body .fu-no-data .fu-no-data-img{display:block;width:114px;height:85px;margin-bottom:11px}\n"] }]
    }], () => [{ type: i0.Injector }], { wrapperLeftRef: [{
            type: ViewChild,
            args: ['wrapperLeft', { read: ElementRef, static: true }]
        }], containerLeftRef: [{
            type: ViewChild,
            args: ['containerLeft', { read: ElementRef, static: true }]
        }], wrapperRightRef: [{
            type: ViewChild,
            args: ['wrapperRight', { read: ElementRef, static: true }]
        }], containerRightRef: [{
            type: ViewChild,
            args: ['containerRight', { read: ElementRef, static: true }]
        }], totalItems: [{
            type: Input
        }], isPendingItems: [{
            type: Input
        }], hasSelectAll: [{
            type: Input
        }], testId: [{
            type: Input
        }], items: [{
            type: Input
        }], searchTerm: [{
            type: Input
        }], autoComplete: [{
            type: Input
        }], loadingLeft: [{
            type: Input
        }], hasBackendPagination: [{
            type: Input
        }], searchByProperties: [{
            type: Input
        }], scrollDown: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DropdownDualMultiSelectBodyComponent, { className: "DropdownDualMultiSelectBodyComponent", filePath: "v3/components/dropdown-dual-multi-select-body/dropdown-dual-multi-select-body.component.ts", lineNumber: 37 }); })();
//# sourceMappingURL=data:application/json;base64, 