udp-stencil-component-library 1.0.0

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

@@ -0,0 +1,566 @@
+'use strict';
+
+var index = require('./index-Bu1pSYrV.js');
+var makeApiCall = require('./makeApiCall-CFfg9gI0.js');
+var udpFormsBuilderQuestionTemplate = require('./udp-forms-builder-question-template-t8lMsM0q.js');
+var iconUtils = require('./iconUtils-Dj4qQoqr.js');
+var configService = require('./configService-OX6rz-VE.js');
+var tenantUtils = require('./tenantUtils-BCKSE0vq.js');
+var Sortable = require('sortablejs');
+require('axios');
+require('@carbon/icons/es/add/16');
+require('@carbon/icons/es/add/32');
+require('@carbon/icons/es/add--alt/16');
+require('@carbon/icons/es/add--filled/16');
+require('@carbon/icons/es/arrows--horizontal/16');
+require('@carbon/icons/es/attachment/16');
+require('@carbon/icons/es/batch-job/16');
+require('@carbon/icons/es/box/16');
+require('@carbon/icons/es/close/16');
+require('@carbon/icons/es/close/32');
+require('@carbon/icons/es/close--filled/16');
+require('@carbon/icons/es/close--outline/16');
+require('@carbon/icons/es/checkmark/16');
+require('@carbon/icons/es/checkmark/32');
+require('@carbon/icons/es/chevron--left/16');
+require('@carbon/icons/es/chevron--right/16');
+require('@carbon/icons/es/data-enrichment/16');
+require('@carbon/icons/es/document/16');
+require('@carbon/icons/es/document--add/16');
+require('@carbon/icons/es/document--attachment/16');
+require('@carbon/icons/es/document--pdf/16');
+require('@carbon/icons/es/edit/16');
+require('@carbon/icons/es/export/16');
+require('@carbon/icons/es/flag/16');
+require('@carbon/icons/es/information/16');
+require('@carbon/icons/es/information/32');
+require('@carbon/icons/es/link/16');
+require('@carbon/icons/es/overflow-menu--vertical/16');
+require('@carbon/icons/es/overflow-menu--vertical/32');
+require('@carbon/icons/es/return/16');
+require('@carbon/icons/es/save/16');
+require('@carbon/icons/es/settings/16');
+require('@carbon/icons/es/subtract/16');
+require('@carbon/icons/es/subtract--alt/16');
+require('@carbon/icons/es/subtract--filled/16');
+require('@carbon/icons/es/trash-can/16');
+require('@carbon/icons/es/user/16');
+require('@carbon/icons/es/view/16');
+require('@carbon/icons/es/warning/16');
+require('@carbon/icons/es/warning/32');
+require('@carbon/icons/es/warning--alt/16');
+require('@carbon/icons/es/warning--alt/32');
+require('@carbon/icons/es/product/16');
+require('@carbon/icons/es/workspace/16');
+require('@carbon/icons/es/arrow--up/16');
+require('@carbon/icons/es/arrow--down/16');
+require('@carbon/icons/es/copy/16');
+require('@carbon/icons/es/text--font/16');
+require('@carbon/icons/es/text--long-paragraph/16');
+require('@carbon/icons/es/character--whole-number/16');
+require('@carbon/icons/es/checkbox--checked/16');
+require('@carbon/icons/es/radio-button--checked/16');
+require('@carbon/icons/es/event--schedule/16');
+require('@carbon/icons/es/view--off/16');
+require('@carbon/icons/es/time/16');
+require('@carbon/icons/es/calendar/16');
+require('@carbon/icons/es/list--checked/16');
+require('@carbon/icons/es/list--bulleted/16');
+require('@carbon/icons/es/cloud--upload/16');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Sortable__default = /*#__PURE__*/_interopDefault(Sortable);
+
+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;gap:var(--spacing-05, 24px);padding:var(--spacing-05, 24px);background-color:var(--card-background-color, white)}.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)}";
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const emptyStyleOverrides = {
+    background: {
+        backgroundImage: '',
+        backgroundColor: '',
+    },
+    headerBackgroundColor: '',
+    fontFamily: '',
+    helperText: {
+        variant: '',
+        fontFamily: '',
+    },
+    questionText: {
+        variant: '',
+        fontFamily: '',
+    },
+    titleText: {
+        variant: '',
+        fontFamily: '',
+    },
+    paragraphText: {
+        variant: '',
+        fontFamily: '',
+    },
+};
+const UdpFormsBuilder = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.formMetadata = {};
+        this.formSections = [];
+        this.formSectionsDraft = [];
+        this.isNewForm = true;
+        this.isMostRecentFormVersion = false;
+        this.isError = false;
+        this.isLoading = false;
+        this.isShowStyleOverrides = false;
+        this.isStyleSheetOpen = false;
+        this.isDialogOpen = false;
+        this.showMenuAtIndex = null;
+        this.editingQuestion = null;
+        this.isQuestionEditorOpen = false;
+        this.pageBuilderId = 'c77aa2c8-f8b8-41af-aa77-c8612fc918c1';
+        // ********************************** SORTABLE **********************************
+        this.sortableInstances = [];
+        this.getQuestionTypeName = fieldTypeId => {
+            const question = udpFormsBuilderQuestionTemplate.questionsTemplate.find(q => q.fieldTypeId === fieldTypeId);
+            return question ? question.questionTypeName : 'Unknown';
+        };
+        this.getIsContainsOptionItems = fieldTypeId => {
+            const question = udpFormsBuilderQuestionTemplate.questionsTemplate.find(q => q.fieldTypeId === fieldTypeId);
+            return question ? question.isContainsOptionItems || false : false;
+        };
+        this.getIconForQuestion = fieldTypeId => {
+            const question = udpFormsBuilderQuestionTemplate.questionsTemplate.find(q => q.fieldTypeId === fieldTypeId);
+            return question ? question.icon : null;
+        };
+        this.handleQuestionDelete = (sIndex, qIndex) => {
+            const sectionsCopy = udpFormsBuilderQuestionTemplate.deepCloneFormSections(this.formSections);
+            sectionsCopy[sIndex].splice(qIndex, 1);
+            this.formSections = sectionsCopy;
+        };
+        this.handleQuestionCopy = (sIndex, qIndex) => {
+            const sectionsCopy = udpFormsBuilderQuestionTemplate.deepCloneFormSections(this.formSections);
+            const newQuestion = Object.assign({}, this.formSections[sIndex][qIndex]);
+            sectionsCopy[sIndex].splice(qIndex + 1, 0, newQuestion);
+            this.formSections = sectionsCopy;
+        };
+        this.handleQuestionClick = (sIndex, qIndex) => {
+            this.editingQuestion = { sIndex, qIndex };
+            this.isQuestionEditorOpen = true;
+            this.formSectionsDraft = udpFormsBuilderQuestionTemplate.deepCloneFormSections(this.formSections);
+        };
+        this.closeQuestionEditor = () => {
+            this.isQuestionEditorOpen = false;
+            this.editingQuestion = null;
+            this.formSectionsDraft = null;
+        };
+        this.updateFormSectionsWithDraft = () => {
+            this.formSections = this.formSectionsDraft;
+            this.formSectionsDraft = null;
+            this.isQuestionEditorOpen = false;
+        };
+        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.addQuestionOfType = (defaultQuestionObj, sIndex, qIndex) => {
+            const newQuestion = {
+                questionTypeName: defaultQuestionObj.questionTypeName,
+                fieldTypeId: defaultQuestionObj.fieldTypeId,
+                fieldProperties: defaultQuestionObj.defaultFieldProperties,
+                helperText: '',
+                questionText: '',
+                section: sIndex !== undefined ? sIndex + 1 : this.formSections.length > 0 ? this.formSections[this.formSections.length - 1][0].section : 1, // Assign section based on sIndex or last section
+                isContainsOptionItems: defaultQuestionObj.isContainsOptionItems,
+                icon: defaultQuestionObj.icon,
+                required: false,
+                form: null,
+                isPrivate: true,
+            };
+            const newFormSections = udpFormsBuilderQuestionTemplate.deepCloneFormSections(this.formSections); // Use helper to get a deep copy
+            let actualSIndex = sIndex;
+            let actualQIndex = qIndex;
+            if (sIndex !== undefined && qIndex !== undefined) {
+                // Insert at specific index
+                if (newFormSections[sIndex]) {
+                    newFormSections[sIndex].splice(qIndex, 0, newQuestion);
+                }
+                else {
+                    // fallback
+                    const lastSectionIdx = newFormSections.length - 1;
+                    newFormSections[lastSectionIdx].push(newQuestion);
+                    actualSIndex = lastSectionIdx;
+                    actualQIndex = newFormSections[lastSectionIdx].length - 1;
+                }
+            }
+            else {
+                // Append to the last section or create a new one
+                const lastSectionIdx = newFormSections.length - 1;
+                if (lastSectionIdx < 0 || newFormSections[lastSectionIdx].length === 0) {
+                    newFormSections.push([newQuestion]);
+                    actualSIndex = newFormSections.length - 1;
+                    actualQIndex = 0;
+                }
+                else {
+                    newFormSections[lastSectionIdx].push(newQuestion);
+                    actualSIndex = lastSectionIdx;
+                    actualQIndex = newFormSections[lastSectionIdx].length - 1;
+                }
+            }
+            // this.formSections = newFormSections;
+            this.formSectionsDraft = newFormSections;
+            if (this.showMenuAtIndex)
+                this.showMenuAtIndex = null;
+            return { sIndex: actualSIndex, qIndex: actualQIndex };
+        };
+        this.toggleStyleSheet = () => {
+            this.isStyleSheetOpen = !this.isStyleSheetOpen;
+        };
+    }
+    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__default.default(el, {
+                    animation: 200,
+                    easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
+                    draggable: 'udp-list-item',
+                    handle: undefined,
+                    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 = [...this.formSections[sIndex]];
+        const [moved] = sectionCopy.splice(oldIndex, 1);
+        sectionCopy.splice(newIndex, 0, moved);
+        const newFormSections = [...this.formSections];
+        newFormSections[sIndex] = sectionCopy;
+        this.formSections = newFormSections;
+    }
+    componentDidLoad() {
+        this.initializeSortable();
+    }
+    componentDidUpdate() {
+        this.initializeSortable();
+    }
+    componentWillLoad() {
+        this.initializeForm();
+    }
+    // @Watch('formSections')
+    // onFormSectionsChange(newValue: any[]) {
+    //   console.log(newValue);
+    // }
+    // @Watch('formMetadata')
+    // onFormMetadataChange(newValue: any, oldValue: any) {
+    //   console.log(newValue.styleOverrides);
+    // }
+    onFormIdOrVersionChange() {
+        this.initializeForm();
+    }
+    async initializeForm() {
+        // set default form values
+        this.formMetadata.isPrivate = true;
+        this.formMetadata.tenantId = tenantUtils.getCurrentTenantId();
+        this.formMetadata.type = 1;
+        this.formMetadata.version = 1;
+        this.formMetadata.name = 'Form Name';
+        this.formMetadata.description = 'Form Description';
+        this.formMetadata.styleOverrides = emptyStyleOverrides;
+        try {
+            this.isLoading = true;
+            // get lookup options
+            const lookupResponse = await makeApiCall.makeApiCall('GET', configService.ConfigService.productV1ApiUrl + '/UdpLookup');
+            if (!lookupResponse) {
+                throw new Error(`Error fetching lookup data`);
+            }
+            this.lookupOptionsDataProcessed = lookupResponse.map(lookupObj => {
+                return Object.assign(Object.assign({}, lookupObj), { value: lookupObj.id, label: lookupObj.name });
+            });
+            // determine if it's to create a new form, view an old form, or create a new version
+            if (this.formId && this.version) {
+                const formDataResponse = await makeApiCall.makeApiCall('GET', `${configService.ConfigService.productV1ApiUrl}/UdpForm/${this.formId}/${this.version}/describe`);
+                const formLatestVersionResponse = await makeApiCall.makeApiCall('GET', `${configService.ConfigService.productV1ApiUrl}/UdpForm/${this.formId}/describe`);
+                this.isNewForm = false;
+                if (!formDataResponse || !formLatestVersionResponse || !formDataResponse.id || !formLatestVersionResponse) {
+                    throw new Error(`Error fetching form data`);
+                }
+                // view only mode
+                if (formDataResponse.id == formLatestVersionResponse.id && formDataResponse.version == formLatestVersionResponse.version) {
+                    this.isMostRecentFormVersion = true;
+                }
+                // determine how many sections exist, and put each question in the correct sections in the formSections state
+                let tempSections = [];
+                let maxSectionCount = 0;
+                formDataResponse.formQuestions.forEach(question => {
+                    const sectionNumber = question.section;
+                    maxSectionCount = Math.max(maxSectionCount, sectionNumber);
+                });
+                for (let i = 0; i < maxSectionCount; i++) {
+                    tempSections.push([]);
+                }
+                // populate the formSections with question data
+                formDataResponse.formQuestions.forEach(question => {
+                    const sectionIndex = question.section - 1;
+                    if (tempSections[sectionIndex]) {
+                        const fieldProps = Object.assign({}, question.fieldProperties);
+                        // the fetch api returns 'items' data if it fieldProperties contains a lookupId. this breaks the renderer and confuses the user.
+                        // If both 'lookupId' and 'items' exist, remove 'items'.
+                        if ('lookupId' in fieldProps && 'items' in fieldProps) {
+                            delete fieldProps.items;
+                        }
+                        tempSections[sectionIndex].push(Object.assign(Object.assign({}, question), { fieldProperties: fieldProps, questionTypeName: this.getQuestionTypeName(question.fieldTypeId), isContainsOptionItems: this.getIsContainsOptionItems(question.fieldTypeId), icon: this.getIconForQuestion(question.fieldTypeId) }));
+                    }
+                });
+                tempSections.forEach(section => {
+                    section.sort((a, b) => a.questionOrder - b.questionOrder);
+                });
+                const metadata = __rest(formDataResponse, []);
+                // Merge fetched styleOverrides with defaults
+                metadata.styleOverrides = this.deepMerge(emptyStyleOverrides, JSON.parse(metadata.styleOverrides) || {});
+                // Set form metadata and sections
+                this.formMetadata = metadata;
+                this.formSections = tempSections;
+                this.isLoading = false;
+            }
+        }
+        catch (e) {
+            this.isError = true;
+            this.enqueueSnackbar('Error loading form data', {
+                variant: 'error',
+                anchorOrigin: { vertical: 'top', horizontal: 'center' },
+            });
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    // ********************************** HELPERS **********************************
+    async submitForm() {
+        this.isLoading = true;
+        try {
+            if (!this.validateForm()) ;
+            // Prepare and send form metadata
+            const processedFormMetadata = {
+                name: this.formMetadata.name,
+                description: this.formMetadata.description,
+                tenantId: this.formMetadata.tenantId,
+                isPrivate: this.formMetadata.isPrivate,
+                type: this.formMetadata.type,
+                styleOverrides: JSON.stringify(this.formMetadata.styleOverrides),
+                id: this.formMetadata.id,
+            };
+            console.log('Submitting form metadata:', processedFormMetadata);
+            const formUrl = `${configService.ConfigService.productV1ApiUrl}/UdpForm${this.isMostRecentFormVersion ? '/versions' : ''}`;
+            const formResponse = await makeApiCall.makeApiCall('POST', formUrl, processedFormMetadata);
+            console.log('Form response:', formResponse);
+            const formId = formResponse.id;
+            const formVersion = formResponse.version;
+            if (!formResponse || !formResponse.id || !formResponse.version) {
+                throw new Error(`Invalid form response: ${JSON.stringify(formResponse)}`);
+            }
+            // Prepare and send questions in order
+            let questionOrder = 0;
+            const questionRequests = [];
+            this.formSections.forEach((section, sIndex) => {
+                section.forEach(question => {
+                    questionOrder += 1;
+                    const processedQuestionData = Object.assign(Object.assign({}, question), { formId,
+                        formVersion, section: sIndex + 1, questionOrder, name: `question${questionOrder}` });
+                    console.log('Submitting question:', processedQuestionData);
+                    const questionRequest = makeApiCall.makeApiCall('POST', `${configService.ConfigService.productV1ApiUrl}/UdpFormQuestion`, processedQuestionData);
+                    questionRequests.push(questionRequest);
+                });
+            });
+            // Wait for all questions to be submitted
+            await Promise.all(questionRequests);
+            this.enqueueSnackbar('Success', {
+                variant: 'success',
+                anchorOrigin: { vertical: 'top', horizontal: 'center' },
+            });
+            this.history.push(`/page/${this.pageBuilderId}?udpf_formId=${formId}&udpf_version=${formVersion}`);
+        }
+        catch (error) {
+            console.error('Form submission error:', error);
+            this.enqueueSnackbar('Error saving form', {
+                variant: 'error',
+                anchorOrigin: { vertical: 'top', horizontal: 'center' },
+            });
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    deepMerge(target, source) {
+        const output = Object.assign({}, target);
+        for (const key in source) {
+            if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+                output[key] = this.deepMerge(target[key] || {}, source[key]);
+            }
+            else {
+                output[key] = source[key];
+            }
+        }
+        return output;
+    }
+    validateQuestionItem(sIndex, qIndex) {
+        const questionItem = this.formSections[sIndex][qIndex];
+        if (!questionItem.questionText) {
+            return false;
+        }
+        if (questionItem.isContainsOptionItems) {
+            const fieldProps = questionItem.fieldProperties;
+            // If there's a lookupId, assume it's valid and skip item validation
+            if (!(fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.lookupId)) {
+                // If no items or empty, invalid
+                if (!Array.isArray(fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.items) || fieldProps.items.length === 0) {
+                    return false;
+                }
+                // Check that each item has both display and value
+                const invalidItemExists = fieldProps.items.some(item => !item.display || !item.value);
+                if (invalidItemExists) {
+                    return false;
+                }
+            }
+        }
+        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;
+    }
+    render() {
+        console.log('[UDP Forms Builder] render called. isStyleSheetOpen:', this.isStyleSheetOpen);
+        if (this.isError) {
+            return index.h("div", null, " Error With the Form Builder");
+        }
+        const isEditable = this.isNewForm || this.isMostRecentFormVersion;
+        return (index.h("div", null, index.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: iconUtils.getIconFromName('settings') }] : [], tabs: false }), index.h("udp-side-sheet", { open: this.isStyleSheetOpen, onUdpSideSheetClose: () => (this.isStyleSheetOpen = false), title: "Style Overrides", position: "right", width: "md" }, index.h("udp-forms-builder-style-override", { formMetadata: this.formMetadata, onFormMetadataChange: updated => (this.formMetadata = updated) })), index.h("udp-side-sheet", { open: this.isQuestionEditorOpen, onUdpSideSheetClose: () => this.closeQuestionEditor(), onUdpPrimaryButtonClick: () => {
+                if (this.hasUnsavedFormSectionsChanges()) { // dont do anything if no changes are made. without this, it'll close the sidesheet
+                    return;
+                }
+                this.updateFormSectionsWithDraft();
+            }, primaryButtonDisabled: this.hasUnsavedFormSectionsChanges(), title: "Edit Question", position: "right", width: "md", primaryButtonLabel: "Update" }, this.isQuestionEditorOpen && (index.h("div", { class: "question-editor-container" }, index.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 })))), index.h("fluent-dialog", { open: this.isDialogOpen, message: 'Are you sure you want to delete this question?', labelOne: 'Cancel', labelTwo: 'Confirm', actionOne: () => (this.isDialogOpen = false), actionTwo: () => this.dialogActionTwo() }), this.isLoading && index.h("udp-linear-loader", null), !this.isLoading && (index.h("udp-container", { maxWidth: "lg" }, index.h("div", { class: "udp-forms-page" }, index.h("div", { class: "form-details-container" }, index.h("div", { class: "form-details-name-container" }, isEditable ? (index.h("div", { class: "form-details-name-input" }, index.h("text-field", { label: "Form Title", value: this.formMetadata.name, placeholder: " Form Title", disabled: !isEditable, required: true, onChange: (e) => {
+                this.formMetadata = Object.assign(Object.assign({}, this.formMetadata), { name: e.target.value });
+            } }))) : (index.h("div", { class: "form-details-name-display" }, index.h("unity-typography", { variant: 'h2' }, this.formMetadata.name + ' (View Only)')))), index.h("div", { class: "form-details-description-container" }, isEditable ? (index.h("div", { class: "form-details-details-input" }, index.h("text-area", { label: "Form Description", value: this.formMetadata.description, placeholder: "Form Description", disabled: !isEditable, required: true, onChange: (e) => {
+                this.formMetadata = Object.assign(Object.assign({}, this.formMetadata), { description: e.detail });
+            } }))) : (index.h("div", { class: "form-details-description-display" }, index.h("unity-typography", null, this.formMetadata.description)))), index.h("div", { class: "form-details-version-container" }, index.h("unity-typography", null, "Version: ", this.formMetadata.version)), index.h("div", { class: "form-details-private-container" }, index.h("div", { class: "toggle-container" }, index.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 && (index.h("div", { class: "add-question-button-container" }, index.h("udp-button", { startIcon: index.h("udp-icon", { iconName: 'add', color: 'inherit' }), onClick: () => {
+                // this.formSections = [[]];
+                // const newSectionIndex = this.formSections.length;
+                this.formSections = [...this.formSections, []];
+                // this.showMenuAtIndex = { sIndex: newSectionIndex, qIndex: 0 };
+            } }, "Add a Section"))), this.formSections.map((section, sIndex) => {
+            var _a, _b;
+            return (index.h("div", { key: sIndex, class: "form-section" }, index.h("div", { class: "form-section-header" }, index.h("div", { class: "form-section-header-title" }, index.h("unity-typography", { variant: "h6", color: "inherit" }, "Section ", sIndex + 1)), index.h("div", { class: "form-section-header-actions" }, (this.isNewForm || this.isMostRecentFormVersion) &&
+                !(this.showMenuAtIndex && this.showMenuAtIndex.sIndex === sIndex && this.showMenuAtIndex.qIndex === 0) && (index.h("stencil-icon-button", { icon: iconUtils.getIconFromName('add'), tooltip: `Add Question to Start of Section ${sIndex + 1}`, onClick: () => (this.showMenuAtIndex = { sIndex, qIndex: 0 }) })), section.length === 0 && (index.h("stencil-icon-button", { icon: iconUtils.getIconFromName('trashCan'), tooltip: "Delete Section", onClick: () => {
+                    const newFormSections = [...this.formSections];
+                    newFormSections.splice(sIndex, 1);
+                    this.formSections = newFormSections;
+                } })))), index.h("div", { class: "form-section-questions-container" }, (this.isNewForm || this.isMostRecentFormVersion) && this.showMenuAtIndex && this.showMenuAtIndex.sIndex === sIndex && this.showMenuAtIndex.qIndex === 0 && (index.h("udp-forms-builder-menu", { isVisible: true, questionsTemplate: udpFormsBuilderQuestionTemplate.questionsTemplate, onAddSection: () => {
+                    const newSectionIndex = this.formSections.length;
+                    this.formSections = [...this.formSections, []];
+                    this.showMenuAtIndex = { sIndex: newSectionIndex, qIndex: 0 };
+                }, onAddQuestion: e => {
+                    const indices = this.showMenuAtIndex
+                        ? this.addQuestionOfType(e.detail, this.showMenuAtIndex.sIndex, this.showMenuAtIndex.qIndex)
+                        : this.addQuestionOfType(e.detail);
+                    this.editingQuestion = Object.assign({}, indices);
+                    this.isQuestionEditorOpen = true;
+                }, onCancelClick: () => (this.showMenuAtIndex = null) })), index.h("div", { class: "form-section-questions-draggable-container", id: `section-${sIndex}` }, section.map((questionItem, qIndex) => {
+                return (index.h("udp-list-item", { key: questionItem.id || `new-${sIndex}-${qIndex}`, iconName: questionItem.icon, clickable: isEditable,
+                    // onClick={() => this.handleQuestionClick(sIndex, qIndex)}
+                    primaryText: `${questionItem.questionText}`, secondaryText: questionItem.helperText ? questionItem.helperText : null, avatarBackgroundColor: this.validateQuestionItem(sIndex, qIndex) ? 'info' : 'warning' }, questionItem.required && index.h("stencil-chip", { slot: "status-chip", text: "Required", showDelete: false, clickable: false }), index.h("div", { slot: "actions" }, isEditable ? (index.h("fragment", null, index.h("stencil-icon-button", { icon: iconUtils.getIconFromName('edit'), tooltip: "Edit Question Details", onClick: e => {
+                        e.stopPropagation();
+                        this.handleQuestionClick(sIndex, qIndex);
+                    }, noBackground: true }), index.h("stencil-icon-button", { icon: iconUtils.getIconFromName('copy'), tooltip: "Duplicate Question", onClick: e => {
+                        e.stopPropagation();
+                        this.handleQuestionCopy(sIndex, qIndex);
+                    }, noBackground: true }), index.h("stencil-icon-button", { icon: iconUtils.getIconFromName('trashCan'), tooltip: "Delete Question", onClick: e => {
+                        e.stopPropagation();
+                        (this.dialogActionTwo = () => {
+                            this.handleQuestionDelete(sIndex, qIndex);
+                            this.isDialogOpen = false;
+                        }),
+                            (this.isDialogOpen = true);
+                        // this.handleQuestionDelete(sIndex, qIndex); // directly delete without dialog popup warning
+                    }, noBackground: true }))) : (index.h("stencil-icon-button", { icon: iconUtils.getIconFromName('view'), tooltip: "View Question Details", onClick: e => {
+                        e.stopPropagation();
+                        this.handleQuestionClick(sIndex, qIndex);
+                    }, noBackground: true })))));
+            })), isEditable &&
+                !this.showMenuAtIndex && ( // Only show button if no menu is active
+            index.h("div", { class: "add-question-to-section-button-container" }, index.h("udp-button", { variant: "text", onClick: () => {
+                    this.showMenuAtIndex = { sIndex: sIndex, qIndex: section.length };
+                }, startIcon: index.h("udp-icon", { iconName: 'add', color: 'inherit' }) }, "Add a Question"))), isEditable && ((_a = this.showMenuAtIndex) === null || _a === void 0 ? void 0 : _a.sIndex) === sIndex && ((_b = this.showMenuAtIndex) === null || _b === void 0 ? void 0 : _b.qIndex) === section.length && section.length > 0 && (index.h("udp-forms-builder-menu", { isVisible: true, questionsTemplate: udpFormsBuilderQuestionTemplate.questionsTemplate, onAddSection: () => {
+                    const newFormSections = udpFormsBuilderQuestionTemplate.deepCloneFormSections(this.formSections);
+                    newFormSections.splice(sIndex + 1, 0, []);
+                    this.formSections = newFormSections;
+                    this.showMenuAtIndex = null;
+                }, onAddQuestion: e => {
+                    if (this.showMenuAtIndex) {
+                        const indices = this.addQuestionOfType(e.detail, this.showMenuAtIndex.sIndex, this.showMenuAtIndex.qIndex);
+                        this.editingQuestion = Object.assign({}, indices);
+                        this.isQuestionEditorOpen = true;
+                    }
+                }, onCancelClick: () => (this.showMenuAtIndex = null) })))));
+        }))))));
+    }
+    get hostEl() { return index.getElement(this); }
+    static get watchers() { return {
+        "formId": ["onFormIdOrVersionChange"],
+        "version": ["onFormIdOrVersionChange"]
+    }; }
+};
+UdpFormsBuilder.style = udpFormsBuilderCss;
+
+exports.udp_forms_builder = UdpFormsBuilder;
+//# sourceMappingURL=udp-forms-builder.entry.cjs.js.map
+
+//# sourceMappingURL=udp-forms-builder.cjs.entry.js.map