udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/components/udp-forms-renderer.js

@@ -1,31 +1,33 @@
 import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
-import { debounce } from 'lodash';
+import { throttle } from 'lodash';
 import { g as getCurrentTenantId } from './p-Basdb1b1.js';
 import { c as createFormData, m as makeApiCall } from './p-B-daVutk.js';
 import { C as ConfigService } from './p-Cn7PuhQz.js';
 import { S as SearchBuilder, c as SearchOperators } from './p-BlJaGZ4k.js';
-import { d as defineCustomElement$o } from './p-DpLtIIwx.js';
-import { d as defineCustomElement$n } from './p-B3-pcvgV.js';
-import { d as defineCustomElement$m } from './p-BvSuY3tY.js';
-import { d as defineCustomElement$l } from './p-BU3lEg0a.js';
-import { d as defineCustomElement$k } from './p-Bv1MGbhE.js';
-import { d as defineCustomElement$j } from './p-CA-v1fbV.js';
-import { d as defineCustomElement$i } from './p-C8cWVxBF.js';
-import { d as defineCustomElement$h } from './p-hRee3qYx.js';
-import { d as defineCustomElement$g } from './p-CNC3rtXm.js';
-import { d as defineCustomElement$f } from './p-CRiQA7Cy.js';
-import { d as defineCustomElement$e } from './p-BYsLvu6g.js';
-import { d as defineCustomElement$d } from './p-BGjVmQGN.js';
-import { d as defineCustomElement$c } from './p-DeS7YSzc.js';
-import { d as defineCustomElement$b } from './p-ZeWoGdjP.js';
-import { d as defineCustomElement$a } from './p-C-wDzVCk.js';
-import { d as defineCustomElement$9 } from './p-CDnOrzs3.js';
-import { d as defineCustomElement$8 } from './p-DzaN4l_Y.js';
-import { d as defineCustomElement$7 } from './p-DMcaGgHq.js';
-import { d as defineCustomElement$6 } from './p-C9cEH65u.js';
-import { d as defineCustomElement$5 } from './p-PqypuW_Q.js';
-import { d as defineCustomElement$4 } from './p-BTIWOttf.js';
-import { d as defineCustomElement$3 } from './p-Bdt-oOnd.js';
+import { d as defineCustomElement$q } from './p-DpLtIIwx.js';
+import { d as defineCustomElement$p } from './p-Cdz5sX_v.js';
+import { d as defineCustomElement$o } from './p-Dx5ehH3t.js';
+import { d as defineCustomElement$n } from './p-BU3lEg0a.js';
+import { d as defineCustomElement$m } from './p-B3gbGwCE.js';
+import { d as defineCustomElement$l } from './p-ill5r6eV.js';
+import { d as defineCustomElement$k } from './p-26jyxB7s.js';
+import { d as defineCustomElement$j } from './p-D6Wo7quX.js';
+import { d as defineCustomElement$i } from './p-C2j9tPIU.js';
+import { d as defineCustomElement$h } from './p-DZaCCOXB.js';
+import { d as defineCustomElement$g } from './p-CpMdhv3j.js';
+import { d as defineCustomElement$f } from './p-BGjVmQGN.js';
+import { d as defineCustomElement$e } from './p-CMTLAuz8.js';
+import { d as defineCustomElement$d } from './p-ZeWoGdjP.js';
+import { d as defineCustomElement$c } from './p-C-wDzVCk.js';
+import { d as defineCustomElement$b } from './p-DBtdo56U.js';
+import { d as defineCustomElement$a } from './p-Cp1kbBGM.js';
+import { d as defineCustomElement$9 } from './p-DnMRLbBX.js';
+import { d as defineCustomElement$8 } from './p-BzH4NpB-.js';
+import { d as defineCustomElement$7 } from './p-vrP9HZiW.js';
+import { d as defineCustomElement$6 } from './p-CL4gkS6u.js';
+import { d as defineCustomElement$5 } from './p-BtOBW9_N.js';
+import { d as defineCustomElement$4 } from './p-W_kxEzVl.js';
+import { d as defineCustomElement$3 } from './p-Oil5iqFm.js';
 import { d as defineCustomElement$2 } from './p-DkppmXNM.js';
 
 /**
@@ -68,6 +70,7 @@ function isFileArray(array) {
     return array.every(item => item instanceof File);
 }
 
+// @ts-nocheck
 /**
  * Public form submission handler (legacy endpoint)
  */
