import { Component, Input, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
import { QuestionBase } from '../../../common/core/question/question-base';
import { FormControl, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@ionic/angular";
import * as i2 from "ionic-selectable";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/common";
export class SelectableQuestionComponent {
    constructor() {
        this.selectChange = new EventEmitter();
        this.countryList = [];
        this.selectableCtrl = new FormControl();
        this._onDestroy = new Subject();
    }
    get isValid() {
        return this.form['controls'][this.question.key].valid;
    }
    get control() {
        return this.form['controls'][this.question.key];
    }
    ngOnInit() {
        this.countryList = [];
    }
    ngOnChanges(changes) {
        if (changes.question && changes.question != null) {
            if (this.question.value?.length > 0 && this.question.value[0]) {
                this.countryList = this.question.value.map((countryId) => this.question.options.find((option) => option.key === countryId));
                this.selectableCtrl.setValue(this.question.multiple ? this.countryList : this.countryList[0]);
            }
            else {
                this.form['controls'][this.question.key].setValue(null);
            }
        }
    }
    portChange(event) {
        if (this.question.multiple) {
            if (!event.value.length) {
                this.form['controls'][this.question.key].setValue(null);
                this.selectChange.emit([]);
            }
            else {
                const selected = event.value.map((item) => (item.key));
                this.form['controls'][this.question.key].setValue(selected);
                this.selectChange.emit(selected);
            }
        }
        else {
            this.form['controls'][this.question.key].setValue(event.value.key || null);
            this.selectChange.emit([event.value.key]);
        }
    }
    ngOnDestroy() {
        this._onDestroy.next();
        this._onDestroy.complete();
    }
}
SelectableQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectableQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SelectableQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SelectableQuestionComponent, selector: "app-selectable-question", inputs: { question: "question", form: "form" }, outputs: { selectChange: "selectChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"dd-selectable-label\">{{question.label}}</div> -->\n<ion-item class=\"ion-no-padding nona dd-selectable-remove-top\" [class.two-line]=\"question.label.length > 42\">\n  <ion-label position=\"floating\" class=\"select-label\">{{question.label}}</ion-label>\n  <ionic-selectable\n    item-content\n    [formControl]=\"selectableCtrl\"\n    itemValueField=\"key\"\n    itemTextField=\"value\"\n    [items]=\"question.options\"\n    [isMultiple]=\"question.multiple\"\n    [canSearch]=\"true\"\n    [searchFailText]=\"'No se encontraron resultados.'\"\n    (onChange)=\"portChange($event)\"\n  ></ionic-selectable>\n</ion-item>\n<div *ngIf=\"control.invalid && control.touched\">\n  <ion-text class=\"ion-text-end fadein\" color=\"danger\">\n    <p class=\"ion-no-margin\" *ngIf=\"!question.needCorrection\"><sub>Campo requerido</sub></p>\n    <p class=\"ion-no-margin\" *ngIf=\"question.needCorrection\"><sub>Campo por corregir</sub></p>\n  </ion-text>\n</div>\n", styles: ["app-selectable-question .dd-selectable-remove-top{padding-top:0}app-selectable-question .dd-selectable-label{color:#5e5e5e;margin-top:10px;font-size:17px}app-selectable-question .item.sc-ion-label-md-h,app-selectable-question .item .sc-ion-label-md-h{white-space:normal!important}app-selectable-question ion-item.two-line>ionic-selectable{min-height:-moz-fit-content;min-height:fit-content}app-selectable-question .two-line .ionic-selectable-label-floating .ionic-selectable-value{padding-top:13px}app-selectable-question ionic-selectable .ionic-selectable-value-item{white-space:normal!important}app-selectable-question ion-title{font-size:16px}app-selectable-question .item.sc-ion-label-md-h,app-selectable-question .item .sc-ion-label-md-h{text-overflow:ellipsis;overflow:hidden;width:90%;white-space:nowrap!important}app-selectable-question .select-label{max-width:90%!important}app-selectable-question .ionic-selectable-modal ion-header ion-toolbar{color:red}app-selectable-question .label-floating.sc-ion-label-md-h{transform:translateY(160%)}app-selectable-question .ionic-selectable-icon{bottom:10px}.nona{background:transparent;--background: transparent;padding-top:10px;padding-bottom:10px;font-size:15px;color:#000;opacity:.9}@media screen and (min-width: 700px){.nona{font-size:22px}}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }], directives: [{ type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectableQuestionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-selectable-question', encapsulation: ViewEncapsulation.None, template: "<!-- <div class=\"dd-selectable-label\">{{question.label}}</div> -->\n<ion-item class=\"ion-no-padding nona dd-selectable-remove-top\" [class.two-line]=\"question.label.length > 42\">\n  <ion-label position=\"floating\" class=\"select-label\">{{question.label}}</ion-label>\n  <ionic-selectable\n    item-content\n    [formControl]=\"selectableCtrl\"\n    itemValueField=\"key\"\n    itemTextField=\"value\"\n    [items]=\"question.options\"\n    [isMultiple]=\"question.multiple\"\n    [canSearch]=\"true\"\n    [searchFailText]=\"'No se encontraron resultados.'\"\n    (onChange)=\"portChange($event)\"\n  ></ionic-selectable>\n</ion-item>\n<div *ngIf=\"control.invalid && control.touched\">\n  <ion-text class=\"ion-text-end fadein\" color=\"danger\">\n    <p class=\"ion-no-margin\" *ngIf=\"!question.needCorrection\"><sub>Campo requerido</sub></p>\n    <p class=\"ion-no-margin\" *ngIf=\"question.needCorrection\"><sub>Campo por corregir</sub></p>\n  </ion-text>\n</div>\n", styles: ["app-selectable-question .dd-selectable-remove-top{padding-top:0}app-selectable-question .dd-selectable-label{color:#5e5e5e;margin-top:10px;font-size:17px}app-selectable-question .item.sc-ion-label-md-h,app-selectable-question .item .sc-ion-label-md-h{white-space:normal!important}app-selectable-question ion-item.two-line>ionic-selectable{min-height:-moz-fit-content;min-height:fit-content}app-selectable-question .two-line .ionic-selectable-label-floating .ionic-selectable-value{padding-top:13px}app-selectable-question ionic-selectable .ionic-selectable-value-item{white-space:normal!important}app-selectable-question ion-title{font-size:16px}app-selectable-question .item.sc-ion-label-md-h,app-selectable-question .item .sc-ion-label-md-h{text-overflow:ellipsis;overflow:hidden;width:90%;white-space:nowrap!important}app-selectable-question .select-label{max-width:90%!important}app-selectable-question .ionic-selectable-modal ion-header ion-toolbar{color:red}app-selectable-question .label-floating.sc-ion-label-md-h{transform:translateY(160%)}app-selectable-question .ionic-selectable-icon{bottom:10px}.nona{background:transparent;--background: transparent;padding-top:10px;padding-bottom:10px;font-size:15px;color:#000;opacity:.9}@media screen and (min-width: 700px){.nona{font-size:22px}}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { question: [{
                type: Input
            }], form: [{
                type: Input
            }], selectChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 