{"_id":"@akitu/angular-signature-pad","name":"@akitu/angular-signature-pad","dist-tags":{"latest":"6.0.0"},"versions":{"6.0.0":{"name":"@akitu/angular-signature-pad","version":"6.0.0","description":"Angular Component wrapper for szimek/signature_pad","repository":{"type":"git","url":"git+https://github.com/almothafar/angular-signature-pad.git"},"keywords":["signature","sign","finger","canvas"],"author":{"name":"Al-Mothafar Al-Hasan","email":"almothafar@gmail.com","url":"https://almothafar.com"},"license":"MIT","bugs":{"url":"https://github.com/almothafar/angular-signature-pad/issues"},"homepage":"https://github.com/almothafar/angular-signature-pad#readme","peerDependencies":{"@angular/common":">=16.0.0","@angular/core":">=16.0.0"},"dependencies":{"signature_pad":"^5.0.4","tslib":"^2.8.1"},"module":"fesm2022/akitu-angular-signature-pad.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/akitu-angular-signature-pad.mjs","esm":"./esm2022/akitu-angular-signature-pad.mjs","default":"./fesm2022/akitu-angular-signature-pad.mjs"}},"sideEffects":false,"_id":"@akitu/angular-signature-pad@6.0.0","gitHead":"20882f3bc4b804adbaad1890d1912820951f9a5e","_nodeVersion":"22.11.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-MhGPLqam4Ru/GmcTxuTTK7TdxVrx4WEU62AiTcpGd2qm8qtKXkDpJBb1bs+S1+jQ221UwjOJbZMDHKcfRW2iBQ==","shasum":"804555516bdc358de64eb45a51f7312f43754f2a","tarball":"https://registry.npmjs.org/@akitu/angular-signature-pad/-/angular-signature-pad-6.0.0.tgz","fileCount":13,"unpackedSize":70296,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4x4XkRnmwT6nMMFWrIJGNNcqGcSkrdJYDRHqK/cMk5AiEAgdpSyjVLDEqT9WcmZe6rP9tsEs6FxAMS2njOxofG+9U="}]},"_npmUser":{"name":"akitu","email":"eugene.qilo@akituone.com"},"directories":{},"maintainers":[{"name":"akitu","email":"eugene.qilo@akituone.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/angular-signature-pad_6.0.0_1736202797655_0.14218315435294682"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-06T22:33:17.501Z","6.0.0":"2025-01-06T22:33:17.880Z","modified":"2025-01-06T22:33:18.223Z"},"maintainers":[{"name":"akitu","email":"eugene.qilo@akituone.com"}],"description":"Angular Component wrapper for szimek/signature_pad","homepage":"https://github.com/almothafar/angular-signature-pad#readme","keywords":["signature","sign","finger","canvas"],"repository":{"type":"git","url":"git+https://github.com/almothafar/angular-signature-pad.git"},"author":{"name":"Al-Mothafar Al-Hasan","email":"almothafar@gmail.com","url":"https://almothafar.com"},"bugs":{"url":"https://github.com/almothafar/angular-signature-pad/issues"},"license":"MIT","readme":"# Angular Signature Pad\r\n\r\n[![npm downloads](https://img.shields.io/npm/dt/@akitu/angular-signature-pad.svg)](https://www.npmjs.com/package/@akitu/angular-signature-pad)\r\n[![npm version](https://img.shields.io/npm/v/@akitu/angular-signature-pad.svg)](https://www.npmjs.com/package/@akitu/angular-signature-pad)\r\n[![npm license](https://img.shields.io/npm/l/@akitu/angular-signature-pad.svg)](https://www.npmjs.com/package/@akitu/angular-signature-pad)\r\n[![GitHub issues](https://img.shields.io/github/issues/almothafar/angular-signature-pad.svg)](https://github.com/almothafar/angular-signature-pad/issues)\r\n\r\n\r\nAngular component for [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).\r\n\r\n## Install\r\n\r\n```shell\r\nnpm install @akitu/angular-signature-pad --save\r\n```\r\n\r\n## Reference Implementation\r\n\r\n* [Live Demo](https://almothafar.github.io/angular-signature-pad/)\r\n* [Source](https://github.com/almothafar/angular-signature-pad/tree/master/projects/demo)\r\n\r\n## Usage example\r\n\r\nAPI is identical to [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).\r\n\r\nOptions are as per [szimek/signature_pad](https://www.npmjs.com/package/signature_pad) with the following additions:\r\n\r\n* canvasWidth: width of the canvas (px)\r\n* canvasHeight: height of the canvas (px)\r\n\r\nThe above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.\r\n\r\n```typescript\r\n\r\n// import into app module\r\n\r\nimport { AngularSignaturePadModule } from '@akitu/angular-signature-pad';\r\n\r\n...\r\n\r\n@NgModule({\r\n  declarations: [ ],\r\n  imports: [ AngularSignaturePadModule ],\r\n  providers: [ ],\r\n  bootstrap: [ AppComponent ]\r\n})\r\n\r\n// then import for use in a component\r\n\r\nimport { Component, ViewChild } from '@angular/core';\r\nimport { SignaturePadComponent } from '@akitu/angular-signature-pad';\r\n\r\n@Component({\r\n  template: '<signature-pad #signature [options]=\"signaturePadOptions\" (drawStart)=\"drawStart($event)\" (drawEnd)=\"drawComplete($event)\"></signature-pad>'\r\n})\r\n\r\nexport class SignaturePadPage {\r\n\r\n  @ViewChild('signature')\r\n  public signaturePad: SignaturePadComponent;\r\n\r\n  private signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor\r\n    minWidth: 5,\r\n    canvasWidth: 500,\r\n    canvasHeight: 300\r\n  };\r\n\r\n  constructor() {\r\n    // no-op\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    // this.signaturePad is now available\r\n    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime\r\n    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API\r\n  }\r\n\r\n  drawComplete(event: MouseEvent | Touch) {\r\n    // will be notified of szimek/signature_pad's onEnd event\r\n    console.log('Completed drawing', event);\r\n    console.log(this.signaturePad.toDataURL());\r\n  }\r\n\r\n  drawStart(event: MouseEvent | Touch) {\r\n    // will be notified of szimek/signature_pad's onBegin event\r\n    console.log('Start drawing', event);\r\n  }\r\n}\r\n```\r\n","readmeFilename":"README.md"}