@dropi/ui 0.1.21 → 0.1.23

package/dist/{esm → dropi-ui}/dropi-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+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}}`;
 
@@ -45,18 +45,26 @@ const DropiModal = class {
     mounted = false;
     closeTimer = null;
     keyHandler = null;
-    visibleChanged(val) {
-        val ? this.openModal() : this.startClose();
+    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() {
-        if (this.visible)
+        const isVisible = this.visible === true || String(this.visible) === 'true';
+        if (isVisible)
             this.openModal();
     }
     disconnectedCallback() {
         this.removeKeyHandler();
         if (this.closeTimer)
             clearTimeout(this.closeTimer);
-        document.body.style.overflow = '';
+        if (typeof document !== 'undefined') {
+            document.body.classList.remove('dropi-modal-open');
+        }
     }
     async hide() {
         this.visible = false;
@@ -81,8 +89,8 @@ const DropiModal = class {
             this.onShow.emit();
         }));
         this.addKeyHandler();
-        if (this.modal && document.body && document.body.style) {
-            document.body.style.setProperty('overflow', 'hidden');
+        if ((this.modal ?? true) && Build.isBrowser && document.body) {
+            document.body.classList.add('dropi-modal-open');
         }
     }
     startClose() {
@@ -96,8 +104,9 @@ const DropiModal = class {
         this.closeTimer = setTimeout(() => {
             this.mounted = false;
             this.isClosing = false;
-            if (document.body && document.body.style) {
-                document.body.style.setProperty('overflow', '');
+            this.closeTimer = null;
+            if ((this.modal ?? true) && Build.isBrowser && document.body) {
+                document.body.classList.remove('dropi-modal-open');
             }
             this.onHide.emit();
         }, 200);
@@ -118,9 +127,7 @@ const DropiModal = class {
         }
     }
     render() {
-        if (!this.mounted)
-            return null;
-        return (h("div", { class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, this.modal && h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { class: "modal-header" }, this.header && h("span", { class: "modal-title" }, this.header), h("slot", { name: "header" }), this.showCloseIcon && (h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { class: "modal-content" }, h("slot", null)), this.showFooter && h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
+        return (h("div", { key: '6f790289cbdcb0cb92040abc471e8dc592f3d0ab', 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: '6667d2df75ac67352346f454452a360a6506473a', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { key: '3a5485798cec9e986f411631aee819f10716e441', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { key: '795afcb76540a52beefd1ca4c0fb80d88156ef98', class: "modal-header" }, this.header && h("span", { key: '3df861b36deca9caaf6c64c54b89dc897f5b9453', class: "modal-title" }, this.header), h("slot", { key: 'b6b1913314b2c05daa299d273ff7b495d4f72c39', name: "header" }), this.showCloseIcon && (h("button", { key: '529dd7e8787a09fc588e28c0c77f0f27c304659f', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: 'eeeae841372a788a34cee76b38de7689a7a296fc', class: "modal-content" }, h("slot", { key: '83c67fb239b5579169368b5b2ba6c2ee22564a73' })), this.showFooter && h("div", { key: 'd86cd40508a7b6ea3c9cd4583aaa5a69646bb549', class: "modal-footer" }, h("slot", { key: 'f70503acd5f2b5e672700cec46e4e9705d944e22', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{
@@ -131,3 +138,6 @@ const DropiModal = class {
 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":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,6pKAA6pK,CAAC;;MCe9qK,UAAU,GAAA,MAAA;;;;;;;IACmB,OAAO,GAAQ,KAAK;IACpD,MAAM,GAAkB,IAAI;IAC5B,aAAa,GAAY,IAAI;IAC7B,WAAW,GAAY,IAAI;IAC3B,eAAe,GAAY,IAAI;IAC/B,WAAW,GAAY,IAAI;IAC3B,aAAa,GAAY,IAAI;IAC7B,KAAK,GAAY,IAAI;IACrB,QAAQ,GAAY,IAAI;IACxB,WAAW,GAAY,IAAI;IAC3B,UAAU,GAAY,IAAI;IAC1B,UAAU,GAAY,IAAI;IAC1B,QAAQ,GAAkB,QAAQ;IAClC,IAAI,GAAc,GAAG;IACrB,UAAU,GAAkB,IAAI;IAChC,QAAQ,GAAkB,IAAI;;IAE9B,UAAU,GAAY,IAAI;;IAE1B,UAAU,GAAW,IAAI;;IAEzB,iBAAiB,GAAW,OAAO;;IAEnC,iBAAiB,GAAY,KAAK;;IAElC,SAAS,GAAY,KAAK;;IAE1B,SAAS,GAAY,KAAK;AAEN,IAAA,MAAM;AACN,IAAA,MAAM;AACN,IAAA,aAAa;IAExB,MAAM,GAAY,KAAK;IACvB,SAAS,GAAY,KAAK;IAC1B,OAAO,GAAY,KAAK;IAEjC,UAAU,GAAQ,IAAI;IACtB,UAAU,GAAwC,IAAI;IAG9D,cAAc,CAAC,GAAQ,EAAE,MAAW,EAAA;AAClC,QAAA,MAAM,SAAS,GAAG,GAAG,KAAK,IAAI,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,MAAM;AACxD,QAAA,MAAM,UAAU,GAAG,MAAM,KAAK,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,MAAM;QAC/D,IAAI,SAAS,KAAK,UAAU;YAAE;AAE9B,QAAA,OAAO,CAAC,GAAG,CAAC,8BAA8B,EAAE,SAAS,CAAC;QACtD,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;;IAGpE,gBAAgB,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,MAAM;AAC1E,QAAA,IAAI,SAAS;YAAE,IAAI,CAAC,SAAS,EAAE;;IAGjC,oBAAoB,GAAA;QAClB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,IAAI,CAAC,UAAU;AAAE,YAAA,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AAClD,QAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;YACnC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC;;;AAI5C,IAAA,MAAM,IAAI,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;QAC9B,IAAI,CAAC,UAAU,EAAE;;AAGT,IAAA,MAAM,IAAI,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B,IAAI,CAAC,SAAS,EAAE;;IAGV,SAAS,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AAAE,YAAA,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AAAE,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;;AAC5E,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,QAAA,qBAAqB,CAAC,MAAM,qBAAqB,CAAC,MAAK;AACrD,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,KAAK,KAAK,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,EAAE;YAC5D,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC;;;IAI3C,UAAU,GAAA;QAChB,IAAI,IAAI,CAAC,SAAS;YAAE;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QACnB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,IAAI,CAAC,UAAU;AAAE,YAAA,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AAClD,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,MAAK;AAChC,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,KAAK,KAAK,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,EAAE;gBAC5D,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC;;AAEpD,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;SACnB,EAAE,GAAG,CAAC;;IAGD,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE;AACzB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,CAAgB,KAAI;AACrC,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,IAAI,EAAE;AACzE,SAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;;IAG/C,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YAAE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;AAAE,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;;;IAGzG,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,QAAQ,CAAA,EAAG,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,GAAG,sBAAsB,GAAG,EAAE,EAAE,EACxI,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,EAAA,EAEnE,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,KAAK,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE,EAAA,CAAI,EACnG,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,IAAI,IAAI,GAAG,CAAA,CAAE,EAAE,IAAI,EAAC,QAAQ,gBAAY,MAAM,EAAA,EAChF,IAAI,CAAC,UAAU,KACd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,MAAM,CAAQ,EAC9D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,EAC1B,IAAI,CAAC,aAAa,KACjB,+DAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,gBAAa,QAAQ,EAAA,EAAA,QAAA,CAElE,CACV,CACG,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CAAM,EACxC,IAAI,CAAC,UAAU,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAAM,CACtE,CACF;;;;;;;;;;;;","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() draggable: 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/{esm → dropi-ui}/dropi-navbar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+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}`;
 
