ngx-credit-card-br
Version:
Simple credit card component for Angular.io (2+).
2 lines • 8.59 kB
JavaScript
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("moment-mini"),require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("ngx-credit-card-br",["exports","moment-mini","@angular/core","@angular/common","@angular/forms"],r):r(e["ngx-credit-card-br"]={},e.moment_,e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,r,n,t,a){"use strict";function i(t,a){var i,o,c,e,d={label:0,sent:function(){if(1&c[0])throw c[1];return c[1]},trys:[],ops:[]};return e={next:r(0),"throw":r(1),"return":r(2)},"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function r(r){return function(e){return function n(e){if(i)throw new TypeError("Generator is already executing.");for(;d;)try{if(i=1,o&&(c=2&e[0]?o["return"]:e[0]?o["throw"]||((c=o["return"])&&c.call(o),0):o.next)&&!(c=c.call(o,e[1])).done)return c;switch(o=0,c&&(e=[2&e[0],c.value]),e[0]){case 0:case 1:c=e;break;case 4:return d.label++,{value:e[1],done:!1};case 5:d.label++,o=e[1],e=[0];continue;case 7:e=d.ops.pop(),d.trys.pop();continue;default:if(!(c=0<(c=d.trys).length&&c[c.length-1])&&(6===e[0]||2===e[0])){d=0;continue}if(3===e[0]&&(!c||e[1]>c[0]&&e[1]<c[3])){d.label=e[1];break}if(6===e[0]&&d.label<c[1]){d.label=c[1],c=e;break}if(c&&d.label<c[2]){d.label=c[2],d.ops.push(e);break}c[2]&&d.ops.pop(),d.trys.pop();continue}e=a.call(t,d)}catch(r){e=[6,r],o=0}finally{i=c=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([r,e])}}}var o=r,c=function(){function e(e){this.changeDetector=e}return e.prototype.ngOnInit=function(){this.initExpirationOptions()},e.prototype.getPhoneMask=function(e){return e&&14<e.length?"(99) 99999-9999":"(99) 9999-9999"},e.prototype.getDocumentMask=function(e){return"CNPJ"==e?"99.999.999/9999-99":"999.999.999-99"},e.prototype.initExpirationOptions=function(){return function e(r,o,c,d){return new(c||(c=Promise))(function(e,n){function t(e){try{i(d.next(e))}catch(r){n(r)}}function a(e){try{i(d["throw"](e))}catch(r){n(r)}}function i(r){r.done?e(r.value):new c(function(e){e(r.value)}).then(t,a)}i((d=d.apply(r,o||[])).next())})}(this,void 0,void 0,function(){var r,n,t;return i(this,function(e){for(r={months:[],years:[]},n=1;n<=12;n++)r.months.push(this.pad(n));for(t=0;t<=30;t++)r.years.push(o().add(t,"years").format("YYYY"));return this.expirationMonths=r.months,this.expirationYears=r.years,this.changeDetector.detectChanges(),[2]})})},e.prototype.pad=function(e){return e<10?"0"+e.toString():e.toString()},e.decorators=[{type:n.Component,args:[{selector:"ngx-credit-card-br",template:'<article credit-card max-width-container *ngIf="card">\n <article card-back>\n <section card-stripe></section>\n </article>\n <article card-front>\n <form #cardForm="ngForm" *ngIf="!showBack">\n <label>\n Número do cartão\n </label>\n <input\n required\n type="tel"\n autocomplete="cc-number"\n card-number\n name="cardNumber"\n mask="9999 9999 9999 9999"\n [(ngModel)]="card.number"\n placeholder="1234 5678 9101 1112"\n length="16"\n />\n <section cardholder-container>\n <label>\n Nome do titular\n </label>\n <input\n required\n type="text"\n autocomplete="cc-name"\n card-holder\n name="holderName"\n [(ngModel)]="card.holder.name"\n placeholder="Ada Lovelace"\n />\n </section>\n\n <section exp-container>\n <label>\n Validade\n </label>\n <select\n required\n card-month\n name="expMonth"\n [(ngModel)]="card.expirationMonth"\n autocomplete="cc-exp-month"\n >\n <option\n *ngFor="let month of expirationMonths; let index = index"\n [value]="month"\n [selected]="index == 0"\n >\n {{ month }}\n </option>\n </select>\n <select\n required\n card-year\n name="expYear"\n [(ngModel)]="card.expirationYear"\n autocomplete="cc-exp-year"\n >\n <option\n *ngFor="let year of expirationYears; let index = index"\n [value]="year"\n [selected]="index == 0"\n >\n {{ year }}\n </option>\n </select>\n </section>\n\n <section cvc-container>\n <label for="card-cvc">\n CVV:\n </label>\n <input\n required\n card-cvc\n autocomplete="cc-csc"\n placeholder="XXXX"\n name="cardCvv"\n [(ngModel)]="card.cvv"\n type="tel"\n min-length="3"\n max-length="4"\n />\n <p>\n <span> </span>\n </p>\n </section>\n </form>\n </article>\n</article>\n',changeDetection:n.ChangeDetectionStrategy.Default,styles:["[credit-card]{padding-bottom:2.5rem;max-width:400px;margin:auto}[credit-card] *{transition-property:all;transition-duration:.3s}[credit-card] [card-cvc]{width:6rem;margin-bottom:0}[credit-card] [card-back],[credit-card] [card-front]{background:#1e88e5;background:linear-gradient(to bottom,#1e88e5 0,#1e99e5 100%);max-width:400px;min-height:230px;border-radius:.6rem;padding:2rem 3rem 0;font-size:1rem;letter-spacing:1px;font-weight:300;color:#fff;box-shadow:1px 1px .2rem rgba(0,0,0,.2)}[credit-card] [card-front]{z-index:999;margin-top:-25rem;margin-left:-2rem}[credit-card] [card-back]{z-index:-2;padding:2rem 0 0;margin-right:-2rem}[credit-card] [card-extra-info] [field] select,[credit-card] [card-extra-info] [field][full-width],[credit-card] [card-holder],[credit-card] [card-number],[credit-card] [cvc-container] label{width:100%}[credit-card] [card-stripe]{width:100%;height:5.5rem;background-color:rgba(0,0,0,.5);right:0}[credit-card] [card-token]{display:none}[credit-card] [card-month]{width:37%}[credit-card] [card-year]{width:53%;float:right}[credit-card] [cardholder-container]{width:60%;display:inline-block}[credit-card] [cvc-container]{box-sizing:border-box;text-align:right}[credit-card] [card-button]{border:.2rem solid #fff;display:block;padding:1rem;color:#fff;float:right;border-radius:3rem;background-color:#1e88e5}[credit-card] [next-button]{margin-top:2rem}[credit-card] [save-button]{border-radius:50%;font-weight:700;margin-top:-1rem}[credit-card] [card-brand]{float:left;margin-left:.6rem}[credit-card] [card-brand-select]{width:20.8rem}[credit-card] [card-brand-pic]{opacity:0;width:4.2rem;height:2rem}[credit-card] [card-brand-pic][visible=true]{opacity:1}[credit-card] [cvc-container] p{font-size:.8rem;text-transform:uppercase;letter-spacing:.05rem;color:#fff;font-weight:700}[credit-card] [cvc-container] p span{max-width:80px;display:inline-block;padding-top:.5rem}[credit-card] [exp-container]{margin-left:1rem;width:32%;display:inline-block}[credit-card] input,[credit-card] select{border:none;outline:0;background-color:#fff;font-weight:700;height:3rem;line-height:3rem;padding:0 1rem;margin:0 0 .8rem;color:#1e88e5;font-size:1rem;box-sizing:border-box;border-radius:.4rem;letter-spacing:.07rem}[credit-card] select{padding:0;text-align:center}[credit-card] select option{background-color:#fff;font-weight:700;color:#444}[credit-card] input::-webkit-input-placeholder{color:#79c2f0}[credit-card] input::-moz-placeholder{color:#79c2f0}[credit-card] input:-ms-input-placeholder{color:#79c2f0}[credit-card] input:-moz-placeholder{color:#79c2f0}[credit-card] label{display:block;margin:0 auto .7rem;color:#fff;font-size:1rem;font-weight:700;text-transform:uppercase}[credit-card] [card-extra-info] input{margin-bottom:0}[credit-card] [card-extra-info] [field]{display:inline-block;margin-right:1.5%;margin-left:1.5%;width:46%;height:6rem}[credit-card] [card-extra-info] [field][email] input,[credit-card] [card-extra-info] [field][email] label{display:inline-block}[credit-card] [card-extra-info] [field][email] label{width:20%}[credit-card] [card-extra-info] [field][email] input{width:75%}"]}]}],e.ctorParameters=function(){return[{type:n.ChangeDetectorRef}]},e.propDecorators={card:[{type:n.Input,args:["card"]}],form:[{type:n.ViewChild,args:["cardForm"]}]},e}(),d=[c],l=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule,a.FormsModule],declarations:[d],exports:[d]}]}],e}();e.NgxCreditCardBrComponent=c,e.NgxCreditCardBrModule=l,e.ɵa=d,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-credit-card-br.umd.min.js.map