udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/components/udp-container-query.js

@@ -1,4 +1,4 @@
-import { U as UdpContainerQuery$1, d as defineCustomElement$1 } from './p-Bykep8mm.js';
+import { U as UdpContainerQuery$1, d as defineCustomElement$1 } from './p-ibwbE8nI.js';
 
 const UdpContainerQuery = UdpContainerQuery$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-container.js

@@ -1,4 +1,4 @@
-import { U as UdpContainer$1, d as defineCustomElement$1 } from './p-CDnOrzs3.js';
+import { U as UdpContainer$1, d as defineCustomElement$1 } from './p-DBtdo56U.js';
 
 const UdpContainer = UdpContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-date-selector.js

@@ -1,4 +1,4 @@
-import { U as UdpDateSelector$1, d as defineCustomElement$1 } from './p-DzaN4l_Y.js';
+import { U as UdpDateSelector$1, d as defineCustomElement$1 } from './p-Cp1kbBGM.js';
 
 const UdpDateSelector = UdpDateSelector$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-datetime-selector.js

@@ -1,4 +1,4 @@
-import { U as UdpDateTimeSelector, d as defineCustomElement$1 } from './p-DMcaGgHq.js';
+import { U as UdpDateTimeSelector, d as defineCustomElement$1 } from './p-DnMRLbBX.js';
 
 const UdpDatetimeSelector = UdpDateTimeSelector;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-distribution-chart.js

@@ -1,4 +1,4 @@
-import { U as UdpDistributionChart$1, d as defineCustomElement$1 } from './p-DNxY-i6k.js';
+import { U as UdpDistributionChart$1, d as defineCustomElement$1 } from './p-BpD1NQKC.js';
 
 const UdpDistributionChart = UdpDistributionChart$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-donut-chart.js

@@ -1,4 +1,4 @@
-import { U as UdpDonutChart$1, d as defineCustomElement$1 } from './p-BJerffMg.js';
+import { U as UdpDonutChart$1, d as defineCustomElement$1 } from './p-DL9uHt-7.js';
 
 const UdpDonutChart = UdpDonutChart$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-dynamic-container-with-menu.js

@@ -1,4 +1,4 @@
-import { D as DynamicContainerWithMenu, d as defineCustomElement$1 } from './p-D-JeGky8.js';
+import { D as DynamicContainerWithMenu, d as defineCustomElement$1 } from './p-BB2sALAW.js';
 
 const UdpDynamicContainerWithMenu = DynamicContainerWithMenu;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-dynamic-form.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
 import { d as defineCustomElement$a } from './p-DpLtIIwx.js';
-import { d as defineCustomElement$9 } from './p-B3-pcvgV.js';
+import { d as defineCustomElement$9 } from './p-Cdz5sX_v.js';
 import { d as defineCustomElement$8 } from './p-BU3lEg0a.js';
-import { d as defineCustomElement$7 } from './p-hRee3qYx.js';
-import { d as defineCustomElement$6 } from './p-BYsLvu6g.js';
+import { d as defineCustomElement$7 } from './p-D6Wo7quX.js';
+import { d as defineCustomElement$6 } from './p-CpMdhv3j.js';
 import { d as defineCustomElement$5 } from './p-ZeWoGdjP.js';
 import { d as defineCustomElement$4 } from './p-C-wDzVCk.js';
-import { d as defineCustomElement$3 } from './p-BTIWOttf.js';
+import { d as defineCustomElement$3 } from './p-W_kxEzVl.js';
 import { d as defineCustomElement$2 } from './p-DkppmXNM.js';
 
 const udpDynamicFormCss = ".form-root{display:flex;flex-wrap:wrap}";

package/dist/components/udp-forms-builder-menu.js

@@ -1,4 +1,4 @@
-import { U as UdpFormsBuilderMenu$1, d as defineCustomElement$1 } from './p-DIcPqQkn.js';
+import { U as UdpFormsBuilderMenu$1, d as defineCustomElement$1 } from './p-DSIcWNUB.js';
 
 const UdpFormsBuilderMenu = UdpFormsBuilderMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-forms-builder-question-item.js

@@ -1,4 +1,4 @@
-import { U as UdpFormsBuilderQuestionItem$1, d as defineCustomElement$1 } from './p-CY0PAhIT.js';
+import { U as UdpFormsBuilderQuestionItem$1, d as defineCustomElement$1 } from './p-Dmmz74K2.js';
 
 const UdpFormsBuilderQuestionItem = UdpFormsBuilderQuestionItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/udp-forms-builder-style-override.js

