npm - @dropi/ui - Versions diffs - 0.1.22 → 0.1.23 - Mend

@dropi/ui 0.1.22 → 0.1.23

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.22",
+  "version": "0.1.23",
   "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

@@ -32,26 +32,28 @@ Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integ
 | Next.js SSR | `npm install @dropi/ui @dropi/ui-react && npm install --save-dev @stencil/ssr` |
 ### 2. Estilos e Iconos
-- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en tu entry point global.
-- **Registro de componentes**: No hace falta llamar `defineCustomElements()`. Cada wrapper de `@dropi/ui-react` y `@dropi/ui-angular` registra su custom element automáticamente.
-- **SSR (Next.js)**: Configurar `next.config.ts` con `withStencil()` e importar desde `@dropi/ui-react/next` en Server Components.
-- **Iconos**: El componente `<dropi-icon>` requiere que el sprite SVG esté en `/assets/icons/symbol/svg/sprite.css.svg`.
+- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css`.
+- **CSS Resets**: Añade este reset para evitar saltos de layout en los iconos:
+  `dropi-icon:not(.hydrated) { width: 20px; height: 20px; display: inline-flex; }`
+- **Registro**: No hace falta llamar `defineCustomElements()`.
+- **SSR (Next.js)**: Configurar `next.config.ts` e importar siempre desde `/next`.
+- **Iconos**: El sprite SVG debe estar en `public/assets/icons/symbol/svg/sprite.css.svg`.
 ---
-## 🚀 Soporte para Next.js (SSR)
+---
+## 🚀 Soporte para Next.js (SSR / Zero Flash)
-Para habilitar el **Server Side Rendering (SSR)** y evitar parpadeos (flashes) de contenido, sigue estos pasos:
+Para habilitar el **Server Side Rendering (SSR)** y eliminar cualquier parpadeo visual, sigue estos pasos:
 ### 1. Configuración de Next.js
-Envuelve tu configuración de Next.js en el plugin `withStencil`:
+Envuelve tu configuración en el plugin `withStencil`:
 ```typescript
 // next.config.ts
 import withStencil from "@stencil/ssr/next";
