@dropi/ui 0.1.41 → 0.1.42

package/dist/collection/components/dropi-input/dropi-input.js

@@ -81,13 +81,13 @@ export class DropiInput {
     touched = false;
     // ── Events ──────────────────────────────────────────────────
     /** Emitted on every keystroke with the current value */
-    onInput;
+    dropiInput;
     /** Emitted on blur with the final value */
-    onChange;
+    dropiChange;
     /** Emitted on focus */
-    onFocus;
+    dropiFocus;
     /** Emitted on blur */
-    onBlur;
+    dropiBlur;
     inputPropertiesChanged(val) {
         if (!val)
             return;
@@ -150,7 +150,7 @@ export class DropiInput {
             val = this.formatThousands(val, this.isMoneyInput);
         this.value = val;
         this.internals.setFormValue(val);
-        this.onInput.emit(val);
+        this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
         if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
@@ -161,12 +161,12 @@ export class DropiInput {
         }
     }
     handleFocus() {
-        this.onFocus.emit();
+        this.dropiFocus.emit();
     }
     handleBlur() {
         this.touched = true;
-        this.onChange.emit(this.value);
-        this.onBlur.emit();
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
     }
     togglePassword() {
         if (this.disabled)
@@ -231,14 +231,14 @@ export class DropiInput {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: 'a6c762070ca5c0ffb5028f1899d4e026721664ee', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'fb223818b568114400aa456e595623c882b8bcd2', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '04c522a21ba3e0ec9710d267feb866d79dae7cbb', class: "asterisk" }, " *"))), h("div", { key: '1672e9954f11ad61e6f224953f97aa7036e5b212', class: "form-group" }, h("div", { key: 'd9bfc41486fe3f93d5144f55bf89a4ae1a916f5e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: 'e7d21fd9b115925ed2bc584a6f5c614ea3761922', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '5593f56ed03acdb79a9e8e4fefac58d585a5a092', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'ef70c2be1606334593269be63234295bdbdf86b1', id: this.resolvedId, class: {
+        return (h("div", { key: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), h("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, h("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: 'c0d079355d299b26dc2e8bde4347fd30aa791e21', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'fca9bc2745e0ccb7ba3b10c4e3e6b5d8bbb6f645', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'f864cc07f591d0948cb06d6dde1e910bab10187a', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'be2cf0d632fd8245e817d4023b4e4f060bc80d24', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '3768369a635e8ac03db24b0ba7fa7a214cc71577', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -733,8 +733,8 @@ export class DropiInput {
     }
     static get events() {
         return [{
-                "method": "onInput",
-                "name": "onInput",
+                "method": "dropiInput",
+                "name": "dropiInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -748,8 +748,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onChange",
-                "name": "onChange",
+                "method": "dropiChange",
+                "name": "dropiChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -763,8 +763,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onFocus",
-                "name": "onFocus",
+                "method": "dropiFocus",
+                "name": "dropiFocus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -778,8 +778,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onBlur",
-                "name": "onBlur",
+                "method": "dropiBlur",
+                "name": "dropiBlur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-languages-selector/dropi-languages-selector.js

@@ -13,7 +13,7 @@ export class DropiLanguagesSelector {
     languages = [];
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang = null;
-    languageChange;
+    dropiLanguageChange;
     isOpen = false;
     parsedLanguages = [];
     currentLang = null;
@@ -40,7 +40,7 @@ export class DropiLanguagesSelector {
     select(lang) {
         this.currentLang = lang;
         this.isOpen = false;
-        this.languageChange.emit(lang);
+        this.dropiLanguageChange.emit(lang);
     }
     render() {
         if (!this.currentLang)
@@ -124,8 +124,8 @@ export class DropiLanguagesSelector {
     }
     static get events() {
         return [{
-                "method": "languageChange",
-                "name": "languageChange",
+                "method": "dropiLanguageChange",
+                "name": "dropiLanguageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-logo/dropi-logo.js

@@ -25,7 +25,7 @@ export class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '479af3da2dc04c7d6e79b99494fce0fb5419af4d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '6b78e7004f4b1dd782e4c17dae7b264fff483875', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: '2a5ed49bd2ac8592db5b06256ff4e911e26ee6fd', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'f0f63e2e5ceb30c24eac3f7f5a3446858b632f90', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
     static get is() { return "dropi-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-modal/dropi-modal.css

@@ -5,10 +5,11 @@
   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;
+  transition: opacity 0.18s ease; z-index: 9999;
+  visibility: hidden;
 }
-.modal-root--open { opacity: 1; pointer-events: auto; }
-.modal-root--closing { opacity: 1; pointer-events: none; }
+.modal-root--open { opacity: 1; pointer-events: auto; visibility: visible; }
+.modal-root--closing { opacity: 1; pointer-events: none; visibility: visible; }
 
 .modal-mask {
   position: absolute; inset: 0;
@@ -53,6 +54,8 @@
   align-items: flex-start; 
   gap: var(--Size-1, 4px); 
   width: 100%;
+  margin-top: auto;
+  flex-shrink: 0;
 }
 .modal-footer:empty { display: none; }
 
@@ -72,12 +75,14 @@
 }
 
 .modal-panel.size-m .modal-footer,
-.modal-panel.size-s .modal-footer { 
-  justify-content: center; 
+.modal-panel.size-s .modal-footer,
+.modal-panel.size-xs .modal-footer { 
+  justify-content: flex-end; 
 }
 
 .modal-panel.size-m .modal-footer ::slotted(.button-container),
-.modal-panel.size-s .modal-footer ::slotted(.button-container) { 
+.modal-panel.size-s .modal-footer ::slotted(.button-container),
+.modal-panel.size-xs .modal-footer ::slotted(.button-container) { 
   min-width: unset !important;
   width: 100%;
 }
@@ -94,6 +99,7 @@
 .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-panel.size-xs { width: 320px; padding: 24px; gap: 16px; }
 
 .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); }

package/dist/collection/components/dropi-modal/dropi-modal.js

@@ -33,25 +33,25 @@ export class DropiModal {
     isDraggable = false;
     /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
     resizable = false;
-    onShow;
-    onHide;
-    visibleChange;
+    dropiShow;
+    dropiHide;
+    dropiVisibleChange;
     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());
+    canDismiss = false;
+    visibleChanged(val) {
+        if (val) {
+            this.openModal();
+        }
+        else {
+            this.startClose();
+        }
     }
     componentDidLoad() {
-        const isVisible = this.visible === true || String(this.visible) === 'true';
-        if (isVisible)
+        if (this.visible)
             this.openModal();
     }
     disconnectedCallback() {
@@ -62,35 +62,40 @@ export class DropiModal {
             document.body.classList.remove('dropi-modal-open');
         }
     }
-    async hide() {
-        this.visible = false;
-        this.visibleChange.emit(false);
-        this.startClose();
+    async dismiss() {
+        if (this.visible) {
+            this.visible = false;
+            this.dropiVisibleChange.emit(false);
+        }
+        else {
+            this.startClose();
+        }
     }
-    async show() {
+    async openModalExternally() {
         this.visible = true;
-        this.visibleChange.emit(true);
-        this.openModal();
+        this.dropiVisibleChange.emit(true);
     }
     openModal() {
         if (this.closeTimer) {
             clearTimeout(this.closeTimer);
             this.closeTimer = null;
         }
-        this.mounted = true;
+        // Safety: ensure it's not already open or in a closing state
         this.isClosing = false;
-        this.isOpen = false;
+        this.mounted = true;
         requestAnimationFrame(() => requestAnimationFrame(() => {
             this.isOpen = true;
-            this.onShow.emit();
+            this.dropiShow.emit();
         }));
         this.addKeyHandler();
+        this.canDismiss = false;
+        setTimeout(() => { this.canDismiss = true; }, 300);
         if ((this.modal ?? true) && Build.isBrowser && document.body) {
             document.body.classList.add('dropi-modal-open');
         }
     }
     startClose() {
-        if (this.isClosing)
+        if (this.isClosing || !this.mounted)
             return;
         this.isClosing = true;
         this.isOpen = false;
@@ -104,15 +109,15 @@ export class DropiModal {
             if ((this.modal ?? true) && Build.isBrowser && document.body) {
                 document.body.classList.remove('dropi-modal-open');
             }
-            this.onHide.emit();
+            this.dropiHide.emit();
         }, 200);
     }
     addKeyHandler() {
         if (!this.closeOnEscape)
             return;
         this.keyHandler = (e) => {
-            if (e.key === 'Escape' && this.visible && this.dismissable)
-                this.hide();
+            if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss)
+                this.dismiss();
         };
         document.addEventListener('keydown', this.keyHandler);
     }
@@ -123,7 +128,7 @@ export class DropiModal {
         }
     }
     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" })))));
+        return (h("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && h("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), h("div", { key: '63906a7ed0432879c3256a659ddd9773099244bc', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (h("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && h("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), h("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (h("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, h("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && h("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, h("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
     }
     static get is() { return "dropi-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -140,11 +145,11 @@ export class DropiModal {
     static get properties() {
         return {
             "visible": {
-                "type": "any",
+                "type": "boolean",
                 "mutable": true,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -410,7 +415,7 @@ export class DropiModal {
                 "mutable": false,
                 "complexType": {
                     "original": "ModalSize",
-                    "resolved": "\"drawer-l\" | \"drawer-m\" | \"drawer-s\" | \"drawer-xxl\" | \"full\" | \"l\" | \"m\" | \"s\" | \"sidebar-half\" | \"xxl\"",
+                    "resolved": "\"drawer-l\" | \"drawer-m\" | \"drawer-s\" | \"drawer-xxl\" | \"full\" | \"l\" | \"m\" | \"s\" | \"sidebar-half\" | \"xs\" | \"xxl\"",
                     "references": {
                         "ModalSize": {
                             "location": "local",
@@ -602,11 +607,11 @@ export class DropiModal {
     }
     static get events() {
         return [{
-                "method": "onShow",
-                "name": "onShow",
+                "method": "dropiShow",
+                "name": "dropiShow",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": false,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -617,11 +622,11 @@ export class DropiModal {
                     "references": {}
                 }
             }, {
-                "method": "onHide",
-                "name": "onHide",
+                "method": "dropiHide",
+                "name": "dropiHide",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": false,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -632,11 +637,11 @@ export class DropiModal {
                     "references": {}
                 }
             }, {
-                "method": "visibleChange",
-                "name": "visibleChange",
+                "method": "dropiVisibleChange",
+                "name": "dropiVisibleChange",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": false,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -650,7 +655,7 @@ export class DropiModal {
     }
     static get methods() {
         return {
-            "hide": {
+            "dismiss": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -667,7 +672,7 @@ export class DropiModal {
                     "tags": []
                 }
             },
-            "show": {
+            "openModalExternally": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],

package/dist/collection/components/dropi-navbar/dropi-navbar.js

@@ -36,9 +36,9 @@ export class DropiNavbar {
     }
     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
+        return (h("nav", { key: '83ec218a7545739c65d8f1f61197b429b0e7d407', class: "navbar" }, h("div", { key: 'e40038630c33a280f3c231b3dd26643f1c853ea3', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '0ecbae684b9324c48cd01a6081fd1951b3ba7cf8', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '9edea72a4508a984be2e6785f3f0fa6abe0625c4', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'b8cd9896736d505dad05b8df5f10928d40f250dd', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '4e5dae851fe28f1bc913d7a5d4d42a2413342635', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'b951cc880b8aaf718b85403e3420d73ac976aa60', 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: '8fe68f93af722982bac11890b106a35a292b3d98', class: "navbar__right" }, h("button", { key: 'a4d0ff928dca2502384cd21e0bc852cacc895a30', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '41007746a151c27059d41db7c4672a2b551882d1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'a0e5c6c9f8e2aaf3e67cc22bdff2ae65472b7cb5', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'e1996f9e1fa922cd03a4e9c5721f5be838a941d3', 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" })))));
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: 'd539c8f456564aa8d3a29e9d2e2ed6250241f411', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'd32cba548201f28a051142e889f6de207a4e67d2', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
     static get is() { return "dropi-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.js

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
-const OTP_LENGTH = 6;
 const RESEND_SECONDS = 30;
 /**
  * @component dropi-otp-send-code
- * 6-digit OTP input with countdown timer and resend capability.
+ * OTP input with configurable length, countdown timer and resend capability.
  */
 export class DropiOtpSendCode {
     /** Delivery method label */
@@ -14,19 +13,30 @@ export class DropiOtpSendCode {
     showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
-    digits = Array(OTP_LENGTH).fill('');
-    digitStates = Array(OTP_LENGTH).fill('idle');
+    /** Number of digits for the OTP */
+    digitsCount = 6;
+    digits = [];
+    digitStates = [];
     countdown = RESEND_SECONDS;
     canResend = false;
     error = false;
     inputs = [];
     timer;
-    /** Emitted when all 6 digits are entered. */
+    handleDigitsCountChange(newValue) {
+        this.digits = Array(newValue).fill('');
+        this.digitStates = Array(newValue).fill('idle');
+        this.inputs = [];
+    }
+    /** Emitted when all digits are entered. */
     codeCompleted;
-    /** Emitted when all 6 digits are entered (alternative event). */
+    /** Emitted when all digits are entered (alternative event). */
     codeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
+    componentWillLoad() {
+        this.digits = Array(this.digitsCount).fill('');
+        this.digitStates = Array(this.digitsCount).fill('idle');
+    }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
     startCountdown() {
@@ -43,13 +53,13 @@ export class DropiOtpSendCode {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
+        const newDigits = [...this.digits];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
+        const newStates = [...this.digitStates];
         newStates[index] = val ? 'filled' : 'idle';
         this.digitStates = newStates;
-        if (val && index < OTP_LENGTH - 1)
+        if (val && index < this.digitsCount - 1)
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
@@ -58,18 +68,18 @@ export class DropiOtpSendCode {
         }
     }
     handleKeyDown(e, index) {
-        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
+        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('');
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, this.digitsCount) || '';
+        const newDigits = Array(this.digitsCount).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();
+        this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
             this.codeCompleted.emit(finalCode);
@@ -78,14 +88,14 @@ export class DropiOtpSendCode {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '09eb961c43257d0a2a852ec05bafa7c050d9e4ec', class: "otp" }, this.showLabelContact && (h("p", { key: '46b215b5343892c5bca4d5aab6590e8da791fc9d', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '0c0871dbb99ad85a15275be1ed7f698cf9e4a808' }, " ", this.labelContact))), h("div", { key: 'd11d2c4f094a82240b3bde49039ff2e2d027f5d5', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: 'c9c6c3387cec2371049c547d87742563268bf28d', class: "otp" }, this.showLabelContact && (h("p", { key: 'c3f36c62d7502eff8f86ef8202c3dfc65d846ba1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '25c05d8f0773bf6f2af83f6154ac76638499e4d7' }, " ", this.labelContact))), h("div", { key: '3ca2687723735b3eb6ada997f622a4a50c2d7ee9', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, 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--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: 'a9156a4da398eeeec8128a012978e8e2c5f7eef4', class: "otp__error" }, this.errorMessage)), h("div", { key: '9c685306ba97d19907b92bbf6c203f0473a809fb', 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")))));
+            }, 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: 'ddcdd5dacc533b73e6353c2670f762168c2803d3', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a21650c43d7a62f9e187bd9f4eb307d275ff37be', 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")))));
     }
     static get is() { return "dropi-otp-send-code"; }
     static get encapsulation() { return "shadow"; }
@@ -180,6 +190,26 @@ export class DropiOtpSendCode {
                 "reflect": false,
                 "attribute": "error-message",
                 "defaultValue": "''"
+            },
+            "digitsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of digits for the OTP"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "digits-count",
+                "defaultValue": "6"
             }
         };
     }
@@ -201,7 +231,7 @@ export class DropiOtpSendCode {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when all 6 digits are entered."
+                    "text": "Emitted when all digits are entered."
                 },
                 "complexType": {
                     "original": "string",
@@ -216,7 +246,7 @@ export class DropiOtpSendCode {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when all 6 digits are entered (alternative event)."
+                    "text": "Emitted when all digits are entered (alternative event)."
                 },
                 "complexType": {
                     "original": "string",
@@ -240,4 +270,10 @@ export class DropiOtpSendCode {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "digitsCount",
+                "methodName": "handleDigitsCountChange"
+            }];
+    }
 }

package/dist/collection/components/dropi-paginator/dropi-paginator.js

@@ -17,7 +17,7 @@ export class DropiPaginator {
     /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
     noLabels = false;
     /** Emitted when page changes. e.detail = new page number */
-    pageChange;
+    dropiPageChange;
     get pageNumbers() {
         const total = this.totalPages;
         const cur = this.currentPage;
@@ -48,15 +48,15 @@ export class DropiPaginator {
         if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
             return;
         this.currentPage = p;
-        this.pageChange.emit(this.currentPage);
+        this.dropiPageChange.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 === '...'
+        return (h("div", { key: 'af6614df5a241ef536b6723d30bde12c8a6f474f', class: "paginator" }, h("div", { key: '8b5405baa717a36042fc03ca2e68370799c01ff7', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: 'c340304b29d658ef9eaa8105a91540660c829048', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '3adfc1508cbcedbb91f99e467db2270c40a4ac83', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '5936642c4b9e5b72546229996fbc72fe973e6f5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'c9f7eb1c0c27a738ee31e859617964fc75e514cc', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '5d448a9a6536c90c56fafd700e7c5998a85d6fdf', 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" }))))));
+            : 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: '1a43d8dde37cdbc40527eb1c66bc5001a64cf59f', 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: 'f76ccd791d02b25d78c509341b73e1c1bca0b986', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '822a3a7e4ac651e00c469b565e300a7efcc5614b', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '2b4f7435f9083ab9c4d9ce81be5c259eda830e4a', 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: '63ab5568c44ed3cbda917842defe4dc4254bb3f1', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }
@@ -196,8 +196,8 @@ export class DropiPaginator {
     }
     static get events() {
         return [{
-                "method": "pageChange",
-                "name": "pageChange",
+                "method": "dropiPageChange",
+                "name": "dropiPageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,