@@ -1,4 +1,4 @@
-import { U as UdpFormsBuilderStyleOverride$1, d as defineCustomElement$1 } from './p-ves_LtSN.js';
+import { U as UdpFormsBuilderStyleOverride$1, d as defineCustomElement$1 } from './p-B6A-djr0.js';
 
 const UdpFormsBuilderStyleOverride = UdpFormsBuilderStyleOverride$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,43 +1,44 @@
 import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
 import { m as makeApiCall } from './p-B-daVutk.js';
-import { q as questionsTemplate, d as defineCustomElement$r } from './p-DxJCXXmE.js';
-import { g as getIconFromName, d as defineCustomElement$8 } from './p-IlXn87Ki.js';
+import { q as questionsTemplate, d as defineCustomElement$r } from './p-Cr_ifuX-.js';
+import { g as getIconFromName } from './p-BY5RQ-T1.js';
 import { C as ConfigService } from './p-Cn7PuhQz.js';
 import { g as getCurrentTenantId } from './p-Basdb1b1.js';
 import { d as deepCloneFormSections } from './p-DhYDXL0I.js';
 import Sortable from 'sortablejs';
 import { v4 } from 'uuid';
 import { d as defineCustomElement$z } from './p-DpLtIIwx.js';
-import { d as defineCustomElement$y } from './p-ChdtzL8Z.js';
-import { d as defineCustomElement$x } from './p-CTn3c76I.js';
+import { d as defineCustomElement$y } from './p-Dpvhge5H.js';
+import { d as defineCustomElement$x } from './p-1uly65Sv.js';
 import { d as defineCustomElement$w } from './p-BuRv3dp5.js';
-import { d as defineCustomElement$v } from './p-BdWgc1UD.js';
-import { d as defineCustomElement$u } from './p-BvSuY3tY.js';
-import { d as defineCustomElement$t } from './p-CJsnV8uM.js';
-import { d as defineCustomElement$s } from './p-CJINZgmD.js';
-import { d as defineCustomElement$q } from './p-DOKGpXin.js';
+import { d as defineCustomElement$v } from './p-Bi8lqIP-.js';
+import { d as defineCustomElement$u } from './p-Dx5ehH3t.js';
+import { d as defineCustomElement$t } from './p-BfT3KUJC.js';
+import { d as defineCustomElement$s } from './p-C6bm8Rs4.js';
+import { d as defineCustomElement$q } from './p-Cyigv-iT.js';
 import { d as defineCustomElement$p } from './p-B0DDn0I9.js';
-import { d as defineCustomElement$o } from './p-hRee3qYx.js';
-import { d as defineCustomElement$n } from './p-HrsHnWeG.js';
-import { d as defineCustomElement$m } from './p-CRiQA7Cy.js';
-import { d as defineCustomElement$l } from './p-BYsLvu6g.js';
-import { d as defineCustomElement$k } from './p-DQIj9UI7.js';
+import { d as defineCustomElement$o } from './p-D6Wo7quX.js';
+import { d as defineCustomElement$n } from './p-6EzLtNtq.js';
+import { d as defineCustomElement$m } from './p-DZaCCOXB.js';
+import { d as defineCustomElement$l } from './p-CpMdhv3j.js';
+import { d as defineCustomElement$k } from './p-Ut5zP7nE.js';
 import { d as defineCustomElement$j } from './p-ZeWoGdjP.js';
-import { d as defineCustomElement$i } from './p-Cf-3pInV.js';
+import { d as defineCustomElement$i } from './p-Ct7EvUCI.js';
 import { d as defineCustomElement$h } from './p-C-wDzVCk.js';
 import { d as defineCustomElement$g } from './p-Dri6DPsA.js';
-import { d as defineCustomElement$f } from './p-CDnOrzs3.js';
-import { d as defineCustomElement$e } from './p-DzaN4l_Y.js';
-import { d as defineCustomElement$d } from './p-DMcaGgHq.js';
+import { d as defineCustomElement$f } from './p-DBtdo56U.js';
+import { d as defineCustomElement$e } from './p-Cp1kbBGM.js';
+import { d as defineCustomElement$d } from './p-DnMRLbBX.js';
 import { d as defineCustomElement$c } from './p-Ci_CQV-N.js';
