formique 1.0.5 → 1.0.7

package/README.md

@@ -1,14 +1,17 @@
 # Formique
 
-<!-- <img src="https://github.com/thincmedia/anyGridJs/blob/main/images/anyGridJs_Example.png" alt="anyGridJs Example"> --> 
+<img src="https://github.com/Gugulethu-Nyoni/formique/blob/main/images/formique-js-form-builder-anyframework.png" alt="Formique JS Form Builder Example">
 
 
-Formique: A lightweight, declarative JavaScript syntax library for generating WCAG acceAccessibility compliant forms. Suited for vanilla js and Semantq JS framework. Formique simplifies the process of creating and managing forms with a variety of input types, built-in validation, and customizable attributes. Open-source &amp; MIT licensed.
+Formique is a robust and elegant WCAG and ARIA compliant form-building library tailored for JavaScript enthusiasts. It supports a wide array of input types, features JS-driven themes, and offers advanced functionalities like nested conditional logic and dynamic dropdowns. Highly customizable and extensible, Formique is built for the Semantq JS Framework but seamlessly integrates with Vanilla JS, React, Vue, Angular, and Svelte.
 
 
-## Accessibility Compliance
+Formique is Open-source &amp; MIT licensed.
 
-Formique is designed with a laser focus on usability and accessibility, ensuring that the generated form HTML markup meets the highest standards of web accessibility, such as the Web Content Accessibility Guidelines (WCAG) 2.1.
+
+## Accessibility Compliance - 
+
+Formique is designed with a laser focus on WAI-ARIA and WCAG usability and accessibility, ensuring that the generated form HTML markup meets the highest standards of web accessibility.
 
 With minimal declarative form input definitions, Formique takes care of the rest to ensure the final markup is comprehensive enough to meet [official](https://www.w3.org/WAI/tutorials/forms/) usability and accessibility standards. 
 
@@ -17,20 +20,30 @@ For more information on the Web Content (Forms) Accessibility Guidelines (WCAG),
 
 ## Key Features
 
-  - Declarative Syntax: Define forms using a simple and intuitive schema.
-  - Wide Range of Inputs: Supports text, email, number, password, date, time, file uploads, and more.
-  - Validation and Attributes: Easily specify validation rules and attributes for each form field.
-  - Dynamic Form Generation: Generate forms dynamically based on your schema.
-  - Framework Agnostic: Currently works Semantq and vanilla JS.
-
-
+- **Declarative Syntax:** Define forms using a simple and intuitive schema.
+- **Wide Range of Inputs:** Supports text, email, number, password, date, time, file uploads, and more.
+- **Validation and Attributes:** Easily specify validation rules and attributes for each form field.
+- **Dynamic Form Generation:** Generate forms dynamically based on your schema.
+- **Framework Agnostic:** Currently works with Semantq and vanilla JS. (More frameworks to be added)
+- **Accessibility and Usability Compliant:** Formique yields form markup compliant with WCAG.
+- **Mobile Responsive:** Forms are mobile responsive out of the box.
+- **Nested Dynamic Conditional Logic:** Implement complex conditional logic to show or hide form fields based on user input.
+- **Dynamic Dropdowns:** Create dropdowns whose options change dynamically based on other field selections.
+- **JavaScript-Driven Themes:** Apply themes dynamically using JavaScript for a customizable user interface.
+- **WAI-ARIA and WCAG-Compliant HTML:** Ensure all form elements are accessible and meet WCAG standards.
+- **Progressive Enhancement:** Forms function with or without JavaScript, ensuring accessibility and functionality across all environments.
 
 ## Why Choose Formique?
 
-   - Vanilla JS: No dependencies; works seamlessly with vanilla JS and Semantq JS framework.(More frameworks to be added)
-   - Lightweight: Minimal footprint optimized for performance.
-   - Customizable: Adapt the library to fit your project's unique needs.
-   - Declarative: Write your forms in JavaScript and define forms with a concise schema for better readability and maintainability.
+- **Vanilla JS:** No dependencies; works seamlessly with vanilla JS and Semantq JS framework. (More frameworks to be added)
+- **Lightweight:** Minimal footprint optimized for performance.
+- **Customizable:** Adapt the library to fit your project's unique needs for functionality and style.
+- **Declarative:** Write your forms in JavaScript and define forms with a concise schema for better readability and maintainability.
+- **Usability and Accessibility Compliant:** You just need to focus on defining form fields data. Formique handles WCAG compliance for you.
+- **Mobile Responsive:** Formique forms are mobile responsive out of the box.
+- **Dynamic Features:** Implement nested conditional logic, dynamic dropdowns, and JavaScript-driven themes to enhance user experience.
+- **Progressive Enhancement:** Forms are designed to function with or without JavaScript, ensuring broad compatibility.
+
 
 
 ## Form Input Types Covered
@@ -55,6 +68,7 @@ For more information on the Web Content (Forms) Accessibility Guidelines (WCAG),
 - Radio: ```html <input type="radio"> ```
 - Checkbox: ```html <input type="checkbox"> ```
 - Select (Single & Multiple): ```html <select> ```
+- Dynamic Single Select: Displays a single-select dropdown of subcategories based on a selected category. For example, it dynamically shows a dropdown of states when a country is selected from a list of countries: ```html <select> ```
 - Submit: ```html <input type="submit"> ```
 
 
@@ -65,8 +79,7 @@ For more information on the Web Content (Forms) Accessibility Guidelines (WCAG),
 The form schema is an array of field definitions. Each field is defined by an array containing:
 - Input definition (required)
 - Input validation (optional)
-- Input attributes (optional)
-- Binding syntax (optional)
+- Input attributes (optional, including binding attribute (optional)
 - Options (applicable to single select, multiple select, radio and check box inputs)
 
 ## Input Definition
@@ -77,27 +90,43 @@ The form schema is an array of field definitions. Each field is defined by an ar
 You don't need to use the type, name and label keys to define these parameters.
 **Example Input Definition:**
 
-`{ 'text', 'firstname', 'First Name' }`
+`['text', 'firstname', 'First Name' ]`
 
 In the example above:
- - The first item (text) defines the type of the input - this will yield: `<input type="text"` 
- - The second item (firstname) defines the name value of the input - this will yield: `<input name="firstname"`
+ - The first item (text) defines the type of the input - this will yield: `<input type="text" ...` 
+ - The second item (firstname) defines the name value of the input - this will yield: `<input name="firstname" ...`
  - The third item (First Name) defines the Label value- this will yield:  `<label for="firstname">First Name</label>`
+ - Final html output will be:
 
+ ```html
+ <div class="input-block" id="firstname-block">
+      <label for="firstname">First Name</label>
+      <input type="text" name="firstname" id="firstname" class="form-input" placeholder="First
+  Name">
+    </div>
+ ```
 
 
 ## Input Validation
 - **Validation**: Object specifying validation rules. This can include:
   - **Required**: Boolean to specify if the field is mandatory.
     - Example: `required: true`
-  - **MinLength**: Specifies the minimum number of characters allowed.
+  - **Minlength**: Specifies the minimum number of characters allowed.
     - Example: `minlength: 5`
-  - **MaxLength**: Specifies the maximum number of characters allowed.
+  - **Maxlength**: Specifies the maximum number of characters allowed.
     - Example: `maxlength: 50`
   - **Pattern**: A regex pattern the input must match.
     - Example: `pattern: "/^[A-Za-z0-9]+$/"`
 
-**Formique will filter out any invalid validation defined and throw warnings on the browser console.E.g. you define min and max validations for a text field Formique will filter these out.**
+  ### Number Field Specific Validation:
+  - **Min**: Specifies the minimum numeric value allowed.
+    - Example: `min: 1`
+  - **Max**: Specifies the maximum numeric value allowed.
+    - Example: `max: 100`
+  - **Step**: Specifies the increment step for numeric values.
+    - Example: `step: 0.01` (for decimal increments)
+
+**Formique will filter out any invalid validation defined and throw warnings on the browser console.E.g. when you define min and max validations (instead of minlength and maxlength) for a text field,  Formique will filter these out.**
 
 
 ## Input Attributes
@@ -105,8 +134,12 @@ In the example above:
   - Example: `{ id: 'username', class: 'form-input', style: 'font-size: 13px;' }`
 
 ## Binding
-- **Binding**: Optional binding syntax for dynamic data. It can use `bind:value` or `::inputName`.
-  - Example: `'bind:value'` or `'::inputName'`  - inputName must be the value defined as the input name (second item) in the input definition object. 
+
+- **Binding:** Optional binding syntax for dynamic data. The binding object has been moved to the attributes object, allowing for inclusion directly within the attributes. Two syntax formats are supported:
+  - `binding: '::nameOfField'`
+  - `binding: 'bind-value'`
+  - Example: `'::inputName'` or `'bind-value'`  
+    *Note:* `inputName` must be the value defined as the input name (the second item) in the input definition object.
 
 ## Options
 - **Options**: For singleSelect,, multipleSelect, radio, and checkbox inputs. This is an array of options, each with a `value` and `label`.
@@ -122,90 +155,110 @@ In the example above:
 
 ## Installation
 
-There are two ways to install and use Formique in your project:
+There are two primary ways to install and use Formique in your project: 
 
-## Option A: Use Formique as a Universal Module Definition (UMD) Module
+### Option A: Use Formique in a Browser Context (No Bundler Required)
 
-1. Include the CSS and JavaScript in the head section of your HTML file:
+1. **Include the CSS** in the head section of your HTML file:
 
     ```html
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formique-css@1.0.1/formique.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formique-css@1.0.1/formique.min.css" formique-style>
     ```
 
-2. Insert the js script tag just before the closing tag ```html </body> ``` of your html file.
+2. **Include the JavaScript** before the closing `</body>` tag of your HTML file:
 
     ```html
-    <script src="https://cdn.jsdelivr.net/npm/formique@1.0.1/formique.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/formique@1.0.1/formique.mjs.js"></script>
     ```
-## Usage Example
 
-1. Define the form container somewhere in the html body: 
+### Usage Example:
 
-```html
-<div id="formique"></div>
-```
+1. Define the form container somewhere in the HTML body:
 
+    ```html
+    <div id="formique"></div>
+    ```
 
-2. Define your form parameters (formParams), form schema (formSchema) and then initialize Formique in script which should go below this script tag: 
+    Alternatively, you can use a different container ID by setting `containerId: 'someelementid'` in the `formSettings` object.
 
+2. Define your `formParams`, `formSchema`, and initialize Formique in a `<script>` block (placed below the previous script tag):
 
-```html
-    <script src="https://cdn.jsdelivr.net/npm/formique@1.0.1/formique.umd.js"></script>
-
+    ```html
     <script>
+        const formSchema = [
+            ['text', 'name', 'Name', { required: true }, {}],
+            ['email', 'email', 'Email', { required: true }, {}],
+            ['singleSelect', 'diet', 'Dietary Requirements', { required: true }, {}, [
+                { value: 'gluten-free', label: 'Gluten-free' },
+                { value: 'vegetarian', label: 'Vegetarian' },
+                // Additional options here...
+            ]],
+            ['submit', 'submitButton', 'Submit']
+        ];
+
         const formParams = {
             method: 'post',
             action: 'submit.js',
             id: 'myForm',
             class: 'form',
-            semantq: true,
             style: 'width: 100%; font-size: 14px;'
         };
 
-        const formSchema = [
-            ['text', 'name', 'Name', { required: true }, {}, ''],
-            ['email', 'email', 'Email', { required: true }, {}, ''],
-            [
-                'singleSelect', 'diet', 'Dietary Requirements', {required: true}, {}, '', 
-                [
-                    {value: 'gluten-free', label: 'Gluten-free'},
-                    {value: 'dairy-free', label: 'Dairy-free'},
-                    {value: 'keto', label: 'Ketogenic'},
-                    {value: 'low-carb', label: 'Low-carb'},
-                    {value: 'pescatarian', label: 'Pescatarian'},
-                    {value: 'halal', label: 'Halal'},
-                    {value: 'kosher', label: 'Kosher'},
-                    {value: 'vegetarian', label: 'Vegetarian'},
-                    {value: 'lacto-ovo-vegetarian', label: 'Lacto-ovo-vegetarian'},
-                    {value: 'raw-food', label: 'Raw food'},
-                    {value: 'macrobiotic', label: 'Macrobiotic'},
-                    {value: 'flexitarian', label: 'Flexitarian'}
-                ]
-            ],
-            ['submit', 'submitButton', 'Submit', {}, {}, '']
-        ];
+        const formSettings = {
+            requiredFieldIndicator: true,
+            framework: 'semantq',
+            placeholders: true,
+            containerid: 'form-div'
+        };
 
+        // Initialize the form
+        const form = new Formique(formSchema, formParams, formSettings);
+    </script>
+    ```
 
-       (function(formParams, formSchema) {
-        const form = new Formique(formParams, formSchema);
-        const formHTML = form.renderFormHTML();
-        })(formParams, formSchema);
+    **Note:** You can also use this instantiation with just the `formSchema`, leaving out the `formParams` and `formSettings`. This will apply the default dark theme and render the form inputs without the surrounding `<form>` element.
 
-    </script> 
-```
+---
 
-## Option B: Use Formique as an ESM Module
+### Option B: Use Formique in a Node.js (Bundler) Environment
 
-1. Install Formique via npm:
+1. **Install Formique via npm:**
 
     ```bash
     npm install formique
     ```
 
+2. **Import and Use Formique in Your JavaScript File:**
+
+    ```javascript
+    import Formique from 'formique';
+
+    const formSchema = [
+        // Define your schema as shown above...
+    ];
+
+    const formParams = {
+        // Optional parameters...
+    };
+
+    const formSettings = {
+        // Optional settings...
+    };
+
+    const form = new Formique(formSchema, formParams, formSettings);
+    ```
+
+---
+
+### Other Formats
+
+Formique is also available in additional formats like **ESM (ES Modules)** and **IIFE (Immediately Invoked Function Expression)** for specific use cases. For most projects, we recommend using **UMD** for browser contexts and **ESM** for Node.js environments. Refer to the Formique CDN for all available formats.
+
+
 2. Include the CSS and import Formique in the head section of your HTML file:
 
     ```html
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formique-css@1.0.1/formique.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formique-css@1.0.1/formique.min.css" formique-style>
     ```
 3. Define form container somewhere in the html body: 
 
@@ -229,10 +282,10 @@ There are two ways to install and use Formique in your project:
         };
 
         const formSchema = [
-            ['text', 'name', 'Name', { required: true }, {}, ''],
-            ['email', 'email', 'Email', { required: true }, {}, ''],
+            ['text', 'name', 'Name', { required: true }],
+            ['email', 'email', 'Email', { required: true }],
             [
-                'singleSelect', 'diet', 'Dietary Requirements', {required: true}, {}, '', 
+                'singleSelect', 'diet', 'Dietary Requirements', {required: true}, {}, 
                 [
                     {value: 'gluten-free', label: 'Gluten-free'},
                     {value: 'dairy-free', label: 'Dairy-free'},
@@ -248,11 +301,11 @@ There are two ways to install and use Formique in your project:
                     {value: 'flexitarian', label: 'Flexitarian'}
                 ]
             ],
-            ['submit', 'submitButton', 'Submit', {}, {}, ''],
+            ['submit', 'submitButton', 'Submit'],
         ];
 
         const form = new Formique(formParams, formSchema);
-        const formHTML = form.renderFormHTML();
+        
 
     </script>
     ```
@@ -273,7 +326,6 @@ const formSchema = [
     'First Name', 
     { minlength: 2, maxlength: 5, required: true, disabled: true }, // Validation options
     { value: "John", id: 'firstNameInput', class: 'form-input', style: 'width: 100%;', oninput: "incrementer()" }, // Attributes
-    '::firstName' // Binding syntax
   ],
 
   // URL Input Field
@@ -282,8 +334,7 @@ const formSchema = [
     'websiteUrl', 
     'Website URL', 
     { required: true }, // Validation options
-    { id: 'websiteUrlInput', class: 'form-control', style: 'width: 100%;' }, // Attributes
-    'bind:value' // Binding syntax
+    { id: 'websiteUrlInput', class: 'form-control', style: 'width: 100%;', binding: 'bind:value'  }
   ],
 
   // Radio Input Field
@@ -292,8 +343,7 @@ const formSchema = [
     'gender', 
     'Gender', 
     { required: true }, // Validation options
-    { id: 'genderRadio', class: 'form-radio-input', style: 'margin-left: 1rem;', onchange: 'actioner()' }, // Attributes
-    '::gender', // Binding syntax
+    { id: 'genderRadio', class: 'form-radio-input', style: 'margin-left: 1rem;', onchange: 'actionFunction()' }
     [
       { value: 'male', label: 'Male' }, // Options
       { value: 'female', label: 'Female' },
@@ -307,8 +357,7 @@ const formSchema = [
     'preferences', 
     'Preferences', 
     { required: true }, // Validation options
-    { id: 'preferencesCheckbox', class: 'form-checkbox-input', style: 'margin-left: 1rem;', onchange: 'submit' }, // Attributes
-    '::preferences', // Binding syntax
+    { id: 'preferencesCheckbox', binding: '::preferences', class: 'form-checkbox-input', style: 'margin-left: 1rem;', onchange: 'submit' }
     [
       { value: 'news', label: 'Newsletter' }, // Options
       { value: 'updates', label: 'Product Updates' },
@@ -322,8 +371,7 @@ const formSchema = [
     'colors', 
     'Colors', 
     { required: true }, // Validation options
-    { id: 'colorsSelect', class: 'form-select-input', style: 'margin-left: 1rem;', onchange: 'trigger' }, // Attributes
-    '::colors', // Binding syntax
+    { id: 'colorsSelect', class: 'form-select-input', style: 'margin-left: 1rem;', onchange: 'trigger' }, // the onchange: 'trigger' format works with (framework: semantq) set in your formSettings object so that the syntax can be transformed as per framework specs 
     [
       { value: 'red', label: 'Red' }, // Options
       { value: 'green', label: 'Green' },
@@ -337,8 +385,7 @@ const formSchema = [
     'colors', // Name/identifier of the field
     'Colors', // Label of the field
     { required: true, min: 2, max: 3 }, // Validation options
-    { id: 'colorsSelect', class: 'form-select-input', style: 'margin-left: 1rem;', onchange: 'alerter' }, // Attributes
-    '::colors', // Binding syntax
+    { id: 'colorsSelect', class: 'form-select-input', style: 'margin-left: 1rem;', onchange: 'alerter' }
     [
       { value: 'red', label: 'Red' }, // Options
       { value: 'green', label: 'Green' },
@@ -352,8 +399,8 @@ const formSchema = [
     'submit',
     'submitButton',
     'Submit',
-    { required: true }, // Validation options
-    { id: 'submitBtn', class: 'form-submit-btn', style: 'margin-top: 1rem;' } // Attributes
+    {}, // Validation options
+    { id: 'submitBtn', class: 'form-submit-btn', style: 'margin-top: 1rem; width: 100%;' } 
   ]
 ];
 
@@ -391,7 +438,7 @@ const formParams = {
   enctype: 'multipart/form-data', // Encoding type for file uploads
   target: '_blank', // Where to open the form result (e.g., '_self', '_blank')
   novalidate: true, // Disable form validation
-  accept_charset: 'UTF-8' // this will be transformed to: accept-charset: 'UTF-8'  Character set for form data
+  accept_charset: 'UTF-8' // this will be transformed to: accept-charset: 'UTF-8' Character set for form data
 };
 ```
 
@@ -584,6 +631,108 @@ By customizing these parameters, you can control various aspects of the form's b
 </div>
 ```
 
+
+## Dynamic Drop-Down Schema
+
+The `dynamicSingleSelect` input type in Formique is used for generating dynamic dropdowns based on predefined options. It allows you to define multi-level select options (e.g., categories and subcategories) that change based on user selections. Below is an example of the schema format for implementing dynamic drop-downs.
+
+
+### Common Use Cases:
+
+- **Country-State Dropdowns**: A common implementation where selecting a country dynamically updates the list of states/provinces.
+- **Product Categories**: A dropdown where the first selection (e.g., a product category) updates the second dropdown to show relevant product subcategories.
+- **Job Roles & Departments**: Selecting a department dynamically shows job roles related to that department (e.g., selecting "IT" shows job roles like "Software Developer", "Network Engineer", etc.).
+- **Course & Subjects**: In educational systems, choosing a course can display relevant subjects or modules available for that course.
+- **Location-Based Services**: When selecting a country or city, a second dropdown can list local services or offices relevant to the location chosen.
+
+
+### Dynamic Drop Downs Schema Definition:
+
+The code below goes into your 
+```javascript
+[
+  'dynamicSingleSelect',       // Input type (required)
+  'languages',                 // Field name (required)
+  'Programming Scope-Programming Languages', // Labels for both primary drop down and secondary (dynamic) drop down seperated by a hyphen - e.g. Country-States
+  { required: true },          // Validation rules (optional) but the curly braces {} must always be included  
+  {},                          // Field attributes (optional) but the curly braces {} must always be included  
+  
+  // Dropdown Options
+  [
+    {
+      id: 'frontend',           // Option group ID (required)
+      label: 'Front End',       // Option group label (required)
+      options: [                // List of options (required)
+        { value: 'javascript', label: 'JavaScript' },
+        { value: 'html', label: 'HTML' },
+        { value: 'css', label: 'CSS' },
+        { value: 'typescript', label: 'TypeScript' },
+        { value: 'semantq', label: 'Semantq' },
+        { value: 'svelte', label: 'Svelte' },
+        { value: 'vue', label: 'Vue' },
+        { value: 'react', label: 'React' },
+        { value: 'angular', label: 'Angular' },
+      ]
+    },
+    {
+      id: 'backend',            // Option group ID (required)
+      label: 'Back End',        // Option group label (required)
+      options: [                // List of options (required)
+        { value: 'nodejs', label: 'Node.js' },
+        { value: 'python', label: 'Python' },
+        { value: 'java', label: 'Java' },
+        { value: 'php', label: 'PHP' },
+        { value: 'ruby', label: 'Ruby' },
+        { value: 'csharp', label: 'C#' },
+        { value: 'golang', label: 'Go' }
+      ]
+    }
+  ]
+]
+```
+
+
+## Nested Conditionality Logic - Schema Definition
+
+Formique allows for dynamic form generation with powerful conditional logic based on the values of other form fields. This allows you to create forms where the options in one field depend on the selection made in another field.
+
+### Key Features:
+- **Dynamic Field Display**: Show or hide fields based on previous selections.
+- **Conditional Logic**: Use conditions such as specific values in other fields to control the availability of options or visibility of fields.
+- **Multiple Dependencies**: Fields can have more than one dependents 
+
+### Schema Definition Example:
+
+The following schema demonstrates how to implement dynamic dropdowns with nested conditional logic in Formique.
+
+```js
+[
+  // Role field - Single Select (required)
+  ['singleSelect', 'role', 'Role', { required: true }, { dependents: ['topic', 'mode'] }, 
+    // in the attributes object of the parent field add dependents (array) by field names to the dependents: item
+    [
+      { value: 'conference attendee', label: 'Conference Attendee' },
+      { value: 'conference presenter', label: 'Conference Presenter' }
+    ]
+  ],
+
+  // Topic field - Text input (dependent on 'role' being 'conference presenter')
+  ['text', 'topic', 'Topic', {}, { dependsOn: 'role', condition: 'conference presenter' }],
+  // in the attributes object of the child field add the dependsOn: 'role' item where the key is dependsOn: and the value is name of the parent field: e.g. 'role in this case'
+  // also add the condition this way:  condition: 'conference presenter' 
+  // you can use the string 'conference presenter' as the condition to be met
+  // so this if the user select Conference Presenter in the role field - then dependents of that field (mode and topic) will be displayed. If the selected is changed to something else that doesn't meet the defined condtion - the dependents will be hidden. 
+
+  // Mode field - Single Select (required, dependent on 'role' being 'conference presenter')
+  ['singleSelect', 'mode', 'Mode', { required: true }, { dependsOn: 'role', condition: (value) => value === 'conference presenter' }, // you can use an arrow function to evaluate the condition - this is useful for more comprex evaluations 
+    [
+      { value: 'physical', label: 'Physical' },
+      { value: 'virtual', label: 'Virtual' }
+    ]
+  ]
+]
+```
+
 ## Styling the Form
 
 Formique provides a set of CSS classes to facilitate the styling of various form elements. The default class names for different form components are as follows:

package/dist/css/formique.css

@@ -0,0 +1,371 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+
+.dark-theme {
+      --background-dark: #0A0A0A;
+      --background-light: #1A1A1A;
+      --text-light: #E5E5E5;
+      --border-color: #333333;
+      --input-background: #1C1C1C;
+      --input-background-disabled: #2A2A2A;
+      --label-color: #999999;
+      --radio-checkbox-accent: #4A90E2;
+      --button-background: #444444;
+      --button-background-hover: #555555;
+      --button-text-color: #E5E5E5;
+      --input-border-color: #444444;
+      --input-border-color-focus: #666666;
+      --secondary-text-color: #B3B3B3;
+    }
+
+
+
+.light-theme {
+    --background-light: #ffffff;
+    --background-dark: #1a1a1a;
+    --text-light: #333333;
+    --border-color: #cccccc;
+    --input-background: #ffffff;
+    --input-background-disabled: #e0e0e0;
+    --label-color: #555555;
+    --radio-checkbox-accent: #4A90E2;
+    --button-background: #888888;
+    --button-background-hover: #666666;
+    --button-text-color: #ffffff;
+    --input-border-color: #cccccc;
+    --input-border-color-focus: #4A90E2;
+    --secondary-text-color: #777777;
+}
+
+.pink-theme {
+    --background-dark: red;
+    --background-light: #05051e;
+    --text-light: #fe8bbb;
+    --border-color: pink;
+    --input-background: #ffffff;
+    --input-background-disabled: #f1f8e9;
+    --label-color: #fe8bbb; /* #c2185b; */
+    --radio-checkbox-accent: #c2185b;
+    --button-background: #c2185b; /*#e91e63;*/ 
+    --button-background-hover: #f01ff0;
+    --button-text-color: #ffffff; 
+    --input-border-color: #05051e;
+    --input-border-color-focus: #c2185b;
+    --secondary-text-color: #880e4f;
+}
+
+
+.light-blue-theme {
+    --background-light: #f0f8ff;
+    --background-dark: #003b5c;
+    --text-light:  #fff;
+    --text-dark:  #000;
+    --border-color: #0077b6;
+    --input-background: #ffffff;
+    --input-background-disabled: #d1e4f4;
+    --label-color: #4a6572; 
+    --radio-checkbox-accent: #0091d3;
+    --button-background: #1e3a8a;
+    --button-background-hover: #0f2a5f;
+    --button-text-color: #ffffff;
+    --input-border-color: #0077b6;
+    --input-border-color-focus: #00aaff;
+    --secondary-text-color: #4f5b62;
+    --dropdown-option-text-color: #003b5c; 
+    --legend-text-color: #1d3557;
+    
+}
+
+
+.indigo-theme {
+    --background-dark: #2c2c2c;
+    --background-light: #3d3d3d;
+    --text-light: #e0e0e0;
+    --border-color: #444;
+    --input-background: #333;
+    --input-background-disabled: #555;
+    --label-color: #7986cb; 
+    --radio-checkbox-accent: #3f51b5;
+    --button-background: #3f51b5;
+    --button-background-hover: #303f9f;
+    --button-text-color: #ffffff;
+    --input-border-color: #3f51b5;
+    --input-border-color-focus: #303f9f;
+    --secondary-text-color: #b3b3b3;
+}
+
+
+
+ 
+.dark-blue-theme {
+    --background-dark: #0a0a0a;
+    --background-light: #1a1a1a;
+    --text-light: #e0e0e0;
+    --border-color: #333;
+    --input-background: #222;
+    --input-background-disabled: #444;
+    --label-color: #81d4fa; 
+    --radio-checkbox-accent: #2196f3;
+    --button-background: #2196f3;
+    --button-background-hover: #1976d2;
+    --button-text-color: #ffffff;
+    --input-border-color: #2196f3;
+    --input-border-color-focus: #1976d2;
+    --secondary-text-color: #b3b3b3;
+}
+
+
+
+
+.dark-orange-theme {
+    --background-dark: #121212;
+    --background-light: #1e1e1e;
+    --text-light: #e0e0e0;
+    --border-color: #333;
+    --input-background: #333;
+    --input-background-disabled: #444;
+    --label-color: #f96743;
+    --radio-checkbox-accent: #f96743;
+    --button-background: #f96743;
+    --button-background-hover: #f24e2e;
+    --button-text-color: #ffffff;
+    --input-border-color: #f96743;
+    --input-border-color-focus: #f24e2e;
+    --secondary-text-color: #b3b3b3;
+}
+
+
+.green-theme {
+    --background-dark: #001700;
+    --background-light: #011f01;
+    --text-light: #e0e0e0;
+    --border-color: #333;
+    --input-background: #333;
+    --input-background-disabled: #444;
+    --label-color: #4caf50;
+    --radio-checkbox-accent: #4caf50;
+    --button-background: #4caf50;
+    --button-background-hover: #388e3c;
+    --button-text-color: #ffffff;
+    --input-border-color: #4caf50;
+    --input-border-color-focus: #388e3c;
+    --secondary-text-color: #b3b3b3;
+}
+
+
+.purple-theme {
+    --background-dark: #121212;
+    --background-light: #f3e5f5;
+    --text-light: #4a148c;
+    --border-color: #333;
+    --input-background: #ffffff;
+    --input-background-disabled: #f1f8e9;
+    --label-color: #9c27b0;
+    --radio-checkbox-accent: #9c27b0;
+    --button-background: #9c27b0;
+    --button-background-hover: #7b1fa2;
+    --button-text-color: #ffffff;
+    --input-border-color: #9c27b0;
+    --input-border-color-focus: #7b1fa2;
+    --secondary-text-color: #880e4f;
+}
+
+.midnight-blush-theme {
+    --background-light: #05051e;
+    --background-dark: #05051e;
+    --text-light: #ffbd7a;
+    --text-dark: #ffffff;
+    --border-color: #ffbd7a; /* #9e7aff;*/
+    --input-background: #ffffff;
+    --input-background-disabled: #d9d9d9;
+    --label-color: #9e7aff;
+    --radio-checkbox-accent: #fe8bbb;
+    --button-background: #ffbd7a;
+    --button-background-hover: #9e7aff; /*#fe8bbb*/;
+    --button-text-color: #05051e;
+    --input-border-color: #9e7aff;
+    --input-border-color-focus: #fe8bbb;
+    --secondary-text-color: #ffbd7a;
+    --dropdown-option-text-color: #05051e;
+    --legend-text-color: #9e7aff;
+}
+
+
+
+
+
+/* Formique Container */
+.formique {
+    max-width: 600px;
+    margin: auto;
+    padding: 1rem;
+    background: var(--background-light);
+    border-radius: 8px;
+    color: var(--text-light);
+    /*font-family: 'Montserrat', sans-serif;*/
+    font-family: 'Lato', sans-serif;
+    margin-bottom: 200px;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
+}
+
+/* Input Block Styling */
+.formique .input-block {
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.formique .input-block label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--label-color);
+}
+
+.formique .input-block .form-input,
+.formique .input-block .form-control {
+    width: 100%;
+    padding: 0.75rem 1rem 0.75rem 2.5rem;
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+    border-radius: 0;
+    background-color: var(--background-light);
+    color: var(--text-light);
+    box-sizing: border-box;
+    font-size: 1rem;
+}
+
+
+.formique .input-block .form-input:focus {
+    outline: none;
+    border-bottom: 1px solid var(--button-background); 
+}
+
+
+.formique .input-block .form-input-icon {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--label-color);
+}
+
+/* Input Disabled */
+.formique .input-block .form-input:disabled {
+    background-color: var(--input-background-disabled);
+    cursor: not-allowed;
+    border-bottom: 1px solid var(--label-color); 
+}
+
+/* Fieldset Styling for Radio, Checkbox, and Select Groups */
+.formique .radio-group,
+.formique .checkbox-group,
+.formique .form-select {
+    margin-bottom: 1rem;
+    padding: 1rem 0;
+    border-radius: 8px;
+    background-color: transparent;
+    border: 1px solid var(--border-color);
+}
+
+/* Radio and Checkbox Group Styling */
+.formique .radio-group legend,
+.formique .checkbox-group legend {
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+    color: var(--label-color);
+}
+
+.formique .radio-group div,
+.formique .checkbox-group div {
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.formique .radio-group .form-radio-input,
+.formique .checkbox-group .form-checkbox-input {
+    margin-right: 0.5rem;
+    accent-color: var(--radio-checkbox-accent);
+}
+
+/* Select Styling */
+.formique .form-select {
+    margin-bottom: 1rem;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    background-color: transparent;
+    border: 1px solid var(--border-color); /* Reduced thickness */
+}
+
+.formique .form-select legend {
+    color: var(--legend-text-color);
+}
+
+.formique .form-select select option {
+    background-color: #000!important;
+}
+
+/* Label for Select */
+.formique .form-select label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--label-color);
+}
+
+/* The Select Input Styling */
+.formique .form-select select {
+    width: 100%;
+    padding: 0.75rem 1rem 0.75rem 2.5rem;
+    border: none;
+    background-color: transparent;
+    color: var(--legend-text-color);
+    font-size: 1rem;
+    box-sizing: border-box;
+}
+
+/* Focus Effect for Select */
+.formique .form-select select:focus {
+    outline: none;
+}
+
+/* Icon for Select, Radio, and Checkbox Inputs */
+.formique .radio-group .form-radio-input + label,
+.formique .checkbox-group .form-checkbox-input + label {
+    margin-left: 0.5rem;
+}
+
+.formique .radio-group label,
+.formique .checkbox-group label {
+    color: var(--label-color);
+    font-weight: normal;
+}
+
+.formique .form-select .form-select-icon {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--label-color);
+}
+
+.formique .radio-group div,
+.formique .checkbox-group div {
+    padding-left: 2.5rem;
+}
+
+
+.formique .form-submit-btn {
+    padding: 0.75rem 1.5rem;
+    border: 1px solid var(--background-light);
+    border-radius: 4px;
+    background-color: var(--button-background); 
+    color: var(--button-text-color); 
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.formique .form-submit-btn:hover {
+    background-color: var(--button-background-hover);
+    color: var(--button-text-color); 
+}
+

package/formique.umd.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).Formique=n()}(this,(function(){"use strict";class e{renderField(e,n,t,i,s,l){throw new Error("Method renderField must be implemented")}}return class extends e{constructor(e,n={},t={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=t.formContainerId||"formique",this.formAction=n.action||"https://httpbin.org/post",this.method=n.method.toUpperCase()||"POST",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","light-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId);document.getElementById(`${this.formParams.id}`).addEventListener("submit",(e=>{this.formSettings.submitOnPage&&(e.preventDefault(),this.handleOnPageFormSubmission(this.formParams.id))}))})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...t},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]||{};return{dependent:t.id||e,condition:t.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),t=(n&&n[4]||{}).id||e,i=document.querySelector(`#${t}-block`);i&&(i.style.display="none")}))}))}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const t=n.target.value;this.handleParentFieldChange(e,t)}))}handleParentFieldChange(e,n){const t=this.dependencyGraph[e];t&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),t.forEach((e=>{if(e.dependent){const t=e.dependent+"-block",i=document.getElementById(t);if(i){const t="function"==typeof e.condition?e.condition(n):n===e.condition;i.style.display=t?"block":"none";i.querySelectorAll("input, select, textarea").forEach((e=>{t?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${t} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(t))}))}}}))}))}applyTheme(e,n){const t=document.querySelector("link[formique-style]");t?fetch(t.href).then((e=>e.text())).then((t=>{const i=t.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!i)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=i[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const t=document.createElement("style");t.textContent=`\n          #${n} {\n            ${s}\n          }\n        `,l.parentNode.insertBefore(t,l)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[t,i]of Object.entries(n))if(null!=i)if("boolean"==typeof i)i&&(e+=`  ${t}\n`);else{e+=`  ${"accept_charset"===t?"accept-charset":t.replace(/_/g,"-")}="${i}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,t,i,s,l={},r]=e;return this.renderField(n,t,i,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,t,i,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password: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,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,t,i,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}handleOnPageFormSubmission(e){const n=document.getElementById(e);if(n){const e=new FormData(n);fetch(this.formAction,{method:this.method,body:e}).then((e=>e.json())).then((e=>{console.log("Success:",e);const n=document.getElementById(this.formContainerId);if(n){const e=document.createElement("div");e.classList.add("success-message","message-container"),e.innerHTML=this.formSettings.successMessage||"Your details have been successfully submitted!",n.innerHTML="",n.appendChild(e)}})).catch((e=>{console.error("Error:",e);const n=document.getElementById(this.formContainerId);if(n){let t=n.querySelector(".error-message");t&&t.remove();const i=document.createElement("div");i.classList.add("error-message","message-container");let s=this.formSettings.errorMessage||"An error occurred while submitting the form. Please try again.";s=`${s}<br/>Details: ${e.message}`,i.innerHTML=s,n.appendChild(i)}}))}}renderTextField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}      />\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'email'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n        ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}\n\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,t,i,s){const l=["required","min","max","step"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,t,i,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else switch(t){case"min":case"max":case"step":r+=`  ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else switch(t){case"min":case"max":case"step":r+=`  ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else if("pattern"===t)r+=`  ${t}="${i}"\n`;else l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else if("pattern"===t)r+=`  ${t}="${i}"\n`;else l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,t,i,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=`  ${t}\n`:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,t,i,s){const l=["required","accept","multiple","disabled","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=`  ${t}\n`:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,t,i,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)&&"boolean"==typeof i&&i?r+=`  ${t}\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n    <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"accept"===t?r+=`accept="${i}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(t)?r+=`${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+=`${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+="boolean"==typeof i&&i?`  ${t}\n`:`  ${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${o}\n        ${r}\n        ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([e,t])=>{if(r.includes(e))if("boolean"==typeof t&&t)a+=`  ${e}\n`;else if("required"===e)a+=`  ${e}\n`;else r.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`);else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((t=>`\n            <div>\n                <input \n                    type="${e}" \n                    name="${n}" \n                    value="${t.value}"\n                    ${d} \n                    ${c}\n                    ${s.id,`id="${o}-${t.value}"`}\n                    class="${$}"\n                    ${a}\n                />\n                <label \n                    for="${s.id,`${o}-${t.value}`}">\n                    ${t.label}\n                </label>\n            </div>\n            `)).join(""));let m=`\n    <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n        <legend>\n        ${t} \n        ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        ${p}\n    </fieldset>\n    `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`));m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderCheckboxField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t&&(a+=`${t}\n`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const t=`${c}-${e.value}`;return`\n        <div>\n          <input \n          type="checkbox" \n          name="${n}" \n          value="${e.value}"${d} ${$}\n            ${s.id,`id="${t}"`}\n            class="${o}"\n          />\n          <label \n          for="${t}">\n            ${e.label}\n          </label>\n        </div>\n      `})).join(""));let m=`\n    <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n      <legend>\n      ${t}  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </legend>\n      ${p}\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderDynamicSingleSelectField(e,n,t,i,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,t,i,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,t,i,s,l,r,a){const d=["required"];let o="";i&&Object.entries(i).forEach((([t,i])=>{d.includes(t)?"required"===t&&(o+=`${t} `):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;p+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?p+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let m="";Array.isArray(l)&&(m+='\n        <option value="">Choose an option</option>\n        ',m+=l.map((e=>{const n=e.selected?" selected":"";return`\n            <option value="${e.value}"${n}>${e.label}</option>\n            `})).join(""));let u=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(t.includes("-")){const[e]=t.split("-");h=e,b=t}else h=t,b=t;else h=t;let g=`\n    <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n        <legend>${h} \n            ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${$}"> Select ${h} \n        <select name="${n}"\n            ${c}\n            \n            id="${$}"\n            class="${u}"\n            ${p}\n            ${o}\n            ${f} \n        >\n            ${m}\n        </select>\n    </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let t=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n  window.handleDynamicSingleSelect = function(category, fieldsetid) {\n    //console.log("HERE", fieldsetid);\n\n    // Hide all subcategory fields\n    document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n      div.style.display = "none";\n    });\n\n    // Show the selected category\n    const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n    if (selectedCategoryFieldset) {\n      selectedCategoryFieldset.style.display = "block";\n    }\n  }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:i,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n      <option value="${e.value}"${n}>${e.label}</option>\n    `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n    <fieldset class="${this.selectGroupClass} ${t}" id="${n}-options" style="display: none;">\n        <legend> ${i} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${n}"> Select ${i} ${a}           \n        </label>\n        <select name="${n}"\n            ${c}\n            \n            id="${n+"-block"}"\n            class="${u}"\n            ${p}\n            ${o}\n        >\n            <option value="">Choose an option</option>\n            ${l}\n        </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,t,i,s,l){const r=["required","minlength","maxlength"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t?a+=`${t} `:"minlength"===t?a+=`minlength="${i}" `:"maxlength"===t&&(a+=`maxlength="${i}" `):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n        <option value="${e.value}"${n}>${e.label}</option>\n      `})).join(""));let p;p="class"in s?s.class:this.inputClass;let m=`\n    <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <select name="${n}"\n        ${d}\n        \n        id="${o}"\n        class="${p}"\n        ${c}\n        ${a}\n        multiple\n      >\n        ${$}\n      </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderSubmitButton(e,n,t,i,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n    <input type="${e}"\n      id="${l+"-block"}"\n      class="${r}"\n      value="${t}"\n      ${a}\n    />\n  `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}}}));

package/package.json

@@ -1,17 +1,24 @@
 {
   "name": "formique",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Formique Declarative Form Syntax JavaScript Library",
-  "main": "dist/formique.umd.js",
-  "module": "dist/formique.esm.js",
+  "main": "formique.umd.js", 
+  "module": "formique.mjs",
+  "browser": "formique.umd.js",
   "exports": {
-    ".": "./dist/formique.esm.js"
+    ".": {
+      "require": "./formique.cjs.js",
+      "import": "./formique.mjs",
+      "default": "./formique.umd.js"
+    }
   },
   "files": [
     "dist/*",
     "README.md"
   ],
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
+  "keywords": ["form", "javascript", "forms", "library"],
+  "author": "Gugulethu Nyoni",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {}
 }