npm - @dropi/ui - Versions diffs - 0.1.24 → 0.1.25 - Mend

@dropi/ui 0.1.24 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (490) hide show

package/dist/dropi-ui/index.esm.js CHANGED Viewed

@@ -0,0 +1,4 @@
+//# sourceMappingURL=index.esm.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/dropi-ui/index.esm.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md CHANGED Viewed

@@ -3,8 +3,8 @@
 Librería de Web Components del Design System de Dropi, construida con **Stencil.js v4**.
 Genera componentes reutilizables para Angular, React y Vue desde una única base de código.
-- **Paquete npm:** `@dropi/ui` (v0.1.17)
-- **React wrappers:** `@dropi/ui-react`
+- **Paquete npm:** `@dropi/ui` (v0.1.24)
+- **React wrappers:** `@dropi/ui-react` (v0.1.9)
 ---
@@ -13,7 +13,7 @@ Genera componentes reutilizables para Angular, React y Vue desde una única base
 Ejecuta este comando en la raíz de tu proyecto:
 ```bash
-npx @dropi/create-dropi-ui
+npx @dropi/ui setup
 ```
 Detecta tu framework (Angular, React, Next.js), instala las dependencias correctas e inyecta la configuración automáticamente.
@@ -29,7 +29,7 @@ Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integ
 |---|---|
 | Angular | `npm install @dropi/ui @dropi/ui-angular` |
 | React | `npm install @dropi/ui @dropi/ui-react` |
-| Next.js SSR | `npm install @dropi/ui @dropi/ui-react && npm install --save-dev @stencil/ssr` |
+| Next.js SSR | `npm install @dropi/ui @dropi/ui-react && npm install --save-dev @stencil/ssr --legacy-peer-deps` |
 ### 2. Estilos e Iconos
 - **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css`.
@@ -41,8 +41,6 @@ Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integ
 ---
----
 ## 🚀 Soporte para Next.js (SSR / Zero Flash)
 Para habilitar el **Server Side Rendering (SSR)** y eliminar cualquier parpadeo visual, sigue estos pasos:
@@ -54,6 +52,10 @@ Envuelve tu configuración en el plugin `withStencil`:
 // next.config.ts
 import withStencil from "@stencil/ssr/next";
+const nextConfig = {
+  transpilePackages: ["@dropi/ui-react", "@dropi/ui"],
+};
 export default withStencil({
   from: "@dropi/ui-react",
   module: import("@dropi/ui-react/next"),
@@ -61,16 +63,29 @@ export default withStencil({
 })(nextConfig);
 ```
-### 2. Configuración del Layout (Crítico)
+### 2. Scripts en package.json (Next.js 16)
+Next.js 16 usa Turbopack por defecto, que es incompatible con `@stencil/ssr`. Agrega `--webpack`:
+```json
+"dev": "next dev --webpack",
+"build": "next build --webpack"
+```
+### 3. Configuración del Layout (Crítico)
 Añade `suppressHydrationWarning` al `<body>` en `layout.tsx` para evitar que el DevTools o extensiones rompan la hidratación.
 ```tsx
 <body suppressHydrationWarning>{children}</body>
 ```
-### 3. Uso de Alias para Props Dinámicas
-En componentes con `"use client"` y props dinámicas, usa un alias en el import para evitar flashes:
-`import { DropiButton as Btn } from "@dropi/ui-react/next"`
+### 4. Importar desde `/next` en Server Components
+En páginas o layouts (Server Components), importa desde `@dropi/ui-react/next`:
+```tsx
+import { DropiButton, DropiInput } from "@dropi/ui-react/next";
+```
+En componentes con `"use client"`, importa desde `@dropi/ui-react` normalmente.
 ---
@@ -84,7 +99,7 @@ Hay **dos formas válidas**, ambas funcionan:
   label="País"
   placeholder="Seleccionar"
   options={options}