@@ -242,11 +245,7 @@ class PrivateFormHandler extends BaseFormHandler {
                 dataWithoutFiles[key] = value.map(item => (typeof item === 'string' ? item : item.value)).join(',');
             }
             else {
-                // Only include non-file fields if they have a meaningful value
-                // Skip null, undefined, or empty string values entirely
-                if (value !== null && value !== undefined && value !== '') {
-                    dataWithoutFiles[key] = value;
-                }
+                dataWithoutFiles[key] = value;
             }
         }
         // Add form data using the helper function
@@ -311,7 +310,7 @@ const UdpFormsRenderer$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsRender
         this.__attachShadow();
         this.isPublic = false;
         this.userId = null; // User ID for authenticated users
-        this.autoSaveDelay = 2000; // Debounce delay for auto-save in milliseconds
+        this.autoSaveDelay = 2000; // Debounce delay for auto-save in milliseconds (currently disabled)
         this.initialValues = {};
         this.submitSuccessful = false;
         this.existingSubmission = null;
@@ -319,13 +318,135 @@ const UdpFormsRenderer$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsRender
         this.isSaving = false;
         this.saveError = null;
         this.isSubmitted = false;
+        this.dynamicSections = [];
+        this.isUpdatingSections = false;
+        this.reRenderKey = 0;
         this.tenantId = getCurrentTenantId();