-const nextConfig = { ... };
 export default withStencil({
   from: "@dropi/ui-react",
   module: import("@dropi/ui-react/next"),
@@ -59,17 +61,17 @@ export default withStencil({
 })(nextConfig);
 ```
-### 2. Uso en Componentes (Server Components)
-Para que Next.js pre-renderice los componentes con **Declarative Shadow DOM**, usa el entry point `/next`:
+### 2. 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
-// ✅ Correcto: Se renderiza en el servidor
-import { DropiButton } from "@dropi/ui-react/next";
-// ❌ Incorrecto: Provoca parpadeo y requiere "use client"
-import { DropiButton } from "@dropi/ui-react";
+<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"`
 ---
 ## Cómo pasar props

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;

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

@@ -1,64 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}`;
-const STATE_ICONS = {
-    success: 'Check-circle',
-    error: 'Warning-circle',
-    warning: 'Warning-triangle',
-    info: 'Info',
-};
-const STATE_COLORS = {
-    success: 'Success-Success-500',
-    error: 'Error-Error-500',
-    warning: 'Warning-Warning-500',
-    info: 'Info-Info-500',
-};
-const DropiAlert = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.onClose = index.createEvent(this, "onClose", 7);
-        this.onButtonClick = index.createEvent(this, "onButtonClick", 7);
-        this.onClickLink = index.createEvent(this, "onClickLink", 7);
-    }
-    /** Alert message text (supports plain text) */
-    message = '';
-    /** Layout type: default (inline) | flag (accented left border) */
-    type = 'default';
-    /** Semantic state */
-    state = 'success';
-    /** Show the × close button */
-    dismissable = true;
-    /** Show action button */
-    showButton = false;
-    /** Action button label */
-    buttonText = 'Close';
-    /** Anchor/link label */
-    anchorText = 'none';
-    /** Anchor href */
-    anchorUrl = 'none';
-    /** Whether the alert is visible */
-    showAlert = true;
-    /** Link text (alternative to anchorText) */
-    textLink = '';
-    /** Link URL (alternative to anchorUrl) */
-    linkUrl = '';
-    /** Clicked text tracking */
-    clickedText = '';
-    /** Emitted when the alert is dismissed */
-    onClose;
-    /** Emitted when the action button is clicked */
-    onButtonClick;
-    /** Emitted when the anchor link is clicked */
-    onClickLink;
-    render() {
-        if (!this.showAlert)
-            return null;
-        return (index.h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (index.h("div", { class: "alert__icon" }, index.h("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] }))), index.h("div", { class: "alert__body" }, index.h("span", { class: "alert__message" }, this.message), this.anchorText && (index.h("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), index.h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (index.h("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (index.h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, index.h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
-    }
-};
-DropiAlert.style = dropiAlertCss();
-exports.dropi_alert = DropiAlert;

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

@@ -1,31 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiAvatarsCss = () => `:host{display:inline-block}.avatar{margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar--users,.avatar--transport,.avatar--payment{width:35px;height:35px}.avatar--supplier{width:70px;height:70px}.avatar--counter{width:33px;height:33px}.avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background-color:var(--Primary-Primary-100, #fde9d0);color:var(--Primary-Primary-600, #d4872e);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.5px}`;
-const FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;
-const DropiAvatars = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Image URL */
-    image = '';
-    /** Alt text for the image */
-    alt = 'Avatar';
-    /** Size/context variant */
-    type = 'users';
-    /** Initials to show when no image (max 2 chars) */
-    initials = '';
-    handleError(e) {
-        e.target.src = FALLBACK;
-    }
-    render() {
-        const displayInitials = this.initials?.slice(0, 2).toUpperCase();
-        const showInitials = !this.image && displayInitials;
-        return (index.h("figure", { key: 'db9310b5c789b079fc0f9043a619bd22f9a60151', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (index.h("div", { class: "avatar__initials" }, displayInitials)) : (index.h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
-    }
-};
-DropiAvatars.style = dropiAvatarsCss();
-exports.dropi_avatars = DropiAvatars;

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

@@ -1,30 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiBadgeLegacyCss = () => `:host{display:inline-block}.badge-legacy{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:10px;font-size:11px;font-weight:600}.badge-legacy--primary{background:var(--Primary-Primary-50);color:var(--Primary-Primary-500)}.badge-legacy--secondary{background:var(--Gray-Gray-100);color:var(--Gray-Gray-600)}.badge-legacy--tertiary{background:var(--Success-Success-50);color:var(--Success-Success-500)}`;
-const DropiBadgeLegacy = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Type: state | counter */
-    type = 'state';
-    /** State: check | pending */
-    state = 'check';
-    /** Variant: primary | secondary | tertiary */
-    variant = 'primary';
-    /** Count (for type counterpart) */
-    count = 0;
-    render() {
-        const isCounter = this.type === 'counter';
-        return (index.h("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
-                'badge-legacy': true,
-                [`badge-legacy--${this.variant}`]: true,
-                [`badge-legacy--${this.type}`]: true
-            } }, isCounter ? (index.h("span", { class: "badge-count" }, this.count)) : (index.h("span", { class: { 'badge-state-icon': true, [`badge-state--${this.state}`]: true } }, this.state === 'check' ? '✓' : '...'))));
-    }
-};
-DropiBadgeLegacy.style = dropiBadgeLegacyCss();
-exports.dropi_badge_legacy = DropiBadgeLegacy;

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

@@ -1,37 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiBadgeCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.tag-state{border-radius:12px;padding:2px 10px;display:flex;align-items:center;gap:4px}.tag-state svg{width:13px}.tag-state p{font-size:13px;font-weight:var(--font-weight-medium);line-height:20px;margin:0;padding:0}.tag-state.active{background:var(--Success-Success-50, #e7f8f3);color:var(--Success-Success-500, #0abb87)}.tag-state.pending{color:var(--Orange-orange-500, #f49a3d);background:var(--Orange-orange-50, #fef5ec)}.tag-state.canceled,.tag-state.frozen{color:var(--Gray-Gray-500, #69738c);background:var(--Gray-Gray-50, #f7f8fa)}`;
-const DropiBadge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Badge state: pending | active | canceled | frozen */
-    state;
-    stateText = {
-        pending: 'Pendiente',
-        active: 'Activo',
-        canceled: 'Cancelado',
-        frozen: 'Congelado',
-    };
-    renderIcon() {
-        if (this.state === 'active') {
-            return (index.h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M11.5444 5.87067L12.5389 6.88004L8.43554 10.9225C8.16142 11.1966 7.80087 11.3333 7.43892 11.3333C7.07696 11.3333 6.71287 11.1952 6.43592 10.919L4.46533 9.00929L5.45204 7.99142L7.43042 9.90887L11.5444 5.87067ZM17 8.5C17 13.187 13.187 17 8.5 17C3.81296 17 0 13.187 0 8.5C0 3.81296 3.81296 0 8.5 0C13.187 0 17 3.81296 17 8.5ZM15.5833 8.5C15.5833 4.59425 12.4057 1.41667 8.5 1.41667C4.59425 1.41667 1.41667 4.59425 1.41667 8.5C1.41667 12.4057 4.59425 15.5833 8.5 15.5833C12.4057 15.5833 15.5833 12.4057 15.5833 8.5Z", fill: "currentColor" })));
-        }
-        if (this.state === 'pending') {
-            return (index.h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.5 17C3.81296 17 0 13.187 0 8.5C0 3.81296 3.81296 0 8.5 0C13.187 0 17 3.81296 17 8.5C17 13.187 13.187 17 8.5 17ZM8.5 1.41667C4.59425 1.41667 1.41667 4.59425 1.41667 8.5C1.41667 12.4057 4.59425 15.5833 8.5 15.5833C12.4057 15.5833 15.5833 12.4057 15.5833 8.5C15.5833 4.59425 12.4057 1.41667 8.5 1.41667ZM9.20833 8.5V4.25C9.20833 3.859 8.891 3.54167 8.5 3.54167C8.109 3.54167 7.79167 3.859 7.79167 4.25V7.79167H5.66667C5.27567 7.79167 4.95833 8.109 4.95833 8.5C4.95833 8.891 5.27567 9.20833 5.66667 9.20833H8.5C8.891 9.20833 9.20833 8.891 9.20833 8.5Z", fill: "currentColor" })));
-        }
-        if (this.state === 'canceled') {
-            return (index.h("svg", { width: "12", height: "14", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.5497 4.86859V5.76046C12.1075 6.00391 12.5823 6.40464 12.916 6.91364C13.2497 7.42264 13.4279 8.01785 13.4287 8.62648V12.3844C13.4277 13.2146 13.0974 14.0106 12.5103 14.5976C11.9233 15.1847 11.1273 15.515 10.2971 15.516H4.03392C3.20368 15.515 2.40773 15.1847 1.82066 14.5976C1.23359 14.0106 0.903338 13.2146 0.902344 12.3844V8.62648C0.903144 8.01785 1.08129 7.42264 1.41498 6.91364C1.74868 6.40464 2.22347 6.00391 2.78129 5.76046V4.86859C2.78129 3.70582 3.2432 2.59068 4.0654 1.76848C4.8876 0.946282 6.00274 0.484375 7.1655 0.484375C8.32827 0.484375 9.44341 0.946282 10.2656 1.76848C11.0878 2.59068 11.5497 3.70582 11.5497 4.86859ZM4.95114 2.65422C4.36386 3.24151 4.03392 4.03804 4.03392 4.86859V5.4949H10.2971V4.86859C10.2971 4.03804 9.96715 3.24151 9.37986 2.65422C8.79258 2.06694 7.99605 1.73701 7.1655 1.73701C6.33496 1.73701 5.53843 2.06694 4.95114 2.65422ZM11.6257 13.713C11.9781 13.3606 12.176 12.8827 12.176 12.3844V8.62648C12.176 8.12815 11.9781 7.65023 11.6257 7.29786C11.2733 6.94549 10.7954 6.74753 10.2971 6.74753H4.03392C3.53559 6.74753 3.05768 6.94549 2.70531 7.29786C2.35294 7.65023 2.15498 8.12815 2.15498 8.62648V12.3844C2.15498 12.8827 2.35294 13.3606 2.70531 13.713C3.05768 14.0654 3.53559 14.2633 4.03392 14.2633H10.2971C10.7954 14.2633 11.2733 14.0654 11.6257 13.713ZM6.72263 9.43615C6.84009 9.31869 6.99939 9.25271 7.1655 9.25271C7.33161 9.25271 7.49092 9.31869 7.60837 9.43615C7.72583 9.55361 7.79182 9.71291 7.79182 9.87902V11.1317C7.79182 11.2978 7.72583 11.4571 7.60837 11.5745C7.49092 11.692 7.33161 11.758 7.1655 11.758C6.99939 11.758 6.84009 11.692 6.72263 11.5745C6.60517 11.4571 6.53919 11.2978 6.53919 11.1317V9.87902C6.53919 9.71291 6.60517 9.55361 6.72263 9.43615Z", fill: "currentColor" })));
-        }
-        return null;
-    }
-    render() {
-        return (index.h("div", { key: 'b4cae2eac2f963a641ca23e27b33899469b2b370', class: `tag-state ${this.state}` }, this.renderIcon(), index.h("p", { key: '64a2504a1844f2cb9397878ca305aa183b0609a5' }, this.stateText[this.state])));
-    }
-};
-DropiBadge.style = dropiBadgeCss();
-exports.dropi_badge = DropiBadge;

package/dist/cjs/dropi-banner-external.cjs.entry.js DELETED Viewed

@@ -1,63 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiBannerExternalCss = () => `:host{display:block;width:100%}.dropi-banner-external{display:block;width:100%;position:relative;margin-bottom:16px;border-radius:var(--Border-2, 8px)}.dropi-banner-external a{display:block;text-decoration:none}.click-wrapper{cursor:pointer}.inner{position:relative;display:block}.inner img{display:block;width:100%;height:auto;border-radius:var(--Border-2, 8px);max-width:1220px;margin:auto}.close-btn{position:absolute;top:4px;right:4px;background:rgba(255, 255, 255, 0.8);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s ease}.close-btn:hover{background:rgba(255, 255, 255, 1)}`;
-const DropiBannerExternal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bannerClick = index.createEvent(this, "bannerClick", 7);
-        this.isVisible = index.createEvent(this, "isVisible", 7);
-    }
-    /** Image URL to display */
-    imageUrl = '';
-    /** Optional click-through URL */
-    link = '';
-    /** Alt text for the image */
-    alt = '';
-    /** Background color behind the image */
-    backgroundColor = 'transparent';
-    /** Slug name (matches Angular `slugName`) */
-    slugName = '';
-    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
-    viewOnWhiteBrand = false;
-    /** Countries list to show (matches Angular `viewOnlyCountries`) */
-    viewOnlyCountries = [];
-    closed = false;
-    get el() { return index.getElement(this); }
-    componentWillLoad() {
-        if (!this.imageUrl) {
-            this.imageUrl =
-                this.el.getAttribute('imageUrl') ||
-                    this.el.getAttribute('image-url') ||
-                    this.el.getAttribute('imageurl') ||
-                    '';
-        }
-    }
-    /** Emitted when the banner is clicked (only when no link is set) */
-    bannerClick;
-    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
-    isVisible;
-    handleClick(e) {
-        if (!this.link) {
-            e.preventDefault();
-            this.bannerClick.emit();
-        }
-    }
-    closeBanner(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.closed = true;
-        this.isVisible.emit(false);
-    }
-    render() {
-        if (this.closed || !this.imageUrl)
-            return null;
-        const inner = (index.h("div", { class: "inner" }, index.h("img", { src: this.imageUrl, alt: this.alt }), index.h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, index.h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
-        return (index.h("div", { class: "dropi-banner-external", style: { background: this.backgroundColor } }, this.link ? (index.h("a", { href: this.link, target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.handleClick(e) }, inner)) : (index.h("div", { class: "click-wrapper", onClick: (e) => this.handleClick(e) }, inner))));
-    }
-};
-DropiBannerExternal.style = dropiBannerExternalCss();
-exports.dropi_banner_external = DropiBannerExternal;

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

@@ -1,48 +0,0 @@
-'use strict';
-var index = require('./index-C8kwDvpf.js');
-const dropiBreadcrumbCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.breadcrumb{margin:0}.crumb-list{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.home-link{display:inline-flex;align-items:center;color:var(--Gray-Gray-500, #69738c);text-decoration:none;transition:color 0.2s ease}.home-link:hover{color:var(--Gray-Gray-700, #32394d)}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;text-decoration:none;transition:color 0.2s ease;font-size:var(--font-size-s, 12px)}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed;text-decoration:none}.current{color:var(--Gray-Gray-700, #32394d);cursor:default;font-size:var(--font-size-s, 12px)}`;
-const DropiBreadcrumb = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiNavigate = index.createEvent(this, "dropiNavigate", 7);
-    }
-    /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
-    items = [];
-    /** Home link href */
-    homeRoute = '/';
-    /** dropi-icon name for home */
-    homeIconName = 'Home';
-    /** Whether the last item is also clickable */
-    lastItemClickable = false;
-    /** Emitted when any item or home is clicked. Detail is the item or homeRoute string. */
-    dropiNavigate;
-    get parsedItems() {
-        if (typeof this.items === 'string') {
-            try {
-                return JSON.parse(this.items);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.items;
-    }
-    render() {
-        const items = this.parsedItems;
-        return (index.h("nav", { key: 'c4546d7a0c7852e01f685176b5365f1e0082ad24', class: "breadcrumb", "aria-label": "Breadcrumb" }, index.h("div", { key: '924ab634ae4e71f6bd39a67b4b3889cdca20234d', class: "crumb-list" }, index.h("div", { key: 'e7b1b285bdd497a028a041ada1eb8b34f77384b0', class: "crumb-home" }, index.h("a", { key: '9e288d5f5761daed20b35dbf056c7de9c2e7b8e3', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, index.h("dropi-icon", { key: '15210c5feb41fc5a8dd37f52eba1e5a211834f84', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (index.h("dropi-icon", { key: '5acd21133859ec42b078fd323f82b7bc13c7b359', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
-            const isLast = idx === items.length - 1;
-            const href = item.url || item.routerLink || '#';
-            return (index.h("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (index.h("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {
-                    e.preventDefault();
-                    if (!item.disabled)
-                        this.dropiNavigate.emit(item);
-                } }, item.label)) : (index.h("span", { class: "current Body-S-Regular", "aria-current": "page" }, item.label)), !isLast && (index.h("dropi-icon", { name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-500" }))));
-        }))));
-    }
-};
-DropiBreadcrumb.style = dropiBreadcrumbCss();
-exports.dropi_breadcrumb = DropiBreadcrumb;