From 6f6d89fab8b9d998a41914df6b8ea07cdf005361 Mon Sep 17 00:00:00 2001
From: Al-Mothafar Al-Hasan <almothafar@capella.io>
Date: Sun, 10 Jan 2021 17:24:44 +0200
Subject: [PATCH] Adding default style and class for canvas for custom styling
 https://github.com/wulfsolter/angular2-signaturepad/issues/84

---
 .../src/lib/angular-signature-pad.component.scss      | 11 +++++++++++
 .../src/lib/angular-signature-pad.component.ts        |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 projects/angular-signature-pad/src/lib/angular-signature-pad.component.scss

diff --git a/projects/angular-signature-pad/src/lib/angular-signature-pad.component.scss b/projects/angular-signature-pad/src/lib/angular-signature-pad.component.scss
new file mode 100644
index 0000000..122477c
--- /dev/null
+++ b/projects/angular-signature-pad/src/lib/angular-signature-pad.component.scss
@@ -0,0 +1,11 @@
+:host {
+  // This should be solving issue with open area that don't have signature pad canvas
+  background: antiquewhite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .signature-pad-canvas {
+    border: 1px solid gray;
+  }
+}
diff --git a/projects/angular-signature-pad/src/lib/angular-signature-pad.component.ts b/projects/angular-signature-pad/src/lib/angular-signature-pad.component.ts
index 3ea2fc1..2f108c0 100644
--- a/projects/angular-signature-pad/src/lib/angular-signature-pad.component.ts
+++ b/projects/angular-signature-pad/src/lib/angular-signature-pad.component.ts
@@ -7,8 +7,9 @@ export interface NgSignaturePadOptions extends Options {
 }
 
 @Component({
-  template: '<canvas></canvas>',
+  template: '<canvas class="signature-pad-canvas"></canvas>',
   selector: 'signature-pad',
+  styleUrls: ['./angular-signature-pad.component.scss'],
 })
 export class SignaturePadComponent implements AfterContentInit, OnDestroy {
   @Input() public options: NgSignaturePadOptions;