@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/flex/flex.style.js

@@ -12,9 +12,9 @@ export const styles = css `
   .nr-flex {
     display: flex;
     box-sizing: border-box;
-    
+
     /* Theme-aware */
-    color: var(--nuraly-color-text);
+    color: #161616;
   }
 
   /* Inline flex */

package/dist/src/components/form/bundle.js

@@ -1,9 +1,9 @@
-import{css as t,LitElement as i,html as s}from"lit";import{property as e,state as n,customElement as r}from"lit/decorators.js";import{NuralyUIBaseMixin as o}from"@nuralyui/common/mixins";
+import{css as t,html as i,LitElement as e}from"lit";import{property as s,state as n,customElement as r}from"lit/decorators.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const a=t`
+ */const o=t`
   :host {
     display: block;
     width: 100%;
@@ -18,7 +18,7 @@ import{css as t,LitElement as i,html as s}from"lit";import{property as e,state a
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-form-gap, 16px);
+    gap: 16px;
   }
 
   .form-wrapper[disabled] {
@@ -60,7 +60,7 @@ import{css as t,LitElement as i,html as s}from"lit";import{property as e,state a
   /* Responsive design */
   @media (max-width: 768px) {
     .form-wrapper {
-      gap: var(--nuraly-form-gap-mobile, 12px);
+      gap: 12px;
     }
   }
 `
