@dropi/ui 0.1.20 → 0.1.21

package/dist/types/index.d.ts

@@ -6,3 +6,4 @@
 export type * from './components.d.ts';
 export type { BadgeState } from './components/dropi-badge/dropi-badge';
 export type { SelectOption, SelectOptionGroup } from './components/dropi-select/select.types';
+export type { SidebarProperties, SidebarItem } from './components/dropi-sidebar/dropi-sidebar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -20,9 +20,14 @@
       "types": "./loader/index.d.ts"
     },
     "./dist/components/*.js": {
+      "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js",
       "require": "./dist/components/*.js"
     },
+    "./dist/dropi-ui/*.js": {
+      "import": "./dist/dropi-ui/*.js",
+      "require": "./dist/dropi-ui/*.js"
+    },
     "./dist/dropi-ui/dropi-ui.css": "./dist/dropi-ui/dropi-ui.css"
   },
   "files": [
@@ -35,13 +40,22 @@
   "bin": {
     "@dropi/ui": "scripts/setup.js"
   },
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "build": "stencil build && cd ../dropi-ui-react && npm run build",
+    "build": "stencil build && npm run build --workspace=packages/react && npm run build --workspace=packages/angular",
+    "clear:cache": "node -e \"const fs=require('fs');['.stencil','node_modules/.cache'].forEach(p=>{try{fs.rmSync(p,{recursive:true,force:true})}catch(e){}})\"",
+    "publish:react": "npm run build && npm publish --workspace=packages/react",
+    "dev": "stencil build --dev --watch & npm run watch --workspace=packages/react",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil-test",
     "test:watch": "stencil-test --watch",
     "generate": "stencil generate",
-    "postinstall": "node scripts/postinstall.js"
+    "postinstall": "node scripts/postinstall.js",
+    "storybook": "stencil build && storybook dev -p 6006",
+    "storybook:build": "stencil build && storybook build -o storybook-static",
+    "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
     "@stencil/angular-output-target": "^1.3.0",
@@ -49,8 +63,16 @@
     "@stencil/react-output-target": "^1.4.2",
     "@stencil/vitest": "^1.8.3",
     "@stencil/vue-output-target": "^0.13.1",
+    "@storybook/addon-docs": "^8.6.18",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/blocks": "^8.6.18",
+    "@storybook/web-components": "^8.6.18",
+    "@storybook/web-components-vite": "^8.6.18",
     "@types/node": "^22.13.5",
     "@vitest/browser-playwright": "^4.0.0",
+    "lit": "^3.3.2",
+    "lit-html": "^3.3.2",
+    "storybook": "^8.6.18",
     "vitest": "^4.0.0"
   },
   "license": "MIT"

package/readme.md

@@ -42,15 +42,12 @@ Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integ
 
 ---
 
-## Cómo pasar props — regla fundamental
+## Cómo pasar props
 
-Cada prop se pasa **directamente en el JSX**, una por una. No existe un prop contenedor tipo `selectProperties` u `options` agrupadas.
+Hay **dos formas válidas**, ambas funcionan:
 
+### Forma 1 — Props individuales (React / Vanilla)
 ```tsx
-// ❌ Incorrecto — selectProperties no existe como prop
-<DropiSelect selectProperties={{ label: 'País', placeholder: 'Seleccionar' }} />
-
-// ✅ Correcto — cada prop va suelta en el tag
 <DropiSelect
   label="País"
   placeholder="Seleccionar"
@@ -59,7 +56,21 @@ Cada prop se pasa **directamente en el JSX**, una por una. No existe un prop con
 />
 ```
 