-  onDropiChange={(e) => setSelected(e.detail)}
+  onOnChangeSelect={(e) => setSelected(e.detail)}
 />
 ```
@@ -114,12 +129,14 @@ Todos los eventos son `CustomEvent`. El valor emitido **siempre viene en `e.deta
 ```typescript
 // ❌ Incorrecto — e es el CustomEvent completo, no el valor
-onDropiChange={(e) => console.log(e)}
+onOnInput={(e) => console.log(e)}
 // ✅ Correcto — e.detail tiene el valor real
-onDropiChange={(e) => console.log(e.detail)}
+onOnInput={(e) => console.log(e.detail)}
 ```
+> **Nombres de eventos en React:** Los wrappers React siguen el patrón `on<EventName>`. Si el evento Stencil empieza con `on` (ej. `onClick`), el wrapper lo duplica: `onOnClick`. Si empieza con `dropi` (ej. `dropiChange`), queda `onDropiChange`.
 ---
 ## Uso en React (Métodos Imperativos)
@@ -161,9 +178,9 @@ Botón de acción principal con múltiples variantes de tipo, apariencia, tamañ
 **Eventos**
-| Evento | `e.detail` | Cuándo |
+| Evento React | `e.detail` | Cuándo |
 |---|---|---|
-| `dropiClick` | `MouseEvent` | Al hacer click (no se emite si `state` es `disabled` o `loading`) |
+| `onOnClick` | `MouseEvent` | Al hacer click (no se emite si `state` es `disabled` o `loading`) |
 **Ejemplo React**
 ```tsx
@@ -171,13 +188,13 @@ Botón de acción principal con múltiples variantes de tipo, apariencia, tamañ
   text="Guardar"
   severity="primary"
   size="normal"
-  onDropiClick={(e) => console.log(e.detail)}
+  onOnClick={(e) => console.log(e.detail)}
 />
 ```
 **Ejemplo Angular**
 ```html
-<dropi-button text="Guardar" severity="primary" (dropiClick)="onSave($event)"></dropi-button>
+<dropi-button text="Guardar" severity="primary" (onClick)="onSave($event)"></dropi-button>
 ```
 ---
@@ -195,9 +212,9 @@ Checkbox estilizado con soporte para formularios nativos.
 **Eventos**
-| Evento | `e.detail` | Cuándo |
+| Evento React | `e.detail` | Cuándo |
 |---|---|---|
-| `dropiChange` | `boolean` | Al cambiar el estado (`true` = marcado, `false` = desmarcado) |
+| `onOnChange` | `boolean` | Al cambiar el estado (`true` = marcado, `false` = desmarcado) |
 > `e.detail` es el boolean directamente. Si ves "el objeto completo" es porque estás leyendo `e` en vez de `e.detail`.
@@ -207,13 +224,13 @@ const [checked, setChecked] = useState(false)
 <DropiCheckbox
   checked={checked}
-  onDropiChange={(e) => setChecked(e.detail)}
+  onOnChange={(e) => setChecked(e.detail)}
 />
 ```
 **Ejemplo Angular**
 ```html
-<dropi-checkbox [checked]="checked" (dropiChange)="checked = $event.detail"></dropi-checkbox>
+<dropi-checkbox [checked]="checked" (onChange)="checked = $event.detail"></dropi-checkbox>
 ```
 ---
@@ -231,15 +248,15 @@ Toggle switch on/off.
 **Eventos**
-| Evento | `e.detail` | Cuándo |
+| Evento React | `e.detail` | Cuándo |
 |---|---|---|
-| `dropiChange` | `boolean` | Al togglear (`true` = encendido, `false` = apagado) |
+| `onOnChange` | `boolean` | Al togglear (`true` = encendido, `false` = apagado) |
 **Ejemplo React**
 ```tsx
 const [on, setOn] = useState(false)
