import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { MembershipManagerService } from '../../common/services/managers/membership/membership-manager.service';
import { FormBuilder, FormControl, Validators } from '@angular/forms';
import { MembershipApiService } from '../../common/services/apis/membership/membership-api.service';
import { DomSanitizer } from '@angular/platform-browser';
import * as i0 from "@angular/core";
import * as i1 from "../../common/services/managers/membership/membership-manager.service";
import * as i2 from "../../common/services/apis/membership/membership-api.service";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/platform-browser";
import * as i5 from "@ionic/angular";
import * as i6 from "@angular/common";
import * as i7 from "@thiagoprz/ionic-input-mask";
export class MembershipComponent {
    constructor(_membershipManager, _membershipApi, formBuilder, _sanitizer) {
        this._membershipManager = _membershipManager;
        this._membershipApi = _membershipApi;
        this.formBuilder = formBuilder;
        this._sanitizer = _sanitizer;
        this.onPreviousStep = new EventEmitter();
        this.onNextStep = new EventEmitter();
        this.onAdjustView = new EventEmitter();
        this.gift_img = "https://ddcheck-public-production.s3.amazonaws.com/KpvGLN5l9unL1M99Ru9DkZEcFmQsG5vBOWbpYciD.png";
        this.tdc_img = "https://ddcheck-public-production.s3.amazonaws.com/YDTH5uEgAyCiCjz5iZs7jFWhe3aTK75yDw7ardWh.png";
        this.loading = false;
        this.plans = [];
        this.form = this.formBuilder.group({
            'name': new FormControl('', Validators.required),
            'number': new FormControl('', Validators.required),
            'date': new FormControl('', Validators.required),
            'ccv': new FormControl('', Validators.required),
        });
    }
    ngOnInit() {
        this.getUserMembership();
        this._membershipManager.getLoading().subscribe((loading) => {
            this.loading = loading;
        });
        this._membershipManager.getPlanData().subscribe((plans) => {
            this.plans = plans;
        });
        this._membershipManager.getUserData().subscribe((user) => {
            this.user = user;
        });
    }
    getUserMembership() {
        // this._membershipManager.loadUserData("123");
        this._membershipManager.loadPlanData();
    }
    changeToStart() {
        this.membership = 'start';
        this.onAdjustView.next(false);
    }
    changeToPlan() {
        this.membership = 'plan';
        this.onAdjustView.next(false);
    }
    changeToMembership() {
        this.membership = 'paycaddy';
        console.log('Datos planes: ', this.plans[this.selectedCard]);
        console.log('planes: ', this.plans);
        console.log('selectedCard: ', this.selectedCard);
        this.onAdjustView.next(true);
        this._membershipApi.getMembership({
            save_card: this.selectedCard.id,
            email: this.userEmail
        }).subscribe((res) => {
            this.paycaddyUrl = this._sanitizer.bypassSecurityTrustResourceUrl(res.data.check_card_link);
            console.log('paycaddy url: ', this.paycaddyUrl);
        });
    }
    changeToTdc() {
        console.log(this.selectedCard);
        this.membership = 'tdc';
    }
    previousStep() {
        this.onPreviousStep.emit();
    }
    nextStep() {
        this.onNextStep.emit();
    }
    verifyTdc() {
    }
    getPeriod(period) {
        if (period === "monthly") {
            return "Mensual";
        }
    }
}
MembershipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MembershipComponent, deps: [{ token: i1.MembershipManagerService }, { token: i2.MembershipApiService }, { token: i3.FormBuilder }, { token: i4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
MembershipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MembershipComponent, selector: "app-membership", inputs: { membership: "membership", userEmail: "userEmail" }, outputs: { onPreviousStep: "onPreviousStep", onNextStep: "onNextStep", onAdjustView: "onAdjustView" }, ngImport: i0, template: "<div *ngIf=\"membership === 'start'\" class=\"h-100 informative_container\">\n    <div class=\"informative\">\n        <div class=\"btn-back-container\" >\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"previousStep()\"></ion-icon>\n            <p>atr\u00E1s</p>\n        </div>\n        <div class=\"image\">\n            <img [src]=\"gift_img\">\n        </div>\n\n        <div class=\"footer\">\n            <div class=\"text-center\" style=\"padding-bottom: 30px;\">\n                <span style=\"font-weight: bold;\">Por tu suscripci\u00F3n obtienes</span>\n            </div>\n            <div class=\"text-center\">\n                <span style=\"font-weight: bold; font-size: 30px;\">\u00A12 Meses Gratis!</span>\n            </div>\n        </div>\n\n        <div class=\"dd-continue-button\">\n            <div class=\"btn-continue\">\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"changeToPlan();\" expand=\"block\">Continuar</ion-button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"membership === 'plan'\" class=\"h-100 informative_container\">\n    <div class=\"informative\">\n        <div class=\"btn-back-container\" >\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"changeToStart()\"></ion-icon>\n            <p>atr\u00E1s</p>\n        </div>\n        <div class=\"titleContainer\"><span class=\"title\">Elige tu plan</span></div>\n        <div class=\"titleContainer\" style=\"padding-top: 20px; padding-bottom: 10px;\"><span class=\"subtitle\">Marca el plan que quieres suscribir</span></div>\n        <div *ngFor=\"let plan of plans; let index\">\n            <ion-card button=true class=\"card\" (click)=\"selectedCard = index\" [class.active]=\"selectedCard === index\">\n                <ion-card-header>\n                    <ion-row>\n                        <ion-col size=\"10\">\n                            <ion-card-subtitle>{{plan.name}}</ion-card-subtitle>\n                            <ion-card-title class=\"monthly\"><span class=\"amount\">${{plan.amount | number : '1.0-0'}}</span> / {{getPeriod(plan.payment_period)}}</ion-card-title>\n                        </ion-col>\n                        <ion-col>\n                            <ion-icon *ngIf=\"selectedCard === index\" class=\"check-icon\" name=\"checkmark-circle\"></ion-icon>\n                        </ion-col>\n                    </ion-row>\n                </ion-card-header>\n\n                <ion-card-content>{{plan.description}}</ion-card-content>\n\n                <ion-card-content class=\"benefits\" *ngFor=\"let benefit of plan.membership_benefits\">\n                    <ion-col size=\"1\">\n                        <ion-icon class=\"check-icon-benefit\" name=\"checkmark-circle\"></ion-icon>\n                    </ion-col>\n                    <ion-col size=\"11\">\n                        <span class=\"subtitle\" style=\"color:white\">{{benefit.description}}</span>\n                    </ion-col>\n                </ion-card-content>\n            </ion-card>\n        </div>\n        <div class=\"footer\">\n            <div class=\"text-center\" style=\"padding-bottom: 15px; padding-top: 30px;\">\n                <span style=\"font-weight: bold;\">Y obtendr\u00E1s</span>\n            </div>\n            <div class=\"text-center\">\n                <span style=\"font-weight: bold; font-size: 30px;\">\u00A12 Meses Gratis!</span>\n            </div>\n        </div>\n        <div class=\"dd-continue-button\">\n            <div class=\"btn-continue\">\n                <!-- <ion-button color=\"success\" [disabled]=\"!selectedCard\" (click)=\"changeToTdc();\" expand=\"block\">Continuar</ion-button> -->\n                <!-- <ion-button color=\"success\" [disabled]=\"!selectedCard\" (click)=\"changeToMembership();\" expand=\"block\">Continuar</ion-button> -->\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"changeToMembership();\" expand=\"block\">Continuar</ion-button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"membership === 'paycaddy'\">\n  <div *ngIf=\"paycaddyUrl\" class=\"d-flex h-100 w-100\">\n    <iframe [src]=\"paycaddyUrl\" frameborder=\"0\" class=\"w-100\"></iframe>\n  </div>\n</ng-container>\n\n<div *ngIf=\"membership === 'tdc'\" class=\"h-100 informative_container\">\n    <div class=\"informative\">\n        <div class=\"btn-back-container\" >\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"changeToPlan()\"></ion-icon>\n            <p>atr\u00E1s</p>\n        </div>\n        <div class=\"titleContainer\"><span class=\"title\">Ingresa tu tarjeta</span></div>\n\n        <div class=\"image\" style=\"padding-bottom: 20px;\">\n            <img [src]=\"tdc_img\">\n        </div>\n        <form [formGroup]=\"form\">\n            <div class=\"input-question\">\n                <div class=\"label-card\">\n                    <ion-label>Nombre del propietario</ion-label>\n                </div>\n                <ion-item class=\"ion-no-padding none\">\n                <ion-input\n                  #name\n                  formControlName=\"name\" \n                  type=\"text\"\n                  placeholder=\"Nombre en la tarjeta\"\n                ></ion-input>\n                <ion-icon class=\"ion-align-self-center credit-card-icon\" name=\"person\" slot=\"start\"></ion-icon>\n                </ion-item>\n            </div>\n\n\n            <div class=\"input-question\">\n                <div class=\"label-card\">\n                    <ion-label>N\u00FAmero de la tarjeta</ion-label>\n                </div>\n                <ion-item class=\"ion-no-padding none\">\n                <ion-input\n                  #number\n                  formControlName=\"number\" \n                  type=\"text\"\n                  placeholder=\"1234 5678 9012 3456\"\n                  mask=\"**** **** **** ****\"\n                  maxlength=\"19\"\n                ></ion-input>\n                <ion-icon class=\"ion-align-self-center credit-card-icon\" name=\"card\" slot=\"start\"></ion-icon>\n                </ion-item>\n            </div>\n\n            <ion-row>\n                <ion-col size=\"6\">\n                    <div class=\"input-question\">\n                        <div class=\"label-card\">\n                            <ion-label>Caducidad</ion-label>\n                        </div>\n                        <ion-item class=\"ion-no-padding none\">\n                            <ion-input\n                              class=\"ion-text-start \"\n                              placeholder=\"MM/YYYY\"\n                              formControlName=\"date\" \n                              mask=\"**/****\"\n                              maxlength=\"7\" \n                            ></ion-input>\n                            <ion-icon class=\"ion-align-self-center pointer\" name=\"calendar-outline\" slot=\"end\"></ion-icon>\n                        </ion-item>\n                    </div>\n                </ion-col>\n                <ion-col size=\"1\">\n                </ion-col>\n                <ion-col>\n                    <div class=\"input-question\">\n                        <div class=\"label-card\">\n                            <ion-label>C\u00F3digo CCV</ion-label>\n                        </div>\n                        <ion-item class=\"ion-no-padding none\">\n                        <ion-input\n                          #ccv\n                          type=\"text\" \n                          pattern=\"\\d*\" \n                          maxlength=\"3\"\n                          formControlName=\"ccv\"\n                          placeholder=\"123\"\n                          style=\"text-align: center;\"\n                        ></ion-input>\n                        </ion-item>\n                    </div>\n                </ion-col>\n            </ion-row>\n\n        </form>\n        <div class=\"dd-continue-button\">\n            <div class=\"btn-continue\">\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"verifyTdc();\" expand=\"block\">Verificar</ion-button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["app-membership .dd-title-form{text-align:center;padding-top:20px}app-membership .dd-continue-button{padding:25px 0 20px;position:relative}app-membership .card{background-color:#13475e;color:#fff;border-radius:10px}app-membership .footer{color:#13475e}app-membership .credit-card-icon{margin-left:15px;margin-right:15px;color:var(--ion-color-secondary)}app-membership .label-card{padding-bottom:5px}app-membership .input-question{padding-bottom:20px}app-membership ion-card-header{padding:10px;padding-inline:10px}app-membership ion-card-subtitle{color:#fff;padding-bottom:10px;font-weight:700}app-membership ion-card-content{color:#cbcbcb}app-membership ion-card-title{color:var(--ion-color-secondary);font-weight:700}app-membership .w-100{width:100%}app-membership .d-flex{display:flex}app-membership .check-icon{color:#fff;font-size:30px}app-membership .check-icon-benefit{color:var(--ion-color-primary)}app-membership .benefits{padding-bottom:25px}app-membership .active{border:2px solid var(--ion-color-secondary)}app-membership ion-content{--background: #F9F9F9 0% 0% no-repeat padding-box;--opacity: 1}app-membership .text-center{text-align:center}app-membership .titleContainer{padding-left:15px}app-membership .amount{font-size:30px}app-membership .monthly{color:var(--ion-color-primary)}app-membership .btn-back-container{display:flex;align-items:center;justify-content:flex-start;padding-bottom:10px}app-membership .btn-back-container .dd-float-icon{font-size:20px;color:#203a4e;cursor:pointer;margin-right:.5rem}app-membership .btn-back-container p{font-size:12px;margin:0}app-membership .title{font-size:24px;font-weight:700;display:inline-block;color:#000}app-membership .subtitle{font-weight:700;letter-spacing:0}app-membership .h-100{height:100%}app-membership .informative_container{display:flex;justify-content:space-between;flex-direction:column;height:100%;padding:5px 20px 20px}app-membership .informative{line-height:1.5;letter-spacing:.8px;padding-top:10px;width:100%;color:#4e4e4e;display:flex;justify-content:space-between;flex-direction:column;height:100%}app-membership .image{text-align:center;padding-top:25px}app-membership .dd-float-icon{font-size:20px;cursor:pointer}app-membership ion-button.dd-ion-button{--border-radius: 10px}app-membership ion-button.dd-ion-button::part(native){box-shadow:0 0 20px -8px #19d7db}@media only screen and (min-width: 601px){app-membership .dd-form-wrapper{justify-content:center;display:flex}app-membership .btn-submit{height:64px;font-size:24px;text-transform:uppercase;font-weight:600}app-membership .main-container{width:536px}app-membership .dd-float-icon{font-size:25px}}app-membership .button-continue{font-size:24px;height:56px;text-transform:uppercase}@media only screen and (max-width: 700px){app-membership .dd-continue-button{display:flex;align-items:center;gap:10px}app-membership .btn-continue{width:100%}app-membership .btn-submit{min-height:46px}app-membership .button-continue{font-size:14px;height:45px}}\n"], components: [{ type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i5.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { type: i5.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { type: i5.IonRow, selector: "ion-row" }, { type: i5.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i5.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { type: i5.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { type: i5.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i5.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i7.IonicInputMaskDirective, selector: "[mask]" }], pipes: { "number": i6.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MembershipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-membership', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"membership === 'start'\" class=\"h-100 informative_container\">\n    <div class=\"informative\">\n        <div class=\"btn-back-container\" >\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"previousStep()\"></ion-icon>\n            <p>atr\u00E1s</p>\n        </div>\n        <div class=\"image\">\n            <img [src]=\"gift_img\">\n        </div>\n\n        <div class=\"footer\">\n            <div class=\"text-center\" style=\"padding-bottom: 30px;\">\n                <span style=\"font-weight: bold;\">Por tu suscripci\u00F3n obtienes</span>\n            </div>\n            <div class=\"text-center\">\n                <span style=\"font-weight: bold; font-size: 30px;\">\u00A12 Meses Gratis!</span>\n            </div>\n        </div>\n\n        <div class=\"dd-continue-button\">\n            <div class=\"btn-continue\">\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"changeToPlan();\" expand=\"block\">Continuar</ion-button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"membership === 'plan'\" class=\"h-100 informative_container\">\n    <div class=\"informative\">\n        <div class=\"btn-back-container\" >\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"changeToStart()\"></ion-icon>\n            <p>atr\u00E1s</p>\n        </div>\n        <div class=\"titleContainer\"><span class=\"title\">Elige tu plan</span></div>\n        <div class=\"titleContainer\" style=\"padding-top: 20px; padding-bottom: 10px;\"><span class=\"subtitle\">Marca el plan que quieres suscribir</span></div>\n        <div *ngFor=\"let plan of plans; let index\">\n            <ion-card button=true class=\"card\" (click)=\"selectedCard = index\" [class.active]=\"selectedCard === index\">\n                <ion-card-header>\n                    <ion-row>\n                        <ion-col size=\"10\">\n                            <ion-card-subtitle>{{plan.name}}</ion-card-subtitle>\n                            <ion-card-title class=\"monthly\"><span class=\"amount\">${{plan.amount | number : '1.0-0'}}</span> / {{getPeriod(plan.payment_period)}}</ion-card-title>\n                        </ion-col>\n                        <ion-col>\n                            <ion-icon *ngIf=\"selectedCard === index\" class=\"check-icon\" name=\"checkmark-circle\"></ion-icon>\n                        </ion-col>\n                    </ion-row>\n                </ion-card-header>\n\n                <ion-card-content>{{plan.description}}</ion-card-content>\n\n                <ion-card-content class=\"benefits\" *ngFor=\"let benefit of plan.membership_benefits\">\n                    <ion-col size=\"1\">\n                        <ion-icon class=\"check-icon-benefit\" name=\"checkmark-circle\"></ion-icon>\n                    </ion-col>\n                    <ion-col size=\"11\">\n                        <span class=\"subtitle\" style=\"color:white\">{{benefit.description}}</span>\n                    </ion-col>\n                </ion-card-content>\n            </ion-card>\n        </div>\n        <div class=\"footer\">\n            <div class=\"text-center\" style=\"padding-bottom: 15px; padding-top: 30px;\">\n                <span style=\"font-weight: bold;\">Y obtendr\u00E1s</span>\n            </div>\n            <div class=\"text-center\">\n                <span style=\"font-weight: bold; font-size: 30px;\">\u00A12 Meses Gratis!</span>\n            </div>\n        </div>\n        <div class=\"dd-continue-button\">\n            <div class=\"btn-continue\">\n                <!-- <ion-button color=\"success\" [disabled]=\"!selectedCard\" (click)=\"changeToTdc();\" expand=\"block\">Continuar</ion-button> -->\n                <!-- <ion-button color=\"success\" [disabled]=\"!selectedCard\" (click)=\"changeToMembership();\" expand=\"block\">Continuar</ion-button> -->\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"changeToMembership();\" expand=\"block\">Continuar</ion-button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"membership === 'paycaddy'\">\n  <div *ngIf=\"paycaddyUrl\" class=\"d-flex h-100 w-100\">\n    <iframe [src]=\"paycaddyUrl\" frameborder=\"0\" class=\"w-100\"></iframe>\n  </div>\n</ng-container>\n\n<div *ngIf=\"membership === 'tdc'\" class=\"h-100 informative_container\">\n    <div class=\"informative\">\n        <div class=\"btn-back-container\" >\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"changeToPlan()\"></ion-icon>\n            <p>atr\u00E1s</p>\n        </div>\n        <div class=\"titleContainer\"><span class=\"title\">Ingresa tu tarjeta</span></div>\n\n        <div class=\"image\" style=\"padding-bottom: 20px;\">\n            <img [src]=\"tdc_img\">\n        </div>\n        <form [formGroup]=\"form\">\n            <div class=\"input-question\">\n                <div class=\"label-card\">\n                    <ion-label>Nombre del propietario</ion-label>\n                </div>\n                <ion-item class=\"ion-no-padding none\">\n                <ion-input\n                  #name\n                  formControlName=\"name\" \n                  type=\"text\"\n                  placeholder=\"Nombre en la tarjeta\"\n                ></ion-input>\n                <ion-icon class=\"ion-align-self-center credit-card-icon\" name=\"person\" slot=\"start\"></ion-icon>\n                </ion-item>\n            </div>\n\n\n            <div class=\"input-question\">\n                <div class=\"label-card\">\n                    <ion-label>N\u00FAmero de la tarjeta</ion-label>\n                </div>\n                <ion-item class=\"ion-no-padding none\">\n                <ion-input\n                  #number\n                  formControlName=\"number\" \n                  type=\"text\"\n                  placeholder=\"1234 5678 9012 3456\"\n                  mask=\"**** **** **** ****\"\n                  maxlength=\"19\"\n                ></ion-input>\n                <ion-icon class=\"ion-align-self-center credit-card-icon\" name=\"card\" slot=\"start\"></ion-icon>\n                </ion-item>\n            </div>\n\n            <ion-row>\n                <ion-col size=\"6\">\n                    <div class=\"input-question\">\n                        <div class=\"label-card\">\n                            <ion-label>Caducidad</ion-label>\n                        </div>\n                        <ion-item class=\"ion-no-padding none\">\n                            <ion-input\n                              class=\"ion-text-start \"\n                              placeholder=\"MM/YYYY\"\n                              formControlName=\"date\" \n                              mask=\"**/****\"\n                              maxlength=\"7\" \n                            ></ion-input>\n                            <ion-icon class=\"ion-align-self-center pointer\" name=\"calendar-outline\" slot=\"end\"></ion-icon>\n                        </ion-item>\n                    </div>\n                </ion-col>\n                <ion-col size=\"1\">\n                </ion-col>\n                <ion-col>\n                    <div class=\"input-question\">\n                        <div class=\"label-card\">\n                            <ion-label>C\u00F3digo CCV</ion-label>\n                        </div>\n                        <ion-item class=\"ion-no-padding none\">\n                        <ion-input\n                          #ccv\n                          type=\"text\" \n                          pattern=\"\\d*\" \n                          maxlength=\"3\"\n                          formControlName=\"ccv\"\n                          placeholder=\"123\"\n                          style=\"text-align: center;\"\n                        ></ion-input>\n                        </ion-item>\n                    </div>\n                </ion-col>\n            </ion-row>\n\n        </form>\n        <div class=\"dd-continue-button\">\n            <div class=\"btn-continue\">\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"verifyTdc();\" expand=\"block\">Verificar</ion-button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["app-membership .dd-title-form{text-align:center;padding-top:20px}app-membership .dd-continue-button{padding:25px 0 20px;position:relative}app-membership .card{background-color:#13475e;color:#fff;border-radius:10px}app-membership .footer{color:#13475e}app-membership .credit-card-icon{margin-left:15px;margin-right:15px;color:var(--ion-color-secondary)}app-membership .label-card{padding-bottom:5px}app-membership .input-question{padding-bottom:20px}app-membership ion-card-header{padding:10px;padding-inline:10px}app-membership ion-card-subtitle{color:#fff;padding-bottom:10px;font-weight:700}app-membership ion-card-content{color:#cbcbcb}app-membership ion-card-title{color:var(--ion-color-secondary);font-weight:700}app-membership .w-100{width:100%}app-membership .d-flex{display:flex}app-membership .check-icon{color:#fff;font-size:30px}app-membership .check-icon-benefit{color:var(--ion-color-primary)}app-membership .benefits{padding-bottom:25px}app-membership .active{border:2px solid var(--ion-color-secondary)}app-membership ion-content{--background: #F9F9F9 0% 0% no-repeat padding-box;--opacity: 1}app-membership .text-center{text-align:center}app-membership .titleContainer{padding-left:15px}app-membership .amount{font-size:30px}app-membership .monthly{color:var(--ion-color-primary)}app-membership .btn-back-container{display:flex;align-items:center;justify-content:flex-start;padding-bottom:10px}app-membership .btn-back-container .dd-float-icon{font-size:20px;color:#203a4e;cursor:pointer;margin-right:.5rem}app-membership .btn-back-container p{font-size:12px;margin:0}app-membership .title{font-size:24px;font-weight:700;display:inline-block;color:#000}app-membership .subtitle{font-weight:700;letter-spacing:0}app-membership .h-100{height:100%}app-membership .informative_container{display:flex;justify-content:space-between;flex-direction:column;height:100%;padding:5px 20px 20px}app-membership .informative{line-height:1.5;letter-spacing:.8px;padding-top:10px;width:100%;color:#4e4e4e;display:flex;justify-content:space-between;flex-direction:column;height:100%}app-membership .image{text-align:center;padding-top:25px}app-membership .dd-float-icon{font-size:20px;cursor:pointer}app-membership ion-button.dd-ion-button{--border-radius: 10px}app-membership ion-button.dd-ion-button::part(native){box-shadow:0 0 20px -8px #19d7db}@media only screen and (min-width: 601px){app-membership .dd-form-wrapper{justify-content:center;display:flex}app-membership .btn-submit{height:64px;font-size:24px;text-transform:uppercase;font-weight:600}app-membership .main-container{width:536px}app-membership .dd-float-icon{font-size:25px}}app-membership .button-continue{font-size:24px;height:56px;text-transform:uppercase}@media only screen and (max-width: 700px){app-membership .dd-continue-button{display:flex;align-items:center;gap:10px}app-membership .btn-continue{width:100%}app-membership .btn-submit{min-height:46px}app-membership .button-continue{font-size:14px;height:45px}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.MembershipManagerService }, { type: i2.MembershipApiService }, { type: i3.FormBuilder }, { type: i4.DomSanitizer }]; }, propDecorators: { membership: [{
                type: Input
            }], userEmail: [{
                type: Input
            }], onPreviousStep: [{
                type: Output
            }], onNextStep: [{
                type: Output
            }], onAdjustView: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 