udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.css

@@ -0,0 +1,175 @@
+.background {
+  background-color: var(--gray-01);
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.item {
+  padding-bottom: var(--spacing-02);
+  /* margin-bottom: var(--spacing-05); */
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-05);
+  padding-top: var(--spacing-02);
+  padding-bottom: var(--spacing-02);
+}
+
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.submit {
+  background-color: var(--primary-color);
+  box-sizing: border-box;
+  border: none;
+  color: white;
+  padding: 8px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  min-width: 48px;
+  min-height: 24px;
+  /* Default size */
+}
+
+.submit:disabled {
+  background-color: var(--gray-05);
+  cursor: default;
+}
+
+.submit-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+/* .form-section-content */
+.form-section-content {
+  margin-bottom: var(--spacing-05);
+  background-color: white;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-05);
+}
+
+.form-container {
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
+}
+
+.form-section-block {
+  margin-bottom: var(--spacing-05);
+}
+
+.form-section-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: var(--primary-color, #000);
+  color: var(--primary-contrast-text, #FFF);
+  padding: var(--spacing-04, 16px) var(--spacing-05, 24px);
+  align-items: center;
+  min-height: var(--spacing-10, 60px);
+}
+
+.form-section-text {
+  margin-bottom: var(--spacing-03);
+}
+
+.center-div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.finish-button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* .header */
+.form-renderer-header {
+  padding: var(--spacing-05) var(--spacing-05);
+  background-color: var(--primary-color-dark, #000);
+  color: var(--primary-contrast-text, #FFF);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-03);
+}
+
+.header-text {
+  flex: 1;
+  min-width: 0;
+  /* Allow text to shrink */
+}
+
+/* Save button visibility - JavaScript controlled */
+.header-save-button {
+  display: block;
+  /* Always available, component controls its own visibility */
+}
+
+.floating-save-button {
+  display: block;
+  /* Always available, component controls its own visibility */
+}
+
+/*
+ * Save button visibility is now controlled by JavaScript-based overlap detection
+ * in the udp-save-draft-button component. This provides real-time detection of
+ * overlaps with form content, accounting for menu drawers and dynamic layouts.
+ *
+ * The component automatically switches between floating and inline modes based on
+ * actual element positions and available space, not viewport breakpoints.
+ */
+
+/* Mobile layout adjustments */
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-02);
+  }
+
+  .header-text {
+    margin-bottom: var(--spacing-02);
+  }
+}
+
+/* Small height screens: Always use header button */
+@media (max-height: 600px) {
+  .header-save-button {
+    display: block;
+  }
+
+  .floating-save-button {
+    display: none;
+  }
+}
+
+.auto-save-status {
+  margin-top: var(--spacing-02);
+  padding: var(--spacing-01) 0;
+  font-size: 12px;
+  opacity: 0.8;
+}

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

@@ -1,28 +1,7 @@
 import { h } from "@stencil/core";
 import { UdpFormsFieldTypeEnum } from "../enums";
 import { fontOverrideMapping, overrideFont } from "../utils";
