@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,178 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './flex.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { EMPTY_STRING } from './flex.types.js';
+/**
+ * Flex layout component for flexible box layouts
+ *
+ * @example
+ * ```html
+ * <!-- Basic flex -->
+ * <nr-flex>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </nr-flex>
+ *
+ * <!-- Flex with gap -->
+ * <nr-flex gap="medium">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </nr-flex>
+ *
+ * <!-- Centered flex -->
+ * <nr-flex justify="center" align="center">
+ *   <div>Centered content</div>
+ * </nr-flex>
+ *
+ * <!-- Column layout with gap -->
+ * <nr-flex vertical gap="16">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </nr-flex>
+ *
+ * <!-- Responsive gap -->
+ * <nr-flex .gap=${[16, 24]}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </nr-flex>
+ * ```
+ *
+ * @slot default - Flex items
+ */
+let NrFlexElement = class NrFlexElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Flex direction (shorthand: use vertical prop for column) */
+        this.direction = "row" /* FlexDirection.Row */;
+        /** Shorthand for flex-direction: column */
+        this.vertical = false;
+        /** Flex wrap behavior */
+        this.wrap = "nowrap" /* FlexWrap.NoWrap */;
+        /** Justify content alignment */
+        this.justify = EMPTY_STRING;
+        /** Align items alignment */
+        this.align = EMPTY_STRING;
+        /** Gap between flex items - can be preset string, number (px), or [horizontal, vertical] */
+        this.gap = 0;
+        /** Make flex container inline */
+        this.inline = false;
+        /** Custom flex CSS value (e.g., "1", "auto", "none") */
+        this.flex = EMPTY_STRING;
+    }
+    /**
+     * Get computed flex direction
+     */
+    getFlexDirection() {
+        return this.vertical ? "column" /* FlexDirection.Column */ : this.direction;
+    }
+    /**
+     * Convert gap value to CSS value
+     */
+    getGapValue(value) {
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        if (typeof value === 'string') {
+            // Check if it's a preset
+            switch (value) {
+                case "small" /* FlexGap.Small */:
+                    return 'var(--nuraly-spacing-2, 8px)';
+                case "medium" /* FlexGap.Medium */:
+                    return 'var(--nuraly-spacing-3, 16px)';
+                case "large" /* FlexGap.Large */:
+                    return 'var(--nuraly-spacing-4, 24px)';
+                default:
+                    return value; // Use as-is (could be CSS variable or custom value)
+            }
+        }
+        return '0';
+    }
+    /**
+     * Get gap styles for flex container
+     */
+    getGapStyles() {
+        const styles = {};
+        if (Array.isArray(this.gap)) {
+            const [horizontal, vertical] = this.gap;
+            styles['column-gap'] = this.getGapValue(horizontal);
+            styles['row-gap'] = this.getGapValue(vertical);
+        }
+        else if (this.gap) {
+            styles['gap'] = this.getGapValue(this.gap);
+        }
+        return styles;
+    }
+    /**
+     * Get all inline styles for flex container
+     */
+    getFlexStyles() {
+        const styles = Object.assign({}, this.getGapStyles());
+        if (this.flex) {
+            styles['flex'] = this.flex;
+        }
+        return Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join('; ');
+    }
+    render() {
+        const flexDirection = this.getFlexDirection();
+        const flexStyles = this.getFlexStyles();
+        return html `
+      <div
+        class="nr-flex"
+        data-direction="${flexDirection}"
+        data-wrap="${this.wrap}"
+        data-justify="${this.justify}"
+        data-align="${this.align}"
+        data-inline="${this.inline}"
+        data-theme="${this.currentTheme}"
+        style="${flexStyles}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+NrFlexElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrFlexElement.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrFlexElement.prototype, "vertical", void 0);
+__decorate([
+    property({ type: String })
+], NrFlexElement.prototype, "wrap", void 0);
+__decorate([
+    property({ type: String })
+], NrFlexElement.prototype, "justify", void 0);
+__decorate([
+    property({ type: String })
+], NrFlexElement.prototype, "align", void 0);
+__decorate([
+    property({ type: Object })
+], NrFlexElement.prototype, "gap", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrFlexElement.prototype, "inline", void 0);
+__decorate([
+    property({ type: String })
+], NrFlexElement.prototype, "flex", void 0);
+NrFlexElement = __decorate([
+    customElement('nr-flex')
+], NrFlexElement);
+export { NrFlexElement };
+//# sourceMappingURL=flex.component.js.map

package/dist/src/components/flex/flex.style.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Flex component styles
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=flex.style.d.ts.map

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

@@ -0,0 +1,101 @@
+import { css } from 'lit';
+/**
+ * Flex component styles
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export const styles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .nr-flex {
+    display: flex;
+    box-sizing: border-box;
+    
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+  }
+
+  /* Inline flex */
+  .nr-flex[data-inline="true"] {
+    display: inline-flex;
+  }
+
+  /* Flex direction */
+  .nr-flex[data-direction="row"] {
+    flex-direction: row;
+  }
+
+  .nr-flex[data-direction="row-reverse"] {
+    flex-direction: row-reverse;
+  }
+
+  .nr-flex[data-direction="column"] {
+    flex-direction: column;
+  }
+
+  .nr-flex[data-direction="column-reverse"] {
+    flex-direction: column-reverse;
+  }
+
+  /* Flex wrap */
+  .nr-flex[data-wrap="nowrap"] {
+    flex-wrap: nowrap;
+  }
+
+  .nr-flex[data-wrap="wrap"] {
+    flex-wrap: wrap;
+  }
+
+  .nr-flex[data-wrap="wrap-reverse"] {
+    flex-wrap: wrap-reverse;
+  }
+
+  /* Justify content */
+  .nr-flex[data-justify="flex-start"] {
+    justify-content: flex-start;
+  }
+
+  .nr-flex[data-justify="flex-end"] {
+    justify-content: flex-end;
+  }
+
+  .nr-flex[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .nr-flex[data-justify="space-between"] {
+    justify-content: space-between;
+  }
+
+  .nr-flex[data-justify="space-around"] {
+    justify-content: space-around;
+  }
+
+  .nr-flex[data-justify="space-evenly"] {
+    justify-content: space-evenly;
+  }
+
+  /* Align items */
+  .nr-flex[data-align="flex-start"] {
+    align-items: flex-start;
+  }
+
+  .nr-flex[data-align="flex-end"] {
+    align-items: flex-end;
+  }
+
+  .nr-flex[data-align="center"] {
+    align-items: center;
+  }
+
+  .nr-flex[data-align="baseline"] {
+    align-items: baseline;
+  }
+
+  .nr-flex[data-align="stretch"] {
+    align-items: stretch;
+  }
+`;
+//# sourceMappingURL=flex.style.js.map

package/dist/src/components/flex/flex.types.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Flex component types and constants
+ */
+export declare const EMPTY_STRING = "";
+/**
+ * Flex direction
+ */
+export declare const enum FlexDirection {
+    Row = "row",
+    RowReverse = "row-reverse",
+    Column = "column",
+    ColumnReverse = "column-reverse"
+}
+/**
+ * Flex wrap behavior
+ */
+export declare const enum FlexWrap {
+    NoWrap = "nowrap",
+    Wrap = "wrap",
+    WrapReverse = "wrap-reverse"
+}
+/**
+ * Justify content alignment
+ */
+export declare const enum FlexJustify {
+    FlexStart = "flex-start",
+    FlexEnd = "flex-end",
+    Center = "center",
+    SpaceBetween = "space-between",
+    SpaceAround = "space-around",
+    SpaceEvenly = "space-evenly"
+}
+/**
+ * Align items alignment
+ */
+export declare const enum FlexAlign {
+    FlexStart = "flex-start",
+    FlexEnd = "flex-end",
+    Center = "center",
+    Baseline = "baseline",
+    Stretch = "stretch"
+}
+/**
+ * Gap size presets
+ */
+export declare const enum FlexGap {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+/**
+ * Gap configuration - can be string preset, number (px), or array [horizontal, vertical]
+ */
+export type Gap = FlexGap | number | string | [number | string, number | string];
+/**
+ * Flex item configuration
+ */
+export interface FlexItemConfig {
+    flex?: string | number;
+    order?: number;
+    alignSelf?: FlexAlign | 'auto';
+}
+//# sourceMappingURL=flex.types.d.ts.map

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

@@ -0,0 +1,5 @@
+/**
+ * Flex component types and constants
+ */
+export const EMPTY_STRING = '';
+//# sourceMappingURL=flex.types.js.map

package/dist/src/components/flex/index.d.ts

@@ -0,0 +1,3 @@
+export * from './flex.component.js';
+export * from './flex.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+export * from './flex.component.js';
+export * from './flex.types.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/flex/react.d.ts

@@ -0,0 +1,3 @@
+import { NrFlexElement } from './flex.component.js';
+export declare const NrFlex: import("@lit-labs/react").ReactWebComponent<NrFlexElement, {}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,10 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrFlexElement } from './flex.component.js';
+export const NrFlex = createComponent({
+    tagName: 'nr-flex',
+    elementClass: NrFlexElement,
+    react: React,
+    events: {},
+});
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1,98 @@
+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";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const a=t`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .form-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-form-gap, 16px);
+  }
+
+  .form-wrapper[disabled] {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  /* Form validation states */
+  :host([data-validation-state="pristine"]) {
+    border-left: 3px solid transparent;
+  }
+
+  :host([data-validation-state="valid"]) {
+    border-left: 3px solid #52c41a;
+  }
+
+  :host([data-validation-state="invalid"]) {
+    border-left: 3px solid #ff4d4f;
+  }
+
+  :host([data-validation-state="pending"]) {
+    border-left: 3px solid #1890ff;
+  }
+
+  /* Form submission states */
+  :host([data-submission-state="submitting"]) {
+    opacity: 0.8;
+    pointer-events: none;
+  }
+
+  :host([data-submission-state="success"]) {
+    border-left: 3px solid #52c41a;
+  }
+
+  :host([data-submission-state="error"]) {
+    border-left: 3px solid #ff4d4f;
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .form-wrapper {
+      gap: var(--nuraly-form-gap-mobile, 12px);
+    }
+  }
+`
+/**
+ * @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"};
+/**
+ * @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})}}
+/**
+ * @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 
+        action="${this.action||""}"
+        method="${this.method.toLowerCase()}"
+        enctype="${this.enctype}"
+        target="${this.target||""}"
+        class="form-wrapper"
+        data-disabled="${this.disabled}"
+        novalidate
+      >
+        <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};