udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/cjs/{signature-input_4.cjs.entry.js → signature-input_6.cjs.entry.js}

@@ -1,92 +1,37 @@
 'use strict';
 
 var index = require('./index-Bu1pSYrV.js');
-var configService = require('./configService-OX6rz-VE.js');
-var axios = require('axios');
+var udpDriveUtils = require('./udp-drive-utils-BOyI3h7K.js');
 var finalForm = require('final-form');
 var debounce = require('lodash.debounce');
-var utils = require('./utils-DMhqs00g.js');
+var enums = require('./enums-CA1UjPVU.js');
+var utils = require('./utils-CdiEmuDf.js');
+var Save = require('@carbon/icons/es/save/20');
+require('./configService-OX6rz-VE.js');
+require('axios');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n.default = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
 
-var axios__default = /*#__PURE__*/_interopDefault(axios);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
-
-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.ConfigService.tenantV1ApiUrl}/UdpDrive/${udpFile.driveFileId}/stream`;
-        const response = await axios__default.default({
-            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' });
-    }
-}
+var Save__default = /*#__PURE__*/_interopDefault(Save);
 
 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}";
 
@@ -166,30 +111,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' && udpDriveUtils.isFileReference(value)) {
+                const parsedFile = await udpDriveUtils.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 udpDriveUtils.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 (udpDriveUtils.isUdpDriveFile(value)) {
+                loadedFile = await udpDriveUtils.downloadFileFromUdpDriveFile(value);
+            }
+            // Case 3: The value is a standard URL or data-uri string
+            else if (typeof value === 'string') {
+                loadedFile = await udpDriveUtils.createFileFromString(value, 'initial_signature.png');
+            }
+            // Case 4: The value is already a File object
+            else if (udpDriveUtils.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() {
@@ -202,11 +173,11 @@ const SignatureInput = class {
             if (Array.isArray(file)) {
                 file = file[0]; // Handle case where initialValue is an array
             }
-            if (isUdpDriveFile(this.initialValue)) {
+            if (udpDriveUtils.isUdpDriveFile(this.initialValue)) {
                 // Try to fetch the file from UdpDriveFile
                 console.log('Loading signature from UdpDriveFile:', this.initialValue);
                 try {
-                    const file = await downloadFileFromUdpDriveFile(this.initialValue);
+                    const file = await udpDriveUtils.downloadFileFromUdpDriveFile(this.initialValue);
                     this.value = file;
                     this.readonly = false; // Try editable first
                 }
@@ -277,9 +248,9 @@ const SignatureInput = class {
         if (typeof signatureValue === 'string') {
             imageUrl = signatureValue;
         }
-        else if (isUdpDriveFile(signatureValue)) {
+        else if (udpDriveUtils.isUdpDriveFile(signatureValue)) {
             try {
-                const file = await downloadFileFromUdpDriveFile(signatureValue);
+                const file = await udpDriveUtils.downloadFileFromUdpDriveFile(signatureValue);
                 imageUrl = URL.createObjectURL(file);
             }
             catch (error) {
@@ -310,7 +281,7 @@ const SignatureInput = class {
             'readonly': this.readonly,
             'disabled': this.disabled,
         };
-        return (index.h(index.Host, { key: 'b56e3aa753999f61e26d33980c728ede6080b413', class: {
+        return (index.h(index.Host, { key: 'fbdb1a7c619c9d857b246cd0c22d76a2cdecbe5c', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -318,7 +289,7 @@ const SignatureInput = class {
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, index.h("div", { key: '8166da65f5dc1002d6e5de643331c2c8728bb2ca', class: "bx--form-item" }, this.label && (index.h("unity-typography", { key: 'e5811a0937a2b5f59fa8eba6a2abf44931d53c4e', variant: "caption-text" }, index.h("label", { key: 'bf44b8563f260bff1db5ff1f1e136c14d8a2f32b', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), index.h("div", { key: '4ebc3753801e79d62da3b61aee8ed09203e22a42', class: containerClasses }, index.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 && (index.h("button", { key: '45d1ed0764057bfe908ee89ea1a22376ecaaf84c', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (index.h("div", { key: '687f1694c19304cebdca3b03a32765ec177e72e6', class: "error-message" }, index.h("unity-typography", { key: 'ba66b72167f4b8165a72cd6f60dfc6a44707360a', variant: "caption-text", color: "error" }, this.internalError))))));
+            } }, index.h("div", { key: 'cc61b8c78a837a27815cefe6f05a44aa0cf79fd3', class: "bx--form-item" }, this.label && (index.h("unity-typography", { key: '68d20d02f044f0ca1c0a8318b6ac01cbf5878258', variant: "caption-text" }, index.h("label", { key: '33196dec5e0fda28b9e139837b8e0cad604731af', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), index.h("div", { key: '59421fd7fc93eabec847a43d035bdf23a8d837ed', class: containerClasses }, index.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 && (index.h("button", { key: '42389616c9eff97410fe944d7b561dc3c34482ce', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (index.h("div", { key: '560500b756625db1788770e2a5fb9c4c35f661ae', class: "error-message" }, index.h("unity-typography", { key: '6a9ced9c1052e3a537759ad308f10a008312802c', variant: "caption-text", color: "error" }, this.internalError))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -335,8 +306,10 @@ const StencilForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.stencilFormInvalidEvent = index.createEvent(this, "stencilFormInvalidEvent");
+        this.dirtyChange = index.createEvent(this, "dirtyChange");
         this.validateOnBlur = true;
         this.registeredFields = {};
+        this.customErrors = {};
         /**
          * The event handler for slot changes. It kicks off the recursive processing.
          */
@@ -352,14 +325,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
@@ -407,9 +381,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);
                 });
             }
@@ -421,9 +394,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);
                 });
             }
@@ -436,16 +408,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;
@@ -457,12 +454,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);
@@ -472,25 +468,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() {
@@ -498,11 +506,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;
@@ -516,7 +525,7 @@ const StencilForm = class {
         debounce__default.default(submitFunction, 1000, { leading: true, trailing: false })();
     }
     render() {
-        return (index.h("form", { key: 'f87005b56d8889878fefed08e1ff84c77867e935', onSubmit: this.submit }, index.h("slot", { key: '742c816b3720a11e78d8825e87364b1dd8ed3b37' })));
+        return (index.h("form", { key: '57fac6a8c5a18c89ab72307a66c9bde0c601018c', onSubmit: this.submit }, index.h("slot", { key: '4759a58068ac592dfeaab1d88a7f42547be8b3ec' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -567,18 +576,122 @@ const TallyDisplay = class {
         const isError = !!this.error;
         const answeredCount = this.yesCount + this.noCount + this.naCount;
         const unansweredCount = this.totalFields - answeredCount;
-        return (index.h(index.Host, { key: '5c6939381517962ec502c5b791892b352b8cfec3', class: {
+        return (index.h(index.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,
-            } }, index.h("div", { key: '03e9e1319a9014ddff1f4f9664d4a84992a48112', class: "tally-container" }, this.label && (index.h("unity-typography", { key: '343651c518a44fbc79fde58152a0216416b7a7fd', variant: "caption-text" }, index.h("label", { key: 'f5b9c1491ff19f7340e8072227556014c637f75f', htmlFor: this.id, class: "tally-label" }, this.label))), index.h("div", { key: '287e848fb535d892f6592bcec6d66e5f05a751c5', class: "tally-content", id: this.id }, index.h("div", { key: '5fdbadd48ffd431f58f522e9452b1183c3014b12', class: "tally-stats" }, index.h("div", { key: '43f04d18cc2ff6b9287e398d25484928e4ea3325', class: "tally-item tally-yes" }, index.h("unity-typography", { key: '75bfeb985b1f7f70ecaabec2b8ae699794c6de50', variant: "h4", class: "tally-count" }, this.yesCount), index.h("unity-typography", { key: 'ddbacb84823d5663879ef218fc023186b78ed87c', variant: "caption-text", class: "tally-label" }, "Yes")), index.h("div", { key: '573543db8b4ca95596a3fd6cc0d256802529c778', class: "tally-item tally-no" }, index.h("unity-typography", { key: '6124af32f94311cff91a051c46eda6fe7c956939', variant: "h4", class: "tally-count" }, this.noCount), index.h("unity-typography", { key: '37ccb28fb096bc09c9c51b5b050b5b58f69773d9', variant: "caption-text", class: "tally-label" }, "No")), index.h("div", { key: '3aabef56d09f22886f410677cb57ddbc17fa5b45', class: "tally-item tally-na" }, index.h("unity-typography", { key: 'ad92cae631bf923f2aeda0ac003129fa8d470e02', variant: "h4", class: "tally-count" }, this.naCount), index.h("unity-typography", { key: '43ed5d1f7380084c22872477f5ccd0dfd74cd008', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (index.h("div", { key: '069a7bc3a1dcf19d9c0f5ca0d4b00facdb07ecc4', class: "tally-item tally-unanswered" }, index.h("unity-typography", { key: '04469b55f4dcdae1e08f1eacdc1bce83ca86f214', variant: "h4", class: "tally-count" }, unansweredCount), index.h("unity-typography", { key: 'a3bd672ee1edcfc3df5a37587675fc96257020a1', variant: "caption-text", class: "tally-label" }, "Unanswered")))), index.h("div", { key: 'fcfdaf22626dd9776a6596baed5b8ee0257b2ba1', class: "tally-summary" }, index.h("unity-typography", { key: '234c4f194d2fca829d4f6c21190af688eedcbfe7', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (index.h("div", { key: '5ab59a32c6eac7ec4c52588880c72f39af322162', class: "error-message" }, index.h("unity-typography", { key: 'bba2f644f283270436ce30b21dceffd62bdad546', variant: "caption-text", color: "error" }, this.error))))));
+            } }, index.h("div", { key: '1926ed64b5652e92d39ebf735b18046dd7f906ad', class: "tally-container" }, this.label && (index.h("unity-typography", { key: 'a324b324caeab596ec7dc6587fe10f10ccc185cb', variant: "caption-text" }, index.h("label", { key: '23ef28f8d34e3003107cc121e031e5fc0cb122fe', htmlFor: this.id, class: "tally-label" }, this.label))), index.h("div", { key: '28c393290da3f3fee8c7d82dd686e8234d894844', class: "tally-content", id: this.id }, index.h("div", { key: '7104a0a1fcdfa61a1d865d8cda60464121befe45', class: "tally-stats" }, index.h("div", { key: 'c743c8e990a753b657cb39453c039efce5c66636', class: "tally-item tally-yes" }, index.h("unity-typography", { key: '9499309b4ccb1e321f04a42101887534452468cc', variant: "h4", class: "tally-count" }, this.yesCount), index.h("unity-typography", { key: '6ffbc0edd30df2be26ec61d66ecf93f3f036e962', variant: "caption-text", class: "tally-label" }, "Yes")), index.h("div", { key: '99fcf973f8b69622c32b64842894331f8740abf0', class: "tally-item tally-no" }, index.h("unity-typography", { key: 'cd6b12324049384b85f154e0cec72cebe56128f0', variant: "h4", class: "tally-count" }, this.noCount), index.h("unity-typography", { key: 'cc985586b310629ac16389225e116457361fe4b2', variant: "caption-text", class: "tally-label" }, "No")), index.h("div", { key: '603468dfe92a730e6d3448994e2be6b48b07b5e1', class: "tally-item tally-na" }, index.h("unity-typography", { key: 'd55ee6a1f72e355cb907768062c771c89a601cb7', variant: "h4", class: "tally-count" }, this.naCount), index.h("unity-typography", { key: '84217e46cacba4009a7079433e9ef56aa395727c', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (index.h("div", { key: 'ca2a789a78fa47312db0b0ba550e50b1be906734', class: "tally-item tally-unanswered" }, index.h("unity-typography", { key: '388bbaba571af7a2bbae6240b818237ad86c79a3', variant: "h4", class: "tally-count" }, unansweredCount), index.h("unity-typography", { key: '0bf1a145c8a081e576159ed98447b2626f7d23ff', variant: "caption-text", class: "tally-label" }, "Unanswered")))), index.h("div", { key: '22627fff48cab72e895f7f51728455ba6ae84bf2', class: "tally-summary" }, index.h("unity-typography", { key: 'd491c8295d698be02874cf6108220f0254473a34', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (index.h("div", { key: '27b0e582ed93014a938dc66b5df146639d65be82', class: "error-message" }, index.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) {
+        index.registerInstance(this, hostRef);
+        this.click = index.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 (index.h("svg", Object.assign({}, iconData.attrs, { class: `icon ${iconColorClass}`.trim() }), iconData.content.map((item, index$1) => {
+            if (item.elem === 'path') {
+                return index.h("path", Object.assign({}, item.attrs, { key: index$1 }));
+            }
+            else if (item.elem === 'circle') {
+                return index.h("circle", Object.assign({}, item.attrs, { key: index$1 }));
+            }
+            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 = (index.h("button", { type: this.type, disabled: this.disabled, class: buttonClasses, onClick: this.handleClick, "aria-label": ariaLabel, title: this.tooltip, id: this.buttonId }, index.h("span", { class: "icon-container" }, this.renderIcon()), hasLabel && (index.h("span", { class: "label" }, index.h("slot", null)))));
+        // Wrap with badge if badgeContent is provided
+        if (this.badgeContent) {
+            return (index.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 = (index.h("a", { href: this.href, class: linkClasses, onClick: this.handleClick, "aria-label": ariaLabel, title: this.tooltip, id: this.buttonId }, index.h("span", { class: "icon-container" }, this.renderIcon()), hasLabel && (index.h("span", { class: "label" }, index.h("slot", null)))));
+        // Wrap with badge if badgeContent is provided
+        if (this.badgeContent) {
+            return (index.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 (index.h("udp-ambient-tool-tip", { content: this.tooltip }, content));
+        }
+        return content;
+    }
+    get el() { return index.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.
@@ -637,7 +750,7 @@ const UdpQuestion = class {
     }
     async componentWillLoad() {
         this.updateFieldComponent();
-        if (this.question.fieldTypeId === utils.UdpFormsFieldTypeEnum.Tally) {
+        if (this.question.fieldTypeId === enums.UdpFormsFieldTypeEnum.Tally) {
             await this.initializeFormApiForTally();
         }
     }
@@ -660,7 +773,7 @@ const UdpQuestion = class {
         }
     }
     calculateTally() {
-        if (!this.formApi || this.question.fieldTypeId !== utils.UdpFormsFieldTypeEnum.Tally) {
+        if (!this.formApi || this.question.fieldTypeId !== enums.UdpFormsFieldTypeEnum.Tally) {
             return;
         }
         try {
@@ -674,8 +787,8 @@ const UdpQuestion = class {
             const yesNoFields = [];
             // Identify YesNo field types
             questionElements.forEach((questionEl) => {
-                if (questionEl.question && questionEl.question.fieldTypeId === utils.UdpFormsFieldTypeEnum.YesNo) {
-                    const fieldName = questionEl.question.name;
+                if (questionEl.question && questionEl.question.fieldTypeId === enums.UdpFormsFieldTypeEnum.YesNo) {
+                    const fieldName = questionEl.question.processedSubmissionName;
                     if (fieldName) {
                         const shouldInclude = this.shouldIncludeFieldInTally(fieldName);
                         if (shouldInclude) {
@@ -730,50 +843,50 @@ 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 });
         switch (this.question.fieldTypeId) {
-            case utils.UdpFormsFieldTypeEnum.SingleLineText:
+            case enums.UdpFormsFieldTypeEnum.SingleLineText:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("text-field", Object.assign({}, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.MultiLineText:
+            case enums.UdpFormsFieldTypeEnum.MultiLineText:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("text-area", Object.assign({ fullWidth: true }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.Checkbox:
+            case enums.UdpFormsFieldTypeEnum.Checkbox:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", multiSelect: true, useCheckbox: true }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.RadioButton:
+            case enums.UdpFormsFieldTypeEnum.RadioButton:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", useCheckbox: true }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.DropdownSingleSelect:
-            case utils.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)));
-                return (index.h("stencil-field", Object.assign({}, props), index.h("udp-selector", Object.assign({ options: options !== null && options !== void 0 ? options : [], multiSelect: this.question.fieldTypeId === utils.UdpFormsFieldTypeEnum.DropdownMultipleSelect }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.YesNo:
+            case enums.UdpFormsFieldTypeEnum.DropdownSingleSelect:
+            case enums.UdpFormsFieldTypeEnum.DropdownMultipleSelect:
+                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 (index.h("stencil-field", Object.assign({}, props), index.h("udp-selector", Object.assign({ options: options !== null && options !== void 0 ? options : [], multiSelect: this.question.fieldTypeId === enums.UdpFormsFieldTypeEnum.DropdownMultipleSelect }, fieldProps))));
+            case enums.UdpFormsFieldTypeEnum.YesNo:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", useCheckbox: true, multiSelect: false, items: [
                         { value: 'true', display: 'Yes' },
                         { value: 'false', display: 'No' },
                         { value: 'na', display: 'Not Applicable' },
                     ] }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.ListMultiSelect:
+            case enums.UdpFormsFieldTypeEnum.ListMultiSelect:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", multiSelect: true }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.DateSelector:
+            case enums.UdpFormsFieldTypeEnum.DateSelector:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("udp-date-selector", Object.assign({ min: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.minDate, max: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.maxDate }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.TimeSelector:
+            case enums.UdpFormsFieldTypeEnum.TimeSelector:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("udp-time-selector", Object.assign({ min: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.minTime, max: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.maxTime }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.DateTimeSelector:
+            case enums.UdpFormsFieldTypeEnum.DateTimeSelector:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("udp-datetime-selector", Object.assign({ max: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.maxDateTime, min: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.minDateTime }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.FileUpload:
+            case enums.UdpFormsFieldTypeEnum.FileUpload:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("file-upload", Object.assign({ fullWidth: true, allowMultiple: false }, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.Signature:
+            case enums.UdpFormsFieldTypeEnum.Signature:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("signature-input", Object.assign({}, fieldProps, { value: this.value }))));
-            case utils.UdpFormsFieldTypeEnum.Paragraph:
-                return this.value ? index.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) : index.h("div", null);
-            case utils.UdpFormsFieldTypeEnum.Number:
+            case enums.UdpFormsFieldTypeEnum.Paragraph:
+                return this.value ? index.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) : index.h("div", null);
+            case enums.UdpFormsFieldTypeEnum.Number:
                 return (index.h("stencil-field", Object.assign({}, props), index.h("numeric-field", Object.assign({}, fieldProps))));
-            case utils.UdpFormsFieldTypeEnum.Tally:
+            case enums.UdpFormsFieldTypeEnum.Tally:
                 return (index.h("tally-display", Object.assign({ id: this.questionNumber, label: this.question.questionText || 'Response Tally', yesCount: this.tallyData.yesCount, noCount: this.tallyData.noCount, naCount: this.tallyData.naCount, totalFields: this.tallyData.totalFields }, fieldProps, { required: false })));
-            case utils.UdpFormsFieldTypeEnum.Hidden:
+            case enums.UdpFormsFieldTypeEnum.Hidden:
             default:
                 return index.h("div", null);
         }
@@ -781,7 +894,7 @@ const UdpQuestion = class {
     async componentDidLoad() {
         var _a, _b, _c, _d;
         // If form API wasn't available during componentWillLoad, try again
-        if (this.question.fieldTypeId === utils.UdpFormsFieldTypeEnum.Tally && !this.formApi) {
+        if (this.question.fieldTypeId === enums.UdpFormsFieldTypeEnum.Tally && !this.formApi) {
             await this.initializeFormApiForTally();
         }
         // override the fonts based on style overrides
@@ -803,10 +916,10 @@ const UdpQuestion = class {
     render() {
         var _a, _b, _c, _d;
         const component = this._fieldComponent;
-        const titleText = `${this.question.fieldTypeId === utils.UdpFormsFieldTypeEnum.Paragraph ? '' : `${this.questionNumber}.`} ${this.question.questionText}  ${this.question.required && this.question.fieldTypeId !== utils.UdpFormsFieldTypeEnum.Paragraph ? '*' : ''}`;
+        const titleText = `${this.question.fieldTypeId === enums.UdpFormsFieldTypeEnum.Paragraph ? '' : `${this.questionNumber}.`} ${this.question.questionText}  ${this.question.required && this.question.fieldTypeId !== enums.UdpFormsFieldTypeEnum.Paragraph ? '*' : ''}`;
         if (!component)
             return null;
-        return (index.h("div", { class: this.question.fieldTypeId === utils.UdpFormsFieldTypeEnum.Hidden ? 'hidden' : '' }, this.question.questionText ? index.h("unity-typography", { id: `questionText${this.question.name}`, variant: ((_b = (_a = this.styleOverrides) === null || _a === void 0 ? void 0 : _a.questionText) === null || _b === void 0 ? void 0 : _b.variant) || 'h3' }, titleText) : '', component, index.h("unity-typography", { id: `helperText${this.question.name}`, variant: ((_d = (_c = this.styleOverrides) === null || _c === void 0 ? void 0 : _c.helperText) === null || _d === void 0 ? void 0 : _d.variant) || 'caption-text' }, this.question.helperText)));
+        return (index.h("div", { class: this.question.fieldTypeId === enums.UdpFormsFieldTypeEnum.Hidden ? 'hidden' : '' }, this.question.questionText ? index.h("unity-typography", { id: `questionText${this.question.name}`, variant: ((_b = (_a = this.styleOverrides) === null || _a === void 0 ? void 0 : _a.questionText) === null || _b === void 0 ? void 0 : _b.variant) || 'h3' }, titleText) : '', component, index.h("unity-typography", { id: `helperText${this.question.name}`, variant: ((_d = (_c = this.styleOverrides) === null || _c === void 0 ? void 0 : _c.helperText) === null || _d === void 0 ? void 0 : _d.variant) || 'caption-text' }, this.question.helperText)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -820,10 +933,99 @@ const UdpQuestion = class {
 };
 UdpQuestion.style = udpQuestionCss;
 
+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) {
+        index.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 (index.h("div", { class: `${containerClass} ${this.isSaving ? 'saving' : ''} ${this.showSavedMessage ? 'saved' : ''}` }, this.isSaving ? (index.h("div", { class: "saving-state" }, index.h("unity-spinner", { size: "small" }), !isInlineMode && index.h("span", null, "Saving..."))) : this.isVisible ? (index.h("udp-icon-button", { icon: Save__default.default, 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')) : (index.h("div", { class: "saved-state" }, !isInlineMode && index.h("span", null, "Saved"))), this.saveError && index.h("div", { class: "save-error-tooltip" }, this.saveError)));
+    }
+    get el() { return index.getElement(this); }
+};
+UdpSaveDraftButton.style = udpSaveDraftButtonCss;
+
 exports.signature_input = SignatureInput;
 exports.stencil_form = StencilForm;
 exports.tally_display = TallyDisplay;
+exports.udp_icon_button = UdpIconButton;
 exports.udp_question = UdpQuestion;
-//# sourceMappingURL=signature-input.stencil-form.tally-display.udp-question.entry.cjs.js.map
+exports.udp_save_draft_button = UdpSaveDraftButton;
+//# sourceMappingURL=signature-input.stencil-form.tally-display.udp-icon-button.udp-question.udp-save-draft-button.entry.cjs.js.map
 
-//# sourceMappingURL=signature-input_4.cjs.entry.js.map
+//# sourceMappingURL=signature-input_6.cjs.entry.js.map