@docuseal/angular 1.0.1 → 1.0.3

package/dist/fesm2022/docuseal-angular.mjs

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, Input, HostListener } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostBinding, HostListener } from '@angular/core';
 
 class DocusealFormComponent {
-    el;
     src = "";
     host = "cdn.docuseal.co";
     role = "";
@@ -25,175 +24,59 @@ class DocusealFormComponent {
     withSendCopyButton = true;
     allowToResubmit = true;
     allowTypedSignature = true;
-    sendCopyEmail = false;
+    sendCopyEmail = null;
     values = {};
     metadata = {};
     i18n = {};
     fields = [];
     readonlyFields = [];
-    onComplete = () => { };
-    onInit = () => { };
-    onLoad = () => { };
     customCss = "";
-    constructor(el) {
-        this.el = el;
-    }
-    get attributes() {
-        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
-            }
-        };
-    }
+    onComplete = new EventEmitter();
+    onInit = new EventEmitter();
+    onLoad = new EventEmitter();
+    get dataSrc() { return this.src; }
+    get dataEmail() { return this.email; }
+    get dataRole() { return this.role || this.submitter; }
+    get dataExternalId() { return this.externalId || this.applicationKey; }
+    get dataExpand() { return this.expand; }
+    get dataPreview() { return this.preview; }
+    get dataGoToLast() { return this.goToLast; }
+    get dataSkipFields() { return this.skipFields; }
+    get dataSendCopyEmail() { return this.sendCopyEmail; }
+    get dataWithTitle() { return this.withTitle; }
+    get dataLogo() { return this.logo; }
+    get dataLanguage() { return this.language; }
+    get dataWithFieldNames() { return this.withFieldNames; }
+    get dataWithDownloadButton() { return this.withDownloadButton; }
+    get dataAllowToResubmit() { return this.allowToResubmit; }
+    get dataAllowTypedSignature() { return this.allowTypedSignature; }
+    get dataCompletedRedirectUrl() { return this.completedRedirectUrl; }
+    get dataWithSendCopyButton() { return this.withSendCopyButton; }
+    get dataValues() { return JSON.stringify(this.values); }
+    get dataMetadata() { return JSON.stringify(this.metadata); }
+    get dataFields() { return JSON.stringify(this.fields); }
+    get dataI18n() { return JSON.stringify(this.i18n); }
+    get dataReadonlyFields() { return this.readonlyFields.join(','); }
+    get dataCompletedButtonTitle() { return this.completedButton.title; }
+    get dataCompletedButtonUrl() { return this.completedButton.url; }
+    get dataBackgroundColor() { return this.backgroundColor; }
+    get dataCustomCss() { return this.customCss; }
     ngAfterViewInit() {
-        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) {
-        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);
-            }
-        });
-    }
     onCompleteEvent(event) {
         if (this.onComplete) {
-            this.onComplete(event.detail);
+            this.onComplete.emit(event.detail);
         }
     }
     onInitEvent(event) {
         if (this.onInit) {
-            this.onInit(event.detail);
+            this.onInit.emit(event.detail);
         }
     }
     onLoadEvent(event) {
         if (this.onLoad) {
-            this.onLoad(event.detail);
+            this.onLoad.emit(event.detail);
         }
     }
     loadScript() {
@@ -205,15 +88,17 @@ class DocusealFormComponent {
         script.src = scriptSrc;
         document.head.appendChild(script);
     }
-    static ɵfac = function DocusealFormComponent_Factory(t) { return new (t || DocusealFormComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DocusealFormComponent, selectors: [["docuseal-form"]], hostBindings: function DocusealFormComponent_HostBindings(rf, ctx) { if (rf & 1) {
+    static ɵfac = function DocusealFormComponent_Factory(t) { return new (t || DocusealFormComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DocusealFormComponent, selectors: [["docuseal-form"]], hostVars: 27, hostBindings: function DocusealFormComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("completed", function DocusealFormComponent_completed_HostBindingHandler($event) { return ctx.onCompleteEvent($event); })("init", function DocusealFormComponent_init_HostBindingHandler($event) { return ctx.onInitEvent($event); })("load", function DocusealFormComponent_load_HostBindingHandler($event) { return ctx.onLoadEvent($event); });
-        } }, inputs: { src: "src", host: "host", role: "role", submitter: "submitter", expand: "expand", preview: "preview", email: "email", applicationKey: "applicationKey", externalId: "externalId", backgroundColor: "backgroundColor", logo: "logo", language: "language", completedRedirectUrl: "completedRedirectUrl", completedButton: "completedButton", goToLast: "goToLast", skipFields: "skipFields", withTitle: "withTitle", withFieldNames: "withFieldNames", withDownloadButton: "withDownloadButton", withSendCopyButton: "withSendCopyButton", allowToResubmit: "allowToResubmit", allowTypedSignature: "allowTypedSignature", sendCopyEmail: "sendCopyEmail", values: "values", metadata: "metadata", i18n: "i18n", fields: "fields", readonlyFields: "readonlyFields", onComplete: "onComplete", onInit: "onInit", onLoad: "onLoad", customCss: "customCss" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 0, vars: 0, template: function DocusealFormComponent_Template(rf, ctx) { }, encapsulation: 2 });
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-src", ctx.dataSrc)("data-email", ctx.dataEmail)("data-role", ctx.dataRole)("data-external-id", ctx.dataExternalId)("data-expand", ctx.dataExpand)("data-preview", ctx.dataPreview)("data-go-to-last", ctx.dataGoToLast)("data-skip-fields", ctx.dataSkipFields)("data-send-copy-email", ctx.dataSendCopyEmail)("data-with-title", ctx.dataWithTitle)("data-logo", ctx.dataLogo)("data-language", ctx.dataLanguage)("data-with-field-names", ctx.dataWithFieldNames)("data-with-download-button", ctx.dataWithDownloadButton)("data-allow-to-resubmit", ctx.dataAllowToResubmit)("data-allow-typed-signature", ctx.dataAllowTypedSignature)("data-completed-redirect-url", ctx.dataCompletedRedirectUrl)("data-with-send-copy-button", ctx.dataWithSendCopyButton)("data-values", ctx.dataValues)("data-metadata", ctx.dataMetadata)("data-fields", ctx.dataFields)("data-i18n", ctx.dataI18n)("data-readonly-fields", ctx.dataReadonlyFields)("data-completed-button-title", ctx.dataCompletedButtonTitle)("data-completed-button-url", ctx.dataCompletedButtonUrl)("data-background-color", ctx.dataBackgroundColor)("data-custom-css", ctx.dataCustomCss);
+        } }, inputs: { src: "src", host: "host", role: "role", submitter: "submitter", expand: "expand", preview: "preview", email: "email", applicationKey: "applicationKey", externalId: "externalId", backgroundColor: "backgroundColor", logo: "logo", language: "language", completedRedirectUrl: "completedRedirectUrl", completedButton: "completedButton", goToLast: "goToLast", skipFields: "skipFields", withTitle: "withTitle", withFieldNames: "withFieldNames", withDownloadButton: "withDownloadButton", withSendCopyButton: "withSendCopyButton", allowToResubmit: "allowToResubmit", allowTypedSignature: "allowTypedSignature", sendCopyEmail: "sendCopyEmail", values: "values", metadata: "metadata", i18n: "i18n", fields: "fields", readonlyFields: "readonlyFields", customCss: "customCss" }, outputs: { onComplete: "onComplete", onInit: "onInit", onLoad: "onLoad" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 0, vars: 0, template: function DocusealFormComponent_Template(rf, ctx) { }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DocusealFormComponent, [{
         type: Component,
         args: [{ selector: "docuseal-form", standalone: true, template: "" }]
-    }], () => [{ type: i0.ElementRef }], { src: [{
+    }], null, { src: [{
             type: Input
         }], host: [{
             type: Input
@@ -269,14 +154,95 @@ class DocusealFormComponent {
             type: Input
         }], readonlyFields: [{
             type: Input
-        }], onComplete: [{
+        }], customCss: [{
             type: Input
+        }], onComplete: [{
+            type: Output
         }], onInit: [{
-            type: Input
+            type: Output
         }], onLoad: [{
-            type: Input
-        }], customCss: [{
-            type: Input
+            type: Output
+        }], dataSrc: [{
+            type: HostBinding,
+            args: ["attr.data-src"]
+        }], dataEmail: [{
+            type: HostBinding,
+            args: ["attr.data-email"]
+        }], dataRole: [{
+            type: HostBinding,
+            args: ["attr.data-role"]
+        }], dataExternalId: [{
+            type: HostBinding,
+            args: ["attr.data-external-id"]
+        }], dataExpand: [{
+            type: HostBinding,
+            args: ["attr.data-expand"]
+        }], dataPreview: [{
+            type: HostBinding,
+            args: ["attr.data-preview"]
+        }], dataGoToLast: [{
+            type: HostBinding,
+            args: ["attr.data-go-to-last"]
+        }], dataSkipFields: [{
+            type: HostBinding,
+            args: ["attr.data-skip-fields"]
+        }], dataSendCopyEmail: [{
+            type: HostBinding,
+            args: ["attr.data-send-copy-email"]
+        }], dataWithTitle: [{
+            type: HostBinding,
+            args: ["attr.data-with-title"]
+        }], dataLogo: [{
+            type: HostBinding,
+            args: ["attr.data-logo"]
+        }], dataLanguage: [{
+            type: HostBinding,
+            args: ["attr.data-language"]
+        }], dataWithFieldNames: [{
+            type: HostBinding,
+            args: ["attr.data-with-field-names"]
+        }], dataWithDownloadButton: [{
+            type: HostBinding,
+            args: ["attr.data-with-download-button"]
+        }], dataAllowToResubmit: [{
+            type: HostBinding,
+            args: ["attr.data-allow-to-resubmit"]
+        }], dataAllowTypedSignature: [{
+            type: HostBinding,
+            args: ["attr.data-allow-typed-signature"]
+        }], dataCompletedRedirectUrl: [{
+            type: HostBinding,
+            args: ["attr.data-completed-redirect-url"]
+        }], dataWithSendCopyButton: [{
+            type: HostBinding,
+            args: ["attr.data-with-send-copy-button"]
+        }], dataValues: [{
+            type: HostBinding,
+            args: ["attr.data-values"]
+        }], dataMetadata: [{
+            type: HostBinding,
+            args: ["attr.data-metadata"]
+        }], dataFields: [{
+            type: HostBinding,
+            args: ["attr.data-fields"]
+        }], dataI18n: [{
+            type: HostBinding,
+            args: ["attr.data-i18n"]
+        }], dataReadonlyFields: [{
+            type: HostBinding,
+            args: ["attr.data-readonly-fields"]
+        }], dataCompletedButtonTitle: [{
+            type: HostBinding,
+            args: ["attr.data-completed-button-title"]
+        }], dataCompletedButtonUrl: [{
+            type: HostBinding,
+            args: ["attr.data-completed-button-url"]
+        }], dataBackgroundColor: [{
+            type: HostBinding,
+            args: ["attr.data-background-color"]
+        }], dataCustomCss: [{
+            type: HostBinding,
+            args: ["attr.data-custom-css"]
         }], onCompleteEvent: [{
             type: HostListener,
             args: ['completed', ['$event']]
@@ -290,7 +256,6 @@ class DocusealFormComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DocusealFormComponent, { className: "DocusealFormComponent" }); })();
 
 class DocusealBuilderComponent {
-    el;
     token = "";
     host = "cdn.docuseal.co";
     language = "en";
@@ -311,161 +276,57 @@ class DocusealBuilderComponent {
     drawFieldType = "text";
     customButton = { title: "", url: "" };
     backgroundColor = "";
-    onLoad = () => { };
-    onUpload = () => { };
-    onSend = () => { };
-    onSave = () => { };
     sendButtonText = "";
     saveButtonText = "";
     customCss = "";
-    constructor(el) {
-        this.el = el;
-    }
-    get attributes() {
-        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
-            }
-        };
-    }
+    onLoad = new EventEmitter();
+    onUpload = new EventEmitter();
+    onSend = new EventEmitter();
+    onSave = new EventEmitter();
+    get dataToken() { return this.token; }
+    get dataPreview() { return this.preview; }
+    get dataLanguage() { return this.language; }
+    get dataAutosave() { return this.autosave; }
+    get dataSendButtonText() { return this.sendButtonText; }
+    get dataSaveButtonText() { return this.saveButtonText; }
+    get dataRoles() { return this.roles.join(','); }
+    get dataFieldTypes() { return this.fieldTypes.join(','); }
+    get dataDrawFieldType() { return this.drawFieldType; }
+    get dataFields() { return JSON.stringify(this.fields); }
+    get dataI18n() { return JSON.stringify(this.i18n); }
+    get dataCustomButtonTitle() { return this.customButton.title; }
+    get dataCustomButtonUrl() { return this.customButton.url; }
+    get dataWithRecipientsButton() { return this.withRecipientsButton; }
+    get dataWithSendButton() { return this.withSendButton; }
+    get dataWithDocumentsList() { return this.withDocumentsList; }
+    get dataWithFieldsList() { return this.withFieldsList; }
+    get dataWithTitle() { return this.withTitle; }
+    get dataOnlyDefinedFields() { return this.onlyDefinedFields; }
+    get dataWithUploadButton() { return this.withUploadButton; }
+    get dataWithSignYourselfButton() { return this.withSignYourselfButton; }
+    get dataBackgroundColor() { return this.backgroundColor; }
+    get dataCustomCss() { return this.customCss; }
     ngAfterViewInit() {
-        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) {
-        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);
-            }
-        });
-    }
     onSendEvent(event) {
         if (this.onSend) {
-            this.onSend(event.detail);
+            this.onSend.emit(event.detail);
         }
     }
     onLoadEvent(event) {
         if (this.onLoad) {
-            this.onLoad(event.detail);
+            this.onLoad.emit(event.detail);
         }
     }
     onUploadEvent(event) {
         if (this.onUpload) {
-            this.onUpload(event.detail);
+            this.onUpload.emit(event.detail);
         }
     }
     onSaveEvent(event) {
         if (this.onSave) {
-            this.onSave(event.detail);
+            this.onSave.emit(event.detail);
         }
     }
     loadScript() {
@@ -477,15 +338,17 @@ class DocusealBuilderComponent {
         script.src = scriptSrc;
         document.head.appendChild(script);
     }
-    static ɵfac = function DocusealBuilderComponent_Factory(t) { return new (t || DocusealBuilderComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DocusealBuilderComponent, selectors: [["docuseal-builder"]], hostBindings: function DocusealBuilderComponent_HostBindings(rf, ctx) { if (rf & 1) {
+    static ɵfac = function DocusealBuilderComponent_Factory(t) { return new (t || DocusealBuilderComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DocusealBuilderComponent, selectors: [["docuseal-builder"]], hostVars: 23, hostBindings: function DocusealBuilderComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("send", function DocusealBuilderComponent_send_HostBindingHandler($event) { return ctx.onSendEvent($event); })("load", function DocusealBuilderComponent_load_HostBindingHandler($event) { return ctx.onLoadEvent($event); })("upload", function DocusealBuilderComponent_upload_HostBindingHandler($event) { return ctx.onUploadEvent($event); })("save", function DocusealBuilderComponent_save_HostBindingHandler($event) { return ctx.onSaveEvent($event); });
-        } }, inputs: { token: "token", host: "host", language: "language", preview: "preview", autosave: "autosave", withRecipientsButton: "withRecipientsButton", withDocumentsList: "withDocumentsList", withFieldsList: "withFieldsList", withSendButton: "withSendButton", withTitle: "withTitle", onlyDefinedFields: "onlyDefinedFields", withSignYourselfButton: "withSignYourselfButton", withUploadButton: "withUploadButton", roles: "roles", fields: "fields", i18n: "i18n", fieldTypes: "fieldTypes", drawFieldType: "drawFieldType", customButton: "customButton", backgroundColor: "backgroundColor", onLoad: "onLoad", onUpload: "onUpload", onSend: "onSend", onSave: "onSave", sendButtonText: "sendButtonText", saveButtonText: "saveButtonText", customCss: "customCss" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 0, vars: 0, template: function DocusealBuilderComponent_Template(rf, ctx) { }, encapsulation: 2 });
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-token", ctx.dataToken)("data-preview", ctx.dataPreview)("data-language", ctx.dataLanguage)("data-autosave", ctx.dataAutosave)("data-send-button-text", ctx.dataSendButtonText)("data-save-button-text", ctx.dataSaveButtonText)("data-roles", ctx.dataRoles)("data-field-types", ctx.dataFieldTypes)("data-draw-field-type", ctx.dataDrawFieldType)("data-fields", ctx.dataFields)("data-i18n", ctx.dataI18n)("data-custom-button-title", ctx.dataCustomButtonTitle)("data-custom-button-url", ctx.dataCustomButtonUrl)("data-with-recipients-button", ctx.dataWithRecipientsButton)("data-with-send-button", ctx.dataWithSendButton)("data-with-documents-list", ctx.dataWithDocumentsList)("data-with-fields-list", ctx.dataWithFieldsList)("data-with-title", ctx.dataWithTitle)("data-only-defined-fields", ctx.dataOnlyDefinedFields)("data-with-upload-button", ctx.dataWithUploadButton)("data-with-sign-yourself-button", ctx.dataWithSignYourselfButton)("data-background-color", ctx.dataBackgroundColor)("data-custom-css", ctx.dataCustomCss);
+        } }, inputs: { token: "token", host: "host", language: "language", preview: "preview", autosave: "autosave", withRecipientsButton: "withRecipientsButton", withDocumentsList: "withDocumentsList", withFieldsList: "withFieldsList", withSendButton: "withSendButton", withTitle: "withTitle", onlyDefinedFields: "onlyDefinedFields", withSignYourselfButton: "withSignYourselfButton", withUploadButton: "withUploadButton", roles: "roles", fields: "fields", i18n: "i18n", fieldTypes: "fieldTypes", drawFieldType: "drawFieldType", customButton: "customButton", backgroundColor: "backgroundColor", sendButtonText: "sendButtonText", saveButtonText: "saveButtonText", customCss: "customCss" }, outputs: { onLoad: "onLoad", onUpload: "onUpload", onSend: "onSend", onSave: "onSave" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 0, vars: 0, template: function DocusealBuilderComponent_Template(rf, ctx) { }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DocusealBuilderComponent, [{
         type: Component,
         args: [{ selector: "docuseal-builder", standalone: true, template: "" }]
-    }], () => [{ type: i0.ElementRef }], { token: [{
+    }], null, { token: [{
             type: Input
         }], host: [{
             type: Input
@@ -525,20 +388,89 @@ class DocusealBuilderComponent {
             type: Input
         }], backgroundColor: [{
             type: Input
-        }], onLoad: [{
-            type: Input
-        }], onUpload: [{
-            type: Input
-        }], onSend: [{
-            type: Input
-        }], onSave: [{
-            type: Input
         }], sendButtonText: [{
             type: Input
         }], saveButtonText: [{
             type: Input
         }], customCss: [{
             type: Input
+        }], onLoad: [{
+            type: Output
+        }], onUpload: [{
+            type: Output
+        }], onSend: [{
+            type: Output
+        }], onSave: [{
+            type: Output
+        }], dataToken: [{
+            type: HostBinding,
+            args: ["attr.data-token"]
+        }], dataPreview: [{
+            type: HostBinding,
+            args: ["attr.data-preview"]
+        }], dataLanguage: [{
+            type: HostBinding,
+            args: ["attr.data-language"]
+        }], dataAutosave: [{
+            type: HostBinding,
+            args: ["attr.data-autosave"]
+        }], dataSendButtonText: [{
+            type: HostBinding,
+            args: ["attr.data-send-button-text"]
+        }], dataSaveButtonText: [{
+            type: HostBinding,
+            args: ["attr.data-save-button-text"]
+        }], dataRoles: [{
+            type: HostBinding,
+            args: ["attr.data-roles"]
+        }], dataFieldTypes: [{
+            type: HostBinding,
+            args: ["attr.data-field-types"]
+        }], dataDrawFieldType: [{
+            type: HostBinding,
+            args: ["attr.data-draw-field-type"]
+        }], dataFields: [{
+            type: HostBinding,
+            args: ["attr.data-fields"]
+        }], dataI18n: [{
+            type: HostBinding,
+            args: ["attr.data-i18n"]
+        }], dataCustomButtonTitle: [{
+            type: HostBinding,
+            args: ["attr.data-custom-button-title"]
+        }], dataCustomButtonUrl: [{
+            type: HostBinding,
+            args: ["attr.data-custom-button-url"]
+        }], dataWithRecipientsButton: [{
+            type: HostBinding,
+            args: ["attr.data-with-recipients-button"]
+        }], dataWithSendButton: [{
+            type: HostBinding,
+            args: ["attr.data-with-send-button"]
+        }], dataWithDocumentsList: [{
+            type: HostBinding,
+            args: ["attr.data-with-documents-list"]
+        }], dataWithFieldsList: [{
+            type: HostBinding,
+            args: ["attr.data-with-fields-list"]
+        }], dataWithTitle: [{
+            type: HostBinding,
+            args: ["attr.data-with-title"]
+        }], dataOnlyDefinedFields: [{
+            type: HostBinding,
+            args: ["attr.data-only-defined-fields"]
+        }], dataWithUploadButton: [{
+            type: HostBinding,
+            args: ["attr.data-with-upload-button"]
+        }], dataWithSignYourselfButton: [{
+            type: HostBinding,
+            args: ["attr.data-with-sign-yourself-button"]
+        }], dataBackgroundColor: [{
+            type: HostBinding,
+            args: ["attr.data-background-color"]
+        }], dataCustomCss: [{
+            type: HostBinding,
+            args: ["attr.data-custom-css"]
         }], onSendEvent: [{
             type: HostListener,
             args: ['send', ['$event']]