import { __metadata, __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { Directive, Input } from '@angular/core';
import { isNullOrUndefined } from '@ironsource/fusion-ui/utils';
import { detectChangesDecorator } from '@ironsource/fusion-ui/decorators';

var ListBoxModes;
(function (ListBoxModes) {
    ListBoxModes["Regular"] = "regular";
    ListBoxModes["Frame"] = "frame";
})(ListBoxModes || (ListBoxModes = {}));

class ListBoxBaseComponent {
    // for native;
    set disabled(value) {
        this.setDisabledState(value);
    }
    constructor(injector, cdr) {
        this.injector = injector;
        this.cdr = cdr;
        this.mappingOptions = { id: 'id', displayText: 'displayText' };
        this.propagateChange = (_) => { };
    }
    ngOnInit() {
        this.mappingOptions = {
            id: this.mappingOptions && this.mappingOptions.id ? this.mappingOptions.id : 'id',
            displayText: this.mappingOptions && this.mappingOptions.displayText ? this.mappingOptions.displayText : 'displayText'
        };
        this.mode = this.mode || ListBoxModes.Regular;
    }
    trackByOption(index, option) {
        return option ? option.id : index;
    }
    removeOption(item, $event) {
        this.options.splice(this.options.indexOf(item), 1);
        this.propagateChange(this.options);
        if ($event) {
            $event.stopPropagation();
        }
        // this.cdr.markForCheck();
    }
    // Implement ControlValueAccessor methods
    writeValue(value) {
        if (isNullOrUndefined(value) || (Array.isArray(value) && value.length === 0)) {
            this.options = [];
        }
        else {
            this.options = Array.isArray(value) ? value : [value];
        }
        // creating new instance does not trigger change, so alert manually value changed
        if (!this.cdr.destroyed) {
            this.cdr.detectChanges();
        }
    }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    registerOnTouched() { }
    setDisabledState(isDisabled) {
        this.isDisabled = isDisabled;
        // the above line does not trigger change, so alert manually value changed
        this.cdr.detectChanges();
    }
    static { this.ɵfac = function ListBoxBaseComponent_Factory(t) { return new (t || ListBoxBaseComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ListBoxBaseComponent, inputs: { mappingOptions: "mappingOptions", id: "id", mode: "mode", title: "title", disabled: "disabled" } }); }
}
__decorate([
    detectChangesDecorator,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object, Object]),
    __metadata("design:returntype", void 0)
], ListBoxBaseComponent.prototype, "removeOption", null);
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListBoxBaseComponent, [{
        type: Directive
    }], () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }], { mappingOptions: [{
            type: Input
        }], id: [{
            type: Input
        }], mode: [{
            type: Input
        }], title: [{
            type: Input
        }], disabled: [{
            type: Input
        }], removeOption: [] }); })();

/**
 * Generated bundle index. Do not edit.
 */

export { ListBoxBaseComponent, ListBoxModes };
//# sourceMappingURL=ironsource-fusion-ui-components-list-box-common-base.mjs.map
