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 * as i0 from "@angular/core";
import * as i1 from "../../common/services/managers/membership/membership-manager.service";
import * as i2 from "@angular/forms";
import * as i3 from "@ionic/angular";
import * as i4 from "@angular/common";
import * as i5 from "@thiagoprz/ionic-input-mask";
export class MembershipComponent {
    constructor(_membershipManager, formBuilder) {
        this._membershipManager = _membershipManager;
        this.formBuilder = formBuilder;
        this.onPreviousStep = new EventEmitter();
        this.onNextStep = 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';
    }
    changeToPlan() {
        this.membership = 'plan';
    }
    changeToTdc() {
        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.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
MembershipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MembershipComponent, selector: "app-membership", inputs: { membership: "membership" }, outputs: { onPreviousStep: "onPreviousStep", onNextStep: "onNextStep" }, ngImport: i0, template: "<div *ngIf=\"membership === 'start'\" class=\"h-100 informative_container\">\r\n    <div class=\"informative\">\r\n        <div class=\"btn-back-container\" >\r\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"previousStep()\"></ion-icon>\r\n            <p>Atr\u00E1s</p>\r\n        </div>\r\n        <div class=\"image\">\r\n            <img [src]=\"gift_img\">\r\n        </div>\r\n\r\n        <div class=\"footer\">\r\n            <div class=\"text-center\" style=\"padding-bottom: 30px;\">\r\n                <span style=\"font-weight: bold;\">Por tu suscripci\u00F3n obtienes</span>\r\n            </div>\r\n            <div class=\"text-center\">\r\n                <span style=\"font-weight: bold; font-size: 30px;\">\u00A12 Meses Gratis!</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dd-continue-button\">\r\n            <div class=\"btn-continue\">\r\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"changeToPlan();\" expand=\"block\">Continuar</ion-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"membership === 'plan'\" class=\"h-100 informative_container\">\r\n    <div class=\"informative\">\r\n        <div class=\"btn-back-container\" >\r\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"changeToStart()\"></ion-icon>\r\n            <p>Atr\u00E1s</p>\r\n        </div>\r\n        <div class=\"titleContainer\"><span class=\"title\">Elige tu plan</span></div>\r\n        <div class=\"titleContainer\" style=\"padding-top: 20px; padding-bottom: 10px;\"><span class=\"subtitle\">Marca el plan que quieres suscribir</span></div>\r\n        <div *ngFor=\"let plan of plans; let index\">\r\n            <ion-card button=true class=\"card\" (click)=\"selectedCard = index\" [class.active]=\"selectedCard === index\">\r\n                <ion-card-header>\r\n                    <ion-row>\r\n                        <ion-col size=\"10\">\r\n                            <ion-card-subtitle>{{plan.name}}</ion-card-subtitle>\r\n                            <ion-card-title class=\"monthly\"><span class=\"amount\">${{plan.amount | number : '1.0-0'}}</span> / {{getPeriod(plan.payment_period)}}</ion-card-title>\r\n                        </ion-col>\r\n                        <ion-col>\r\n                            <ion-icon *ngIf=\"selectedCard === index\" class=\"check-icon\" name=\"checkmark-circle\"></ion-icon>\r\n                        </ion-col>\r\n                    </ion-row>\r\n                </ion-card-header>\r\n\r\n                <ion-card-content>{{plan.description}}</ion-card-content>\r\n\r\n                <ion-card-content class=\"benefits\" *ngFor=\"let benefit of plan.membership_benefits\">\r\n                    <ion-col size=\"1\">\r\n                        <ion-icon class=\"check-icon-benefit\" name=\"checkmark-circle\"></ion-icon>\r\n                    </ion-col>\r\n                    <ion-col size=\"11\">\r\n                        <span class=\"subtitle\" style=\"color:white\">{{benefit.description}}</span>\r\n                    </ion-col>\r\n                </ion-card-content>\r\n            </ion-card>\r\n        </div>\r\n        <div class=\"footer\">\r\n            <div class=\"text-center\" style=\"padding-bottom: 15px; padding-top: 30px;\">\r\n                <span style=\"font-weight: bold;\">Y obtendr\u00E1s</span>\r\n            </div>\r\n            <div class=\"text-center\">\r\n                <span style=\"font-weight: bold; font-size: 30px;\">\u00A12 Meses Gratis!</span>\r\n            </div>\r\n        </div>\r\n        <div class=\"dd-continue-button\">\r\n            <div class=\"btn-continue\">\r\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"changeToTdc();\" expand=\"block\">Continuar</ion-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"membership === 'tdc'\" class=\"h-100 informative_container\">\r\n    <div class=\"informative\">\r\n        <div class=\"btn-back-container\" >\r\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"changeToPlan()\"></ion-icon>\r\n            <p>Atr\u00E1s</p>\r\n        </div>\r\n        <div class=\"titleContainer\"><span class=\"title\">Ingresa tu tarjeta</span></div>\r\n\r\n        <div class=\"image\" style=\"padding-bottom: 20px;\">\r\n            <img [src]=\"tdc_img\">\r\n        </div>\r\n        <form [formGroup]=\"form\">\r\n            <div class=\"input-question\">\r\n                <div class=\"label-card\">\r\n                    <ion-label>Nombre del propietario</ion-label>\r\n                </div>\r\n                <ion-item class=\"ion-no-padding none\">\r\n                <ion-input\r\n                  #name\r\n                  formControlName=\"name\" \r\n                  type=\"text\"\r\n                  placeholder=\"Nombre en la tarjeta\"\r\n                ></ion-input>\r\n                <ion-icon class=\"ion-align-self-center credit-card-icon\" name=\"person\" slot=\"start\"></ion-icon>\r\n                </ion-item>\r\n            </div>\r\n\r\n\r\n            <div class=\"input-question\">\r\n                <div class=\"label-card\">\r\n                    <ion-label>N\u00FAmero de la tarjeta</ion-label>\r\n                </div>\r\n                <ion-item class=\"ion-no-padding none\">\r\n                <ion-input\r\n                  #number\r\n                  formControlName=\"number\" \r\n                  type=\"text\"\r\n                  placeholder=\"1234 5678 9012 3456\"\r\n                  mask=\"**** **** **** ****\"\r\n                  maxlength=\"19\"\r\n                ></ion-input>\r\n                <ion-icon class=\"ion-align-self-center credit-card-icon\" name=\"card\" slot=\"start\"></ion-icon>\r\n                </ion-item>\r\n            </div>\r\n\r\n            <ion-row>\r\n                <ion-col size=\"6\">\r\n                    <div class=\"input-question\">\r\n                        <div class=\"label-card\">\r\n                            <ion-label>Caducidad</ion-label>\r\n                        </div>\r\n                        <ion-item class=\"ion-no-padding none\">\r\n                            <ion-input\r\n                              class=\"ion-text-start \"\r\n                              placeholder=\"MM/YYYY\"\r\n                              formControlName=\"date\" \r\n                              mask=\"**/****\"\r\n                              maxlength=\"7\" \r\n                            ></ion-input>\r\n                            <ion-icon class=\"ion-align-self-center pointer\" name=\"calendar-outline\" slot=\"end\"></ion-icon>\r\n                        </ion-item>\r\n                    </div>\r\n                </ion-col>\r\n                <ion-col size=\"1\">\r\n                </ion-col>\r\n                <ion-col>\r\n                    <div class=\"input-question\">\r\n                        <div class=\"label-card\">\r\n                            <ion-label>C\u00F3digo CCV</ion-label>\r\n                        </div>\r\n                        <ion-item class=\"ion-no-padding none\">\r\n                        <ion-input\r\n                          #ccv\r\n                          type=\"text\" \r\n                          pattern=\"\\d*\" \r\n                          maxlength=\"3\"\r\n                          formControlName=\"ccv\"\r\n                          placeholder=\"123\"\r\n                          style=\"text-align: center;\"\r\n                        ></ion-input>\r\n                        </ion-item>\r\n                    </div>\r\n                </ion-col>\r\n            </ion-row>\r\n\r\n        </form>\r\n        <div class=\"dd-continue-button\">\r\n            <div class=\"btn-continue\">\r\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"verifyTdc();\" expand=\"block\">Verificar</ion-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\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 .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: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { type: i3.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { type: i3.IonRow, selector: "ion-row" }, { type: i3.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: i3.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { type: i3.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i3.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i5.IonicInputMaskDirective, selector: "[mask]" }], pipes: { "number": i4.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\">\r\n    <div class=\"informative\">\r\n        <div class=\"btn-back-container\" >\r\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"previousStep()\"></ion-icon>\r\n            <p>Atr\u00E1s</p>\r\n        </div>\r\n        <div class=\"image\">\r\n            <img [src]=\"gift_img\">\r\n        </div>\r\n\r\n        <div class=\"footer\">\r\n            <div class=\"text-center\" style=\"padding-bottom: 30px;\">\r\n                <span style=\"font-weight: bold;\">Por tu suscripci\u00F3n obtienes</span>\r\n            </div>\r\n            <div class=\"text-center\">\r\n                <span style=\"font-weight: bold; font-size: 30px;\">\u00A12 Meses Gratis!</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dd-continue-button\">\r\n            <div class=\"btn-continue\">\r\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"changeToPlan();\" expand=\"block\">Continuar</ion-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"membership === 'plan'\" class=\"h-100 informative_container\">\r\n    <div class=\"informative\">\r\n        <div class=\"btn-back-container\" >\r\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"changeToStart()\"></ion-icon>\r\n            <p>Atr\u00E1s</p>\r\n        </div>\r\n        <div class=\"titleContainer\"><span class=\"title\">Elige tu plan</span></div>\r\n        <div class=\"titleContainer\" style=\"padding-top: 20px; padding-bottom: 10px;\"><span class=\"subtitle\">Marca el plan que quieres suscribir</span></div>\r\n        <div *ngFor=\"let plan of plans; let index\">\r\n            <ion-card button=true class=\"card\" (click)=\"selectedCard = index\" [class.active]=\"selectedCard === index\">\r\n                <ion-card-header>\r\n                    <ion-row>\r\n                        <ion-col size=\"10\">\r\n                            <ion-card-subtitle>{{plan.name}}</ion-card-subtitle>\r\n                            <ion-card-title class=\"monthly\"><span class=\"amount\">${{plan.amount | number : '1.0-0'}}</span> / {{getPeriod(plan.payment_period)}}</ion-card-title>\r\n                        </ion-col>\r\n                        <ion-col>\r\n                            <ion-icon *ngIf=\"selectedCard === index\" class=\"check-icon\" name=\"checkmark-circle\"></ion-icon>\r\n                        </ion-col>\r\n                    </ion-row>\r\n                </ion-card-header>\r\n\r\n                <ion-card-content>{{plan.description}}</ion-card-content>\r\n\r\n                <ion-card-content class=\"benefits\" *ngFor=\"let benefit of plan.membership_benefits\">\r\n                    <ion-col size=\"1\">\r\n                        <ion-icon class=\"check-icon-benefit\" name=\"checkmark-circle\"></ion-icon>\r\n                    </ion-col>\r\n                    <ion-col size=\"11\">\r\n                        <span class=\"subtitle\" style=\"color:white\">{{benefit.description}}</span>\r\n                    </ion-col>\r\n                </ion-card-content>\r\n            </ion-card>\r\n        </div>\r\n        <div class=\"footer\">\r\n            <div class=\"text-center\" style=\"padding-bottom: 15px; padding-top: 30px;\">\r\n                <span style=\"font-weight: bold;\">Y obtendr\u00E1s</span>\r\n            </div>\r\n            <div class=\"text-center\">\r\n                <span style=\"font-weight: bold; font-size: 30px;\">\u00A12 Meses Gratis!</span>\r\n            </div>\r\n        </div>\r\n        <div class=\"dd-continue-button\">\r\n            <div class=\"btn-continue\">\r\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"changeToTdc();\" expand=\"block\">Continuar</ion-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"membership === 'tdc'\" class=\"h-100 informative_container\">\r\n    <div class=\"informative\">\r\n        <div class=\"btn-back-container\" >\r\n            <ion-icon name=\"arrow-back-outline\" class=\"dd-float-icon\" [disabled]=\"loadingQuestionSave\" (click)=\"changeToPlan()\"></ion-icon>\r\n            <p>Atr\u00E1s</p>\r\n        </div>\r\n        <div class=\"titleContainer\"><span class=\"title\">Ingresa tu tarjeta</span></div>\r\n\r\n        <div class=\"image\" style=\"padding-bottom: 20px;\">\r\n            <img [src]=\"tdc_img\">\r\n        </div>\r\n        <form [formGroup]=\"form\">\r\n            <div class=\"input-question\">\r\n                <div class=\"label-card\">\r\n                    <ion-label>Nombre del propietario</ion-label>\r\n                </div>\r\n                <ion-item class=\"ion-no-padding none\">\r\n                <ion-input\r\n                  #name\r\n                  formControlName=\"name\" \r\n                  type=\"text\"\r\n                  placeholder=\"Nombre en la tarjeta\"\r\n                ></ion-input>\r\n                <ion-icon class=\"ion-align-self-center credit-card-icon\" name=\"person\" slot=\"start\"></ion-icon>\r\n                </ion-item>\r\n            </div>\r\n\r\n\r\n            <div class=\"input-question\">\r\n                <div class=\"label-card\">\r\n                    <ion-label>N\u00FAmero de la tarjeta</ion-label>\r\n                </div>\r\n                <ion-item class=\"ion-no-padding none\">\r\n                <ion-input\r\n                  #number\r\n                  formControlName=\"number\" \r\n                  type=\"text\"\r\n                  placeholder=\"1234 5678 9012 3456\"\r\n                  mask=\"**** **** **** ****\"\r\n                  maxlength=\"19\"\r\n                ></ion-input>\r\n                <ion-icon class=\"ion-align-self-center credit-card-icon\" name=\"card\" slot=\"start\"></ion-icon>\r\n                </ion-item>\r\n            </div>\r\n\r\n            <ion-row>\r\n                <ion-col size=\"6\">\r\n                    <div class=\"input-question\">\r\n                        <div class=\"label-card\">\r\n                            <ion-label>Caducidad</ion-label>\r\n                        </div>\r\n                        <ion-item class=\"ion-no-padding none\">\r\n                            <ion-input\r\n                              class=\"ion-text-start \"\r\n                              placeholder=\"MM/YYYY\"\r\n                              formControlName=\"date\" \r\n                              mask=\"**/****\"\r\n                              maxlength=\"7\" \r\n                            ></ion-input>\r\n                            <ion-icon class=\"ion-align-self-center pointer\" name=\"calendar-outline\" slot=\"end\"></ion-icon>\r\n                        </ion-item>\r\n                    </div>\r\n                </ion-col>\r\n                <ion-col size=\"1\">\r\n                </ion-col>\r\n                <ion-col>\r\n                    <div class=\"input-question\">\r\n                        <div class=\"label-card\">\r\n                            <ion-label>C\u00F3digo CCV</ion-label>\r\n                        </div>\r\n                        <ion-item class=\"ion-no-padding none\">\r\n                        <ion-input\r\n                          #ccv\r\n                          type=\"text\" \r\n                          pattern=\"\\d*\" \r\n                          maxlength=\"3\"\r\n                          formControlName=\"ccv\"\r\n                          placeholder=\"123\"\r\n                          style=\"text-align: center;\"\r\n                        ></ion-input>\r\n                        </ion-item>\r\n                    </div>\r\n                </ion-col>\r\n            </ion-row>\r\n\r\n        </form>\r\n        <div class=\"dd-continue-button\">\r\n            <div class=\"btn-continue\">\r\n                <ion-button class=\"btn-submit dd-ion-button\" color=\"primary\" (click)=\"verifyTdc();\" expand=\"block\">Verificar</ion-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\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 .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.FormBuilder }]; }, propDecorators: { membership: [{
                type: Input
            }], onPreviousStep: [{
                type: Output
            }], onNextStep: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 