-// Helper function to determine if a value is empty, considering various types.
-const isEmpty = (value) => {
-    if (value === null || value === undefined)
-        return true;
-    if (typeof value === 'string' && value.trim() === '')
-        return true;
-    if (Array.isArray(value) && value.length === 0)
-        return true;
-    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-        // A UdpDriveFile object is considered not empty.
-        if (value.driveId && value.fileId) {
-            return false;
-        }
-        // A File object from a file input or signature pad
-        if (value instanceof File) {
-            return value.size === 0;
-        }
-        // A plain object with no keys is empty
-        return Object.keys(value).length === 0;
-    }
-    return false;
-};
+import { getIconFromName } from "../../../data-display/icons/iconUtils";
 export class UdpFormsUi {
     constructor() {
         this.initialValues = {};
@@ -33,44 +12,13 @@ export class UdpFormsUi {
         this.showAutoSaveStatus = false;
         this.disabled = false;
         this.readonly = false;
+        this.currentFormData = {};
+        this.userId = null;
+        this.isSubmitted = false;
+        this.isFormDirty = false;
+        this.showSavedMessage = false;
         this.titleId = 'udp-forms-title';
         this.descriptionId = 'udp-forms-description';
-        this.validate = (values) => {
-            var _a;
-            console.log('Validation called with values:', values);
-            const errors = {};
-            // Validate required fields
-            for (const question of ((_a = this.form) === null || _a === void 0 ? void 0 : _a.formQuestions) || []) {
-                if (question.required && question.fieldTypeId !== UdpFormsFieldTypeEnum.Tally) {
-                    const value = values[question.name];
-                    if (isEmpty(value)) {
-                        errors[question.name] = 'This field is required';
-                        console.log(`Validation error for ${question.name}: required field is empty`);
-                    }
-                }
-            }
-            console.log('Validation errors:', errors);
-            return errors;
-        };
-        this.handleSubmit = async (values) => {
-            console.log('Form submit handler called with values:', values);
-            try {
-                if (this.onSubmit) {
-                    console.log('Calling onSubmit prop...');
-                    await this.onSubmit(values);
-                    console.log('onSubmit completed successfully');
-                }
-                else {
-                    console.error('onSubmit prop is not defined!');
-                }
-            }
-            catch (error) {
-                console.error('Error in onSubmit:', error);
-            }
-        };
-        this.handleFormInvalid = (errors) => {
-            console.log('Form validation failed with errors:', errors);
-        };
     }
     componentDidLoad() {
         this.overrideStyles();
@@ -78,14 +26,35 @@ export class UdpFormsUi {
     componentDidUpdate() {
         this.overrideStyles();
     }
+    disconnectedCallback() {
+        // Clean up timeout when component is destroyed
+        if (this.savedMessageTimeoutId) {
+            clearTimeout(this.savedMessageTimeoutId);
+        }
+    }
+    watchIsSaving(newValue, oldValue) {
+        console.log('isSaving watcher triggered:', { oldValue, newValue, saveError: this.saveError });
+        // When isSaving changes from true to false (save completed successfully)
+        if (oldValue === true && newValue === false && !this.saveError) {
+            console.log('Setting showSavedMessage to true');
+            this.showSavedMessage = true;
+            // Clear any existing timeout
+            if (this.savedMessageTimeoutId) {
+                clearTimeout(this.savedMessageTimeoutId);
+            }
+            // Hide the "Saved" message after 5 seconds
+            this.savedMessageTimeoutId = setTimeout(() => {
+                console.log('Hiding saved message after 5 seconds');
+                this.showSavedMessage = false;
+            }, 5000);
+        }
+    }
     overrideStyles() {
         var _a;
         const shadowRoot = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot;
         shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelectorAll('unity-typography').forEach(element => {
             var _a, _b, _c, _d;
-            const styleOverride = element.id === this.titleId ? (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.titleText :
-                element.id === this.descriptionId ? (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.styleOverrides) === null || _d === void 0 ? void 0 : _d.paragraphText :
-                    {};
+            const styleOverride = element.id === this.titleId ? (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.titleText : element.id === this.descriptionId ? (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.styleOverrides) === null || _d === void 0 ? void 0 : _d.paragraphText : {};
             if ((styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.fontFamily) && fontOverrideMapping[styleOverride.fontFamily]) {
                 overrideFont(element, fontOverrideMapping[styleOverride.fontFamily]);
             }
@@ -95,14 +64,14 @@ export class UdpFormsUi {
         });
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         if (!this.form) {
             return h("div", null, "Loading...");
         }
         let questionNumber = 1;
         const sectionSet = new Set();
         this.form.formQuestions.forEach(fq => sectionSet.add(fq.section));
-        const orderedSectionNumbers = [...sectionSet].sort((a, b) => a - b);
+        // const orderedSectionNumbers = [...sectionSet].sort((a: number, b: number) => a - b);
         const hiddenQuestionTypes = [UdpFormsFieldTypeEnum.Hidden, UdpFormsFieldTypeEnum.Paragraph];
         const backgroundOverrides = {};
         if ((_c = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c.backgroundImage) {
@@ -112,42 +81,39 @@ export class UdpFormsUi {
         else if ((_f = (_e = (_d = this.form) === null || _d === void 0 ? void 0 : _d.styleOverrides) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f.backgroundColor) {
             backgroundOverrides.backgroundColor = (_j = (_h = (_g = this.form) === null || _g === void 0 ? void 0 : _g.styleOverrides) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j.backgroundColor;
         }
-        return (h("div", { class: 'background', style: backgroundOverrides }, h("udp-container", { maxWidth: "md" }, h("div", { class: "form-container" }, !this.submitSuccessful ? (h("stencil-form", { handleSubmit: this.handleSubmit, initialValues: this.initialValues, validate: this.validate, handleFormChange: this.onChange, onStencilFormInvalidEvent: this.handleFormInvalid }, orderedSectionNumbers.map((sectionNumber, i) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            return (h("div", null, sectionNumber === orderedSectionNumbers[0] && (
-            // @ts-ignore
-            h("div", { class: "header", style: ((_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.headerBackgroundColor) ? { backgroundColor: (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.styleOverrides) === null || _d === void 0 ? void 0 : _d.headerBackgroundColor } : '' }, h("unity-typography", { id: this.titleId, variant: 'h6', color: "inherit" }, this.form.name), h("unity-typography", { id: this.descriptionId, variant: (_h = (_g = (_f = (_e = this.form) === null || _e === void 0 ? void 0 : _e.styleOverrides) === null || _f === void 0 ? void 0 : _f.paragraphText) === null || _g === void 0 ? void 0 : _g.variant) !== null && _h !== void 0 ? _h : 'body', color: "inherit" }, this.form.description), this.showAutoSaveStatus && (h("div", { class: "auto-save-status" }, this.saveError && (h("unity-typography", { variant: "body", color: "secondary" }, this.saveError)))))), h("div", { class: "form-content" }, h("div", { class: "items" }, this.form.formQuestions
-                .filter(fq => fq.section === sectionNumber)
-                .sort((a, b) => a.questionOrder - b.questionOrder)
-                .map((question) => {
+        return (h("div", { class: 'background', style: backgroundOverrides }, h("udp-container", { maxWidth: "md" }, h("div", { class: "form-container" }, !this.submitSuccessful ? (h("stencil-form", { handleSubmit: this.handleSubmit, initialValues: this.initialValues, handleChange: this.handleChange, onDirtyChange: event => (this.isFormDirty = event.detail) }, h("div", null, h("div", { class: "form-section-block" }, h("div", { class: "form-renderer-header", style: Object.assign({}, (((_l = (_k = this.form) === null || _k === void 0 ? void 0 : _k.styleOverrides) === null || _l === void 0 ? void 0 : _l.headerBackgroundColor) && {
+                backgroundColor: this.form.styleOverrides.headerBackgroundColor,
+            })) }, h("unity-typography", { id: this.titleId, variant: 'h6', color: "inherit" }, this.form.name), this.showAutoSaveStatus && (h("div", { class: "auto-save-status" }, this.saveError && (h("unity-typography", { variant: "body", color: "secondary" }, this.saveError)))), h("udp-save-draft-button", { isVisible: this.isFormDirty && !this.isSubmitted && !!this.userId, isSaving: this.isSaving, saveError: this.saveError, showSavedMessage: this.showSavedMessage, handleSave: this.handleSave })), h("div", { class: "form-section-content" }, h("div", { class: "items" }, h("div", { class: "form-section-text" }, h("unity-typography", { id: this.descriptionId, variant: (_q = (_p = (_o = (_m = this.form) === null || _m === void 0 ? void 0 : _m.styleOverrides) === null || _o === void 0 ? void 0 : _o.paragraphText) === null || _p === void 0 ? void 0 : _p.variant) !== null && _q !== void 0 ? _q : 'body', color: "inherit" }, this.form.description))))), this.dynamicSections.map((section, sIndex) => {
+            return (h("div", { class: "form-section-block" }, h("div", { class: "form-section-header" }, h("div", { class: "form-section-header-title" }, h("unity-typography", { variant: "h6", color: "inherit" }, `${section.title}${section.sectionPositionSuffix > 1 ? ` (${section.sectionPositionSuffix})` : ''}`)), h("div", { class: "form-section-header-actions" }, section.sectionProperties.isRepeatable && section.isOriginalSection && !this.readonly && (h("stencil-icon-button", { icon: getIconFromName('add'), tooltip: "Repeat This Section", onClick: () => this.duplicateRepeatableSection(sIndex) })), !section.isOriginalSection && !this.readonly && (h("stencil-icon-button", { icon: getIconFromName('subtract'), tooltip: "Delete This Repeated Section", onClick: () => this.deleteRepeatableSection(sIndex) })))), h("div", { class: "form-section-content" }, h("div", { class: "items" }, h("div", { class: "form-section-text" }, h("unity-typography", { variant: "body", color: "inherit" }, section.sectionText)), h("div", null, section.formQuestions.map((question) => {
                 var _a, _b, _c;
                 const isHidden = hiddenQuestionTypes.includes(question.fieldTypeId);
                 const num = questionNumber;
+                // const processedSubmissionName = `${sectionProcessedName}-${question.name}`
                 if (!isHidden)
                     questionNumber++;
                 return (h("div", { class: "item" }, h("udp-question", { styleOverrides: {
                         helperText: (_a = this.form.styleOverrides) === null || _a === void 0 ? void 0 : _a.helperText,
                         paragraphText: (_b = this.form.styleOverrides) === null || _b === void 0 ? void 0 : _b.paragraphText,
                         questionText: (_c = this.form.styleOverrides) === null || _c === void 0 ? void 0 : _c.questionText,
-                    }, question: question, questionNumber: num, value: this.initialValues[question.name], disabled: this.disabled, readonly: this.readonly })));
-            })), i === orderedSectionNumbers.length - 1 && (h("div", { class: "footer" }, h("input", { disabled: this.loading || this.disabled || this.readonly, type: "submit", value: "Submit", class: "submit", id: "udpRecord-udp-forms-renderer-Submit", onClick: () => {
-                    console.log('Submit button clicked');
-                    // Let the form handle the submit naturally
-                } }))))));
-        }))) : (
+                    }, question: question, questionNumber: num, value: this.initialValues[question.processedSubmissionName], disabled: this.disabled, readonly: this.readonly, key: question.processedSubmissionName })));
+            }))))));
+        }), h("div", { class: "footer" }, h("input", { disabled: this.loading || this.disabled || this.readonly, type: "submit", value: "Submit", class: "submit", id: "udpRecord-udp-forms-renderer-Submit", onClick: () => {
+                console.log('Submit button clicked');
+                // Let the form handle the submit naturally
+            } }))))) : (
         //if the form has been submit, display success message with a button to trigger the action associated to the form
-        h("div", { class: "center-div" }, h("udp-ambient-card", null, h("div", { class: "submit-card" }, h("unity-typography", null, "Thank you for your submission!"), h("div", { class: "finish-button" }, h("custom-button", { onClick: this.onFinish }, "Finish"))))))))));
+        h("div", { class: "center-div" }, h("udp-ambient-card", null, h("div", { class: "submit-card" }, h("unity-typography", null, "Thank you for your submission!"), h("div", { class: "finish-button" }, h("custom-button", { onClick: this.handleFinish }, "Finish"))))))))));
     }
     static get is() { return "udp-forms-ui"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["udp-forms-renderer.css"]
+            "$": ["udp-forms-ui.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["udp-forms-renderer.css"]
+            "$": ["udp-forms-ui.css"]
         };
     }
     static get properties() {
@@ -335,9 +301,9 @@ export class UdpFormsUi {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "onSubmit": {
+            "handleSubmit": {
                 "type": "unknown",
-                "attribute": "on-submit",
+                "attribute": "handle-submit",
                 "mutable": false,
                 "complexType": {
                     "original": "(values: any) => Promise<void>",
@@ -358,9 +324,9 @@ export class UdpFormsUi {
                 "getter": false,
                 "setter": false
             },
-            "onChange": {
+            "handleChange": {
                 "type": "unknown",
-                "attribute": "on-change",
+                "attribute": "handle-change",
                 "mutable": false,
                 "complexType": {
                     "original": "(values: { [name: string]: any }) => void",
@@ -376,9 +342,32 @@ export class UdpFormsUi {
                 "getter": false,
                 "setter": false
             },
-            "onAction": {
+            "handleSave": {
+                "type": "unknown",
+                "attribute": "handle-save",
+                "mutable": false,
+                "complexType": {
+                    "original": "(values: { [name: string]: any }) => Promise<void>",
+                    "resolved": "(values: { [name: string]: any; }) => Promise<void>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleAction": {
                 "type": "unknown",
-                "attribute": "on-action",
+                "attribute": "handle-action",
                 "mutable": false,
                 "complexType": {
                     "original": "(actionId: Guid, params: Object) => void",
@@ -404,9 +393,9 @@ export class UdpFormsUi {
                 "getter": false,
                 "setter": false
             },
-            "onFinish": {
+            "handleFinish": {
                 "type": "unknown",
-                "attribute": "on-finish",
+                "attribute": "handle-finish",
                 "mutable": false,
                 "complexType": {
                     "original": "() => void",
@@ -421,8 +410,142 @@ export class UdpFormsUi {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "currentFormData": {
+                "type": "unknown",
+                "attribute": "current-form-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [name: string]: any }",
+                    "resolved": "{ [name: string]: any; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "userId": {
+                "type": "string",
+                "attribute": "user-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "Guid | null",
+                    "resolved": "string",
+                    "references": {
+                        "Guid": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/my-component/UI/forms/udp-forms/types.ts::Guid"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "isSubmitted": {
+                "type": "boolean",
+                "attribute": "is-submitted",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dynamicSections": {
+                "type": "unknown",
+                "attribute": "dynamic-sections",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "duplicateRepeatableSection": {
+                "type": "any",
+                "attribute": "duplicate-repeatable-section",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "deleteRepeatableSection": {
+                "type": "any",
+                "attribute": "delete-repeatable-section",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "isFormDirty": {},
+            "showSavedMessage": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isSaving",
+                "methodName": "watchIsSaving"
+            }];
+    }
 }
 //# sourceMappingURL=udp-forms-ui.js.map