-        this.handleFormChange = (values) => {
-            // Trigger auto-save if form data has changed
-            if (JSON.stringify(values) !== JSON.stringify(this.currentFormData)) {
-                this.debouncedAutoSave(values);
+        /**
+         * Duplicate a repeatable section
+         */
+        this.duplicateRepeatableSection = (index) => {
+            if (this.isSubmitted || this.isUpdatingSections)
+                return;
+            this.isUpdatingSections = true;
+            this.loading = true;
+            try {
+                const sectionToClone = this.dynamicSections[index];
+                if (!sectionToClone)
+                    return;
+                const cloningSectionName = sectionToClone.name;
+                // Find existing repeat group indices
+                const repeatKeys = this.findRepeatGroupKeys(cloningSectionName, this.initialValues);
+                const nextRepeatIndex = repeatKeys.length > 0 ? Math.max(...repeatKeys) + 1 : 2;
+                const clonedSection = Object.assign(Object.assign({}, structuredClone(sectionToClone)), { formQuestions: sectionToClone.formQuestions.map(q => (Object.assign(Object.assign({}, structuredClone(q)), { processedSubmissionName: `${cloningSectionName}_${nextRepeatIndex}-${q.name}` }))), isOriginalSection: false, sectionPositionSuffix: nextRepeatIndex });
+                // Find the last index of this section group
+                let insertAtIndex = index;
+                for (let i = index + 1; i < this.dynamicSections.length; i++) {
+                    const s = this.dynamicSections[i];
+                    if (s.name === cloningSectionName) {
+                        insertAtIndex = i;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                // Insert after the last repeat of the section group
+                this.dynamicSections = [...this.dynamicSections.slice(0, insertAtIndex + 1), clonedSection, ...this.dynamicSections.slice(insertAtIndex + 1)];
+                // Create new initial values structure
+                const newInitialValues = Object.assign({}, this.currentFormData);
+                clonedSection.formQuestions.forEach(q => {
+                    newInitialValues[q.processedSubmissionName] = null;
+                });
+                // This will trigger a complete form re-render
+                this.initialValues = newInitialValues;
+                this.currentFormData = newInitialValues;
+                this.reRenderKey += 1;
+            }
+            finally {
+                this.isUpdatingSections = false;
+                this.loading = false;
+            }
+        };
+        /**
+         * Delete a repeatable section
+         */
+        this.deleteRepeatableSection = (index) => {
+            if (this.isSubmitted)
+                return;
+            const sectionToDelete = this.dynamicSections[index];
+            if (!sectionToDelete || sectionToDelete.isOriginalSection)
+                return;
+            this.isUpdatingSections = true;
+            this.loading = true;
+            try {
+                const deleteSectionName = sectionToDelete.name;
+                // Remove the section's initial values\
+                console.log('currentformdata', this.currentFormData);
+                const newInitialValues = Object.assign({}, this.currentFormData);
+                sectionToDelete.formQuestions.forEach(q => {
+                    delete newInitialValues[q.processedSubmissionName];
+                });
+                // Remove the section from dynamicSections
+                const updatedSections = structuredClone(this.dynamicSections);
+                updatedSections.splice(index, 1);
+                let suffixCounter = 2;
+                updatedSections.forEach(section => {
+                    // no need to process unrelated sections or originalSections
+                    if (section.name !== deleteSectionName || section.isOriginalSection) {
+                        return;
+                    }
+                    section.sectionPositionSuffix = suffixCounter;
+                    suffixCounter += 1;
+                    section.formQuestions = section.formQuestions.map(q => {
+                        const newName = `${deleteSectionName}_${section.sectionPositionSuffix}-${q.name}`;
+                        const oldName = q.processedSubmissionName;
+                        // Carry over any existing value
+                        if (newInitialValues[oldName] !== undefined) {
+                            newInitialValues[newName] = newInitialValues[oldName];
+                            delete newInitialValues[oldName];
+                        }
+                        return Object.assign(Object.assign({}, q), { processedSubmissionName: newName });
+                    });
+                });
+                this.dynamicSections = updatedSections;
+                this.initialValues = newInitialValues;
+                this.currentFormData = newInitialValues;
+                this.reRenderKey += 1;
+                console.log('newInitialValues', newInitialValues);
+            }
+            finally {
+                this.isUpdatingSections = false;
+                this.loading = false;
+            }
+        };
+        /**
+         * Manual save function - debounced to 5 seconds
+         */
+        this.handleManualSave = async (values) => {
+            // Only save if handler supports it and user is authenticated
+            if (!this.formHandler.supportsAutoSave() || !this.userId || !this.formHandler.saveFormData) {
+                return;
+            }
+            this.isSaving = true;
+            this.saveError = null;
+            try {
+                await this.formHandler.saveFormData(values, 'in-progress');
+                this.currentFormData = Object.assign({}, values);
+                console.log('Form saved successfully');
+            }
+            catch (error) {
+                console.error('Manual save failed:', error);
+                this.saveError = 'Failed to save form data';
+            }
+            finally {
+                this.isSaving = false;
             }
         };
+        this.handleFormChange = (values) => {
+            if (this.isUpdatingSections)
+                return;
+            this.currentFormData = values;
+        };
         this.handleFinish = () => {
             // Trigger any finish actions
             if (this.triggerAction) {
@@ -335,13 +456,17 @@ const UdpFormsRenderer$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsRender
     }
     async componentWillLoad() {
         this.loading = true;
-        this.formHandler = FormHandlerFactory.create(this.isPublic, this.formId, this.version, this.tenantId, this.userId, this.existingSubmission, (submission) => {
+        this.formHandler = FormHandlerFactory.create(this.isPublic, this.formId, this.version, this.tenantId, this.userId, this.existingSubmission, submission => {
             this.existingSubmission = submission;
         });
-        // Set up debounced auto-save function
-        this.debouncedAutoSave = debounce(async (values) => {
-            await this.handleAutoSave(values);
-        }, this.autoSaveDelay);
+        // Set up debounced auto-save function (currently disabled)
+        // this.debouncedAutoSave = debounce(async (values: { [name: string]: any }) => {
+        //   // await this.handleAutoSave(values); // Disabled for now
+        // }, this.autoSaveDelay);
+        // Set up throttled manual save function (5 seconds) - fires immediately, then throttles
+        this.debouncedManualSave = throttle(async (values) => {
+            await this.handleManualSave(values);
+        }, 2000, { leading: true, trailing: false });
         if (this.formId && this.version) {
             await this.loadForm();
         }
@@ -362,19 +487,63 @@ const UdpFormsRenderer$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsRender
                     if (existingData.status === 2) {
                         this.isSubmitted = true;
                     }
-                    // Process file data to convert file references to UdpDriveFile objects
-                    this.initialValues = await this.processInitialValues(this.initialValues);
                     this.currentFormData = Object.assign({}, this.initialValues);
                     if (existingData.status === 2 || existingData.status === 'submitted') {
                         this.isSubmitted = true;
                     }
                 }
             }
+            this.initializeDynamicSections();
         }
         catch (error) {
             console.error('Failed to load form:', error);
         }
     }
+    // build dynamic sections based on the
+    initializeDynamicSections() {
+        var _a;
+        const tempDynamicSection = [];
+        const sortedSections = structuredClone(this.form.udpFormUdpFormSection).sort((a, b) => a.order - b.order);
+        for (const section of sortedSections) {
+            section.name = `section${section.order}`; // THIS LINE WILL NOT BE NECESSARY SOON AFTER BACKEND UPDATE
+            section.sectionProperties = JSON.parse(section.sectionProperties || "{}");
+            const repeatGroupKeys = this.findRepeatGroupKeys(section.name, this.initialValues);
+            section.isOriginalSection = true;
+            section.sectionPositionSuffix = 1; // default position
+            // always add the original section into dynamic sections
+            tempDynamicSection.push(Object.assign(Object.assign({}, structuredClone(section)), { formQuestions: structuredClone(this.form.formQuestions)
+                    .filter(q => q.formSectionId === section.id)
+                    .sort((a, b) => a.questionOrder - b.questionOrder)
+                    .map(q => (Object.assign(Object.assign({}, q), { processedSubmissionName: `${section.name}-${q.name}` }))) }));
+            // create then add additional sections if there are repeated sections
+            if (((_a = section.sectionProperties) === null || _a === void 0 ? void 0 : _a.isRepeatable) && repeatGroupKeys.length > 0) {
+                const maxRepeatedSectionSuffix = Math.max(...repeatGroupKeys); // create a new section for the max value of repeat group keys, even if there are no saved answers
+                // for (const repeatKey of repeatGroupKeys) { // create a section only for the suffix saved
+                for (let repeatKey = 2; repeatKey <= maxRepeatedSectionSuffix; repeatKey++) {
+                    const clonedSection = Object.assign(Object.assign({}, structuredClone(section)), { formQuestions: structuredClone(this.form.formQuestions)
+                            .filter(q => q.formSectionId === section.id)
+                            .sort((a, b) => a.questionOrder - b.questionOrder)
+                            .map(q => (Object.assign(Object.assign({}, q), { processedSubmissionName: `${section.name}_${repeatKey}-${q.name}` }))), isOriginalSection: false, sectionPositionSuffix: repeatKey });
+                    tempDynamicSection.push(clonedSection);
+                }
+            }
+        }
+        console.log('tempDynamicSection', tempDynamicSection);
+        this.dynamicSections = tempDynamicSection;
+    }
+    findRepeatGroupKeys(sectionName, values) {
+        const keys = Object.keys(values);
+        const repeatGroupSet = new Set();
+        // Match: sectionName_2-question1
+        const regex = new RegExp(`^${sectionName}_(\\d+)-`);
+        keys.forEach(key => {
+            const match = key.match(regex);
+            if (match && match[1]) {
+                repeatGroupSet.add(Number(match[1]));
+            }
+        });
+        return Array.from(repeatGroupSet).sort((a, b) => a - b);
+    }
     async handleSubmit(values) {
         try {
             const success = await this.formHandler.submitForm(values);
@@ -385,163 +554,6 @@ const UdpFormsRenderer$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsRender
             throw error;
         }
     }
-    async handleAutoSave(values) {
-        // Only auto-save if handler supports it and user is authenticated
-        if (!this.formHandler.supportsAutoSave() || !this.userId || !this.formHandler.saveFormData) {
-            return;
-        }
-        this.isSaving = true;
-        this.saveError = null;
-        try {
-            await this.formHandler.saveFormData(values, 'in-progress');
-            this.currentFormData = Object.assign({}, values);
-        }
-        catch (error) {
-            console.error('Auto-save failed:', error);
-            this.saveError = 'Failed to save form data';
-        }
-        finally {
-            this.isSaving = false;
-        }
-    }
-    /**
-     * Process initial values to convert file references to UdpDriveFile objects
-     */
-    async processInitialValues(values) {
-        const processedValues = Object.assign({}, values);
-        for (const [key, value] of Object.entries(values)) {
-            if (typeof value === 'string' && this.isFileReference(value)) {
-                processedValues[key] = await this.parseFileReferences(value);
-            }
-        }
-        return processedValues;
-    }
-    /**
-     * Check if a string value is a file reference (contains | and udp: or b64:)
-     */
-    isFileReference(value) {
-        return typeof value === 'string' && value.includes('|') && (value.includes('udp:') || value.includes('b64:'));
-    }
-    /**
-     * Parse file references from the special format: "filename|udp:driveFileId" or "filename|b64:base64data"
-     */
-    async parseFileReferences(value) {
-        const references = value.split(',').map(ref => ref.trim()).filter(ref => ref);
-        const udpDriveFiles = [];
-        for (const reference of references) {
-            try {
-                const udpDriveFile = await this.parseFileReference(reference);
-                if (udpDriveFile) {
-                    udpDriveFiles.push(udpDriveFile);
-                }
-            }
-            catch (error) {
-                console.error('Error parsing file reference:', reference, error);
-            }
-        }
-        return udpDriveFiles;
-    }
-    /**
-     * Parse a single file reference
-     */
-    async parseFileReference(reference) {
-        const parts = reference.split('|');
-        if (parts.length !== 2) {
-            console.warn('Invalid file reference format:', reference);
-            return null;
-        }
-        const [filename, dataRef] = parts;
-        if (dataRef.startsWith('udp:')) {
-            // Handle UDP Drive file reference
-            const driveFileId = dataRef.substring(4); // Remove 'udp:' prefix
-            return await this.createUdpDriveFileFromId(filename, driveFileId);
-        }
-        else if (dataRef.startsWith('b64:')) {
-            // Handle base64 encoded file
-            const base64Data = dataRef.substring(4); // Remove 'b64:' prefix
-            return this.createUdpDriveFileFromBase64(filename, base64Data);
-        }
-        console.warn('Unknown file reference format:', dataRef);
-        return null;
-    }
-    /**
-     * Create a UdpDriveFile from a drive file ID
-     */
-    async createUdpDriveFileFromId(filename, driveFileId) {
-        // Extract file extension from filename
-        const extension = filename.split('.').pop() || '';
-        // Create a placeholder File object - the actual content will be downloaded when needed
-        const placeholderBlob = new Blob([''], { type: this.getMimeTypeFromExtension(extension) });
-        const file = new File([placeholderBlob], filename, {
-            type: placeholderBlob.type,
-            lastModified: Date.now()
-        });
-        // Create UdpDriveFile by extending the File object
-        const udpDriveFile = file;
-        // Add UDP-specific properties
-        udpDriveFile.driveFileId = driveFileId;
-        udpDriveFile.tenantId = this.tenantId;
-        udpDriveFile.productId = 0; // Will be filled by server
-        udpDriveFile.path = '';
-        udpDriveFile.extension = extension;
-        return udpDriveFile;
-    }
-    /**
-     * Create a UdpDriveFile from base64 data
-     */
-    createUdpDriveFileFromBase64(filename, base64Data) {
-        // Extract file extension from filename
-        const extension = filename.split('.').pop() || '';
-        // Decode base64 data
-        const binaryString = atob(base64Data);
-        const bytes = new Uint8Array(binaryString.length);
-        for (let i = 0; i < binaryString.length; i++) {
-            bytes[i] = binaryString.charCodeAt(i);
-        }
-        const blob = new Blob([bytes], { type: this.getMimeTypeFromExtension(extension) });
-        // Create a UdpDriveFile that extends File
-        const udpDriveFile = new File([blob], filename, {
-            type: blob.type,
-            lastModified: Date.now()
-        });
-        // Add UDP-specific properties
-        udpDriveFile.driveFileId = ''; // No drive file ID for base64 files
-        udpDriveFile.tenantId = this.tenantId;
-        udpDriveFile.productId = 0;
-        udpDriveFile.path = '';
-        udpDriveFile.extension = extension;
-        return udpDriveFile;
-    }
-    /**
-     * Get MIME type from file extension
-     */
-    getMimeTypeFromExtension(extension) {
-        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'
-        };
-        return mimeTypes[extension.toLowerCase()] || 'application/octet-stream';
-    }
     render() {
         if (this.loading) {
             return (h("div", { class: "loading-container" }, h("unity-spinner", { size: "medium" })));
@@ -549,7 +561,7 @@ const UdpFormsRenderer$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsRender
         if (!this.form) {
             return (h("div", { class: "error-container" }, h("unity-typography", { variant: "body1" }, "Form not found")));
         }
-        return (h("udp-forms-ui", { form: this.form, initialValues: this.initialValues, submitSuccessful: this.submitSuccessful, isSaving: this.isSaving, saveError: this.saveError, showAutoSaveStatus: this.formHandler.supportsAutoSave() && !!this.userId, readonly: this.isSubmitted, onSubmit: this.handleSubmit.bind(this), onChange: this.handleFormChange, onAction: this.triggerAction, onFinish: this.handleFinish }));
+        return (h("div", { class: "forms-renderer-container" }, h("udp-forms-ui", { form: this.form, initialValues: this.initialValues, submitSuccessful: this.submitSuccessful, isSaving: this.isSaving, saveError: this.saveError, showAutoSaveStatus: this.formHandler.supportsAutoSave() && !!this.userId, readonly: this.isSubmitted, currentFormData: this.currentFormData, handleSubmit: this.handleSubmit.bind(this), handleSave: (values) => Promise.resolve(this.debouncedManualSave(values)), handleChange: this.handleFormChange, handleAction: this.triggerAction, handleFinish: this.handleFinish, userId: this.userId, isSubmitted: this.isSubmitted, dynamicSections: this.dynamicSections, duplicateRepeatableSection: this.duplicateRepeatableSection, deleteRepeatableSection: this.deleteRepeatableSection, key: `form-${this.reRenderKey}` })));
     }
     get el() { return this; }
 }, [1, "udp-forms-renderer", {
@@ -568,13 +580,16 @@ const UdpFormsRenderer$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsRender
         "currentFormData": [32],
         "isSaving": [32],
         "saveError": [32],
-        "isSubmitted": [32]
+        "isSubmitted": [32],
+        "dynamicSections": [32],
+        "isUpdatingSections": [32],
+        "reRenderKey": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["udp-forms-renderer", "custom-button", "file-upload", "numeric-field", "selectable-list", "signature-input", "stencil-field", "stencil-form", "stencil-icon-button", "tally-display", "text-area", "text-field", "udp-adornment", "udp-ambient-card", "udp-ambient-tool-tip", "udp-badge", "udp-container", "udp-date-selector", "udp-datetime-selector", "udp-forms-ui", "udp-question", "udp-selector", "udp-time-selector", "unity-typography"];
+    const components = ["udp-forms-renderer", "custom-button", "file-upload", "numeric-field", "selectable-list", "signature-input", "stencil-field", "stencil-form", "stencil-icon-button", "tally-display", "text-area", "text-field", "udp-adornment", "udp-ambient-card", "udp-ambient-tool-tip", "udp-badge", "udp-container", "udp-date-selector", "udp-datetime-selector", "udp-forms-ui", "udp-icon-button", "udp-question", "udp-save-draft-button", "udp-selector", "udp-time-selector", "unity-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "udp-forms-renderer":
             if (!customElements.get(tagName)) {
@@ -583,100 +598,110 @@ function defineCustomElement$1() {
             break;
         case "custom-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$q();
             }
             break;
         case "file-upload":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$p();
             }
             break;
         case "numeric-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$o();
             }
             break;
         case "selectable-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$n();
             }
             break;
         case "signature-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$m();
             }
             break;
         case "stencil-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$l();
             }
             break;
         case "stencil-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$k();
             }
             break;
         case "stencil-icon-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$j();
             }
             break;
         case "tally-display":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$i();
             }
             break;
         case "text-area":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$h();
             }
             break;
         case "text-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$g();
             }
             break;
         case "udp-adornment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$f();
             }
             break;
         case "udp-ambient-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$e();
             }
             break;
         case "udp-ambient-tool-tip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "udp-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "udp-container":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "udp-date-selector":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "udp-datetime-selector":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
             }
             break;
         case "udp-forms-ui":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
+            }
+            break;
+        case "udp-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
             }
             break;
         case "udp-question":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "udp-save-draft-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }