@formique/semantq 1.0.6 → 1.0.8

package/formique-semantq.js

@@ -60,6 +60,23 @@ class Formique extends FormBuilder {
             asteriskHtml: '<span aria-hidden="true" style="color: red;">*</span>',
             ...formSettings
         };
+
+         this.themeColor = formSettings.themeColor || null;
+        
+         this.themeColorMap = {
+          'primary': {
+            '--formique-base-bg': '#ffffff',
+            '--formique-base-text': '#333333',
+            '--formique-base-shadow': '0 10px 30px rgba(0, 0, 0, 0.1)',
+            '--formique-base-label': '#555555',
+            '--formique-input-border': '#dddddd',
+            '--formique-focus-color': null, // Will be set to themeColor
+            '--formique-btn-bg': null,      // Will be set to themeColor
+            '--formique-btn-text': '#ffffff',
+            '--formique-btn-shadow': null    // Will be calculated from themeColor
+          }
+        };
+
         this.divClass = 'input-block';
         this.inputClass = 'form-input';
         this.radioGroupClass = 'radio-group';
@@ -82,7 +99,7 @@ class Formique extends FormBuilder {
         ];
         this.formiqueEndpoint = "https://formiqueapi.onrender.com/api/send-email";
 
-        // DISABLE DOM LISTENER
+        // DISABLE DOM LISTENER 
         //document.addEventListener('DOMContentLoaded', () => {
             // 1. Build the form's HTML in memory
             this.formMarkUp += this.renderFormElement(); // Adds opening <form> tag and any hidden inputs
