@colijnit/sharedcomponents 1.0.4 → 1.0.7

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/sharedcomponents'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/sharedcomponents",
+  "allowedNonPeerDependencies": [
+    "."
+  ],
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": [
+      "../../node_modules/@syncfusion",
+      "../../node_modules/@colijnit"
+    ]
+  },
+  "assets": [
+    "**/*.scss"
+  ]
+}

package/package.json

@@ -1,25 +1,15 @@
-{
-  "name": "@colijnit/sharedcomponents",
-  "version": "1.0.4",
-  "private": false,
-  "peerDependencies": {
-    "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0",
-    "pdf-lib": "^1.17.1",
-    "pdfjs-dist": "^2.12.313",
-    "rxjs": "~7.4.0",
-    "signature_pad": "^4.0.2",
-    "zone.js": "~0.11.4"
-  },
-  "main": "bundles/colijnit-sharedcomponents.umd.js",
-  "module": "fesm2015/colijnit-sharedcomponents.js",
-  "es2015": "fesm2015/colijnit-sharedcomponents.js",
-  "esm2015": "esm2015/colijnit-sharedcomponents.js",
-  "fesm2015": "fesm2015/colijnit-sharedcomponents.js",
-  "typings": "colijnit-sharedcomponents.d.ts",
-  "metadata": "colijnit-sharedcomponents.metadata.json",
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+{
+  "name": "@colijnit/sharedcomponents",
+  "version": "1.0.7",
+  "private": false,
+  "peerDependencies": {
+    "@angular/common": "^12.2.0",
+    "@angular/core": "^12.2.0",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^2.12.313",
+    "rxjs": "~7.4.0",
+    "signature_pad": "^4.0.2",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  }
+}

package/src/lib/components/docsign/component/signature/signature.component.ts

@@ -0,0 +1,82 @@
+import {Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Output, ViewChild, ViewEncapsulation} from "@angular/core";
+import SignaturePad from "signature_pad";
+
+@Component({
+  selector: "ione-signature",
+  template: `
+    <div class="signature-wrapper">
+      <div class="signature-header">
+        <span *ngIf="title" class="title" [textContent]="title"></span>
+        <div class="button-wrapper">
+          <input type="button" (click)="handleSave($event)" [value]="saveButtonLabel"/>
+          <input type="button" (click)="handleClear($event)" [value]="clearButtonLabel">
+        </div>
+      </div>
+      <div class="canvas">
+        <canvas #signature></canvas>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class SignatureComponent {
+  @ViewChild("signature", {read: ElementRef}) set content(content: ElementRef) {
+    if (content) {
+      this.signatureCanvas = content;
+      this._initCanvas();
+    }
+  }
+
+  @Input()
+  public title: string;
+
+  @Input()
+  public saveButtonLabel: string = 'SAVE';
+
+  @Input()
+  public clearButtonLabel: string = 'CLEAR';
+
+  @Output()
+  public save: EventEmitter<string> = new EventEmitter<string>();
+
+  @HostBinding("class.ione-signature")
+  public showClass() {
+    return true;
+  }
+
+  public signature: SignaturePad;
+  public signatureCanvas: ElementRef;
+
+  public handleSave(event: MouseEvent): void {
+    // save canvas as svg
+    // const sig: string = this.signature.toDataURL("image/svg+xml");
+    const sig: string = this.signature.toDataURL("image/png");
+    // emit signature string
+    this.save.next(sig);
+  }
+
+  public handleClear(event: MouseEvent): void {
+    if (this.signature) {
+      this.signature.clear();
+    }
+  }
+
+  private _initCanvas(): void {
+    if (this.signatureCanvas && this.signatureCanvas.nativeElement) {
+      this.signature = new SignaturePad(this.signatureCanvas.nativeElement);
+      setTimeout(() => {
+        this._resizeSignatureCanvas(this.signature, this.signatureCanvas);
+      });
+    }
+  }
+
+  private _resizeSignatureCanvas(signature: SignaturePad, signatureCanvas: ElementRef): void {
+    const imageBeforeResize: string = signature.toDataURL();
+    const ratio: number = Math.max(window.devicePixelRatio || 1, 1);
+    signatureCanvas.nativeElement.width = signatureCanvas.nativeElement.offsetWidth * ratio;
+    signatureCanvas.nativeElement.height = signatureCanvas.nativeElement.offsetHeight * ratio;
+    signatureCanvas.nativeElement.getContext("2d").scale(ratio, ratio);
+    signature.fromDataURL(imageBeforeResize);
+  }
+
+}

package/src/lib/components/docsign/component/signatures/signatures.component.ts

@@ -0,0 +1,50 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "ione-signatures",
+  template: `
+    <ione-signature *ngIf="showFirstSignature"
+                    [title]="firstSignatureTitle"
+                    [saveButtonLabel]="saveButtonLabel"
+                    [clearButtonLabel]="clearButtonLabel"
+                    (save)="saveFirstSignature.emit($event)"></ione-signature>
+    <ione-signature *ngIf="showSecondSignature"
+                    [title]="secondSignatureTitle"
+                    [saveButtonLabel]="saveButtonLabel"
+                    [clearButtonLabel]="clearButtonLabel"
+                    (save)="saveSecondSignature.emit($event)"></ione-signature>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class SignaturesComponent {
+
+  @Input()
+  public showFirstSignature: boolean = false;
+
+  @Input()
+  public firstSignatureTitle: string;
+
+  @Input()
+  public showSecondSignature: boolean = false;
+
+  @Input()
+  public secondSignatureTitle: string;
+
+  @Input()
+  public saveButtonLabel: string = 'SAVE';
+
+  @Input()
+  public clearButtonLabel: string = 'CLEAR';
+
+  @Output()
+  public saveFirstSignature: EventEmitter<string> = new EventEmitter<string>();
+
+  @Output()
+  public saveSecondSignature: EventEmitter<string> = new EventEmitter<string>();
+
+  @HostBinding("class.ione-signatures")
+  public showClass() {
+    return true;
+  }
+
+}

package/src/lib/components/docsign/docsign.component.ts

@@ -0,0 +1,252 @@
+import {Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {PDFDocument} from "pdf-lib";
+import * as PDFJS from "pdfjs-dist/legacy/build/pdf";
+import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
+import {TextItem} from "pdfjs-dist/types/src/display/api";
+
+export interface TextDimension {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  page: number
+}
+
+@Component({
+  selector: "ione-docsign",
+  template: `
+    <iframe #iframe></iframe>
+    <ione-signatures *ngIf="showSignatures" @showHideSignature
+                     [showFirstSignature]="showSigBuyer"
+                     [firstSignatureTitle]="firstSignatureLabel"
+                     [showSecondSignature]="showSigSeller"
+                     [secondSignatureTitle]="secondSignatureLabel"
+                     [saveButtonLabel]="saveButtonLabel"
+                     [clearButtonLabel]="clearButtonLabel"
+                     (saveFirstSignature)="saveFirstSignature($event)"
+                     (saveSecondSignature)="saveSecondSignature($event)"
+    ></ione-signatures>
+    <input type="button" *ngIf="(showSigBuyer || showSigSeller) && !showSignatures" class="button button-sign-document"
+           [value]="signDocumentButtonLabel"
+           (click)="showSignatures = true"
+    />
+    <input type="button" class="button button-cancel"
+           [value]="cancelButtonLabel"
+           (click)="cancelClick.emit($event)"
+    />
+  `,
+  animations: [
+    trigger("showHideSignature", [
+      state("void", style({transform: "translate(-50%, -50%) scale(0)"})),
+      state("*", style({transform: "translate(-50%, -50%) scale(1)"})),
+      transition("void <=> *", animate("200ms ease-in-out")),
+    ])
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class DocsignComponent {
+  @ViewChild("iframe", { read: ElementRef })
+  public iframe: ElementRef;
+
+  /**
+   * Load an existing [[PDFDocument]]. The input data can be provided in
+   * multiple formats:
+   *
+   * | Type          | Contents                                               |
+   * | ------------- | ------------------------------------------------------ |
+   * | `string`      | A base64 encoded string (or data URI) containing a PDF |
+   * | `Uint8Array`  | The raw bytes of a PDF                                 |
+   * | `ArrayBuffer` | The raw bytes of a PDF                                 |
+   *
+   * For example:
+   * ```js
+   * import { PDFDocument } from 'pdf-lib'
+   *
+   * // pdf=string
+   * const base64 =
+   *  'JVBERi0xLjcKJYGBgYEKCjUgMCBvYmoKPDwKL0ZpbHRlciAvRmxhdGVEZWNvZGUKL0xlbm' +
+   *  'd0aCAxMDQKPj4Kc3RyZWFtCniccwrhMlAAwaJ0Ln2P1Jyy1JLM5ERdc0MjCwUjE4WQNC4Q' +
+   *  '6cNlCFZkqGCqYGSqEJLLZWNuYGZiZmbkYuZsZmlmZGRgZmluDCQNzc3NTM2NzdzMXMxMjQ' +
+   *  'ztFEKyuEK0uFxDuAAOERdVCmVuZHN0cmVhbQplbmRvYmoKCjYgMCBvYmoKPDwKL0ZpbHRl' +
+   *  'ciAvRmxhdGVEZWNvZGUKL1R5cGUgL09ialN0bQovTiA0Ci9GaXJzdCAyMAovTGVuZ3RoID' +
+   *  'IxNQo+PgpzdHJlYW0KeJxVj9GqwjAMhu/zFHkBzTo3nCCCiiKIHPEICuJF3cKoSCu2E8/b' +
+   *  '20wPIr1p8v9/8kVhgilmGfawX2CGaVrgcAi0/bsy0lrX7IGWpvJ4iJYEN3gEmrrGBlQwGs' +
+   *  'HHO9VBX1wNrxAqMX87RBD5xpJuddqwd82tjAHxzV1U5LPgy52DKXWnr1Lheg+j/c/pzGVr' +
+   *  'iqV0VlwZPXGPCJjElw/ybkwUmeoWgxesDXGhHJC/D/iikp1Av80ptKU0FdBEe25pPihAM1' +
+   *  'u6ytgaaWfs2Hrz35CJT1+EWmAKZW5kc3RyZWFtCmVuZG9iagoKNyAwIG9iago8PAovU2l6' +
+   *  'ZSA4Ci9Sb290IDIgMCBSCi9GaWx0ZXIgL0ZsYXRlRGVjb2RlCi9UeXBlIC9YUmVmCi9MZW' +
+   *  '5ndGggMzgKL1cgWyAxIDIgMiBdCi9JbmRleCBbIDAgOCBdCj4+CnN0cmVhbQp4nBXEwREA' +
+   *  'EBAEsCwz3vrvRmOOyyOoGhZdutHN2MT55fIAVocD+AplbmRzdHJlYW0KZW5kb2JqCgpzdG' +
+   *  'FydHhyZWYKNTEwCiUlRU9G'
+   *
+   * const dataUri = 'data:application/pdf;base64,' + base64
+   *
+   * const pdfDoc1 = await PDFDocument.load(base64)
+   * const pdfDoc2 = await PDFDocument.load(dataUri)
+   *
+   * // pdf=Uint8Array
+   * import fs from 'fs'
+   * const uint8Array = fs.readFileSync('with_update_sections.pdf')
+   * const pdfDoc3 = await PDFDocument.load(uint8Array)
+   *
+   * // pdf=ArrayBuffer
+   * const url = 'https://pdf-lib.js.org/assets/with_update_sections.pdf'
+   * const arrayBuffer = await fetch(url).then(res => res.arrayBuffer())
+   * const pdfDoc4 = await PDFDocument.load(arrayBuffer)
+   *
+   * ```
+   *
+   * @param pdf The input data containing a PDF document.
+   * @param options The options to be used when loading the document.
+   * @returns Resolves with a document loaded from the input.
+   */
+  @Input()
+  public set pdf(value: any) {
+    if (value) {
+      this._pdf = value;
+      this._openPDF();
+    }
+  }
+
+  public get pdf(): any {
+    return this._pdf;
+  }
+
+  @Input()
+  public firstSignatureLabel: string;
+
+  @Input()
+  public firstSignatureField: string;
+
+  @Input()
+  public secondSignatureLabel: string;
+
+  @Input()
+  public secondSignatureField: string;
+
+  @Input()
+  public saveButtonLabel: string = 'SAVE';
+
+  @Input()
+  public clearButtonLabel: string = 'CLEAR';
+
+  @Input()
+  public signDocumentButtonLabel: string = 'SIGN_DOCUMENT';
+
+  @Input()
+  public cancelButtonLabel: string = 'CANCEL';
+
+  @Output()
+  public pdfSaved: EventEmitter<string> = new EventEmitter<string>();
+
+  @Output()
+  public cancelClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @HostBinding('class.ione-docsign')
+  public showClass() {
+    return true;
+  }
+
+  public showSignaturePopup: boolean = false;
+  public showSigBuyer: boolean = false;
+  public sigBuyerPosition: TextDimension;
+  public showSigSeller: boolean = false;
+  public sigSellerPosition: TextDimension;
+  public showSignatures: boolean = false;
+
+  public pdfDoc: PDFDocument;
+
+  private _pdf: any;
+
+  public saveFirstSignature(sig: string): void {
+    this._saveSignature(sig, this.sigBuyerPosition);
+    this.showSigBuyer = false;
+    this._savePdf();
+  }
+
+  public saveSecondSignature(sig: string): void {
+    this._saveSignature(sig, this.sigSellerPosition);
+    this.showSigSeller = false;
+    this._savePdf();
+  }
+
+  private async _openPDF(): Promise<void> {
+    // first create reader to check signatures
+    this._checkSignatures();
+
+    this.pdfDoc = await PDFDocument.load(this._pdf, {
+      updateMetadata: false
+    });
+    const pdfDataUri = await this.pdfDoc.saveAsBase64({ dataUri: true });
+    this.iframe.nativeElement.src = pdfDataUri;
+  }
+
+  private async _savePdf(): Promise<void> {
+    if (!this.showSigBuyer && !this.showSigSeller) {
+      // ready, save the pdf and emit result
+      const result = await this.pdfDoc.saveAsBase64();
+      this.pdfSaved.next(result);
+    }
+  }
+
+  private async _checkSignatures(): Promise<void> {
+    let pdfWorkerSrc;
+    if (window.hasOwnProperty('pdfWorkerSrc') &&
+      typeof (window as any).pdfWorkerSrc === 'string' &&
+      (window as any).pdfWorkerSrc) {
+      pdfWorkerSrc = (window as any).pdfWorkerSrc;
+    }
+    else {
+      pdfWorkerSrc = pdfjsWorker;
+    }
+    PDFJS.GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
+    const pdfReader = await PDFJS.getDocument(this._pdf).promise;
+    const numPages = pdfReader.numPages;
+    for (let i = 0; i < numPages; i++) {
+      const page = await pdfReader.getPage(i + 1);
+      const text = await page.getTextContent();
+      page.cleanup();
+      if (this.firstSignatureField) {
+        this.sigBuyerPosition = this._getPositionSignature(text, this.firstSignatureField);
+        if (this.sigBuyerPosition.width > 0 && this.sigBuyerPosition.height > 0) {
+          this.sigBuyerPosition.page = i;
+          this.showSigBuyer = true;
+        }
+      }
+      if (this.secondSignatureField) {
+        this.sigSellerPosition = this._getPositionSignature(text, this.secondSignatureField);
+        if (this.sigSellerPosition.width > 0 && this.sigSellerPosition.height > 0) {
+          this.sigSellerPosition.page = i;
+          this.showSigSeller = true;
+        }
+      }
+    }
+  }
+
+  private _getPositionSignature(textItem: any, signatureField: string): TextDimension {
+    const sigItem: TextItem = <TextItem>textItem.items.find((i: any) => i.str.toLowerCase() === signatureField.toLowerCase());
+    if (sigItem) {
+      textItem.items.slice(textItem.items.indexOf(sigItem), 1);
+      return {
+        x: sigItem.transform[4],
+        y: sigItem.transform[5],
+        width: sigItem.width,
+        height: sigItem.height,
+        page: 0
+      };
+    }
+    return {x: 0, y: 0, width: 0, height: 0, page: 0}
+  }
+
+  private async _saveSignature(sig: string, dimensions: TextDimension): Promise<void> {
+    const jpgImage = await this.pdfDoc.embedPng(sig);
+    const page = await this.pdfDoc.getPage(dimensions.page);
+    page.drawImage(jpgImage, {
+      x: ((dimensions.x + (dimensions.width / 2)) - (200 / 2)),
+      y: ((dimensions.y + (dimensions.height / 2)) - (100 / 2)),
+      width: 200,
+      height: 100
+    });
+  }
+}

package/src/lib/components/docsign/docsign.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {DocsignComponent} from "./docsign.component";
+import {SignatureComponent} from "./component/signature/signature.component";
+import {SignaturesComponent} from "./component/signatures/signatures.component";
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    DocsignComponent,
+    SignatureComponent,
+    SignaturesComponent
+  ],
+  exports: [
+    DocsignComponent
+  ]
+})
+export class DocsignModule {
+
+}

package/src/lib/components/send-method-dialog/enums/send-option.ts

@@ -0,0 +1,6 @@
+export enum SendOption {
+  Email,
+  Print,
+  Pdf,
+  Xml
+}