@docuseal/angular 1.0.0

package/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "docuseal",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "docuseal",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2023 Oleksandr Turchyn
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+# DocuSeal Angular Components
+
+This package provides a convenient way to embed [DocuSeal](https://www.docuseal.co) into Angular apps. Sign documents and create document forms directly in your apps.
+
+![Docuseal Form](https://github.com/docusealco/docuseal-vue/assets/1176367/828f9f53-3131-494c-8e37-5c74fa94cfa8)
+
+## Installation
+
+```bash
+npm install @docuseal/angular
+```
+
+## Documentation
+
+For detailed documentation, please click [here](https://www.docuseal.co/docs/embedded).
+
+## Usage
+
+### Signing Form
+
+Copy public DocuSeal form URL from [https://docuseal.co](https://docuseal.co) and use it in the `src` component prop:
+
+```typescript
+import { Component, } from '@angular/core';
+import { DocusealFormComponent } from '@docuseal/angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [DocusealFormComponent],
+  template: `
+    <div class="app">
+      <docuseal-form
+        src="https://docuseal.co/d/LEVGR9rhZYf86M"
+        email="signer@example.com">
+      </docuseal-form>
+    </div>
+  `
+})
+export class AppComponent {}
+```
+
+### Form Builder
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { DocusealBuilderComponent } from '@docuseal/angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [DocusealBuilderComponent],
+  template: `
+    <div class="app">
+      <ng-container *ngIf="token">
+        <docuseal-builder [token]="token"></docuseal-builder>
+      </ng-container>
+    </div>
+  `
+})
+export class AppComponent implements OnInit {
+  token: string = ''
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {
+    this.http.post('/api/docuseal/builder_token', {}).subscribe((data: any) => {
+      this.token = data.token;
+    });
+  }
+}
+```
+
+# License
+
+MIT

package/angular.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "projects": {
+    "@docuseal/angular": {
+      "root": "src",
+      "projectType": "library",
+      "prefix": "docuseal",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "tsconfig.json",
+            "project": "ng-package.json"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false,
+    "schematicCollections": ["@angular-eslint/schematics"]
+  }
+}

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@docuseal/angular",
+  "version": "1.0.0",
+  "description": "DocuSeal Angular components to integrate documents signing process into apps. ✍️",
+  "esm2022": "dist/esm2022/docuseal-angular.mjs",
+  "esm": "dist/esm2022/docuseal-angular.mjs",
+  "default": "dist/fesm2022/docuseal-angular.mjs",
+  "module": "dist/fesm2022/docuseal-angular.mjs",
+  "types": "dist/index.d.ts",
+  "author": "Oleksandr Turchyn <alex@docuseal.co>",
+  "license": "MIT",
+  "homepage": "https://www.docuseal.co/docs/embedded",
+  "bugs": {
+    "url": "https://github.com/docusealco/docuseal-angular/issues"
+  },
+  "repository": "https://github.com/docusealco/docuseal-angular",
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/template-parser": "17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/cli": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@types/jasmine": "~5.1.0",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/parser": "7.2.0",
+    "eslint": "^8.57.0",
+    "jasmine-core": "~5.1.0",
+    "ng-packagr": "^17.3.0",
+    "prettier": "^3.2.5",
+    "typescript": "~5.4.2"
+  },
+  "keywords": [
+    "angular",
+    "angular-component",
+    "esignature",
+    "documents"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "lint": "ng lint",
+    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|d.ts|json)\""
+  }
+}

package/src/builder.component.ts

@@ -0,0 +1,225 @@
+import { Component, Input, ElementRef, HostListener, SimpleChanges } from "@angular/core"
+
+interface DocusealField {
+  name: string,
+  type?: string,
+  role?: string,
+  default_value?: string,
+}
+
+interface AfterViewInit {
+  ngAfterViewInit(): void
+}
+interface OnChanges {
+  ngOnChanges(changes: SimpleChanges): void
+}
+@Component({
+  selector: "docuseal-builder",
+  standalone: true,
+  template: "",
+  styles: []
+})
+
+export class DocusealBuilderComponent implements AfterViewInit, OnChanges {
+  @Input() token: string = ""
+  @Input() host: string = "cdn.docuseal.co"
+  @Input() language: string = "en"
+  @Input() preview: boolean = false
+  @Input() autosave: boolean = true
+  @Input() withRecipientsButton: boolean = true
+  @Input() withDocumentsList: boolean = true
+  @Input() withFieldsList: boolean = true
+  @Input() withSendButton: boolean = true
+  @Input() withTitle: boolean = true
+  @Input() onlyDefinedFields: boolean = false
+  @Input() withSignYourselfButton: boolean = true
+  @Input() withUploadButton: boolean = true
+  @Input() roles: string[] = []
+  @Input() fields: DocusealField[] = []
+  @Input() i18n: object = {}
+  @Input() fieldTypes: string[] = []
+  @Input() drawFieldType: string = "text"
+  @Input() customButton: { title: string, url: string } = { title: "", url: "" }
+  @Input() backgroundColor: string = ""
+  @Input() onLoad: (detail: any) => void = () => {}
+  @Input() onUpload: (detail: any) => void = () => {}
+  @Input() onSend: (detail: any) => void = () => {}
+  @Input() onSave: (detail: any) => void = () => {}
+  @Input() sendButtonText: string = ""
+  @Input() saveButtonText: string = ""
+  @Input() customCss: string = ""
+
+  constructor(private el: ElementRef) {}
+
+  get attributes (): { [key: string]: any } {
+    return {
+      src: {
+        name: "data-token",
+        value: () => this.token
+      },
+      preview: {
+        name: "data-preview",
+        value: () => this.preview
+      },
+      language: {
+        name: "data-language",
+        value: () => this.language
+      },
+      autosave: {
+        name: "data-autosave",
+        value: () => this.autosave
+      },
+      sendButtonText: {
+        name: "data-send-button-text",
+        value: () => this.sendButtonText
+      },
+      saveButtonText: {
+        name: "data-save-button-text",
+        value: () => this.saveButtonText
+      },
+      roles: {
+        name: "data-roles",
+        value: () => this.roles.join(',')
+      },
+      fieldTypes: {
+        name: "data-field-types",
+        value: () => this.fieldTypes.join(',')
+      },
+      drawFieldType: {
+        name: "data-draw-field-type",
+        value: () => this.drawFieldType
+      },
+      fields: {
+        name: "data-fields",
+        value: () => JSON.stringify(this.fields)
+      },
+      i18n: {
+        name: "data-i18n",
+        value: () => JSON.stringify(this.i18n)
+      },
+      customButton: [
+        {
+          name: "data-custom-button-title",
+          value: () => this.customButton.title
+        },
+        {
+          name: "data-custom-button-url",
+          value: () => this.customButton.url
+        }
+      ],
+      withRecipientsButton: {
+        name: "data-with-recipients-button",
+        value: () => this.withRecipientsButton
+      },
+      withSendButton: {
+        name: "data-with-send-button",
+        value: () => this.withSendButton
+      },
+      withDocumentsList: {
+        name: "data-with-documents-list",
+        value: () => this.withDocumentsList
+      },
+      withFieldsList: {
+        name: "data-with-fields-list",
+        value: () => this.withFieldsList
+      },
+      withTitle: {
+        name: "data-with-title",
+        value: () => this.withTitle
+      },
+      onlyDefinedFields: {
+        name: "data-only-defined-fields",
+        value: () => this.onlyDefinedFields
+      },
+      withUploadButton: {
+        name: "data-with-upload-button",
+        value: () => this.withUploadButton
+      },
+      withSignYourselfButton: {
+        name: "data-with-sign-yourself-button",
+        value: () => this.withSignYourselfButton
+      },
+      backgroundColor: {
+        name: "data-background-color",
+        value: () => this.backgroundColor
+      },
+      customCss: {
+        name: "data-custom-css",
+        value: () => this.customCss
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    const builder = this.el.nativeElement;
+
+    Object.entries(this.attributes).forEach(([_, attribute]) => {
+      if (Array.isArray(attribute)) {
+        attribute.forEach((attr) => {
+          builder.setAttribute(attr.name, attr.value())
+        })
+      } else if (attribute) {
+        builder.setAttribute(attribute.name, attribute.value())
+      }
+    })
+
+    this.loadScript()
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const builder = this.el.nativeElement;
+    const attributes = this.attributes
+
+    Object.entries(changes).forEach(([key, change]) => {
+      const attribute = attributes[key]
+
+      if (Array.isArray(attribute)) {
+        attribute.forEach((attr) => {
+          builder.setAttribute(attr.name, attr.value())
+        })
+      } else if (attribute) {
+        builder.setAttribute(attribute.name, change.currentValue)
+      }
+    })
+  }
+
+  @HostListener('send', ['$event'])
+  onSendEvent(event: CustomEvent): void {
+    if (this.onSend) {
+      this.onSend(event.detail)
+    }
+  }
+
+  @HostListener('load', ['$event'])
+  onLoadEvent(event: CustomEvent): void {
+    if (this.onLoad) {
+      this.onLoad(event.detail)
+    }
+  }
+
+  @HostListener('upload', ['$event'])
+  onUploadEvent(event: CustomEvent): void {
+    if (this.onUpload) {
+      this.onUpload(event.detail)
+    }
+  }
+
+  @HostListener('save', ['$event'])
+  onSaveEvent(event: CustomEvent): void {
+    if (this.onSave) {
+      this.onSave(event.detail)
+    }
+  }
+
+  loadScript(): void {
+    const scriptId = 'docuseal-builder-script'
+    const scriptSrc = `https://${this.host}/js/builder.js`
+    const script = document.createElement("script")
+
+    script.id = scriptId
+    script.async = true
+    script.src = scriptSrc
+
+    document.head.appendChild(script)
+  }
+}

