@formique/semantq 1.1.0 → 1.1.2

package/formique-semantq.js

@@ -782,51 +782,47 @@ renderForm() {
 
  // renderField method - No change needed here for this issue, but ensure it handles 'submit' type correctly if called directly
     renderField(type, name, label, validate, attributes, options, subOptions = undefined) {
-        const fieldRenderMap = {
-            'text': this.renderTextField,
-            'email': this.renderEmailField,
-            'number': this.renderNumberField,
-            'password': this.renderPasswordField,
-            'textarea': this.renderTextAreaField,
-            'tel': this.renderTelField,
-            'date': this.renderDateField,
-            'time': this.renderTimeField,
-            'datetime-local': this.renderDateTimeField,
-            'month': this.renderMonthField,
-            'week': this.renderWeekField,
-            'url': this.renderUrlField,
-            'search': this.renderSearchField,
-            'color': this.renderColorField,
-            'checkbox': this.renderCheckboxField,
-            'radio': this.renderRadioField,
-            'file': this.renderFileField,
-            'hidden': this.renderHiddenField,
-            'image': this.renderImageField,
-            'singleSelect': this.renderSingleSelectField,
-            'multipleSelect': this.renderMultipleSelectField,
-            'dynamicSingleSelect': this.renderDynamicSingleSelectField,
-            'range': this.renderRangeField,
-            'recaptcha': this.renderRecaptchaField,
-            'submit': this.renderSubmitButton, // Keep this for completeness, but renderSubmitButtonElement will now handle it
-        };
-
-        const renderMethod = fieldRenderMap[type];
+    const fieldRenderMap = {
+        'text': this.renderTextField,
+        'email': this.renderEmailField,
+        'number': this.renderNumberField,
+        'password': this.renderPasswordField,
+        'textarea': this.renderTextAreaField,
+        'tel': this.renderTelField,
+        'date': this.renderDateField,
+        'time': this.renderTimeField,
+        'datetime-local': this.renderDateTimeField,
+        'month': this.renderMonthField,
+        'week': this.renderWeekField,
+        'url': this.renderUrlField,
+        'search': this.renderSearchField,
+        'color': this.renderColorField,
+        'checkbox': this.renderCheckboxField,
+        'radio': this.renderRadioField,
+        'file': this.renderFileField,
+        'hidden': this.renderHiddenField,
+        'image': this.renderImageField,
+        'singleSelect': this.renderSingleSelectField,
+        'multipleSelect': this.renderMultipleSelectField,
+        'dynamicSingleSelect': this.renderDynamicSingleSelectField,
+        'range': this.renderRangeField,
+        'recaptcha': this.renderRecaptchaField,
+        'submit': this.renderSubmitButton,
+    };
 
-        if (renderMethod) {
-            // If the type is 'submit', ensure we use the specific renderSubmitButtonElement
-            // Although, with the filter in renderForm(), this branch for 'submit' type
-            // might not be hit in the primary rendering flow, it's good practice.
-            return renderMethod.call(this, type, name, label, validate, attributes, options,subOptions);
+    const renderMethod = fieldRenderMap[type];
 
-            if (type === 'submit') {
-                return this.renderSubmitButton(type, name, label, validate, attributes, options);
-            }
-            //return renderMethod.call(this, type, name, label, validate, attributes, options);
-        } else {
-            console.warn(`Unsupported field type '${type}' encountered.`);
-            return '';
-        }
+    if (renderMethod) {
+        // IMPORTANT: Pass ALL arguments including subOptions
+        return renderMethod.call(this, type, name, label, validate, attributes, options, subOptions);
+    } else {
+        console.warn(`Unsupported field type '${type}' encountered.`);
+        return '';
     }
+}
+
+
+
 
 
 
@@ -1728,12 +1724,10 @@ if (attributes.binding === 'bind:value' && name) {
 // Textarea field rendering
 
 renderTextAreaField(type, name, label, validate, attributes) {
-  const textInputValidationAttributes = [
-  'required',
-  'minlength',
-  'maxlength',
-  'pattern',
-];
+  const textInputValidationAttributes = ['required', 'minlength', 'maxlength', 'pattern'];
+
+  // 1. Extract content value to place between tags later
+  const textareaValue = attributes.value || '';
 
   // Construct validation attributes
   let validationAttrs = '';
@@ -1743,115 +1737,74 @@ renderTextAreaField(type, name, label, validate, attributes) {
         if (typeof value === 'boolean' && value) {
           validationAttrs += `  ${key}\n`;
         } else {
-          switch (key) {
-            case 'pattern':
-            case 'minlength':
-            case 'maxlength':
-              validationAttrs += `  ${key}="${value}"\n`;
-              break;
-            default:
-              if (!textInputValidationAttributes.includes(key)) {
-              console.warn(`\x1b[31mUnsupported validation attribute '${key}' for field '${name}' of type 'number'.\x1b[0m`);
-               }
-              break;
-          }
+          validationAttrs += `  ${key}="${value}"\n`;
         }
       } else {
-        console.warn(`\x1b[31mUnsupported validation attribute '${key}' for field '${name}' of type 'text'.\x1b[0m`);
+        console.warn(`\x1b[31mUnsupported validation attribute '${key}' for field '${name}' of type 'textarea'.\x1b[0m`);
       }
     });
   }
 