@@ -42,11 +42,14 @@ const DropiNavbar = class {
     }
     render() {
         const items = this.parsedData;
-        return (h("nav", { key: '7309fb8df82f8d3fb17f7bde2791d9442a7b07b3', class: "navbar" }, h("div", { key: 'a32dc538c37aef53bc25146ff4a42a5ee0a68a48', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '943f67d583ba37abb09bdf9db816ff06871591d6', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '5e1365b03f3aaeb1515fbd206ebd868706897818', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: '1572e5f2ccd930caba4c207a7f945b5e54709c9b', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '9822f3e3d05eca7aee36ca4a0d41ea0d7a1b0971', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: '6734921e0d83825c0dca5681b35c4a98e85dd33f', 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, width: "16px", height: "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: '2efb80c64b439bb8af4bfaad2af2a2e82eac8dbf', class: "navbar__right" }, h("button", { key: 'd07cf88c4ea1714187f0e0d9b4fb90b828d5ee10', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '7f0c09a30363fcf4cd019250261e2f5f0fd362c1', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: '916b683d0e12ee0d5851b8c53a0cefffbd15b59a', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'adda21458f6f7aac056beac14d59dcbe0a5c6cb5', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        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: 'c35615cbfd5dc807def32957062ea25b059664b5', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'ffc532e501bc7bc0a5625c865955a43c84857a58', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '7fb10d4a5e42030a7701bf0933587ecdaf5ab20b', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: '338118e694ca0a46d94fee60211302efe8bbee51', 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, width: "16px", height: "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: 'f2ac52b78963fa9165b6614a7abaa6fe822b2a89', class: "navbar__right" }, h("button", { key: '4e78c3fbc69899f8b1f0206dc27372c3c0d15c31', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: 'a94bbd4aa73b7be9a735b31b92d882c53616f8e6', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'c2157fca16e1c3f992562027d4dfeb348ef7ad23', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'ba2cb25cda984ba8ea180ff8edb3d3ffc955ab27', 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: '0a59f395793ceede59e52ef92ac37c71f6099f24', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: '8f430373d4a8f887a8c5da89f86bb3cc0aa5205a', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '11b4c378a089644e63d6186fe40e31ca7b4ab924', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'c2a140081f5ad014b73d35f45476cc1ac41391b5', name: "Arrow-Down-2", width: "12px", height: "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":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,48FAA48F,CAAC;;MCmB99F,WAAW,GAAA,MAAA;;;;;;;;;IAEd,OAAO,GAAW,EAAE;;IAEpB,OAAO,GAAW,MAAM;;IAGxB,IAAI,GAAmB,EAAE;;IAEzB,KAAK,GAAW,EAAE;;IAGlB,QAAQ,GAAW,EAAE;;IAErB,QAAQ,GAAW,EAAE;;IAErB,UAAU,GAAW,EAAE;;IAEvB,aAAa,GAAW,CAAC;;IAEzB,cAAc,GAAY,IAAI;;AAG7B,IAAA,aAAa;;AAEb,IAAA,uBAAuB;;AAEvB,IAAA,cAAc;;AAEd,IAAA,eAAe;AAExB,IAAA,IAAY,UAAU,GAAA;AACpB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI;QACrB,OAAO,OAAO,GAAG,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC;;IAGhE,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU;QAE7B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EAEjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,cAAc,KAClB,+DAAQ,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,WAAM,EAAA,EAC5F,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACpE,CACV,EACA,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,CACnE,EACA,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,EAGL,KAAK,CAAC,MAAM,GAAG,CAAC,KACf,2DAAI,KAAK,EAAC,eAAe,EAAA,EACtB,KAAK,CAAC,GAAG,CAAC,IAAI,KACb,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,sBAAsB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE,EAClF,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAC5C,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,eAAe,EAAA,CAAI,EACpJ,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,CAAQ,EAC5C,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAC/C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAChD,CACM,CACN,CACN,CAAC,CACC,CACN,EAGD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,gBAAa,gBAAgB,EAAA,EAC9G,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,EAC1E,IAAI,CAAC,aAAa,GAAG,CAAC,KACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,aAAa,CAAQ,CAChG,CACM,EAET,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAA,EACtF,IAAI,CAAC;cACF,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAA;AACtE,cAAE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CACjD,EAET,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,EACxE,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CAC5E,CACL,CACF;;;;;;;","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\" width=\"20px\" height=\"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} width=\"16px\" height=\"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\" width=\"20px\" height=\"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\" width=\"12px\" height=\"12px\" color=\"Gray-Gray-400\" />\n          </button>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-otp-send-code.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+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}`;
 
@@ -45,10 +45,10 @@ const DropiOtpSendCode = class {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...this.digits];
+        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...this.digitStates];
+        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
         newStates[index] = val ? 'filled' : 'idle';
         this.digitStates = newStates;
         if (val && index < OTP_LENGTH - 1)
@@ -58,7 +58,7 @@ const DropiOtpSendCode = class {
         }
     }
     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();
         }
     }
@@ -75,16 +75,19 @@ const DropiOtpSendCode = class {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: 'cc04c9f7a77e627f0ca7cf25fbd0316e05a7456c', class: "otp" }, this.showLabelContact && (h("p", { key: 'b4c060cdc5c9fa00887b675585c64325f5eefcf3', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '02b82a168f9f4c9e7dda74cbf3a86b0f63ccd878' }, " ", this.labelContact))), h("div", { key: '9a628fd456ec89892b126782104235545f2d3e8c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: '3cfe0d64890b2c90f500c662fe8572f9630d614b', class: "otp" }, this.showLabelContact && (h("p", { key: 'd791c408a5393ae82e00e758b67530d4b21381ac', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '3d6ca9c3a00a71ba99800a94f1b95d3247d75522' }, " ", this.labelContact))), h("div", { key: '22d172d48ae8748fa27aaead4c65145d848ae4f2', 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--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: 'e1d3e33e3eae69255909f47735210a2123f099d9', class: "otp__error" }, this.errorMessage)), h("div", { key: 'ebfc8892f232f90afdcec507de4019b1aea2e915', 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: 'c6434be80f44e6f8a277bdff49503f67db5cdca7', class: "otp__error" }, this.errorMessage)), h("div", { key: '281e56d25ec3b01136aae2220605037d4dff4e16', 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. e.detail = the complete code string */\n  @Event() codeCompleted: 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      this.codeCompleted.emit(newDigits.join(''));\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    if (newDigits.every(d => d !== '')) this.codeCompleted.emit(newDigits.join(''));\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: '67bc6ba66852a8883a19b2a3182be3cb298f2c8d', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: 'b1d0c5a8f66056cb53c31b01959177754632a906', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '951435cbf9b7a8b9bd0e0f33d2c9eacaea6e7af1', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'fed8a203b3e62f5da3e6fa055b1ee6e35453147c', 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: '35a728e031880403ee0ff984484237ab701bd406', 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: '4a73ba225105e449f8dfe8a504c5b1ad3e9c31cd', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '7b140df9437922acc8c24d6ee1ff15d69ce7b7f1', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '6157fa189ca011be4c13da803d2cd110d882bb8e', 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: '7b6c1b31d4caed8203b739cc10f3084568e40f10', name: "Arrow-double-small-right", width: "16px", height: "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\" width=\"16px\" height=\"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\" width=\"16px\" height=\"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\" width=\"16px\" height=\"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\" width=\"16px\" height=\"16px\" color=\"Gray-Gray-600\" />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-phone-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
 
 const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type='number']{-moz-appearance:textfield;appearance:textfield}.phone-wrap{width:100%}.phone-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.phone-input-container{display:flex;align-items:center;gap:8px}.custom-select{position:relative;width:50%}.form-control{flex:1;width:100%;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:5px;font-size:14px;font-family:inherit;transition:border-color 0.3s ease-in-out;height:40px;padding:0 12px;outline:none;color:var(--Gray-Gray-700, #32394d);background-color:var(--Neutral-White, #ffffff)}.form-control::placeholder{color:var(--Gray-Gray-500, #69738c)}.form-control:focus::placeholder{color:var(--Gray-Gray-500, #69738c)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);outline:none}.form-control.is-invalid{background:#fffbfb;border-color:var(--Error-Error-500, #f46a6b) !important}.select-button{width:100%;height:40px;padding:0.47rem 0.75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-button img{width:20px;height:20px}.select-button:focus{border-color:var(--Info-Info-500, #50a5f1) !important;outline:none}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:unset}.select-button.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066);background:var(--Neutral-White, #ffffff)}.select-button.select-invalid{border-color:var(--Error-Error-500, #f46a6b) !important}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0 0;border:1px solid transparent;border-radius:var(--Border-2, 8px);overflow-y:scroll;z-index:100}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-thumb{background-color:var(--Gray-Gray-300, #d1d6e1);border-radius:4px}.expanded-select{max-height:250px;background:var(--Neutral-White, #ffffff);box-shadow:var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));border:1px solid var(--Gray-Gray-200, #c3c9d9);transition:max-height 0.2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;border:1px solid transparent;transition:max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out}.select-dropdown li{margin:0;padding:0}.option{width:100%;height:45px;border-radius:var(--Border-2, 8px);padding-top:var(--Size-3, 12px);padding-right:var(--Size-4, 16px);padding-bottom:var(--Size-3, 12px);padding-left:var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px}.option img{width:20px;height:20px}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled{color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:unset}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.phone-error{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}`;
 
@@ -152,7 +152,7 @@ const DropiPhoneInput = class {
             this.selectedOptionChanged(this.selectedOption);
     }
     get selectedCountry() {
-        const cleanCodArea = this.codArea.replace('+', '');
+        const cleanCodArea = (this.codArea ?? '57').replace('+', '');
         return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];
     }
     selectCountry(c) {
@@ -176,10 +176,10 @@ const DropiPhoneInput = class {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (h("div", { key: '884ddc86a364c666e79c2e99501c607a5c332599', class: "phone-wrap" }, h("div", { key: 'e0b044ac41b640cddffe080c695b7fe2d4add574', class: "phone-input-container" }, h("div", { key: 'f9f8b6794fb73efff50e064550ce462e25bb4d51', class: "custom-select" }, h("button", { key: '564675d4b89d33cc7cba743f77b4d96f7f6afea3', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (h("div", { key: 'e4a9468971ff90e3e1c2cf6944a8475451843428', class: "phone-wrap" }, h("div", { key: 'dabdccaf0453e98afb3db78ee6b6f83a66615baa', class: "phone-input-container" }, h("div", { key: '6481136b782da271fe47c19cfd359398bf632f35', class: "custom-select" }, h("button", { key: 'd314c0e2c74724eff20eae8f34241caf1fc2448c', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, h("span", { key: '884a8a6d688e9fae8bc62ace8ba1f870f3ebdedf', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '4c263356870f8d2aaaa84ffe5f1a1bff49f98e34', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '589ff50ef5881a58586e9b08d9db3e0abcde5873', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'fed2ed2efc5be49ebeb8fe8c36557914eff439c7', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: 'dcefc1987643eab23dc5d9fbf211804fa90a9d82', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, h("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '0ace7b7188e846793d66373ea3d2c2d8ae881c24', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), h("ul", { key: '832b37902ce54aac152e956d671fb6f899781029', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: 'eaf32641b019e1ffd3fe5a1d7a3c4597e1cd0cb5', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get watchers() { return {
         "codArea": [{
@@ -193,3 +193,6 @@ const DropiPhoneInput = class {
 DropiPhoneInput.style = dropiPhoneInputCss();
 
 export { DropiPhoneInput as dropi_phone_input };
+//# sourceMappingURL=dropi-phone-input.entry.esm.js.map
+
+//# sourceMappingURL=dropi-phone-input.entry.js.map

package/dist/dropi-ui/dropi-phone-input.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-phone-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-phone-input/dropi-phone-input.css?tag=dropi-phone-input&encapsulation=shadow","src/components/dropi-phone-input/dropi-phone-input.tsx"],"sourcesContent":[":host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }\n*, *::before, *::after { box-sizing: border-box; }\n\n/* Ocultar spin buttons en inputs numéricos */\ninput::-webkit-inner-spin-button,\ninput::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0;\n}\ninput[type='number'] {\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n.phone-wrap {\n  width: 100%;\n}\n\n.phone-label {\n  display: block;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 4px;\n}\n\n.phone-input-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.custom-select {\n  position: relative;\n  width: 50%;\n}\n\n.form-control {\n  flex: 1;\n  width: 100%;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 5px;\n  font-size: 14px;\n  font-family: inherit;\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  padding: 0 12px;\n  outline: none;\n  color: var(--Gray-Gray-700, #32394d);\n  background-color: var(--Neutral-White, #ffffff);\n}\n\n.form-control::placeholder {\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus::placeholder {\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n  outline: none;\n}\n\n.form-control:disabled {\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  outline: none;\n}\n\n.form-control.is-invalid {\n  background: #fffbfb;\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-button {\n  width: 100%;\n  height: 40px;\n  padding: 0.47rem 0.75rem;\n  padding-right: 7px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-500, #69738c);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  text-align: left;\n  cursor: pointer;\n}\n\n.select-button img {\n  width: 20px;\n  height: 20px;\n}\n\n.select-button:focus {\n  border-color: var(--Info-Info-500, #50a5f1) !important;\n  outline: none;\n}\n\n.select-button:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: unset;\n}\n\n.select-button.select-completed {\n  border-color: var(--Gray-Gray-400, #858ea6);\n  color: var(--Gray-Gray-600, #475066);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.select-button.select-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-dropdown {\n  position: absolute;\n  width: 100%;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  margin: 4px 0 0 0;\n  border: 1px solid transparent;\n  border-radius: var(--Border-2, 8px);\n  overflow-y: scroll;\n  z-index: 100;\n}\n\n/* Scrollbar */\n.select-dropdown::-webkit-scrollbar {\n  width: 6px;\n}\n.select-dropdown::-webkit-scrollbar-thumb {\n  background-color: var(--Gray-Gray-300, #d1d6e1);\n  border-radius: 4px;\n}\n\n.expanded-select {\n  max-height: 250px;\n  background: var(--Neutral-White, #ffffff);\n  box-shadow: var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  transition: max-height 0.2s ease-in;\n}\n\n.collapsed-select {\n  max-height: 0;\n  background: transparent;\n  box-shadow: none;\n  border: 1px solid transparent;\n  transition: max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out;\n}\n\n.select-dropdown li {\n  margin: 0;\n  padding: 0;\n}\n\n.option {\n  width: 100%;\n  height: 45px;\n  border-radius: var(--Border-2, 8px);\n  padding-top: var(--Size-3, 12px);\n  padding-right: var(--Size-4, 16px);\n  padding-bottom: var(--Size-3, 12px);\n  padding-left: var(--Size-4, 16px);\n  border: none;\n  background: transparent;\n  text-align: left;\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  gap: 8px;\n}\n\n.option img {\n  width: 20px;\n  height: 20px;\n}\n\n.option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.option:disabled {\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: unset;\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.phone-error {\n  margin: 4px 0 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Error-Error-500, #f46a6b);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, Element, Listen, h } from '@stencil/core';\n\ninterface CountryCode {\n  name: string;\n  code: string;\n  flag: string;\n  maxLength: number;\n}\n\nconst COUNTRIES: CountryCode[] = [\n  { code: '57', name: 'Colombia', flag: 'CO', maxLength: 10 },\n  { code: '52', name: 'Mexico', flag: 'MX', maxLength: 10 },\n  { code: '507', name: 'Panama', flag: 'PA', maxLength: 8 },\n  { code: '56', name: 'Chile', flag: 'CL', maxLength: 9 },\n  { code: '593', name: 'Ecuador', flag: 'EC', maxLength: 10 },\n  { code: '51', name: 'Peru', flag: 'PE', maxLength: 9 },\n  { code: '34', name: 'España', flag: 'ES', maxLength: 9 },\n  { code: '595', name: 'Paraguay', flag: 'PY', maxLength: 9 },\n  { code: '58', name: 'Venezuela', flag: 'VE', maxLength: 11 },\n  { code: '54', name: 'Argentina', flag: 'AR', maxLength: 10 },\n  { code: '55', name: 'Brasil', flag: 'BR', maxLength: 11 },\n  { code: '1', name: 'United States', flag: 'US', maxLength: 10 },\n  { code: '502', name: 'Guatemala', flag: 'GT', maxLength: 8 },\n  { code: '598', name: 'Uruguay', flag: 'UY', maxLength: 9 },\n  { code: '501', name: 'Belize', flag: 'BZ', maxLength: 7 },\n  { code: '81', name: 'Japan', flag: 'JP', maxLength: 10 },\n  { code: '1', name: 'Canada', flag: 'CA', maxLength: 9 },\n  { code: '1473', name: 'Grenada', flag: 'GD', maxLength: 10 },\n  { code: '509', name: 'Haiti', flag: 'HT', maxLength: 10 },\n  { code: '1809', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1829', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1849', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1869', name: 'Saint Kitts And Nevis', flag: 'KN', maxLength: 10 },\n  { code: '1784', name: 'Saint Vincent And The Grenadines', flag: 'VC', maxLength: 10 },\n  { code: '1758', name: 'Saint Lucia', flag: 'LC', maxLength: 10 },\n  { code: '597', name: 'Suriname', flag: 'SR', maxLength: 10 },\n  { code: '1868', name: 'Trinidad and Tobago', flag: 'TT', maxLength: 10 },\n  { code: '505', name: 'Nicaragua', flag: 'NI', maxLength: 8 },\n  { code: '506', name: 'Costa Rica', flag: 'CR', maxLength: 8 },\n  { code: '591', name: 'Bolivia', flag: 'BO', maxLength: 8 },\n  { code: '7', name: 'Russia', flag: 'RU', maxLength: 11 },\n  { code: '20', name: 'Egypt', flag: 'EG', maxLength: 9 },\n  { code: '27', name: 'South Africa', flag: 'ZA', maxLength: 10 },\n  { code: '30', name: 'Greece', flag: 'GR', maxLength: 10 },\n  { code: '31', name: 'Netherlands', flag: 'NL', maxLength: 9 },\n  { code: '32', name: 'Belgium', flag: 'BE', maxLength: 8 },\n  { code: '33', name: 'France', flag: 'FR', maxLength: 9 },\n  { code: '36', name: 'Hungary', flag: 'HU', maxLength: 9 },\n  { code: '40', name: 'Romania', flag: 'RO', maxLength: 9 },\n  { code: '39', name: 'Italy', flag: 'IT', maxLength: 10 },\n  { code: '41', name: 'Switzerland', flag: 'CH', maxLength: 9 },\n  { code: '44', name: 'United Kingdom', flag: 'GB', maxLength: 11 },\n  { code: '45', name: 'Denmark', flag: 'DK', maxLength: 8 },\n  { code: '46', name: 'Sweden', flag: 'SE', maxLength: 8 },\n  { code: '47', name: 'Norway', flag: 'NO', maxLength: 8 },\n  { code: '48', name: 'Poland', flag: 'PL', maxLength: 9 },\n  { code: '49', name: 'Germany', flag: 'DE', maxLength: 11 },\n  { code: '53', name: 'Malta', flag: 'MT', maxLength: 8 },\n  { code: '60', name: 'Malaysia', flag: 'MY', maxLength: 9 },\n  { code: '61', name: 'Australia', flag: 'AU', maxLength: 9 },\n  { code: '62', name: 'Indonesia', flag: 'ID', maxLength: 12 },\n  { code: '63', name: 'Philippines', flag: 'PH', maxLength: 10 },\n  { code: '64', name: 'New Zealand', flag: 'NZ', maxLength: 12 },\n  { code: '65', name: 'Singapore', flag: 'SG', maxLength: 8 },\n  { code: '66', name: 'Thailand', flag: 'TH', maxLength: 9 },\n  { code: '82', name: 'South Korea', flag: 'KR', maxLength: 9 },\n  { code: '84', name: 'Vietnam', flag: 'VN', maxLength: 11 },\n  { code: '86', name: 'China', flag: 'CN', maxLength: 11 },\n  { code: '90', name: 'Turkey', flag: 'TR', maxLength: 10 },\n  { code: '91', name: 'India', flag: 'IN', maxLength: 10 },\n  { code: '92', name: 'Pakistan', flag: 'PK', maxLength: 9 },\n  { code: '93', name: 'Afghanistan', flag: 'AF', maxLength: 10 },\n  { code: '94', name: 'Sri Lanka', flag: 'LK', maxLength: 9 },\n  { code: '95', name: 'Myanmar', flag: 'MM', maxLength: 9 },\n  { code: '98', name: 'Iran', flag: 'IR', maxLength: 10 },\n  { code: '211', name: 'South Sudan', flag: 'SS', maxLength: 10 },\n  { code: '212', name: 'Morocco', flag: 'MA', maxLength: 9 },\n  { code: '213', name: 'Algeria', flag: 'DZ', maxLength: 9 },\n  { code: '216', name: 'Tunisia', flag: 'TN', maxLength: 8 },\n  { code: '218', name: 'Libya', flag: 'LY', maxLength: 9 },\n  { code: '220', name: 'Gambia', flag: 'GM', maxLength: 8 },\n  { code: '221', name: 'Senegal', flag: 'SN', maxLength: 9 },\n  { code: '222', name: 'Mauritania', flag: 'MR', maxLength: 9 },\n  { code: '223', name: 'Mali', flag: 'ML', maxLength: 8 },\n  { code: '224', name: 'Guinea', flag: 'GN', maxLength: 9 },\n  { code: '225', name: 'Ivory Coast', flag: 'CI', maxLength: 10 },\n  { code: '226', name: 'Burkina Faso', flag: 'BF', maxLength: 10 },\n  { code: '227', name: 'Niger', flag: 'NE', maxLength: 8 },\n  { code: '228', name: 'Togo', flag: 'TG', maxLength: 8 },\n  { code: '229', name: 'Benin', flag: 'BJ', maxLength: 8 },\n  { code: '230', name: 'Mauritius', flag: 'MU', maxLength: 10 },\n  { code: '231', name: 'Liberia', flag: 'LR', maxLength: 8 },\n  { code: '232', name: 'Sierra Leone', flag: 'SL', maxLength: 11 },\n  { code: '233', name: 'Ghana', flag: 'GH', maxLength: 9 },\n  { code: '234', name: 'Nigeria', flag: 'NG', maxLength: 11 },\n  { code: '235', name: 'Chad', flag: 'TD', maxLength: 8 },\n  { code: '236', name: 'Central African Republic', flag: 'CF', maxLength: 21 },\n  { code: '237', name: 'Cameroon', flag: 'CM', maxLength: 10 },\n  { code: '238', name: 'Cape Verde', flag: 'CV', maxLength: 9 },\n  { code: '239', name: 'São Tomé and Príncipe', flag: 'ST', maxLength: 14 },\n  { code: '240', name: 'Equatorial Guinea', flag: 'GQ', maxLength: 17 },\n  { code: '241', name: 'Gabon', flag: 'GA', maxLength: 9 },\n];\n\n/**\n * @component dropi-phone-input\n * Phone number input with country code selector.\n * Syncs perfectly with dropi-core_front natively\n */\n@Component({\n  tag: 'dropi-phone-input',\n  styleUrl: 'dropi-phone-input.css',\n  shadow: true,\n})\nexport class DropiPhoneInput {\n  @Element() el: HTMLElement;\n\n  /** Initial country dial code (e.g. \"57\") — matches Angular 'CodArea' setter */\n  @Prop({ mutable: true }) codArea: string = '57';\n  /** Phone number value — matches Angular 'ngModelPhone' */\n  @Prop({ mutable: true }) ngModelPhone: string = '';\n  /** Input placeholder — matches Angular 'phoneNumberPlaceholder' */\n  @Prop() phoneNumberPlaceholder: string | null = null;\n  /** Disabled state — matches Angular 'disabledInput' */\n  @Prop() disabledInput: boolean = false;\n  /** Validation state — matches Angular 'isValidPhone' */\n  @Prop() isValidPhone: boolean = undefined;\n  /** Validate on init — matches Angular 'validateOnInit' */\n  @Prop() validateOnInit: boolean = true;\n  /**\n   * Pre-selected country object (matches Angular `selectedOption: Country`).\n   * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.\n   */\n  @Prop({ mutable: true }) selectedOption: any = null;\n  /**\n   * Country select configuration object (matches Angular `selectProperties: SelectProperties`).\n   * Fields: `label`, `placeholder`, `options` (array of Country objects).\n   * When provided, overrides the internal country list.\n   */\n  @Prop() selectProperties: any = null;\n\n  @State() private open: boolean = false;\n\n  /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */\n  @Event() ngModelChangeCod: EventEmitter<string>;\n  /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */\n  @Event() ngModelChangePhone: EventEmitter<string>;\n  /** Emitted on field verification — matches Angular 'verifiedField' */\n  @Event() verifiedField: EventEmitter<void>;\n  /** Emitted when country selection changes — matches Angular 'onChangeSelect' */\n  @Event() onChangeSelect: EventEmitter<any>;\n\n  @Watch('codArea')\n  codAreaChanged() {\n    this.ngModelPhone = '';\n  }\n\n  @Watch('selectedOption')\n  selectedOptionChanged(val: any) {\n    if (!val) return;\n    // Support Angular Country shape: { dialCode, iso2 } or { code }\n    const code = val.dialCode ?? val.code ?? this.codArea;\n    this.codArea = String(code).replace('+', '');\n  }\n\n  componentWillLoad() {\n    if (this.selectedOption) this.selectedOptionChanged(this.selectedOption);\n  }\n\n  private get selectedCountry(): CountryCode {\n    const cleanCodArea = (this.codArea ?? '57').replace('+', '');\n    return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];\n  }\n\n  private selectCountry(c: CountryCode) {\n    this.codArea = c.code;\n    this.open = false;\n    this.ngModelChangeCod.emit(c.code);\n    this.onChangeSelect.emit(c);\n  }\n\n  private handleInput(e: InputEvent) {\n    const raw = (e.target as HTMLInputElement).value.replace(/\\D/g, '');\n    this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);\n    (e.target as HTMLInputElement).value = this.ngModelPhone;\n    this.ngModelChangePhone.emit(this.ngModelPhone);\n  }\n\n  @Listen('click', { target: 'window' })\n  handleWindowClick(ev: Event) {\n    const path = ev.composedPath();\n    if (!path.includes(this.el)) {\n      this.open = false;\n    }\n  }\n\n  render() {\n    const country = this.selectedCountry;\n    const isInvalid = this.isValidPhone === false;\n\n    return (\n      <div class=\"phone-wrap\">\n        <div class=\"phone-input-container\">\n\n          <div class=\"custom-select\">\n            <button\n              type=\"button\"\n              class={{ 'select-button': true, 'select-invalid': isInvalid }}\n              disabled={this.disabledInput}\n              onClick={() => { if (!this.disabledInput) this.open = !this.open; }}\n            >\n              <span style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n                <img src={`https://flagsapi.com/${country.flag}/flat/24.png`} alt=\"flag\" />\n                {country.code}\n              </span>\n              <dropi-icon name={this.open ? 'Dropdown-up' : 'Dropdown-down'} width=\"14px\" height=\"14px\" color=\"Gray-Gray-500\" />\n            </button>\n\n            <ul class={{ 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open }}>\n              {COUNTRIES.map(option => (\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"option\"\n                    onMouseDown={(e) => { e.preventDefault(); this.selectCountry(option); }}\n                  >\n                    <img src={`https://flagsapi.com/${option.flag}/flat/24.png`} alt={option.flag} />\n                    {option.code}\n                  </button>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <input\n            id=\"phone-input\"\n            type=\"tel\"\n            inputmode=\"numeric\"\n            class={{ 'form-control': true, 'is-invalid': isInvalid }}\n            placeholder={this.phoneNumberPlaceholder}\n            value={this.ngModelPhone}\n            disabled={this.disabledInput}\n            maxLength={country.maxLength}\n            onInput={(e) => this.handleInput(e as InputEvent)}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → dropi-ui}/dropi-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 
 const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
@@ -31,7 +31,7 @@ const DropiRadioButton = class {
         this.onChange.emit(e);
     }
     render() {
-        return (h("div", { key: '560f5edef6d0646d8797dfc3add17003ea847d0b', class: "dropi-radio-button" }, h("label", { key: 'aeb5159c64643485457ffe083bbeb78a97da8b50', htmlFor: this.id }, h("input", { key: '78ff657aee559c1230e2e16c01adfea0382e4979', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: '86430f601f7ddb6144682c0356938886217eb2ae', class: "dropi-radio-button" }, h("label", { key: '653fa8d5c33fc64ab44174e6d0fe35c6fd992be7', htmlFor: this.id }, h("input", { key: 'd99eae69867b0a09b6585a18dfaa52da353c5bd2', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -43,3 +43,6 @@ const DropiRadioButton = class {
 DropiRadioButton.style = dropiRadioButtonCss();
 
 export { DropiRadioButton as dropi_radio_button };
+//# sourceMappingURL=dropi-radio-button.entry.esm.js.map
+
+//# sourceMappingURL=dropi-radio-button.entry.js.map

package/dist/dropi-ui/dropi-radio-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-radio-button.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,s9BAAs9B,CAAC;;MCY7+B,gBAAgB,GAAA,MAAA;;;;;;IAEnB,KAAK,GAAW,EAAE;;IAElB,IAAI,GAAW,MAAM;;IAErB,EAAE,GAAW,aAAa;;IAEM,OAAO,GAAY,KAAK;AAChE;;;AAGG;IACK,YAAY,GAAY,KAAK;;AAG5B,IAAA,QAAQ;AAGjB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,GAAG;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAGvB,IAAA,YAAY,CAAC,CAAQ,EAAA;QAC3B,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;AACrD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;;IAGvB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAA,EACrB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAA,CACrC,EACD,IAAI,CAAC,KAAK,CACL,CACJ;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-radio-button/dropi-radio-button.css?tag=dropi-radio-button&encapsulation=shadow","src/components/dropi-radio-button/dropi-radio-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.dropi-radio-button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 20px;\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 1.5;\n}\n\ninput[type='radio'] {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 50%;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  outline: none;\n  flex-shrink: 0;\n  align-self: center;\n  vertical-align: middle;\n  margin: 0;\n}\n\ninput[type='radio']::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 10px;\n  height: 10px;\n  background-color: var(--Primary-Primary-400, #f7b46f);\n  border-radius: 50%;\n  display: none;\n}\n\ninput[type='radio']:checked {\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\ninput[type='radio']:checked::before {\n  display: block;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, h } from '@stencil/core';\n\n/**\n * @component dropi-radio-button\n * Styled radio button with label.\n */\n@Component({\n  tag: 'dropi-radio-button',\n  styleUrl: 'dropi-radio-button.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiRadioButton {\n  /** Label text displayed next to the radio */\n  @Prop() label: string = '';\n  /** Input name (for grouping radio buttons) */\n  @Prop() name: string = 'name';\n  /** Input id */\n  @Prop() id: string = 'radioButton';\n  /** Whether this radio is selected */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /**\n   * Set to true to programmatically reset this radio to unchecked.\n   * Useful when the parent needs to clear a group.\n   */\n  @Prop() resetTrigger: boolean = false;\n\n  /** Emitted when the radio is selected */\n  @Event() onChange: EventEmitter<any>;\n\n  @Watch('resetTrigger')\n  onResetTrigger(val: boolean) {\n    if (val) this.checked = false;\n  }\n\n  private handleChange(e: Event) {\n    this.checked = (e.target as HTMLInputElement).checked;\n    this.onChange.emit(e);\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-radio-button\">\n        <label htmlFor={this.id}>\n          <input\n            id={this.id}\n            type=\"radio\"\n            name={this.name}\n            checked={this.checked}\n            onChange={(e) => this.handleChange(e)}\n          />\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}