@dropi/ui 0.1.37 → 0.1.41

package/dist/dropi-ui/dropi-modal.entry.js

@@ -0,0 +1,143 @@
+import { r as registerInstance, d as createEvent, e as Build, h } from './index-Cvp2LQOM.js';
+
+const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:1100}.modal-root--open{opacity:1;pointer-events:auto}.modal-root--closing{opacity:1;pointer-events:none}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
+
+const DropiModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onShow = createEvent(this, "onShow", 5);
+        this.onHide = createEvent(this, "onHide", 5);
+        this.visibleChange = createEvent(this, "visibleChange", 5);
+    }
+    visible = false;
+    header = null;
+    showCloseIcon = true;
+    dismissable = true;
+    dismissableMask = true;
+    dismissible = true;
+    closeOnEscape = true;
+    modal = true;
+    closable = true;
+    blockScroll = true;
+    showHeader = true;
+    showFooter = true;
+    position = 'center';
+    size = 'm';
+    styleClass = null;
+    maxWidth = null;
+    /** Auto-manage z-index stack (matches Angular `autoZIndex`) */
+    autoZIndex = true;
+    /** Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) */
+    baseZIndex = 1100;
+    /** CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) */
+    transitionOptions = '0.15s';
+    /** Enable a before-close hook (matches Angular `enableBeforeClose`) */
+    enableBeforeClose = false;
+    /** No-op — kept for API parity with Angular (matches Angular `draggable`) */
+    isDraggable = false;
+    /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
+    resizable = false;
+    onShow;
+    onHide;
+    visibleChange;
+    isOpen = false;
+    isClosing = false;
+    mounted = false;
+    closeTimer = null;
+    keyHandler = null;
+    visibleChanged(val, oldVal) {
+        const isVisible = val === true || String(val) === 'true';
+        const wasVisible = oldVal === true || String(oldVal) === 'true';
+        if (isVisible === wasVisible)
+            return;
+        console.log('[DropiModal] visibleChanged:', isVisible);
+        isVisible ? this.openModal() : (this.mounted && this.startClose());
+    }
+    componentDidLoad() {
+        const isVisible = this.visible === true || String(this.visible) === 'true';
+        if (isVisible)
+            this.openModal();
+    }
+    disconnectedCallback() {
+        this.removeKeyHandler();
+        if (this.closeTimer)
+            clearTimeout(this.closeTimer);
+        if (typeof document !== 'undefined') {
+            document.body.classList.remove('dropi-modal-open');
+        }
+    }
+    async hide() {
+        this.visible = false;
+        this.visibleChange.emit(false);
+        this.startClose();
+    }
+    async show() {
+        this.visible = true;
+        this.visibleChange.emit(true);
+        this.openModal();
+    }
+    openModal() {
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+        this.mounted = true;
+        this.isClosing = false;
+        this.isOpen = false;
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+            this.isOpen = true;
+            this.onShow.emit();
+        }));
+        this.addKeyHandler();
+        if ((this.modal ?? true) && Build.isBrowser && document.body) {
+            document.body.classList.add('dropi-modal-open');
+        }
+    }
+    startClose() {
+        if (this.isClosing)
+            return;
+        this.isClosing = true;
+        this.isOpen = false;
+        this.removeKeyHandler();
+        if (this.closeTimer)
+            clearTimeout(this.closeTimer);
+        this.closeTimer = setTimeout(() => {
+            this.mounted = false;
+            this.isClosing = false;
+            this.closeTimer = null;
+            if ((this.modal ?? true) && Build.isBrowser && document.body) {
+                document.body.classList.remove('dropi-modal-open');
+            }
+            this.onHide.emit();
+        }, 200);
+    }
+    addKeyHandler() {
+        if (!this.closeOnEscape)
+            return;
+        this.keyHandler = (e) => {
+            if (e.key === 'Escape' && this.visible && this.dismissable)
+                this.hide();
+        };
+        document.addEventListener('keydown', this.keyHandler);
+    }
+    removeKeyHandler() {
+        if (this.keyHandler) {
+            document.removeEventListener('keydown', this.keyHandler);
+            this.keyHandler = null;
+        }
+    }
+    render() {
+        return (h("div", { key: '1aee093f108c54540005a6cb2f48bef700f05d63', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && h("div", { key: '06ebd29da0c7dc699e7c16769476e310336ab149', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { key: '87cb9bbd4c1c6c27a6a7d09f561ea781c1571803', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { key: '86f22ef920b7a7437825f4c5f9ccff23b591c499', class: "modal-header" }, this.header && h("span", { key: '2ae7c9b879ee6c025b6b42977bad643ff4d28370', class: "modal-title" }, this.header), h("slot", { key: '85a0a54691ca191719202c8fea6b30ffff30aacc', name: "header" }), this.showCloseIcon && (h("button", { key: 'dc1f570830d22535a39c9e9fbf0bccdb8e4bfcf7', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: 'ceca42f33ff7d4762c79b2d133e23bc7cedb3cb3', class: "modal-content" }, h("slot", { key: '14a82735c521c45deda61e8a69ae8673ad754b3d' })), this.showFooter && h("div", { key: 'e71a5393c19de696247502abd09d26a38cd1b979', class: "modal-footer" }, h("slot", { key: '1364eed1b66e82d321d06d13d9d34615c7634ce0', name: "footer" })))));
+    }
+    static get watchers() { return {
+        "visible": [{
+                "visibleChanged": 0
+            }]
+    }; }
+};
+DropiModal.style = dropiModalCss();
+
+export { DropiModal as dropi_modal };
+//# sourceMappingURL=dropi-modal.entry.esm.js.map
+
+//# sourceMappingURL=dropi-modal.entry.js.map

package/dist/dropi-ui/dropi-modal.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-modal/dropi-modal.css?tag=dropi-modal&encapsulation=shadow","src/components/dropi-modal/dropi-modal.tsx"],"sourcesContent":[":host { display: contents; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.modal-root {\n  position: fixed; inset: 0;\n  display: flex; align-items: center; justify-content: center;\n  pointer-events: none; opacity: 0;\n  transition: opacity 0.18s ease; z-index: 1100;\n}\n.modal-root--open { opacity: 1; pointer-events: auto; }\n.modal-root--closing { opacity: 1; pointer-events: none; }\n\n.modal-mask {\n  position: absolute; inset: 0;\n  background: rgba(6,11,16,0.66); pointer-events: auto;\n  opacity: 0; transition: opacity 0.18s ease;\n}\n.modal-root--open .modal-mask { opacity: 1; }\n.modal-root--closing .modal-mask { opacity: 0; }\n\n.modal-panel {\n  position: relative; pointer-events: auto;\n  display: flex; flex-direction: column;\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  box-shadow: 0 0 60px rgba(0,0,0,0.06);\n  overflow: hidden;\n  padding: var(--Size-6, 32px); gap: var(--Size-5, 24px);\n  max-height: calc(100vh - 60px);\n  opacity: 0; transform: translateY(16px) scale(0.92);\n  transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.modal-root--open .modal-panel { opacity: 1; transform: none; }\n.modal-root--closing .modal-panel { opacity: 0; transform: translateY(-12px) scale(1.06); }\n\n.modal-header { display: flex; align-items: center; gap: 4px; }\n.modal-title { color: var(--Gray-Gray-700,#32394d); font-size: var(--Size-5, 24px); font-weight: var(--font-weight-bold); flex: 1; text-align: left; }\n.modal-close { margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--font-size-xxl); line-height: 1; color: var(--Gray-Gray-400); }\n.modal-close:hover { opacity: 0.7; }\n\n.modal-content {\n  padding-right: 8px; overflow: auto; flex: 1;\n  display: flex; flex-direction: column;\n  scrollbar-width: thin; scrollbar-color: var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa);\n}\n.modal-content::-webkit-scrollbar { width: 4px; }\n.modal-content::-webkit-scrollbar-track { background: var(--Gray-Gray-50,#f7f8fa); border-radius: 16px; }\n.modal-content::-webkit-scrollbar-thumb { background: var(--Gray-Gray-300,#a3abbf); border-radius: 16px; }\n\n.modal-footer { \n  display: flex; \n  justify-content: flex-end; \n  align-items: flex-start; \n  gap: var(--Size-1, 4px); \n  width: 100%;\n}\n.modal-footer:empty { display: none; }\n\n/* button-container: grid 2 columnas igual que en Angular host p-dialog-footer */\n::slotted(.button-container) {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--Size-4, 16px);\n  min-width: 470px;\n  width: 100%;\n}\n::slotted(.button-container) > * {\n  width: 100%;\n}\n::slotted(.button-container) dropi-button {\n  width: 100%;\n}\n\n.modal-panel.size-m .modal-footer,\n.modal-panel.size-s .modal-footer { \n  justify-content: center; \n}\n\n.modal-panel.size-m .modal-footer ::slotted(.button-container),\n.modal-panel.size-s .modal-footer ::slotted(.button-container) { \n  min-width: unset !important;\n  width: 100%;\n}\n\n.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container) { \n  min-width: unset; \n  display: flex; \n  flex-direction: column-reverse; \n  gap: var(--Size-4, 16px);\n}\n\n.modal-panel.size-full { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }\n.modal-panel.size-xxl { width: calc(100% - 60px); max-width: 1520px; height: calc(100vh - 120px); max-height: 900px; }\n.modal-panel.size-l { width: 1137px; max-width: 1137px; max-height: 754px; }\n.modal-panel.size-m { max-width: 550px; width: 550px; }\n.modal-panel.size-s { width: 454px; }\n\n.modal-root--right { align-items: stretch; justify-content: flex-end; }\n.modal-root--right .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }\n.modal-root--open.modal-root--right .modal-panel { transform: translateX(0); }\n.modal-root--closing.modal-root--right .modal-panel { transform: translateX(100%); }\n.modal-root--right .modal-panel.size-drawer-s { width: 351px; padding: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-m { width: 550px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-l { width: 1137px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-xxl { width: 1214px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-sidebar-half { width: 50vw; min-width: 600px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n\n@media (max-width: 768px) {\n  .modal-root--right .modal-panel.size-drawer-s,\n  .modal-root--right .modal-panel.size-drawer-m,\n  .modal-root--right .modal-panel.size-drawer-l,\n  .modal-root--right .modal-panel.size-drawer-xxl,\n  .modal-root--right .modal-panel.size-sidebar-half { width: 100vw; min-width: unset; }\n}\n\n.modal-root--left { align-items: stretch; justify-content: flex-start; }\n.modal-root--left .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }\n.modal-root--open.modal-root--left .modal-panel { transform: translateX(0); }\n.modal-root--closing.modal-root--left .modal-panel { transform: translateX(-100%); }\n\n.modal-root--top { align-items: flex-start; }\n.modal-root--bottom { align-items: flex-end; }\n\n@media (max-width: 599px) {\n  .modal-panel { padding: 20px; width: 100% !important; }\n  .modal-panel:not(.size-s) { border-radius: 0 !important; height: 100% !important; max-height: unset !important; }\n  .modal-root--right .modal-panel { width: 100vw !important; min-width: unset !important; }\n  \n  .modal-footer { justify-content: center; }\n  .modal-footer ::slotted(.button-container) { \n    width: 100%;\n    min-width: unset !important;\n    display: flex;\n    flex-direction: column-reverse;\n    gap: var(--Size-4, 16px);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .modal-root, .modal-mask, .modal-panel { transition: none !important; }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, Method, h, Build } from '@stencil/core';\n\nexport type ModalPosition = 'center' | 'right' | 'left' | 'top' | 'bottom';\nexport type ModalSize = 'full' | 'xxl' | 'l' | 'm' | 's' | 'drawer-s' | 'drawer-m' | 'drawer-l' | 'drawer-xxl' | 'sidebar-half';\n\n/**\n * @component dropi-modal\n * Modal/dialog with backdrop, close button, and header/content/footer slots.\n * Slots: (default) body, \"header\" custom header, \"footer\" actions.\n */\n@Component({\n  tag: 'dropi-modal',\n  styleUrl: 'dropi-modal.css',\n  shadow: true,\n})\nexport class DropiModal {\n  @Prop({ mutable: true, reflect: true }) visible: any = false;\n  @Prop() header: string | null = null;\n  @Prop() showCloseIcon: boolean = true;\n  @Prop() dismissable: boolean = true;\n  @Prop() dismissableMask: boolean = true;\n  @Prop() dismissible: boolean = true;\n  @Prop() closeOnEscape: boolean = true;\n  @Prop() modal: boolean = true;\n  @Prop() closable: boolean = true;\n  @Prop() blockScroll: boolean = true;\n  @Prop() showHeader: boolean = true;\n  @Prop() showFooter: boolean = true;\n  @Prop() position: ModalPosition = 'center';\n  @Prop() size: ModalSize = 'm';\n  @Prop() styleClass: string | null = null;\n  @Prop() maxWidth: string | null = null;\n  /** Auto-manage z-index stack (matches Angular `autoZIndex`) */\n  @Prop() autoZIndex: boolean = true;\n  /** Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 1100;\n  /** CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) */\n  @Prop() transitionOptions: string = '0.15s';\n  /** Enable a before-close hook (matches Angular `enableBeforeClose`) */\n  @Prop() enableBeforeClose: boolean = false;\n  /** No-op — kept for API parity with Angular (matches Angular `draggable`) */\n  @Prop() isDraggable: boolean = false;\n  /** No-op — kept for API parity with Angular (matches Angular `resizable`) */\n  @Prop() resizable: boolean = false;\n\n  @Event({ composed: false }) onShow: EventEmitter<void>;\n  @Event({ composed: false }) onHide: EventEmitter<void>;\n  @Event({ composed: false }) visibleChange: EventEmitter<boolean>;\n\n  @State() private isOpen: boolean = false;\n  @State() private isClosing: boolean = false;\n  @State() private mounted: boolean = false;\n\n  private closeTimer: any = null;\n  private keyHandler: ((e: KeyboardEvent) => void) | null = null;\n\n  @Watch('visible')\n  visibleChanged(val: any, oldVal: any) {\n    const isVisible = val === true || String(val) === 'true';\n    const wasVisible = oldVal === true || String(oldVal) === 'true';\n    if (isVisible === wasVisible) return;\n    \n    console.log('[DropiModal] visibleChanged:', isVisible);\n    isVisible ? this.openModal() : (this.mounted && this.startClose());\n  }\n\n  componentDidLoad() {\n    const isVisible = this.visible === true || String(this.visible) === 'true';\n    if (isVisible) this.openModal();\n  }\n\n  disconnectedCallback() {\n    this.removeKeyHandler();\n    if (this.closeTimer) clearTimeout(this.closeTimer);\n    if (typeof document !== 'undefined') {\n      document.body.classList.remove('dropi-modal-open');\n    }\n  }\n\n  @Method() async hide() {\n    this.visible = false;\n    this.visibleChange.emit(false);\n    this.startClose();\n  }\n\n  @Method() async show() {\n    this.visible = true;\n    this.visibleChange.emit(true);\n    this.openModal();\n  }\n\n  private openModal() {\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n    this.mounted = true;\n    this.isClosing = false;\n    this.isOpen = false;\n    requestAnimationFrame(() => requestAnimationFrame(() => {\n      this.isOpen = true;\n      this.onShow.emit();\n    }));\n    this.addKeyHandler();\n    if ((this.modal ?? true) && Build.isBrowser && document.body) {\n      document.body.classList.add('dropi-modal-open');\n    }\n  }\n\n  private startClose() {\n    if (this.isClosing) return;\n    this.isClosing = true;\n    this.isOpen = false;\n    this.removeKeyHandler();\n    if (this.closeTimer) clearTimeout(this.closeTimer);\n    this.closeTimer = setTimeout(() => {\n      this.mounted = false;\n      this.isClosing = false;\n      this.closeTimer = null;\n      if ((this.modal ?? true) && Build.isBrowser && document.body) {\n        document.body.classList.remove('dropi-modal-open');\n      }\n      this.onHide.emit();\n    }, 200);\n  }\n\n  private addKeyHandler() {\n    if (!this.closeOnEscape) return;\n    this.keyHandler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && this.visible && this.dismissable) this.hide();\n    };\n    document.addEventListener('keydown', this.keyHandler);\n  }\n\n  private removeKeyHandler() {\n    if (this.keyHandler) { document.removeEventListener('keydown', this.keyHandler); this.keyHandler = null; }\n  }\n\n  render() {\n    return (\n      <div \n        class={`modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`}\n        style={{ display: this.mounted || this.isClosing ? 'flex' : 'none' }}\n      >\n        {(this.modal ?? true) && <div class=\"modal-mask\" onClick={() => this.dismissable && this.hide()} />}\n        <div class={`modal-panel size-${this.size || 'm'}`} role=\"dialog\" aria-modal=\"true\">\n          {this.showHeader && (\n            <div class=\"modal-header\">\n              {this.header && <span class=\"modal-title\">{this.header}</span>}\n              <slot name=\"header\"></slot>\n              {this.showCloseIcon && (\n                <button class=\"modal-close\" onClick={() => this.hide()} aria-label=\"Cerrar\">\n                  &times;\n                </button>\n              )}\n            </div>\n          )}\n          <div class=\"modal-content\"><slot /></div>\n          {this.showFooter && <div class=\"modal-footer\"><slot name=\"footer\" /></div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-navbar.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.navbar{display:flex;align-items:center;height:56px;padding:0 var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);gap:var(--Size-4, 16px);position:relative}.navbar__left{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__menu-btn{background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__menu-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__logo{height:28px;object-fit:contain}.navbar__items{flex:1;list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--Size-1, 4px)}.navbar__item{display:flex;align-items:center;gap:var(--Size-1, 4px);padding:6px var(--Size-3, 12px);background:none;border:none;border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;transition:background 0.15s, color 0.15s;white-space:nowrap}.navbar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.navbar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}.navbar__right{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__icon-btn{position:relative;background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__icon-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__notif-badge{position:absolute;top:2px;right:2px;background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff);font-size:9px;font-weight:var(--font-weight-bold);min-width:14px;height:14px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 3px}.navbar__user-btn{display:flex;align-items:center;gap:var(--Size-1, 4px);background:none;border:none;padding:4px 8px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background 0.15s;font-family:inherit}.navbar__user-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.navbar__avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700)}.navbar__user-name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const DropiNavbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clickLoadItem = createEvent(this, "clickLoadItem", 7);
+        this.dropiNotificationsClick = createEvent(this, "dropiNotificationsClick", 7);
+        this.dropiUserClick = createEvent(this, "dropiUserClick", 7);
+        this.dropiMenuToggle = createEvent(this, "dropiMenuToggle", 7);
+    }
+    /** Logo URL */
+    logoUrl = '';
+    /** Logo alt */
+    logoAlt = 'Logo';
+    /** Navigation data (matches Angular `data: DropiTableRow[]`) */
+    data = [];
+    /** Title (matches Angular `title`) */
+    title = '';
+    /** Active item ID */
+    activeId = '';
+    /** User name */
+    userName = '';
+    /** User avatar URL */
+    userAvatar = '';
+    /** Notification count (0 = no badge) */
+    notifications = 0;
+    /** Show menu toggle (mobile) */
+    showMenuToggle = true;
+    /** Emitted when a nav item is clicked (matches Angular `clickLoadItem`) */
+    clickLoadItem;
+    /** Emitted when notification bell is clicked */
+    dropiNotificationsClick;
+    /** Emitted when avatar/user is clicked */
+    dropiUserClick;
+    /** Emitted when mobile menu toggle clicked */
+    dropiMenuToggle;
+    get parsedData() {
+        const val = this.data;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    render() {
+        const items = this.parsedData;
+        return (h("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, h("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: 'eca18144260cb6471a19f78f7ce75254ba5a138e', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: '374ea8553605f289c413882c757eda70054ba71d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '8e2abceb591c0de10ca99d2090fea7a0da792a7b', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'fd26fc64ea3325ddc439a802ab56e69b329020dd', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: '51a6532caac773ea7236e95b0aa5ee9ee052db4a', class: "navbar__right" }, h("button", { key: '309b47a8fa074e7d47632a95490c5ba0d2950745', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '2a970ae36fdd4e42d9fbab5d8ebb61a1d14d54c8', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: '67412b6d3c7689f78cca15e91a1e8e3ee88152a2', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: '38cc70fdc1c204b06b62c54a23f4b8c76647fd6b', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+            ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '1f2cfe4bddef60d31751c24c3f02cace2f07d6dd', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: '520aff19c56964eefb3b1f59646c19df779c7e47', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
+    }
+};
+DropiNavbar.style = dropiNavbarCss();
+
+export { DropiNavbar as dropi_navbar };
+//# sourceMappingURL=dropi-navbar.entry.esm.js.map
+
+//# sourceMappingURL=dropi-navbar.entry.js.map

package/dist/dropi-ui/dropi-navbar.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-navbar.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-navbar/dropi-navbar.css?tag=dropi-navbar&encapsulation=shadow","src/components/dropi-navbar/dropi-navbar.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.navbar {\n  display: flex;\n  align-items: center;\n  height: 56px;\n  padding: 0 var(--Size-4, 16px);\n  background: var(--Neutral-White, #ffffff);\n  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);\n  gap: var(--Size-4, 16px);\n  position: relative;\n}\n\n/* Left */\n.navbar__left {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.navbar__menu-btn {\n  background: none;\n  border: none;\n  padding: 6px;\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  display: flex;\n  align-items: center;\n  transition: background 0.15s;\n}\n.navbar__menu-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.navbar__logo {\n  height: 28px;\n  object-fit: contain;\n}\n\n/* Center nav items */\n.navbar__items {\n  flex: 1;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n}\n\n.navbar__item {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n  padding: 6px var(--Size-3, 12px);\n  background: none;\n  border: none;\n  border-radius: var(--Border-1, 4px);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-600, #475066);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n  white-space: nowrap;\n}\n.navbar__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n.navbar__item--active {\n  background: var(--Primary-Primary-50, #fff5eb);\n  color: var(--Primary-Primary-500, #f49a3d);\n  font-weight: var(--font-weight-bold, 700);\n}\n\n.navbar__badge {\n  background: var(--Error-Error-500, #f46a6b);\n  color: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-xxs);\n  font-weight: var(--font-weight-bold);\n  min-width: 16px;\n  height: 16px;\n  border-radius: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 4px;\n}\n\n/* Right */\n.navbar__right {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.navbar__icon-btn {\n  position: relative;\n  background: none;\n  border: none;\n  padding: 6px;\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  display: flex;\n  align-items: center;\n  transition: background 0.15s;\n}\n.navbar__icon-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.navbar__notif-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  background: var(--Error-Error-500, #f46a6b);\n  color: var(--Neutral-White, #ffffff);\n  font-size: 9px;\n  font-weight: var(--font-weight-bold);\n  min-width: 14px;\n  height: 14px;\n  border-radius: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 3px;\n}\n\n.navbar__user-btn {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  border-radius: var(--Border-1, 4px);\n  cursor: pointer;\n  transition: background 0.15s;\n  font-family: inherit;\n}\n.navbar__user-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.navbar__avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.navbar__avatar-placeholder {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-bold, 700);\n}\n\n.navbar__user-name {\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport interface NavItem {\n  id: string;\n  label: string;\n  icon?: string;\n  badge?: string | number;\n  href?: string;\n}\n\n/**\n * @component dropi-navbar\n * Top navigation bar with logo, nav items, notification bell, and user avatar.\n */\n@Component({\n  tag: 'dropi-navbar',\n  styleUrl: 'dropi-navbar.css',\n  shadow: true,\n})\nexport class DropiNavbar {\n  /** Logo URL */\n  @Prop() logoUrl: string = '';\n  /** Logo alt */\n  @Prop() logoAlt: string = 'Logo';\n\n  /** Navigation data (matches Angular `data: DropiTableRow[]`) */\n  @Prop() data: any[] | string = [];\n  /** Title (matches Angular `title`) */\n  @Prop() title: string = '';\n\n  /** Active item ID */\n  @Prop() activeId: string = '';\n  /** User name */\n  @Prop() userName: string = '';\n  /** User avatar URL */\n  @Prop() userAvatar: string = '';\n  /** Notification count (0 = no badge) */\n  @Prop() notifications: number = 0;\n  /** Show menu toggle (mobile) */\n  @Prop() showMenuToggle: boolean = true;\n\n  /** Emitted when a nav item is clicked (matches Angular `clickLoadItem`) */\n  @Event() clickLoadItem: EventEmitter<any>;\n  /** Emitted when notification bell is clicked */\n  @Event() dropiNotificationsClick: EventEmitter<void>;\n  /** Emitted when avatar/user is clicked */\n  @Event() dropiUserClick: EventEmitter<void>;\n  /** Emitted when mobile menu toggle clicked */\n  @Event() dropiMenuToggle: EventEmitter<void>;\n\n  private get parsedData(): any[] {\n    const val = this.data;\n    return typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  render() {\n    const items = this.parsedData;\n\n    return (\n      <nav class=\"navbar\">\n        {/* Left: logo + title + menu toggle */}\n        <div class=\"navbar__left\">\n          {this.showMenuToggle && (\n            <button class=\"navbar__menu-btn\" onClick={() => this.dropiMenuToggle.emit()} aria-label=\"Menú\">\n              <dropi-icon name=\"Menu\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-700\" />\n            </button>\n          )}\n          {this.logoUrl && (\n            <img class=\"navbar__logo\" src={this.logoUrl} alt={this.logoAlt} />\n          )}\n          {this.title && <span class=\"navbar__title\">{this.title}</span>}\n        </div>\n\n        {/* Center: nav items */}\n        {items.length > 0 && (\n          <ul class=\"navbar__items\">\n            {items.map(item => (\n              <li>\n                <button\n                  class={{ 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }}\n                  onClick={() => this.clickLoadItem.emit(item)}\n                  type=\"button\"\n                >\n                  {item.icon && <dropi-icon name={item.icon} iconWidth=\"16px\" iconHeight=\"16px\" color={item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600'} />}\n                  <span>{item.name?.value || item.label}</span>\n                  {item.badge != null && String(item.badge) !== '0' && (\n                    <span class=\"navbar__badge\">{item.badge}</span>\n                  )}\n                </button>\n              </li>\n            ))}\n          </ul>\n        )}\n\n        {/* Right: notifications + user */}\n        <div class=\"navbar__right\">\n          <button class=\"navbar__icon-btn\" onClick={() => this.dropiNotificationsClick.emit()} aria-label=\"Notificaciones\">\n            <dropi-icon name=\"Bell\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-600\" />\n            {this.notifications > 0 && (\n              <span class=\"navbar__notif-badge\">{this.notifications > 99 ? '99+' : this.notifications}</span>\n            )}\n          </button>\n\n          <button class=\"navbar__user-btn\" onClick={() => this.dropiUserClick.emit()} type=\"button\">\n            {this.userAvatar\n              ? <img class=\"navbar__avatar\" src={this.userAvatar} alt={this.userName} />\n              : <div class=\"navbar__avatar-placeholder\">\n                  {this.userName ? this.userName[0].toUpperCase() : '?'}\n                </div>\n            }\n            {this.userName && <span class=\"navbar__user-name\">{this.userName}</span>}\n            <dropi-icon name=\"Arrow-Down-2\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Gray-Gray-400\" />\n          </button>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-otp-send-code.entry.js

@@ -0,0 +1,101 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
+
+const OTP_LENGTH = 6;
+const RESEND_SECONDS = 30;
+const DropiOtpSendCode = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.codeCompleted = createEvent(this, "codeCompleted", 7);
+        this.codeAccepted = createEvent(this, "codeAccepted", 7);
+        this.dropiResend = createEvent(this, "dropiResend", 7);
+    }
+    /** Delivery method label */
+    engine = 'email';
+    /** Contact info (email/phone to show in label) */
+    labelContact = '';
+    /** Show contact label */
+    showLabelContact = false;
+    /** Error message to display */
+    errorMessage = '';
+    digits = Array(OTP_LENGTH).fill('');
+    digitStates = Array(OTP_LENGTH).fill('idle');
+    countdown = RESEND_SECONDS;
+    canResend = false;
+    error = false;
+    inputs = [];
+    timer;
+    /** Emitted when all 6 digits are entered. */
+    codeCompleted;
+    /** Emitted when all 6 digits are entered (alternative event). */
+    codeAccepted;
+    /** Emitted when resend is requested */
+    dropiResend;
+    componentDidLoad() { this.startCountdown(); }
+    disconnectedCallback() { clearInterval(this.timer); }
+    startCountdown() {
+        this.countdown = RESEND_SECONDS;
+        this.canResend = false;
+        clearInterval(this.timer);
+        this.timer = setInterval(() => {
+            this.countdown--;
+            if (this.countdown <= 0) {
+                clearInterval(this.timer);
+                this.canResend = true;
+            }
+        }, 1000);
+    }
+    handleInput(e, index) {
+        const val = e.target.value.replace(/\D/g, '').slice(-1);
+        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
+        newDigits[index] = val;
+        this.digits = newDigits;
+        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
+        newStates[index] = val ? 'filled' : 'idle';
+        this.digitStates = newStates;
+        if (val && index < OTP_LENGTH - 1)
+            this.inputs[index + 1]?.focus();
+        if (newDigits.every(d => d !== '')) {
+            const finalCode = newDigits.join('');
+            this.codeCompleted.emit(finalCode);
+            this.codeAccepted.emit(finalCode);
+        }
+    }
+    handleKeyDown(e, index) {
+        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
+            this.inputs[index - 1]?.focus();
+        }
+    }
+    handlePaste(e) {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
+        const newDigits = Array(OTP_LENGTH).fill('');
+        text.split('').forEach((c, i) => { newDigits[i] = c; });
+        this.digits = newDigits;
+        this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
+        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        if (newDigits.every(d => d !== '')) {
+            const finalCode = newDigits.join('');
+            this.codeCompleted.emit(finalCode);
+            this.codeAccepted.emit(finalCode);
+        }
+    }
+    render() {
+        const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
+        return (h("div", { key: '8071fefc81136d40bbbb9e899e93cf482e824ccd', class: "otp" }, this.showLabelContact && (h("p", { key: '811bc73073e180fe9094e99596c222870ed6c01f', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '3fe866ea995638f1b003330ee70c9f21e4c700a0' }, " ", this.labelContact))), h("div", { key: '17701568ff66f89f89fce0f10fdda45840fffd5f', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+                if (el)
+                    this.inputs[i] = el;
+            }, class: {
+                'otp__digit': true,
+                'otp__digit--filled': (this.digitStates ?? [])[i] === 'filled',
+                'otp__digit--error': this.error,
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: (this.digits ?? [])[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: 'ab3021f6227105d3bb2a244e4b9b08c8dca51dec', class: "otp__error" }, this.errorMessage)), h("div", { key: '6915de3762c811ad365336e8dc2b129c20abe3a6', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+    }
+};
+DropiOtpSendCode.style = dropiOtpSendCodeCss();
+
+export { DropiOtpSendCode as dropi_otp_send_code };
+//# sourceMappingURL=dropi-otp-send-code.entry.esm.js.map
+
+//# sourceMappingURL=dropi-otp-send-code.entry.js.map

package/dist/dropi-ui/dropi-otp-send-code.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-otp-send-code.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-otp-send-code/dropi-otp-send-code.css?tag=dropi-otp-send-code&encapsulation=shadow","src/components/dropi-otp-send-code/dropi-otp-send-code.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }\n\n.otp__label {\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n  text-align: center;\n  margin: 0;\n}\n\n.otp__inputs {\n  display: flex;\n  gap: var(--Size-4, 16px);\n}\n\n.otp__digit {\n  width: 56px;\n  height: 56px;\n  border: 1.5px solid var(--Gray-Gray-200, #d3d7de);\n  border-radius: var(--Border-2, 8px);\n  text-align: center;\n  font-size: 22px;\n  font-weight: var(--font-weight-bold, 700);\n  font-family: inherit;\n  color: var(--Gray-Gray-800, #1f2433);\n  outline: none;\n  transition: border-color 0.15s ease;\n  background: var(--Neutral-White, #ffffff);\n}\n\n.otp__digit:focus { \n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n.otp__digit--filled { \n  border: 1px solid var(--Success-Success-500, #0abb87); \n  color: var(--Neutral-Neutral-900, #0e111a); \n}\n.otp__digit--error { \n  border: 1px solid var(--Error-Error-500, #f46a6b);\n}\n\n.otp__error {\n  margin: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Error-Error-500, #f46a6b);\n  text-align: center;\n}\n\n.otp__resend { text-align: center; }\n\n.otp__countdown {\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.otp__resend-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  cursor: pointer;\n  text-decoration: underline;\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nconst OTP_LENGTH = 6;\nconst RESEND_SECONDS = 30;\n\n/**\n * @component dropi-otp-send-code\n * 6-digit OTP input with countdown timer and resend capability.\n */\n@Component({\n  tag: 'dropi-otp-send-code',\n  styleUrl: 'dropi-otp-send-code.css',\n  shadow: true,\n})\nexport class DropiOtpSendCode {\n  /** Delivery method label */\n  @Prop() engine: 'email' | 'sms' | '2fa' = 'email';\n  /** Contact info (email/phone to show in label) */\n  @Prop() labelContact: string = '';\n  /** Show contact label */\n  @Prop() showLabelContact: boolean = false;\n  /** Error message to display */\n  @Prop() errorMessage: string = '';\n\n  @State() private digits: string[] = Array(OTP_LENGTH).fill('');\n  @State() private digitStates: ('idle' | 'filled' | 'error')[] = Array(OTP_LENGTH).fill('idle');\n  @State() private countdown: number = RESEND_SECONDS;\n  @State() private canResend: boolean = false;\n  @State() private error: boolean = false;\n\n  private inputs: HTMLInputElement[] = [];\n  private timer: any;\n\n  /** Emitted when all 6 digits are entered. */\n  @Event() codeCompleted: EventEmitter<string>;\n  /** Emitted when all 6 digits are entered (alternative event). */\n  @Event() codeAccepted: EventEmitter<string>;\n  /** Emitted when resend is requested */\n  @Event() dropiResend: EventEmitter<void>;\n\n  componentDidLoad() { this.startCountdown(); }\n  disconnectedCallback() { clearInterval(this.timer); }\n\n  private startCountdown() {\n    this.countdown = RESEND_SECONDS;\n    this.canResend = false;\n    clearInterval(this.timer);\n    this.timer = setInterval(() => {\n      this.countdown--;\n      if (this.countdown <= 0) { clearInterval(this.timer); this.canResend = true; }\n    }, 1000);\n  }\n\n  private handleInput(e: InputEvent, index: number) {\n    const val = (e.target as HTMLInputElement).value.replace(/\\D/g, '').slice(-1);\n    const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];\n    newDigits[index] = val;\n    this.digits = newDigits;\n\n    const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];\n    newStates[index] = val ? 'filled' : 'idle';\n    this.digitStates = newStates;\n\n    if (val && index < OTP_LENGTH - 1) this.inputs[index + 1]?.focus();\n\n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {\n      this.inputs[index - 1]?.focus();\n    }\n  }\n\n  private handlePaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const text = e.clipboardData?.getData('text')?.replace(/\\D/g, '').slice(0, OTP_LENGTH) || '';\n    const newDigits = Array(OTP_LENGTH).fill('');\n    text.split('').forEach((c, i) => { newDigits[i] = c; });\n    this.digits = newDigits;\n    this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');\n    this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();\n    \n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    }\n  }\n\n  render() {\n    const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';\n\n    return (\n      <div class=\"otp\">\n        {this.showLabelContact && (\n          <p class=\"otp__label\">\n            Ingresa el código enviado a tu {engineLabel}\n            {this.labelContact && <strong> {this.labelContact}</strong>}\n          </p>\n        )}\n\n        <div class=\"otp__inputs\" onPaste={(e) => this.handlePaste(e)}>\n          {Array.from({ length: OTP_LENGTH }, (_, i) => (\n            <input\n              key={i}\n              ref={(el) => { if (el) this.inputs[i] = el as HTMLInputElement; }}\n              class={{\n                'otp__digit': true,\n                'otp__digit--filled': (this.digitStates ?? [])[i] === 'filled',\n                'otp__digit--error': this.error,\n              }}\n              type=\"text\"\n              inputMode=\"numeric\"\n              maxLength={1}\n              value={(this.digits ?? [])[i] ?? ''}\n              onInput={(e) => this.handleInput(e as InputEvent, i)}\n              onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent, i)}\n            />\n          ))}\n        </div>\n\n        {this.error && this.errorMessage && (\n          <p class=\"otp__error\">{this.errorMessage}</p>\n        )}\n\n        <div class=\"otp__resend\">\n          {this.canResend ? (\n            <button class=\"otp__resend-btn\" onClick={() => { this.startCountdown(); this.dropiResend.emit(); }}>\n              Reenviar código\n            </button>\n          ) : (\n            <span class=\"otp__countdown\">Reenviar en {this.countdown}s</span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-paginator.entry.js

@@ -0,0 +1,70 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{width:auto;padding:0 var(--Size-2, 8px);border-radius:var(--Border-1, 4px);gap:4px}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-label{font-size:var(--font-size-s, 12px);color:inherit}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}`;
+
+const DropiPaginator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pageChange = createEvent(this, "pageChange", 7);
+    }
+    /** Total number of pages */
+    totalPages = 1;
+    /** Current page (1-based) */
+    currentPage = 1;
+    /** Disabled state */
+    disabled = false;
+    /** Max page buttons to show at once */
+    maxVisiblePages = 8;
+    /** Hide total page count (show only arrows) */
+    isNotTotalPages = false;
+    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
+    noLabels = false;
+    /** Emitted when page changes. e.detail = new page number */
+    pageChange;
+    get pageNumbers() {
+        const total = this.totalPages;
+        const cur = this.currentPage;
+        const max = this.maxVisiblePages;
+        if (total <= max)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const half = Math.floor(max / 2);
+        let start = Math.max(1, cur - half);
+        let end = Math.min(total, start + max - 1);
+        if (end - start < max - 1)
+            start = Math.max(1, end - max + 1);
+        const pages = [];
+        if (start > 1) {
+            pages.push(1);
+            if (start > 2)
+                pages.push('...');
+        }
+        for (let i = start; i <= end; i++)
+            pages.push(i);
+        if (end < total) {
+            if (end < total - 1)
+                pages.push('...');
+            pages.push(total);
+        }
+        return pages;
+    }
+    goTo(p) {
+        if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
+            return;
+        this.currentPage = p;
+        this.pageChange.emit(this.currentPage);
+    }
+    render() {
+        const pages = this.pageNumbers;
+        const isFirst = this.currentPage <= 1;
+        const isLast = this.currentPage >= this.totalPages;
+        return (h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '249d4f2fc0a7ba2d790e3cf1c7a36a8d853a8cfe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '7b3cbe1cbd33db77fe540b5e179ed759e2d515e9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '4f162e4df1573f5b6df40477099c3dc50347b738', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'a569b225a577e3dfb41466247be33846254ba1f6', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+            ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: 'ad51ec2f21741cf89e0e692cca2057c8cacea9f3', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '3eb463a7749ef9f419613c07975a87073df29ecf', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'a6ece1855840a3ada48de22151bab4a43fd1972e', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '4ac9168aba1221ad17a08f7463cc2f065ea1ce6f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '9e3618334ec1d476ea59ea00a600499f47a45a9a', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
+    }
+};
+DropiPaginator.style = dropiPaginatorCss();
+
+export { DropiPaginator as dropi_paginator };
+//# sourceMappingURL=dropi-paginator.entry.esm.js.map
+
+//# sourceMappingURL=dropi-paginator.entry.js.map

package/dist/dropi-ui/dropi-paginator.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-paginator.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-paginator/dropi-paginator.css?tag=dropi-paginator&encapsulation=shadow","src/components/dropi-paginator/dropi-paginator.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.paginator {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--Size-4, 16px);\n  flex-wrap: wrap;\n}\n\n.paginator-pages {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n}\n\n.paginator-btn {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s ease;\n}\n\n.paginator-btn:hover:not(:disabled) {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.paginator-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.paginator-btn--active {\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n  font-weight: var(--font-weight-bold, 700);\n}\n\n.paginator-btn--active:hover {\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.paginator-btn--arrow {\n  width: auto;\n  padding: 0 var(--Size-2, 8px);\n  border-radius: var(--Border-1, 4px);\n  gap: 4px;\n}\n\n.paginator-btn--arrow:hover:not(:disabled) {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.paginator-label {\n  font-size: var(--font-size-s, 12px);\n  color: inherit;\n}\n\n.paginator-ellipsis {\n  color: var(--Gray-Gray-400, #858ea6);\n  padding: 0 4px;\n  font-size: var(--font-size-s, 12px);\n  display: flex;\n  align-items: center;\n}\n\n.paginator-size {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n}\n\n.paginator-size-label {\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.paginator-size-select {\n  height: 32px;\n  padding: 0 var(--Size-2, 8px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-1, 4px);\n  background: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-paginator\n * Pagination control with page numbers, prev/next buttons and items-per-page selector.\n */\n@Component({\n  tag: 'dropi-paginator',\n  styleUrl: 'dropi-paginator.css',\n  shadow: true,\n})\nexport class DropiPaginator {\n  /** Total number of pages */\n  @Prop() totalPages: number = 1;\n  /** Current page (1-based) */\n  @Prop({ mutable: true, reflect: true }) currentPage: number = 1;\n  /** Disabled state */\n  @Prop() disabled: boolean = false;\n  /** Max page buttons to show at once */\n  @Prop() maxVisiblePages: number = 8;\n  /** Hide total page count (show only arrows) */\n  @Prop() isNotTotalPages: boolean = false;\n  /** Hide \"Anterior\"/\"Siguiente\" text labels, show only arrows */\n  @Prop() noLabels: boolean = false;\n\n  /** Emitted when page changes. e.detail = new page number */\n  @Event() pageChange: EventEmitter<number>;\n\n  private get pageNumbers(): (number | '...')[] {\n    const total = this.totalPages;\n    const cur = this.currentPage;\n    const max = this.maxVisiblePages;\n\n    if (total <= max) return Array.from({ length: total }, (_, i) => i + 1);\n\n    const half = Math.floor(max / 2);\n    let start = Math.max(1, cur - half);\n    let end = Math.min(total, start + max - 1);\n    if (end - start < max - 1) start = Math.max(1, end - max + 1);\n\n    const pages: (number | '...')[] = [];\n    if (start > 1) { pages.push(1); if (start > 2) pages.push('...'); }\n    for (let i = start; i <= end; i++) pages.push(i);\n    if (end < total) { if (end < total - 1) pages.push('...'); pages.push(total); }\n    return pages;\n  }\n\n  private goTo(p: number) {\n    if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage) return;\n    this.currentPage = p;\n    this.pageChange.emit(this.currentPage);\n  }\n\n  render() {\n    const pages = this.pageNumbers;\n    const isFirst = this.currentPage <= 1;\n    const isLast = this.currentPage >= this.totalPages;\n\n    return (\n      <div class=\"paginator\">\n        <div class=\"paginator-pages\">\n          {!isFirst && !this.noLabels && (\n            <button\n              class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n              onClick={() => this.goTo(1)}\n              aria-label=\"Primera página\"\n              disabled={this.disabled}\n            >\n              <dropi-icon name=\"Arrow-double-small-left\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n            </button>\n          )}\n\n          {!isFirst && (\n            <button\n              class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n              onClick={() => this.goTo(this.currentPage - 1)}\n              aria-label=\"Anterior\"\n              disabled={this.disabled}\n            >\n              <dropi-icon name=\"Dropdown-left\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n              {!this.noLabels && <span class=\"paginator-label\">Anterior</span>}\n            </button>\n          )}\n\n          {pages.map((p, i) =>\n            p === '...'\n              ? <span class=\"paginator-ellipsis\" key={`e${i}`}>…</span>\n              : <button\n                  key={p}\n                  class={{ 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }}\n                  onClick={() => this.goTo(p as number)}\n                  aria-current={p === this.currentPage ? 'page' : undefined}\n                  disabled={this.disabled}\n                >\n                  {p}\n                </button>\n          )}\n\n          {!isLast && (\n            <button\n              class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n              onClick={() => this.goTo(this.currentPage + 1)}\n              aria-label=\"Siguiente\"\n              disabled={this.disabled}\n            >\n              {!this.noLabels && <span class=\"paginator-label\">Siguiente</span>}\n              <dropi-icon name=\"Dropdown-Right\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n            </button>\n          )}\n\n          {!isLast && !this.noLabels && (\n            <button\n              class={{ 'paginator-btn': true, 'paginator-btn--arrow': true }}\n              onClick={() => this.goTo(this.totalPages)}\n              aria-label=\"Última página\"\n              disabled={this.disabled}\n            >\n              <dropi-icon name=\"Arrow-double-small-right\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}