2 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-lib/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.base.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/lib",
6 | "target": "es2015",
7 | "declaration": true,
8 | "inlineSources": true,
9 | "types": [],
10 | "lib": [
11 | "dom",
12 | "es2018"
13 | ]
14 | },
15 | "angularCompilerOptions": {
16 | "skipTemplateCodegen": true,
17 | "strictMetadataEmit": true,
18 | "enableResourceInlining": true
19 | },
20 | "exclude": [
21 | "src/test.ts",
22 | "**/*.spec.ts"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "downlevelIteration": true,
9 | "experimentalDecorators": true,
10 | "moduleResolution": "node",
11 | "importHelpers": true,
12 | "target": "es2015",
13 | "module": "es2020",
14 | "lib": [
15 | "es2018",
16 | "dom"
17 | ],
18 | "paths": {
19 | "ngx-interactive-paycard-lib": [
20 | "dist/ngx-interactive-paycard-lib"
21 | ],
22 | "ngx-interactive-paycard-lib/*": [
23 | "dist/ngx-interactive-paycard-lib/*"
24 | ]
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | "version": "0.2.0",
6 | "configurations": [
7 | {
8 | "type": "chrome",
9 | "request": "launch",
10 | "name": "Launch Chrome against localhost",
11 | "url": "http://localhost:4200",
12 | "webRoot": "${workspaceFolder}",
13 | "sourceMapPathOverrides": {
14 | "webpack:///ng://ngx-interactive-paycard/lib/*": "${workspaceFolder}/projects/ngx-interactive-paycard-lib/src/lib/*"
15 | },
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-demo/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /*
2 | This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
3 | It is not intended to be used to perform a compilation.
4 |
5 | To learn more about this file see: https://angular.io/config/solution-tsconfig.
6 | */
7 | {
8 | "files": [],
9 | "references": [
10 | {
11 | "path": "./projects/ngx-interactive-paycard-lib/tsconfig.lib.json"
12 | },
13 | {
14 | "path": "./projects/ngx-interactive-paycard-lib/tsconfig.spec.json"
15 | },
16 | {
17 | "path": "./projects/ngx-interactive-paycard-demo/tsconfig.app.json"
18 | },
19 | {
20 | "path": "./projects/ngx-interactive-paycard-demo/tsconfig.spec.json"
21 | }
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-demo/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-lib/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import { getTestBed } from '@angular/core/testing';
4 | import {
5 | BrowserDynamicTestingModule,
6 | platformBrowserDynamicTesting
7 | } from '@angular/platform-browser-dynamic/testing';
8 | import 'zone.js/dist/zone';
9 | import 'zone.js/dist/zone-testing';
10 |
11 | declare const require: any;
12 |
13 | // First, initialize the Angular testing environment.
14 | getTestBed().initTestEnvironment(
15 | BrowserDynamicTestingModule,
16 | platformBrowserDynamicTesting()
17 | );
18 | // Then we find all the tests.
19 | const context = require.context('./', true, /\.spec\.ts$/);
20 | // And load the modules.
21 | context.keys().map(context);
22 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to ngx-interactive-paycard
2 | All contributions are welcome! Here are some guidelines which help you to get started.
3 |
4 | ## Getting started
5 | If needed please check out one of the getting started guides about GitHub fork / pull requests workflow:
6 |
7 | * [Forking project](https://guides.github.com/activities/forking/)
8 | * [How to sync your fork](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork)
9 |
10 | ## Sending pull requests
11 | Before you start to work on a topic please create an issue and let's discuss what are you going to contribute. Pull requests can be sent against the `master` branch.
12 |
13 | ## Coding Guidelines
14 | In the project follows the [styleguide of Angular](https://angular.io/guide/styleguide).
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 |
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 |
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 |
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-lib/src/lib/interactive-paycard.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { BrowserModule } from '@angular/platform-browser';
5 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
6 |
7 | import { CardComponent } from './card/card.component';
8 | import { InteractivePaycardComponent } from './interactive-paycard.component';
9 | import { IfEveryChangesDirective } from './shared/if-every-changes.directive';
10 | import { IfUndefinedChangesDirective } from './shared/if-undefined-changes.directive';
11 |
12 | @NgModule({
13 | declarations: [InteractivePaycardComponent, CardComponent, IfUndefinedChangesDirective, IfEveryChangesDirective],
14 | imports: [
15 | FormsModule,
16 | CommonModule,
17 | BrowserAnimationsModule
18 | ],
19 | exports: [InteractivePaycardComponent]
20 | })
21 | export class InteractivePaycardModule { }
22 |
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-demo/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | // Protractor configuration file, see link for more information
3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
4 |
5 | const { SpecReporter } = require('jasmine-spec-reporter');
6 |
7 | /**
8 | * @type { import("protractor").Config }
9 | */
10 | exports.config = {
11 | allScriptsTimeout: 11000,
12 | specs: [
13 | './src/**/*.e2e-spec.ts'
14 | ],
15 | capabilities: {
16 | browserName: 'chrome',
17 | chromeOptions: {
18 | args: ['--headless', '--no-sandbox']
19 | }
20 | },
21 | directConnect: true,
22 | baseUrl: 'http://localhost:4200/',
23 | framework: 'jasmine',
24 | jasmineNodeOpts: {
25 | showColors: true,
26 | defaultTimeoutInterval: 30000,
27 | print: function() {}
28 | },
29 | onPrepare() {
30 | require('ts-node').register({
31 | project: require('path').join(__dirname, './tsconfig.json')
32 | });
33 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
34 | }
35 | };
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-lib/src/lib/shared/if-every-changes.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
2 |
3 | // Used by animations, see following issue for expanition:
4 | // https://github.com/angular/angular/issues/29439
5 | @Directive({
6 | selector: '[ifEveryChanges]'
7 | })
8 | export class IfEveryChangesDirective {
9 | private currentValue: any;
10 | private hasView = false;
11 |
12 | constructor(
13 | private viewContainer: ViewContainerRef,
14 | private templateRef: TemplateRef
2 |
51 |
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-lib/README.md:
--------------------------------------------------------------------------------
1 | # ngx-interactive-paycard
2 |
3 | A parameterizable animated credit card built with Angular.
4 | [See live demo here.](https://ngx-interactive-paycard.netlify.app/)
5 |
6 | # Using the library
7 | The library is published in Angular package format. To install the library run in the consumer project following command:
8 |
9 | ```bash
10 | npm install ngx-interactive-paycard
11 | ```
12 |
13 | Import the module of the paycard:
14 |
15 | ```javascript
16 | import { InteractivePaycardModule } from 'ngx-interactive-paycard';
17 |
18 | @NgModule({
19 | ...
20 | imports: [
21 | ...
22 | InteractivePaycardModule,
23 | ...
24 | ],
25 | ...
26 | })
27 | export class UsedModule { }
28 | ```
29 |
30 | To embed the card use the `
3 |
7 |
8 |
50 |
9 |
10 |
13 |
14 |
15 |
16 |
18 |
19 |
20 |
48 |
49 |
21 |
40 |
22 |
23 |
31 |
38 |
39 |
41 |
47 |
42 |
43 |
45 |
46 | For example `"#### #### #### ####"` is a pattern for Master or VISA cards. 38 | * `cardNumberMask`: Specifies which part of the card number should be masked. The masked characters are defined using `*` character the unmasked numbers are defined with `#` character. For example `"#### **** **** ####"` masks the middle of the card number. Note that it should have the same number of characters as the `cardNumberFormat` has. 39 | * `cardLabels`: Optional property to modify all labels in the card component. 40 | * `formLabels`: Optional property to modify all labels in form component. 41 | 42 | The output parameters are following: 43 | * `submitEvent`: It is fired if the Submit button is clicked. The event contains all the card data. 44 | * `changeCard`: It is fired if one of the card properties change. The event contains all the card data. 45 | * `changeCardNumber`: It is fired if the card number changes. The event contains the card number. 46 | 47 | An example for the usage can be found below. The example assumes, that the consumer `assets` folder contains the necessary images. 48 | 49 | ```html 50 |
2 |
77 |
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-lib/src/lib/card/card.component.ts:
--------------------------------------------------------------------------------
1 | import { animate, state, style, transition, trigger } from '@angular/animations';
2 | import { Component, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
3 |
4 | import { CardLabel } from '../shared';
5 | import { CardModel } from '../shared/card-model';
6 | import { FocusedElement } from '../shared/focused-element';
7 |
8 | @Component({
9 | selector: 'card',
10 | templateUrl: 'card.component.html',
11 | styleUrls: ['card.component.scss'],
12 | animations: [
13 | trigger('slideFadeUp', [
14 | state('in', style({ transform: 'translateY(0)' })),
15 | transition(':enter', [
16 | style({ transform: 'translateY(15px)', opacity: 0 }),
17 | animate('0.25s ease-in-out')
18 | ])
19 | ]),
20 | trigger('cardHolderFadeRight', [
21 | state('in', style({ transform: 'translate(0,0)' })),
22 | transition(':enter', [
23 | style({ transform: 'translateX(10px) rotate(45deg)', opacity: 0, position: 'absolute' }),
24 | animate('0.25s ease-in-out')
25 | ]),
26 | ]),
27 | trigger('cardHolderFadeUp', [
28 | state('in', style({ transform: 'translate(0,0)' })),
29 | transition(':enter', [
30 | style({ transform: 'translateY(15px)', opacity: 0, position: 'absolute' }),
31 | animate('0.25s ease-in-out')
32 | ]),
33 | ])
34 | ]
35 | })
36 | export class CardComponent implements OnInit, OnChanges {
37 | constructor() { }
38 |
39 | @Input() cardModel: CardModel;
40 | @Input() chipImgPath: string;
41 | @Input() logoImgPath: string;
42 | @Input() backBgImgPath: string;
43 | @Input() frontBgImgPath: string;
44 | @Input() cardNumberFormat: string;
45 | @Input() displayedCardNumber: string;
46 | @Input() focusedElement: FocusedElement;
47 | @Input() cardLabels: CardLabel;
48 |
49 | @ViewChild('cardNumber', { static: false }) cardNumberViewChild: ElementRef;
50 | @ViewChild('cardName', { static: false }) cardNameViewChild: ElementRef;
51 | @ViewChild('expireDate', { static: false }) expireDateViewChild: ElementRef;
52 |
53 | currentCardNumberPlaceholder: string[];
54 | cardHolderNamePlaceholder: string[];
55 | focusStyle = null;
56 |
57 | FocusedElement = FocusedElement; // This way the enum can be accessed in the template
58 |
59 | currentlyFocusedNativeElement: any;
60 |
61 | @HostListener('window:orientationchange', ['$event'])
62 | onOrientationChange() {
63 | if (this.currentlyFocusedNativeElement) {
64 | setTimeout(this.setFocusStyle, 50); // Workaround: if the orientation changes, the ViewChild won't be updated immediatelly
65 | }
66 | }
67 |
68 | ngOnInit() {
69 | this.currentCardNumberPlaceholder = this.cardNumberFormat.split('');
70 | this.cardHolderNamePlaceholder = Array(30).fill(''); // CardHolder name is handled the same way as the cardNumber
71 | }
72 |
73 | getIsNumberMasked(index: number): boolean {
74 | return this.displayedCardNumber[index] === '*';
75 | }
76 |
77 | // The selection of the card elements is handled here
78 | // The card flip based on the CVV is handled in the template directly
79 | ngOnChanges(changes: SimpleChanges) {
80 | for (const propName in changes) {
81 | if (propName === 'focusedElement') {
82 | if (changes[propName].currentValue != null) {
83 | // let focusedNativeElement;
84 | if (changes[propName].currentValue === FocusedElement.CardNumber) {
85 | this.currentlyFocusedNativeElement = this.cardNumberViewChild.nativeElement;
86 | } else if (changes[propName].currentValue === FocusedElement.CardName) {
87 | this.currentlyFocusedNativeElement = this.cardNameViewChild.nativeElement;
88 | } else if (changes[propName].currentValue === FocusedElement.ExpirationDate) {
89 | this.currentlyFocusedNativeElement = this.expireDateViewChild.nativeElement;
90 | }
91 | if (this.currentlyFocusedNativeElement) {
92 | this.focusStyle = {
93 | width: `${this.currentlyFocusedNativeElement.offsetWidth}px`,
94 | height: `${this.currentlyFocusedNativeElement.offsetHeight}px`,
95 | transform: `translateX(${this.currentlyFocusedNativeElement.offsetLeft}px) translateY(${this.currentlyFocusedNativeElement.offsetTop}px)`
96 | };
97 | }
98 | } else {
99 | this.focusStyle = null;
100 | }
101 | }
102 | }
103 | }
104 |
105 | private setFocusStyle = () => {
106 | this.focusStyle = {
107 | width: `${this.currentlyFocusedNativeElement.offsetWidth}px`,
108 | height: `${this.currentlyFocusedNativeElement.offsetHeight}px`,
109 | transition: 'none',
110 | transform: `translateX(${this.currentlyFocusedNativeElement.offsetLeft}px)
111 | translateY(${this.currentlyFocusedNativeElement.offsetTop}px)`
112 | };
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/projects/ngx-interactive-paycard-lib/src/lib/interactive-paycard.component.scss:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | &:focus {
4 | outline: none;
5 | }
6 | }
7 | .wrapper {
8 | min-height: 100vh;
9 | display: flex;
10 | padding: 50px 15px;
11 | @media screen and (max-width: 700px), (max-height: 500px) {
12 | flex-wrap: wrap;
13 | flex-direction: column;
14 | }
15 | }
16 |
17 | .card-form {
18 | max-width: 570px;
19 | margin: auto;
20 | width: 100%;
21 |
22 | @media screen and (max-width: 576px) {
23 | margin: 0 auto;
24 | }
25 |
26 | &__inner {
27 | background: #fff;
28 | box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
29 | border-radius: 10px;
30 | padding: 35px;
31 | padding-top: 180px;
32 |
33 | @media screen and (max-width: 480px) {
34 | padding: 25px;
35 | padding-top: 165px;
36 | }
37 | @media screen and (max-width: 360px) {
38 | padding: 15px;
39 | padding-top: 165px;
40 | }
41 | }
42 |
43 | &__row {
44 | display: flex;
45 | align-items: flex-start;
46 | @media screen and (max-width: 480px) {
47 | flex-wrap: wrap;
48 | }
49 | }
50 |
51 | &__col {
52 | flex: auto;
53 | margin-right: 35px;
54 |
55 | &:last-child {
56 | margin-right: 0;
57 | }
58 |
59 | @media screen and (max-width: 480px) {
60 | margin-right: 0;
61 | flex: unset;
62 | width: 100%;
63 | margin-bottom: 20px;
64 |
65 | &:last-child {
66 | margin-bottom: 0;
67 | }
68 | }
69 |
70 | &.-cvv {
71 | max-width: 150px;
72 | @media screen and (max-width: 480px) {
73 | max-width: initial;
74 | }
75 | }
76 | }
77 |
78 | &__group {
79 | display: flex;
80 | align-items: flex-start;
81 | flex-wrap: wrap;
82 |
83 | .card-input__input {
84 | flex: 1;
85 | margin-right: 15px;
86 |
87 | &:last-child {
88 | margin-right: 0;
89 | }
90 | }
91 | }
92 |
93 | &__button {
94 | width: 100%;
95 | height: 55px;
96 | background: #2364d2;
97 | border: none;
98 | border-radius: 5px;
99 | font-size: 22px;
100 | font-weight: 500;
101 | font-family: "Source Sans Pro", sans-serif;
102 | box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
103 | color: #fff;
104 | margin-top: 20px;
105 | cursor: pointer;
106 |
107 | @media screen and (max-width: 480px) {
108 | margin-top: 10px;
109 | }
110 | }
111 | }
112 |
113 | .card-list {
114 | margin-bottom: -130px;
115 |
116 | @media screen and (max-width: 480px) {
117 | margin-bottom: -120px;
118 | }
119 | }
120 |
121 | .card-input {
122 | margin-bottom: 20px;
123 | position: relative;
124 | &__label {
125 | font-size: 14px;
126 | margin-bottom: 5px;
127 | font-weight: 500;
128 | color: #1a3b5d;
129 | width: 100%;
130 | display: block;
131 | user-select: none;
132 | }
133 | &__input {
134 | width: 100%;
135 | height: 50px;
136 | border-radius: 5px;
137 | box-shadow: none;
138 | border: 1px solid #ced6e0;
139 | transition: all 0.3s ease-in-out;
140 | font-size: 18px;
141 | padding: 5px 15px;
142 | background: none;
143 | color: #1a3b5d;
144 | font-family: "Source Sans Pro", sans-serif;
145 |
146 | &:hover,
147 | &:focus {
148 | border-color: #3d9cff;
149 | }
150 |
151 | &:focus {
152 | box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35);
153 | }
154 | &.-select {
155 | -webkit-appearance: none;
156 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC");
157 | background-size: 12px;
158 | background-position: 90% center;
159 | background-repeat: no-repeat;
160 | padding-right: 30px;
161 | }
162 | }
163 | &__eye {
164 | display: inline-flex;
165 | position: absolute;
166 | width: 1em;
167 | height: 1em;
168 | font-size: 24px;
169 | border-radius: 50%;
170 | top: 35px;
171 | right: 10px;
172 | opacity: 0.75;
173 | color: #8c9cae;
174 | cursor: pointer;
175 | padding: 0;
176 | background: none;
177 | display: inline-flex;
178 | border: 2px solid currentColor;
179 | box-shadow: none;
180 | transition: all 0.3s ease-in-out;
181 |
182 | &:before {
183 | content: "";
184 | position: absolute;
185 | background: white;
186 | width: 0.35em;
187 | height: 0.35em;
188 | top: 6px;
189 | left: 6px;
190 | z-index: 2;
191 | border-radius: 50%;
192 | transform: scale(0.1);
193 | opacity: 0;
194 | transition: all 0.3s ease-in-out;
195 | transition-delay: 0.1s;
196 | }
197 |
198 | &:after {
199 | content: "";
200 | position: absolute;
201 | top: 3px;
202 | left: 3px;
203 | background: currentColor;
204 | width: 0.6em;
205 | height: 0.6em;
206 | border-radius: 50%;
207 | transform: scale(0.1);
208 | opacity: 0;
209 | transition: all 0.3s ease-in-out;
210 | }
211 |
212 | &:hover:not(:disabled),
213 | &.-active:not(:disabled) {
214 | color: #2364d2;
215 | opacity: 1;
216 | }
217 |
218 | &.-active {
219 | &::before,
220 | &::after {
221 | transform: scale(1);
222 | opacity: 1;
223 | }
224 | }
225 |
226 | &:disabled {
227 | cursor: not-allowed;
228 | opacity: 0.4;
229 | }
230 | }
231 | }
232 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ngx-interactive-paycard
2 |
3 | A parameterizable animated payment card built with Angular.
4 | [See live demo here.](https://ngx-interactive-paycard.netlify.app/)
5 |
6 |
3 |
4 |
61 |
5 | 
6 |
7 |
8 |
60 |
9 | 
10 |
14 |
30 |
11 | 
12 |
13 |
31 |
42 |
59 |
43 |
44 |
50 | /
51 |
57 |
58 |
62 |
76 |
63 | 
64 |
65 |
66 |
67 |
75 | CVV
68 |
69 | *
70 |
71 |
72 |
73 |
74 |
7 | 
8 |
For example `"#### #### #### ####"` is a pattern for Master or VISA cards. 48 | * `cardNumberMask`: Specifies which part of the card number should be masked. The masked characters are defined using `*` character the unmasked numbers are defined with `#` character. For example `"#### **** **** ####"` masks the middle of the card number. Note that it should have the same number of characters as the `cardNumberFormat` has. 49 | * `cardLabels`: Optional property to modify all labels in the card component. 50 | * `formLabels`: Optional property to modify all labels in form component. 51 | 52 | The output parameters are following: 53 | * `submitEvent`: It is fired if the Submit button is clicked. The event contains all the card data. 54 | * `changeCard`: It is fired if one of the card properties change. The event contains all the card data. 55 | * `changeCardNumber`: It is fired if the card number changes. The event contains the card number. 56 | 57 | An example for the usage can be found below. The example assumes, that the consumer `assets` folder contains the necessary images. 58 | 59 | ```html 60 |