@@ -137,7 +154,7 @@ class Formique extends FormBuilder {
             const formElement = document.getElementById(`${this.formId}`);
             if (formElement) { // Add a check here just in case, although it should now exist
                 formElement.addEventListener('submit', function(event) {
-                    if (this.formSettings.submitMode === 'email') {
+                    if (this.formSettings.submitMode === 'email' || this.formSettings.submitMode === 'rsvp') {
                         event.preventDefault();
                         document.getElementById("formiqueSpinner").style.display = "block";
                         this.handleEmailSubmission(this.formId);
@@ -156,17 +173,20 @@ class Formique extends FormBuilder {
             // Initialize dependency graph and observers after the form is rendered
             this.initDependencyGraph();
             this.registerObservers();
+            this.attachDynamicSelectListeners(); 
 
             // Apply theme
-            if (this.formSettings.theme && this.themes.includes(this.formSettings.theme)) {
+            if (this.themeColor) {
+                this.applyCustomTheme(this.themeColor, this.formContainerId); // <--- NEW: Apply custom theme
+            } else if (this.formSettings.theme && this.themes.includes(this.formSettings.theme)) {
                 let theme = this.formSettings.theme;
                 this.applyTheme(theme, this.formContainerId);
             } else {
-                this.applyTheme('dark', this.formContainerId);
+                // Fallback if no themeColor and no valid theme specified
+                this.applyTheme('dark', this.formContainerId); // Default to 'dark'
             }
-       
-
-        //DISABLE DOM LISTNER
+        
+       // DISABLE DOM LISTENER
         //}); // DOM LISTENER WRAPPER
     
 // CONSTRUCTOR WRAPPER FOR FORMIQUE CLASS
@@ -180,69 +200,69 @@ generateFormId() {
 
 
 initDependencyGraph() {
-  this.dependencyGraph = {};
+    this.dependencyGraph = {};
+
+    this.formSchema.forEach((field) => {
+        const [type, name, label, validate, attributes = {}] = field;
+        const fieldId = attributes.id || name;
+
+        if (attributes.dependents) {
+            // Initialize dependency array for the parent field
+            this.dependencyGraph[fieldId] = attributes.dependents.map((dependentName) => {
+                const dependentField = this.formSchema.find(
+                    ([, depName]) => depName === dependentName
+                );
+
+                if (dependentField) {
+                    const dependentAttributes = dependentField[4] || {};
+                    const dependentFieldId = dependentAttributes.id || dependentName; // Get dependent field ID
+
+                    return {
+                        dependent: dependentFieldId,
+                        condition: dependentAttributes.condition || null,
+                    };
+                } else {
+                    console.warn(`Dependent field "${dependentName}" not found in schema.`);
+                }
+            });
 
-  this.formSchema.forEach((field) => {
-    const [type, name, label, validate, attributes = {}] = field;
-    const fieldId = attributes.id || name;
+            // Add state tracking for the parent field
+            this.dependencyGraph[fieldId].push({ state: null });
 
-    if (attributes.dependents) {
-      // Initialize dependency array for the parent field
-      this.dependencyGraph[fieldId] = attributes.dependents.map((dependentName) => {
-        const dependentField = this.formSchema.find(
-          ([, depName]) => depName === dependentName
-        );
-
-        if (dependentField) {
-          const dependentAttributes = dependentField[4] || {};
-          const dependentFieldId = dependentAttributes.id || dependentName; // Get dependent field ID
-
-          return {
-            dependent: dependentFieldId,
-            condition: dependentAttributes.condition || null,
-          };
-        } else {
-          console.warn(`Dependent field "${dependentName}" not found in schema.`);
+            // Attach the input change event listener to the parent field
+            this.attachInputChangeListener(fieldId);
         }
-      });
-
-      // Add state tracking for the parent field
-      this.dependencyGraph[fieldId].push({ state: null });
-
-      // console.log("Graph", this.dependencyGraph[fieldId]);
-
-      // Attach the input change event listener to the parent field
-      this.attachInputChangeListener(fieldId);
-    }
-
-    // Hide dependent fields initially
-    if (attributes.dependents) {
 
-      attributes.dependents.forEach((dependentName) => {
-        const dependentField = this.formSchema.find(
-          ([, depName]) => depName === dependentName
-        );
-        const dependentAttributes = dependentField ? dependentField[4] || {} : {};
-        const dependentFieldId = dependentAttributes.id || dependentName;
-
-        //alert(dependentFieldId);
-
-        const inputBlock = document.querySelector(`#${dependentFieldId}-block`);
-        //alert(inputBlock);
-        
-
-        if (inputBlock) {
-         // alert(dependentName);
-          inputBlock.style.display = 'none'; // Hide dependent field by default
+        // Hide dependent fields initially and set their required state
+        if (attributes.dependents) {
+            attributes.dependents.forEach((dependentName) => {
+                const dependentField = this.formSchema.find(
+                    ([, depName]) => depName === dependentName
+                );
+                const dependentAttributes = dependentField ? dependentField[4] || {} : {};
+                const dependentFieldId = dependentAttributes.id || dependentName;
+
+                const inputBlock = document.querySelector(`#${dependentFieldId}-block`);
+
+                if (inputBlock) {
+                   inputBlock.style.display = 'none'; // Hide dependent field by default
+                   // Save original required state and set to false
+                   const inputs = inputBlock.querySelectorAll('input, select, textarea');
+                   inputs.forEach((input) => {
+                     // Check if the input was originally required in the schema
+                     if (input.hasAttribute('required') && input.required === true) {
+                       input.setAttribute('data-original-required', 'true'); // Save original required state
+                       input.required = false; // Remove required attribute when hiding
+                     } else {
+                       input.setAttribute('data-original-required', 'false'); // Explicitly mark as not originally required
+                     }
+                   });
+                }
+            });
         }
-      });
-    }
-  });
-
- // console.log("Dependency Graph:", this.dependencyGraph);
+    });
 }
 
-
 // Attach Event Listeners
 attachInputChangeListener(parentField) {
   const fieldElement = document.getElementById(parentField);
@@ -344,6 +364,60 @@ registerObservers() {
 }
 
 
+// --- NEW METHOD FOR DYNAMIC SELECT LISTENERS ---
+attachDynamicSelectListeners() {
+    this.formSchema.forEach(field => {
+        const [type, name, label, validate, attributes = {}] = field;
+
+        if (type === 'dynamicSingleSelect') {
+            const mainSelectId = attributes.id || name;
+            const mainSelectElement = document.getElementById(mainSelectId);
+
+            if (mainSelectElement) {
+                mainSelectElement.addEventListener('change', (event) => {
+                    const selectedCategory = event.target.value; // e.g., 'frontend', 'backend', 'server'
+
+                    // Find all sub-category fieldsets related to this main select
+                    const subCategoryFieldsets = document.querySelectorAll(`.${mainSelectId}-subcategory-group`);
+
+                    subCategoryFieldsets.forEach(fieldset => {
+                        const subSelect = fieldset.querySelector('select'); // Get the actual select element
+                        if (subSelect) {
+                            // Save original required state (if it was true) then set to false if hidden
+                            subSelect.setAttribute('data-original-required', subSelect.required.toString());
+                            subSelect.required = false; // Always set to false when hiding
+                        }
+                        fieldset.style.display = 'none'; // Hide all sub-category fieldsets initially
+                    });
+
+                    // Show the selected sub-category fieldset and manage its required state
+                    const selectedFieldsetId = selectedCategory + '-options'; // Matches the ID format in renderSingleSelectField
+                    const selectedFieldset = document.getElementById(selectedFieldsetId);
+
+                    if (selectedFieldset) {
+                        selectedFieldset.style.display = 'block'; // Show the selected one
+                        const selectedSubSelect = selectedFieldset.querySelector('select');
+                        if (selectedSubSelect) {
+                            // Restore original required state for the visible select
+                            selectedSubSelect.required = selectedSubSelect.getAttribute('data-original-required') === 'true';
+                        }
+                    }
+                });
+
+                // IMPORTANT: Trigger the change listener once on load if a default option is selected
+                // This ensures correct initial visibility and required states if there's a pre-selected main category.
+                // We do this by dispatching a 'change' event programmatically if the select has a value.
+                if (mainSelectElement.value) {
+                    const event = new Event('change');
+                    mainSelectElement.dispatchEvent(event);
+                }
+            } else {
+                console.warn(`Main dynamic select element with ID ${mainSelectId} not found.`);
+            }
+        }
+    });
+}
+
 applyTheme(theme, formContainerId) {
   //const stylesheet = document.querySelector('link[formique-style]');
 
@@ -398,6 +472,67 @@ applyTheme(theme, formContainerId) {
 }
 
 
+
+// New method to apply a custom theme based on a color
+applyCustomTheme(color, formContainerId) {
+    const formContainer = document.getElementById(formContainerId);
+
+    if (!formContainer) {
+        console.error(`Form container with ID "${formContainerId}" not found. Cannot apply custom theme.`);
+        return;
+    }
+
+    // You can add 'formique' class here as well if not already added
+    formContainer.classList.add('formique');
+
+    // Generate a slightly darker shade for the button shadow if needed
+    // This is a simplified example; for robust color manipulation, consider a library
+    const darkenColor = (hex, percent) => {
+        const f = parseInt(hex.slice(1), 16);
+        const t = percent < 0 ? 0 : 255;
+        const p = percent < 0 ? percent * -1 : percent;
+        const R = f >> 16;
+        const G = (f >> 8) & 0x00FF;
+        const B = f & 0x0000FF;
+        return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
+    };
+
+    const shadowColor = darkenColor(color, 0.2); // Darken the theme color by 20% for shadow
+
+    // Define the custom CSS variables, prioritizing the provided color
+    const customCssVars = {
+        '--formique-base-bg': '#ffffff', // Light theme base background
+        '--formique-base-text': '#333333', // Light theme base text
+        '--formique-base-shadow': '0 10px 30px rgba(0, 0, 0, 0.1)', // Light theme shadow
+        '--formique-base-label': '#555555', // Light theme label
+        '--formique-input-border': '#dddddd', // Light theme input border
+        '--formique-focus-color': color, // Set to the provided custom color
+        '--formique-btn-bg': color, // Set to the provided custom color
+        '--formique-btn-text': '#ffffff', // White text for buttons
+        '--formique-btn-shadow': `0 2px 10px ${shadowColor || 'rgba(0, 0, 0, 0.1)'}` // Dynamic button shadow
+    };
+
+    let styleContent = '';
+    for (const [prop, val] of Object.entries(customCssVars)) {
+        styleContent += `  ${prop}: ${val};\n`;
+    }
+
+    // Create a <style> tag for the custom theme
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `
+        #${formContainerId}.formique {
+            ${styleContent}
+        }
+    `;
+
+    // Insert the style element into the head or before the form container
+    formContainer.parentNode.insertBefore(styleElement, formContainer);
+
+    console.log(`Applied custom theme with color: ${color} to form container: ${formContainerId}`);
+}
+
+
+
 // renderFormElement method
     renderFormElement() {
   let formHTML = '<form';
@@ -663,14 +798,14 @@ hasFileInputs(form) {
 
 async handleEmailSubmission(formId) {
   console.log(`Starting email submission for form ID: ${formId}`);
-  
+
   const form = document.getElementById(formId);
   if (!form) {
     console.error(`Form with ID ${formId} not found`);
     throw new Error(`Form with ID ${formId} not found`);
   }
 
-  // Validate required settings - now checks if sendTo is array with at least one item
+  // Validate required settings for 'sendTo'
   if (!Array.isArray(this.formSettings?.sendTo) || this.formSettings.sendTo.length === 0) {
     console.error('formSettings.sendTo must be an array with at least one recipient email');
     throw new Error('formSettings.sendTo must be an array with at least one recipient email');
@@ -680,46 +815,53 @@ async handleEmailSubmission(formId) {
   const payload = {
     formData: {},
     metadata: {
-      recipients: this.formSettings.sendTo, // Now sending array
-      timestamp: new Date().toISOString()
-    }
+      recipients: this.formSettings.sendTo,
+      timestamp: new Date().toISOString(),
+    },
   };
 
   let senderName = '';
   let senderEmail = '';
   let formSubject = '';
+  let registrantEmail = ''; // Variable to store the registrant's email
 
   console.log('Initial payload structure:', JSON.parse(JSON.stringify(payload)));
 
-  // Process form fields (unchanged)
-  new FormData(form).forEach((value, key) => {
+  // Process form fields and find registrant's email
+  const formData = new FormData(form);
+  formData.forEach((value, key) => {
     console.log(`Processing form field - Key: ${key}, Value: ${value}`);
     payload.formData[key] = value;
-    
+
     const lowerKey = key.toLowerCase();
-    if ((lowerKey === 'email' || lowerKey.includes('email'))) {
+    if (lowerKey.includes('email')) {
       senderEmail = value;
     }
-    if ((lowerKey === 'name' || lowerKey.includes('name'))) {
+    if (lowerKey.includes('name')) {
       senderName = value;
     }
-    if ((lowerKey === 'subject' || lowerKey.includes('subject'))) {
+    if (lowerKey.includes('subject')) {
       formSubject = value;
     }
+    
+    // NEW: Check if the current field is the registrant's email
+    if (this.formSettings.emailField && key === this.formSettings.emailField) {
+      registrantEmail = value;
+    }
   });
 
   // Determine the email subject with fallback logic
-  payload.metadata.subject = formSubject || 
-                           this.formSettings.subject || 
-                           'Message From Contact Form';
-  
+  payload.metadata.subject = formSubject ||
+                            this.formSettings.subject ||
+                            'Message From Contact Form';
+
   console.log('Determined email subject:', payload.metadata.subject);
 
   // Add sender information to metadata
   if (senderEmail) {
     payload.metadata.sender = senderEmail;
-    payload.metadata.replyTo = senderName 
-      ? `${senderName} <${senderEmail}>` 
+    payload.metadata.replyTo = senderName
+      ? `${senderName} <${senderEmail}>`
       : senderEmail;
   }
 
@@ -728,54 +870,113 @@ async handleEmailSubmission(formId) {
   try {
     const endpoint = this.formiqueEndpoint || this.formAction;
     const method = this.method || 'POST';
-    
-    console.log(`Preparing to send request to: ${endpoint}`);
+
+    console.log(`Preparing to send primary request to: ${endpoint}`);
     console.log(`Request method: ${method}`);
-    console.log('Final payload being sent:', payload);
+    console.log('Final payload being sent to recipients:', payload);
 
+    // Send the first email to the 'sendTo' recipients
     const response = await fetch(endpoint, {
       method: method,
-      headers: { 
+      headers: {
         'Content-Type': 'application/json',
-        'X-Formique-Version': '1.0' 
+        'X-Formique-Version': '1.0',
       },
-      body: JSON.stringify(payload)
+      body: JSON.stringify(payload),
     });
 
-    console.log(`Received response with status: ${response.status}`);
+    console.log(`Received response for primary email with status: ${response.status}`);
 
     if (!response.ok) {
       const errorData = await response.json().catch(() => ({}));
       console.error('API Error Response:', errorData);
       throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-      document.getElementById("formiqueSpinner").style.display = "none";
-
     }
 
     const data = await response.json();
-    console.log('API Success Response:', data);
-    
-    const successMessage = this.formSettings.successMessage || 
-                         data.message || 
-                         'Your message has been sent successfully!';
+    console.log('Primary API Success Response:', data);
+
+    // ------------------- NEW RSVP LOGIC -------------------
+    if (this.formSettings.submitMode === 'rsvp' && registrantEmail && this.formSettings.registrantMessage) {
+      console.log('RSVP mode detected. Sending confirmation email to registrant.');
+
+      // Create a new payload for the registrant
+      const rsvpPayload = {
+        formData: payload.formData,
+        metadata: {
+          recipients: [registrantEmail], // Send only to the registrant
+          timestamp: new Date().toISOString(),
+          subject: this.formSettings.registrantSubject || 'RSVP Confirmation',
+          body: this.processDynamicMessage(this.formSettings.registrantMessage, payload.formData),
+          sender: this.formSettings.sendFrom || 'noreply@yourdomain.com', 
+          replyTo: this.formSettings.sendFrom || 'noreply@yourdomain.com',
+        },
+      };
+
+      try {
+        console.log('Preparing to send RSVP email. Final payload:', rsvpPayload);
+        const rsvpResponse = await fetch(endpoint, {
+          method: method,
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Formique-Version': '1.0',
+          },
+          body: JSON.stringify(rsvpPayload),
+        });
+
+        if (!rsvpResponse.ok) {
+          const rsvpErrorData = await rsvpResponse.json().catch(() => ({}));
+          console.error('RSVP API Error Response:', rsvpErrorData);
+          // Log the error but don't fail the entire submission since the primary email was sent
+          console.warn('Failed to send RSVP email to registrant, but primary submission was successful.');
+        } else {
+          console.log('RSVP email sent successfully to registrant.');
+        }
+      } catch (rsvpError) {
+        console.error('RSVP email submission failed:', rsvpError);
+        console.warn('Failed to send RSVP email to registrant, but primary submission was successful.');
+      }
+    }
+    // ------------------- END NEW RSVP LOGIC -------------------
+
+    const successMessage = this.formSettings.successMessage ||
+                          data.message ||
+                          'Your message has been sent successfully!';
     console.log(`Showing success message: ${successMessage}`);
 
     this.showSuccessMessage(successMessage);
 
   } catch (error) {
     console.error('Email submission failed:', error);
-    const errorMessage = this.formSettings.errorMessage || 
-                       error.message || 
-                       'Failed to send message. Please try again later.';
+    const errorMessage = this.formSettings.errorMessage ||
+                         error.message ||
+                         'Failed to send message. Please try again later.';
     console.log(`Showing error message: ${errorMessage}`);
     this.showErrorMessage(errorMessage);
+  } finally {
     document.getElementById("formiqueSpinner").style.display = "none";
+  }
+}
 
+
+// Add this method to your Formique class
+processDynamicMessage(message, formData) {
+  let processedMessage = message;
+  // Iterate over each key-value pair in the form data
+  for (const key in formData) {
+    if (Object.prototype.hasOwnProperty.call(formData, key)) {
+      const placeholder = `{${key}}`;
+      // Replace all occurrences of the placeholder with the corresponding form data value
+      processedMessage = processedMessage.split(placeholder).join(formData[key]);
+    }
   }
+  return processedMessage;
 }
 
 
 
+
+
 // Email validation helper
 validateEmail(email) {
   const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
@@ -3402,17 +3603,20 @@ this.renderSingleSelectField(type, name, label, validate, attributes, mainCatego
 
 renderSingleSelectField(type, name, label, validate, attributes, options, subCategoriesOptions, mode) {
 
-console.log("Within");
+    console.log("Within renderSingleSelectField");
     // Define valid validation attributes for select fields
     const selectValidationAttributes = ['required'];
 
     // Construct validation attributes
     let validationAttrs = '';
+    // Store original required state for the main select
+    let originalRequired = false; // <--- This variable tracks if the main select was originally required
     if (validate) {
         Object.entries(validate).forEach(([key, value]) => {
             if (selectValidationAttributes.includes(key)) {
                 if (key === 'required') {
                     validationAttrs += `${key} `;
+                    originalRequired = true; // Mark that it was originally required
                 }
             } else {
                 console.warn(`\x1b[31mUnsupported validation attribute '${key}' for field '${name}' of type '${type}'.\x1b[0m`);
@@ -3423,10 +3627,10 @@ console.log("Within");
     // Handle the binding syntax
     let bindingDirective = '';
     if (attributes.binding) {
-    if (typeof attributes.binding === 'string' && attributes.binding.startsWith('::')) {
-        bindingDirective = ` bind:value="${name}" `;
+        if (typeof attributes.binding === 'string' && attributes.binding.startsWith('::')) {
+            bindingDirective = ` bind:value="${name}" `;
+        }
     }
-  }
 
     // Define attributes for the select field
     let id = attributes.id || name;
@@ -3435,7 +3639,8 @@ console.log("Within");
     // Handle additional attributes
     let additionalAttrs = '';
     for (const [key, value] of Object.entries(attributes)) {
-      if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {            if (key.startsWith('on')) {
+        if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {
+            if (key.startsWith('on')) {
                 // Handle event attributes
                 const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
                 additionalAttrs += `  @${key.replace(/^on/, '')}={${eventValue}}\n`;
@@ -3470,32 +3675,33 @@ console.log("Within");
 
     let inputClass = attributes.class || this.inputClass;
 
-    const onchangeAttr = (mode === 'dynamicSingleSelect' && subCategoriesOptions) ? ' onchange="handleDynamicSingleSelect(this.value,id)"' : '';
-    
+    // Remove `onchange` from HTML; it will be handled by JavaScript event listeners
+    const onchangeAttr = ''; // <--- Ensure this is an empty string
+
     let labelDisplay;
-    let rawLabel; 
+    let rawLabel;
 
     if (mode === 'dynamicSingleSelect' && subCategoriesOptions) {
-      if (label.includes('-')) {
-        const [mainCategoryLabel] = label.split('-');
-        labelDisplay = mainCategoryLabel; 
-        rawLabel = label;
-      } else {
-        labelDisplay = label;
-        rawLabel = label;
-      }
+        if (label.includes('-')) {
+            const [mainCategoryLabel] = label.split('-');
+            labelDisplay = mainCategoryLabel;
+            rawLabel = label;
+        } else {
+            labelDisplay = label;
+            rawLabel = label;
+        }
     } else {
-      labelDisplay = label;
+        labelDisplay = label;
     }
 
 
-    // Construct the final HTML string
+    // Construct the final HTML string for the main select
     let formHTML = `
     <fieldset class="${this.selectGroupClass}" id="${id + '-block'}">
-        <legend>${labelDisplay} 
+        <legend>${labelDisplay}
             ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
         </legend>
-        <label for="${id}"> Select ${labelDisplay} 
+        <label for="${id}"> Select ${labelDisplay}
         <select name="${name}"
             ${bindingDirective}
             ${dimensionAttrs}
@@ -3503,8 +3709,7 @@ console.log("Within");
             class="${inputClass}"
             ${additionalAttrs}
             ${validationAttrs}
-            ${onchangeAttr} 
-        >
+            data-original-required="${originalRequired}" >
             ${selectHTML}
         </select>
     </fieldset>
@@ -3524,122 +3729,89 @@ console.log("Within");
         return `\n${match}\n`;
     }).replace(/\n\s*\n/g, '\n'); // Remove extra blank lines
 
-    //console.log(formattedHtml);
     this.formMarkUp+=formattedHtml;
-    //return formattedHtml;
-
 
-    /* dynamicSingleSelect */
 
-if (mode && mode ==='dynamicSingleSelect' && subCategoriesOptions) {
+    /* dynamicSingleSelect - Sub-Category Generation Block */
 
+    if (mode && mode ==='dynamicSingleSelect' && subCategoriesOptions) {
 
-// Find the target div with id this.formContainerId
-const targetDiv = document.getElementById(this.formContainerId);
+        const categoryId = attributes.id || name; // This is the ID of the main dynamic select ('languages')
 
-let categoryId = attributes.id || name;
+        subCategoriesOptions.forEach(subCategory => {
+            const { id, label, options: subOptions } = subCategory; // Renamed 'options' to 'subOptions' to avoid conflict
 
+            // IMPORTANT: Sub-category selects are *initially hidden*
+            // Therefore, by default, they are NOT required until they are revealed.
+            // If your schema later allows specific sub-categories to be inherently required
+            // when shown, you'd need to extract that validation from your schema here.
+            // For now, they are considered non-required until JavaScript makes them required.
+            let isSubCategoryRequired = false; // Default to false as they are hidden
+            const subCategoryValidationAttrs = ''; // No direct 'required' in HTML initially
 
-if (targetDiv) {
-  // Create a script element
-  const scriptElement = document.createElement('script');
-  scriptElement.textContent = `
-  window.handleDynamicSingleSelect = function(category, fieldsetid) {
-    //console.log("HERE", fieldsetid);
-
-    // Hide all subcategory fields
-    document.querySelectorAll(\`[class*="\${fieldsetid}"]\`).forEach(div => {
-      div.style.display = "none";
-    });
+            // Build the select options HTML for sub-category
+            const subSelectHTML = subOptions.map(option => {
+                const isSelected = option.selected ? ' selected' : '';
+                return `
+                    <option value="${option.value}"${isSelected}>${option.label}</option>
+                `;
+            }).join('');
 
-    // Show the selected category
-    const selectedCategoryFieldset = document.getElementById(category + '-options');
-    if (selectedCategoryFieldset) {
-      selectedCategoryFieldset.style.display = "block";
-    }
-  }
-`;
 
-  // Append the script element to the target div
-  targetDiv.appendChild(scriptElement);
-} else {
-  console.error(`Target div with id "${this.formContainerId}" not found.`);
-}
+            let subCategoryLabel;
+            console.log('Label (rawLabel for sub-category):', rawLabel); // Debug log
 
-subCategoriesOptions.forEach(subCategory => {
-  const { id, label, options } = subCategory;
+            if (rawLabel.includes('-')) {
+                subCategoryLabel = rawLabel.split('-')?.[1] + ' Options';
+            } else {
+                subCategoryLabel = 'options';
+            }
 
-  // Build the select options HTML
-  const selectHTML = options.map(option => {
-    const isSelected = option.selected ? ' selected' : '';
-    return `
-      <option value="${option.value}"${isSelected}>${option.label}</option>
-    `;
-  }).join('');
+            let optionsLabel;
+            if (subCategoryLabel !== 'options') {
+                optionsLabel = rawLabel.split('-')?.[1] + ' Option';
+            } else {
+                optionsLabel  = subCategoryLabel;
+            }
 
 
-    let subCategoryLabel; 
-    console.log('Label:', rawLabel); // Debug log
+            // Create the HTML for the sub-category fieldset and select elements
+            // Added a class based on the main select's ID for easy grouping/selection
+            let subFormHTML = `
+                <fieldset class="${this.selectGroupClass} ${categoryId}-subcategory-group" id="${id}-options" style="display: none;"> <legend>${label} ${subCategoryLabel} ${isSubCategoryRequired && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
+                    </legend>
+                    <label for="${id}"> Select ${label} ${optionsLabel}
+                    </label>
+                    <select name="${id}"
+                        ${bindingDirective}
+                        ${dimensionAttrs}
+                        id="${id}"
+                        class="${inputClass}"
+                        ${additionalAttrs}
+                        ${subCategoryValidationAttrs}
+                        data-original-required="${isSubCategoryRequired}" >
+                        <option value="">Choose an option</option>
+                        ${subSelectHTML}
+                    </select>
+                </fieldset>
+            `.replace(/^\s*\n/gm, '').trim();
+
+            // Apply vertical layout to the <select> element and its children
+            subFormHTML = subFormHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
+                const attributes = p1.trim().split(/\s+/).map(attr => `  ${attr}`).join('\n');
+                return `<select\n${attributes}\n>\n${p2.trim()}\n</select>`;
+            });
 
-    if (rawLabel.includes('-')) {
-      subCategoryLabel = rawLabel.split('-')?.[1] + ' Options'; 
-    } else {
-      subCategoryLabel = 'options';
-    }
+            // Ensure the <fieldset> block starts on a new line and remove extra blank lines
+            subFormHTML = subFormHTML.replace(/(<fieldset\s+[^>]*>)/g, (match) => {
+                return `\n${match}\n`;
+            }).replace(/\n\s*\n/g, '\n');
 
-    let optionsLabel;
-    if (subCategoryLabel !== 'options') {
-      optionsLabel = rawLabel.split('-')?.[1] + ' Option'; 
-    } else {
-    optionsLabel  = subCategoryLabel; 
+            // Append the generated HTML to formMarkUp
+            this.formMarkUp += subFormHTML;
+        });
     }
-
-
-  // Create the HTML for the fieldset and select elements
-  let formHTML = `
-    <fieldset class="${this.selectGroupClass} ${categoryId}" id="${id}-options" style="display: none;">
-        <legend> ${label} ${subCategoryLabel} ${this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-        </legend>
-        <label for="${id}"> Select ${label} ${optionsLabel}           
-        </label>
-        <select name="${id}"
-            ${bindingDirective}
-            ${dimensionAttrs}
-            id="${id + '-block'}"
-            class="${inputClass}"
-            ${additionalAttrs}
-            ${validationAttrs}
-        >
-            <option value="">Choose an option</option>
-            ${selectHTML}
-        </select>
-    </fieldset>
-  `.replace(/^\s*\n/gm, '').trim();
-
-  // Apply vertical layout to the <select> element and its children
-  formHTML = formHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
-    // Reformat attributes into a vertical layout
-    const attributes = p1.trim().split(/\s+/).map(attr => `  ${attr}`).join('\n');
-    return `<select\n${attributes}\n>\n${p2.trim()}\n</select>`;
-  });
-
-  // Ensure the <fieldset> block starts on a new line and remove extra blank lines
-  formHTML = formHTML.replace(/(<fieldset\s+[^>]*>)/g, (match) => {
-    // Ensure <fieldset> starts on a new line
-    return `\n${match}\n`;
-  }).replace(/\n\s*\n/g, '\n'); // Remove extra blank lines
-
-  // Append the generated HTML to formMarkUp
-  this.formMarkUp += formHTML;
-
-  //return formHTML;
-});
-
-
 }
-}
-
-
 
 renderMultipleSelectField(type, name, label, validate, attributes, options) {
   // Define valid validation attributes for multiple select fields
@@ -4022,3 +4194,12 @@ const spinner = `<div id="formiqueSpinner" style="display: flex; align-items: ce
 export default Formique;
 
 
+
+
+
+
+
+
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formique/semantq",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Formique is a native form builder for the Semantq JS Framework",
   "main": "formique-semantq.js",
   "type": "module",