-import { d as defineCustomElement$b } from './p-DIcPqQkn.js';
-import { d as defineCustomElement$a } from './p-CY0PAhIT.js';
-import { d as defineCustomElement$9 } from './p-ves_LtSN.js';
-import { d as defineCustomElement$7 } from './p-byKLubNE.js';
-import { d as defineCustomElement$6 } from './p-BTIWOttf.js';
-import { d as defineCustomElement$5 } from './p-DIPIddaO.js';
-import { d as defineCustomElement$4 } from './p-DqPGCQm2.js';
-import { d as defineCustomElement$3 } from './p-Bdt-oOnd.js';
+import { d as defineCustomElement$b } from './p-DSIcWNUB.js';
+import { d as defineCustomElement$a } from './p-Dmmz74K2.js';
+import { d as defineCustomElement$9 } from './p-B6A-djr0.js';
+import { d as defineCustomElement$8 } from './p-1Cv4cku0.js';
+import { d as defineCustomElement$7 } from './p-Coa3kO6W.js';
+import { d as defineCustomElement$6 } from './p-W_kxEzVl.js';
+import { d as defineCustomElement$5 } from './p-CqiZ9SAU.js';
+import { d as defineCustomElement$4 } from './p-s8qXxEgi.js';
+import { d as defineCustomElement$3 } from './p-Oil5iqFm.js';
 import { d as defineCustomElement$2 } from './p-DkppmXNM.js';
 
 const udpFormsBuilderCss = ":host{display:block;--udp-form-primary-color:#007bff;--udp-form-spacing-unit:16px}.udp-forms-page{display:flex;flex-direction:column;gap:var(--spacing-06, 32px);padding:var(--spacing-06, 32px);padding-bottom:var(--spacing-12)}.form-section-questions-container{display:flex;flex-direction:column}.form-details-container{display:flex;flex-direction:column;padding:var(--spacing-05, 24px);background-color:var(--card-background-color, white)}.form-details-version-container{margin-bottom:var(--spacing-05)}.udp-form-builder-field-container,.udp-forms-builder-item-generic-configs,.udp-forms-builder-item-specific-configs{display:flex;flex-direction:column;gap:var(--spacing-04, 16px)}.form-section{}.form-section-header{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--primary-color-dark, #000);color:var(--primary-contrast-text, #FFF);padding:var(--spacing-04, 16px) var(--spacing-05, 24px);align-items:center}.add-question-button-container{display:flex;justify-content:center;align-items:center}.question-editor-container{padding:var(--spacing-05, 24px);display:flex;flex-direction:column;gap:var(--spacing-05, 24px)}.add-question-to-section-button-container{padding:var(--spacing-02, 8px) 0;margin:auto}.sortable-ghost{opacity:0.5;transform:scale(0.98);background:#f4f4f4;border:1px dashed #ccc}.sortable-chosen{background:#eef6ff;box-shadow:0 0 4px 2px rgba(51, 153, 255, 0.3)}.form-question-drag-handle{transform:rotate(90deg);cursor:grab}.form-question-drag-handle:active{cursor:grabbing}.form-question-drag-handle .drag-wrapper{cursor:inherit}.form-question-drag-handle stencil-icon-button{pointer-events:none;}";
@@ -81,7 +82,7 @@ const emptyStyleOverrides = {
 const formSectionDefault = {
     title: '',
     sectionText: '',
-    sectionProperties: '',
+    sectionProperties: '{}',
     formQuestions: [],
 };
 const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder extends H {
@@ -105,16 +106,13 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
         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';
@@ -149,24 +147,6 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
             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,
@@ -180,7 +160,7 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                 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;
@@ -218,15 +198,12 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                 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) => {
@@ -234,75 +211,33 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                 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;
@@ -336,6 +271,14 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                 }
                 // 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);
@@ -352,6 +295,8 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                 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) || {});
@@ -372,7 +317,6 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
             this.isLoading = false;
         }
     }
-    // ********************************** HELPERS **********************************
     async submitForm() {
         this.isLoading = true;
         try {
@@ -386,12 +330,10 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                 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) {
@@ -404,8 +346,7 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
             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)}`);
@@ -415,7 +356,6 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                     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);
                 }
@@ -439,6 +379,68 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
             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) {
@@ -451,6 +453,27 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
         }
         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) {
@@ -473,80 +496,41 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
         }
         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}` }));
@@ -557,10 +541,10 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                     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;
                     };
@@ -587,7 +571,7 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
                     }, 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;
                         };
@@ -619,8 +603,6 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
     }
     get hostEl() { return this; }
     static get watchers() { return {
-        "formSections": ["onFormSectionsChange"],
-        "formMetadata": ["onFormMetadataChange"],
         "formId": ["onFormIdOrVersionChange"],
         "version": ["onFormIdOrVersionChange"]
     }; }
@@ -647,12 +629,9 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
         "isQuestionEditorOpen": [32],
         "isSectionEditorOpen": [32],
         "lookupOptionsDataProcessed": [32],
-        "dialogActionTwo": [32],
-        "dialogMessage": [32],
-        "needsSortableInit": [32]
+        "dialogAction": [32],
+        "dialogMessage": [32]
     }, undefined, {
-        "formSections": ["onFormSectionsChange"],
-        "formMetadata": ["onFormMetadataChange"],
         "formId": ["onFormIdOrVersionChange"],
         "version": ["onFormIdOrVersionChange"]
     }]);