udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/esm/udp-forms-builder.entry.js

@@ -109,7 +109,7 @@ const emptyStyleOverrides = {
 const formSectionDefault = {
     title: '',
     sectionText: '',
-    sectionProperties: '',
+    sectionProperties: '{}',
     formQuestions: [],
 };
 const UdpFormsBuilder = class {
@@ -131,16 +131,13 @@ const UdpFormsBuilder = class {
         this.isQuestionEditorOpen = false;
         this.isSectionEditorOpen = false;
         this.dialogMessage = 'Are you sure you want to delete this?';
+        this.sortableInstances = [];
         this.pageBuilderId = 'c77aa2c8-f8b8-41af-aa77-c8612fc918c1';
-        // ********************************** API CALLS **********************************
-        // ********************************** STENCIL RELATED **********************************
-        // ********************************** SORTABLE LOGIC **********************************
         // ********************************** SIDE SHEET LOGIC **********************************
+        this.toggleStyleSheet = () => {
+            this.isStyleSheetOpen = !this.isStyleSheetOpen;
+        };
         // ********************************** QUESTION HANDLERS **********************************
-        // ********************************** SECTION HANDLERS **********************************
-        // ********************************** FORM VALIDATION HELPERS **********************************
-        this.sortableInstances = [];
-        this.needsSortableInit = true;
         this.getQuestionTypeName = fieldTypeId => {
             const question = questionsTemplate.find(q => q.fieldTypeId === fieldTypeId);
             return question ? question.questionTypeName : 'Unknown';
@@ -175,24 +172,6 @@ const UdpFormsBuilder = class {
             this.editingQuestion = null;
             this.formSectionsDraft = null;
         };
-        this.updateFormSectionsWithDraft = () => {
-            this.formSections = this.formSectionsDraft;
-            this.formSectionsDraft = null;
-        };
-        this.hasUnsavedFormSectionsChanges = () => {
-            // return !isEqual(this.formSections, this.formSectionsDraft); // NEED TO INSTALL PACKAGE
-            return JSON.stringify(this.formSections) !== JSON.stringify(this.formSectionsDraft); // Breaks on circular refs or non-serializable types (like Dates, Maps, etc.)
-        };
-        this.handleSectionEditClick = (sIndex) => {
-            this.editingSection = { sIndex };
-            this.isSectionEditorOpen = true;
-            this.formSectionsDraft = deepCloneFormSections(this.formSections);
-        };
-        this.closeSectionEditor = () => {
-            this.isSectionEditorOpen = false;
-            this.editingSection = null;
-            this.formSectionsDraft = null;
-        };
         this.addQuestionOfType = (defaultQuestionObj, sIndex, qIndex) => {
             const newQuestion = {
                 questionTypeName: defaultQuestionObj.questionTypeName,
@@ -206,7 +185,7 @@ const UdpFormsBuilder = class {
                 required: true,
                 form: null,
                 isPrivate: true,
-                id: v4()
+                id: v4(),
             };
             const newFormSections = deepCloneFormSections(this.formSections); // Use helper to get a deep copy
             let actualSIndex = sIndex;
@@ -244,15 +223,12 @@ const UdpFormsBuilder = class {
                 this.showMenuAtIndex = null;
             return { sIndex: actualSIndex, qIndex: actualQIndex };
         };
-        this.toggleStyleSheet = () => {
-            this.isStyleSheetOpen = !this.isStyleSheetOpen;
-        };
+        // ********************************** SECTION HANDLERS **********************************
         this.handleSectionMoveDown = (sIndex) => {
             if (sIndex >= this.formSections.length - 1)
                 return;
             const sectionsCopy = [...this.formSections];
             [sectionsCopy[sIndex], sectionsCopy[sIndex + 1]] = [sectionsCopy[sIndex + 1], sectionsCopy[sIndex]];
-            this.needsSortableInit = true;
             this.formSections = sectionsCopy;
         };
         this.handleSectionMoveUp = (sIndex) => {
@@ -260,75 +236,33 @@ const UdpFormsBuilder = class {
                 return;
             const sectionsCopy = [...this.formSections];
             [sectionsCopy[sIndex], sectionsCopy[sIndex - 1]] = [sectionsCopy[sIndex - 1], sectionsCopy[sIndex]];
-            this.needsSortableInit = true;
             this.formSections = sectionsCopy;
         };
         this.handleSectionDelete = (sIndex) => {
             const newFormSections = [...this.formSections];
             newFormSections.splice(sIndex, 1);
-            this.needsSortableInit = true;
             this.formSections = newFormSections;
         };
+        this.updateFormSectionsWithDraft = () => {
+            this.formSections = this.formSectionsDraft;
+            this.formSectionsDraft = null;
+        };
+        this.hasUnsavedFormSectionsChanges = () => {
+            // return !isEqual(this.formSections, this.formSectionsDraft); // NEED TO INSTALL PACKAGE
+            return JSON.stringify(this.formSections) !== JSON.stringify(this.formSectionsDraft); // Breaks on circular refs or non-serializable types (like Dates, Maps, etc.)
+        };
+        this.handleSectionEditClick = (sIndex) => {
+            this.editingSection = { sIndex };
+            this.isSectionEditorOpen = true;
+            this.formSectionsDraft = deepCloneFormSections(this.formSections);
+        };
+        this.closeSectionEditor = () => {
+            this.isSectionEditorOpen = false;
+            this.editingSection = null;
+            this.formSectionsDraft = null;
+        };
     }
-    initializeSortable() {
-        // sortable only if the form is editable
-        if (!(this.isNewForm || this.isMostRecentFormVersion)) {
-            return;
-        }
-        this.sortableInstances.forEach(instance => instance.destroy());
-        this.sortableInstances = [];
-        this.formSections.forEach((_, sIndex) => {
-            const el = this.hostEl.shadowRoot.querySelector(`#section-${sIndex}`);
-            if (el) {
-                const sortable = new Sortable(el, {
-                    animation: 200,
-                    easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
-                    draggable: 'udp-forms-builder-question-item',
-                    handle: '.form-question-drag-handle',
-                    ghostClass: 'sortable-ghost',
-                    chosenClass: 'sortable-chosen',
-                    direction: 'vertical',
-                    forceFallback: false,
-                    dragoverBubble: false,
-                    swapThreshold: 0.6,
-                    onEnd: evt => this.handleDragEnd(evt, sIndex),
-                });
-                this.sortableInstances.push(sortable);
-            }
-        });
-    }
-    handleDragEnd(evt, sIndex) {
-        const oldIndex = evt.oldIndex;
-        const newIndex = evt.newIndex;
-        if (oldIndex === newIndex || oldIndex == null || newIndex == null)
-            return;
-        const sectionCopy = structuredClone(this.formSections[sIndex]);
-        const [moved] = sectionCopy.formQuestions.splice(oldIndex, 1);
-        sectionCopy.formQuestions.splice(newIndex, 0, moved);
-        // const newFormSections = [...this.formSections];
-        const newFormSections = deepCloneFormSections(this.formSections);
-        newFormSections[sIndex] = sectionCopy;
-        console.log(`Moved question in section ${sIndex} from ${oldIndex} to ${newIndex}`);
-        this.formSections = newFormSections;
-    }
-    componentDidLoad() {
-        this.initializeSortable();
-    }
-    componentDidUpdate() {
-        this.initializeSortable();
-    }
-    componentWillLoad() {
-        this.initializeForm();
-    }
-    onFormSectionsChange(newValue) {
-        console.log(newValue);
-    }
-    onFormMetadataChange(newValue) {
-        console.log(newValue);
-    }
-    onFormIdOrVersionChange() {
-        this.initializeForm();
-    }
+    // ********************************** API CALLS **********************************
     async initializeForm() {
         // set default form values
         this.formMetadata.isPrivate = true;
@@ -362,6 +296,14 @@ const UdpFormsBuilder = class {
                 }
                 // Clone formSections and initialize empty question arrays
                 const tempSections = structuredClone(formDataResponse.udpFormUdpFormSection).map(section => (Object.assign(Object.assign({}, section), { formQuestions: [] })));
+                tempSections.forEach(section => {
+                    if (!section.sectionProperties) {
+                        section.sectionProperties = {};
+                    }
+                    else {
+                        section.sectionProperties = JSON.parse(section.sectionProperties);
+                    }
+                });
                 // Map questions into their respective sections
                 formDataResponse.formQuestions.forEach(question => {
                     const section = tempSections.find(s => s.id === question.formSectionId);
@@ -378,6 +320,8 @@ const UdpFormsBuilder = class {
                 tempSections.forEach(section => {
                     section.formQuestions.sort((a, b) => a.questionOrder - b.questionOrder);
                 });
+                // Sort sections
+                tempSections.sort((a, b) => a.order - b.order);
                 const metadata = __rest(formDataResponse, []);
                 // Merge fetched styleOverrides with defaults
                 metadata.styleOverrides = this.deepMerge(emptyStyleOverrides, JSON.parse(metadata.styleOverrides) || {});
@@ -398,7 +342,6 @@ const UdpFormsBuilder = class {
             this.isLoading = false;
         }
     }
-    // ********************************** HELPERS **********************************
     async submitForm() {
         this.isLoading = true;
         try {
@@ -412,12 +355,10 @@ const UdpFormsBuilder = class {
                 type: this.formMetadata.type,
                 styleOverrides: JSON.stringify(this.formMetadata.styleOverrides),
                 id: this.formMetadata.id,
-                version: this.formMetadata.version
+                version: this.formMetadata.version,
             };
-            console.log('Submitting form metadata:', processedFormMetadata);
             const formUrl = `${ConfigService.productV1ApiUrl}/UdpForm${this.isMostRecentFormVersion ? '/versions' : ''}`;
             const formResponse = await makeApiCall('POST', formUrl, processedFormMetadata);
-            console.log('Form response:', formResponse);
             const formId = formResponse.id;
             const formVersion = formResponse.version;
             if (!formResponse || !formResponse.id || !formResponse.version) {
@@ -430,8 +371,7 @@ const UdpFormsBuilder = class {
             for (const [sIndex, section] of this.formSections.entries()) {
                 sectionOrder += 1;
                 const processedSectionData = Object.assign(Object.assign({}, section), { formId,
-                    formVersion, order: sectionOrder });
-                console.log('Submitting section:', processedSectionData);
+                    formVersion, order: sectionOrder, sectionProperties: JSON.stringify(section.sectionProperties) });
                 const sectionResponse = await makeApiCall('POST', `${ConfigService.productV1ApiUrl}/UdpFormSection`, processedSectionData);
                 if (!sectionResponse || !sectionResponse.id) {
                     throw new Error(`Invalid section response: ${JSON.stringify(sectionResponse)}`);
@@ -441,7 +381,6 @@ const UdpFormsBuilder = class {
                     questionOrder += 1;
                     const processedQuestionData = Object.assign(Object.assign({}, question), { formId,
                         formVersion, section: sIndex + 1, questionOrder, formSectionId: sectionId, name: `question${questionOrder}` });
-                    console.log('Submitting question:', processedQuestionData);
                     const questionRequest = makeApiCall('POST', `${ConfigService.productV1ApiUrl}/UdpFormQuestion`, processedQuestionData);
                     questionRequests.push(questionRequest);
                 }
@@ -465,6 +404,68 @@ const UdpFormsBuilder = class {
             this.isLoading = false;
         }
     }
+    // ********************************** STENCIL RELATED **********************************
+    componentDidLoad() {
+        this.initializeSortable();
+    }
+    componentDidUpdate() {
+        this.initializeSortable();
+    }
+    componentWillLoad() {
+        this.initializeForm();
+    }
+    // @Watch('formSections')
+    // onFormSectionsChange(newValue: any[]) {
+    //   console.log(newValue);
+    // }
+    // @Watch('formMetadata')
+    // onFormMetadataChange(newValue) {
+    //   console.log(newValue);
+    // }
+    onFormIdOrVersionChange() {
+        this.initializeForm();
+    }
+    // ********************************** SORTABLE LOGIC **********************************
+    initializeSortable() {
+        // sortable only if the form is editable
+        if (!(this.isNewForm || this.isMostRecentFormVersion)) {
+            return;
+        }
+        this.sortableInstances.forEach(instance => instance.destroy());
+        this.sortableInstances = [];
+        this.formSections.forEach((_, sIndex) => {
+            const el = this.hostEl.shadowRoot.querySelector(`#section-${sIndex}`);
+            if (el) {
+                const sortable = new Sortable(el, {
+                    animation: 200,
+                    easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
+                    draggable: 'udp-forms-builder-question-item',
+                    handle: '.form-question-drag-handle',
+                    ghostClass: 'sortable-ghost',
+                    chosenClass: 'sortable-chosen',
+                    direction: 'vertical',
+                    forceFallback: false,
+                    dragoverBubble: false,
+                    swapThreshold: 0.6,
+                    onEnd: evt => this.handleDragEnd(evt, sIndex),
+                });
+                this.sortableInstances.push(sortable);
+            }
+        });
+    }
+    handleDragEnd(evt, sIndex) {
+        const oldIndex = evt.oldIndex;
+        const newIndex = evt.newIndex;
+        if (oldIndex === newIndex || oldIndex == null || newIndex == null)
+            return;
+        const sectionCopy = structuredClone(this.formSections[sIndex]);
+        const [moved] = sectionCopy.formQuestions.splice(oldIndex, 1);
+        sectionCopy.formQuestions.splice(newIndex, 0, moved);
+        // const newFormSections = [...this.formSections];
+        const newFormSections = deepCloneFormSections(this.formSections);
+        newFormSections[sIndex] = sectionCopy;
+        this.formSections = newFormSections;
+    }
     deepMerge(target, source) {
         const output = Object.assign({}, target);
         for (const key in source) {
@@ -477,6 +478,27 @@ const UdpFormsBuilder = class {
         }
         return output;
     }
+    // ********************************** FORM VALIDATION HELPERS **********************************
+    validateForm() {
+        return this.validateFormMetadata() && this.validateAllQuestions();
+    }
+    validateFormMetadata() {
+        if (!this.formMetadata.title || !this.formMetadata.description) {
+            return false;
+        }
+        return true;
+    }
+    validateAllQuestions() {
+        for (let sIndex = 0; sIndex < this.formSections.length; sIndex++) {
+            const formSection = this.formSections[sIndex];
+            for (let qIndex = 0; qIndex < formSection.length; qIndex++) {
+                if (!this.validateQuestionItem(sIndex, qIndex)) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
     validateQuestionItem(sIndex, qIndex) {
         const questionItem = this.formSections[sIndex].formQuestions[qIndex];
         if (!questionItem.questionText) {
@@ -499,80 +521,41 @@ const UdpFormsBuilder = class {
         }
         return true;
     }
-    validateForm() {
-        return this.validateFormMetadata() && this.validateAllQuestions();
-    }
-    validateFormMetadata() {
-        if (!this.formMetadata.title || !this.formMetadata.description) {
-            return false;
-        }
-        return true;
-    }
-    validateAllQuestions() {
-        for (let sIndex = 0; sIndex < this.formSections.length; sIndex++) {
-            const formSection = this.formSections[sIndex];
-            for (let qIndex = 0; qIndex < formSection.length; qIndex++) {
-                if (!this.validateQuestionItem(sIndex, qIndex)) {
-                    return false;
-                }
-            }
-        }
-        return true;
-    }
-    // private handleSectionAdd = (sIndex: number) => {
-    //   return
-    // }
     render() {
-        console.log('[UDP Forms Builder] render called. isStyleSheetOpen:', this.isStyleSheetOpen);
         if (this.isError) {
             return h("div", null, " Error With the Form Builder");
         }
         const isEditable = this.isNewForm || this.isMostRecentFormVersion;
-        // const editingQuestionData =
-        //   this.editingQuestion && this.formSections[this.editingQuestion.sIndex].formQuestions
-        //     ? this.formSections[this.editingQuestion.sIndex].formQuestions[this.editingQuestion.qIndex]
-        //     : null;
-        // console.log(this.editingSection);
-        // const editingSectionData = this.editingSection && this.formSections[this.editingSection.sIndex] ? this.formSections[this.editingSection.sIndex] : null;
         return (h("div", null, h("primary-action-header", { title: 'UDP Form Builder', actionButtonLabel: isEditable ? (this.isMostRecentFormVersion ? `Create New Version (v.${this.version + 1})` : 'Create New Form') : '', primaryActionClick: isEditable ? () => this.submitForm() : null,
             // HIDE STYLE OVERRIDE IN UI
             defaultActionButtons: isEditable ? [{ label: 'Style Overrides', clickHandler: this.toggleStyleSheet, tooltip: 'Style Overrides', visible: false, icon: getIconFromName('settings') }] : [], tabs: false }), h("udp-side-sheet", { open: this.isStyleSheetOpen, onUdpSideSheetClose: () => (this.isStyleSheetOpen = false), title: "Style Overrides", position: "right", width: "md" }, h("udp-forms-builder-style-override", { formMetadata: this.formMetadata, onFormMetadataChange: updated => (this.formMetadata = updated) })), h("udp-side-sheet", { open: this.isQuestionEditorOpen, onUdpSideSheetClose: () => this.closeQuestionEditor(), onUdpPrimaryButtonClick: () => {
-                // dont do anything if no changes are made. without this, it'll close the sidesheet
+                // don't do anything if no changes are made.
+                // it'll close the side sheet without this
                 if (!this.hasUnsavedFormSectionsChanges()) {
                     return;
                 }
                 this.updateFormSectionsWithDraft();
                 this.closeQuestionEditor();
             }, primaryButtonDisabled: !this.hasUnsavedFormSectionsChanges(), title: "Edit Question", position: "right", width: "md", primaryButtonLabel: "Update" }, this.isQuestionEditorOpen && (h("div", { class: "question-editor-container" }, h("question-configs-renderer", { formSectionsDraft: this.formSectionsDraft, sIndex: this.editingQuestion.sIndex, qIndex: this.editingQuestion.qIndex, isViewOnly: !isEditable, onFormSectionsDraftChange: updated => (this.formSectionsDraft = updated), lookupOptions: this.lookupOptionsDataProcessed })))), h("udp-side-sheet", { open: this.isSectionEditorOpen, onUdpSideSheetClose: () => this.closeSectionEditor(), title: "Edit Section Fields", position: "right", width: "md", primaryButtonDisabled: !this.hasUnsavedFormSectionsChanges(), primaryButtonLabel: "Update", onUdpPrimaryButtonClick: () => {
-                // dont do anything if no changes are made. without this, it'll close the sidesheet
+                // don't do anything if no changes are made.
+                // it'll close the side sheet without this
                 if (!this.hasUnsavedFormSectionsChanges()) {
                     return;
                 }
                 this.updateFormSectionsWithDraft();
                 this.closeSectionEditor();
-            } }, this.isSectionEditorOpen && (h("div", { class: "section-editor-container" }, h("section-configs-renderer", {
-            // sectionData={editingSectionData}
-            formSectionsDraft: this.formSectionsDraft, sIndex: this.editingSection.sIndex, isViewOnly: !isEditable, onFormSectionsDraftChange: updated => (this.formSectionsDraft = updated)
-        })))), h("fluent-dialog", { open: this.isDialogOpen,
-            // message={'Are you sure you want to delete this question?'}
-            message: this.dialogMessage, labelOne: 'Cancel', labelTwo: 'Confirm', actionOne: () => (this.isDialogOpen = false), actionTwo: () => this.dialogActionTwo() }), this.isLoading && h("udp-linear-loader", null), !this.isLoading && (h("udp-container", { maxWidth: "lg" }, h("div", { class: "udp-forms-page" }, h("div", { class: "form-details-container" }, h("div", { class: "form-details-name-container" }, isEditable ? (h("div", { class: "form-details-name-input" }, h("text-field", { label: "Form Title", value: this.formMetadata.name, placeholder: " Form Title", disabled: !isEditable, required: true, margin: 'none',
+            } }, this.isSectionEditorOpen && (h("div", { class: "section-editor-container" }, h("section-configs-renderer", { formSectionsDraft: this.formSectionsDraft, sIndex: this.editingSection.sIndex, isViewOnly: !isEditable, onFormSectionsDraftChange: updated => (this.formSectionsDraft = updated) })))), h("fluent-dialog", { open: this.isDialogOpen, message: this.dialogMessage, labelOne: 'Confirm', labelTwo: 'Cancel', actionOne: () => this.dialogAction(), actionTwo: () => (this.isDialogOpen = false) }), this.isLoading && h("udp-linear-loader", null), !this.isLoading && (h("udp-container", { maxWidth: "lg" }, h("div", { class: "udp-forms-page" }, h("div", { class: "form-details-container" }, h("div", { class: "form-details-name-container" }, isEditable ? (h("div", { class: "form-details-name-input" }, h("text-field", { label: "Form Title", value: this.formMetadata.name, placeholder: " Form Title", disabled: !isEditable, required: true, margin: "none",
             // size='small'
-            onInput: (e) => {
+            onInput: e => {
                 this.formMetadata = Object.assign(Object.assign({}, this.formMetadata), { name: e.target.value });
-            } }))) : (h("div", { class: "form-details-name-display" }, h("unity-typography", { variant: 'h2' }, this.formMetadata.name + ' (View Only)')))), h("div", { class: "form-details-description-container" }, isEditable ? (h("div", { class: "form-details-details-input" }, h("text-area", { label: "Form Description", value: this.formMetadata.description, placeholder: "Form Description", disabled: !isEditable, required: true, margin: 'none',
+            } }))) : (h("div", { class: "form-details-name-display" }, h("unity-typography", { variant: 'h2' }, this.formMetadata.name + ' (View Only)')))), h("div", { class: "form-details-description-container" }, isEditable ? (h("div", { class: "form-details-details-input" }, h("text-area", { label: "Form Description", value: this.formMetadata.description, placeholder: "Form Description", disabled: !isEditable, required: true, margin: "none",
             // size='small'
-            onInput: (e) => {
+            onInput: e => {
                 this.formMetadata = Object.assign(Object.assign({}, this.formMetadata), { description: e.target.value });
-            } }))) : (h("div", { class: "form-details-description-display" }, h("unity-typography", null, this.formMetadata.description)))), h("div", { class: "form-details-version-container" }, h("unity-typography", null, "Version: ", this.formMetadata.version)), h("div", { class: "form-details-private-container" }, h("div", { class: "toggle-container" }, h("stencil-toggle", { label: "Private Form", margin: 'none', disabled: !isEditable, checked: this.formMetadata.isPrivate === true, labelPosition: "right", onToggledChange: () => {
+            } }))) : (h("div", { class: "form-details-description-display" }, h("unity-typography", null, this.formMetadata.description)))), h("div", { class: "form-details-version-container" }, h("unity-typography", null, "Version: ", this.formMetadata.version)), h("div", { class: "form-details-private-container" }, h("div", { class: "toggle-container" }, h("stencil-toggle", { label: "Private Form", margin: "none", disabled: !isEditable, checked: this.formMetadata.isPrivate === true, labelPosition: "right", onToggledChange: () => {
                 let newIsPrivate = !this.formMetadata.isPrivate;
                 this.formMetadata = Object.assign(Object.assign({}, this.formMetadata), { isPrivate: newIsPrivate });
             } })))), isEditable && (h("div", { class: "add-question-button-container" }, h("udp-button", { startIcon: h("udp-icon", { iconName: 'add', color: 'inherit' }), onClick: () => {
-                // this.formSections = [[]];
-                // const newSectionIndex = this.formSections.length;
-                // const newFormSections = deepCloneFormSections(this.formSections)
-                // newFormSections.push()
-                // this.formSections = [...this.formSections, []];
-                // this.showMenuAtIndex = { sIndex: newSectionIndex, qIndex: 0 };
                 const newSectionIndex = this.formSections.length;
                 const newFormSections = deepCloneFormSections(this.formSections);
                 newFormSections.push(Object.assign(Object.assign({}, formSectionDefault), { order: newSectionIndex + 1, title: `Section ${newSectionIndex + 1}` }));
@@ -583,10 +566,10 @@ const UdpFormsBuilder = class {
                     this.handleSectionMoveUp(sIndex);
                 } })), sIndex < this.formSections.length - 1 && (h("stencil-icon-button", { icon: getIconFromName('arrowDown'), tooltip: "Move Section Down", onClick: () => {
                     this.handleSectionMoveDown(sIndex);
-                } })), h("stencil-icon-button", { icon: getIconFromName('edit'), tooltip: `Edit Section Fields`, onClick: () => this.handleSectionEditClick(sIndex) }), h("stencil-icon-button", { icon: getIconFromName('trashCan'), tooltip: "Delete Section", onClick: (e) => {
+                } })), h("stencil-icon-button", { icon: getIconFromName('edit'), tooltip: `Edit Section Fields`, onClick: () => this.handleSectionEditClick(sIndex) }), h("stencil-icon-button", { icon: getIconFromName('trashCan'), tooltip: "Delete Section", onClick: e => {
                     e.stopPropagation();
                     this.dialogMessage = 'Are you sure you want to delete this section?';
-                    this.dialogActionTwo = () => {
+                    this.dialogAction = () => {
                         this.handleSectionDelete(sIndex);
                         this.isDialogOpen = false;
                     };
@@ -613,7 +596,7 @@ const UdpFormsBuilder = class {
                     }, noBackground: true }), h("stencil-icon-button", { icon: getIconFromName('trashCan'), tooltip: "Delete Question", onClick: e => {
                         e.stopPropagation();
                         this.dialogMessage = 'Are you sure you want to delete this question?';
-                        this.dialogActionTwo = () => {
+                        this.dialogAction = () => {
                             this.handleQuestionDelete(sIndex, qIndex);
                             this.isDialogOpen = false;
                         };
@@ -645,8 +628,6 @@ const UdpFormsBuilder = class {
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
-        "formSections": ["onFormSectionsChange"],
-        "formMetadata": ["onFormMetadataChange"],
         "formId": ["onFormIdOrVersionChange"],
         "version": ["onFormIdOrVersionChange"]
     }; }