easy-forms-core 1.1.10 → 1.1.12

package/dist/easy-form.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
  */

package/dist/easy-form.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 };
   }
@@ -263,12 +279,17 @@ function getBaseStyles(colors) {
       flex-direction: row;
       align-items: center;
       gap: 0.75rem;
-      flex-wrap: wrap;
     }
     .easy-form-field-inner-horizontal .easy-form-label {
+      display: inline-block;
       margin-bottom: 0;
       margin-top: 0;
       flex-shrink: 0;
+      white-space: nowrap;
+    }
+    .easy-form-field-inner-horizontal > *:not(.easy-form-label) {
+      flex: 1;
+      min-width: 0;
     }
     .easy-form-direction-vertical {
       display: block;
@@ -306,6 +327,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;
@@ -426,7 +487,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;
@@ -2691,6 +2752,9 @@ var StateManager = class {
             }
           }
           break;
+        case "colorpicker":
+          values[field.name] = field.defaultValue ?? "#000000";
+          break;
         default:
           values[field.name] = null;
       }
@@ -4929,6 +4993,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) {
@@ -4961,6 +5085,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":
@@ -5742,6 +5868,9 @@ var EasyForm = class extends BrowserHTMLElement {
     if (name === "disabled" && newValue !== oldValue) {
       this.render();
     }
+    if ((name === "label-position" || name === "form-direction" || name === "show-completed-indicator") && newValue !== oldValue) {
+      this.render();
+    }
     if ((name === "max-attempts" || name === "block-duration-minutes" || name === "attempts-storage-key") && newValue !== oldValue) {
       this.setupAttemptsLock();
       this.updateLockOverlay();