udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/section-configs-renderer.js

@@ -11,16 +11,29 @@ export class SectionConfigsRenderer {
         sectionsCopy[sIndex] = updatedSection;
         return sectionsCopy;
     }
+    handleSectionRepeatablePropertyChange(sIndex, value) {
+        const sectionsCopy = deepCloneFormSections(this.formSectionsDraft);
+        const oldSection = Object.assign({}, sectionsCopy[sIndex]);
+        const updatedProperties = Object.assign(Object.assign({}, oldSection.sectionProperties), { isRepeatable: value });
+        const updatedSection = Object.assign(Object.assign({}, oldSection), { sectionProperties: updatedProperties });
+        sectionsCopy[sIndex] = updatedSection;
+        return sectionsCopy;
+    }
     render() {
-        return (h("div", { key: 'a7ed6826949c9e988cce758062f38b58851d71da', class: "generic-configs-container" }, h("text-area", { key: 'd7a40529e7839633c377b3e35fbece8835282a01', label: "Title", value: this.section.title || "", disabled: this.isViewOnly, placeholder: "Enter the section title here", rows: 2, maxRows: 5, fullWidth: true, onInput: (e) => {
+        var _a;
+        return (h("div", { key: '1caf2cddda917bc5995b0ec0ec56bf3e5bb88e67', class: "generic-configs-container" }, h("text-area", { key: '5985a043366d88f49c8eb02b30220211c8f8a7e8', label: "Title", value: this.section.title || "", disabled: this.isViewOnly, placeholder: "Enter the section title here", rows: 2, maxRows: 5, fullWidth: true, onInput: (e) => {
                 const newValue = e.target.value;
                 const updated = this.handleSectionFieldChange(this.sIndex, 'title', newValue);
                 this.onFormSectionsDraftChange(updated);
-            } }), h("text-area", { key: '52c4ac027e360b82d22c207a2b3f890303b49025', label: "Section Text", value: this.section.sectionText || "", disabled: this.isViewOnly, placeholder: "Enter the section text here", rows: 2, maxRows: 4, fullWidth: true, onInput: (e) => {
+            } }), h("text-area", { key: '68599f20817fd65e76839f6cb7034c4e166699af', label: "Section Text", value: this.section.sectionText || "", disabled: this.isViewOnly, placeholder: "Enter the section text here", rows: 2, maxRows: 4, fullWidth: true, onInput: (e) => {
                 const newValue = e.target.value;
                 const updated = this.handleSectionFieldChange(this.sIndex, 'sectionText', newValue);
                 this.onFormSectionsDraftChange(updated);
-            } })));
+            } }), h("stencil-toggle", { key: '3990fe8500311ce8048b20dc3bb1661536d5495e', label: "Repeatable", disabled: this.isViewOnly, checked: ((_a = this.section.sectionProperties) === null || _a === void 0 ? void 0 : _a.isRepeatable) === true || false, onToggledChange: () => {
+                const newValue = !this.section.sectionProperties.isRepeatable;
+                const updated = this.handleSectionRepeatablePropertyChange(this.sIndex, newValue);
+                this.onFormSectionsDraftChange(updated);
+            }, labelPosition: "right" })));
     }
     static get is() { return "section-configs-renderer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/section-configs-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-configs-renderer.js","sourceRoot":"","sources":["../../../../../../../../../src/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/section-configs-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAOlE,MAAM,OAAO,sBAAsB;IAMjC,IAAY,OAAO;;QACjB,OAAO,MAAA,IAAI,CAAC,iBAAiB,0CAAG,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,CAAC;IAEO,wBAAwB,CAAC,MAAc,EAAE,KAAoD,EAAE,KAAa;QAClH,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnE,MAAM,cAAc,mCAAQ,YAAY,CAAC,MAAM,CAAC,KAAE,CAAC,KAAK,CAAC,EAAE,KAAK,GAAE,CAAC;QACnE,YAAY,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;QACtC,OAAO,YAAY,CAAA;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,2BAA2B;YACpC,kEACE,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,EAC/B,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,WAAW,EAAC,8BAA8B,EAC1C,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,CAAC,EACV,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,MAAM,QAAQ,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;oBACzD,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;oBAC9E,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC;gBAC1C,CAAC,GACD;YACF,kEACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,EACrC,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,WAAW,EAAC,6BAA6B,EACzC,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,CAAC,EACV,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,MAAM,QAAQ,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;oBACzD,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC;oBACpF,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC;gBAC1C,CAAC,GACD,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { deepCloneFormSections } from '../../forms-builder-utils';\n\n@Component({\n  tag: 'section-configs-renderer',\n  styleUrl: 'section-configs-renderer.css',\n  shadow: true,\n})\nexport class SectionConfigsRenderer {\n  @Prop() formSectionsDraft: any[];\n  @Prop() sIndex: number;\n  @Prop() isViewOnly: boolean;\n  @Prop() onFormSectionsDraftChange: (updatedSections: any[]) => void;\n\n  private get section() {\n    return this.formSectionsDraft?.[this.sIndex];\n  }\n  \n  private handleSectionFieldChange(sIndex: number, field: 'title' | 'sectionText' | 'sectionProperties', value: string) {\n    const sectionsCopy = deepCloneFormSections(this.formSectionsDraft);\n    const updatedSection = { ...sectionsCopy[sIndex], [field]: value };\n    sectionsCopy[sIndex] = updatedSection;\n    return sectionsCopy\n  }\n\n  render() {\n    return (\n      <div class=\"generic-configs-container\">\n        <text-area\n          label=\"Title\"\n          value={this.section.title || \"\"}\n          disabled={this.isViewOnly}\n          placeholder=\"Enter the section title here\"\n          rows={2}\n          maxRows={5}\n          fullWidth={true}\n          onInput={(e) => {\n            const newValue = (e.target as HTMLTextAreaElement).value;\n            const updated = this.handleSectionFieldChange(this.sIndex, 'title', newValue);\n            this.onFormSectionsDraftChange(updated);\n          }}\n        />\n        <text-area\n          label=\"Section Text\"\n          value={this.section.sectionText || \"\"}\n          disabled={this.isViewOnly}\n          placeholder=\"Enter the section text here\"\n          rows={2}\n          maxRows={4}\n          fullWidth={true}\n          onInput={(e) => {\n            const newValue = (e.target as HTMLTextAreaElement).value;\n            const updated = this.handleSectionFieldChange(this.sIndex, 'sectionText', newValue);\n            this.onFormSectionsDraftChange(updated);\n          }}\n        />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"section-configs-renderer.js","sourceRoot":"","sources":["../../../../../../../../../src/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/section-configs-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { deepCloneFormSections } from '../../forms-builder-utils';\n\n@Component({\n  tag: 'section-configs-renderer',\n  styleUrl: 'section-configs-renderer.css',\n  shadow: true,\n})\nexport class SectionConfigsRenderer {\n  @Prop() formSectionsDraft: any[];\n  @Prop() sIndex: number;\n  @Prop() isViewOnly: boolean;\n  @Prop() onFormSectionsDraftChange: (updatedSections: any[]) => void;\n\n  private get section() {\n    return this.formSectionsDraft?.[this.sIndex];\n  }\n  \n  private handleSectionFieldChange(sIndex: number, field: 'title' | 'sectionText' | 'sectionProperties', value: string) {\n    const sectionsCopy = deepCloneFormSections(this.formSectionsDraft);\n    const updatedSection = { ...sectionsCopy[sIndex], [field]: value };\n    sectionsCopy[sIndex] = updatedSection;\n    return sectionsCopy\n  }\n\n  private handleSectionRepeatablePropertyChange(sIndex: number, value: boolean) {\n    const sectionsCopy = deepCloneFormSections(this.formSectionsDraft);\n    const oldSection = {...sectionsCopy[sIndex]}\n    const updatedProperties = {... oldSection.sectionProperties, isRepeatable: value}\n    const updatedSection = { ...oldSection, sectionProperties: updatedProperties };\n    sectionsCopy[sIndex] = updatedSection;\n    return sectionsCopy\n  }\n\n  render() {\n    return (\n      <div class=\"generic-configs-container\">\n\n        <text-area\n          label=\"Title\"\n          value={this.section.title || \"\"}\n          disabled={this.isViewOnly}\n          placeholder=\"Enter the section title here\"\n          rows={2}\n          maxRows={5}\n          fullWidth={true}\n          onInput={(e) => {\n            const newValue = (e.target as HTMLTextAreaElement).value;\n            const updated = this.handleSectionFieldChange(this.sIndex, 'title', newValue);\n            this.onFormSectionsDraftChange(updated);\n          }}\n        />\n        <text-area\n          label=\"Section Text\"\n          value={this.section.sectionText || \"\"}\n          disabled={this.isViewOnly}\n          placeholder=\"Enter the section text here\"\n          rows={2}\n          maxRows={4}\n          fullWidth={true}\n          onInput={(e) => {\n            const newValue = (e.target as HTMLTextAreaElement).value;\n            const updated = this.handleSectionFieldChange(this.sIndex, 'sectionText', newValue);\n            this.onFormSectionsDraftChange(updated);\n          }}\n        />\n\n        <stencil-toggle\n              label=\"Repeatable\"\n              disabled={this.isViewOnly}\n              checked={this.section.sectionProperties?.isRepeatable === true || false}\n              onToggledChange={() => {\n                const newValue = !this.section.sectionProperties.isRepeatable;\n                const updated = this.handleSectionRepeatablePropertyChange(this.sIndex, newValue);\n                this.onFormSectionsDraftChange(updated);\n              }}\n              labelPosition=\"right\"\n            />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/text-input-renderer.js

@@ -2,12 +2,12 @@ import { h } from "@stencil/core";
 export class TextInputRenderer {
     render() {
         var _a, _b;
-        return (h("div", { key: '8fa6200c27e0f50adac392283b11fa60693192ee', class: "question-item-text-input-container" }, h("div", { key: '51e80e679911b1f181dda048229b9b0ad05caabe' }, h("numeric-field", { key: '9de0148bff8207e8fd3878e1f48709e7d8288d6c', label: "Min Character Length", value: (_a = this.question.fieldProperties.minCharacter) === null || _a === void 0 ? void 0 : _a.toString(), disabled: this.isViewOnly, onChange: e => {
+        return (h("div", { key: '00b2d4624cec8abd91e54323078a3d3edb6a8d81', class: "question-item-text-input-container" }, h("div", { key: '93a9c27a1c404c36b0c9ccf57a8b96da792f9d85' }, h("numeric-field", { key: '52027c652a80a9b2a72b2c610bdfed65d0b7db46', label: "Min Character Length", value: (_a = this.question.fieldProperties.minCharacter) === null || _a === void 0 ? void 0 : _a.toString(), disabled: this.isViewOnly, onChange: e => {
                 const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyMinMaxCharacter');
                 const mockEvent = { target: { value: e.detail } };
                 const updated = handler(mockEvent, this.formSectionsDraft, this.sIndex, this.qIndex, 'minCharacter');
                 this.onFormSectionsDraftChange(updated);
-            } })), h("div", { key: '2a8b5ad18219526ab92770e0a0814d1423d1b041' }, h("numeric-field", { key: 'd063acd6f059fb20d7698961affcdc126dcb47f5', label: "Max Character Length", value: (_b = this.question.fieldProperties.maxCharacter) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isViewOnly, onChange: e => {
+            } })), h("div", { key: 'f39ac7216923d620d368dbfd491286aa8e6d1d3d' }, h("numeric-field", { key: '2b4d90d2b40a19de2d935b92c7b8b4e767e76a83', label: "Max Character Length", value: (_b = this.question.fieldProperties.maxCharacter) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isViewOnly, onChange: e => {
                 const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyMinMaxCharacter');
                 const mockEvent = { target: { value: e.detail } };
                 const updated = handler(mockEvent, this.formSectionsDraft, this.sIndex, this.qIndex, 'maxCharacter');

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder.js

@@ -46,7 +46,7 @@ const emptyStyleOverrides = {
 const formSectionDefault = {
     title: '',
     sectionText: '',
-    sectionProperties: '',
+    sectionProperties: '{}',
     formQuestions: [],
 };
 export class UdpFormsBuilder {
@@ -67,16 +67,13 @@ export 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';
@@ -111,24 +108,6 @@ export 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,
@@ -142,7 +121,7 @@ export class UdpFormsBuilder {
                 required: true,
                 form: null,
                 isPrivate: true,
-                id: uuidv4()
+                id: uuidv4(),
             };
             const newFormSections = deepCloneFormSections(this.formSections); // Use helper to get a deep copy
             let actualSIndex = sIndex;
@@ -180,15 +159,12 @@ export 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) => {
@@ -196,75 +172,33 @@ export 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;
@@ -298,6 +232,14 @@ export 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);
@@ -314,6 +256,8 @@ export 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) || {});
@@ -334,7 +278,6 @@ export class UdpFormsBuilder {
             this.isLoading = false;
         }
     }
-    // ********************************** HELPERS **********************************
     async submitForm() {
         this.isLoading = true;
         try {
@@ -350,12 +293,10 @@ export 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) {
@@ -368,8 +309,7 @@ export 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)}`);
@@ -379,7 +319,6 @@ export 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);
                 }
@@ -403,6 +342,68 @@ export 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) {
@@ -415,6 +416,27 @@ export 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) {
@@ -437,80 +459,41 @@ export 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}` }));
@@ -521,10 +504,10 @@ export 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;
                     };
@@ -551,7 +534,7 @@ export 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;
                         };
@@ -716,20 +699,13 @@ export class UdpFormsBuilder {
             "isQuestionEditorOpen": {},
             "isSectionEditorOpen": {},
             "lookupOptionsDataProcessed": {},
-            "dialogActionTwo": {},
-            "dialogMessage": {},
-            "needsSortableInit": {}
+            "dialogAction": {},
+            "dialogMessage": {}
         };
     }
     static get elementRef() { return "hostEl"; }
     static get watchers() {
         return [{
-                "propName": "formSections",
-                "methodName": "onFormSectionsChange"
-            }, {
-                "propName": "formMetadata",
-                "methodName": "onFormMetadataChange"
-            }, {
                 "propName": "formId",
                 "methodName": "onFormIdOrVersionChange"
             }, {