package/src/form.component.ts

@@ -0,0 +1,240 @@
+import { Component, Input, ElementRef, HostListener, SimpleChanges } from "@angular/core"
+
+interface DocusealField {
+  name: string,
+  title?: string,
+  type?: string,
+  position?: number,
+  required?: boolean,
+}
+
+interface AfterViewInit {
+  ngAfterViewInit(): void
+}
+interface OnChanges {
+  ngOnChanges(changes: SimpleChanges): void
+}
+@Component({
+  selector: "docuseal-form",
+  standalone: true,
+  template: "",
+  styles: []
+})
+
+export class DocusealFormComponent implements AfterViewInit, OnChanges {
+  @Input() src: string = ""
+  @Input() host: string = "cdn.docuseal.co"
+  @Input() role: string = ""
+  @Input() submitter: string = "" // Backward compatibility
+  @Input() expand: boolean = true
+  @Input() preview: boolean = false
+  @Input() email: string = ""
+  @Input() applicationKey: string = ""
+  @Input() externalId: string = ""
+  @Input() backgroundColor: string = ""
+  @Input() logo: string = ""
+  @Input() language: string = ""
+  @Input() completedRedirectUrl: string = ""
+  @Input() completedButton: { title: string, url: string } = { title: "", url: "" }
+  @Input() goToLast: boolean = true
+  @Input() skipFields: boolean = false
+  @Input() withTitle: boolean = true
+  @Input() withFieldNames: boolean = true
+  @Input() withDownloadButton: boolean = true
+  @Input() withSendCopyButton: boolean = true
+  @Input() allowToResubmit: boolean = true
+  @Input() allowTypedSignature: boolean = true
+  @Input() sendCopyEmail: boolean = false
+  @Input() values: object = {}
+  @Input() metadata: object = {}
+  @Input() i18n: object = {}
+  @Input() fields: DocusealField[] = []
+  @Input() readonlyFields: string[] = []
+  @Input() onComplete: (detail: any) => void = () => {}
+  @Input() onInit: (detail: any) => void = () => {}
+  @Input() onLoad: (detail: any) => void = () => {}
+  @Input() customCss: string = ""
+
+  constructor(private el: ElementRef) {}
+
+  get attributes (): { [key: string]: any } {
+    return {
+      src: {
+        name: "data-src",
+        value: () => this.src
+      },
+      email: {
+        name: "data-email",
+        value: () => this.email
+      },
+      role: {
+        name: "data-role",
+        value: () => this.role || this.submitter
+      },
+      externalId: {
+        name: "data-external-id",
+        value: () => this.externalId || this.applicationKey
+      },
+      expand: {
+        name: "data-expand",
+        value: () => this.expand
+      },
+      preview: {
+        name: "data-preview",
+        value: () => this.preview
+      },
+      goToLast: {
+        name: "data-go-to-last",
+        value: () => this.goToLast
+      },
+      skipFields: {
+        name: "data-skip-fields",
+        value: () => this.skipFields
+      },
+      sendCopyEmail: {
+        name: "data-send-copy-email",
+        value: () => this.sendCopyEmail
+      },
+      withTitle: {
+        name: "data-with-title",
+        value: () => this.withTitle
+      },
+      logo: {
+        name: "data-logo",
+        value: () => this.logo
+      },
+      language: {
+        name: "data-language",
+        value: () => this.language
+      },
+      withFieldNames: {
+        name: "data-with-field-names",
+        value: () => this.withFieldNames
+      },
+      withDownloadButton: {
+        name: "data-with-download-button",
+        value: () => this.withDownloadButton
+      },
+      allowToResubmit: {
+        name: "data-allow-to-resubmit",
+        value: () => this.allowToResubmit
+      },
+      allowTypedSignature: {
+        name: "data-allow-typed-signature",
+        value: () => this.allowTypedSignature
+      },
+      completedRedirectUrl: {
+        name: "data-completed-redirect-url",
+        value: () => this.completedRedirectUrl
+      },
+      withSendCopyButton: {
+        name: "data-with-send-copy-button",
+        value: () => this.withSendCopyButton
+      },
+      values: {
+        name: "data-values",
+        value: () => JSON.stringify(this.values)
+      },
+      metadata: {
+        name: "data-metadata",
+        value: () => JSON.stringify(this.metadata)
+      },
+      fields: {
+        name: "data-fields",
+        value: () => JSON.stringify(this.fields)
+      },
+      i18n: {
+        name: "data-i18n",
+        value: () => JSON.stringify(this.i18n)
+      },
+      readonlyFields: {
+        name: "data-readonly-fields",
+        value: () => this.readonlyFields.join(',')
+      },
+      completedButton: [
+        {
+          name: "data-completed-button-title",
+          value: () => this.completedButton.title
+        },
+        {
+          name: "data-completed-button-url",
+          value: () => this.completedButton.url
+        }
+      ],
+      backgroundColor: {
+        name: "data-background-color",
+        value: () => this.backgroundColor
+      },
+      customCss: {
+        name: "data-custom-css",
+        value: () => this.customCss
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    const form = this.el.nativeElement;
+
+    Object.entries(this.attributes).forEach(([_, attribute]) => {
+      if (Array.isArray(attribute)) {
+        attribute.forEach((attr) => {
+          form.setAttribute(attr.name, attr.value())
+        })
+      } else {
+        form.setAttribute(attribute.name, attribute.value())
+      }
+    })
+
+    this.loadScript()
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const form = this.el.nativeElement;
+    const attributes = this.attributes
+
+    Object.entries(changes).forEach(([key, change]) => {
+      const attribute = attributes[key]
+
+      if (Array.isArray(attribute)) {
+        attribute.forEach((attr) => {
+          form.setAttribute(attr.name, attr.value())
+        })
+      } else if (attribute) {
+        form.setAttribute(attribute.name, change.currentValue)
+      }
+    })
+  }
+
+  @HostListener('completed', ['$event'])
+  onCompleteEvent(event: CustomEvent): void {
+    if (this.onComplete) {
+      this.onComplete(event.detail)
+    }
+  }
+
+  @HostListener('init', ['$event'])
+  onInitEvent(event: CustomEvent): void {
+    if (this.onInit) {
+      this.onInit(event.detail)
+    }
+  }
+
+  @HostListener('load', ['$event'])
+  onLoadEvent(event: CustomEvent): void {
+    if (this.onLoad) {
+      this.onLoad(event.detail)
+    }
+  }
+
+  loadScript(): void {
+    const scriptId = "docuseal-form-script"
+    const scriptSrc = `https://${this.host}/js/form.js`
+    const script = document.createElement("script")
+
+    script.id = scriptId
+    script.async = true
+    script.src = scriptSrc
+
+    document.head.appendChild(script)
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,2 @@
+export * from "./form.component";
+export * from "./builder.component";

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "allowJs": true, // Allow JavaScript files to be compiled
+    "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
+    "baseUrl": "src", // Base directory to resolve non-absolute module names
+    "declaration": true, // Generate corresponding .d.ts file
+    "esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
+    "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
+    "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
+    "isolatedModules": true, // Unconditionally emit imports for unresolved files
+    "lib": ["ES2022", "dom"], // List of library files to be included in the compilation
+    "module": "ES2022", // Specify module code generation
+    "moduleResolution": "node", // Resolve modules using Node.js style
+    "noEmit": false, // Do not emit output (meaning do not compile code, only perform type checking)
+    "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement
+    "noUnusedLocals": true, // Report errors on unused locals
+    "noUnusedParameters": true, // Report errors on unused parameters
+    "resolveJsonModule": true, // Include modules imported with .json extension
+    "outDir": "./dist",
+    "skipLibCheck": true, // Skip type checking of all declaration files
+    "sourceMap": true, // Generate corrresponding .map file
+    "strict": true, // Enable all strict type checking options
+    "target": "ES2022" // Specify ECMAScript target version,
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false, // Use the new message ID format
+    "strictInjectionParameters": true, // Ensure that the parameters for the DI token match the constructor
+    "strictInputAccessModifiers": true, // Ensure that the accessors of the directive inputs match the declared type
+    "strictTemplates": true // Ensure that the templates are type-safe
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}