import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ListBoxBaseComponent } from '@ironsource/fusion-ui/components/list-box/common/base';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ironsource/fusion-ui/components/icon/v1";
import * as i3 from "@ironsource/fusion-ui/components/tooltip/v1";
function ListBoxComponent_div_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 3);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate2("", ctx_r0.title, " (", ctx_r0.options && ctx_r0.options.length, ")");
} }
function ListBoxComponent_li_3_fusion_icon_5_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "fusion-icon", 8);
    i0.ɵɵlistener("click", function ListBoxComponent_li_3_fusion_icon_5_Template_fusion_icon_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const option_r2 = i0.ɵɵnextContext().$implicit; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.removeOption(option_r2, $event)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("name", ctx_r3.removeIconName);
} }
function ListBoxComponent_li_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "li")(1, "div", 4);
    i0.ɵɵelement(2, "fusion-icon", 5);
    i0.ɵɵelementStart(3, "span", 6);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(5, ListBoxComponent_li_3_fusion_icon_5_Template, 1, 1, "fusion-icon", 7);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const option_r2 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("name", ctx_r1.checkIconName);
    i0.ɵɵadvance();
    i0.ɵɵproperty("fusionTooltip", option_r2[ctx_r1.mappingOptions == null ? null : ctx_r1.mappingOptions.displayText]);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(option_r2[ctx_r1.mappingOptions == null ? null : ctx_r1.mappingOptions.displayText]);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", !ctx_r1.isDisabled);
} }
const _c0 = a0 => ({ "is-disabled": a0 });
export class ListBoxComponent extends ListBoxBaseComponent {
    ngOnInit() {
        super.ngOnInit();
        this.checkIconName = { iconName: 'check-v-2', iconVersion: 'v2' };
        this.removeIconName = { iconName: 'clear-full-circle', iconVersion: 'v1' };
    }
    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵListBoxComponent_BaseFactory; return function ListBoxComponent_Factory(t) { return (ɵListBoxComponent_BaseFactory || (ɵListBoxComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ListBoxComponent)))(t || ListBoxComponent); }; })(); }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListBoxComponent, selectors: [["fusion-list-box"]], features: [i0.ɵɵProvidersFeature([
                {
                    provide: NG_VALUE_ACCESSOR,
                    useExisting: forwardRef(() => ListBoxComponent),
                    multi: true
                }
            ]), i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 9, consts: [["class", "title", 4, "ngIf"], [1, "is-list-holder", 3, "id", "ngClass"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "title"], [1, "option"], [1, "checkIcon", 3, "name"], [1, "option-label", "truncate", 3, "fusionTooltip"], ["class", "removeIcon", 3, "name", "click", 4, "ngIf"], [1, "removeIcon", 3, "name", "click"]], template: function ListBoxComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵtemplate(0, ListBoxComponent_div_0_Template, 2, 2, "div", 0);
            i0.ɵɵelementStart(1, "div", 1)(2, "ul");
            i0.ɵɵtemplate(3, ListBoxComponent_li_3_Template, 6, 4, "li", 2);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵproperty("ngIf", ctx.title);
            i0.ɵɵadvance();
            i0.ɵɵclassMap(ctx.options && ctx.options.length ? ctx.mode : "");
            i0.ɵɵproperty("id", ctx.id)("ngClass", i0.ɵɵpureFunction1(7, _c0, ctx.isDisabled));
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngForOf", ctx.options)("ngForTrackBy", ctx.trackByOption);
        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.IconComponent, i3.TooltipDirective], styles: ["[_nghost-%COMP%]   .title[_ngcontent-%COMP%]{font-size:12px;font-family:var(--regular-font-family, \"Open Sans\");font-weight:600}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]{font-size:13px;font-family:var(--body-font-family, \"HelveticaNeue\");font-weight:400}[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]   .truncate[_ngcontent-%COMP%]{width:100%;display:inline-block;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis}[_nghost-%COMP%]{margin:0;padding:0;vertical-align:initial;text-align:initial}[_nghost-%COMP%]   ul[_ngcontent-%COMP%], [_nghost-%COMP%]   ol[_ngcontent-%COMP%]{padding:0;margin:0}[_nghost-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%], [_nghost-%COMP%]   ol[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{list-style:none}[_nghost-%COMP%]   .is-list-holder.frame[_ngcontent-%COMP%]{border:1px solid var(--light-color, #E1E6EB)}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]{border-bottom:1px solid var(--light-color, #E1E6EB)}[_nghost-%COMP%]{height:100%;width:100%}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]{height:100%;display:block;overflow-y:auto;overflow-x:hidden}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]{width:100%;padding:4px 10px 4px 0;color:var(--dark-color-300, #172D4C)}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]   fusion-icon.clear-full-circle[_ngcontent-%COMP%]     svg{width:10px;height:10px}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]   fusion-icon.clear-full-circle[_ngcontent-%COMP%]     svg .background{fill:var(--light-color-600, #C2CDD7)}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]   fusion-icon.clear-full-circle[_ngcontent-%COMP%]     svg .inner{fill:#fff}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]   fusion-icon.check-v-2[_ngcontent-%COMP%]     svg{width:10px;height:10px}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]   fusion-icon.check-v-2[_ngcontent-%COMP%]     svg *{fill:var(--dark-color-300, #172D4C)}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .option-label[_ngcontent-%COMP%]{width:calc(100% - 46px);vertical-align:middle;line-height:15px}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .checkIcon[_ngcontent-%COMP%]{vertical-align:middle;margin-right:12px}[_nghost-%COMP%]   .is-list-holder[_ngcontent-%COMP%]   .removeIcon[_ngcontent-%COMP%]{vertical-align:middle;float:right;cursor:pointer;margin-top:2px}[_nghost-%COMP%]   .is-list-holder.frame[_ngcontent-%COMP%]{background-color:var(--light-color-100, #F9FAFB);height:100%}[_nghost-%COMP%]   .is-list-holder.frame[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{padding-left:14px;padding-right:14px}[_nghost-%COMP%]   .is-list-holder.frame[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:last-child{margin-bottom:3px}[_nghost-%COMP%]   .is-list-holder.frame[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:last-child   .option[_ngcontent-%COMP%]{border-bottom:none}[_nghost-%COMP%]   .is-list-holder.frame[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:first-child{margin-top:3px}[_nghost-%COMP%]   .title[_ngcontent-%COMP%]{color:var(--light-color-800, #678099);margin-bottom:10px}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListBoxComponent, [{
        type: Component,
        args: [{ selector: 'fusion-list-box', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => ListBoxComponent),
                        multi: true
                    }
                ], template: " <div class=\"title\" *ngIf=\"title\">{{ title }} ({{ options && options.length }})</div>\n<div [id]=\"id\" class=\"is-list-holder\" [class]=\"options && options.length ? mode : ''\" [ngClass]=\"{'is-disabled': isDisabled}\">\n    <ul>\n        <li *ngFor=\"let option of options; trackBy: trackByOption\">\n            <div class=\"option\">\n                <fusion-icon [name]=\"checkIconName\" class=\"checkIcon\"></fusion-icon>\n                <span class=\"option-label truncate\" [fusionTooltip]=\"option[mappingOptions?.displayText]\">{{\n                    option[mappingOptions?.displayText]\n                }}</span>\n                <fusion-icon\n                    [name]=\"removeIconName\"\n                    class=\"removeIcon\"\n                    (click)=\"removeOption(option, $event)\"\n                    *ngIf=\"!isDisabled\"\n                ></fusion-icon>\n            </div>\n        </li>\n    </ul>\n</div>\n", styles: [":host .title{font-size:12px;font-family:var(--regular-font-family, \"Open Sans\");font-weight:600}:host .is-list-holder .option{font-size:13px;font-family:var(--body-font-family, \"HelveticaNeue\");font-weight:400}:host *{box-sizing:border-box}:host .truncate{width:100%;display:inline-block;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis}:host{margin:0;padding:0;vertical-align:initial;text-align:initial}:host ul,:host ol{padding:0;margin:0}:host ul li,:host ol li{list-style:none}:host .is-list-holder.frame{border:1px solid var(--light-color, #E1E6EB)}:host .is-list-holder .option{border-bottom:1px solid var(--light-color, #E1E6EB)}:host{height:100%;width:100%}:host .is-list-holder{height:100%;display:block;overflow-y:auto;overflow-x:hidden}:host .is-list-holder .option{width:100%;padding:4px 10px 4px 0;color:var(--dark-color-300, #172D4C)}:host .is-list-holder .option fusion-icon.clear-full-circle ::ng-deep svg{width:10px;height:10px}:host .is-list-holder .option fusion-icon.clear-full-circle ::ng-deep svg .background{fill:var(--light-color-600, #C2CDD7)}:host .is-list-holder .option fusion-icon.clear-full-circle ::ng-deep svg .inner{fill:#fff}:host .is-list-holder .option fusion-icon.check-v-2 ::ng-deep svg{width:10px;height:10px}:host .is-list-holder .option fusion-icon.check-v-2 ::ng-deep svg *{fill:var(--dark-color-300, #172D4C)}:host .is-list-holder .option-label{width:calc(100% - 46px);vertical-align:middle;line-height:15px}:host .is-list-holder .checkIcon{vertical-align:middle;margin-right:12px}:host .is-list-holder .removeIcon{vertical-align:middle;float:right;cursor:pointer;margin-top:2px}:host .is-list-holder.frame{background-color:var(--light-color-100, #F9FAFB);height:100%}:host .is-list-holder.frame ul{padding-left:14px;padding-right:14px}:host .is-list-holder.frame ul li:last-child{margin-bottom:3px}:host .is-list-holder.frame ul li:last-child .option{border-bottom:none}:host .is-list-holder.frame ul li:first-child{margin-top:3px}:host .title{color:var(--light-color-800, #678099);margin-bottom:10px}\n"] }]
    }], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListBoxComponent, { className: "ListBoxComponent", filePath: "list-box.component.ts", lineNumber: 18 }); })();
//# sourceMappingURL=data:application/json;base64, 