-<DropiSwitch isChecked={on} onDropiChange={(e) => setOn(e.detail)} />
+<DropiSwitch isChecked={on} onOnChange={(e) => setOn(e.detail)} />
 ```
 ---
@@ -277,12 +294,12 @@ Campo de texto con label flotante, validación, ícono, toggle de contraseña, f
 **Eventos**
-| Evento | `e.detail` | Cuándo |
+| Evento React | `e.detail` | Cuándo |
 |---|---|---|
-| `dropiInput` | `string` | En cada tecla (keystroke) |
-| `dropiChange` | `string` | Al perder el foco (blur) |
-| `dropiFocus` | `void` | Al enfocar el campo |
-| `dropiBlur` | `void` | Al desenfocar el campo |
+| `onOnInput` | `string` | En cada tecla (keystroke) |
+| `onOnChange` | `string` | Al perder el foco (blur) |
+| `onOnFocus` | `void` | Al enfocar el campo |
+| `onOnBlur` | `void` | Al desenfocar el campo |
 **Ejemplo React**
 ```tsx
@@ -291,8 +308,8 @@ const [value, setValue] = useState('')
 <DropiInput
   label="Nombre"
   value={value}
-  onDropiInput={(e) => setValue(e.detail)}
-  onDropiChange={(e) => console.log('blur:', e.detail)}
+  onOnInput={(e) => setValue(e.detail)}
+  onOnChange={(e) => console.log('blur:', e.detail)}
   required
   invalid={value.length < 3}
   helperText="Mínimo 3 caracteres"
@@ -326,12 +343,12 @@ const [value, setValue] = useState('')
 **Eventos**
-| Evento | `e.detail` | Cuándo |
+| Evento React | `e.detail` | Cuándo |
 |---|---|---|
-| `dropiInput` | `string` | En cada tecla (keystroke) |
-| `dropiChange` | `string` | Al perder el foco (blur) |
-| `dropiFocus` | `void` | Al enfocar el campo |
-| `dropiBlur` | `void` | Al desenfocar el campo |
+| `onDropiInput` | `string` | En cada tecla (keystroke) |
+| `onDropiChange` | `string` | Al perder el foco (blur) |
+| `onDropiFocus` | `void` | Al enfocar el campo |
+| `onDropiBlur` | `void` | Al desenfocar el campo |
 **Ejemplo React**
 ```tsx
@@ -407,13 +424,13 @@ interface SelectOptionGroup {
 **Eventos**
-| Evento | `e.detail` | Cuándo |
+| Evento React | `e.detail` | Cuándo |
 |---|---|---|
-| `dropiChange` | `SelectOption` (single) o `SelectOption[]` (multi) | Al seleccionar una opción |
-| `dropiClear` | `void` | Al limpiar la selección |
-| `dropiSearch` | `string` | Al escribir en el buscador |
-| `dropiScrollEnd` | `void` | Al llegar al final del scroll (paginación) |
-| `dropiKeyEnter` | `KeyboardEvent` | Al presionar Enter en el buscador |
+| `onOnChangeSelect` | `SelectOption` (single) o `SelectOption[]` (multi) | Al seleccionar una opción |
+| `onOnClear` | `void` | Al limpiar la selección |
+| `onOnSearch` | `string` | Al escribir en el buscador |
+| `onScrolledToEnd` | `void` | Al llegar al final del scroll (paginación) |
+| `onOnKeyEnter` | `KeyboardEvent` | Al presionar Enter en el buscador |
 **Ejemplo React**
 ```tsx