@@ -68,23 +68,35 @@ import{css as t,LitElement as i,html as s}from"lit";import{property as e,state a
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var d,l;!function(t){t.Pristine="pristine",t.Pending="pending",t.Valid="valid",t.Invalid="invalid",t.Submitted="submitted"}(d||(d={})),function(t){t.Idle="idle",t.Submitting="submitting",t.Success="success",t.Error="error"}(l||(l={}));const h={VALIDATION_CHANGED:"nr-form-validation-changed",FIELD_CHANGED:"nr-form-field-changed",SUBMIT_ATTEMPT:"nr-form-submit-attempt",SUBMIT_SUCCESS:"nr-form-submit-success",SUBMIT_ERROR:"nr-form-submit-error",RESET:"nr-form-reset"};
+ */;var a,d;!function(t){t.Pristine="pristine",t.Pending="pending",t.Valid="valid",t.Invalid="invalid",t.Submitted="submitted"}(a||(a={})),function(t){t.Idle="idle",t.Submitting="submitting",t.Success="success",t.Error="error"}(d||(d={}));const h={VALIDATION_CHANGED:"nr-form-validation-changed",FIELD_CHANGED:"nr-form-field-changed",SUBMIT_ATTEMPT:"nr-form-submit-attempt",SUBMIT_SUCCESS:"nr-form-submit-success",SUBMIT_ERROR:"nr-form-submit-error",RESET:"nr-form-reset"},l=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,i,e;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(i=this.designSystemObserver)||void 0===i||i.disconnect(),null===(e=this.mediaQuery)||void 0===e||e.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,i;const e=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return e||((null===(i=window.matchMedia)||void 0===i?void 0:i.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const i=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===i?i:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},c=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},u=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(c())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!c())return!0;let i=!0;for(const e of this.requiredComponents)if(!this.isComponentAvailable(e)){i=!1;const s=new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(e,s):console.error(s.message)}return i}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const i=this.requiredComponents.indexOf(t);i>-1&&this.requiredComponents.splice(i,1)}},v=t=>class extends t{dispatchCustomEvent(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,i){var e;const s=Object.assign(Object.assign({},i),{timestamp:Date.now(),componentName:(null===(e=this.tagName)||void 0===e?void 0:e.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,i){const e=Object.assign({target:i.target||this,value:i.value,originalEvent:i.originalEvent},i);this.dispatchCustomEvent(t,e)}dispatchFocusEvent(t,i){const e=Object.assign({target:i.target||this,value:i.value,focused:i.focused,cursorPosition:i.cursorPosition,selectedText:i.selectedText},i);this.dispatchCustomEvent(t,e)}dispatchValidationEvent(t,i){var e;const s=Object.assign({target:i.target||this,value:i.value,isValid:null!==(e=i.isValid)&&void 0!==e&&e,error:i.error},i);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,i){const e=Object.assign({target:i.target||this,action:i.action,previousValue:i.previousValue,newValue:i.newValue},i);this.dispatchCustomEvent(t,e)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},m=new Set,f=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var u=function(t,i,s,e){return new(s||(s=Promise))(function(n,r){function o(t){try{d(e.next(t))}catch(t){r(t)}}function a(t){try{d(e.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof s?i:new s(function(t){t(i)})).then(o,a)}d((e=e.apply(t,i||[])).next())})};class c{constructor(t){this.host=t,this.fields=new Map,this.validationState=d.Pristine,this.validationPromise=null}registerField(t){var i;const s=t.name||t.getAttribute("name")||`field-${Date.now()}`,e={element:t,name:s,value:t.value,isValid:t.getValidationStatus().isValid,validationMessage:t.validationMessage||"",required:null!==(i=t.required)&&void 0!==i&&i,touched:!1,dirty:!1};this.fields.set(s,e),this.addFieldListeners(t,s)}unregisterField(t){const i=this.fields.get(t);i&&(this.removeFieldListeners(i.element),this.fields.delete(t))}addFieldListeners(t,i){t.addEventListener("nr-validation",t=>this.handleFieldValidation(i,t))}removeFieldListeners(t){}handleFieldValidation(t,i){const s=this.fields.get(t);if(s){if(i&&i.detail)s.isValid=i.detail.isValid||!1,s.validationMessage=i.detail.validationMessage||"";else{const t=s.element.getValidationStatus();s.isValid=t.isValid,s.validationMessage=s.element.validationMessage||""}this.updateFormValidationState()}}updateFormValidationState(){const t=this.getInvalidFields(),i=0===t.length;this.validationState=i?d.Valid:d.Invalid;const s={isValid:i,invalidFields:t,validationErrors:this.buildValidationErrors(),summary:i?"Form is valid":`${t.length} field(s) have errors`};this.dispatchValidationEvent(s)}buildValidationErrors(){const t={};for(const[i,s]of this.fields)!s.isValid&&s.validationMessage&&(t[i]=s.validationMessage);return t}validateForm(){return null!==this.validationPromise||(this.validationState=d.Pending,this.validationPromise=this.performValidation()),this.validationPromise}performValidation(){return u(this,void 0,void 0,function*(){const t=[],i={};for(const[s,e]of this.fields){const n=e.element.getValidationStatus().isValid;e.isValid=n,e.validationMessage=e.element.validationMessage||"",n||(t.push(e),i[s]=e.validationMessage)}const s=0===t.length;this.validationState=s?d.Valid:d.Invalid;const e={isValid:s,invalidFields:t,validationErrors:i,summary:s?"Form is valid":`${t.length} field(s) have errors`};return this.dispatchValidationEvent(e),this.validationPromise=null,e})}getValidationState(){return this.validationState}getFields(){return Array.from(this.fields.values())}getInvalidFields(){return Array.from(this.fields.values()).filter(t=>!t.isValid)}isValid(){return this.validationState===d.Valid&&Array.from(this.fields.values()).every(t=>t.isValid)}focusFirstInvalidField(){const t=Array.from(this.fields.values()).find(t=>!t.isValid);return!(!t||"function"!=typeof t.element.focus)&&(t.element.focus(),!0)}reset(){for(const t of this.fields.values())"clearValidation"in t.element&&"function"==typeof t.element.clearValidation&&t.element.clearValidation(),"value"in t.element&&(t.element.value=""),t.touched=!1,t.dirty=!1,t.isValid=!0,t.validationMessage="";this.validationState=d.Pristine,this.dispatchResetEvent()}dispatchValidationEvent(t){var i,s;null===(s=(i=this.host).dispatchCustomEvent)||void 0===s||s.call(i,h.VALIDATION_CHANGED,{validationResult:t})}dispatchResetEvent(){var t,i;null===(i=(t=this.host).dispatchCustomEvent)||void 0===i||i.call(t,h.RESET,{})}}
+ */
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var v=function(t,i,s,e){return new(s||(s=Promise))(function(n,r){function o(t){try{d(e.next(t))}catch(t){r(t)}}function a(t){try{d(e.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof s?i:new s(function(t){t(i)})).then(o,a)}d((e=e.apply(t,i||[])).next())})};class m{constructor(t){this.host=t,this.submissionState=l.Idle,this.lastSubmissionData=null}getSubmissionState(){return this.submissionState}isSubmitting(){return this.submissionState===l.Submitting}collectFormData(){const t=new FormData,i={},s={};return this.getFormFields().forEach(e=>{const n=e.name||e.getAttribute("name");if(!n)return;const r=e.value;null!=r&&t.append(n,String(r)),i[n]=r,s[n]={element:e,value:r,name:n,type:e.tagName.toLowerCase(),required:e.required||!1,disabled:e.disabled||!1}}),{formData:t,jsonData:i,fields:s}}submitForm(t){return v(this,void 0,void 0,function*(){if(this.isSubmitting())throw new Error("Form is already submitting");try{this.setSubmissionState(l.Submitting);const i=this.host.validationController;if(i){const t=yield i.validateForm();if(!t.isValid)throw i.focusFirstInvalidField(),this.dispatchSubmitAttemptEvent(t),new Error(`Form validation failed: ${t.summary}`)}const s=this.collectFormData();return t&&(Object.assign(s.jsonData,t),Object.entries(t).forEach(([t,i])=>{s.formData.append(t,String(i))})),this.lastSubmissionData=s,this.dispatchSubmitSuccessEvent(s),this.setSubmissionState(l.Success),s}catch(t){throw this.setSubmissionState(l.Error),this.dispatchSubmitErrorEvent(t),t}})}resetSubmission(){this.submissionState=l.Idle,this.lastSubmissionData=null}getLastSubmissionData(){return this.lastSubmissionData}getFormFields(){var t;const i=this.host,s=[],e=["nr-input","nr-select","nr-radio","nr-checkbox","nr-textarea","nr-timepicker","nr-datepicker","input","select","textarea"];e.forEach(t=>{i.querySelectorAll(t).forEach(t=>{(t.name||t.getAttribute("name"))&&s.push(t)})});return((null===(t=i.shadowRoot)||void 0===t?void 0:t.querySelectorAll("slot"))||[]).forEach(t=>{t.assignedElements({flatten:!0}).forEach(t=>{e.forEach(i=>{if(t.matches&&t.matches(i)){const i=t;(i.name||i.getAttribute("name"))&&s.push(i)}t.querySelectorAll(i).forEach(t=>{const i=t;(i.name||i.getAttribute("name"))&&s.push(i)})})})}),s}setSubmissionState(t){var i,s;this.submissionState=t,null===(s=(i=this.host).requestUpdate)||void 0===s||s.call(i)}dispatchSubmitAttemptEvent(t){var i,s;null===(s=(i=this.host).dispatchCustomEvent)||void 0===s||s.call(i,h.SUBMIT_ATTEMPT,{validationResult:t})}dispatchSubmitSuccessEvent(t){var i,s;null===(s=(i=this.host).dispatchCustomEvent)||void 0===s||s.call(i,h.SUBMIT_SUCCESS,{formData:t})}dispatchSubmitErrorEvent(t){var i,s;null===(s=(i=this.host).dispatchCustomEvent)||void 0===s||s.call(i,h.SUBMIT_ERROR,{error:t})}}
+ */
+const p=t=>{class i extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,i=this.tagName.toLowerCase(),e=t.styles;if(e){const t=b(e);t&&function(t,i,e){var s;if(!f.has(t)){const e=new CSSStyleSheet;e.replaceSync(i),f.set(t,e)}const n=f.get(t),r=`doc:${t}`;if(m.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],m.add(r)),e){let i=e;for(;i;){const e=i.getRootNode();if(!(e instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=e.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;m.has(r)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,n],m.add(r)),i=e.host}}}}(i,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(i=>i instanceof Element&&i.getAttribute("slot")===t):[]}}return i.useShadowDom=!1,i};function b(t){return Array.isArray(t)?t.map(t=>b(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var f=function(t,i,s,e){for(var n,r=arguments.length,o=r<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(i,s,o):n(i,s))||o);return r>3&&o&&Object.defineProperty(i,s,o),o},p=function(t,i,s,e){return new(s||(s=Promise))(function(n,r){function o(t){try{d(e.next(t))}catch(t){r(t)}}function a(t){try{d(e.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof s?i:new s(function(t){t(i)})).then(o,a)}d((e=e.apply(t,i||[])).next())})};let b=class extends(o(i)){constructor(){super(...arguments),this.config={validateOnChange:!1,validateOnBlur:!0,showErrorsImmediately:!1,preventInvalidSubmission:!0,resetOnSuccess:!1,validationDelay:300},this.validateOnChange=!1,this.validateOnBlur=!0,this.preventInvalidSubmission=!0,this.resetOnSuccess=!1,this.method="POST",this.enctype="multipart/form-data",this.disabled=!1,this._validationState=d.Pristine,this._submissionState=l.Idle,this.validationController=new c(this),this.submissionController=new m(this),this.handleValidationChanged=t=>{const i=t.detail.validationResult;i&&(this._validationState=i.isValid?d.Valid:d.Invalid)}}get validationState(){return this._validationState}get submissionState(){return this._submissionState}connectedCallback(){super.connectedCallback(),this.setupFormObserver()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFormObserver()}willUpdate(t){super.willUpdate(t),(t.has("validateOnChange")||t.has("validateOnBlur")||t.has("preventInvalidSubmission")||t.has("resetOnSuccess"))&&(this.config=Object.assign(Object.assign({},this.config),{validateOnChange:this.validateOnChange,validateOnBlur:this.validateOnBlur,preventInvalidSubmission:this.preventInvalidSubmission,resetOnSuccess:this.resetOnSuccess}))}firstUpdated(){this.registerExistingFields(),this.setupFormEvents()}setupFormObserver(){const t=new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&this.registerFieldsInElement(t)})})});t.observe(this,{childList:!0,subtree:!0}),this._formObserver=t}cleanupFormObserver(){const t=this._formObserver;t&&t.disconnect()}registerExistingFields(){this.registerFieldsInElement(this)}registerFieldsInElement(t){["nr-input","nr-select","nr-radio","nr-checkbox","nr-textarea","nr-timepicker","nr-datepicker"].forEach(i=>{t.querySelectorAll(i).forEach(t=>{t.getAttribute("name")&&this.validationController.registerField(t)})})}setupFormEvents(){this.addEventListener("submit",this.handleFormSubmit),this.addEventListener("reset",this.handleFormReset),this.addEventListener(h.VALIDATION_CHANGED,this.handleValidationChanged)}handleFormSubmit(t){return p(this,void 0,void 0,function*(){if(t.preventDefault(),!this.disabled)try{const t=yield this.submissionController.submitForm();this.resetOnSuccess&&this.reset(),this.action&&this.performNativeSubmission(t.formData)}catch(t){console.error("Form submission failed:",t)}})}handleFormReset(t){t.preventDefault(),this.reset()}performNativeSubmission(t){const i=document.createElement("form");i.action=this.action,i.method=this.method,i.enctype=this.enctype,this.target&&(i.target=this.target);for(const[s,e]of t.entries()){const t=document.createElement("input");t.type="hidden",t.name=s,t.value=e,i.appendChild(t)}document.body.appendChild(i),i.submit(),document.body.removeChild(i)}validate(){return p(this,void 0,void 0,function*(){return(yield this.validationController.validateForm()).isValid})}submit(t){return p(this,void 0,void 0,function*(){yield this.submissionController.submitForm(t)})}reset(){this.validationController.reset(),this.submissionController.resetSubmission(),this._validationState=d.Pristine,this._submissionState=l.Idle}get isValid(){return this.validationController.isValid()}get isSubmitting(){return this.submissionController.isSubmitting()}getFormData(){return this.submissionController.collectFormData()}getInvalidFields(){return this.validationController.getInvalidFields()}getFieldsValue(t){const i=this.getFormData().jsonData;if(t&&t.length>0){const s={};return t.forEach(t=>{t in i&&(s[t]=i[t])}),s}return i}getFieldValue(t){return this.getFieldsValue()[t]}setFieldsValue(t){Object.entries(t).forEach(([t,i])=>{this.setFieldValue(t,i)})}setFieldValue(t,i){const s=this.validationController.getFields().find(i=>i.name===t);s&&s.element&&(s.element.value=i,s.value=i,s.element.dispatchEvent(new Event("change",{bubbles:!0})))}validateFields(t){return p(this,void 0,void 0,function*(){const i=yield this.validationController.validateForm();if(t&&t.length>0){const s={};if(t.forEach(t=>{i.validationErrors[t]&&(s[t]=i.validationErrors[t])}),Object.keys(s).length>0)throw new Error(JSON.stringify(s));return this.getFieldsValue(t)}if(!i.isValid)throw new Error(JSON.stringify(i.validationErrors));return this.getFieldsValue()})}resetFields(t){if(!t||0===t.length)return void this.reset();const i=this.validationController.getFields();t.forEach(t=>{const s=i.find(i=>i.name===t);s&&s.element&&(s.element.value="",s.value="",s.touched=!1,s.dirty=!1,s.isValid=!0,s.validationMessage="",s.element.dispatchEvent(new Event("change",{bubbles:!0})))})}getFieldError(t){const i=this.validationController.getFields().find(i=>i.name===t);return i&&!i.isValid?i.validationMessage:null}getFieldsError(t){const i=this.validationController.getFields(),s={};return(t?i.filter(i=>t.includes(i.name)):i).forEach(t=>{s[t.name]=t.isValid?null:t.validationMessage}),s}isFieldTouched(t){const i=this.validationController.getFields().find(i=>i.name===t);return!!i&&i.touched}isFieldsTouched(t){const i=this.validationController.getFields();return(t?i.filter(i=>t.includes(i.name)):i).some(t=>t.touched)}isFieldDirty(t){const i=this.validationController.getFields().find(i=>i.name===t);return!!i&&i.dirty}isFieldsDirty(t){const i=this.validationController.getFields();return(t?i.filter(i=>t.includes(i.name)):i).some(t=>t.dirty)}getFieldInstance(t){const i=this.validationController.getFields().find(i=>i.name===t);return i?i.element:null}scrollToField(t){if(t){const i=this.getFieldInstance(t);return!!i&&(i.scrollIntoView({behavior:"smooth",block:"center"}),"function"==typeof i.focus&&i.focus(),!0)}return this.validationController.focusFirstInvalidField()}finish(){return p(this,void 0,void 0,function*(){try{const t=yield this.validateFields();return yield this.submit(),t}catch(t){throw this.scrollToField(),t}})}getFieldsWithErrors(){return this.validationController.getFields().filter(t=>!t.isValid).map(t=>t.name)}hasErrors(){return this.getFieldsWithErrors().length>0}getFormState(){const t=this.validationController.getFields();return{isValid:this.isValid,isSubmitting:this.isSubmitting,hasErrors:this.hasErrors(),errorCount:this.getFieldsWithErrors().length,fieldCount:t.length,touchedFields:t.filter(t=>t.touched).map(t=>t.name),dirtyFields:t.filter(t=>t.dirty).map(t=>t.name),invalidFields:this.getFieldsWithErrors()}}setLoading(t){this.disabled=t,this.requestUpdate()}render(){return s`
-      <form 
+ */var g=function(t,i,e,s){return new(e||(e=Promise))(function(n,r){function o(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof e?i:new e(function(t){t(i)})).then(o,a)}d((s=s.apply(t,i||[])).next())})};class y{constructor(t){this.host=t,this.fields=new Map,this.validationState=a.Pristine,this.validationPromise=null}registerField(t){var i;const e=t.name||t.getAttribute("name")||`field-${Date.now()}`,s={element:t,name:e,value:t.value,isValid:t.getValidationStatus().isValid,validationMessage:t.validationMessage||"",required:null!==(i=t.required)&&void 0!==i&&i,touched:!1,dirty:!1};this.fields.set(e,s),this.addFieldListeners(t,e)}unregisterField(t){const i=this.fields.get(t);i&&(this.removeFieldListeners(i.element),this.fields.delete(t))}addFieldListeners(t,i){t.addEventListener("nr-validation",t=>this.handleFieldValidation(i,t))}removeFieldListeners(t){}handleFieldValidation(t,i){const e=this.fields.get(t);if(e){if(i&&i.detail)e.isValid=i.detail.isValid||!1,e.validationMessage=i.detail.validationMessage||"";else{const t=e.element.getValidationStatus();e.isValid=t.isValid,e.validationMessage=e.element.validationMessage||""}this.updateFormValidationState()}}updateFormValidationState(){const t=this.getInvalidFields(),i=0===t.length;this.validationState=i?a.Valid:a.Invalid;const e={isValid:i,invalidFields:t,validationErrors:this.buildValidationErrors(),summary:i?"Form is valid":`${t.length} field(s) have errors`};this.dispatchValidationEvent(e)}buildValidationErrors(){const t={};for(const[i,e]of this.fields)!e.isValid&&e.validationMessage&&(t[i]=e.validationMessage);return t}validateForm(){return null!==this.validationPromise||(this.validationState=a.Pending,this.validationPromise=this.performValidation()),this.validationPromise}performValidation(){return g(this,void 0,void 0,function*(){const t=[],i={};for(const[e,s]of this.fields){const n=s.element.getValidationStatus().isValid;s.isValid=n,s.validationMessage=s.element.validationMessage||"",n||(t.push(s),i[e]=s.validationMessage)}const e=0===t.length;this.validationState=e?a.Valid:a.Invalid;const s={isValid:e,invalidFields:t,validationErrors:i,summary:e?"Form is valid":`${t.length} field(s) have errors`};return this.dispatchValidationEvent(s),this.validationPromise=null,s})}getValidationState(){return this.validationState}getFields(){return Array.from(this.fields.values())}getInvalidFields(){return Array.from(this.fields.values()).filter(t=>!t.isValid)}isValid(){return this.validationState===a.Valid&&Array.from(this.fields.values()).every(t=>t.isValid)}focusFirstInvalidField(){const t=Array.from(this.fields.values()).find(t=>!t.isValid);return!(!t||"function"!=typeof t.element.focus)&&(t.element.focus(),!0)}reset(){for(const t of this.fields.values())"clearValidation"in t.element&&"function"==typeof t.element.clearValidation&&t.element.clearValidation(),"value"in t.element&&(t.element.value=""),t.touched=!1,t.dirty=!1,t.isValid=!0,t.validationMessage="";this.validationState=a.Pristine,this.dispatchResetEvent()}dispatchValidationEvent(t){var i,e;null===(e=(i=this.host).dispatchCustomEvent)||void 0===e||e.call(i,h.VALIDATION_CHANGED,{validationResult:t})}dispatchResetEvent(){var t,i;null===(i=(t=this.host).dispatchCustomEvent)||void 0===i||i.call(t,h.RESET,{})}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var w=function(t,i,e,s){return new(e||(e=Promise))(function(n,r){function o(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof e?i:new e(function(t){t(i)})).then(o,a)}d((s=s.apply(t,i||[])).next())})};class F{constructor(t){this.host=t,this.submissionState=d.Idle,this.lastSubmissionData=null}getSubmissionState(){return this.submissionState}isSubmitting(){return this.submissionState===d.Submitting}collectFormData(){const t=new FormData,i={},e={};return this.getFormFields().forEach(s=>{const n=s.name||s.getAttribute("name");if(!n)return;const r=s.value;null!=r&&t.append(n,String(r)),i[n]=r,e[n]={element:s,value:r,name:n,type:s.tagName.toLowerCase(),required:s.required||!1,disabled:s.disabled||!1}}),{formData:t,jsonData:i,fields:e}}submitForm(t){return w(this,void 0,void 0,function*(){if(this.isSubmitting())throw new Error("Form is already submitting");try{this.setSubmissionState(d.Submitting);const i=this.host.validationController;if(i){const t=yield i.validateForm();if(!t.isValid)throw i.focusFirstInvalidField(),this.dispatchSubmitAttemptEvent(t),new Error(`Form validation failed: ${t.summary}`)}const e=this.collectFormData();return t&&(Object.assign(e.jsonData,t),Object.entries(t).forEach(([t,i])=>{e.formData.append(t,String(i))})),this.lastSubmissionData=e,this.dispatchSubmitSuccessEvent(e),this.setSubmissionState(d.Success),e}catch(t){throw this.setSubmissionState(d.Error),this.dispatchSubmitErrorEvent(t),t}})}resetSubmission(){this.submissionState=d.Idle,this.lastSubmissionData=null}getLastSubmissionData(){return this.lastSubmissionData}getFormFields(){var t;const i=this.host,e=[],s=["nr-input","nr-select","nr-radio","nr-checkbox","nr-textarea","nr-timepicker","nr-datepicker","input","select","textarea"];s.forEach(t=>{i.querySelectorAll(t).forEach(t=>{(t.name||t.getAttribute("name"))&&e.push(t)})});return((null===(t=i.shadowRoot)||void 0===t?void 0:t.querySelectorAll("slot"))||[]).forEach(t=>{t.assignedElements({flatten:!0}).forEach(t=>{s.forEach(i=>{if(t.matches&&t.matches(i)){const i=t;(i.name||i.getAttribute("name"))&&e.push(i)}t.querySelectorAll(i).forEach(t=>{const i=t;(i.name||i.getAttribute("name"))&&e.push(i)})})})}),e}setSubmissionState(t){var i,e;this.submissionState=t,null===(e=(i=this.host).requestUpdate)||void 0===e||e.call(i)}dispatchSubmitAttemptEvent(t){var i,e;null===(e=(i=this.host).dispatchCustomEvent)||void 0===e||e.call(i,h.SUBMIT_ATTEMPT,{validationResult:t})}dispatchSubmitSuccessEvent(t){var i,e;null===(e=(i=this.host).dispatchCustomEvent)||void 0===e||e.call(i,h.SUBMIT_SUCCESS,{formData:t})}dispatchSubmitErrorEvent(t){var i,e;null===(e=(i=this.host).dispatchCustomEvent)||void 0===e||e.call(i,h.SUBMIT_ERROR,{error:t})}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var S=function(t,i,e,s){for(var n,r=arguments.length,o=r<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(i,e,o):n(i,e))||o);return r>3&&o&&Object.defineProperty(i,e,o),o},E=function(t,i,e,s){return new(e||(e=Promise))(function(n,r){function o(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?n(t.value):(i=t.value,i instanceof e?i:new e(function(t){t(i)})).then(o,a)}d((s=s.apply(t,i||[])).next())})};let O=class extends((t=>u(l(v(p(t)))))(e)){constructor(){super(...arguments),this.config={validateOnChange:!1,validateOnBlur:!0,showErrorsImmediately:!1,preventInvalidSubmission:!0,resetOnSuccess:!1,validationDelay:300},this.validateOnChange=!1,this.validateOnBlur=!0,this.preventInvalidSubmission=!0,this.resetOnSuccess=!1,this.method="POST",this.enctype="multipart/form-data",this.disabled=!1,this._validationState=a.Pristine,this._submissionState=d.Idle,this.validationController=new y(this),this.submissionController=new F(this),this.handleValidationChanged=t=>{const i=t.detail.validationResult;i&&(this._validationState=i.isValid?a.Valid:a.Invalid)}}get validationState(){return this._validationState}get submissionState(){return this._submissionState}connectedCallback(){super.connectedCallback(),this.setupFormObserver()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFormObserver()}willUpdate(t){super.willUpdate(t),(t.has("validateOnChange")||t.has("validateOnBlur")||t.has("preventInvalidSubmission")||t.has("resetOnSuccess"))&&(this.config=Object.assign(Object.assign({},this.config),{validateOnChange:this.validateOnChange,validateOnBlur:this.validateOnBlur,preventInvalidSubmission:this.preventInvalidSubmission,resetOnSuccess:this.resetOnSuccess}))}firstUpdated(){this.registerExistingFields(),this.setupFormEvents()}setupFormObserver(){const t=new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&this.registerFieldsInElement(t)})})});t.observe(this,{childList:!0,subtree:!0}),this._formObserver=t}cleanupFormObserver(){const t=this._formObserver;t&&t.disconnect()}registerExistingFields(){this.registerFieldsInElement(this)}registerFieldsInElement(t){["nr-input","nr-select","nr-radio","nr-checkbox","nr-textarea","nr-timepicker","nr-datepicker"].forEach(i=>{t.querySelectorAll(i).forEach(t=>{t.getAttribute("name")&&this.validationController.registerField(t)})})}setupFormEvents(){this.addEventListener("submit",this.handleFormSubmit),this.addEventListener("reset",this.handleFormReset),this.addEventListener(h.VALIDATION_CHANGED,this.handleValidationChanged)}handleFormSubmit(t){return E(this,void 0,void 0,function*(){if(t.preventDefault(),!this.disabled)try{const t=yield this.submissionController.submitForm();this.resetOnSuccess&&this.reset(),this.action&&this.performNativeSubmission(t.formData)}catch(t){console.error("Form submission failed:",t)}})}handleFormReset(t){t.preventDefault(),this.reset()}performNativeSubmission(t){const i=document.createElement("form");i.action=this.action,i.method=this.method,i.enctype=this.enctype,this.target&&(i.target=this.target);for(const[e,s]of t.entries()){const t=document.createElement("input");t.type="hidden",t.name=e,t.value=s,i.appendChild(t)}document.body.appendChild(i),i.submit(),document.body.removeChild(i)}validate(){return E(this,void 0,void 0,function*(){return(yield this.validationController.validateForm()).isValid})}submit(t){return E(this,void 0,void 0,function*(){yield this.submissionController.submitForm(t)})}reset(){this.validationController.reset(),this.submissionController.resetSubmission(),this._validationState=a.Pristine,this._submissionState=d.Idle}get isValid(){return this.validationController.isValid()}get isSubmitting(){return this.submissionController.isSubmitting()}getFormData(){return this.submissionController.collectFormData()}getInvalidFields(){return this.validationController.getInvalidFields()}getFieldsValue(t){const i=this.getFormData().jsonData;if(t&&t.length>0){const e={};return t.forEach(t=>{t in i&&(e[t]=i[t])}),e}return i}getFieldValue(t){return this.getFieldsValue()[t]}setFieldsValue(t){Object.entries(t).forEach(([t,i])=>{this.setFieldValue(t,i)})}setFieldValue(t,i){const e=this.validationController.getFields().find(i=>i.name===t);e&&e.element&&(e.element.value=i,e.value=i,e.element.dispatchEvent(new Event("change",{bubbles:!0})))}validateFields(t){return E(this,void 0,void 0,function*(){const i=yield this.validationController.validateForm();if(t&&t.length>0){const e={};if(t.forEach(t=>{i.validationErrors[t]&&(e[t]=i.validationErrors[t])}),Object.keys(e).length>0)throw new Error(JSON.stringify(e));return this.getFieldsValue(t)}if(!i.isValid)throw new Error(JSON.stringify(i.validationErrors));return this.getFieldsValue()})}resetFields(t){if(!t||0===t.length)return void this.reset();const i=this.validationController.getFields();t.forEach(t=>{const e=i.find(i=>i.name===t);e&&e.element&&(e.element.value="",e.value="",e.touched=!1,e.dirty=!1,e.isValid=!0,e.validationMessage="",e.element.dispatchEvent(new Event("change",{bubbles:!0})))})}getFieldError(t){const i=this.validationController.getFields().find(i=>i.name===t);return i&&!i.isValid?i.validationMessage:null}getFieldsError(t){const i=this.validationController.getFields(),e={};return(t?i.filter(i=>t.includes(i.name)):i).forEach(t=>{e[t.name]=t.isValid?null:t.validationMessage}),e}isFieldTouched(t){const i=this.validationController.getFields().find(i=>i.name===t);return!!i&&i.touched}isFieldsTouched(t){const i=this.validationController.getFields();return(t?i.filter(i=>t.includes(i.name)):i).some(t=>t.touched)}isFieldDirty(t){const i=this.validationController.getFields().find(i=>i.name===t);return!!i&&i.dirty}isFieldsDirty(t){const i=this.validationController.getFields();return(t?i.filter(i=>t.includes(i.name)):i).some(t=>t.dirty)}getFieldInstance(t){const i=this.validationController.getFields().find(i=>i.name===t);return i?i.element:null}scrollToField(t){if(t){const i=this.getFieldInstance(t);return!!i&&(i.scrollIntoView({behavior:"smooth",block:"center"}),"function"==typeof i.focus&&i.focus(),!0)}return this.validationController.focusFirstInvalidField()}finish(){return E(this,void 0,void 0,function*(){try{const t=yield this.validateFields();return yield this.submit(),t}catch(t){throw this.scrollToField(),t}})}getFieldsWithErrors(){return this.validationController.getFields().filter(t=>!t.isValid).map(t=>t.name)}hasErrors(){return this.getFieldsWithErrors().length>0}getFormState(){const t=this.validationController.getFields();return{isValid:this.isValid,isSubmitting:this.isSubmitting,hasErrors:this.hasErrors(),errorCount:this.getFieldsWithErrors().length,fieldCount:t.length,touchedFields:t.filter(t=>t.touched).map(t=>t.name),dirtyFields:t.filter(t=>t.dirty).map(t=>t.name),invalidFields:this.getFieldsWithErrors()}}setLoading(t){this.disabled=t,this.requestUpdate()}render(){return i`
+      <form
+        part="form"
         action="${this.action||""}"
         method="${this.method.toLowerCase()}"
         enctype="${this.enctype}"
@@ -95,4 +107,4 @@ import{css as t,LitElement as i,html as s}from"lit";import{property as e,state a
       >
         <slot></slot>
       </form>
-    `}};b.styles=a,f([e({type:Object})],b.prototype,"config",void 0),f([e({type:Boolean,attribute:"validate-on-change"})],b.prototype,"validateOnChange",void 0),f([e({type:Boolean,attribute:"validate-on-blur"})],b.prototype,"validateOnBlur",void 0),f([e({type:Boolean,attribute:"prevent-invalid-submission"})],b.prototype,"preventInvalidSubmission",void 0),f([e({type:Boolean,attribute:"reset-on-success"})],b.prototype,"resetOnSuccess",void 0),f([e({type:String})],b.prototype,"action",void 0),f([e({type:String})],b.prototype,"method",void 0),f([e({type:String,attribute:"enctype"})],b.prototype,"enctype",void 0),f([e({type:String})],b.prototype,"target",void 0),f([e({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),f([n()],b.prototype,"_validationState",void 0),f([n()],b.prototype,"_submissionState",void 0),b=f([r("nr-form")],b);export{h as FORM_EVENTS,m as FormSubmissionController,l as FormSubmissionState,c as FormValidationController,d as FormValidationState,b as NrFormElement};
+    `}};O.useShadowDom=!0,O.styles=o,S([s({type:Object})],O.prototype,"config",void 0),S([s({type:Boolean,attribute:"validate-on-change"})],O.prototype,"validateOnChange",void 0),S([s({type:Boolean,attribute:"validate-on-blur"})],O.prototype,"validateOnBlur",void 0),S([s({type:Boolean,attribute:"prevent-invalid-submission"})],O.prototype,"preventInvalidSubmission",void 0),S([s({type:Boolean,attribute:"reset-on-success"})],O.prototype,"resetOnSuccess",void 0),S([s({type:String})],O.prototype,"action",void 0),S([s({type:String})],O.prototype,"method",void 0),S([s({type:String,attribute:"enctype"})],O.prototype,"enctype",void 0),S([s({type:String})],O.prototype,"target",void 0),S([s({type:Boolean,reflect:!0})],O.prototype,"disabled",void 0),S([n()],O.prototype,"_validationState",void 0),S([n()],O.prototype,"_submissionState",void 0),O=S([r("nr-form")],O);export{h as FORM_EVENTS,F as FormSubmissionController,d as FormSubmissionState,y as FormValidationController,a as FormValidationState,O as NrFormElement};

package/dist/src/components/form/controllers/submission.controller.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { FormSubmissionData, FormSubmissionState } from '../form.types.js';
+/**
+ * Controller that handles form submission logic
+ */
+export declare class FormSubmissionController {
+    private host;
+    private submissionState;
+    private lastSubmissionData;
+    constructor(host: any);
+    /**
+     * Get current submission state
+     */
+    getSubmissionState(): FormSubmissionState;
+    /**
+     * Check if form is currently submitting
+     */
+    isSubmitting(): boolean;
+    /**
+     * Collect form data from all registered fields
+     */
+    collectFormData(): FormSubmissionData;
+    /**
+     * Submit form with validation
+     */
+    submitForm(customData?: Record<string, any>): Promise<FormSubmissionData>;
+    /**
+     * Reset submission state
+     */
+    resetSubmission(): void;
+    /**
+     * Get last submission data
+     */
+    getLastSubmissionData(): FormSubmissionData | null;
+    /**
+     * Get all form field elements from the host
+     */
+    private getFormFields;
+    /**
+     * Set submission state and update host
+     */
+    private setSubmissionState;
+    /**
+     * Dispatch submit attempt event
+     */
+    private dispatchSubmitAttemptEvent;
+    /**
+     * Dispatch submit success event
+     */
+    private dispatchSubmitSuccessEvent;
+    /**
+     * Dispatch submit error event
+     */
+    private dispatchSubmitErrorEvent;
+}
+//# sourceMappingURL=submission.controller.d.ts.map

package/dist/src/components/form/controllers/submission.controller.js

@@ -0,0 +1,220 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { FormSubmissionState, FORM_EVENTS } from '../form.types.js';
+/**
+ * Controller that handles form submission logic
+ */
+export class FormSubmissionController {
+    constructor(host) {
+        this.host = host;
+        this.submissionState = FormSubmissionState.Idle;
+        this.lastSubmissionData = null;
+    }
+    /**
+     * Get current submission state
+     */
+    getSubmissionState() {
+        return this.submissionState;
+    }
+    /**
+     * Check if form is currently submitting
+     */
+    isSubmitting() {
+        return this.submissionState === FormSubmissionState.Submitting;
+    }
+    /**
+     * Collect form data from all registered fields
+     */
+    collectFormData() {
+        const formData = new FormData();
+        const jsonData = {};
+        const fields = {};
+        // Get all form field elements
+        const formFields = this.getFormFields();
+        formFields.forEach(element => {
+            const name = element.name || element.getAttribute('name');
+            if (!name)
+                return;
+            const value = element.value;
+            // Add to FormData
+            if (value !== null && value !== undefined) {
+                formData.append(name, String(value));
+            }
+            // Add to JSON data
+            jsonData[name] = value;
+            fields[name] = {
+                element,
+                value,
+                name,
+                type: element.tagName.toLowerCase(),
+                required: element.required || false,
+                disabled: element.disabled || false
+            };
+        });
+        return {
+            formData,
+            jsonData,
+            fields
+        };
+    }
+    /**
+     * Submit form with validation
+     */
+    submitForm(customData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isSubmitting()) {
+                throw new Error('Form is already submitting');
+            }
+            try {
+                this.setSubmissionState(FormSubmissionState.Submitting);
+                // Validate form first
+                const validationController = this.host.validationController;
+                if (validationController) {
+                    const validationResult = yield validationController.validateForm();
+                    if (!validationResult.isValid) {
+                        // Focus first invalid field
+                        validationController.focusFirstInvalidField();
+                        // Dispatch submit attempt event
+                        this.dispatchSubmitAttemptEvent(validationResult);
+                        throw new Error(`Form validation failed: ${validationResult.summary}`);
+                    }
+                }
+                // Collect form data
+                const submissionData = this.collectFormData();
+                // Merge custom data if provided
+                if (customData) {
+                    Object.assign(submissionData.jsonData, customData);
+                    Object.entries(customData).forEach(([key, value]) => {
+                        submissionData.formData.append(key, String(value));
+                    });
+                }
+                this.lastSubmissionData = submissionData;
+                // Dispatch submit success event
+                this.dispatchSubmitSuccessEvent(submissionData);
+                this.setSubmissionState(FormSubmissionState.Success);
+                return submissionData;
+            }
+            catch (error) {
+                this.setSubmissionState(FormSubmissionState.Error);
+                // Dispatch submit error event
+                this.dispatchSubmitErrorEvent(error);
+                throw error;
+            }
+        });
+    }
+    /**
+     * Reset submission state
+     */
+    resetSubmission() {
+        this.submissionState = FormSubmissionState.Idle;
+        this.lastSubmissionData = null;
+    }
+    /**
+     * Get last submission data
+     */
+    getLastSubmissionData() {
+        return this.lastSubmissionData;
+    }
+    /**
+     * Get all form field elements from the host
+     */
+    getFormFields() {
+        var _a;
+        const host = this.host;
+        const fields = [];
+        // Query for all potential form field elements
+        const selectors = [
+            'nr-input',
+            'nr-select',
+            'nr-radio',
+            'nr-checkbox',
+            'nr-textarea',
+            'nr-timepicker',
+            'nr-datepicker',
+            'input',
+            'select',
+            'textarea'
+        ];
+        // Search in light DOM
+        selectors.forEach(selector => {
+            const elements = host.querySelectorAll(selector);
+            elements.forEach((element) => {
+                if (element.name || element.getAttribute('name')) {
+                    fields.push(element);
+                }
+            });
+        });
+        // Search in slotted content
+        const slots = ((_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) || [];
+        slots.forEach((slot) => {
+            const assignedElements = slot.assignedElements({ flatten: true });
+            assignedElements.forEach(element => {
+                selectors.forEach(selector => {
+                    if (element.matches && element.matches(selector)) {
+                        const fieldElement = element;
+                        if (fieldElement.name || fieldElement.getAttribute('name')) {
+                            fields.push(fieldElement);
+                        }
+                    }
+                    // Also search within the element
+                    const nestedFields = element.querySelectorAll(selector);
+                    nestedFields.forEach((nested) => {
+                        const fieldElement = nested;
+                        if (fieldElement.name || fieldElement.getAttribute('name')) {
+                            fields.push(fieldElement);
+                        }
+                    });
+                });
+            });
+        });
+        return fields;
+    }
+    /**
+     * Set submission state and update host
+     */
+    setSubmissionState(state) {
+        var _a, _b;
+        this.submissionState = state;
+        (_b = (_a = this.host).requestUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    /**
+     * Dispatch submit attempt event
+     */
+    dispatchSubmitAttemptEvent(validationResult) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.SUBMIT_ATTEMPT, {
+            validationResult
+        });
+    }
+    /**
+     * Dispatch submit success event
+     */
+    dispatchSubmitSuccessEvent(data) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.SUBMIT_SUCCESS, {
+            formData: data
+        });
+    }
+    /**
+     * Dispatch submit error event
+     */
+    dispatchSubmitErrorEvent(error) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.SUBMIT_ERROR, {
+            error
+        });
+    }
+}
+//# sourceMappingURL=submission.controller.js.map

