ngx-sand-credit-cards
Version:
An angular custom credit card package module.
1 lines • 15.6 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgxSandCreditCardsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"NgxSandCreditCardsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ngx-sand-credit-cards","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":10,"character":15},"useExisting":{"__symbolic":"reference","name":"NgxSandCreditCardsComponent"},"multi":true}],"template":"<div class=\"wrapper\">\r\n\r\n <div class=\"card-wrapper\" [ngClass]=\"{transform: showBack}\">\r\n\r\n <div class=\"card-front\">\r\n <div class=\"cover\">\r\n\r\n <div class=\"bank-name entry\">\r\n <span>{{bankName }}</span>\r\n </div>\r\n <div class=\" entry card-type\">\r\n <span>{{cardType }} </span>\r\n </div>\r\n <div class=\" entry chip-placeholder\"></div>\r\n <div class=\" entry card-name\">\r\n <span>{{cardName}}</span>\r\n </div>\r\n <div class=\" entry card-number\" [ngClass]=\"{makeVisible: selector[1]}\">\r\n <span>{{ cardNumber || '**** **** **** ****'}}</span>\r\n </div>\r\n <div class=\" entry card-holder-name\" [ngClass]=\"{makeVisible: selector[0]}\">\r\n <span>{{name||'Your Name Here'}}</span>\r\n </div>\r\n <div class=\" entry expiry\" [ngClass]=\"{makeVisible: selector[2]}\">\r\n <span>{{expiryMonth || '10'}}</span> / <span>{{expiryYear || '24'}}</span>\r\n </div>\r\n <div class=\" entry issuer\">\r\n <span><img [src]=\"providerLogo\" alt=\"Provider Logo\" width=\"35px\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-front card-back\">\r\n <div class=\"cover\">\r\n <div class=\"black-stripe\"></div>\r\n <div class=\" entry signature makeVisible\"></div>\r\n <div class=\" entry cvv\" [ngClass]=\"{makeVisible: selector[3]}\">\r\n <span>{{cvv|| '007'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"form-wrapper\">\r\n\r\n <div class=\"form-group\">\r\n <div class=\"label\"> - </div>\r\n <div class=\"flt-rt\">\r\n <input type=\"radio\" name=\"cardType\" (change)=\"changeCardType($event)\" value=\"debit\">\r\n <label for=\"male\"> Debit Card </label>\r\n <input type=\"radio\" name=\"cardType\" (change)=\"changeCardType($event)\" value=\"credit\">\r\n <label for=\"female\"> Credit Card</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <div class=\"label\"> Select card option </div>\r\n <div class=\"flt-rt\">\r\n <select class=\"form-control\" [(ngModel)]=\"providerType\" (change)=\"changeProvider()\">\r\n <option [ngValue]=\"null\" selected disabled>Select Category</option>\r\n\r\n <option *ngFor=\"let item of cardProviders\" [value]=\"item.id\">{{item.name}}</option>\r\n\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <div class=\"label\"> Card number </div>\r\n <div class=\"flt-rt\">\r\n <input type=\"tel\" credit-card [(ngModel)]=\"cardNumber\" id=\"cardNumber\"\r\n placeholder=\"Enter Your Card Number\" (click)=\"onClick(1)\" class=\"form-control\">\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <div class=\"label\"> Card holder name </div>\r\n <div class=\"flt-rt\">\r\n <input type=\"text\" autocomplete=false autocapitalize=\"true\" placeholder=\"Enter Card Holder Name\"\r\n [(ngModel)]=\"name\" (click)=\"onClick(0)\" class=\"form-control\">\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <div class=\"label\"> Expiry date </div>\r\n <div class=\"flt-rt\">\r\n <div class=\"month\">\r\n <select class=\"form-control\" [(ngModel)]=\"expiryMonth\" (change)=\"changeMonth()\"\r\n (click)=\"onClick(2)\">\r\n <option selected value=\"00\" selected>Month</option>\r\n <option value=\"01\">Jan</option>\r\n <option value=\"02\">Feb</option>\r\n <option value=\"03\">Mar</option>\r\n <option value=\"04\">Apr</option>\r\n <option value=\"05\">May</option>\r\n <option value=\"06\">Jun</option>\r\n <option value=\"07\">Jul</option>\r\n <option value=\"08\">Aug</option>\r\n <option value=\"09\">Sep</option>\r\n <option value=\"10\">Oct</option>\r\n <option value=\"11\">Nov</option>\r\n <option value=\"12\">Dec</option>\r\n </select>\r\n </div>\r\n <div class=\"year\">\r\n <!-- <input type=\"text\" placeholder=\"Expiry Year\" [(ngModel)]=\"expiryYear\" (click)=\"onClick(2)\"\r\n class=\"form-control\"> -->\r\n <select class=\"form-control\" [(ngModel)]=\"expiryYear\" (change)=\"changeYear()\" (click)=\"onClick(2)\">\r\n <option selected>Year</option>\r\n <option value=\"21\">2021</option>\r\n <option value=\"22\">2022</option>\r\n <option value=\"23\">2023</option>\r\n <option value=\"24\">2024</option>\r\n <option value=\"25\">2025</option>\r\n <option value=\"26\">2026</option>\r\n <option value=\"27\">2027</option>\r\n <option value=\"28\">2028</option>\r\n <option value=\"29\">2029</option>\r\n <option value=\"30\">2030</option>\r\n <option value=\"31\">2031</option>\r\n <option value=\"32\">2032</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group\">\r\n <div class=\"label\"> Cvv number </div>\r\n <div class=\"flt-rt\">\r\n <input type=\"number\" [(ngModel)]=\"cvv\" maxlength=\"3\" id=\"cvv\" placeholder=\"cvv\" (click)=\"onClick(3)\"\r\n class=\"form-control\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>","styles":["*{box-sizing:border-box;font-family:Consolas,Courier,monospace}.wrapper .card-wrapper{height:240px;margin:0 auto;perspective:1000px;position:relative;transform-style:preserve-3d;transition:all .4s linear;width:380px}.wrapper .card-wrapper .card-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:#00a1ff;border-radius:14.5px;box-shadow:0 0 20px rgba(0,0,0,.2);color:#fff;height:100%;left:0;overflow:hidden;padding:5%;position:absolute;top:0;transform-style:preserve-3d;width:100%}.wrapper .card-wrapper .card-front .cover{height:100%;position:relative}.wrapper .card-wrapper .card-front .cover .entry{display:inline-block;position:absolute}.wrapper .card-wrapper .card-front .cover .makeVisible{opacity:1!important}.wrapper .card-wrapper .card-front .cover .black-stripe{background-color:#000;display:block;height:20%;left:0;position:fixed;top:13%;width:100%}.wrapper .card-wrapper .card-front .cover .card-type{right:0}.wrapper .card-wrapper .card-front .cover .chip-placeholder{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9Ijc2IiB2aWV3Qm94PSIwIDAgMTAwIDc2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48ZGVmcz48bGluZWFyR3JhZGllbnQgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSIgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNGM0QwOEYiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkFENzY2IiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNOTIuNzI3IDc1LjQ1NWgtODUuNDU1Yy00IDAtNy4yNzMtMy4yNzMtNy4yNzMtNy4yNzN2LTYwLjkwOWMwLTQgMy4yNzMtNy4yNzMgNy4yNzMtNy4yNzNoODUuNDU1YzQgMCA3LjI3MyAzLjI3MyA3LjI3MyA3LjI3M3Y2MC45MDljMCA0LTMuMjczIDcuMjczLTcuMjczIDcuMjczIiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0iTTcyLjEyMyAyOC40ODVoMjcuODc4di0xLjgxOGgtMjkuNjQ4Yy0uOTY1IDAtMS44MzIuNjAxLTIuMTcyIDEuNTA0LTIuMjg3IDYuMDcyLTIuNDMzIDEyLjU5NC0uNDM4IDE5Ljg0Mi40NTUgMS42NTQuNDM1IDMuNC0uMSA1LjAzLTIuMDM2IDYuMTk1LTcuNzc5IDE5Ljk4OC0xOC41NTEgMTkuOTg4LTExLjAwOCAwLTE2LjA5Ni0xNS42OTktMTcuMzM0LTIxLjk1Mi0uMTU1LS43ODQtLjEyMi0xLjU5Mi4xMDctMi4zNTcgMS42OTUtNS42NDggMi4wOTQtMTAuNjQtLjAxNi0xOS41OS0uMjA1LS44Ny0uMTgyLTEuNzgzLjA0OC0yLjY0NiA0LjQ4LTE2Ljc1NSAxMi44ODItMjAuMTQ3IDEyLjk2NS0yMC4xNzkuMzU2LS4xMzIuNTkzLS40NzIuNTkzLS44NTJ2LTUuNDU1aC0xLjgxOHYzLjc3NmMwIC42NS0uMzMyIDEuMjUyLS44ODQgMS41OTYtMi44MDMgMS43NDItOC45MDQgNi45MzYtMTIuNTU3IDIwLjQ1Ni0uMTguNjY4LS43ODEgMS4xMzYtMS40NzMgMS4xMzNsLTI4LjcyMi0uMTM5djEuODE4bDI3LjQxNi4xMzNjMS40NjguMDA3IDIuNzM1IDEuMDQxIDMuMDM3IDIuNDc4IDEuNDE2IDYuNzQxIDEuMjE5IDExLjAzOS4wODIgMTUuNDU4LS4zMTYgMS4yMy0xLjQyIDIuMDk2LTIuNjkgMi4xMDlsLTI3Ljg0NC4yN3YxLjgxOWwyOC42MDUtLjI3OGMuNjkzLS4wMDcgMS4yOTYuNDczIDEuNDM1IDEuMTUyIDEuNDQyIDcuMDQxIDYuODg3IDIzLjA3IDE5LjA1IDIzLjA3IDYuMzY4IDAgMTIuMDYyLTQuMjUgMTYuNDY3LTEyLjI5IDIuNjQ0LTQuODI4IDQuMDY3LTkuNTkxIDQuNTQxLTExLjM0NmgyOS45MDF2LTEuODE4aC0yOC4wMTZjLTEuMTU4IDAtMi4xODMtLjc3Mi0yLjQ4OS0xLjg4OS0xLjY5Mi02LjE2NC0xLjc2MS0xMS43NTUtLjItMTYuOTU5LjM3MS0xLjIzNSAxLjUzOC0yLjA2MSAyLjgyNy0yLjA2MXptLTE3LjE1LTIxLjkxNGMuMDQ1LjAyMiA0LjUxOSAyLjMyMiA5LjI1MyAxMC4wNDEuMTcyLjI4LjQ3LjQzNC43NzYuNDM0LjE5OCAwIC4zOTktLjA2NC41NzEtLjIwMi4zNjUtLjI5Mi40MTYtLjgzNy4xNzItMS4yMzUtMy41Ny01LjgwNS03LjAyNC04LjcxLTguNzc1LTkuOTMxLS40My0uMjk5LS42OC0uNzkyLS42OC0xLjMxNXYtNC4zNjNoLTEuODE4djUuNzU4YzAgLjM0NS4xOTUuNjU5LjUwMi44MTN6IiBmaWxsPSIjMEMwMjAwIi8+PC9zdmc+);background-repeat:no-repeat;background-size:contain;height:26.36364px;left:10%;top:20%;width:41.42857px}.wrapper .card-wrapper .card-front .cover .card-name{left:40%;top:40%}.wrapper .card-wrapper .card-front .cover .card-number{left:30%;opacity:.5;top:60%;transition:opacity .3s}.wrapper .card-wrapper .card-front .cover .card-holder-name{bottom:0;opacity:.5;transition:opacity .3s}.wrapper .card-wrapper .card-front .cover .expiry{bottom:0;opacity:.5;right:25%;transition:opacity .3s}.wrapper .card-wrapper .card-front .cover .issuer{bottom:0;right:0}.wrapper .card-wrapper .card-front .cover .signature{background:repeating-linear-gradient(.1deg,#fff 20%,#fff 40%,#fea 0,#fea 44%,#fff 0);height:20%;top:35%;width:70%}.wrapper .card-wrapper .card-front .cover .cvv{height:20%;left:60%;top:45%}.wrapper .card-wrapper .card-front .cover .cvv span{color:#000;font-weight:bolder}.wrapper .card-wrapper .card-back{transform:rotateY(180deg)}.wrapper .form-wrapper{margin:0 auto;overflow:auto;width:40%;width:45%}.wrapper .form-wrapper .form-group{float:left;padding:2% 0;width:100%}.wrapper .form-wrapper .form-group .label{float:left;width:40%}.wrapper .form-wrapper .form-group .form-control{border:1px solid #bcbcbc;border-radius:3px;padding:8px;width:100%}.wrapper .form-wrapper .form-group .month{float:left;width:30%}.wrapper .form-wrapper .form-group .year{float:left;margin-left:10%;width:30%}.wrapper .form-wrapper .form-group #cvv{width:20%}.wrapper .flt-rt{float:right;width:60%}.wrapper .transform{transform:rotateY(180deg)}.wrapper #cvv:valid{color:green;font-weight:bolder}"]}]}],"members":{"bankName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"cardName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"valueSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"changeMonth":[{"__symbolic":"method"}],"changeYear":[{"__symbolic":"method"}],"changeProvider":[{"__symbolic":"method"}],"changeCardType":[{"__symbolic":"method"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":131,"character":3},"arguments":["click"]}]}],"blur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":136,"character":3},"arguments":["blur",["$event"]]}]}],"focus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":140,"character":3},"arguments":["focus",["$event"]]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":147,"character":3},"arguments":["document:click"]}]}]}},"NgxSandCreditCardsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxSandCreditCardsComponent"},{"__symbolic":"reference","name":"creditCardDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxSandCreditCardsComponent"},{"__symbolic":"reference","name":"creditCardDirective"}]}]}],"members":{}},"creditCardDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[credit-card]"}]}],"members":{"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":6,"character":5},"arguments":["input",["$event"]]}]}]}}},"origins":{"NgxSandCreditCardsService":"./lib/ngx-sand-credit-cards.service","NgxSandCreditCardsComponent":"./lib/ngx-sand-credit-cards/ngx-sand-credit-cards.component","NgxSandCreditCardsModule":"./lib/ngx-sand-credit-cards.module","creditCardDirective":"./lib/directives/space.directive"},"importAs":"ngx-sand-credit-cards"}