-
-
   // Handle the binding syntax
   let bindingDirective = '';
-  if (attributes.binding) {
-if (attributes.binding === 'bind:value' && name) {
+  if (attributes.binding && name) {
     bindingDirective = `bind:value="${name}"\n`;
   }
-  if (attributes.binding.startsWith('::') && name) {
-   bindingDirective = `bind:value="${name}"\n`;
-  }
-  if (attributes.binding && !name) {
-    console.log(`\x1b[31m%s\x1b[0m`, `You cannot set binding value when there is no name attribute defined in ${name} ${type} field.`);
-    return;
-  }
-  }
-
-
 
-  // Get the id from attributes or fall back to name
   let id = attributes.id || name;
-  // Determine if semanti is true based on formSettings
   const framework = this.formSettings?.framework || false;
 
-  // Construct additional attributes dynamically
+  // Construct additional attributes (excluding internal keys and the 'value' content)
   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')) {
-        // Handle event attributes
-        if (framework === 'semantq') {
-          const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
-          additionalAttrs += `  @${key.replace(/^on/, '')}={${eventValue}}\n`;
-        } else {
-          // Add parentheses if not present
-          const eventValue = value.endsWith('()') ? value : `${value}()`;
-          additionalAttrs += `  ${key}="${eventValue}"\n`;
-        }
+    if (!['id', 'class', 'dependsOn', 'dependents', 'value', 'binding'].includes(key) && value !== undefined) {
+      if (key.startsWith('on')) {
+        const eventValue = value.endsWith('()') ? value : `${value}()`;
+        additionalAttrs += `  ${key}="${eventValue}"\n`;
       } else {
-        // Handle boolean attributes
+        const attrName = key.replace(/_/g, '-');
         if (value === true) {
-          additionalAttrs += `  ${key.replace(/_/g, '-')}\n`;
+          additionalAttrs += `  ${attrName}\n`;
         } else if (value !== false) {
-          // Convert underscores to hyphens and set the attribute
-          additionalAttrs += `  ${key.replace(/_/g, '-')}="${value}"\n`;
+          additionalAttrs += `  ${attrName}="${value}"\n`;
         }
       }
     }
   }
 
+  let inputClass = attributes.class || this.inputClass;
 