@@ -428,7 +445,7 @@ const options = [
   label="País"
   options={options}
   searchEnabled
-  onDropiChange={(e) => setSelected(e.detail)}
+  onOnChangeSelect={(e) => setSelected(e.detail)}
 />
 ```
@@ -450,9 +467,9 @@ Radio button estilizado con label y soporte para grupos.
 **Eventos**
-| Evento | `e.detail` | Cuándo |
+| Evento React | `e.detail` | Cuándo |
 |---|---|---|
-| `dropiChange` | `Event` (evento nativo) | Al seleccionar el radio |
+| `onOnChange` | `Event` (evento nativo) | Al seleccionar el radio |
 > A diferencia del checkbox, emite el `Event` nativo. Para controlar el estado, maneja la prop `checked` desde el padre.
@@ -460,8 +477,8 @@ Radio button estilizado con label y soporte para grupos.
 ```tsx
 const [selected, setSelected] = useState('a')
-<DropiRadioButton label="Opción A" name="grupo" inputId="opt-a" checked={selected === 'a'} onDropiChange={() => setSelected('a')} />
-<DropiRadioButton label="Opción B" name="grupo" inputId="opt-b" checked={selected === 'b'} onDropiChange={() => setSelected('b')} />
+<DropiRadioButton label="Opción A" name="grupo" inputId="opt-a" checked={selected === 'a'} onOnChange={() => setSelected('a')} />
+<DropiRadioButton label="Opción B" name="grupo" inputId="opt-b" checked={selected === 'b'} onOnChange={() => setSelected('b')} />
 ```
 ---
@@ -549,11 +566,17 @@ Sistema de pestañas con contadores y estados.
 | `tabs` | `TabItem[]` | `[]` | Lista de tabs `{ id, label, counter, active, disabled, completed }` |
 | `showIcon` | `boolean` | `false` | Mostrar check si `completed` |
+**Eventos**
+| Evento React | `e.detail` | Cuándo |
+|---|---|---|
+| `onOnIndexChanged` | `TabItem` | Al cambiar de tab |
 **Ejemplo React**
 ```tsx
 <DropiTabs
   tabs={[{ id: 1, label: 'Activos', counter: 5 }]}
-  onDropiTabChange={(e) => console.log(e.detail)}
+  onOnIndexChanged={(e) => console.log(e.detail)}
 />
 ```
@@ -606,11 +629,17 @@ Control de paginación.
 | `rows` | `number` | `10` | Registros por página |
 | `showPageSizeSelector` | `boolean` | `false` | Selector de cantidad por página |
+**Eventos**
+| Evento React | `e.detail` | Cuándo |
+|---|---|---|
+| `onPageChange` | `number` | Al cambiar de página |
 **Ejemplo React**
 ```tsx
 <DropiPaginator
   total={100}
-  onDropiPageChange={(e) => console.log(e.detail.page)}
+  onPageChange={(e) => console.log(e.detail)}
 />
 ```
@@ -629,6 +658,12 @@ Pantalla de "no hay datos".
 | `actionLabel` | `string` | `''` | Texto botón principal |
 | `secondaryLabel` | `string` | `''` | Texto botón secundario |
+**Eventos**
+| Evento React | `e.detail` | Cuándo |
+|---|---|---|
+| `onButtonClickEvent` | `void` | Al hacer click en el botón principal |
 ---
 ### `<dropi-tooltip>` (V2)
@@ -669,12 +704,14 @@ Tabla de datos con paginación local/backend, ordenación, búsqueda y checkbox
 **Eventos**
-| Evento | `e.detail` | Cuándo |
+| Evento React | `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 |
+| `onDropiSelection` | `number[]` | Checkbox cambia selección |
+| `onDropiSort` | `{ key: string; dir: SortDir }` | Click en columna ordenable |
+| `onDropiPageChange` | `number` | Cambio de página (backend) |
+| `onDropiAction` | `{ row: TableRow; action: any }` | Click en acción de fila |
+| `onDropiRowClick` | `{ row: TableRow; index: number }` | Click en una fila |
+| `onDropiSearch` | `string` | Al buscar |
 **Ejemplo Angular**
 ```html
@@ -683,8 +720,8 @@ Tabla de datos con paginación local/backend, ordenación, búsqueda y checkbox
   [data]="data"
   [dropiTableConfiguration]="{ backendPagination: false, showPaginator: true, pageSizeConfiguration: [5, 10, 25] }"
   [loading]="loading"
-  (onSortChange)="onSort($event)"
-  (rowsSelected)="onSelect($event)"
+  (dropiSort)="onSort($event)"
+  (dropiSelection)="onSelect($event)"
 />
 ```
@@ -702,19 +739,36 @@ Ventana de diálogo con overlays.
 | `size` | `'s' \| 'm' \| 'l' \| 'full' ...` | `'m'` | Tamaño |
 | `visible` | `boolean` | `false` | Controlar visibilidad vía prop |
+**Eventos**
+| Evento React | `e.detail` | Cuándo |
+|---|---|---|
+| `onOnShow` | `void` | Al abrir el modal |
+| `onOnHide` | `void` | Al cerrar el modal |
+| `onVisibleChange` | `boolean` | Al cambiar `visible` |
 **Ejemplo React (Imperativo)**
 ```tsx
 const modalRef = useRef<any>(null);
 const Modal = DropiModal as any;
-<Modal ref={modalRef} header="Mi Modal">
+<Modal ref={modalRef} header="Mi Modal" onOnHide={() => console.log('cerrado')}>
   <p>Contenido</p>
   <div slot="footer">
-     <DropiButton text="Cerrar" onDropiClick={() => modalRef.current.hide()} />
+     <DropiButton text="Cerrar" onOnClick={() => modalRef.current.hide()} />
   </div>
 </Modal>
 ```
+**Ejemplo React (Declarativo con `visible`)**
+```tsx
+const [open, setOpen] = useState(false);
+<DropiModal visible={open} header="Confirmar" onOnHide={() => setOpen(false)}>
+  <p>¿Estás seguro?</p>
+</DropiModal>
+```
 ---
 ### `<dropi-toast>`

package/dist/cjs/dropi-accordion-item.cjs.entry.js DELETED Viewed

@@ -1,54 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiAccordionItemCss = () => `:host{display:block;border-bottom:1px solid var(--Gray-Gray-100)}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border:none;cursor:pointer;text-align:left}.accordion-header-left{display:flex;align-items:center;gap:8px}.accordion-title{font-size:var(--font-size-m);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-700)}.accordion-chevron{transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-out}.accordion-content{padding:0 16px 16px 16px}`;
-const DropiAccordionItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /** The title of the item — matches Angular `sectionTitle` */
-    sectionTitle = '';
-    /** Index of the item — matches Angular `index` */
-    index;
-    /** Whether the section is expanded */
-    open = false;
-    /** Disable toggling */
-    disabled = false;
-    /** Icon name before title */
-    preIcon = '';
-    contentHeight = '0px';
-    contentRef;
-    openChanged(val) {
-        this.updateHeight(val);
-    }
-    componentDidLoad() {
-        this.updateHeight(this.open);
-    }
-    updateHeight(open) {
-        if (!this.contentRef)
-            return;
-        this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';
-    }
-    handleToggle() {
-        if (this.disabled)
-            return;
-        // Notify parent if needed, or just toggle locally
-        this.el.closest('dropi-accordion');
-        this.open = !this.open;
-        setTimeout(() => this.updateHeight(this.open), 0);
-    }
-    render() {
-        return (index.h("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, index.h("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, index.h("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && index.h("dropi-icon", { key: '5fea3e2916fe5dfb6c1435f08c3b63aca4656523', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), index.h("span", { key: '3ad504dcf5d8b4f05d11a0e951a81b79428de3ec', class: "accordion-title" }, this.sectionTitle)), index.h("span", { key: 'bd44cf2fe9989fc80badb6e46a33a9d699c90f49', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, index.h("dropi-icon", { key: '7a4b261df5ffd4c6276e4cccc6bc5e8f8e43a717', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), index.h("div", { key: 'cb8789f49d4c83e33f2c366b90220b79b5619502', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, index.h("div", { key: '72d302242a40c9aa60a941814ac311a540b319f6', class: "accordion-content" }, index.h("slot", { key: 'b5a4a42f0d366f1f0409f719a52d5af11d77e3c3' })))));
-    }
-    static get watchers() { return {
-        "open": [{
-                "openChanged": 0
-            }]
-    }; }
-};
-DropiAccordionItem.style = dropiAccordionItemCss();
-exports.dropi_accordion_item = DropiAccordionItem;

package/dist/cjs/dropi-accordion.cjs.entry.js DELETED Viewed

@@ -1,19 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiAccordionCss = () => `:host{display:block;width:100%;margin-bottom:-1px}*,*::before,*::after{box-sizing:border-box}.accordion{border-top:1px solid var(--Gray-Gray-100,#e6eaf2);border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-600, #475066);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}`;
-const DropiAccordion = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
-    multiple = false;
-    render() {
-        return (index.h("div", { key: '15575b05adec26235378bb459cdf158bdabe2852', class: "accordion-container" }, index.h("slot", { key: 'e5411aee85b69e50c777657b0cb2aa7d04d09fa4' })));
-    }
-};
-DropiAccordion.style = dropiAccordionCss();
-exports.dropi_accordion = DropiAccordion;

package/dist/cjs/dropi-alert-legacy.cjs.entry.js DELETED Viewed

@@ -1,39 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiAlertLegacyCss = () => `:host{display:block;margin:10px 0}.alert-legacy{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--Border-2);font-size:var(--font-size-s)}.alert-legacy--success{background:var(--Success-Success-50);color:var(--Success-Success-700);border:1px solid var(--Success-Success-200)}.alert-legacy--error{background:var(--Error-Error-50);color:var(--Error-Error-700);border:1px solid var(--Error-Error-200)}.alert-legacy--warning{background:var(--Warning-Warning-50);color:var(--Warning-Warning-700);border:1px solid var(--Warning-Warning-200)}.alert-legacy--info{background:var(--Info-Info-50);color:var(--Info-Info-700);border:1px solid var(--Info-Info-200)}.alert-legacy__close{background:transparent;border:none;font-size:20px;cursor:pointer;color:currentColor;opacity:0.6}.alert-legacy__close:hover{opacity:1}`;
-const DropiAlertLegacy = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Visibility toggle */
-    visible = false;
-    /** Alert message */
-    message = '';
-    /** Semantic type: success | error | warning | info */
-    type = 'success';
-    /** Automatically close after timeout */
-    autoClose = false;
-    timer;
-    componentDidLoad() {
-        if (this.autoClose && this.visible) {
-            this.startTimer();
-        }
-    }
-    startTimer() {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
-            this.visible = false;
-        }, 7000);
-    }
-    render() {
-        if (!this.visible)
-            return null;
-        return (index.h("div", { class: { 'alert-legacy': true, [`alert-legacy--${this.type}`]: true } }, index.h("div", { class: "alert-legacy__content" }, index.h("span", { class: "alert-legacy__message" }, this.message)), index.h("button", { class: "alert-legacy__close", onClick: () => this.visible = false }, "\u00D7")));
-    }
-};
-DropiAlertLegacy.style = dropiAlertLegacyCss();
-exports.dropi_alert_legacy = DropiAlertLegacy;