package/dist/src/components/form/controllers/validation.controller.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { FormField, FormValidationResult, FormValidationState } from '../form.types.js';
+import { ValidatableComponent } from '@nuralyui/common/mixins';
+/**
+ * Controller that coordinates validation across all form fields
+ * This does NOT perform validation - it coordinates existing component validations
+ */
+export declare class FormValidationController {
+    private host;
+    private fields;
+    private validationState;
+    private validationPromise;
+    constructor(host: any);
+    /**
+     * Register a form field for validation coordination
+     */
+    registerField(element: HTMLElement & ValidatableComponent): void;
+    /**
+     * Unregister a form field
+     */
+    unregisterField(name: string): void;
+    /**
+     * Add event listeners to a form field
+     */
+    private addFieldListeners;
+    /**
+     * Remove event listeners from a form field
+     */
+    private removeFieldListeners;
+    /**
+     * Handle field validation event
+     */
+    private handleFieldValidation;
+    /**
+     * Update form validation state based on current field states
+     */
+    private updateFormValidationState;
+    /**
+     * Build validation errors object from current field states
+     */
+    private buildValidationErrors;
+    /**
+     * Validate all form fields (coordinates existing validations)
+     */
+    validateForm(): Promise<FormValidationResult>;
+    /**
+     * Perform the actual validation coordination
+     */
+    private performValidation;
+    /**
+     * Get current validation state
+     */
+    getValidationState(): FormValidationState;
+    /**
+     * Get all registered fields
+     */
+    getFields(): FormField[];
+    /**
+     * Get invalid fields
+     */
+    getInvalidFields(): FormField[];
+    /**
+     * Check if form is valid
+     */
+    isValid(): boolean;
+    /**
+     * Focus first invalid field
+     */
+    focusFirstInvalidField(): boolean;
+    /**
+     * Reset all fields
+     */
+    reset(): void;
+    /**
+     * Dispatch validation event
+     */
+    private dispatchValidationEvent;
+    /**
+     * Dispatch reset event
+     */
+    private dispatchResetEvent;
+}
+//# sourceMappingURL=validation.controller.d.ts.map