-Esto aplica para todos los componentes. Las props disponibles están listadas en cada sección de este readme.
+### Forma 2 — Objeto de compatibilidad Angular (equivalente al core)
+Los componentes principales aceptan un prop-objeto que replica la API del `@Input()` del core Angular:
+
+| Componente | Prop objeto | Equivale al `@Input()` Angular |
+|---|---|---|
+| `dropi-select` | `[selectProperties]="selectProperties"` | `SelectProperties` |
+| `dropi-input` | `[inputProperties]="inputProperties"` | `InputProperties` |
+| `dropi-text-area` | `[textAreaProperties]="textAreaProperties"` | `TextAreaProperties` |
+| `dropi-alert-modal` | `[params]="params"` | `ModalParams` |
+
+```html
+<!-- Angular — forma idéntica al core -->
+<dropi-select [selectProperties]="selectProperties" (onChangeSelect)="onChange($event)" />
+<dropi-alert-modal [visible]="visible" [params]="params" (primaryButtonEvent)="onPrimary($event)" />
+```
 
 > **Intellisense en VSCode:** si al hacer hover sobre un componente no aparecen las props, significa que `@dropi/ui-react` necesita ser compilado (`npm run build` en la carpeta `dropi-ui-react`). Después de cualquier cambio en la librería siempre hay que correr el build.
 
@@ -609,6 +620,44 @@ Burbuja de información al hover.
 
 ---
 
+### `<dropi-table>`
+
+Tabla de datos con paginación local/backend, ordenación, búsqueda y checkbox de selección.
+
+> ⚠️ Las filas van en formato **TypedField** (no objetos planos): `{ name: { type: 'text', value: 'Ana' } }`
+
+**Props principales**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `headers` | `DropiTableColumn[]` | `[]` | Columnas `{ key, label, sortable }` |
+| `data` | `DropiTableRow[]` | `[]` | Filas en formato TypedField |
+| `dropiTableConfiguration` | `DropiTableConfiguration` | `null` | Config: paginación, búsqueda, acciones |
+| `loading` | `boolean` | `false` | Indicador de carga |
+
+**Eventos**
+
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `rowsSelected` | `DropiTableRow[]` | Checkbox cambia selección |
+| `onSortChange` | `{ column, asc }` | Click en columna ordenable |
+| `onPageChange` | `number` | Cambio de página (backend) |
+| `actionClicked` | `{ row, action }` | Click en acción de fila |
+
+**Ejemplo Angular**
+```html
+<dropi-table
+  [headers]="headers"
+  [data]="data"
+  [dropiTableConfiguration]="{ backendPagination: false, showPaginator: true, pageSizeConfiguration: [5, 10, 25] }"
+  [loading]="loading"
+  (onSortChange)="onSort($event)"
+  (rowsSelected)="onSelect($event)"
+/>
+```
+
+---
+
 ### `<dropi-modal>`
 
 Ventana de diálogo con overlays.

package/scripts/setup.js

@@ -94,21 +94,31 @@ async function run() {
     
     if (styleTarget) {
       let content = fs.readFileSync(path.join(projectRoot, styleTarget), 'utf8');
+      let changed = false;
+
+      // Migrar loader antiguo → nuevo bootstrap (si tiene defineCustomElements del loader)
+      if (content.includes("from '@dropi/ui/loader'") || content.includes('from "@dropi/ui/loader"')) {
+        content = content
+          .replace(/\/\/\s*@ts-ignore[^\n]*\n/g, '')
+          .replace(/import\s+\{[^}]*defineCustomElements[^}]*\}\s+from\s+['"]@dropi\/ui\/loader['"];?\n?/g, '')
+          .replace(/defineCustomElements\([^)]*\);?\n?/g, '');
+        log(`Loader antiguo eliminado de ${styleTarget}`, 'ok');
+        changed = true;
+      }
+
+      // Agregar bootstrap side-effect si no está
+      if (!content.includes('dropi-ui.esm.js')) {
+        content = `// @ts-ignore\nimport '@dropi/ui/dist/dropi-ui/dropi-ui.esm.js';\n` + content;
+        changed = true;
+      }
+
+      // Agregar CSS si no está
       if (!content.includes('dropi-ui.css')) {
         content = `${cssImport}\n` + content;
-        
-        // 4. Loader (defineCustomElements) si no es React wrapper
-        if (!isReact || !content.includes('defineCustomElements')) {
-          if (!content.includes('defineCustomElements')) {
-            content = `import { defineCustomElements } from '@dropi/ui/loader';\n` + content;
-            if (content.includes('createRoot')) {
-              content = content.replace('createRoot', 'defineCustomElements();\ncreateRoot');
-            } else {
-              content += `\ndefineCustomElements();\n`;
-            }
-          }
-        }
-        
+        changed = true;
+      }
+
+      if (changed) {
         fs.writeFileSync(path.join(projectRoot, styleTarget), content);
         log(`Configuración aplicada en ${styleTarget}`, 'ok');
       }
@@ -170,16 +180,102 @@ async function run() {
     }
   }
 
