udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/stencil-library/udp-forms-ui.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"udp-forms-ui.entry.esm.js","sources":["src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-renderer.css?tag=udp-forms-ui&encapsulation=shadow","src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.tsx"],"sourcesContent":[".background {\n  background-color: var(--gray-01);\n}\n\n.item {\n  padding-bottom: var(--spacing-02);\n  /* margin-bottom: var(--spacing-05); */\n}\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-05);\n  padding-top: var(--spacing-02);\n  padding-bottom: var(--spacing-02);\n}\n\n.footer {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.submit {\n  background-color: var(--primary-color);\n  box-sizing: border-box;\n  border: none;\n  color: white;\n  padding: 8px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  min-width: 48px;\n  min-height: 24px; /* Default size */\n}\n\n.submit:disabled {\n  background-color: var(--gray-05);\n  cursor:default;\n}\n\n.submit-card {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n}\n\n.form-content {\n  margin-bottom: var(--spacing-05);\n  background-color: white;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-05);\n}\n\n.form-container {\n  padding-top: var(--spacing-05);\n  padding-bottom: var(--spacing-05);\n}\n\n.center-div {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.finish-button {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.header {\n  background-color: var(--secondary-color);\n  padding: var(--spacing-05) var(--spacing-05);\n  color: var(--primary-color-contrast, #fff);\n}\n\n.auto-save-status {\n  margin-top: var(--spacing-02);\n  padding: var(--spacing-01) 0;\n  font-size: 12px;\n  opacity: 0.8;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Guid, UdpForm, UdpFormQuestion } from '../types';\nimport { UdpFormsFieldTypeEnum } from '../enums';\nimport { fontOverrideMapping, overrideFont } from '../utils';\n\n// Helper function to determine if a value is empty, considering various types.\nconst isEmpty = (value: any): boolean => {\n  if (value === null || value === undefined) return true;\n  if (typeof value === 'string' && value.trim() === '') return true;\n  if (Array.isArray(value) && value.length === 0) return true;\n  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n    // A UdpDriveFile object is considered not empty.\n    if (value.driveId && value.fileId) {\n      return false;\n    }\n    // A File object from a file input or signature pad\n    if (value instanceof File) {\n      return value.size === 0;\n    }\n    // A plain object with no keys is empty\n    return Object.keys(value).length === 0;\n  }\n  return false;\n};\n\n@Component({\n  tag: 'udp-forms-ui',\n  styleUrl: 'udp-forms-renderer.css', // Reuse the same styles\n  shadow: true,\n})\nexport class UdpFormsUi {\n  @Prop() form: UdpForm;\n  @Prop() initialValues: { [name: string]: any } = {};\n  @Prop() submitSuccessful: boolean = false;\n  @Prop() loading: boolean = false;\n  @Prop() isSaving: boolean = false;\n  @Prop() saveError: string | null = null;\n  @Prop() showAutoSaveStatus: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readonly: boolean = false;\n  @Prop() onSubmit: (values: any) => Promise<void>;\n  @Prop() onChange: (values: { [name: string]: any }) => void;\n  @Prop() onAction: (actionId: Guid, params: Object) => void;\n  @Prop() onFinish: () => void;\n\n  private titleId: string = 'udp-forms-title';\n  private descriptionId: string = 'udp-forms-description';\n\n  componentDidLoad() {\n    this.overrideStyles();\n  }\n\n  componentDidUpdate() {\n    this.overrideStyles();\n  }\n\n  overrideStyles() {\n    const shadowRoot = (this as any).el?.shadowRoot;\n    shadowRoot?.querySelectorAll('unity-typography').forEach(element => {\n      const styleOverride =\n        element.id === this.titleId ? this.form?.styleOverrides?.titleText :\n        element.id === this.descriptionId ? this.form?.styleOverrides?.paragraphText :\n        ({} as any);\n\n      if (styleOverride?.fontFamily && fontOverrideMapping[styleOverride.fontFamily]) {\n        overrideFont(element, fontOverrideMapping[styleOverride.fontFamily]);\n      }\n      if (styleOverride?.variant) {\n        element.setAttribute('variant', styleOverride.variant);\n      }\n    });\n  }\n\n  private validate = (values: Object) => {\n    console.log('Validation called with values:', values);\n    const errors = {};\n    // Validate required fields\n    for (const question of this.form?.formQuestions || []) {\n      if (question.required && question.fieldTypeId !== UdpFormsFieldTypeEnum.Tally) {\n        const value = values[question.name];\n        if (isEmpty(value)) {\n          errors[question.name] = 'This field is required';\n          console.log(`Validation error for ${question.name}: required field is empty`);\n        }\n      }\n    }\n    console.log('Validation errors:', errors);\n    return errors;\n  };\n\n  private handleSubmit = async (values: any) => {\n    console.log('Form submit handler called with values:', values);\n    try {\n      if (this.onSubmit) {\n        console.log('Calling onSubmit prop...');\n        await this.onSubmit(values);\n        console.log('onSubmit completed successfully');\n      } else {\n        console.error('onSubmit prop is not defined!');\n      }\n    } catch (error) {\n      console.error('Error in onSubmit:', error);\n    }\n  };\n\n  private handleFormInvalid = (errors: any) => {\n    console.log('Form validation failed with errors:', errors);\n  };\n\n  render() {\n    if (!this.form) {\n      return <div>Loading...</div>;\n    }\n\n    let questionNumber = 1;\n\n    const sectionSet = new Set();\n    this.form.formQuestions.forEach(fq => sectionSet.add(fq.section));\n    const orderedSectionNumbers = [...sectionSet].sort((a: number, b: number) => a - b);\n\n    const hiddenQuestionTypes = [UdpFormsFieldTypeEnum.Hidden, UdpFormsFieldTypeEnum.Paragraph];\n\n    const backgroundOverrides: { backgroundImage?: string | null; backgroundColor?: string | null } = {};\n    if (this.form?.styleOverrides?.background?.backgroundImage) {\n      // uncomment when we want to allow background images\n      //backgroundOverrides.backgroundImage = `url(${this.form?.styleOverrides?.background?.backgroundImage})`;\n    } else if (this.form?.styleOverrides?.background?.backgroundColor) {\n      backgroundOverrides.backgroundColor = this.form?.styleOverrides?.background?.backgroundColor;\n    }\n\n    return (\n      <div class={'background'} style={backgroundOverrides}>\n        <udp-container maxWidth=\"md\">\n          <div class=\"form-container\">\n            {!this.submitSuccessful ? (\n              <stencil-form\n                handleSubmit={this.handleSubmit}\n                initialValues={this.initialValues}\n                validate={this.validate}\n                handleFormChange={this.onChange}\n                onStencilFormInvalidEvent={this.handleFormInvalid}\n              >\n                {/********** QUESTIONS *********/}\n                {orderedSectionNumbers.map((sectionNumber, i) => (\n                  <div>\n                    {sectionNumber === orderedSectionNumbers[0] && (\n                      // @ts-ignore\n                      <div class=\"header\" style={this.form?.styleOverrides?.headerBackgroundColor ? { backgroundColor: this.form?.styleOverrides?.headerBackgroundColor } : ''}>\n                        <unity-typography id={this.titleId} variant={'h6'} color=\"inherit\">\n                          {this.form.name}\n                        </unity-typography>\n                        <unity-typography\n                          id={this.descriptionId}\n                          variant={this.form?.styleOverrides?.paragraphText?.variant ?? 'body'}\n                          color=\"inherit\"\n                        >\n                          {this.form.description}\n                        </unity-typography>\n\n                        {/* Auto-save status indicator for authenticated users */}\n                        {this.showAutoSaveStatus && (\n                          <div class=\"auto-save-status\">\n                            {/* {this.isSaving && (\n                              <unity-typography variant=\"body\" color=\"primary\">\n                                Saving...\n                              </unity-typography>\n                            )} */}\n                            {this.saveError && (\n                              <unity-typography variant=\"body\" color=\"secondary\">\n                                {this.saveError}\n                              </unity-typography>\n                            )}\n                          </div>\n                        )}\n                      </div>\n                    )}\n                    <div class=\"form-content\">\n                      <div class=\"items\">\n                        {this.form.formQuestions\n                          .filter(fq => fq.section === sectionNumber)\n                          .sort((a, b) => a.questionOrder - b.questionOrder)\n                          .map((question: UdpFormQuestion) => {\n                            const isHidden = hiddenQuestionTypes.includes(question.fieldTypeId);\n                            const num: number = questionNumber;\n                            if (!isHidden) questionNumber++;\n                            return (\n                              <div class=\"item\">\n                                <udp-question\n                                  styleOverrides={{\n                                    helperText: this.form.styleOverrides?.helperText,\n                                    paragraphText: this.form.styleOverrides?.paragraphText,\n                                    questionText: this.form.styleOverrides?.questionText,\n                                  }}\n                                  question={question}\n                                  questionNumber={num}\n                                  value={this.initialValues[question.name]}\n                                  disabled={this.disabled}\n                                  readonly={this.readonly}\n                                />\n                              </div>\n                            );\n                          })}\n                      </div>\n                      {i === orderedSectionNumbers.length - 1 && (\n                        <div class=\"footer\">\n                          <input\n                            disabled={this.loading || this.disabled || this.readonly}\n                            type=\"submit\"\n                            value=\"Submit\"\n                            class=\"submit\"\n                            id=\"udpRecord-udp-forms-renderer-Submit\"\n                            onClick={() => {\n                              console.log('Submit button clicked');\n                              // Let the form handle the submit naturally\n                            }}\n                          />\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </stencil-form>\n            ) : (\n              //if the form has been submit, display success message with a button to trigger the action associated to the form\n              <div class=\"center-div\">\n                <udp-ambient-card>\n                  <div class=\"submit-card\">\n                    <unity-typography>Thank you for your submission!</unity-typography>\n                    <div class=\"finish-button\">\n                      <custom-button onClick={this.onFinish}>Finish</custom-button>\n                    </div>\n                  </div>\n                </udp-ambient-card>\n              </div>\n            )}\n          </div>\n        </udp-container>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"udp-forms-ui.entry.esm.js","sources":["src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.css?tag=udp-forms-ui&encapsulation=shadow","src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.tsx"],"sourcesContent":[".background {\n  background-color: var(--gray-01);\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.item {\n  padding-bottom: var(--spacing-02);\n  /* margin-bottom: var(--spacing-05); */\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-05);\n  padding-top: var(--spacing-02);\n  padding-bottom: var(--spacing-02);\n}\n\n.footer {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.submit {\n  background-color: var(--primary-color);\n  box-sizing: border-box;\n  border: none;\n  color: white;\n  padding: 8px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  min-width: 48px;\n  min-height: 24px;\n  /* Default size */\n}\n\n.submit:disabled {\n  background-color: var(--gray-05);\n  cursor: default;\n}\n\n.submit-card {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n}\n\n/* .form-section-content */\n.form-section-content {\n  margin-bottom: var(--spacing-05);\n  background-color: white;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-05);\n}\n\n.form-container {\n  padding-top: var(--spacing-05);\n  padding-bottom: var(--spacing-05);\n}\n\n.form-section-block {\n  margin-bottom: var(--spacing-05);\n}\n\n.form-section-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  background-color: var(--primary-color, #000);\n  color: var(--primary-contrast-text, #FFF);\n  padding: var(--spacing-04, 16px) var(--spacing-05, 24px);\n  align-items: center;\n  min-height: var(--spacing-10, 60px);\n}\n\n.form-section-text {\n  margin-bottom: var(--spacing-03);\n}\n\n.center-div {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.finish-button {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* .header */\n.form-renderer-header {\n  padding: var(--spacing-05) var(--spacing-05);\n  background-color: var(--primary-color-dark, #000);\n  color: var(--primary-contrast-text, #FFF);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.header-content {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--spacing-03);\n}\n\n.header-text {\n  flex: 1;\n  min-width: 0;\n  /* Allow text to shrink */\n}\n\n/* Save button visibility - JavaScript controlled */\n.header-save-button {\n  display: block;\n  /* Always available, component controls its own visibility */\n}\n\n.floating-save-button {\n  display: block;\n  /* Always available, component controls its own visibility */\n}\n\n/*\n * Save button visibility is now controlled by JavaScript-based overlap detection\n * in the udp-save-draft-button component. This provides real-time detection of\n * overlaps with form content, accounting for menu drawers and dynamic layouts.\n *\n * The component automatically switches between floating and inline modes based on\n * actual element positions and available space, not viewport breakpoints.\n */\n\n/* Mobile layout adjustments */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--spacing-02);\n  }\n\n  .header-text {\n    margin-bottom: var(--spacing-02);\n  }\n}\n\n/* Small height screens: Always use header button */\n@media (max-height: 600px) {\n  .header-save-button {\n    display: block;\n  }\n\n  .floating-save-button {\n    display: none;\n  }\n}\n\n.auto-save-status {\n  margin-top: var(--spacing-02);\n  padding: var(--spacing-01) 0;\n  font-size: 12px;\n  opacity: 0.8;\n}","import { Component, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { Guid, UdpForm, UdpFormQuestion } from '../types';\nimport { UdpFormsFieldTypeEnum } from '../enums';\nimport { fontOverrideMapping, overrideFont } from '../utils';\nimport { getIconFromName } from '../../../data-display/icons/iconUtils';\n\n@Component({\n  tag: 'udp-forms-ui',\n  styleUrl: 'udp-forms-ui.css',\n  shadow: true,\n})\nexport class UdpFormsUi {\n  @Prop() form: UdpForm;\n  @Prop() initialValues: { [name: string]: any } = {};\n  @Prop() submitSuccessful: boolean = false;\n  @Prop() loading: boolean = false;\n  @Prop() isSaving: boolean = false;\n  @Prop() saveError: string | null = null;\n  @Prop() showAutoSaveStatus: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readonly: boolean = false;\n  @Prop() handleSubmit: (values: any) => Promise<void>;\n  @Prop() handleChange: (values: { [name: string]: any }) => void;\n  @Prop() handleSave: (values: { [name: string]: any }) => Promise<void>;\n  @Prop() handleAction: (actionId: Guid, params: Object) => void;\n  @Prop() handleFinish: () => void;\n  @Prop() currentFormData: { [name: string]: any } = {};\n  @Prop() userId: Guid | null = null;\n  @Prop() isSubmitted: boolean = false;\n  @Prop() dynamicSections: any[];\n  @Prop() duplicateRepeatableSection: any;\n  @Prop() deleteRepeatableSection: any;\n\n  @State() isFormDirty: boolean = false;\n  @State() showSavedMessage: boolean = false;\n\n  @Element() el: HTMLElement;\n\n  private savedMessageTimeoutId: any;\n\n  private titleId: string = 'udp-forms-title';\n  private descriptionId: string = 'udp-forms-description';\n\n  componentDidLoad() {\n    this.overrideStyles();\n  }\n\n  componentDidUpdate() {\n    this.overrideStyles();\n  }\n\n  disconnectedCallback() {\n    // Clean up timeout when component is destroyed\n    if (this.savedMessageTimeoutId) {\n      clearTimeout(this.savedMessageTimeoutId);\n    }\n  }\n\n  @Watch('isSaving')\n  watchIsSaving(newValue: boolean, oldValue: boolean) {\n    console.log('isSaving watcher triggered:', { oldValue, newValue, saveError: this.saveError });\n\n    // When isSaving changes from true to false (save completed successfully)\n    if (oldValue === true && newValue === false && !this.saveError) {\n      console.log('Setting showSavedMessage to true');\n      this.showSavedMessage = true;\n\n      // Clear any existing timeout\n      if (this.savedMessageTimeoutId) {\n        clearTimeout(this.savedMessageTimeoutId);\n      }\n\n      // Hide the \"Saved\" message after 5 seconds\n      this.savedMessageTimeoutId = setTimeout(() => {\n        console.log('Hiding saved message after 5 seconds');\n        this.showSavedMessage = false;\n      }, 5000);\n    }\n  }\n\n  overrideStyles() {\n    const shadowRoot = (this as any).el?.shadowRoot;\n    shadowRoot?.querySelectorAll('unity-typography').forEach(element => {\n      const styleOverride =\n        element.id === this.titleId ? this.form?.styleOverrides?.titleText : element.id === this.descriptionId ? this.form?.styleOverrides?.paragraphText : ({} as any);\n\n      if (styleOverride?.fontFamily && fontOverrideMapping[styleOverride.fontFamily]) {\n        overrideFont(element, fontOverrideMapping[styleOverride.fontFamily]);\n      }\n      if (styleOverride?.variant) {\n        element.setAttribute('variant', styleOverride.variant);\n      }\n    });\n  }\n\n  render() {\n    if (!this.form) {\n      return <div>Loading...</div>;\n    }\n\n    let questionNumber = 1;\n\n    const sectionSet = new Set();\n    this.form.formQuestions.forEach(fq => sectionSet.add(fq.section));\n    // const orderedSectionNumbers = [...sectionSet].sort((a: number, b: number) => a - b);\n\n    const hiddenQuestionTypes = [UdpFormsFieldTypeEnum.Hidden, UdpFormsFieldTypeEnum.Paragraph];\n\n    const backgroundOverrides: { backgroundImage?: string | null; backgroundColor?: string | null } = {};\n    if (this.form?.styleOverrides?.background?.backgroundImage) {\n      // uncomment when we want to allow background images\n      //backgroundOverrides.backgroundImage = `url(${this.form?.styleOverrides?.background?.backgroundImage})`;\n    } else if (this.form?.styleOverrides?.background?.backgroundColor) {\n      backgroundOverrides.backgroundColor = this.form?.styleOverrides?.background?.backgroundColor;\n    }\n    return (\n      <div class={'background'} style={backgroundOverrides}>\n        <udp-container maxWidth=\"md\">\n          <div class=\"form-container\">\n            {!this.submitSuccessful ? (\n              <stencil-form\n                handleSubmit={this.handleSubmit}\n                initialValues={this.initialValues}\n                handleChange={this.handleChange}\n                onDirtyChange={event => (this.isFormDirty = event.detail)}\n              >\n                {/********** QUESTIONS *********/}\n                <div>\n                  {/* <div class=\"header\" style={this.form?.styleOverrides?.headerBackgroundColor ? { backgroundColor: this.form?.styleOverrides?.headerBackgroundColor } : ''}> */}\n                  <div class=\"form-section-block\">\n                    <div\n                      class=\"form-renderer-header\"\n                      style={{\n                        ...(this.form?.styleOverrides?.headerBackgroundColor && {\n                          backgroundColor: this.form.styleOverrides.headerBackgroundColor,\n                        }),\n                      }}\n                    >\n                      <unity-typography id={this.titleId} variant={'h6'} color=\"inherit\">\n                        {this.form.name}\n                      </unity-typography>\n\n                      {/* Auto-save status indicator for authenticated users */}\n                      {this.showAutoSaveStatus && (\n                        <div class=\"auto-save-status\">\n                          {/* {this.isSaving && (\n                              <unity-typography variant=\"body\" color=\"primary\">\n                                Saving...\n                              </unity-typography>\n                            )} */}\n                          {this.saveError && (\n                            <unity-typography variant=\"body\" color=\"secondary\">\n                              {this.saveError}\n                            </unity-typography>\n                          )}\n                        </div>\n                      )}\n                      <udp-save-draft-button\n                        isVisible={this.isFormDirty && !this.isSubmitted && !!this.userId}\n                        isSaving={this.isSaving}\n                        saveError={this.saveError}\n                        showSavedMessage={this.showSavedMessage}\n                        handleSave={this.handleSave}\n                      />\n                    </div>\n\n                    <div class=\"form-section-content\">\n                      <div class=\"items\">\n                        <div class=\"form-section-text\">\n                          <unity-typography id={this.descriptionId} variant={this.form?.styleOverrides?.paragraphText?.variant ?? 'body'} color=\"inherit\">\n                            {this.form.description}\n                          </unity-typography>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  {/* Save Button - moves between header and floating based on space */}\n                  {this.dynamicSections.map((section, sIndex) => {\n                    return (\n                      <div class=\"form-section-block\">\n                        <div class=\"form-section-header\">\n                          <div class=\"form-section-header-title\">\n                            <unity-typography variant=\"h6\" color=\"inherit\">\n                              {`${section.title}${section.sectionPositionSuffix > 1 ? ` (${section.sectionPositionSuffix})` : ''}`}\n                            </unity-typography>\n                          </div>\n                          <div class=\"form-section-header-actions\">\n                            {section.sectionProperties.isRepeatable && section.isOriginalSection && !this.readonly && (\n                              <stencil-icon-button icon={getIconFromName('add')} tooltip=\"Repeat This Section\" onClick={() => this.duplicateRepeatableSection(sIndex)} />\n                            )}\n                            {!section.isOriginalSection && !this.readonly && (\n                              <stencil-icon-button icon={getIconFromName('subtract')} tooltip=\"Delete This Repeated Section\" onClick={() => this.deleteRepeatableSection(sIndex)} />\n                            )}\n                          </div>\n                        </div>\n\n                        <div class=\"form-section-content\">\n                          <div class=\"items\">\n                            <div class=\"form-section-text\">\n                              <unity-typography variant=\"body\" color=\"inherit\">\n                                {section.sectionText}\n                              </unity-typography>\n                            </div>\n\n                            <div>\n                              {section.formQuestions.map((question: UdpFormQuestion) => {\n                                const isHidden = hiddenQuestionTypes.includes(question.fieldTypeId);\n                                const num: number = questionNumber;\n                                // const processedSubmissionName = `${sectionProcessedName}-${question.name}`\n                                if (!isHidden) questionNumber++;\n                                return (\n                                  <div class=\"item\">\n                                    <udp-question\n                                      styleOverrides={{\n                                        helperText: this.form.styleOverrides?.helperText,\n                                        paragraphText: this.form.styleOverrides?.paragraphText,\n                                        questionText: this.form.styleOverrides?.questionText,\n                                      }}\n                                      question={question}\n                                      questionNumber={num}\n                                      value={this.initialValues[question.processedSubmissionName]}\n                                      disabled={this.disabled}\n                                      readonly={this.readonly}\n                                      key={question.processedSubmissionName}\n                                    />\n                                  </div>\n                                );\n                              })}\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    );\n                  })}\n                  <div class=\"footer\">\n                    <input\n                      disabled={this.loading || this.disabled || this.readonly}\n                      type=\"submit\"\n                      value=\"Submit\"\n                      class=\"submit\"\n                      id=\"udpRecord-udp-forms-renderer-Submit\"\n                      onClick={() => {\n                        console.log('Submit button clicked');\n                        // Let the form handle the submit naturally\n                      }}\n                    />\n                  </div>\n                </div>\n              </stencil-form>\n            ) : (\n              //if the form has been submit, display success message with a button to trigger the action associated to the form\n              <div class=\"center-div\">\n                <udp-ambient-card>\n                  <div class=\"submit-card\">\n                    <unity-typography>Thank you for your submission!</unity-typography>\n                    <div class=\"finish-button\">\n                      <custom-button onClick={this.handleFinish}>Finish</custom-button>\n                    </div>\n                  </div>\n                </udp-ambient-card>\n              </div>\n            )}\n          </div>\n        </udp-container>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/types/components/my-component/UI/buttons/icon-button/stencil-icon-button.d.ts

@@ -1,6 +1,20 @@
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Please use `udp-icon-button` instead, which provides better consistency with udp-button
+ * and improved theming support.
+ *
+ * Migration guide:
+ * - Replace `<stencil-icon-button>` with `<udp-icon-button>`
+ * - `secondary=true` → `variant='text'` or `variant='outlined'`
+ * - `noBackground=true` → `variant='text'`
+ * - `darkIcon` → Use `color` prop instead
+ * - `showLabel` → Use slot content (if content provided, label shows)
+ * - `count` → Use `badgeContent` prop
+ */
 export declare class StencilIconButton {
     iconName: string;
     onClick: (event: MouseEvent) => void;
+    componentWillLoad(): void;
     iconClassName: string;
     tooltip: string;
     icon: any;

package/dist/types/components/my-component/UI/buttons/udp-icon-button/udp-icon-button.d.ts

@@ -0,0 +1,91 @@
+import { EventEmitter } from '../../../../../stencil-public-runtime';
+/**
+ * UdpIconButton is a versatile icon button component that matches the udp-button API.
+ * It's designed to replace the deprecated `stencil-icon-button` with better consistency.
+ *
+ * Key improvements over `stencil-icon-button`:
+ * - Consistent API with `udp-button`
+ * - Better theming support using global CSS variables
+ * - Improved accessibility
+ * - Cleaner prop structure
+ * - Better TypeScript support
+ *
+ * Migration from `stencil-icon-button`:
+ * - `iconName` → Not needed, use `icon` prop directly
+ * - `iconClassName` → Not needed, styling handled by component
+ * - `secondary=true` → `variant='text'` or `variant='outlined'`
+ * - `noBackground=true` → `variant='text'`
+ * - `darkIcon` → Use `color` prop instead
+ * - `showLabel` → Use slot content (if content provided, label shows)
+ * - `count` → Use `badgeContent` prop
+ */
+export declare class UdpIconButton {
+    el: HTMLElement;
+    /**
+     * The variant to use.
+     * - `text`: Typically used for less-pronounced actions (replaces noBackground=true).
+     * - `outlined`: Emphasizes actions with a border.
+     * - `contained`: High-emphasis, distinguished by a background color.
+     */
+    variant: 'text' | 'outlined' | 'contained';
+    /**
+     * The color of the component. It supports theming using global CSS variables.
+     * `inherit` will inherit the color from its parent.
+     */
+    color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+    /**
+     * The size of the component.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The URL to link to when the button is clicked. If provided, the component renders as an `<a>` tag.
+     */
+    href?: string;
+    /**
+     * The type of the button. Only used if `href` is not set.
+     * Corresponds to the native `type` attribute of a `<button>` element.
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * The icon to display. Should be a Carbon icon or similar SVG icon object.
+     * Expected format: { attrs: {...}, content: [...] }
+     */
+    icon: any;
+    /**
+     * Tooltip text to display on hover.
+     */
+    tooltip?: string;
+    /**
+     * If provided, displays a badge with this content over the icon.
+     * Replaces the old `count` prop from stencil-icon-button.
+     * Must be a number as required by udp-badge component.
+     */
+    badgeContent?: number;
+    /**
+     * Emitted when the button is clicked.
+     */
+    click: EventEmitter<MouseEvent>;
+    /**
+     * Optional aria-label for accessibility.
+     * If not provided and tooltip exists, tooltip will be used.
+     */
+    ariaLabel?: string;
+    /**
+     * Optional button ID for testing/tracking purposes.
+     */
+    buttonId?: string;
+    /**
+     * The color of the icon. If not provided, uses the button's color.
+     * Allows independent control of icon color from button color.
+     */
+    iconColor?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+    private handleClick;
+    private renderIcon;
+    private renderButton;
+    private renderLink;
+    render(): any;
+}

package/dist/types/components/my-component/UI/forms/form/stencil-field.d.ts

@@ -21,6 +21,7 @@ export declare class StencilField {
     handleChange(e: Event): void;
     handleFocus(e: FocusEvent): void;
     handleBlur(e: FocusEvent): void;
-    stencilInvalid(e: any): void;
+    handleError(e: CustomEvent): void;
+    stencilInvalid(e: CustomEvent): void;
     render(): any;
 }

package/dist/types/components/my-component/UI/forms/form/stencil-form.d.ts

@@ -4,20 +4,22 @@ export declare class StencilForm {
     el: HTMLElement;
     handleSubmit: (values: Object) => void;
     initialValues: Object;
-    validate: (values: Object, errors: Object) => Object;
+    handleValidate: (values: Object, errors: Object) => Object;
     validateOnBlur: boolean;
-    handleFormChange: (values: Object) => void;
+    handleChange: (values: Object) => void;
     stencilFormInvalidEvent: EventEmitter<Object>;
+    dirtyChange: EventEmitter<boolean>;
+    private observer;
     api: FormApi;
     registeredFields: {
         [key: string]: {
             required: boolean;
         };
     };
+    customErrors: {
+        [key: string]: string;
+    };
     constructor();
-    /**
-     * Connects a field to the form API.
-     */
     private connectField;
     /**
      * Asynchronously and recursively traverses a node and all of its light DOM

package/dist/types/components/my-component/UI/forms/udp-forms/types.d.ts

@@ -12,12 +12,27 @@ export interface UdpFormQuestion extends UdpObject {
     clusterId: number;
     helperText: string;
     section: number;
+    formSectionId?: Guid;
     questionOrder: number;
     required: boolean;
     form: null;
     questionTypeName?: string;
     isContainsOptionItems?: boolean;
     icon?: any;
+    processedSubmissionName?: string;
+}
+export interface UdpFormSection extends UdpObject {
+    id: Guid;
+    formId: Guid;
+    formVersion: number;
+    title: string;
+    sectionText: string;
+    order: number;
+    sectionProperties: any;
+    name?: string;
+    formQuestions?: UdpFormQuestion[];
+    isOriginalSection?: boolean;
+    sectionPositionSuffix?: number;
 }
 export interface UdpForm extends UdpObject {
     id: Guid;
@@ -30,6 +45,7 @@ export interface UdpForm extends UdpObject {
     clusterId: number;
     actionId?: Guid;
     formQuestions: UdpFormQuestion[];
+    udpFormUdpFormSection: UdpFormSection[];
     styleOverrides?: StyleOverrides | null;
 }
 export interface StyleOverrides {

package/dist/types/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/section-configs-renderer.d.ts

@@ -5,5 +5,6 @@ export declare class SectionConfigsRenderer {
     onFormSectionsDraftChange: (updatedSections: any[]) => void;
     private get section();
     private handleSectionFieldChange;
+    private handleSectionRepeatablePropertyChange;
     render(): any;
 }

package/dist/types/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder.d.ts

@@ -30,41 +30,38 @@ export declare class UdpFormsBuilder {
     isQuestionEditorOpen: boolean;
     isSectionEditorOpen: boolean;
     lookupOptionsDataProcessed: [];
-    dialogActionTwo: () => void;
+    dialogAction: () => void;
     dialogMessage: string;
-    pageBuilderId: string;
     private sortableInstances;
-    needsSortableInit: boolean;
-    private initializeSortable;
-    private handleDragEnd;
+    private pageBuilderId;
+    initializeForm(): Promise<void>;
+    submitForm(): Promise<void>;
     componentDidLoad(): void;
     componentDidUpdate(): void;
     componentWillLoad(): void;
-    onFormSectionsChange(newValue: any[]): void;
-    onFormMetadataChange(newValue: any): void;
     onFormIdOrVersionChange(): void;
-    getQuestionTypeName: (fieldTypeId: any) => string;
-    getIsContainsOptionItems: (fieldTypeId: any) => boolean;
-    getIconForQuestion: (fieldTypeId: any) => string;
-    initializeForm(): Promise<void>;
-    submitForm(): Promise<void>;
+    private initializeSortable;
+    private handleDragEnd;
+    private toggleStyleSheet;
+    private getQuestionTypeName;
+    private getIsContainsOptionItems;
+    private getIconForQuestion;
     private handleQuestionDelete;
     private handleQuestionCopy;
     private handleQuestionClick;
     private closeQuestionEditor;
+    private addQuestionOfType;
+    private deepMerge;
+    private handleSectionMoveDown;
+    private handleSectionMoveUp;
+    private handleSectionDelete;
     private updateFormSectionsWithDraft;
     private hasUnsavedFormSectionsChanges;
     private handleSectionEditClick;
     private closeSectionEditor;
-    private addQuestionOfType;
-    private deepMerge;
-    private validateQuestionItem;
     private validateForm;
     private validateFormMetadata;
     private validateAllQuestions;
-    private toggleStyleSheet;
-    private handleSectionMoveDown;
-    private handleSectionMoveUp;
-    private handleSectionDelete;
+    private validateQuestionItem;
     render(): any;
 }

package/dist/types/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-renderer.d.ts

@@ -22,42 +22,30 @@ export declare class UdpFormsRenderer {
     isSaving: boolean;
     saveError: string | null;
     isSubmitted: boolean;
+    dynamicSections: any[];
+    isUpdatingSections: boolean;
+    reRenderKey: number;
     private tenantId;
-    private debouncedAutoSave;
+    private debouncedManualSave;
     private formHandler;
     componentWillLoad(): Promise<void>;
     private loadForm;
-    private handleSubmit;
-    private handleAutoSave;
-    private handleFormChange;
-    /**
-     * Process initial values to convert file references to UdpDriveFile objects
-     */
-    private processInitialValues;
-    /**
-     * Check if a string value is a file reference (contains | and udp: or b64:)
-     */
-    private isFileReference;
+    private initializeDynamicSections;
+    private findRepeatGroupKeys;
     /**
-     * Parse file references from the special format: "filename|udp:driveFileId" or "filename|b64:base64data"
+     * Duplicate a repeatable section
      */
-    private parseFileReferences;
+    private duplicateRepeatableSection;
     /**
-     * Parse a single file reference
+     * Delete a repeatable section
      */
-    private parseFileReference;
-    /**
-     * Create a UdpDriveFile from a drive file ID
-     */
-    private createUdpDriveFileFromId;
-    /**
-     * Create a UdpDriveFile from base64 data
-     */
-    private createUdpDriveFileFromBase64;
+    private deleteRepeatableSection;
+    private handleSubmit;
     /**
-     * Get MIME type from file extension
+     * Manual save function - debounced to 5 seconds
      */
-    private getMimeTypeFromExtension;
+    private handleManualSave;
+    private handleFormChange;
     private handleFinish;
     render(): any;
 }

package/dist/types/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.d.ts

@@ -11,19 +11,33 @@ export declare class UdpFormsUi {
     showAutoSaveStatus: boolean;
     disabled: boolean;
     readonly: boolean;
-    onSubmit: (values: any) => Promise<void>;
-    onChange: (values: {
+    handleSubmit: (values: any) => Promise<void>;
+    handleChange: (values: {
         [name: string]: any;
     }) => void;
-    onAction: (actionId: Guid, params: Object) => void;
-    onFinish: () => void;
+    handleSave: (values: {
+        [name: string]: any;
+    }) => Promise<void>;
+    handleAction: (actionId: Guid, params: Object) => void;
+    handleFinish: () => void;
+    currentFormData: {
+        [name: string]: any;
+    };
+    userId: Guid | null;
+    isSubmitted: boolean;
+    dynamicSections: any[];
+    duplicateRepeatableSection: any;
+    deleteRepeatableSection: any;
+    isFormDirty: boolean;
+    showSavedMessage: boolean;
+    el: HTMLElement;
+    private savedMessageTimeoutId;
     private titleId;
     private descriptionId;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    watchIsSaving(newValue: boolean, oldValue: boolean): void;
     overrideStyles(): void;
-    private validate;
-    private handleSubmit;
-    private handleFormInvalid;
     render(): any;
 }

package/dist/types/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-save-draft-button/udp-save-draft-button.d.ts

@@ -0,0 +1,20 @@
+export declare class UdpSaveDraftButton {
+    el: HTMLElement;
+    isVisible: boolean;
+    isSaving: boolean;
+    saveError: string | null;
+    showSavedMessage: boolean;
+    handleSave: (values?: any) => void;
+    shouldBeInline: boolean;
+    private formApi;
+    private resizeObserver;
+    private checkOverlapTimeoutId;
+    componentDidLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    handleWindowResize(): void;
+    private setupOverlapDetection;
+    private debouncedOverlapCheck;
+    private checkForOverlap;
+    private handleSaveClick;
+    render(): any;
+}

package/dist/types/components/my-component/UI/inputs/file-upload/file-upload.d.ts

@@ -151,7 +151,7 @@ export declare class FileUpload {
      * Tracks which files are existing (saved) vs new (to be uploaded).
      * @internal
      */
-    existingFileReferences: Map<string, UdpDriveFile>;
+    existingFileReferences: Map<string, Partial<UdpDriveFile>>;
     /**
      * Emitted when files are added, removed, or changed.
      * Provides both string representation and File objects for flexible handling.

package/dist/types/components/my-component/UI/inputs/file-upload/udp-drive-utils.d.ts

@@ -1,5 +1,72 @@
 import { UdpDriveFile } from '../../../../../global/types';
+export type FileInitialValue = UdpDriveFile | File | string;
+export type FileArrayInitialValue = UdpDriveFile[] | UdpDriveFile | File[] | File | string;
+/**
+ * Type guard to check if a value is a UdpDriveFile
+ */
 export declare function isUdpDriveFile(file: any): file is UdpDriveFile;
+/**
+ * Type guard to check if a value is a File object
+ */
+export declare function isFile(file: any): file is File;
+/**
+ * Type guard to check if a value is a string (URL or base64)
+ */
+export declare function isFileString(file: any): file is string;
+/**
+ * Get MIME type from file extension
+ */
 export declare function getMimeTypeFromExtension(extension: string): string;
+/**
+ * Create a placeholder File object from UdpDriveFile (for display purposes only)
+ * This creates a lightweight File object without downloading the actual content
+ */
 export declare function createPlaceholderFileFromUdpDriveFile(udpFile: UdpDriveFile): File;
-export declare function downloadFileFromUdpDriveFile(udpFile: UdpDriveFile): Promise<File>;
+/**
+ * Download and create a File object from UdpDriveFile (downloads actual content)
+ * Use this when you need the actual file content (e.g., for signature editing)
+ */
+export declare function downloadFileFromUdpDriveFile(udpFile: Partial<UdpDriveFile>): Promise<File>;
+/**
+ * Convert a string (URL or base64) to a File object
+ */
+export declare function createFileFromString(fileString: string, defaultFileName?: string): Promise<File>;
+/**
+ * Normalize a single initialValue to an array of Files
+ * For file-upload component (supports arrays)
+ */
+export declare function normalizeFileArrayInitialValue(initialValue: FileArrayInitialValue, downloadContent?: boolean): Promise<File[]>;
+/**
+ * Normalize a single initialValue to a single File
+ * For signature component (single file only)
+ */
+export declare function normalizeFileInitialValue(initialValue: FileInitialValue, downloadContent?: boolean): Promise<File | null>;
+/**
+ * Utility function for file-upload component to handle initialValue changes
+ * Creates placeholder files by default (download on demand)
+ */
+export declare function processFileUploadInitialValue(initialValue: FileArrayInitialValue): Promise<File[]>;
+/**
+ * Utility function for signature component to handle initialValue changes
+ * Downloads content immediately for editing
+ */
+export declare function processSignatureInitialValue(initialValue: FileInitialValue): Promise<File | null>;
+/**
+ * Check if a string value is a file reference (contains | and udp: or b64:)
+ */
+export declare function isFileReference(value: string): boolean;
+/**
+ * Parse file references from the special format: "filename|udp:driveFileId" or "filename|b64:base64data"
+ * Returns an array of File objects for use with input components
+ */
+export declare function parseFileReferences(value: string): Promise<File[]>;
+/**
+ * Parse a single file reference from the format "filename|udp:driveFileId" or "filename|b64:base64data"
+ * Returns a File object that can be used by input components
+ */
+export declare function parseFileReference(reference: string): Promise<File | null>;
+/**
+ * Process form initial values that may contain file references
+ * This function should be called by input components when they receive initialValue
+ */
+export declare function processFormFileInitialValue(initialValue: FileArrayInitialValue | string): Promise<File[]>;

package/dist/types/components/my-component/UI/inputs/numeric-field/numeric-field.d.ts

@@ -66,7 +66,7 @@ export declare class NumericField {
     /**
      * Whether the field is read-only. Users can see the value but cannot modify it.
      */
-    readOnly: boolean;
+    readonly: boolean;
     /**
      * Whether the field is disabled. Users cannot interact with the field.
      */

package/dist/types/components/my-component/UI/inputs/signature-input/signature-input.d.ts

@@ -61,7 +61,7 @@ export declare class SignatureInput {
     private resizeTimeout;
     onErrorChange(newValue: string): void;
     onValueChange(newValue: File | UdpDriveFile): Promise<void>;
-    onInitialValueChange(newValue: File | UdpDriveFile | string): Promise<void>;
+    onInitialValueChange(newValue: any): Promise<void>;
     componentWillLoad(): Promise<void>;
     componentDidLoad(): Promise<void>;
     disconnectedCallback(): void;

package/dist/types/components/my-component/UI/inputs/text-area/text-area.d.ts

@@ -38,6 +38,7 @@ import { InputSize, InputMargin } from '../input-types';
  * ```
  */
 export declare class TextArea {
+    el: HTMLElement;
     /**
      * Label text displayed above the textarea. Used for accessibility and user guidance.
      */
@@ -80,6 +81,10 @@ export declare class TextArea {
      * Whether the textarea should take the full width of its container.
      */
     fullWidth: boolean;
+    /**
+     * Minimum number of characters required in the textarea. Enforces minimum character limits.
+     */
+    minCharacter: number;
     /**
      * Maximum number of characters allowed in the textarea. Enforces character limits.
      */
@@ -130,6 +135,11 @@ export declare class TextArea {
      * Emitted when the value of the component changes (on blur).
      */
     change: EventEmitter<string>;
+    /**
+     * Emitted when validation errors occur (e.g., character length outside min/max constraints).
+     * Contains the error message string. Empty string indicates no error.
+     */
+    errorEvent: EventEmitter<string>;
     private textareaEl;
     /**
      * Updates the error message when the error prop changes.
@@ -146,6 +156,17 @@ export declare class TextArea {
      * @internal
      */
     protected valueChanged(): void;
+    /**
+     * Validates the text value against min/max character constraints
+     * @param value - The text value to validate
+     * @returns Error message if invalid, empty string if valid
+     */
+    private validateCharacterLength;
+    /**
+     * Sets error state and dispatches error event that bubbles to stencil-field
+     * @param errorMessage - The error message to set and dispatch
+     */
+    private setAndDispatchError;
     /**
      * @internal
      */