import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { first } from 'rxjs/operators';
import * as i1 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import { ButtonModule } from '@aztrix/components/button';
import { SpinnerModule } from '@aztrix/components/spinner';

class StripeCardComponent {
    constructor(_changeDetectorRef, _environment) {
        this._changeDetectorRef = _changeDetectorRef;
        this._environment = _environment;
        this.payedClicked = new EventEmitter();
        this.loading$ = new BehaviorSubject(false);
    }
    ngAfterViewInit() {
        this._environment
            .string$('STRIPE_API_KEY')
            .pipe(first((value) => !!value))
            .subscribe((stripeApiKey) => {
            this.stripe = Stripe(stripeApiKey);
            const elements = this.stripe.elements();
            this.card = elements.create('card', { hidePostalCode: true });
            this.card.mount(this.cardElement.nativeElement);
            this.card.addEventListener('change', ({ error }) => {
                this.cardErrors = error && error.message;
            });
        });
    }
    createPaymentMethod(billingDetails) {
        return __awaiter(this, void 0, void 0, function* () {
            const { paymentMethod, error } = yield this.stripe.createPaymentMethod({
                type: 'card',
                card: this.card,
                billing_details: billingDetails || {},
            });
            if (error) {
                this.cardErrors = error.code;
                this._changeDetectorRef.detectChanges();
            }
            else {
                return paymentMethod;
            }
        });
    }
}
StripeCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
StripeCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: StripeCardComponent, selector: "ax-stripe-card", inputs: { amount: "amount", description: "description" }, outputs: { payedClicked: "payedClicked" }, viewQueries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\n  <form>\n    <div #cardElement></div>\n  </form>\n\n  <div class=\"errors\">\n    <div class=\"c-property-edit__error\" *ngIf=\"cardErrors\">\n      <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n      <span>{{ 'stripe.' + cardErrors + '.error' | translate }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;padding:.5rem 1rem;border-radius:5px;min-height:56px;border:2px solid #7a8692;transition:border .4s cubic-bezier(.25,.8,.25,1)}:host:hover{border-color:#000000de}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-stripe-card', template: "<div class=\"container\">\n  <form>\n    <div #cardElement></div>\n  </form>\n\n  <div class=\"errors\">\n    <div class=\"c-property-edit__error\" *ngIf=\"cardErrors\">\n      <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n      <span>{{ 'stripe.' + cardErrors + '.error' | translate }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;padding:.5rem 1rem;border-radius:5px;min-height:56px;border:2px solid #7a8692;transition:border .4s cubic-bezier(.25,.8,.25,1)}:host:hover{border-color:#000000de}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.EnvironmentService }]; }, propDecorators: { amount: [{
                type: Input
            }], description: [{
                type: Input
            }], payedClicked: [{
                type: Output
            }], cardElement: [{
                type: ViewChild,
                args: ['cardElement']
            }] } });

class StripeCardModule {
}
StripeCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
StripeCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: StripeCardModule, declarations: [StripeCardComponent], imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, SpinnerModule], exports: [StripeCardComponent] });
StripeCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardModule, imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, SpinnerModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: StripeCardModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [StripeCardComponent],
                    imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, SpinnerModule],
                    exports: [StripeCardComponent],
                }]
        }] });

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

export { StripeCardComponent, StripeCardModule };
//# sourceMappingURL=aztrix-components-stripe-card.mjs.map
//# sourceMappingURL=aztrix-components-stripe-card.mjs.map
