50 |
51 |
53 |
54 |
9 | {{sigPad.value | json}}
10 |
11 | valueChanged to:
12 |
13 | {{lastChange | json}}
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.log(err));
13 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/src/app/core/core.module.ts:
--------------------------------------------------------------------------------
1 | import {CommonModule} from '@angular/common';
2 | import {HttpClientModule} from '@angular/common/http';
3 | import {ModuleWithProviders, NgModule} from '@angular/core';
4 |
5 | @NgModule({
6 | imports: [
7 | HttpClientModule,
8 | CommonModule
9 | ]
10 | })
11 | export class CoreModule {
12 | static forRoot(): ModuleWithProviders {
13 | return {
14 | ngModule: CoreModule,
15 | providers: []
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html'
6 | })
7 | export class AppComponent {
8 | navBarCollapsed = true;
9 |
10 | constructor() {
11 | }
12 |
13 | toggleNav(closeOnly?: boolean) {
14 | if (closeOnly) {
15 | this.navBarCollapsed = true;
16 | } else {
17 | this.navBarCollapsed = !this.navBarCollapsed;
18 | }
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc",
5 | "sourceMap": true,
6 | "allowJs": true,
7 | "declaration": false,
8 | "moduleResolution": "node",
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "node_modules/@types"
14 | ],
15 | "lib": [
16 | "es2017",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/libs/angular-signature-pad/src/angular-signature-pad.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { AngularSignaturePadModule } from './angular-signature-pad.module';
2 |
3 | describe('AngularSignaturePadModule', () => {
4 | let angularSignaturePadModule: AngularSignaturePadModule;
5 |
6 | beforeEach(() => {
7 | angularSignaturePadModule = new AngularSignaturePadModule();
8 | });
9 |
10 | it('should create an instance', () => {
11 | expect(angularSignaturePadModule).toBeTruthy();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/app/pages/signature-pad/signature-pad-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import {SignaturePadComponent} from './signature-pad.component';
4 |
5 | const routes: Routes = [
6 | {
7 | path: '',
8 | component: SignaturePadComponent
9 | }
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class SignaturePadRoutingModule { }
17 |
--------------------------------------------------------------------------------
/src/app/pages/signature-pad-card/signature-pad-card-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import {SignaturePadCardComponent} from './signature-pad-card.component';
4 |
5 | const routes: Routes = [
6 | {
7 | path: '',
8 | component: SignaturePadCardComponent
9 | }
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class SignaturePadCardRoutingModule { }
17 |
--------------------------------------------------------------------------------
/src/libs/angular-signature-pad/src/validators/is-array.validation.ts:
--------------------------------------------------------------------------------
1 | import {AbstractControl, ValidationErrors} from '@angular/forms';
2 |
3 | export function isArray(c: AbstractControl): null | ValidationErrors {
4 | if (c.value) {
5 | const error = {
6 | isArray: {
7 | message: 'signature is no array'
8 | }
9 | };
10 |
11 | const arrayConstructor = [].constructor;
12 | if (c.value.constructor !== arrayConstructor) {
13 | return error;
14 | }
15 | }
16 | return null;
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/pages/signature-pad-control/signature-pad-control-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import {SignaturePadControlComponent} from './signature-pad-control.component';
4 |
5 | const routes: Routes = [
6 | {
7 | path: '',
8 | component: SignaturePadControlComponent
9 | }
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class SignaturePadControlRoutingModule { }
17 |
--------------------------------------------------------------------------------
/src/libs/angular-signature-pad/src/pipes/obj-to-array.pipe.ts:
--------------------------------------------------------------------------------
1 | import {Pipe, PipeTransform} from '@angular/core';
2 |
3 | @Pipe({
4 | name: 'objToArray'
5 | })
6 | export class ObjToArrayPipe implements PipeTransform {
7 |
8 | transform(value: any, args?: any): any {
9 | const objCtor = {}.constructor;
10 | if (value && value.constructor === objCtor) {
11 | return Object.keys(value)
12 | .map(key => {
13 | return {key, value: value[key]};
14 | });
15 | }
16 | return value;
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/pages/signature-pad-card-group/signature-pad-card-group-routing.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {RouterModule, Routes} from '@angular/router';
3 | import {SignaturePadCardGroupComponent} from './signature-pad-card-group.component';
4 |
5 | const routes: Routes = [
6 | {
7 | path: '',
8 | component: SignaturePadCardGroupComponent
9 | }
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class SignaturePadCardGroupRoutingModule { }
17 |
--------------------------------------------------------------------------------
/src/app/pages/demo/demo.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {FormBuilder, FormGroup} from '@angular/forms';
3 |
4 | @Component({
5 | selector: 'app-demo',
6 | templateUrl: './demo.component.html'
7 | })
8 | export class DemoComponent implements OnInit {
9 |
10 | testForm: FormGroup;
11 |
12 | constructor(private fb: FormBuilder) {
13 | }
14 |
15 | ngOnInit() {
16 | this.testForm = this.fb.group({
17 | firstName: [],
18 | lastName: [],
19 | signature: [[]]
20 | });
21 | }
22 |
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/pages/signature-pad-configuration/signature-pad-configuration-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import {SignaturePadConfigurationComponent} from './signature-pad-configuration.component';
4 |
5 | const routes: Routes = [
6 | {
7 | path: '',
8 | component: SignaturePadConfigurationComponent
9 | }
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class SignaturePadConfigurationRoutingModule { }
17 |
--------------------------------------------------------------------------------
/src/app/pages/signature-pad-control-validation/signature-pad-control-validation-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import {SignaturePadControlValidationComponent} from './signature-pad-control-validation.component';
4 |
5 | const routes: Routes = [
6 | {
7 | path: '',
8 | component: SignaturePadControlValidationComponent
9 | }
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class SignaturePadControlValidationRoutingModule { }
17 |
--------------------------------------------------------------------------------
/src/app/pages/demo/demo.routing.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {ExtraOptions, RouterModule, Routes} from '@angular/router';
3 | import {DemoComponent} from './demo.component';
4 |
5 | const BASIC_IMPLEMENTATION_ROUTES: Routes = [
6 | {
7 | path: '',
8 | component: DemoComponent }
9 | ];
10 |
11 | const extraOptions: ExtraOptions = {
12 | useHash: true
13 | };
14 |
15 | @NgModule({
16 | imports: [
17 | RouterModule.forChild(BASIC_IMPLEMENTATION_ROUTES)
18 | ],
19 | exports: [
20 | RouterModule
21 | ]
22 | })
23 | export class DemoRouterModule {
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/pages/demo/demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { DemoComponent } from './demo.component';
4 | import {DemoRouterModule} from './demo.routing.module';
5 | import {ReactiveFormsModule} from '@angular/forms';
6 | import {SharedModule} from '../../shared/shared.module';
7 | import {AngularSignaturePadModule} from 'angular-signature-pad';
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule,
12 | DemoRouterModule,
13 | AngularSignaturePadModule.forRoot(),
14 | ReactiveFormsModule,
15 | SharedModule
16 | ],
17 | declarations: [DemoComponent]
18 | })
19 | export class DemoModule { }
20 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | {{sigPad.value | json}}
33 |
--------------------------------------------------------------------------------
/src/app/pages/signature-pad-card/signature-pad-card.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
3 | import {isArray, consistOfArrays, consistOfObjects, minLines, minPointsInEachNLines} from 'angular-signature-pad';
4 |
5 | @Component({
6 | selector: 'app-signature-pad-card',
7 | templateUrl: './signature-pad-card.component.html'
8 | })
9 | export class SignaturePadCardComponent implements OnInit {
10 |
11 | testForm: FormGroup;
12 | signatureControl: FormControl;
13 |
14 | constructor(fb: FormBuilder) {
15 | this.testForm = fb.group({
16 | signature: ['', [
17 | isArray,
18 | consistOfArrays,
19 | consistOfObjects,
20 | minLines(1),
21 | minPointsInEachNLines(4, 1)
22 | ]]
23 | });
24 | this.signatureControl = this.testForm.get('signature') as FormControl;
25 | }
26 |
27 | ngOnInit() {
28 | }
29 |
30 | }
31 |
--------------------------------------------------------------------------------
/chore/scripts/tasks/refresh.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const path = require('path')
4 | const util = require('util')
5 | const exec = util.promisify(require('child_process').exec)
6 |
7 | const config = require(path.join('..', '..', 'config'))
8 | const utils = require(path.join(__base, 'chore', 'scripts', 'utils'))
9 |
10 | module.exports = refresh
11 |
12 | function refresh () {
13 | // utils.deleteFile(path.join(__base, 'node_modules'))
14 | return Promise.resolve()
15 | // pulls the latest version and rebases
16 | .then(() => {
17 | console.info('start git pull --rebase'.gray)
18 | return exec('git pull --rebase', {cwd: __base})
19 | })
20 | // installs the node dependencies
21 | .then(() => {
22 | console.info('done git pull --rebase'.green)
23 | console.info('start npm install'.gray)
24 | return exec('npm install', {cwd: __base})
25 | })
26 | .then(() => {
27 | console.info('end npm install'.green)
28 | })
29 | }
30 |
--------------------------------------------------------------------------------
/src/libs/angular-signature-pad/src/validators/consists-of-arrays.validation.ts:
--------------------------------------------------------------------------------
1 | import {AbstractControl} from '@angular/forms';
2 |
3 | export function consistOfArrays(c: AbstractControl) {
4 |
5 | if (c.value) {
6 | const arrayConstructor = [].constructor;
7 |
8 | const error = {
9 | consistOfArrays: {
10 | numOfItemsThatAreNoArray: 0,
11 | message: 'Signature don\'t consist of arrays'
12 | }
13 | };
14 |
15 | if (c.value.constructor !== arrayConstructor) {
16 | return null;
17 | }
18 |
19 | const countOfNonArrays =
20 | c.value.filter(function (i) {
21 | // filter non arrays
22 | return i.constructor !== arrayConstructor;
23 | }).length;
24 |
25 | // return error if a non array is contained
26 | if (countOfNonArrays > 0) {
27 | error.consistOfArrays.numOfItemsThatAreNoArray = countOfNonArrays;
28 | return error;
29 | }
30 | return null;
31 | }
32 | return null;
33 | }
34 |
--------------------------------------------------------------------------------
/chore/scripts/release.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const path = require('path')
4 |
5 | const config = require('../config')
6 | const base = path.join(__base, 'chore', 'scripts', 'tasks')
7 |
8 | const ciCheck = require(path.join(base, 'ci-check'))
9 | const refresh = require(path.join(base, 'refresh'))
10 | const build = require(path.join(base, 'build'))
11 | const changelog = require(path.join(base, 'changelog'))
12 | const versionBump = require(path.join(base, 'version-bump'))
13 | const releaseGithub = require(path.join(base, 'release-github'))
14 | const releaseNpm = require(path.join(base, 'release-npm'))
15 | /**/
16 | process.env.DEBUG = config.debugMode
17 |
18 | console.info('Start release'.gray)
19 | return Promise.resolve()
20 | //.then(() => ciCheck())
21 | .then(() => refresh())
22 | .then(() => build())
23 | .then(() => changelog())
24 | .then(() => versionBump())
25 | .then(() => releaseGithub())
26 | //.then(() => releaseNpm())
27 | .catch((err) => console.info('release error'.red, err.red))
28 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | reports: [ 'html', 'lcovonly' ],
20 | fixWebpackSourcePaths: true
21 | },
22 | angularCli: {
23 | environment: 'dev'
24 | },
25 | reporters: ['progress', 'kjhtml'],
26 | port: 9876,
27 | colors: true,
28 | logLevel: config.LOG_INFO,
29 | autoWatch: true,
30 | browsers: ['Chrome'],
31 | singleRun: false
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/src/app/pages/signature-pad-configuration/signature-pad-configuration.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { SignaturePadConfigurationRoutingModule } from './signature-pad-configuration-routing.module';
5 | import { SignaturePadConfigurationComponent } from './signature-pad-configuration.component';
6 | import {SharedModule} from '../../shared/shared.module';
7 | import {ReactiveFormsModule} from '@angular/forms';
8 | import {AngularSignaturePadModule} from 'angular-signature-pad';
9 | import {GlobalSignaturePadConfig} from 'angular-signature-pad';
10 |
11 | @NgModule({
12 | imports: [
13 | CommonModule,
14 | SignaturePadConfigurationRoutingModule,
15 | ReactiveFormsModule,
16 | SharedModule,
17 | AngularSignaturePadModule.forRoot(),
18 | ],
19 | declarations: [SignaturePadConfigurationComponent],
20 | providers: [
21 | { provide: GlobalSignaturePadConfig, useValue: { penColor: '#f00'}}
22 | ]
23 | })
24 | export class SignaturePadConfigurationModule { }
25 |
--------------------------------------------------------------------------------
/src/libs/angular-signature-pad/src/components/signature-pad-card-group/signature-pad-card-group.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input, OnInit, ViewChild} from '@angular/core';
2 | import {AbstractControl, FormControl} from '@angular/forms';
3 | import {SignaturePadControlComponent} from '../signature-pad-control/signature-pad-control.component';
4 |
5 | @Component({
6 | selector: 'signature-pad-card-group',
7 | templateUrl: './signature-pad-card-group.component.html',
8 | providers: []
9 | })
10 | export class SignaturePadCardGroupComponent implements OnInit {
11 |
12 | @Input()
13 | theme: string;
14 |
15 | @Input()
16 | group: AbstractControl;
17 |
18 | @Input()
19 | config: any;
20 |
21 | control: FormControl;
22 |
23 | @ViewChild('signaturePad')
24 | signaturePadControl: SignaturePadControlComponent;
25 |
26 | constructor() {
27 |
28 | }
29 |
30 | ngOnInit() {
31 | this.control = this.group.get(this.config.name) as FormControl;
32 | }
33 |
34 | clear() {
35 | this.signaturePadControl.clear();
36 | }
37 |
38 | }
39 |
--------------------------------------------------------------------------------
/src/libs/angular-signature-pad/src/components/signature-pad-card-group/signature-pad-card-group.component.html:
--------------------------------------------------------------------------------
1 |
54 | {{sigPad.value | json}}
55 |
56 |
57 |
58 | ```
59 |
60 | ## Styles
61 | To apply the default styles just import the `styles.scss` file from the `node_modules/angular-signature-pad` folder.
62 |
63 | ```scss
64 | // src/styles.scss
65 |
66 | @import "../node_modules/angular-signature-pad/styles";
67 | ```
68 |
69 | ### Custom styles
70 | The SignaturePadCard and SignaturePadCardGroup component have a default styling set over the `[theme]` property.
71 | It is applied over the `.raised` class internally.
72 |
73 | To create your own theme create a class i.e. `.my-theme` and combine
74 | it with the default class of the signature pad. `.signature-pad-card.my-theme`.
75 | Apply it to the component over the `[theme]` property binding.
76 |
77 | 1. Create styles
78 | ```scss
79 | .signature-pad-card.my-theme {
80 | ...
81 |
82 | .signature-pad {
83 | ...
84 | }
85 |
86 | .signature-pad-canvas {
87 | ...
88 | }
89 |
90 | .actions {
91 | ...
92 | .clear {
93 | ...
94 | }
95 | }
96 |
97 | .feedback {
98 | ...
99 | }
100 | }
101 |
102 | ```
103 |
104 | 2. Apply styles to the theme property binding
105 | ```html
106 |
55 | {{sigPad.value | json}}
56 |
57 |
58 |
59 | ```
60 |
61 | ## Styles
62 | To apply the default styles just import the `styles.scss` file from the `node_modules/angular-signature-pad` folder.
63 |
64 | ```scss
65 | // src/styles.scss
66 |
67 | @import "../node_modules/angular-signature-pad/styles";
68 | ```
69 |
70 | ### Custom styles
71 | The SignaturePadCard and SignaturePadCardGroup component have a default styling set over the `[theme]` property.
72 | It is applied over the `.raised` class internally.
73 |
74 | To create your own theme create a class i.e. `.my-theme` and combine
75 | it with the default class of the signature pad. `.signature-pad-card.my-theme`.
76 | Apply it to the component over the `[theme]` property binding.
77 |
78 | 1. Create styles
79 | ```scss
80 | .signature-pad-card.my-theme {
81 | ...
82 |
83 | .signature-pad {
84 | ...
85 | }
86 |
87 | .signature-pad-canvas {
88 | ...
89 | }
90 |
91 | .actions {
92 | ...
93 | .clear {
94 | ...
95 | }
96 | }
97 |
98 | .feedback {
99 | ...
100 | }
101 | }
102 |
103 | ```
104 |
105 | 2. Apply styles to the theme property binding
106 | ```html
107 | {{control.errors | json}}
88 |