npm - udp-stencil-component-library - Versions diffs - 1.0.2 → 1.0.3 - Mend

udp-stencil-component-library 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (638) hide show

package/dist/esm/{signature-input_4.entry.js → signature-input_6.entry.js} RENAMED Viewed

@@ -1,67 +1,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CaIWDYyq.js';
-import { C as ConfigService } from './configService-Cn7PuhQz.js';
-import axios from 'axios';
+import { i as isFileReference, a as parseFileReference, d as downloadFileFromUdpDriveFile, b as isUdpDriveFile, c as createFileFromString, e as isFile } from './udp-drive-utils-Cm3Sms8t.js';
 import { createForm } from 'final-form';
 import debounce from 'lodash.debounce';
-import { U as UdpFormsFieldTypeEnum, f as fontOverrideMapping, o as overrideFont } from './utils-vXSpJxEK.js';
-function isUdpDriveFile(file) {
-    return file && typeof file === 'object' && 'driveFileId' in file;
-}
-function getMimeTypeFromExtension(extension) {
-    // Use a static map for common types, fallback to browser's lookup if available
-    const mimeTypes = {
-        pdf: 'application/pdf',
-        doc: 'application/msword',
-        docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        xls: 'application/vnd.ms-excel',
-        xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        ppt: 'application/vnd.ms-powerpoint',
-        pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-        txt: 'text/plain',
-        csv: 'text/csv',
-        json: 'application/json',
-        xml: 'application/xml',
-        html: 'text/html',
-        css: 'text/css',
-        js: 'application/javascript',
-        png: 'image/png',
-        jpg: 'image/jpeg',
-        jpeg: 'image/jpeg',
-        gif: 'image/gif',
-        svg: 'image/svg+xml',
-        zip: 'application/zip',
-        rar: 'application/x-rar-compressed',
-        '7z': 'application/x-7z-compressed'
-    };
-    const ext = extension.trim().toLowerCase();
-    if (mimeTypes[ext])
-        return mimeTypes[ext];
-    return 'application/octet-stream';
-}
-async function downloadFileFromUdpDriveFile(udpFile) {
-    try {
-        const downloadUrl = `${ConfigService.tenantV1ApiUrl}/UdpDrive/${udpFile.driveFileId}/stream`;
-        const response = await axios({
-            method: 'GET',
-            url: downloadUrl,
-            responseType: 'blob',
-            timeout: 300000,
-            headers: {}
-        });
-        const blob = response.data;
-        const fileName = udpFile.name || `file.${udpFile.extension}`;
-        return new File([blob], fileName, {
-            type: blob.type || getMimeTypeFromExtension(udpFile.extension),
-            lastModified: udpFile.lastUpdated ? new Date(udpFile.lastUpdated).getTime() : Date.now()
-        });
-    }
-    catch (error) {
-        console.error('Error creating file from UdpDriveFile:', error);
-        const fileName = udpFile.name || `file.${udpFile.extension}`;
-        return new File([''], fileName, { type: 'application/octet-stream' });
-    }
-}
+import { U as UdpFormsFieldTypeEnum } from './enums-DtiAfg0X.js';
+import { f as fontOverrideMapping, o as overrideFont } from './utils-DZv4MqyU.js';
+import Save from '@carbon/icons/es/save/20';
+import './configService-Cn7PuhQz.js';
+import 'axios';
 const signatureInputCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}:host(.udp-input--size-small) .signature-canvas{height:150px}:host(.udp-input--size-normal) .signature-canvas{height:200px}:host(.udp-input--size-large) .signature-canvas{height:250px}:host(.udp-input--size-small) .clear-button{padding:var(--spacing-01) var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);top:var(--spacing-02);right:var(--spacing-02)}:host(.udp-input--size-normal) .clear-button{padding:var(--spacing-02) var(--spacing-03);font-size:var(--body-font-size);top:var(--spacing-02);right:var(--spacing-02)}:host(.udp-input--size-large) .clear-button{padding:var(--spacing-03) var(--spacing-04);font-size:var(--body-font-size);top:var(--spacing-03);right:var(--spacing-03)}.signature-pad-container{position:relative;border:1px solid var(--udp-mid-gray-color);border-radius:4px;background-color:var(--udp-light-gray-color)}.signature-canvas{display:block;width:100%;height:200px;}.signature-pad-container.readonly{background-color:var(--udp-disabled-gray-color)}.signature-canvas.readonly{cursor:not-allowed}.clear-button{position:absolute;top:var(--spacing-02);right:var(--spacing-02);background-color:var(--udp-light-gray-color);border:1px solid var(--udp-mid-gray-color);color:var(--udp-primary-color);cursor:pointer;border-radius:4px;padding:var(--spacing-02) var(--spacing-03);}.clear-button:hover{background-color:var(--udp-mid-gray-color)}.clear-button:disabled{cursor:not-allowed;opacity:0.5}";
