{"version":3,"file":"electronicSignature.obs.js","sources":["../../../Framework/Controls/electronicSignature.obs"],"sourcesContent":["<!-- Copyright by the Spark Development Network; Licensed under the Rock Community License -->\n<template>\n    <div>\n        <div v-if=\"isSigning\" class=\"signature-entry\">\n            <RockForm @submit=\"onSubmit\">\n                <div v-if=\"isDrawn\" class=\"signature-entry-drawn\">\n                    <div v-show=\"false\">\n                        <TextBox :modelValue=\"signatureData\" label=\"Signature\" rules=\"required\" />\n                    </div>\n\n                    <span class=\"signature-entry-instructions text-muted small\">Use mouse or finger to sign below.</span>\n\n                    <div ref=\"signatureCanvasContainer\" class=\"signature-entry-drawn-container position-relative d-flex align-items-end\">\n                        <div class=\"signature-entry-canvas-col\">\n                            <canvas ref=\"signatureCanvas\" class=\"e-signature-pad\" style=\"border-bottom: 1px solid #c4c4c4;\"></canvas>\n                        </div>\n\n                        <div class=\"signature-entry-clear-col\">\n                            <a class=\"btn btn-link p-1 p-md-2 text-color\" title=\"Clear Signature\" @click.prevent=\"onClearClick\"><i class=\"fa fa-2x fa-undo\"></i></a>\n                        </div>\n                    </div>\n                </div>\n\n                <div v-else class=\"signature-entry-typed\">\n                    <TextBox v-model=\"signedByName\"\n                             label=\"Type Name\"\n                             rules=\"required\" />\n                </div>\n\n                <div class=\"signature-entry-agreement\">\n                    By clicking the sign button below, I agree to the above document and understand this is a legal representation of my signature.\n                </div>\n\n                <div class=\"text-right\">\n                    <RockButton type=\"submit\" btnType=\"primary\" btnSize=\"xs\">Sign</RockButton>\n                </div>\n            </RockForm>\n        </div>\n\n        <div v-else class=\"signature-entry-complete\">\n            <RockForm @submit=\"onSubmit\">\n                <TextBox v-if=\"isDrawn\"\n                         v-model=\"signedByName\"\n                         label=\"Please enter your legal name\"\n                         rules=\"required\" />\n\n                <EmailBox v-model=\"signedByEmail\"\n                          :label=\"signedByEmailLabel\"\n                          rules=\"required\" />\n\n                <div class=\"text-right\">\n                    <RockButton type=\"submit\" btnType=\"primary\" btnSize=\"xs\">Complete</RockButton>\n                </div>\n            </RockForm>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    interface ISignaturePadOptions {\n        penColor?: string | undefined;\n        backgroundColor?: string | undefined;\n    }\n\n    declare class SignaturePad {\n        constructor(canvas: HTMLCanvasElement, options?: ISignaturePadOptions);\n        clear: () => void;\n        toDataURL: (type?: string) => string;\n        off: () => void;\n        addEventListener: (type: string, listener: () => void | null, options?: unknown) => void;\n        removeEventListener: (type: string, callback: () => void | null, options?: unknown) => void;\n    }\n\n    declare global {\n        /* eslint-disable-next-line */\n        var SignaturePad: SignaturePad | undefined;\n    }\n\n    // Start loading the signature pad script so that it is available for us\n    // to use later when the control becomes visible.\n    const signaturePadPromise = loadJavaScriptAsync(\"/Scripts/signature_pad/signature_pad.umd.min.js\", () => !!window.SignaturePad);\n</script>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, watch } from \"vue\";\n    import RockButton from \"./rockButton.obs\";\n    import TextBox from \"./textBox.obs\";\n    import EmailBox from \"./emailBox.obs\";\n    import { loadJavaScriptAsync } from \"@Obsidian/Utility/page\";\n    import { updateRefValue } from \"@Obsidian/Utility/component\";\n    import { ElectronicSignatureValue } from \"@Obsidian/ViewModels/Controls/electronicSignatureValue\";\n    import RockForm from \"./rockForm.obs\";\n    import { useStore } from \"@Obsidian/PageState\";\n\n    const props = defineProps({\n        modelValue: {\n            type: Object as PropType<ElectronicSignatureValue>,\n            required: false\n        },\n\n        isDrawn: {\n            type: Boolean as PropType<boolean>,\n            default: false\n        },\n\n        documentTerm: {\n            type: String as PropType<string>,\n            default: \"document\"\n        }\n    });\n\n    const emit = defineEmits<{\n        (e: \"update:modelValue\", data: ElectronicSignatureValue): void;\n        (e: \"signed\"): void;\n    }>();\n\n    // #region Values\n\n    const store = useStore();\n\n    const signatureData = ref(props.modelValue?.signatureData ?? \"\");\n    const signedByName = ref(props.modelValue?.signedByName ?? \"\");\n    const signedByEmail = ref(props.modelValue?.signedByEmail ?? store.state.currentPerson?.email ?? \"\");\n\n    const signatureCanvas = ref<HTMLCanvasElement | null>(null);\n    const signatureCanvasContainer = ref<HTMLElement | null>(null);\n    const isSigning = ref(true);\n\n    let signaturePad: SignaturePad | null = null;\n\n    // #endregion\n\n    // #region Computed Values\n\n    const signedByEmailLabel = computed((): string => {\n        return `Please enter an email address below where we can send a copy of the ${props.documentTerm.toLowerCase()} to.`;\n    });\n\n    // #endregion\n\n    // #region Functions\n\n    /**\n     * Resize the signature canvas element to be the width of the container.\n     * This also handles keeping the signature pad content in sync after\n     * the resize operation happens.\n     */\n    const resizeSignatureCanvas = (): void => {\n        if (signaturePad === null || signatureCanvas.value === null || signatureCanvasContainer.value === null) {\n            return;\n        }\n\n        // If the window is resized, that'll affect the drawing canvas\n        // also, if there is an existing signature, it'll get messed up, so clear it and\n        // make them sign it again. See additional details why\n        // https://github.com/szimek/signature_pad\n        let containerWidth = signatureCanvasContainer.value.clientWidth;\n        if (containerWidth === 0) {\n            containerWidth = 400;\n        }\n\n        // Note the suggestion  https://github.com/szimek/signature_pad#handling-high-dpi-screens\n        // to re-calculate the ratio based on window.devicePixelRatio isn't needed.\n        // We can just use the width() of the container and use fixed height of 100.\n        const ratio = 1;\n        signatureCanvas.value.width = containerWidth * ratio;\n        signatureCanvas.value.height = 100 * ratio;\n        signatureCanvas.value.getContext(\"2d\")?.scale(ratio, ratio);\n\n        // Clear the signature content so it isn't all skewed.\n        signaturePad.clear();\n    };\n\n    // #endregion\n\n    // #region Event Handlers\n\n    /**\n     * Event handler for when the individual clicks the clear button.\n     */\n    const onClearClick = (): void => {\n        // Clear the signature contents out of the UI.\n        signatureData.value = \"\";\n        signaturePad?.clear();\n    };\n\n    /**\n     * Event handler for when the form has validated and can be submitted.\n     * This is called indirectly in response to the \"sign\" and \"complete\" buttons.\n     */\n    const onSubmit = (): void => {\n        if (isSigning.value) {\n            // \"sign\" was clicked, move to the complete stage.\n            isSigning.value = false;\n\n            if (!signedByName.value && store.state.currentPerson) {\n                signedByName.value = store.state.currentPerson.fullName ?? \"\";\n            }\n        }\n        else {\n            // \"complete\" was clicked, store the new value and emit events.\n            const newValue: ElectronicSignatureValue = {\n                signatureData: signatureData.value,\n                signedByName: signedByName.value,\n                signedByEmail: signedByEmail.value\n            };\n\n            emit(\"update:modelValue\", newValue);\n            emit(\"signed\");\n        }\n    };\n\n    // #endregion\n\n    // Watch for changes to the model value and update our internal\n    // signature values.\n    watch(() => props.modelValue, () => {\n        let isChanged = false;\n        if (props.modelValue?.signatureData === signatureData.value && props.modelValue?.signedByName === signedByName.value && props.modelValue?.signedByEmail === signedByName.value) {\n            return;\n        }\n\n        isChanged ||= updateRefValue(signatureData, props.modelValue?.signatureData ?? \"\");\n        isChanged ||= updateRefValue(signedByName, props.modelValue?.signedByName ?? \"\");\n        isChanged ||= updateRefValue(signedByEmail, props.modelValue?.signedByEmail ?? \"\");\n\n        // Reset back to the sign state if anything actually changed.\n        if (isChanged) {\n            isSigning.value = true;\n\n            if (signaturePad !== null) {\n                signaturePad.clear();\n            }\n        }\n    });\n\n    // Watch for the signature canvas to appear or disappear and setup or\n    // tear down the signature pad object as needed.\n    watch(signatureCanvas, async () => {\n        if (signatureCanvas.value !== null) {\n            await signaturePadPromise;\n\n            signaturePad = new SignaturePad(signatureCanvas.value, {\n                backgroundColor: \"white\",\n                penColor: \"black\"\n            });\n\n            signaturePad.addEventListener(\"endStroke\", () => {\n                signatureData.value = signaturePad?.toDataURL(\"image/png\") ?? \"\";\n            });\n\n            resizeSignatureCanvas();\n        }\n        else {\n            signaturePad?.off();\n            signaturePad = null;\n        }\n    });\n\n    // Listen for window resize events so we can update the canvas size.\n    window.addEventListener(\"resize\", () => resizeSignatureCanvas());\n</script>\n"],"names":["signaturePadPromise","loadJavaScriptAsync","window","SignaturePad","store","useStore","signatureData","ref","_props$modelValue$sig","_props$modelValue","props","modelValue","signedByName","_props$modelValue$sig2","_props$modelValue2","signedByEmail","_ref2","_props$modelValue$sig3","_props$modelValue3","_store$state$currentP","state","currentPerson","email","signatureCanvas","signatureCanvasContainer","isSigning","signaturePad","signedByEmailLabel","computed","concat","documentTerm","toLowerCase","resizeSignatureCanvas","_signatureCanvas$valu","value","containerWidth","clientWidth","ratio","width","height","getContext","scale","clear","onClearClick","_signaturePad","onSubmit","_store$state$currentP2","fullName","newValue","emit","watch","_props$modelValue4","_props$modelValue5","_props$modelValue6","_props$modelValue$sig4","_props$modelValue7","_props$modelValue$sig5","_props$modelValue8","_props$modelValue$sig6","_props$modelValue9","isChanged","updateRefValue","_asyncToGenerator","backgroundColor","penColor","addEventListener","_signaturePad$toDataU","_signaturePad2","toDataURL","_signaturePad3","off"],"mappings":"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"}