-  // 7. Vite Patch (optimizeDeps)
-  const viteFiles = ['vite.config.ts', 'vite.config.js'];
-  const viteFile = viteFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
-  if (viteFile) {
-    let content = fs.readFileSync(path.join(projectRoot, viteFile), 'utf8');
-    if (!content.includes('optimizeDeps')) {
-      const patch = `\n  optimizeDeps: {\n    exclude: ['@dropi/ui/loader', '@dropi/ui'],\n  },`;
-      content = content.replace(/defineConfig\(\{/, `defineConfig({${patch}`);
-      fs.writeFileSync(path.join(projectRoot, viteFile), content);
-      log('Vite: optimizeDeps.exclude configurado.', 'ok');
+  // 7. Vite Patch (React/Vue)
+  if (isReact || isVue) {
+    const viteFiles = ['vite.config.ts', 'vite.config.js'];
+    const viteFile = viteFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
+    if (viteFile) {
+      const isTs = viteFile.endsWith('.ts');
+      const existing = fs.readFileSync(path.join(projectRoot, viteFile), 'utf8');
+      const alreadyConfigured = existing.includes('dropi-components-stub') || existing.includes('dropiWatchPlugin');
+
+      if (!alreadyConfigured) {
+        // Detectar el import del framework (react o vue)
+        const frameworkImport = isReact
+          ? "import react from \"@vitejs/plugin-react\";"
+          : "import vue from \"@vitejs/plugin-vue\";";
+        const frameworkPlugin = isReact ? 'react()' : 'vue()';
+
+        const dropiViteConfig = `import { defineConfig${isTs ? ', type Plugin' : ''} } from "vite";
+${frameworkImport}
+import path from "path";
+import fs from "fs";
+
+// Path real del symlink @dropi/ui → garantiza que se usa siempre el código local
+const dropiUiRealPath = (() => {
+  try { return fs.realpathSync(path.join(process.cwd(), 'node_modules/@dropi/ui')); }
+  catch { return path.join(process.cwd(), 'node_modules/@dropi/ui'); }
+})();
+
+// Stub para dist/components/<component>.js cuando no existe (stencil --dev --watch no los genera).
+// El lazy loader de dropi-ui.esm.js registra los componentes con el CSS actualizado.
+const dropiComponentsStubPlugin${isTs ? ': Plugin' : ''} = {
+  name: 'dropi-components-stub',
+  apply: 'serve',
+  enforce: 'pre',
+  resolveId(id) {
+    let filePath = null;
+    if (id.match(/^@dropi\\/ui\\/dist\\/components\\/.+\\.js$/)) {
+      filePath = path.join(dropiUiRealPath, id.replace('@dropi/ui', ''));
+    } else if (id.endsWith('.js') && id.includes('/dist/components/') && id.includes('dropi')) {
+      filePath = id;
+    }
+    if (filePath && !fs.existsSync(filePath)) {
+      return '\\0dropi-stub:' + filePath;
+    }
+  },
+  load(id) {
+    if (id.startsWith('\\0dropi-stub:')) {
+      const fileName = id.split('/').pop()?.replace('.js', '') ?? 'DropiUnknown';
+      const className = fileName
+        .replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+        .replace(/^[a-z]/, c => c.toUpperCase());
+      return \`export class \${className} extends HTMLElement {} export function defineCustomElement() {}\`;
+    }
+  },
+};
+
+// Detecta cambios en dist/ de la librería y fuerza full-reload en el browser.
+const dropiWatchPlugin${isTs ? ': Plugin' : ''} = {
+  name: 'dropi-watch',
+  apply: 'serve',
+  configureServer(server) {
+    const distPath = path.join(dropiUiRealPath, 'dist');
+    if (fs.existsSync(distPath)) server.watcher.add(distPath);
+  },
+  handleHotUpdate({ file, server }) {
+    if (file.includes('dropi-ui') && file.includes('dist')) {
+      for (const [modPath, mods] of server.moduleGraph.fileToModulesMap) {
+        if (modPath.includes('dropi-ui') && modPath.includes('dist')) {
+          for (const mod of mods) server.moduleGraph.invalidateModule(mod);
+        }
+      }
+      server.ws.send({ type: 'full-reload' });
+      return [];
+    }
+  },
+};
+
+// https://vite.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: { '@dropi/ui': dropiUiRealPath },
+  },
+  optimizeDeps: {
+    exclude: ['@dropi/ui', '@dropi/ui-react'],
+  },
+  server: {
+    headers: { 'Cache-Control': 'no-cache, no-store, must-revalidate' },
+    fs: { allow: [process.cwd(), dropiUiRealPath] },
+  },
+  plugins: [${frameworkPlugin}, dropiComponentsStubPlugin, dropiWatchPlugin],
+});
+`;
+        fs.writeFileSync(path.join(projectRoot, viteFile), dropiViteConfig);
+        log('Vite: configuración completa de @dropi/ui aplicada.', 'ok');
+      } else {
+        log('Vite: configuración de @dropi/ui ya presente, omitiendo.', 'info');
+      }
     }
   }
 

package/skills/install-dropi-ui/skill.md

@@ -8,18 +8,23 @@ allowed-tools: Bash, Read, Write, Edit, Glob
 
 Automatiza la instalación y configuración completa de `@dropi/ui` en el proyecto actual.
 
-## REGLA CRÍTICA — Lazy Loading obligatorio
+## REGLA CRÍTICA — Bootstrap con side-effect import
 
-Los componentes SIEMPRE deben cargarse por lazy loading vía el loader:
+Los componentes SIEMPRE deben inicializarse con el bootstrap de side-effect:
 ```ts
-import { defineCustomElements } from '@dropi/ui/loader'
-defineCustomElements()
+// @ts-ignore
+import '@dropi/ui/dist/dropi-ui/dropi-ui.esm.js'
 ```
-**PROHIBIDO** importar componentes directamente:
+Este import auto-registra todos los web components en modo lazy (funciona en dev y prod, sin necesitar un prod build previo).
+
+**PROHIBIDO** usar el loader antiguo o importar componentes directamente:
 ```ts
-// ❌ NUNCA hacer esto
+// ❌ NUNCA — solo funciona después de prod build
+import { defineCustomElements } from '@dropi/ui/loader'
+defineCustomElements()
+
+// ❌ NUNCA
 import '@dropi/ui/dist/components/dropi-button.js'
-import { DropiButton } from '@dropi/ui/dist/components'
 ```
 
 ---
@@ -51,15 +56,15 @@ Una vez finalizado el script, verifica que:
 > Usa estos pasos solo si el comando anterior no puede ejecutarse por restricciones del entorno.
 
 1. **Instalar dependencias**: `npm install @dropi/ui` (y `@dropi/ui-react` si es React).
-2. **Vite Fix**: Agregar `optimizeDeps.exclude: ['@dropi/ui/loader', '@dropi/ui']` en `vite.config`.
+2. **Vite Fix**: Agregar `optimizeDeps.exclude: ['@dropi/ui']` en `vite.config`.
 3. **Estilos**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en el entry point.
-4. **Loader**: Llamar a `defineCustomElements()` de `@dropi/ui/loader` antes del renderizado.
+4. **Bootstrap**: Agregar el side-effect import `// @ts-ignore\nimport '@dropi/ui/dist/dropi-ui/dropi-ui.esm.js'` antes del render.
 5. **Iconos**: Crear un enlace simbólico del sprite:
    `ln -sf $(pwd)/node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg public/assets/icons/symbol/svg/sprite.css.svg`
 6. **TS Config**: Asegurar `skipLibCheck: true`.
 7. **Validar**: Ejecutar `npm run build`.
 
 ## Reglas Críticas
-- **Lazy Loading**: NUNCA importar componentes directamente. Usar siempre el loader.
+- **Bootstrap**: NUNCA usar `@dropi/ui/loader` (solo funciona con prod build). Usar siempre el side-effect import.
 - **Iconos**: El sprite DEBE estar en `public/assets/icons/symbol/svg/sprite.css.svg` para que `<dropi-icon>` funcione.
 - Si el build falla, mostrar el error exacto y resolverlo antes de reportar éxito

package/dist/cjs/dropi-input.cjs.entry.js

@@ -1,210 +0,0 @@
-'use strict';
-
-var index = require('./index-DcOH2ZjX.js');
-
-const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.input-container--has-icon label.label-bottom{left:28px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
-
-const DropiInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiInput = index.createEvent(this, "dropiInput", 7);
-        this.dropiChange = index.createEvent(this, "dropiChange", 7);
-        this.dropiFocus = index.createEvent(this, "dropiFocus", 7);
-        this.dropiBlur = index.createEvent(this, "dropiBlur", 7);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    // ── Identification ──────────────────────────────────────────
-    /** Input id. Defaults to label value. */
-    inputId = '';
-    /** Name attribute for native form submission */
-    name = '';
-    // ── Content ─────────────────────────────────────────────────
-    /** Floating or fixed label text */
-    label = '';
-    /** Placeholder text (visible in fixedLabel mode or on focus) */
-    placeholder = ' ';
-    /** Current value (controlled) */
-    value = '';
-    /** Max character length */
-    maxlength;
-    // ── Behavior ────────────────────────────────────────────────
-    /** Disable the input */
-    disabled = false;
-    /** Mark as required (shows asterisk when showAsterisk is true) */
-    required = false;
-    /** Show the required asterisk on the label */
-    showAsterisk = true;
-    /** Show label above the input (fixed), instead of floating inside */
-    fixedLabel = false;
-    /** Keyboard input mode hint */
-    inputMode = 'text';
-    // ── Input type modifiers ────────────────────────────────────
-    /** Show password visibility toggle (renders as password field) */
-    passwordInput = false;
-    /** Apply thousand separator formatting (e.g. 1,000,000) */
-    moneyFormat = false;
-    /** Apply thousand separator without currency symbol */
-    thousandSeparator = false;
-    /** Only allow numeric characters */
-    onlyNumbers = false;
-    /** Allow decimal point when onlyNumbers is true */
-    allowDecimals = false;
-    /** Only allow letter characters */
-    onlyLetters = false;
-    // ── Icon ────────────────────────────────────────────────────
-    /** Icon name shown inside the input (only visible when value is not empty) */
-    icon = '';
-    /** Color token for the icon */
-    iconColor = 'Gray-Gray-400';
-    // ── Validation ──────────────────────────────────────────────
-    /** Mark the field as invalid (consumer-controlled) */
-    invalid = false;
-    /** Helper / error text shown below the field */
-    helperText = '';
-    /** Only show helperText when the field is invalid */
-    showHelperOnlyOnError = false;
-    // ── Internal state ──────────────────────────────────────────
-    showPassword = false;
-    touched = false;
-    // ── Events ──────────────────────────────────────────────────
-    /** Emitted on every keystroke with the current value */
-    dropiInput;
-    /** Emitted on blur with the final value */
-    dropiChange;
-    /** Emitted on focus */
-    dropiFocus;
-    /** Emitted on blur */
-    dropiBlur;
-    valueChanged(val) {
-        this.internals.setFormValue(val);
-    }
-    disabledChanged(val) {
-        this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');
-    }
-    componentWillLoad() {
-        this.internals.setFormValue(this.value ?? '');
-    }
-    // ── Handlers ────────────────────────────────────────────────
-    handleInput(e) {
-        let val = e.target.value;
-        if (this.onlyNumbers)
-            val = this.filterNumbers(val);
-        if (this.onlyLetters)
-            val = this.filterLetters(val);
-        if (this.moneyFormat || this.thousandSeparator)
-            val = this.formatThousands(val, this.moneyFormat);
-        this.value = val;
-        this.internals.setFormValue(val);
-        this.dropiInput.emit(val);
-    }
-    handleKeyDown(e) {
-        if ((this.onlyNumbers || this.moneyFormat || this.thousandSeparator) && !this.isAllowedNumberKey(e)) {
-            e.preventDefault();
-        }
-        if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
-            e.preventDefault();
-        }
-    }
-    handleFocus() {
-        this.dropiFocus.emit();
-    }
-    handleBlur() {
-        this.touched = true;
-        this.dropiChange.emit(this.value);
-        this.dropiBlur.emit();
-    }
-    togglePassword() {
-        if (this.disabled)
-            return;
-        this.showPassword = !this.showPassword;
-    }
-    // ── Helpers ─────────────────────────────────────────────────
-    filterNumbers(val) {
-        const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;
-        return val.replace(pattern, '');
-    }
-    filterLetters(val) {
-        return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g, '');
-    }
-    isAllowedNumberKey(e) {
-        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];
-        if (allowed.includes(e.key))
-            return true;
-        if (e.ctrlKey || e.metaKey)
-            return true; // copy/paste/select-all
-        if (/^[0-9]$/.test(e.key))
-            return true;
-        if (this.allowDecimals && e.key === '.')
-            return true;
-        return false;
-    }
-    isAllowedLetterKey(e) {
-        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];
-        if (allowed.includes(e.key))
-            return true;
-        if (e.ctrlKey || e.metaKey)
-            return true;
-        return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);
-    }
-    formatThousands(val, withCurrency) {
-        const raw = val.replace(/[^0-9.]/g, '');
-        const [integer, decimal] = raw.split('.');
-        const formatted = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;
-        return withCurrency ? `$${result}` : result;
-    }
-    // ── Computed ─────────────────────────────────────────────────
-    get resolvedId() {
-        return this.inputId || this.label;
-    }
-    get inputType() {
-        if (this.passwordInput)
-            return this.showPassword ? 'text' : 'password';
-        return 'text';
-    }
-    get showHelper() {
-        if (!this.helperText)
-            return false;
-        if (this.showHelperOnlyOnError)
-            return this.invalid && this.touched;
-        return true;
-    }
-    get isInvalid() {
-        return this.invalid && this.touched;
-    }
-    // ── Render ───────────────────────────────────────────────────
-    render() {
-        const showAsterisk = this.required && this.showAsterisk && !this.disabled;
-        const showIconInline = !!this.icon;
-        return (index.h("div", { key: '49a1b6d02f59e1c67a70a219a7f7d0fbbd2a460d', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: '326d90a0361fe5ab90adee1479439aab34c99951', class: "input-label Body-S-Regular" }, this.label, showAsterisk && index.h("span", { key: 'cf5677966af627addc69a2735803845b54f41a9f', class: "asterisk" }, " *"))), index.h("div", { key: '1f7b7c614dc424ad4b1aa1819d05573fd08b30a1', class: "form-group" }, index.h("div", { key: 'c2f88e7f7f2f0da585e8ac20c6373b451290dfdd', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (index.h("dropi-icon", { key: 'c6f7cc14c56452768e4e49092a2be7968951255b', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (index.h("dropi-icon", { key: '5ddbd5e176b61dc46d817fa6a32d3d3c0e2cc589', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: '51a17c36e9ed49fef0d2f0ea97d4aca10e4722d6', id: this.resolvedId, class: {
-                'form-control': true,
-                'form-control-valid': !this.isInvalid && this.touched && !!this.value,
-                'form-control-invalid': this.isInvalid,
-                'padding-icon': showIconInline,
-                'text-password': this.passwordInput && !this.showPassword,
-                'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (index.h("label", { key: '9fa96019e84dd543e3e74a15e8f0681ea7bb7823', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && index.h("span", { key: '740936c43be963fc7383e3ae6eb21c9d02ffde03', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: '9381fc81799162f20df8d2df914adc4ebee5e8ed', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: 'fea3d178b9b00f87d2a266cb665fca2774ec963a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: '390caaa2dfdfb673b8d1fdd8fada2d7c2f6ba764', class: {
-                'disabled-helper': this.disabled,
-                'invalid-color': this.isInvalid,
-            } }, this.helperText)))))));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "value": [{
-                "valueChanged": 0
-            }],
-        "disabled": [{
-                "disabledChanged": 0
-            }]
-    }; }
-};
-DropiInput.style = dropiInputCss();
-
-exports.dropi_input = DropiInput;