Upgrade to support ng 19

.gitignore

@@ -28,6 +28,9 @@ yarn-error.log
 !.vscode/extensions.json
 .history/*
 
+# Visual Studio
+.vs
+
 # Miscellaneous
 /.angular
 .sass-cache/

package.json

@@ -15,30 +15,30 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^17.2.3",
-    "@angular/common": "^17.2.3",
-    "@angular/compiler": "^17.2.3",
-    "@angular/core": "^17.2.3",
-    "@angular/forms": "^17.2.3",
-    "@angular/platform-browser": "^17.2.3",
-    "@angular/platform-browser-dynamic": "^17.2.3",
-    "@angular/router": "^17.2.3",
+    "@angular/animations": "^19.0.3",
+    "@angular/common": "^19.0.3",
+    "@angular/compiler": "^19.0.3",
+    "@angular/core": "^19.0.3",
+    "@angular/forms": "^19.0.3",
+    "@angular/platform-browser": "^19.0.3",
+    "@angular/platform-browser-dynamic": "^19.0.3",
+    "@angular/router": "^19.0.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "^0.14.4"
+    "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.2",
-    "@angular/cli": "~17.2.2",
-    "@angular/compiler-cli": "^17.2.3",
+    "@angular-devkit/build-angular": "^19.0.4",
+    "@angular/cli": "~19.0.4",
+    "@angular/compiler-cli": "^19.0.3",
     "@types/jasmine": "~4.3.0",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^17.2.0",
-    "typescript": "~5.3.3"
+    "ng-packagr": "^19.0.1",
+    "typescript": "~5.5.4"
   }
 }

projects/angular4-paystack/package.json

@@ -2,8 +2,8 @@
   "name": "angular4-paystack",
   "version": "3.1.4",
   "peerDependencies": {
-    "@angular/common": "8.0.0 - 17.x.x",
-    "@angular/core": "8.0.0 - 17.x.x"
+    "@angular/common": "8.0.0 - 19.x.x",
+    "@angular/core": "8.0.0 - 19.x.x"
   },
   "repository": {
     "type": "git",

projects/angular4-paystack/src/lib/angular4-paystack.component.ts

@@ -9,7 +9,7 @@ declare var window: MyWindow;
 
 @Component({
   selector: 'angular4-paystack',
-  template: `<button [ngClass]="class" [ngStyle]="style" (click)="pay()"><ng-content></ng-content></button>`,
+  template: `<button [class]="class" [style]="style" (click)="pay()"><ng-content></ng-content></button>`,
 })
 export class Angular4PaystackComponent {
   @Input() key: string;

projects/angular4-paystack/src/lib/angular4-paystack.directive.ts

@@ -26,7 +26,6 @@ export class Angular4PaystackDirective {
   @Input() split_code: string;
   @Input() transaction_charge: number; // tslint:disable-line
   @Input() bearer: string;
-  @Input() class: string;
   @Input() style: object;
   @Input() paystackOptions: PaystackOptions;
   @Output() paymentInit: EventEmitter<any> = new EventEmitter<any>(); // tslint:disable-line

projects/angular4-paystack/src/lib/angular4-paystack.module.ts

@@ -8,9 +8,9 @@ import { Angular4PaystackService } from './angular4-paystack.service';
 import { PUBLIC_KEY_TOKEN } from './paystack-token';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, Angular4PaystackComponent, Angular4PaystackDirective, Angular4PaystackEmbedComponent],
   exports: [Angular4PaystackComponent, Angular4PaystackDirective, Angular4PaystackEmbedComponent],
-  declarations: [Angular4PaystackComponent, Angular4PaystackDirective, Angular4PaystackEmbedComponent],
+  declarations: [],
   providers: [],
 })
 export class Angular4PaystackModule {

projects/angular4-paystack/src/lib/angular4-paystack.service.ts

@@ -34,7 +34,7 @@ export class Angular4PaystackService {
 
   checkInput(obj: Partial<PaystackOptions>): string {
     if (!obj.key && !this.token) {
-      return 'ANGULAR-PAYSTACK: Please insert a your public key';
+      return 'ANGULAR-PAYSTACK: Please insert your public key';
     }
     if (!obj.email) {
       return 'ANGULAR-PAYSTACK: Paystack email cannot be empty';

src/app/app.component.html

@@ -11,19 +11,18 @@
       [ref]="tRef"
       (onClose)="paymentCancel()"
       (callback)="paymentDone($event)"
-      [class]="'btn btn-primary'"
+      [class]="'btn btn-primary m-3'"
     >
       Pay With Paystack component
     </angular4-paystack>
 
     <button
-      class="btn btn-danger m-3"
       angular4-paystack
       [paystackOptions]="options"
       (onClose)="paymentCancel()"
       (paymentInit)="paymentInit()"      
       (callback)="paymentDone($event)"
-      [class]="'btn btn-primary btn-lg'"
+      [class]="'btn btn-primary btn-lg m-3'"
     >
       Pay With Paystack Directive
     </button>

src/app/app.component.ts

@@ -1,10 +1,12 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { PaystackOptions } from 'angular4-paystack';
+import { Angular4PaystackModule, PaystackOptions } from 'angular4-paystack';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  imports: [CommonModule, Angular4PaystackModule]
 })
 export class AppComponent implements OnInit {
   public title = 'app';
@@ -14,7 +16,7 @@ export class AppComponent implements OnInit {
     email: 'user@mail.com',
     split_code: 'SPL_nZXNafVgCd',
     ref: `${Math.ceil(Math.random() * 10e10)}`
-  };
+  };  
   public results = {
     name: ''
   };

src/app/app.module.ts

@@ -1,14 +1,13 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { Angular4PaystackModule } from 'angular4-paystack';
+import { BrowserModule } from '@angular/platform-browser';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [],
   imports: [
+    AppComponent,
     BrowserModule,
     Angular4PaystackModule.forRoot('pk_test_24673c9637a1bf06e5fb6eb989012747183eb2ae')
   ],

src/styles.css

@@ -1 +1,47 @@
 /* You can add global styles to this file, and also import other style files */
+
+.btn {
+    display: inline-block;
+    padding: 6px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    border: 1px solid #cecece;
+    background-color: #cecece;
+    color: #3a3a3a;
+}
+
+.btn-primary {
+    border: 1px solid #1937be;
+    background-color: #1937be;
+    color: #fff !important;
+}
+
+.btn-outline-dark {
+    border: 1px solid #555;
+    background-color: #fff;
+}
+
+.btn-lg {
+    padding: 6px 12px;
+    font-size: 20px;
+}
+
+.m-3 {
+    margin: 3px;
+}
+
+.my-3 {
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
+.mr-3 {
+    margin-right: 3px;
+}