+  // Build the raw HTML structure
+  let formHTML = `
+<div class="${this.divClass}" id="${id + '-block'}">
+  <label for="${id}">${label}
+    ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
+  </label>
+  <textarea 
+    name="${name}"
+    ${bindingDirective}
+    id="${id}"
+    class="${inputClass}"
+    ${additionalAttrs}
+    ${validationAttrs}
+    ${(additionalAttrs.includes('placeholder') || attributes.placeholder) ? '' : (this.formSettings.placeholders ? `placeholder="${label}"` : '')}>${textareaValue}</textarea>
+</div>`.replace(/^\s*\n/gm, '').trim();
+
+  // Vertical layout formatting for attributes while preserving content
+  let formattedHtml = formHTML.replace(/<textarea\s+([\s\S]*?)>([\s\S]*?)<\/textarea>/, (match, attrPart, content) => {
+    // Split by whitespace only if it is NOT inside quotes (prevents stacking text/placeholders)
+    const attrs = attrPart.trim()
+      .split(/\s+(?=(?:[^"]*"[^"]*")*[^"]*$)/)
+      .filter(a => a.trim() !== '')
+      .map(attr => `  ${attr.trim()}`)
+      .join('\n');
+
+    return `<textarea\n${attrs}\n>${content}</textarea>`;
+  });
 
-  let inputClass; 
-  if ('class' in attributes) {
-    inputClass = attributes.class; 
-  } else {
-        inputClass = this.inputClass; 
-  }
-
-// Construct the final HTML string for textarea
-let formHTML = `
-    <div class="${this.divClass}" id="${id + '-block'}">
-      <label for="${id}">${label}
-        ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-      </label>
-      <textarea 
-        name="${name}"
-        ${bindingDirective}
-        id="${id}"
-        class="${inputClass}"
-        ${additionalAttrs}
-        ${validationAttrs}
-        ${additionalAttrs.includes('placeholder') ? '' : (this.formSettings.placeholders ? `placeholder="${label}"` : '')}>
-      </textarea>
-    </div>
-`.replace(/^\s*\n/gm, '').trim();
-
-let formattedHtml = formHTML;
-
-// Apply vertical layout to the <textarea> element only
-formattedHtml = formattedHtml.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/, (match, p1) => {
-  // Reformat attributes into a vertical layout
-  const attributes = p1.trim().split(/\s+/).map(attr => `  ${attr}`).join('\n');
-  return `<textarea\n${attributes}\n></textarea>`;
-});
-
-this.formMarkUp += formattedHtml;
-
+  this.formMarkUp += formattedHtml;
 }
 
-
 // New method for rendering tel fields
 renderTelField(type, name, label, validate, attributes) {
   
@@ -3409,97 +3362,7 @@ renderImageField(type, name, label, validate, attributes) {
 
 
 
-// Textarea field rendering
-renderTextAreaField(type, name, label, validate, attributes) {
-  const textAreaValidationAttributes = [
-    'required',
-    'minlength',
-    'maxlength'
-  ];
-
-  // Construct validation attributes
-  let validationAttrs = '';
-  if (validate) {
-    Object.entries(validate).forEach(([key, value]) => {
-      if (textAreaValidationAttributes.includes(key)) {
-        if (typeof value === 'boolean' && value) {
-          validationAttrs += `  ${key}\n`;
-        } else {
-          validationAttrs += `  ${key}="${value}"\n`;
-        }
-      } else {
-        console.warn(`\x1b[31mUnsupported validation attribute '${key}' for field '${name}' of type '${type}'.\x1b[0m`);
-      }
-    });
-  }
-
-  // Handle the binding syntax
-  let bindingDirective = '';
-  if (attributes.binding) {
-    if (attributes.binding === 'bind:value' && name) {
-      bindingDirective = `bind:value="${name}"\n`;
-    }
-    if (attributes.binding.startsWith('::') && name) {
-      bindingDirective = `bind:value="${name}"\n`;
-    }
-    if (attributes.binding && !name) {
-      console.log(`\x1b[31m%s\x1b[0m`, `You cannot set binding value when there is no name attribute defined in ${name} ${type} field.`);
-      return;
-    }
-  }
-
-  // Get the id from attributes or fall back to name
-  let id = attributes.id || name;
-
-  // Construct additional attributes dynamically
-  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')) {
-        const eventValue = value.endsWith('()') ? value : `${value}()`;
-        additionalAttrs += `  ${key}="${eventValue}"\n`;
-      } else {
-        if (value === true) {
-          additionalAttrs += `  ${key.replace(/_/g, '-')}\n`;
-        } else if (value !== false) {
-          additionalAttrs += `  ${key.replace(/_/g, '-')}="${value}"\n`;
-        }
-      }
-    }
-  }
-
-  let inputClass = attributes.class || this.inputClass;
-
-  // Construct the final HTML string
-  let formHTML = `
-    <div class="${this.divClass}" id="${id + '-block'}">
-      <label for="${id}">${label}
-        ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-      </label>
-      <textarea 
-        name="${name}"
-        ${bindingDirective}
-        id="${id}"
-        class="${inputClass}"
-        ${additionalAttrs}
-        ${validationAttrs}
-        ${additionalAttrs.includes('placeholder') ? '' : (this.formSettings.placeholders ? `placeholder="${label}"` : '')}>
-      </textarea>
-    </div>
-`.replace(/^\s*\n/gm, '').trim();
-
-  let formattedHtml = formHTML;
-
-  // Apply vertical layout to the <textarea> element only
-  formattedHtml = formattedHtml.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/, (match, p1) => {
-    const attributes = p1.trim().split(/\s+/).map(attr => `  ${attr}`).join('\n');
-    return `<textarea\n${attributes}\n></textarea>`;
-  });
-
-  this.formMarkUp += formattedHtml;
-}
-
-
+// Radio field rendering
 
 renderRadioField(type, name, label, validate, attributes, options) {
     // Define valid validation attributes for radio fields
@@ -3774,244 +3637,227 @@ renderCheckboxField(type, name, label, validate, attributes, options) {
 /* DYNAMIC SINGLE SELECT BLOCK */
 
 // Function to render the dynamic select field and update based on user selection
-renderDynamicSingleSelectField(type, name, label, validate, attributes, options) {
-  //console.log('DEBUG: renderDynamicSingleSelectField called with options:', options);
-  
-  // Step 1: Extract main categories from options
-  const mainCategoryOptions = options.map(item => {
-    // Use item.id as the value for the main select
-    return {
-      value: item.id,    // ← FIXED: Use id, not value
-      label: item.label,
-      // You can add selected logic if needed
-    };
-  });
-  
-  // Step 2: The nested options ARE your sub-categories!
-  // Transform the structure
-  const subCategoriesOptions = options.map(item => ({
-    id: item.id,           // Same as main category value
-    label: item.label + ' Technologies', // Or customize
-    options: item.options  // The nested options array
-  }));
-  
-  //console.log('Main categories:', mainCategoryOptions);
-  //console.log('Sub categories:', subCategoriesOptions);
-  
-  const mode = 'dynamicSingleSelect';
-  
-  // Pass both to the renderer
-  this.renderSingleSelectField(type, name, label, validate, attributes, mainCategoryOptions, subCategoriesOptions, mode);
-}
-
-renderSingleSelectField(type, name, label, validate, attributes, options, subCategoriesOptions, mode) {
-
-  // 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 {
-        // Removed console.warn
-      }
+renderDynamicSingleSelectField(type, name, label, validate, attributes, options, subOptions) {
+    console.log('DEBUG: renderDynamicSingleSelectField called', { 
+        type, name, label, 
+        options: options ? options.length : 'none',
+        subOptions: subOptions ? subOptions.length : 'none'
     });
-  }
-
-  // Handle the binding syntax
-  let bindingDirective = '';
-  if (attributes.binding) {
-    if (typeof attributes.binding === 'string' && attributes.binding.startsWith('::')) {
-      bindingDirective = ` bind:value="${name}" `;
+    
+    // Check if options exist
+    if (!options || !Array.isArray(options)) {
+        console.warn('Dynamic single select field missing options:', name);
+        options = [];
     }
-  }
-
-  // Define attributes for the select field
-  let id = attributes.id || name;
-  let dimensionAttrs = ''; // No dimension attributes applicable for select fields
-
-  // 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')) {
-        // Handle event attributes
-        const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
-        additionalAttrs += ` @${key.replace(/^on/, '')}={${eventValue}}\n`;
-      } else {
-        // Handle boolean attributes
-        if (value === true) {
-          additionalAttrs += ` ${key.replace(/_/g, '-')}\n`;
-        } else if (value !== false) {
-          // Convert underscores to hyphens and set the attribute
-          additionalAttrs += ` ${key.replace(/_/g, '-')}="${value}"\n`;
+    
+    // Step 1: Extract main categories from options
+    // Options should already be in the correct format from the parser
+    const mainCategoryOptions = options.map(item => {
+        // Handle both string and object formats
+        if (typeof item === 'string') {
+            return {
+                value: item.toLowerCase().replace(/\s+/g, '-'),
+                label: item
+            };
+        } else {
+            // Already an object with value/label
+            return {
+                value: item.value || item.id || item,
+                label: item.label || item.value || item
+            };
         }
-      }
+    });
+    
+    // Step 2: Handle subCategoriesOptions (scenario blocks)
+    let subCategoriesOptions = [];
+    
+    if (subOptions && Array.isArray(subOptions)) {
+        // Use the subOptions exactly as provided by the parser
+        // They should already have the correct structure
+        subCategoriesOptions = subOptions.map(item => {
+            // Ensure each subCategory has the required structure
+            return {
+                id: item.id || item.value || '',
+                label: item.label || item.id || '',
+                options: Array.isArray(item.options) ? item.options : []
+            };
+        });
     }
-  }
+    
+    console.log('Main categories:', mainCategoryOptions);
+    console.log('Sub categories:', subCategoriesOptions);
+    
+    // Pass both to the renderer with the mode flag
+    this.renderSingleSelectField(
+        type, 
+        name, 
+        label, 
+        validate, 
+        attributes, 
+        mainCategoryOptions, 
+        subCategoriesOptions, 
+        'dynamicSingleSelect'
+    );
+}
 
-  // Construct select options HTML based on options
-  let selectHTML = '';
-  if (Array.isArray(options)) {
-    // Add a default option
-    selectHTML += `
-    <option value="">Choose an option</option>
-    `;
 
-    // Add the provided options
-    selectHTML += options.map((option) => {
-      const isSelected = option.selected ? ' selected' : '';
-      return `
-      <option value="${option.value}"${isSelected}>${option.label}</option>
-      `;
-    }).join('');
-  }
 
-  let inputClass = attributes.class || this.inputClass;
 
-  // Remove `onchange` from HTML; it will be handled by JavaScript event listeners
-  const onchangeAttr = ''; // <--- Ensure this is an empty string
 
-  let labelDisplay;
-  let rawLabel;
+renderSingleSelectField(type, name, label, validate, attributes, options, subCategoriesOptions, mode) {
+    // Define valid validation attributes for select fields
+    const selectValidationAttributes = ['required'];
 
-  if (mode === 'dynamicSingleSelect' && subCategoriesOptions) {
-    if (label.includes('-')) {
-      const [mainCategoryLabel] = label.split('-');
-      labelDisplay = mainCategoryLabel;
-      rawLabel = label;
-    } else {
-      labelDisplay = label;
-      rawLabel = label;
+    // Construct validation attributes
+    let validationAttrs = '';
+    let originalRequired = false;
+    if (validate) {
+        Object.entries(validate).forEach(([key, value]) => {
+            if (selectValidationAttributes.includes(key)) {
+                if (key === 'required') {
+                    validationAttrs += `${key} `;
+                    originalRequired = true;
+                }
+            }
+        });
     }
-  } else {
-    labelDisplay = label;
-  }
-
-  // Construct the final HTML string for the main select
-  let formHTML = `
-  <fieldset class="${this.selectGroupClass}" id="${id + '-block'}">
-    <legend>${labelDisplay}
-      ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-    </legend>
-    <label for="${id}"> Select ${labelDisplay}
-    <select name="${name}"
-      ${bindingDirective}
-      ${dimensionAttrs}
-      id="${id}"
-      class="${inputClass}"
-      ${additionalAttrs}
-      ${validationAttrs}
-      data-original-required="${originalRequired}" >
-      ${selectHTML}
-    </select>
-  </fieldset>
-`.replace(/^\s*\n/gm, '').trim();
-
-  // FIXED: Apply vertical layout to the <select> element and its children
-  // Only split on actual attribute boundaries, not within attribute values
-  let formattedHtml = formHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
-    // Use regex to match complete attribute="value" pairs
-    const attributes = p1.match(/(\w+(?:-\w+)*=("[^"]*"|'[^']*'|\w+)|[^=\s]+(?!\s*=))/g) || [];
-    const formattedAttributes = attributes.map(attr => ` ${attr}`).join('\n');
-    return `<select\n${formattedAttributes}\n>\n${p2.trim()}\n</select>`;
-  });
-
-  // Ensure the <fieldset> block starts on a new line and remove extra blank lines
-  formattedHtml = formattedHtml.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
-
-  this.formMarkUp+=formattedHtml;
-
 
-  /* dynamicSingleSelect - Sub-Category Generation Block */
-
-  if (mode && mode ==='dynamicSingleSelect' && subCategoriesOptions) {
-
-    const categoryId = attributes.id || name; // This is the ID of the main dynamic select ('languages')
+    // Handle the binding syntax
+    let bindingDirective = '';
+    if (attributes.binding) {
+        if (typeof attributes.binding === 'string' && attributes.binding.startsWith('::')) {
+            bindingDirective = ` bind:value="${name}" `;
+        }
+    }
 
-    subCategoriesOptions.forEach((subCategory) => {
-      const { id, label, options: subOptions } = subCategory; // Renamed 'options' to 'subOptions' to avoid conflict
+    // Define attributes for the select field
+    let id = attributes.id || name;
+    let dimensionAttrs = '';
 
-      // IMPORTANT: Sub-category selects are *initially hidden*
-      // Therefore, by default, they are NOT required until they are revealed.
-      let isSubCategoryRequired = false; // Default to false as they are hidden
-      const subCategoryValidationAttrs = ''; // No direct 'required' in HTML initially
+    // 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')) {
+                const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
+                additionalAttrs += ` @${key.replace(/^on/, '')}={${eventValue}}\n`;
+            } else {
+                if (value === true) {
+                    additionalAttrs += ` ${key.replace(/_/g, '-')}\n`;
+                } else if (value !== false) {
+                    additionalAttrs += ` ${key.replace(/_/g, '-')}="${value}"\n`;
+                }
+            }
+        }
+    }
 
-      // 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>
+    // Construct select options HTML based on options
+    let selectHTML = '';
+    if (Array.isArray(options) && options.length > 0) {
+        // Add a default option
+        selectHTML += `
+        <option value="">Choose an option</option>
         `;
-      }).join('');
-
-
-      let subCategoryLabel;
-      
-      if (rawLabel.includes('-')) {
-        subCategoryLabel = rawLabel.split('-')?.[1] + ' Options';
-      } else {
-        subCategoryLabel = 'options';
-      }
 
-      let optionsLabel;
-      if (subCategoryLabel !== 'options') {
-        optionsLabel = rawLabel.split('-')?.[1] + ' Option';
-      } else {
-        optionsLabel = subCategoryLabel;
-      }
+        // Add the provided options
+        selectHTML += options.map((option) => {
+            const optionValue = option.value || option;
+            const optionLabel = option.label || option;
+            const isSelected = option.selected ? ' selected' : '';
+            return `
+            <option value="${optionValue}"${isSelected}>${optionLabel}</option>
+            `;
+        }).join('');
+    }
 
+    let inputClass = attributes.class || this.inputClass;
 
-      // 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}" id="${id}" style="display: none;"> <legend>${label} ${subCategoryLabel} ${isSubCategoryRequired && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-          </legend>
-          <label for="${id}"> Select ${label} ${optionsLabel}
-          </label>
-          <select name="${id}"
+    // Construct the final HTML string for the main select
+    let formHTML = `
+    <fieldset class="${this.selectGroupClass}" id="${id + '-block'}">
+        <legend>${label}
+            ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
+        </legend>
+        <label for="${id}"> Select ${label}
+        <select name="${name}"
             ${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();
-
-      // FIXED: Apply the same corrected formatting to sub-category selects
-      subFormHTML = subFormHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
+            ${validationAttrs}
+            data-original-required="${originalRequired}" >
+            ${selectHTML}
+        </select>
+    </fieldset>
+    `.replace(/^\s*\n/gm, '').trim();
+
+    // Format the HTML
+    let formattedHtml = formHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
         const attributes = p1.match(/(\w+(?:-\w+)*=("[^"]*"|'[^']*'|\w+)|[^=\s]+(?!\s*=))/g) || [];
         const formattedAttributes = attributes.map(attr => ` ${attr}`).join('\n');
         return `<select\n${formattedAttributes}\n>\n${p2.trim()}\n</select>`;
-      });
+    });
 