package/dist/cjs/dropi-alert-modal.cjs.entry.js DELETED Viewed

@@ -1,128 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:visible;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.custom-content{width:100%;text-align:left;margin-top:var(--Size-2);display:flex;flex-direction:column;gap:var(--Size-3)}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
-const DropiAlertModal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.primaryButtonEvent = index.createEvent(this, "primaryButtonEvent", 7);
-        this.secondaryButtonEvent = index.createEvent(this, "secondaryButtonEvent", 7);
-        this.modalOpenChange = index.createEvent(this, "modalOpenChange", 7);
-        this.onHide = index.createEvent(this, "onHide", 7);
-    }
-    /** Controls visibility */
-    visible = false;
-    /** Modal type — determines Lottie animation */
-    type = 'question';
-    /** Bold title */
-    tittle = '';
-    /** Body message */
-    message = '';
-    /** Primary button label */
-    primaryButton = 'Accept';
-    /** Secondary button label (hidden if empty) */
-    secondaryButton = '';
-    /** Show loading state with loading.json Lottie */
-    loading = false;
-    /** Show close icon in header */
-    closable = false;
-    /** Hide action buttons */
-    displayButtons = true;
-    /** Loading title */
-    loadingTitle = 'Loading';
-    /** Loading message */
-    loadingMessage = 'Please wait a moment';
-    /**
-     * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).
-     * Useful for step-by-step flows.
-     */
-    isStep = false;
-    /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
-    baseZIndex = 0;
-    /**
-     * Convenience object prop — matches Angular `params: ModalParams`.
-     * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
-     * loadingMessage, closable, displayButtons.
-     * When provided, its values override the corresponding individual props.
-     */
-    params = null;
-    paramsChanged(val) {
-        if (!val)
-            return;
-        if (val.tittle !== undefined)
-            this.tittle = val.tittle;
-        if (val.type !== undefined)
-            this.type = val.type;
-        if (val.message !== undefined)
-            this.message = val.message;
-        if (val.primaryButton !== undefined)
-            this.primaryButton = val.primaryButton;
-        if (val.secondaryButton !== undefined)
-            this.secondaryButton = val.secondaryButton;
-        if (val.loadingTitle !== undefined)
-            this.loadingTitle = val.loadingTitle;
-        if (val.loadingMessage !== undefined)
-            this.loadingMessage = val.loadingMessage;
-        if (val.closable !== undefined)
-            this.closable = val.closable;
-        if (val.displayButtons !== undefined)
-            this.displayButtons = val.displayButtons;
-    }
-    /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
-    primaryButtonEvent;
-    /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
-    secondaryButtonEvent;
-    /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
-    modalOpenChange;
-    /** Emitted when modal is hidden — matches Angular 'onHide' */
-    onHide;
-    lottieMap = {
-        question: '/assets/lottie-files/question.json',
-        warning: '/assets/lottie-files/warning.json',
-        success: '/assets/lottie-files/success.json',
-        error: '/assets/lottie-files/failure.json',
-        loading: '/assets/lottie-files/loading.json',
-    };
-    componentWillLoad() {
-        if (this.params)
-            this.paramsChanged(this.params);
-    }
-    async show() {
-        this.visible = true;
-    }
-    async hide() {
-        this.visible = false;
-    }
-    handlePrimary() {
-        this.primaryButtonEvent.emit(true);
-        if (!this.isStep) {
-            this.visible = false;
-            this.modalOpenChange.emit(false);
-        }
-    }
-    handleSecondary() {
-        this.secondaryButtonEvent.emit(true);
-        this.visible = false;
-        this.modalOpenChange.emit(false);
-    }
-    onModalHide() {
-        this.visible = false;
-        this.modalOpenChange.emit(false);
-        this.onHide.emit();
-    }
-    render() {
-        const lottieKey = this.loading ? 'loading' : this.type;
-        const isLottieLoading = lottieKey === 'loading';
-        return (index.h("dropi-modal", { key: '8581cbc944d42889228cb21fa27bf4e8b3bf1e16', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, index.h("div", { key: '7208cbe742dab77bcee14150998aff5647fd41af', class: "body-alert" }, this.lottieMap[lottieKey] && (index.h("div", { key: '3b4d36963f8d6547556eee704823c8e34805b8d8', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, index.h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), index.h("div", { key: 'dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f', class: "content-alert" }, index.h("h2", { key: '685df4cb76145cf6e965dd94e5f3fe60f828100c' }, this.loading ? this.loadingTitle : this.tittle), index.h("p", { key: 'f9e5b699816236148bc00c5046c6cc67eb86ae01' }, this.loading ? this.loadingMessage : this.message)), index.h("div", { key: '2e9280865cad761bea5cdd88b972734c11ab7737', class: "custom-content" }, index.h("slot", { key: '4fd36baa1455e7793a1e5291b52448707e3aa448' })), !this.loading && this.displayButtons && (index.h("div", { key: '451bd3d90ec780499d9956a8a57a0d1461406fa9', class: "actions" }, this.secondaryButton && index.h("dropi-button", { key: 'b60c30cc92cc080c01e1bf337a5e4b78f561be81', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), index.h("dropi-button", { key: '2b8696a02b253d289a1baef2116cffe436346717', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
-    }
-    static get watchers() { return {
-        "params": [{
-                "paramsChanged": 0
-            }]
-    }; }
-};
-DropiAlertModal.style = dropiAlertModalCss();
-exports.dropi_alert_modal = DropiAlertModal;