easy-forms-core 1.1.0 → 1.1.2

package/README.md

@@ -1,6 +1,6 @@
-# EasyForms
+# EasyFormsCore
 
-EasyForms es una librería agnóstica de framework para construir formularios dinámicos a partir de JSON usando Web Components.
+EasyFormsCore es una librería agnóstica de framework para construir formularios dinámicos a partir de JSON usando Web Components.
 
 Permite crear formularios completos únicamente describiendo un schema JSON.
 
@@ -229,6 +229,173 @@ form.schema = { fields: [...] }
 // template ahora es null
 ```
 
+## Personalización de Estilos
+
+EasyFormsCore utiliza variables CSS que puedes sobrescribir para personalizar completamente la apariencia de tus formularios. Todas las variables están definidas en el scope del componente (`:host`), lo que permite un control total sobre los colores y estilos.
+
+### Variables CSS Disponibles
+
+Puedes sobrescribir estas variables CSS para personalizar los colores de tu formulario:
+
+```css
+easy-form {
+  --easy-form-primary: #007bff;        /* Color principal (botones, focus, etc.) */
+  --easy-form-secondary: #6c757d;      /* Color secundario */
+  --easy-form-error: #dc3545;          /* Color de error */
+  --easy-form-success: #28a745;        /* Color de éxito */
+  --easy-form-text: #212529;           /* Color del texto */
+  --easy-form-label-color: #212529;    /* Color de las etiquetas */
+  --easy-form-border: #ddd;            /* Color de los bordes */
+  --easy-form-background: #ffffff;      /* Color de fondo */
+}
+```
+
+### Ejemplo de Personalización de Colores
+
+```html
+<style>
+  easy-form {
+    --easy-form-primary: #8b5cf6;
+    --easy-form-secondary: #64748b;
+    --easy-form-error: #ef4444;
+    --easy-form-success: #10b981;
+    --easy-form-text: #1e293b;
+    --easy-form-label-color: #334155;
+    --easy-form-border: #e2e8f0;
+    --easy-form-background: #ffffff;
+  }
+</style>
+
+<easy-form id="form"></easy-form>
+```
+
+### Sobrescribir Estilos con Clases CSS
+
+Puedes sobrescribir cualquier estilo usando las clases CSS del componente. Todas las clases utilizan el prefijo `easy-form-` para evitar conflictos.
+
+#### Clases Principales
+
+- `.easy-form-field` - Contenedor de cada campo
+- `.easy-form-label` - Etiquetas de los campos
+- `.easy-form-required` - Indicador de campo requerido (asterisco)
+- `.easy-form-input-error` - Input con error
+- `.easy-form-error` - Mensaje de error
+- `.easy-form-description` - Descripción del campo
+- `.easy-form-submit` - Botón de envío
+
+#### Clases de Grupos y Filas
+
+- `.easy-form-group` - Contenedor de grupo de campos
+- `.easy-form-group-label` - Etiqueta del grupo
+- `.easy-form-row` - Fila horizontal de campos
+- `.easy-form-array` - Contenedor de array dinámico
+- `.easy-form-array-item` - Item individual del array
+- `.easy-form-array-add` - Botón para agregar items
+- `.easy-form-array-remove` - Botón para remover items
+
+#### Clases de Wizard/Steps
+
+- `.easy-form-wizard` - Contenedor del wizard
+- `.easy-form-wizard-steps` - Contenedor de los pasos
+- `.easy-form-wizard-step` - Paso individual
+- `.easy-form-wizard-step.active` - Paso activo
+- `.easy-form-wizard-step.completed` - Paso completado
+- `.easy-form-wizard-nav` - Navegación del wizard
+- `.easy-form-wizard-prev` - Botón anterior
+- `.easy-form-wizard-next` - Botón siguiente
+- `.easy-form-wizard-fields` - Contenedor de campos del paso actual
+
+#### Clases de Inputs Especiales
+
+- `.easy-form-radio-group` - Grupo de radio buttons
+- `.easy-form-radio-option` - Opción de radio
+- `.easy-form-radio-label` - Etiqueta de radio
+- `.easy-form-label-checkbox` - Etiqueta de checkbox
+- `.easy-form-label-switch` - Etiqueta de switch
+- `.easy-form-quantity-container` - Contenedor de quantity input
+- `.easy-form-quantity-wrapper` - Wrapper del quantity
+- `.easy-form-quantity-btn` - Botón +/- del quantity
+- `.easy-form-quantity-input` - Input del quantity
+- `.easy-form-accordion-select-container` - Contenedor de accordion select
+- `.easy-form-accordion-item` - Item del accordion
+- `.easy-form-accordion-item.selected` - Item seleccionado
+- `.easy-form-accordion-item.open` - Item abierto
+- `.easy-form-accordion-header` - Header del accordion
+- `.easy-form-accordion-content` - Contenido del accordion
+- `.easy-form-image-grid-container` - Contenedor de image grid
+- `.easy-form-image-grid-item` - Item del grid
+- `.easy-form-image-grid-item.selected` - Item seleccionado
+- `.easy-form-otp-container` - Contenedor de OTP
+- `.easy-form-otp-input` - Input individual de OTP
+
+#### Clases de Estado
+
+- `.easy-form-field-hidden` - Campo oculto
+- `.easy-form-field-disabled` - Campo deshabilitado
+
+### Ejemplo de Sobrescritura de Estilos
+
+```html
+<style>
+  /* Personalizar colores con variables CSS */
+  easy-form {
+    --easy-form-primary: #6366f1;
+    --easy-form-error: #f43f5e;
+  }
+
+  /* Sobrescribir estilos específicos */
+  easy-form .easy-form-label {
+    font-weight: 700;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  easy-form .easy-form-submit {
+    border-radius: 12px;
+    padding: 0.875rem 2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  }
+
+  easy-form .easy-form-submit:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+  }
+
+  /* Personalizar inputs */
+  easy-form input:not([type="checkbox"]):not([type="radio"]),
+  easy-form textarea,
+  easy-form select {
+    border-radius: 8px;
+    border-width: 2px;
+    padding: 0.75rem 1rem;
+    transition: all 0.2s ease;
+  }
+
+  easy-form input:focus,
+  easy-form textarea:focus,
+  easy-form select:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+  }
+</style>
+
+<easy-form id="form"></easy-form>
+```
+
+### Notas Importantes
+
+1. **Especificidad**: Los estilos del componente tienen especificidad media. Si necesitas sobrescribir estilos con `!important`, puedes hacerlo, pero se recomienda usar variables CSS cuando sea posible.
+
+2. **Shadow DOM**: El componente utiliza Shadow DOM, por lo que los estilos globales no afectan directamente al contenido interno. Debes usar el selector `easy-form` o las variables CSS.
+
+3. **Variables CSS**: Las variables CSS son la forma recomendada de personalizar colores, ya que se propagan correctamente dentro del Shadow DOM.
+
+4. **Temas**: Los temas predefinidos (plano, tradicional, material, etc.) también respetan las variables CSS que definas, por lo que puedes cambiar los colores manteniendo el estilo del tema.
+
 ## Características
 
 - Web Component nativo

package/dist/easy-form.d.ts

@@ -385,6 +385,10 @@ declare class EasyForm extends BrowserHTMLElement {
      * Renderiza el formulario
      */
     private render;
+    /**
+     * Actualiza el overlay de loading sobre el formulario
+     */
+    private updateLoadingOverlay;
     /**
      * Preserva los valores actuales del DOM antes de re-renderizar
      * Retorna un objeto con los valores preservados
@@ -527,6 +531,22 @@ declare class EasyForm extends BrowserHTMLElement {
      * Establece los datos iniciales
      */
     set initialData(value: Record<string, any> | null);
+    /**
+     * Obtiene el estado de loading
+     */
+    get loading(): boolean;
+    /**
+     * Establece el estado de loading
+     */
+    set loading(value: boolean);
+    /**
+     * Obtiene el estado de disabled
+     */
+    get disabled(): boolean;
+    /**
+     * Establece el estado de disabled
+     */
+    set disabled(value: boolean);
     /**
      * Configura estilos básicos
      */

package/dist/easy-form.js

@@ -382,7 +382,41 @@ function getBaseStyles(colors) {
     .easy-form-wizard-nav {
       display: flex;
       gap: 1rem;
-      margin-top: 1rem;
+      margin-top: 2rem;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .easy-form-wizard-prev,
+    .easy-form-wizard-next {
+      padding: 0.75rem 1.5rem;
+      background: var(--easy-form-primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-family: inherit;
+      min-width: 120px;
+    }
+    .easy-form-wizard-prev:hover:not(:disabled),
+    .easy-form-wizard-next:hover:not(:disabled) {
+      opacity: 0.9;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .easy-form-wizard-prev:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .easy-form-wizard-prev {
+      background: var(--easy-form-secondary);
+      order: 1;
+    }
+    .easy-form-wizard-next {
+      background: var(--easy-form-primary);
+      order: 2;
     }
     .easy-form-array-item {
       padding: 1rem;
@@ -648,6 +682,53 @@ function getBaseStyles(colors) {
     .easy-form-otp-input:invalid {
       border-color: var(--easy-form-error);
     }
+    /* Loading Overlay (sobre el formulario) */
+    .easy-form-loading-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      backdrop-filter: blur(2px);
+      border-radius: inherit;
+    }
+    .easy-form-loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid rgba(0, 0, 0, 0.1);
+      border-top-color: var(--easy-form-primary);
+      border-radius: 50%;
+      animation: easy-form-spin 0.8s linear infinite;
+    }
+    @keyframes easy-form-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    /* Disabled State */
+    .easy-form-disabled,
+    .easy-form-disabled * {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+    .easy-form-disabled input,
+    .easy-form-disabled textarea,
+    .easy-form-disabled select,
+    .easy-form-disabled button {
+      cursor: not-allowed;
+    }
+    .easy-form-input-disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
+    }
+    form {
+      position: relative;
+    }
   `;
 }
 function getThemeSpecificStyles(theme, colors) {
@@ -1731,7 +1812,20 @@ var ValidationEngine = class {
     if (!value) {
       return { isValid: true };
     }
-    const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+    let regex;
+    if (pattern instanceof RegExp) {
+      regex = pattern;
+    } else if (typeof pattern === "string") {
+      try {
+        regex = new RegExp(pattern);
+      } catch (e) {
+        console.warn("Invalid regex pattern:", pattern);
+        return { isValid: true };
+      }
+    } else {
+      console.warn("Pattern validation expects string or RegExp, got:", typeof pattern, pattern);
+      return { isValid: true };
+    }
     const isValid = regex.test(String(value));
     return {
       isValid,
@@ -4436,7 +4530,7 @@ var EasyForm = class extends BrowserHTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["schema", "template", "template-extend", "theme", "colors", "initialData"];
+    return ["schema", "template", "template-extend", "theme", "colors", "initialData", "loading", "disabled"];
   }
   /**
    * Obtiene el schema
@@ -4545,6 +4639,21 @@ var EasyForm = class extends BrowserHTMLElement {
     if ((name === "theme" || name === "colors") && newValue !== oldValue) {
       this.setupStyles();
     }
+    if (name === "loading" && newValue !== oldValue) {
+      const form = this.shadow.querySelector("form");
+      this.updateLoadingOverlay(form || void 0);
+      if (form) {
+        const inputs = form.querySelectorAll("input, textarea, select, button");
+        inputs.forEach((input) => {
+          if (input instanceof HTMLElement && "disabled" in input) {
+            input.disabled = this.loading;
+          }
+        });
+      }
+    }
+    if (name === "disabled" && newValue !== oldValue) {
+      this.render();
+    }
   }
   /**
    * Maneja el cambio de schema
@@ -4602,26 +4711,51 @@ var EasyForm = class extends BrowserHTMLElement {
         return;
       }
       const preservedValues = this.preserveCurrentValues();
+      const previousWizardState = this.stateManager.getWizardState();
       if (preservedValues && Object.keys(preservedValues).length > 0) {
         for (const [key, value] of Object.entries(preservedValues)) {
           this.stateManager.setValueWithoutValidation(key, value);
         }
       }
       const initialData = this.initialData;
-      this.stateManager.initializeSchema(schema, initialData || void 0);
-      const wizardState = this.stateManager.getWizardState();
+      const wasWizard = previousWizardState !== null;
+      const isWizard = schema.steps && schema.steps.length > 0;
+      const shouldReinitialize = !previousWizardState || !wasWizard || !isWizard || previousWizardState && schema.steps && previousWizardState.totalSteps !== schema.steps.length;
+      if (shouldReinitialize) {
+        this.stateManager.initializeSchema(schema, initialData || void 0);
+        if (wasWizard && isWizard && previousWizardState) {
+          const wizardState = this.stateManager.getWizardState();
+          if (wizardState && previousWizardState.totalSteps === wizardState.totalSteps) {
+            if (previousWizardState.currentStep >= 0 && previousWizardState.currentStep < wizardState.totalSteps) {
+              this.stateManager.goToStep(previousWizardState.currentStep);
+            }
+            for (const completedStep of previousWizardState.completedSteps) {
+              if (completedStep >= 0 && completedStep < wizardState.totalSteps) {
+                this.stateManager.completeStep(completedStep);
+              }
+            }
+          }
+        }
+      }
+      const finalWizardState = this.stateManager.getWizardState();
       const newFormElement = document.createElement("form");
       newFormElement.addEventListener("submit", (e) => this.handleSubmit(e));
-      if (wizardState) {
-        this.renderWizard(newFormElement, wizardState);
+      if (this.disabled || this.loading) {
+        newFormElement.classList.add("easy-form-disabled");
+      }
+      if (finalWizardState) {
+        this.renderWizard(newFormElement);
       } else {
         this.renderFields(newFormElement, schema.fields || []);
+        const submitButton = document.createElement("button");
+        submitButton.type = "submit";
+        submitButton.textContent = "Enviar";
+        submitButton.className = "easy-form-submit";
+        if (this.disabled || this.loading) {
+          submitButton.disabled = true;
+        }
+        newFormElement.appendChild(submitButton);
       }
-      const submitButton = document.createElement("button");
-      submitButton.type = "submit";
-      submitButton.textContent = "Enviar";
-      submitButton.className = "easy-form-submit";
-      newFormElement.appendChild(submitButton);
       const oldForm = this.shadow.querySelector("form");
       if (oldForm && oldForm.parentNode === this.shadow && oldForm !== newFormElement) {
         try {
@@ -4631,10 +4765,33 @@ var EasyForm = class extends BrowserHTMLElement {
         }
       }
       this.shadow.appendChild(newFormElement);
+      if (this.loading) {
+        this.updateLoadingOverlay(newFormElement);
+      }
     } finally {
       this.isRendering = false;
     }
   }
+  /**
+   * Actualiza el overlay de loading sobre el formulario
+   */
+  updateLoadingOverlay(formElement) {
+    const existingOverlay = this.shadow.querySelector(".easy-form-loading-overlay");
+    if (existingOverlay) {
+      existingOverlay.remove();
+    }
+    if (this.loading) {
+      const form = formElement || this.shadow.querySelector("form");
+      if (form) {
+        const overlay = document.createElement("div");
+        overlay.className = "easy-form-loading-overlay";
+        const spinner = document.createElement("div");
+        spinner.className = "easy-form-loading-spinner";
+        overlay.appendChild(spinner);
+        form.appendChild(overlay);
+      }
+    }
+  }
   /**
    * Preserva los valores actuales del DOM antes de re-renderizar
    * Retorna un objeto con los valores preservados
@@ -4743,9 +4900,10 @@ var EasyForm = class extends BrowserHTMLElement {
     const value = this.stateManager.getValue(field.name);
     const errors = this.stateManager.getErrors(field.name);
     const error = errors.length > 0 ? errors[0] : void 0;
+    const isFormDisabled = this.disabled || this.loading;
     const fieldWithDependencies = {
       ...field,
-      disabled: !isEnabled || field.disabled
+      disabled: isFormDisabled || !isEnabled || field.disabled
     };
     const customComponent = getCustomComponent(field.type);
     if (customComponent) {
@@ -4866,11 +5024,15 @@ var EasyForm = class extends BrowserHTMLElement {
       removeButton.type = "button";
       removeButton.textContent = "Eliminar";
       removeButton.className = "easy-form-array-remove";
-      removeButton.addEventListener("click", () => {
-        const newValues = [...values];
-        newValues.splice(i, 1);
-        this.handleFieldChange(field.name, newValues);
-      });
+      if (this.disabled || this.loading) {
+        removeButton.disabled = true;
+      } else {
+        removeButton.addEventListener("click", () => {
+          const newValues = [...values];
+          newValues.splice(i, 1);
+          this.handleFieldChange(field.name, newValues);
+        });
+      }
       itemContainer.appendChild(removeButton);
       itemsContainer.appendChild(itemContainer);
     }
@@ -4879,10 +5041,14 @@ var EasyForm = class extends BrowserHTMLElement {
     addButton.type = "button";
     addButton.textContent = "Agregar";
     addButton.className = "easy-form-array-add";
-    addButton.addEventListener("click", () => {
-      const newValues = [...values, {}];
-      this.handleFieldChange(field.name, newValues);
-    });
+    if (this.disabled || this.loading) {
+      addButton.disabled = true;
+    } else {
+      addButton.addEventListener("click", () => {
+        const newValues = [...values, {}];
+        this.handleFieldChange(field.name, newValues);
+      });
+    }
     arrayContainer.appendChild(addButton);
     return arrayContainer;
   }
@@ -4910,7 +5076,9 @@ var EasyForm = class extends BrowserHTMLElement {
   /**
    * Renderiza wizard
    */
-  renderWizard(container, wizardState) {
+  renderWizard(container) {
+    const wizardState = this.stateManager.getWizardState();
+    if (!wizardState) return;
     const wizardContainer = document.createElement("div");
     wizardContainer.className = "easy-form-wizard";
     const stepsIndicator = document.createElement("div");
@@ -4943,43 +5111,95 @@ var EasyForm = class extends BrowserHTMLElement {
     wizardContainer.appendChild(fieldsContainer);
     const navContainer = document.createElement("div");
     navContainer.className = "easy-form-wizard-nav";
-    const prevButton = document.createElement("button");
-    prevButton.type = "button";
-    prevButton.textContent = "Anterior";
-    prevButton.className = "easy-form-wizard-prev";
-    prevButton.disabled = wizardState.currentStep === 0;
-    prevButton.addEventListener("click", () => {
-      if (this.stateManager.previousStep()) {
-        this.render();
-        this.emitStepChange();
-      }
-    });
-    navContainer.appendChild(prevButton);
-    const nextButton = document.createElement("button");
-    nextButton.type = "button";
-    nextButton.textContent = wizardState.currentStep === wizardState.totalSteps - 1 ? "Enviar" : "Siguiente";
-    nextButton.className = "easy-form-wizard-next";
-    nextButton.addEventListener("click", async () => {
-      if (wizardState.currentStep === wizardState.totalSteps - 1) {
-        await this.handleSubmit(new Event("submit"));
+    if (wizardState.currentStep > 0) {
+      const prevButton = document.createElement("button");
+      prevButton.type = "button";
+      prevButton.textContent = "Anterior";
+      prevButton.className = "easy-form-wizard-prev";
+      if (this.disabled || this.loading) {
+        prevButton.disabled = true;
       } else {
-        const currentFields2 = this.stateManager.getCurrentStepFields();
-        const errors = await this.stateManager.validateForm();
-        const hasErrors = currentFields2.some(
-          (f) => errors[f.name] && errors[f.name].length > 0
-        );
-        if (!hasErrors) {
-          this.stateManager.completeStep(wizardState.currentStep);
-          if (this.stateManager.nextStep()) {
+        prevButton.addEventListener("click", () => {
+          const currentState = this.stateManager.getWizardState();
+          if (currentState && this.stateManager.previousStep()) {
             this.render();
             this.emitStepChange();
           }
-        } else {
-          this.emitError(errors);
-        }
+        });
       }
-    });
-    navContainer.appendChild(nextButton);
+      navContainer.appendChild(prevButton);
+    }
+    if (wizardState.currentStep < wizardState.totalSteps - 1) {
+      const nextButton = document.createElement("button");
+      nextButton.type = "button";
+      nextButton.textContent = "Siguiente";
+      nextButton.className = "easy-form-wizard-next";
+      if (this.disabled || this.loading) {
+        nextButton.disabled = true;
+      } else {
+        nextButton.addEventListener("click", async () => {
+          const currentState = this.stateManager.getWizardState();
+          if (!currentState) return;
+          const currentFields2 = this.stateManager.getCurrentStepFields();
+          for (const field of currentFields2) {
+            if (this.stateManager.getFieldVisibility(field.name)) {
+              await this.stateManager.validateField(field.name);
+            }
+          }
+          const allErrors = this.stateManager.getAllErrors();
+          const stepErrors = {};
+          for (const field of currentFields2) {
+            if (allErrors[field.name] && allErrors[field.name].length > 0) {
+              stepErrors[field.name] = allErrors[field.name];
+            }
+          }
+          const hasErrors = Object.keys(stepErrors).length > 0;
+          if (!hasErrors) {
+            this.stateManager.completeStep(currentState.currentStep);
+            const moved = this.stateManager.nextStep();
+            if (moved) {
+              this.render();
+              this.emitStepChange();
+            }
+          } else {
+            this.emitError(stepErrors);
+          }
+        });
+      }
+      navContainer.appendChild(nextButton);
+    }
+    if (wizardState.currentStep === wizardState.totalSteps - 1) {
+      const submitButton = document.createElement("button");
+      submitButton.type = "button";
+      submitButton.textContent = "Enviar";
+      submitButton.className = "easy-form-wizard-next";
+      if (this.disabled || this.loading) {
+        submitButton.disabled = true;
+      } else {
+        submitButton.addEventListener("click", async () => {
+          const currentFields2 = this.stateManager.getCurrentStepFields();
+          for (const field of currentFields2) {
+            if (this.stateManager.getFieldVisibility(field.name)) {
+              await this.stateManager.validateField(field.name);
+            }
+          }
+          const allErrors = this.stateManager.getAllErrors();
+          const stepErrors = {};
+          for (const field of currentFields2) {
+            if (allErrors[field.name] && allErrors[field.name].length > 0) {
+              stepErrors[field.name] = allErrors[field.name];
+            }
+          }
+          const hasErrors = Object.keys(stepErrors).length > 0;
+          if (!hasErrors) {
+            await this.handleSubmit(new Event("submit"));
+          } else {
+            this.emitError(stepErrors);
+          }
+        });
+      }
+      navContainer.appendChild(submitButton);
+    }
     wizardContainer.appendChild(navContainer);
     container.appendChild(wizardContainer);
   }
@@ -5324,6 +5544,38 @@ var EasyForm = class extends BrowserHTMLElement {
       this.removeAttribute("initialData");
     }
   }
+  /**
+   * Obtiene el estado de loading
+   */
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  /**
+   * Establece el estado de loading
+   */
+  set loading(value) {
+    if (value) {
+      this.setAttribute("loading", "");
+    } else {
+      this.removeAttribute("loading");
+    }
+  }
+  /**
+   * Obtiene el estado de disabled
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * Establece el estado de disabled
+   */
+  set disabled(value) {
+    if (value) {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
   /**
    * Configura estilos básicos
    */