@@ -141,30 +86,56 @@ const SignatureInput = class {
         }
     }
     async onInitialValueChange(newValue) {
-        let file = newValue;
-        if (file) {
-            if (Array.isArray(file)) {
-                file = file[0]; // Handle case where initialValue is an array
-            }
-            if (isUdpDriveFile(file)) {
-                try {
-                    const loadedFile = await downloadFileFromUdpDriveFile(file);
-                    this.value = loadedFile;
-                    this.readonly = false;
-                }
-                catch (err) {
-                    console.error('Failed to fetch UdpDriveFile for signature:', err);
-                    return;
+        if (!newValue) {
+            return;
+        }
+        try {
+            const value = Array.isArray(newValue) ? newValue[0] : newValue;
+            if (!value)
+                return;
+            let loadedFile = null;
+            // Case 1: The value is a special reference string (e.g., "name|udp:id" or "name|b64:data")
+            if (typeof value === 'string' && isFileReference(value)) {
+                const parsedFile = await parseFileReference(value);
+                if (parsedFile) {
+                    // If it was a UDP reference, the parsed file is a placeholder. We need to download the content.
+                    if (parsedFile.driveFileId) {
+                        const udpInfo = {
+                            name: parsedFile.name,
+                            driveFileId: parsedFile.driveFileId,
+                            extension: parsedFile.name.split('.').pop() || ''};
+                        loadedFile = await downloadFileFromUdpDriveFile(udpInfo);
+                    }
+                    else {
+                        // If it was a base64 reference, the file content is already loaded.
+                        loadedFile = parsedFile;
+                    }
                 }
             }
-            else if (typeof newValue === 'string') {
-                this.value = await this.urlToFile(newValue, 'initial_signature.png');
+            // Case 2: The value is a UdpDriveFile object
+            else if (isUdpDriveFile(value)) {
+                loadedFile = await downloadFileFromUdpDriveFile(value);
+            }
+            // Case 3: The value is a standard URL or data-uri string
+            else if (typeof value === 'string') {
+                loadedFile = await createFileFromString(value, 'initial_signature.png');
+            }
+            // Case 4: The value is already a File object
+            else if (isFile(value)) {
+                loadedFile = value;
+            }
+            // If a file was successfully prepared, update the component
+            if (loadedFile) {
+                this.value = loadedFile;
+                this.resizeCanvasForDPR();
+                this.initializeSignaturePad();
             }
             else {
-                this.value = newValue;
+                console.warn('Initial value could not be processed into a valid file:', value);
             }
-            this.resizeCanvasForDPR();
-            this.initializeSignaturePad();
+        }
+        catch (err) {
+            console.error('Failed to process initial value for signature pad:', err);
         }
     }
     async componentWillLoad() {
@@ -285,7 +256,7 @@ const SignatureInput = class {
             'readonly': this.readonly,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: 'b56e3aa753999f61e26d33980c728ede6080b413', class: {
+        return (h(Host, { key: 'fbdb1a7c619c9d857b246cd0c22d76a2cdecbe5c', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -293,7 +264,7 @@ const SignatureInput = class {
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '8166da65f5dc1002d6e5de643331c2c8728bb2ca', class: "bx--form-item" }, this.label && (h("unity-typography", { key: 'e5811a0937a2b5f59fa8eba6a2abf44931d53c4e', variant: "caption-text" }, h("label", { key: 'bf44b8563f260bff1db5ff1f1e136c14d8a2f32b', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), h("div", { key: '4ebc3753801e79d62da3b61aee8ed09203e22a42', class: containerClasses }, h("canvas", { key: '43860cbf141d3bb2f45ef62a88f0894697202161', ref: el => (this.canvasEl = el), class: { 'signature-canvas': true, 'readonly': this.readonly || this.disabled }, id: this.id }), !this.readonly && !this.disabled && (h("button", { key: '45d1ed0764057bfe908ee89ea1a22376ecaaf84c', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (h("div", { key: '687f1694c19304cebdca3b03a32765ec177e72e6', class: "error-message" }, h("unity-typography", { key: 'ba66b72167f4b8165a72cd6f60dfc6a44707360a', variant: "caption-text", color: "error" }, this.internalError))))));
+            } }, h("div", { key: 'cc61b8c78a837a27815cefe6f05a44aa0cf79fd3', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '68d20d02f044f0ca1c0a8318b6ac01cbf5878258', variant: "caption-text" }, h("label", { key: '33196dec5e0fda28b9e139837b8e0cad604731af', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), h("div", { key: '59421fd7fc93eabec847a43d035bdf23a8d837ed', class: containerClasses }, h("canvas", { key: '66510e6aed0c582a24ada1dea11ebf0052288b0f', ref: el => (this.canvasEl = el), class: { 'signature-canvas': true, 'readonly': this.readonly || this.disabled }, id: this.id }), !this.readonly && !this.disabled && (h("button", { key: '42389616c9eff97410fe944d7b561dc3c34482ce', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (h("div", { key: '560500b756625db1788770e2a5fb9c4c35f661ae', class: "error-message" }, h("unity-typography", { key: '6a9ced9c1052e3a537759ad308f10a008312802c', variant: "caption-text", color: "error" }, this.internalError))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -310,8 +281,10 @@ const StencilForm = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.stencilFormInvalidEvent = createEvent(this, "stencilFormInvalidEvent");
+        this.dirtyChange = createEvent(this, "dirtyChange");
         this.validateOnBlur = true;
         this.registeredFields = {};
+        this.customErrors = {};
         /**
          * The event handler for slot changes. It kicks off the recursive processing.
          */
@@ -327,14 +300,15 @@ const StencilForm = class {
         this.submit = this.submit.bind(this);
         this.onFormChange = this.onFormChange.bind(this);
     }
-    /**
-     * Connects a field to the form API.
-     */
     connectField(field) {
+        if (field.__connectedToForm)
+            return;
         field.setFormApi({
             api: this.api,
             registeredFields: this.registeredFields,
+            customErrors: this.customErrors,
         });
+        field.__connectedToForm = true;
     }
     /**
      * Asynchronously and recursively traverses a node and all of its light DOM
@@ -382,9 +356,8 @@ const StencilForm = class {
             // Avoid duplicate event listeners
             if (!htmlElement.dataset.stencilFormConnected) {
                 htmlElement.dataset.stencilFormConnected = 'true';
-                element.addEventListener('click', (e) => {
+                element.addEventListener('click', e => {
                     e.preventDefault();
-                    console.log('Submit button clicked, triggering form submit');
                     this.submit(e);
                 });
             }
@@ -396,9 +369,8 @@ const StencilForm = class {
             // Avoid duplicate event listeners
             if (!htmlButton.dataset.stencilFormConnected) {
                 htmlButton.dataset.stencilFormConnected = 'true';
-                button.addEventListener('click', (e) => {
+                button.addEventListener('click', e => {
                     e.preventDefault();
-                    console.log('Submit button clicked, triggering form submit');
                     this.submit(e);
                 });
             }
@@ -411,16 +383,41 @@ const StencilForm = class {
             validate: this.defaultValidation,
             validateOnBlur: this.validateOnBlur,
         });
-        if (this.handleFormChange) {
+        if (this.handleChange) {
             this.api.subscribe(this.onFormChange, { values: true });
         }
+        // Subscription for the dirty state change event
+        this.api.subscribe(formState => {
+            this.dirtyChange.emit(formState.dirty);
+        }, { dirty: true });
     }
     componentDidLoad() {
         const slot = this.el.shadowRoot.querySelector('slot');
+        // Create the observer first
+        this.observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                mutation.addedNodes.forEach(node => {
+                    this.processNodeRecursively(node);
+                });
+            }
+        });
+        // Function to handle slot changes or initial processing
+        const observeAssignedNodes = () => {
+            const assignedNodes = (slot === null || slot === void 0 ? void 0 : slot.assignedNodes({ flatten: true })) || [];
+            assignedNodes.forEach(node => {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    this.observer.observe(node, { childList: true, subtree: true });
+                    this.processNodeRecursively(node); // Process immediately in case nodes are already present
+                }
+            });
+        };
         if (slot) {
-            this.handleSlotChange(); // Run once for initial content
-            slot.addEventListener('slotchange', this.handleSlotChange);
+            observeAssignedNodes(); // Initial
+            slot.addEventListener('slotchange', observeAssignedNodes); // Handle dynamic slot content
         }
+        // If you're also rendering some fields directly in this.el (not through slot), you can keep this:
+        this.observer.observe(this.el, { childList: true, subtree: true });
+        this.el.dispatchEvent(new CustomEvent('stencilFormReady', { bubbles: true, composed: true }));
     }
     disconnectedCallback() {
         var _a;
@@ -432,12 +429,11 @@ const StencilForm = class {
         }
     }
     onFormChange(formState) {
-        if (this.handleFormChange && formState.values) {
-            this.handleFormChange(formState.values);
+        if (this.handleChange && formState.values) {
+            this.handleChange(formState.values);
         }
     }
     async submitWithValidation(values) {
-        console.log('Submitting form with values:', values);
         const errors = this.defaultValidation(values);
         if (Object.keys(errors).length === 0) {
             this.handleSubmit(values);
@@ -447,25 +443,37 @@ const StencilForm = class {
         }
     }
     defaultValidation(values) {
-        var _a;
-        const { registeredFields } = this;
+        const { registeredFields, customErrors } = this;
         const errors = {};
-        console.log(registeredFields);
+        // Check for required field validation
         Object.keys(registeredFields).forEach(field => {
             var _a;
-            if (registeredFields[field].required && (!values[field] || ((_a = values[field]) === null || _a === void 0 ? void 0 : _a.length) === 0)) {
-                errors[field] = 'Required';
+            if (registeredFields[field].required && (!values[field] || ((_a = values[field]) === null || _a === void 0 ? void 0 : _a.length) === 0 || values[field] === 'false')) {
+                errors[field] = 'This field is required';
             }
         });
-        if (this === null || this === void 0 ? void 0 : this.validate)
-            return (_a = this.validate) === null || _a === void 0 ? void 0 : _a.call(this, values, errors);
+        // Include custom errors from stencil-field components (like min/max validation)
+        if (customErrors) {
+            Object.keys(customErrors).forEach(field => {
+                if (customErrors[field]) {
+                    errors[field] = customErrors[field];
+                }
+            });
+        }
+        // If custom validation is provided, merge with default validation
+        if (this === null || this === void 0 ? void 0 : this.handleValidate) {
+            const customErrors = this.handleValidate(values, errors);
+            return Object.assign(Object.assign({}, errors), customErrors);
+        }
         return errors;
     }
     getValues() {
         const values = {};
         this.api.getRegisteredFields().forEach((fieldName) => {
-            values[fieldName] = this.api.getFieldState(fieldName).value;
+            var _a;
+            values[fieldName] = (_a = this.api.getFieldState(fieldName).value) !== null && _a !== void 0 ? _a : '';
         });
+        console.log(values);
         return values;
     }
     async getApi() {
@@ -473,11 +481,12 @@ const StencilForm = class {
             console.error('❌ Form API not initialized yet.');
             return null;
         }
+        // @ts-ignore
+        this.api.getValues = () => this.getValues();
         return this.api;
     }
     submit(e) {
         var _a;
-        console.log('Submitting form');
         (_a = e === null || e === void 0 ? void 0 : e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
         const submitFunction = () => {
             var _a;
@@ -491,7 +500,7 @@ const StencilForm = class {
         debounce(submitFunction, 1000, { leading: true, trailing: false })();
     }
     render() {
-        return (h("form", { key: 'f87005b56d8889878fefed08e1ff84c77867e935', onSubmit: this.submit }, h("slot", { key: '742c816b3720a11e78d8825e87364b1dd8ed3b37' })));
+        return (h("form", { key: '57fac6a8c5a18c89ab72307a66c9bde0c601018c', onSubmit: this.submit }, h("slot", { key: '4759a58068ac592dfeaab1d88a7f42547be8b3ec' })));
     }
     get el() { return getElement(this); }
 };
@@ -542,18 +551,122 @@ const TallyDisplay = class {
         const isError = !!this.error;
         const answeredCount = this.yesCount + this.noCount + this.naCount;
         const unansweredCount = this.totalFields - answeredCount;
-        return (h(Host, { key: '5c6939381517962ec502c5b791892b352b8cfec3', class: {
+        return (h(Host, { key: 'e70832a7be82ea3f53df3bc06b0194ed46d05f07', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '03e9e1319a9014ddff1f4f9664d4a84992a48112', class: "tally-container" }, this.label && (h("unity-typography", { key: '343651c518a44fbc79fde58152a0216416b7a7fd', variant: "caption-text" }, h("label", { key: 'f5b9c1491ff19f7340e8072227556014c637f75f', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: '287e848fb535d892f6592bcec6d66e5f05a751c5', class: "tally-content", id: this.id }, h("div", { key: '5fdbadd48ffd431f58f522e9452b1183c3014b12', class: "tally-stats" }, h("div", { key: '43f04d18cc2ff6b9287e398d25484928e4ea3325', class: "tally-item tally-yes" }, h("unity-typography", { key: '75bfeb985b1f7f70ecaabec2b8ae699794c6de50', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: 'ddbacb84823d5663879ef218fc023186b78ed87c', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '573543db8b4ca95596a3fd6cc0d256802529c778', class: "tally-item tally-no" }, h("unity-typography", { key: '6124af32f94311cff91a051c46eda6fe7c956939', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: '37ccb28fb096bc09c9c51b5b050b5b58f69773d9', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '3aabef56d09f22886f410677cb57ddbc17fa5b45', class: "tally-item tally-na" }, h("unity-typography", { key: 'ad92cae631bf923f2aeda0ac003129fa8d470e02', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: '43ed5d1f7380084c22872477f5ccd0dfd74cd008', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: '069a7bc3a1dcf19d9c0f5ca0d4b00facdb07ecc4', class: "tally-item tally-unanswered" }, h("unity-typography", { key: '04469b55f4dcdae1e08f1eacdc1bce83ca86f214', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: 'a3bd672ee1edcfc3df5a37587675fc96257020a1', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: 'fcfdaf22626dd9776a6596baed5b8ee0257b2ba1', class: "tally-summary" }, h("unity-typography", { key: '234c4f194d2fca829d4f6c21190af688eedcbfe7', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: '5ab59a32c6eac7ec4c52588880c72f39af322162', class: "error-message" }, h("unity-typography", { key: 'bba2f644f283270436ce30b21dceffd62bdad546', variant: "caption-text", color: "error" }, this.error))))));
+            } }, h("div", { key: '1926ed64b5652e92d39ebf735b18046dd7f906ad', class: "tally-container" }, this.label && (h("unity-typography", { key: 'a324b324caeab596ec7dc6587fe10f10ccc185cb', variant: "caption-text" }, h("label", { key: '23ef28f8d34e3003107cc121e031e5fc0cb122fe', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: '28c393290da3f3fee8c7d82dd686e8234d894844', class: "tally-content", id: this.id }, h("div", { key: '7104a0a1fcdfa61a1d865d8cda60464121befe45', class: "tally-stats" }, h("div", { key: 'c743c8e990a753b657cb39453c039efce5c66636', class: "tally-item tally-yes" }, h("unity-typography", { key: '9499309b4ccb1e321f04a42101887534452468cc', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: '6ffbc0edd30df2be26ec61d66ecf93f3f036e962', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '99fcf973f8b69622c32b64842894331f8740abf0', class: "tally-item tally-no" }, h("unity-typography", { key: 'cd6b12324049384b85f154e0cec72cebe56128f0', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: 'cc985586b310629ac16389225e116457361fe4b2', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '603468dfe92a730e6d3448994e2be6b48b07b5e1', class: "tally-item tally-na" }, h("unity-typography", { key: 'd55ee6a1f72e355cb907768062c771c89a601cb7', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: '84217e46cacba4009a7079433e9ef56aa395727c', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: 'ca2a789a78fa47312db0b0ba550e50b1be906734', class: "tally-item tally-unanswered" }, h("unity-typography", { key: '388bbaba571af7a2bbae6240b818237ad86c79a3', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: '0bf1a145c8a081e576159ed98447b2626f7d23ff', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: '22627fff48cab72e895f7f51728455ba6ae84bf2', class: "tally-summary" }, h("unity-typography", { key: 'd491c8295d698be02874cf6108220f0254473a34', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: '27b0e582ed93014a938dc66b5df146639d65be82', class: "error-message" }, h("unity-typography", { key: '0a0ac562398899def5863296f9dff96ac9928c70', variant: "caption-text", color: "error" }, this.error))))));
     }
 };
 TallyDisplay.style = tallyCss;
+const udpIconButtonCss = ".udp-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;border:none;border-radius:var(--border-radius, 4px);cursor:pointer;font-family:inherit;font-weight:500;text-decoration:none;transition:all 0.2s ease-in-out;position:relative;outline:none;box-sizing:border-box}.udp-icon-button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.udp-icon-button:disabled{opacity:0.6;cursor:not-allowed;pointer-events:none}.icon-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon{display:block;fill:currentColor}.label{display:flex;align-items:center}.size-small{min-height:32px;padding:6px;font-size:0.875rem}.size-small.has-label{padding:6px 12px}.size-small .icon{width:16px;height:16px}.size-medium{min-height:40px;padding:8px;font-size:0.875rem}.size-medium.has-label{padding:8px 16px}.size-medium .icon{width:20px;height:20px}.size-large{min-height:48px;padding:12px;font-size:1rem}.size-large.has-label{padding:12px 20px}.size-large .icon{width:24px;height:24px}.icon-only{border-radius:50%}.icon-only.size-small{width:32px;height:32px}.icon-only.size-medium{width:40px;height:40px}.icon-only.size-large{width:48px;height:48px}.variant-text{background:transparent;border:1px solid transparent}.variant-text:hover:not(:disabled){background:rgba(var(--primary-color-rgb, 0, 0, 0), 0.04)}.variant-text:active:not(:disabled){background:rgba(var(--primary-color-rgb, 0, 0, 0), 0.08)}.variant-outlined{background:transparent;border:1px solid currentColor}.variant-outlined:hover:not(:disabled){background:rgba(var(--primary-color-rgb, 0, 0, 0), 0.04)}.variant-outlined:active:not(:disabled){background:rgba(var(--primary-color-rgb, 0, 0, 0), 0.08)}.variant-contained{background:var(--primary-color, #1976d2);color:var(--primary-color-contrast, #fff);border:1px solid var(--primary-color, #1976d2)}.variant-contained:hover:not(:disabled){background:var(--primary-color-dark, #1565c0);border-color:var(--primary-color-dark, #1565c0)}.variant-contained:active:not(:disabled){background:var(--primary-color-darker, #0d47a1);border-color:var(--primary-color-darker, #0d47a1)}.color-primary{color:var(--primary-color, #1976d2)}.color-primary.variant-contained{background:var(--primary-color, #1976d2);color:var(--primary-color-contrast, #fff);border-color:var(--primary-color, #1976d2)}.color-secondary{color:var(--secondary-color, #dc004e)}.color-secondary.variant-contained{background:var(--secondary-color, #dc004e);color:var(--secondary-color-contrast, #fff);border-color:var(--secondary-color, #dc004e)}.color-secondary.variant-contained:hover:not(:disabled){background:var(--secondary-color-dark, #c5004a);border-color:var(--secondary-color-dark, #c5004a)}.color-success{color:var(--success-color, #2e7d32)}.color-success.variant-contained{background:var(--success-color, #2e7d32);color:var(--success-color-contrast, #fff);border-color:var(--success-color, #2e7d32)}.color-error{color:var(--error-color, #d32f2f)}.color-error.variant-contained{background:var(--error-color, #d32f2f);color:var(--error-color-contrast, #fff);border-color:var(--error-color, #d32f2f)}.color-warning{color:var(--warning-color, #ed6c02)}.color-warning.variant-contained{background:var(--warning-color, #ed6c02);color:var(--warning-color-contrast, #fff);border-color:var(--warning-color, #ed6c02)}.color-info{color:var(--info-color, #0288d1)}.color-info.variant-contained{background:var(--info-color, #0288d1);color:var(--info-color-contrast, #fff);border-color:var(--info-color, #0288d1)}.color-inherit{color:inherit}.color-inherit.variant-contained{background:currentColor;color:var(--background-color, #fff);border-color:currentColor}.icon-color-primary{fill:var(--primary-color, #1976d2) !important}.icon-color-secondary{fill:var(--secondary-color, #dc004e) !important}.icon-color-success{fill:var(--success-color, #2e7d32) !important}.icon-color-error{fill:var(--error-color, #d32f2f) !important}.icon-color-warning{fill:var(--warning-color, #ed6c02) !important}.icon-color-info{fill:var(--info-color, #0288d1) !important}.icon-color-inherit{fill:inherit !important}";
+const UdpIconButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.click = createEvent(this, "click");
+        /**
+         * The variant to use.
+         * - `text`: Typically used for less-pronounced actions (replaces noBackground=true).
+         * - `outlined`: Emphasizes actions with a border.
+         * - `contained`: High-emphasis, distinguished by a background color.
+         */
+        this.variant = 'text';
+        /**
+         * The color of the component. It supports theming using global CSS variables.
+         * `inherit` will inherit the color from its parent.
+         */
+        this.color = 'primary';
+        /**
+         * The size of the component.
+         */
+        this.size = 'medium';
+        /**
+         * If `true`, the component is disabled.
+         */
+        this.disabled = false;
+        /**
+         * The type of the button. Only used if `href` is not set.
+         * Corresponds to the native `type` attribute of a `<button>` element.
+         */
+        this.type = 'button';
+        this.handleClick = (event) => {
+            if (!this.disabled) {
+                this.click.emit(event);
+            }
+        };
+    }
+    renderIcon() {
+        if (!this.icon)
+            return null;
+        const iconData = this.icon;
+        const iconColorClass = this.iconColor ? `icon-color-${this.iconColor}` : '';
+        return (h("svg", Object.assign({}, iconData.attrs, { class: `icon ${iconColorClass}`.trim() }), iconData.content.map((item, index) => {
+            if (item.elem === 'path') {
+                return h("path", Object.assign({}, item.attrs, { key: index }));
+            }
+            else if (item.elem === 'circle') {
+                return h("circle", Object.assign({}, item.attrs, { key: index }));
+            }
+            return null;
+        })));
+    }
+    renderButton() {
+        var _a;
+        const hasLabel = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        const ariaLabel = this.ariaLabel || this.tooltip || undefined;
+        const buttonClasses = {
+            'udp-icon-button': true,
+            [`variant-${this.variant}`]: true,
+            [`color-${this.color}`]: true,
+            [`size-${this.size}`]: true,
+            'has-label': !!hasLabel,
+            'icon-only': !hasLabel,
+        };
+        const buttonContent = (h("button", { type: this.type, disabled: this.disabled, class: buttonClasses, onClick: this.handleClick, "aria-label": ariaLabel, title: this.tooltip, id: this.buttonId }, h("span", { class: "icon-container" }, this.renderIcon()), hasLabel && (h("span", { class: "label" }, h("slot", null)))));
+        // Wrap with badge if badgeContent is provided
+        if (this.badgeContent) {
+            return (h("udp-badge", { content: this.badgeContent }, buttonContent));
+        }
+        return buttonContent;
+    }
+    renderLink() {
+        var _a;
+        const hasLabel = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        const ariaLabel = this.ariaLabel || this.tooltip || undefined;
+        const linkClasses = {
+            'udp-icon-button': true,
+            [`variant-${this.variant}`]: true,
+            [`color-${this.color}`]: true,
+            [`size-${this.size}`]: true,
+            'has-label': !!hasLabel,
+            'icon-only': !hasLabel,
+        };
+        const linkContent = (h("a", { href: this.href, class: linkClasses, onClick: this.handleClick, "aria-label": ariaLabel, title: this.tooltip, id: this.buttonId }, h("span", { class: "icon-container" }, this.renderIcon()), hasLabel && (h("span", { class: "label" }, h("slot", null)))));
+        // Wrap with badge if badgeContent is provided
+        if (this.badgeContent) {
+            return (h("udp-badge", { content: this.badgeContent }, linkContent));
+        }
+        return linkContent;
+    }
+    render() {
+        var _a;
+        // Wrap with tooltip if tooltiprovided and no label
+        const hasLabel = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        const content = this.href ? this.renderLink() : this.renderButton();
+        if (this.tooltip && !hasLabel) {
+            return (h("udp-ambient-tool-tip", { content: this.tooltip }, content));
+        }
+        return content;
+    }
+    get el() { return getElement(this); }
+};
+UdpIconButton.style = udpIconButtonCss;
 /**
  * Finds the parent stencil-form and returns its Final Form API.
  * This function correctly traverses up through nested Shadow DOM boundaries.
@@ -650,7 +763,7 @@ const UdpQuestion = class {
             // Identify YesNo field types
             questionElements.forEach((questionEl) => {
                 if (questionEl.question && questionEl.question.fieldTypeId === UdpFormsFieldTypeEnum.YesNo) {
-                    const fieldName = questionEl.question.name;
+                    const fieldName = questionEl.question.processedSubmissionName;
                     if (fieldName) {
                         const shouldInclude = this.shouldIncludeFieldInTally(fieldName);
                         if (shouldInclude) {
@@ -705,9 +818,9 @@ const UdpQuestion = class {
         this._fieldComponent = this.getFieldComponent();
     }
     getFieldComponent() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const props = {
-            name: (_a = this.question.name) !== null && _a !== void 0 ? _a : `question-${this.questionNumber}`,
+            name: this.question.processedSubmissionName,
             required: this.question.required,
         };
         const fieldProps = Object.assign(Object.assign({}, this.question.fieldProperties), { id: this.questionNumber, disabled: this.disabled, readonly: this.readonly });
@@ -722,7 +835,7 @@ const UdpQuestion = class {
                 return (h("stencil-field", Object.assign({}, props), h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", useCheckbox: true }, fieldProps))));
             case UdpFormsFieldTypeEnum.DropdownSingleSelect:
             case UdpFormsFieldTypeEnum.DropdownMultipleSelect:
-                let options = (_c = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.items) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, items => (Object.assign({ label: items.display, value: items.value }, fieldProps)));
+                let options = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.items) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, items => (Object.assign({ label: items.display, value: items.value }, fieldProps)));
                 return (h("stencil-field", Object.assign({}, props), h("udp-selector", Object.assign({ options: options !== null && options !== void 0 ? options : [], multiSelect: this.question.fieldTypeId === UdpFormsFieldTypeEnum.DropdownMultipleSelect }, fieldProps))));
             case UdpFormsFieldTypeEnum.YesNo:
                 return (h("stencil-field", Object.assign({}, props), h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", useCheckbox: true, multiSelect: false, items: [
@@ -743,7 +856,7 @@ const UdpQuestion = class {
             case UdpFormsFieldTypeEnum.Signature:
                 return (h("stencil-field", Object.assign({}, props), h("signature-input", Object.assign({}, fieldProps, { value: this.value }))));
             case UdpFormsFieldTypeEnum.Paragraph:
-                return this.value ? h("unity-typography", { id: `paragraphText${this.question.name}`, variant: ((_e = (_d = this.styleOverrides) === null || _d === void 0 ? void 0 : _d.paragraphText) === null || _e === void 0 ? void 0 : _e.variant) || 'body' }, this.value) : h("div", null);
+                return this.value ? h("unity-typography", { id: `paragraphText${this.question.name}`, variant: ((_d = (_c = this.styleOverrides) === null || _c === void 0 ? void 0 : _c.paragraphText) === null || _d === void 0 ? void 0 : _d.variant) || 'body' }, this.value) : h("div", null);
             case UdpFormsFieldTypeEnum.Number:
                 return (h("stencil-field", Object.assign({}, props), h("numeric-field", Object.assign({}, fieldProps))));
             case UdpFormsFieldTypeEnum.Tally:
@@ -795,7 +908,94 @@ const UdpQuestion = class {
 };
 UdpQuestion.style = udpQuestionCss;
-export { SignatureInput as signature_input, StencilForm as stencil_form, TallyDisplay as tally_display, UdpQuestion as udp_question };
-//# sourceMappingURL=signature-input.stencil-form.tally-display.udp-question.entry.js.map
+const udpSaveDraftButtonCss = ".floating-save-button{position:fixed;top:5rem;right:2rem;z-index:1000;animation:slideInDown 0.3s ease-out}.inline-save-button{position:relative;display:inline-flex;align-items:center;margin-left:auto;}.floating-save-button.saving,.inline-save-button.saving{pointer-events:none}.saving-state{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(0, 0, 0, 0.8);color:white;border-radius:8px;font-size:0.9rem}.saved-state{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(34, 139, 34, 0.9);color:white;border-radius:8px;font-size:0.9rem;animation:fadeIn 0.3s ease-out}.inline-save-button .saving-state{padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.6);font-size:0.8rem}.inline-save-button .saved-state{padding:0.5rem 0.75rem;background:rgba(34, 139, 34, 0.8);font-size:0.8rem}.save-error-tooltip{position:absolute;top:100%;right:0;margin-top:0.5rem;background:#dc3545;color:white;padding:0.5rem 1rem;border-radius:8px;font-size:0.8rem;white-space:nowrap;box-shadow:0 4px 12px rgba(220, 53, 69, 0.3);animation:fadeIn 0.3s ease-out;z-index:1001}.save-error-tooltip::after{content:'';position:absolute;bottom:100%;right:1rem;border:6px solid transparent;border-bottom-color:#dc3545}.inline-save-button .save-error-tooltip{top:100%;bottom:auto;margin-top:0.5rem;margin-bottom:0}.inline-save-button .save-error-tooltip::after{top:-6px;border-top-color:transparent;border-bottom-color:#dc3545}@keyframes slideInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media (max-width: 768px){.floating-save-button{bottom:1rem;right:1rem;top:auto;}.saving-state{padding:0.6rem 0.8rem;font-size:0.8rem}.inline-save-button .saving-state{padding:0.4rem 0.6rem;font-size:0.75rem}}.primary-icon{--icon-color:var(--primary-color, #1976d2)}.primary-icon::part(icon){fill:var(--icon-color) !important}.primary-icon udp-icon-button::part(icon),.primary-icon .icon{fill:var(--primary-color, #1976d2) !important}@media (prefers-reduced-motion: reduce){.floating-save-button,.save-error-tooltip{animation:none}}";
+const UdpSaveDraftButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isVisible = false;
+        this.isSaving = false;
+        this.saveError = null;
+        this.showSavedMessage = false;
+        this.shouldBeInline = false;
+        this.formApi = null;
+        this.handleSaveClick = async () => {
+            if (!this.formApi || this.isSaving) {
+                return;
+            }
+            if (typeof this.handleSave !== 'function') {
+                return;
+            }
+            const values = this.formApi.getValues();
+            try {
+                await this.handleSave(values);
+                this.formApi.reset(values);
+            }
+            catch (error) {
+                console.error('The onSave handler threw an error. The form will remain dirty.', error);
+            }
+        };
+    }
+    async componentDidLoad() {
+        this.formApi = await useFormApi(this.el);
+        this.checkForOverlap();
+        this.setupOverlapDetection();
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.checkOverlapTimeoutId) {
+            clearTimeout(this.checkOverlapTimeoutId);
+        }
+    }
+    handleWindowResize() {
+        this.debouncedOverlapCheck();
+    }
+    setupOverlapDetection() {
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.debouncedOverlapCheck();
+            });
+            const formContainer = this.el.closest('udp-forms-ui, .form-container, udp-container');
+            if (formContainer) {
+                this.resizeObserver.observe(formContainer);
+            }
+            const mainContent = document.querySelector('main, [role="main"]') || document.body;
+            if (mainContent) {
+                this.resizeObserver.observe(mainContent);
+            }
+        }
+    }
+    debouncedOverlapCheck() {
+        if (this.checkOverlapTimeoutId) {
+            clearTimeout(this.checkOverlapTimeoutId);
+        }
+        this.checkOverlapTimeoutId = setTimeout(() => {
+            this.checkForOverlap();
+        }, 100);
+    }
+    checkForOverlap() {
+        // This logic determines which style to apply.
+        // Using 1024px as the breakpoint to switch between floating and inline.
+        const minWidthNeeded = 1280;
+        this.shouldBeInline = window.innerWidth < minWidthNeeded;
+    }
+    render() {
+        if (!this.isVisible && !this.showSavedMessage) {
+            return null;
+        }
+        // Dynamically set the class based on screen size.
+        // This will toggle between your .floating-save-button and .inline-save-button styles.
+        const containerClass = this.shouldBeInline ? 'inline-save-button' : 'floating-save-button';
+        const isInlineMode = this.shouldBeInline;
+        return (h("div", { class: `${containerClass} ${this.isSaving ? 'saving' : ''} ${this.showSavedMessage ? 'saved' : ''}` }, this.isSaving ? (h("div", { class: "saving-state" }, h("unity-spinner", { size: "small" }), !isInlineMode && h("span", null, "Saving..."))) : this.isVisible ? (h("udp-icon-button", { icon: Save, onClick: this.handleSaveClick, tooltip: isInlineMode ? undefined : 'Save Changes', variant: "contained", color: isInlineMode ? 'inherit' : 'primary', iconColor: isInlineMode ? 'primary' : null, size: isInlineMode ? 'small' : 'medium' }, isInlineMode ? '' : 'Save Changes')) : (h("div", { class: "saved-state" }, !isInlineMode && h("span", null, "Saved"))), this.saveError && h("div", { class: "save-error-tooltip" }, this.saveError)));
+    }
+    get el() { return getElement(this); }
+};
+UdpSaveDraftButton.style = udpSaveDraftButtonCss;
+export { SignatureInput as signature_input, StencilForm as stencil_form, TallyDisplay as tally_display, UdpIconButton as udp_icon_button, UdpQuestion as udp_question, UdpSaveDraftButton as udp_save_draft_button };
+//# sourceMappingURL=signature-input.stencil-form.tally-display.udp-icon-button.udp-question.udp-save-draft-button.entry.js.map
-//# sourceMappingURL=signature-input_4.entry.js.map
+//# sourceMappingURL=signature-input_6.entry.js.map