import { h } from "@stencil/core";
export class VerdocsSigningProgress {
    constructor() {
        /**
         * Current field index (1-based)
         */
        this.current = 0;
        /**
         * Total number of fields
         */
        this.total = 0;
        /**
         * Display mode
         */
        this.mode = 'start';
        /**
         * Label to display for the current field
         */
        this.fieldLabel = '';
        /**
         * Whether the current field has been completed (shows success message)
         */
        this.fieldCompleted = false;
    }
    renderSuccessIcon() {
        return (h("svg", { width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM13.3584 7.64645C13.532 7.82001 13.5513 8.08944 13.4163 8.28431L13.3584 8.35355L9.35355 12.3584C9.17999 12.532 8.91056 12.5513 8.71569 12.4163L8.64645 12.3584L6.64645 10.3584C6.45118 10.1632 6.45118 9.84658 6.64645 9.65131C6.82001 9.47775 7.08944 9.45846 7.28431 9.59346L7.35355 9.65131L9 11.298L12.6513 7.64645C12.8466 7.45118 13.1632 7.45118 13.3584 7.64645Z", fill: "#107C10" })));
    }
    renderContent() {
        if (this.mode === 'start') {
            return h("div", { class: "field-label" }, this.fieldLabel);
        }
        if (this.fieldCompleted) {
            return (h("div", { class: "field-completed" }, h("div", { class: "icon" }, this.renderSuccessIcon()), h("span", { class: "text" }, "Successfully signed!")));
        }
        return h("div", { class: "field-label" }, this.fieldLabel);
    }
    renderFooter() {
        if (this.mode === 'start') {
            return (h("button", { class: "btn start", onClick: () => this.started.emit() }, "Start"));
        }
        return (h("div", { class: "nav-buttons" }, h("button", { class: "btn previous", disabled: this.current <= 1, onClick: () => this.previous.emit() }, "Previous"), h("button", { class: "btn next", disabled: this.current >= this.total, onClick: () => this.next.emit() }, "Next")));
    }
    renderCompleted() {
        return (h("div", { class: "card completed" }, h("div", { class: "header-completed" }, h("div", { class: "icon" }, this.renderSuccessIcon()), "Completed"), h("div", { class: "description" }, "You have entered all requested signatures. Select Submit to complete the signing process."), h("div", { class: "separator" }), h("button", { class: "btn submit", onClick: () => this.exit.emit() }, "Submit")));
    }
    render() {
        if (this.mode === 'completed') {
            return this.renderCompleted();
        }
        return (h("div", { class: "card" }, h("div", { class: "header" }, this.current, " of ", this.total, " fields"), h("div", { class: "body" }, this.renderContent()), h("div", { class: "separator" }), this.renderFooter()));
    }
    static get is() { return "verdocs-signing-progress"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-signing-progress.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-signing-progress.css"]
        };
    }
    static get properties() {
        return {
            "current": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Current field index (1-based)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "current",
                "defaultValue": "0"
            },
            "total": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Total number of fields"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "total",
                "defaultValue": "0"
            },
            "mode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'signing' | 'completed'",
                    "resolved": "\"completed\" | \"signing\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Display mode"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "mode",
                "defaultValue": "'start'"
            },
            "fieldLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label to display for the current field"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "field-label",
                "defaultValue": "''"
            },
            "fieldCompleted": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the current field has been completed (shows success message)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "field-completed",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "started",
                "name": "started",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when user clicks Start"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "next",
                "name": "next",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when user clicks Next"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "previous",
                "name": "previous",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when user clicks Previous"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "exit",
                "name": "exit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when user clicks Submit"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=verdocs-signing-progress.js.map
