easy-forms-core 1.1.11 → 1.1.13

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Tipos de campos soportados
  */
-type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'file' | 'array' | 'group' | 'row' | 'custom' | 'quantity' | 'accordion-select' | 'image-grid-select' | 'otp' | 'file-drop' | 'map' | 'rating' | 'slider';
+type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'file' | 'array' | 'group' | 'row' | 'custom' | 'quantity' | 'accordion-select' | 'image-grid-select' | 'otp' | 'file-drop' | 'map' | 'rating' | 'slider' | 'colorpicker';
 /**
  * Tipos de validaciones soportadas
  */
@@ -248,6 +248,14 @@ interface SliderField extends BaseField {
     step?: number;
     showValue?: boolean;
 }
+/**
+ * Campo colorpicker (selección de color hex)
+ */
+interface ColorpickerField extends BaseField {
+    type: 'colorpicker';
+    /** Valor por defecto en hex (ej. #6366f1). Default: #000000 */
+    defaultValue?: string;
+}
 /**
  * Campo array
  */
@@ -332,7 +340,7 @@ interface OTPField extends BaseField {
 /**
  * Unión de todos los tipos de campos
  */
-type Field = TextField | PasswordField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | FileDropField | MapField | RatingField | SliderField | ArrayField | GroupField | RowField | CustomField | QuantityField | AccordionSelectField | ImageGridSelectField | OTPField;
+type Field = TextField | PasswordField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | FileDropField | MapField | RatingField | SliderField | ColorpickerField | ArrayField | GroupField | RowField | CustomField | QuantityField | AccordionSelectField | ImageGridSelectField | OTPField;
 /**
  * Step para formularios wizard
  */
@@ -357,6 +365,10 @@ interface FormColors {
     labelColor?: string;
     border?: string;
     background?: string;
+    /** Fondo del contenedor .easy-form-group */
+    groupBackground?: string;
+    /** Color del título .easy-form-group-label */
+    groupTitle?: string;
 }
 /**
  * Template names available
@@ -1242,4 +1254,4 @@ declare function getAvailableTemplates(): TemplateName[];
  */
 declare function extendTemplate(templateName: string, additionalFields: Field[]): FormSchema;
 
-export { type AccordionSelectField, type ArrayField, AttemptsLock, type AttemptsLockOptions, type BaseField, type BaseValidation, type ChangeEventDetail, type CheckboxField, type ComponentRegistry, ConditionEngine, type ConditionOperator, type CustomComponent, type CustomField, type CustomMask, type CustomValidation, type DateField, EasyForm, type EmailValidation, type ErrorEventDetail, type Field, type FieldCondition, type FieldDependencies, type FieldType, type FileDropField, type FileField, type FormColors, type FormSchema, type FormState, type FormTheme, type GroupField, INJECTION_VALIDATION_MESSAGE, type ImageGridSelectField, type LabelPosition, type MapField, type MaskConfig, MaskEngine, type MaxLengthValidation, type MaxValidation, type MinLengthValidation, type MinValidation, type NoInjectionValidation, type NumberField, type OTPField, PREDEFINED_MASKS, type PasswordField, type PatternValidation, type PredefinedMask, type QuantityField, type RadioField, type RatingField, type RequiredValidation, type RowField, SchemaParser, type SelectField, type SliderField, StateManager, type Step, type StepChangeEventDetail, type SubmitButtonConfig, type SubmitEventDetail, type SwitchField, type TemplateName, type TextField, type TextareaField, type Validation, ValidationEngine, type ValidationType, type WizardState, attributeValue, containsInjection, createInput, extendTemplate, generateId, getAvailableTemplates, getColors, getCustomComponent, getNestedValue, getPredefinedMask, getTemplate, getThemeStyles, isSafeFromInjection, isValidEmail, parseAttributeValue, registerComponent, registerComponents, sanitizeId, setNestedValue, templates };
+export { type AccordionSelectField, type ArrayField, AttemptsLock, type AttemptsLockOptions, type BaseField, type BaseValidation, type ChangeEventDetail, type CheckboxField, type ColorpickerField, type ComponentRegistry, ConditionEngine, type ConditionOperator, type CustomComponent, type CustomField, type CustomMask, type CustomValidation, type DateField, EasyForm, type EmailValidation, type ErrorEventDetail, type Field, type FieldCondition, type FieldDependencies, type FieldType, type FileDropField, type FileField, type FormColors, type FormSchema, type FormState, type FormTheme, type GroupField, INJECTION_VALIDATION_MESSAGE, type ImageGridSelectField, type LabelPosition, type MapField, type MaskConfig, MaskEngine, type MaxLengthValidation, type MaxValidation, type MinLengthValidation, type MinValidation, type NoInjectionValidation, type NumberField, type OTPField, PREDEFINED_MASKS, type PasswordField, type PatternValidation, type PredefinedMask, type QuantityField, type RadioField, type RatingField, type RequiredValidation, type RowField, SchemaParser, type SelectField, type SliderField, StateManager, type Step, type StepChangeEventDetail, type SubmitButtonConfig, type SubmitEventDetail, type SwitchField, type TemplateName, type TextField, type TextareaField, type Validation, ValidationEngine, type ValidationType, type WizardState, attributeValue, containsInjection, createInput, extendTemplate, generateId, getAvailableTemplates, getColors, getCustomComponent, getNestedValue, getPredefinedMask, getTemplate, getThemeStyles, isSafeFromInjection, isValidEmail, parseAttributeValue, registerComponent, registerComponents, sanitizeId, setNestedValue, templates };

package/dist/index.js

@@ -63,6 +63,7 @@ var SchemaParser = class {
       "map",
       "rating",
       "slider",
+      "colorpicker",
       "array",
       "group",
       "row",
@@ -109,6 +110,16 @@ var SchemaParser = class {
           );
         }
         break;
+      case "colorpicker":
+        if ("defaultValue" in field && field.defaultValue != null) {
+          const hex = /^#[0-9A-Fa-f]{6}$/;
+          if (!hex.test(String(field.defaultValue))) {
+            throw new Error(
+              `Field "${field.name}" de tipo colorpicker debe tener defaultValue en formato hex (#RRGGBB)`
+            );
+          }
+        }
+        break;
     }
   }
   /**
@@ -178,6 +189,11 @@ var SchemaParser = class {
           defaults.max = 5;
         }
         break;
+      case "colorpicker":
+        if (!("defaultValue" in field) || field.defaultValue == null) {
+          defaults.defaultValue = "#000000";
+        }
+        break;
     }
     return { ...defaults, ...field };
   }
@@ -222,7 +238,9 @@ var defaultColors = {
   text: "#212529",
   labelColor: "#212529",
   border: "#ddd",
-  background: "#ffffff"
+  background: "#ffffff",
+  groupBackground: "#f8f9fa",
+  groupTitle: "#212529"
 };
 function getColors(colors) {
   return { ...defaultColors, ...colors };
@@ -244,6 +262,8 @@ function getBaseStyles(colors) {
       --easy-form-label-color: ${colors.labelColor};
       --easy-form-border: ${colors.border};
       --easy-form-background: ${colors.background};
+      --easy-form-group-background: ${colors.groupBackground};
+      --easy-form-group-title: ${colors.groupTitle};
     }
     .easy-form-field {
       margin-bottom: 1rem;
@@ -311,6 +331,46 @@ function getBaseStyles(colors) {
       min-width: 2rem;
       font-weight: 500;
     }
+    .easy-form-color-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .easy-form-color-wrapper input[type="color"] {
+      width: 2.2rem;
+      height: 2.2rem;
+      min-width: 2.2rem;
+      min-height: 2.2rem;
+      padding: 0 !important;
+      margin: 0;
+      cursor: pointer;
+      border: 1px solid var(--easy-form-border);
+      border-radius: 2px;
+      background: transparent;
+      flex-shrink: 0;
+    }
+    .easy-form-color-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+    .easy-form-color-wrapper input[type="color"]::-webkit-color-swatch {
+      border: none;
+      border-radius: 1px;
+    }
+    .easy-form-color-wrapper input[type="color"]::-moz-color-swatch {
+      border: none;
+      border-radius: 1px;
+    }
+    .easy-form-color-text {
+      flex: 1;
+      min-width: 0;
+      color: var(--easy-form-text);
+      background: var(--easy-form-background);
+      border: 1px solid var(--easy-form-border);
+      border-radius: 4px;
+      padding: 0.5rem 0.75rem;
+      font-family: ui-monospace, 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
+      font-size: 0.875rem;
+    }
     .easy-form-rating {
       display: inline-flex;
       gap: 0.25rem;
@@ -431,7 +491,7 @@ function getBaseStyles(colors) {
     .easy-form-submit-wrapper .easy-form-submit {
       min-width: 100px;
     }
-    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
+    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select {
       width: 100%;
       padding: 0.5rem;
       font-size: 1rem;
@@ -459,6 +519,14 @@ function getBaseStyles(colors) {
     .easy-form-group {
       padding: 1rem;
       margin-bottom: 1rem;
+      background: var(--easy-form-group-background);
+    }
+    .easy-form-group-label {
+      color: var(--easy-form-group-title);
+      font-weight: 600;
+      font-size: 1rem;
+      margin-bottom: 0.75rem;
+      margin-top: 0;
     }
     .easy-form-row {
       display: flex;
@@ -1031,6 +1099,7 @@ function getPlanoStyles(_colors) {
       border: none;
       border-bottom: 1px solid var(--easy-form-border);
       border-radius: 0;
+      background: transparent;
     }
     .easy-form-wizard-step {
       border: none;
@@ -1065,7 +1134,7 @@ function getTradicionalStyles(_colors) {
     .easy-form-group {
       border: 2px solid var(--easy-form-border);
       border-radius: 4px;
-      background: #f8f9fa;
+      background: var(--easy-form-group-background);
     }
     .easy-form-wizard-step {
       border: 2px solid var(--easy-form-border);
@@ -1115,7 +1184,7 @@ function getMaterialStyles(_colors) {
     .easy-form-group {
       border: none;
       border-radius: 4px;
-      background: #f5f5f5;
+      background: var(--easy-form-group-background);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
     }
     .easy-form-wizard-step {
@@ -1160,7 +1229,7 @@ function getRoundedShadowStyles(_colors) {
       border: 1px solid var(--easy-form-border);
       border-radius: 16px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
     }
     .easy-form-wizard-step {
       border: 1px solid var(--easy-form-border);
@@ -1214,6 +1283,7 @@ function getLinesStyles(_colors) {
       border-bottom: 2px solid var(--easy-form-border);
       border-radius: 0;
       padding-bottom: 1rem;
+      background: transparent;
     }
     .easy-form-wizard-step {
       border: none;
@@ -1290,7 +1360,7 @@ function getShadcnStyles(_colors) {
     .easy-form-group {
       border: 1.5px solid #e4e4e7;
       border-radius: 12px;
-      background: linear-gradient(to bottom, var(--easy-form-background), #fafafa);
+      background: var(--easy-form-group-background);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       padding: 1.5rem;
     }
@@ -1387,7 +1457,7 @@ function getChakraStyles(_colors) {
     .easy-form-group {
       border: 2px solid #e2e8f0;
       border-radius: 8px;
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     .easy-form-wizard-step {
@@ -1468,7 +1538,7 @@ function getMantineStyles(_colors) {
     .easy-form-group {
       border: 1px solid #dee2e6;
       border-radius: 16px;
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
       padding: 1.5rem;
     }
@@ -1559,7 +1629,7 @@ function getGlassStyles(_colors) {
     .easy-form-group {
       border: 2px solid rgba(255, 255, 255, 0.4);
       border-radius: 20px;
-      background: rgba(255, 255, 255, 0.15);
+      background: var(--easy-form-group-background);
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -1653,7 +1723,7 @@ function getBorderedStyles(_colors) {
     .easy-form-group {
       border: 4px solid #1a1a1a;
       border-radius: 0;
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
       box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
       padding: 2rem;
     }
@@ -2702,6 +2772,9 @@ var StateManager = class {
             }
           }
           break;
+        case "colorpicker":
+          values[field.name] = field.defaultValue ?? "#000000";
+          break;
         default:
           values[field.name] = null;
       }
@@ -4940,6 +5013,66 @@ var SliderInput = class extends BaseInput {
   }
 };
 
+// src/components/inputs/color-input.ts
+var HEX_REGEX = /^#?([0-9A-Fa-f]{6})$/;
+function toHex(value) {
+  const m = value.match(HEX_REGEX);
+  if (m) return `#${m[1].toLowerCase()}`;
+  if (/^[0-9A-Fa-f]{6}$/.test(value)) return `#${value.toLowerCase()}`;
+  return "#000000";
+}
+var ColorInput = class extends BaseInput {
+  render() {
+    const colorField = this.field;
+    const defaultValue = colorField.defaultValue ?? "#000000";
+    const currentValue = this.value != null && typeof this.value === "string" ? toHex(this.value) : defaultValue;
+    const wrapper = document.createElement("div");
+    wrapper.className = "easy-form-color-wrapper";
+    const colorPicker = document.createElement("input");
+    colorPicker.type = "color";
+    colorPicker.value = currentValue;
+    colorPicker.setAttribute("value", currentValue);
+    colorPicker.setAttribute("aria-label", this.field.label || "Color");
+    colorPicker.id = `${this.getFieldId()}-picker`;
+    if (this.field.disabled) colorPicker.setAttribute("disabled", "true");
+    const textInput = document.createElement("input");
+    textInput.type = "text";
+    textInput.value = currentValue;
+    textInput.setAttribute("aria-label", `${this.field.label || "Color"} (hex)`);
+    textInput.placeholder = "#000000";
+    textInput.className = "easy-form-color-text";
+    this.applyCommonProps(textInput);
+    const syncFromPicker = () => {
+      const value = colorPicker.value || "#000000";
+      const hex = toHex(value);
+      textInput.value = hex;
+      this.onChange(hex);
+    };
+    const syncFromText = () => {
+      const raw = textInput.value.trim();
+      const value = raw.startsWith("#") ? raw : `#${raw}`;
+      if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
+        const hex = toHex(value);
+        colorPicker.value = hex;
+        this.onChange(hex);
+      }
+    };
+    colorPicker.addEventListener("input", syncFromPicker);
+    colorPicker.addEventListener("change", () => {
+      syncFromPicker();
+      this.onBlur();
+    });
+    textInput.addEventListener("input", syncFromText);
+    textInput.addEventListener("blur", () => {
+      syncFromText();
+      this.onBlur();
+    });
+    wrapper.appendChild(colorPicker);
+    wrapper.appendChild(textInput);
+    return this.createFieldContainer(wrapper);
+  }
+};
+
 // src/components/inputs/index.ts
 function createInput(field, value, error, onChange, onBlur) {
   switch (field.type) {
@@ -4972,6 +5105,8 @@ function createInput(field, value, error, onChange, onBlur) {
       return new RatingInput(field, value, error, onChange, onBlur).render();
     case "slider":
       return new SliderInput(field, value, error, onChange, onBlur).render();
+    case "colorpicker":
+      return new ColorInput(field, value, error, onChange, onBlur).render();
     case "quantity":
       return new QuantityInput(field, value, error, onChange, onBlur).render();
     case "accordion-select":