-      // 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');
+    this.formMarkUp += formattedHtml;
 
-      // Append the generated HTML to formMarkUp
-      this.formMarkUp += subFormHTML;
-    });
-  }
-}
+    /* dynamicSingleSelect - Sub-Category Generation Block */
+    if (mode === 'dynamicSingleSelect' && subCategoriesOptions && Array.isArray(subCategoriesOptions) && subCategoriesOptions.length > 0) {
+        const categoryId = attributes.id || name;
+
+        subCategoriesOptions.forEach((subCategory) => {
+            // Skip invalid subCategories
+            if (!subCategory || !subCategory.id) {
+                console.warn('Invalid subCategory in dynamic select:', subCategory);
+                return;
+            }
+
+            const { id, label: subLabel, options: subOptions } = subCategory;
+            
+            // Ensure subOptions is an array
+            const subOptionArray = Array.isArray(subOptions) ? subOptions : [];
+            
+            // Build the select options HTML for sub-category
+            const subSelectHTML = subOptionArray.length > 0 ? 
+                subOptionArray.map(option => {
+                    const optionValue = option.value || option;
+                    const optionLabel = option.label || option;
+                    const isSelected = option.selected ? ' selected' : '';
+                    return `
+                        <option value="${optionValue}"${isSelected}>${optionLabel}</option>
+                    `;
+                }).join('') :
+                '<option value="">No options available</option>';
+
+            // Create the HTML for the sub-category fieldset
+            let subFormHTML = `
+                <fieldset class="${this.selectGroupClass} ${categoryId}" id="${id}" style="display: none;">
+                    <legend>${subLabel || id}</legend>
+                    <label for="${id}"> Select ${subLabel || id}</label>
+                    <select name="${id}"
+                        ${bindingDirective}
+                        ${dimensionAttrs}
+                        id="${id}"
+                        class="${inputClass}"
+                        ${additionalAttrs}
+                        data-original-required="false">
+                        <option value="">Choose an option</option>
+                        ${subSelectHTML}
+                    </select>
+                </fieldset>
+            `.replace(/^\s*\n/gm, '').trim();
+
+            // Format the HTML
+            subFormHTML = subFormHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
+                const attributes = p1.match(/(\w+(?:-\w+)*=("[^"]*"|'[^']*'|\w+)|[^=\s]+(?!\s*=))/g) || [];
+                const formattedAttributes = attributes.map(attr => ` ${attr}`).join('\n');
+                return `<select\n${formattedAttributes}\n>\n${p2.trim()}\n</select>`;
+            });
 
+            this.formMarkUp += subFormHTML;
+        });
+    }
+}
 
 
 renderMultipleSelectField(type, name, label, validate, attributes, options) {