@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,302 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-navbar
+ * Top navigation bar with logo, nav items, notification bell, and user avatar.
+ */
+export class DropiNavbar {
+    /** Logo URL */
+    logoUrl = '';
+    /** Logo alt */
+    logoAlt = 'Logo';
+    /** Navigation data (matches Angular `data: DropiTableRow[]`) */
+    data = [];
+    /** Title (matches Angular `title`) */
+    title = '';
+    /** Active item ID */
+    activeId = '';
+    /** User name */
+    userName = '';
+    /** User avatar URL */
+    userAvatar = '';
+    /** Notification count (0 = no badge) */
+    notifications = 0;
+    /** Show menu toggle (mobile) */
+    showMenuToggle = true;
+    /** Emitted when a nav item is clicked (matches Angular `clickLoadItem`) */
+    clickLoadItem;
+    /** Emitted when notification bell is clicked */
+    dropiNotificationsClick;
+    /** Emitted when avatar/user is clicked */
+    dropiUserClick;
+    /** Emitted when mobile menu toggle clicked */
+    dropiMenuToggle;
+    get parsedData() {
+        const val = this.data;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    render() {
+        const items = this.parsedData;
+        return (h("nav", { key: '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
+            ? 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" })))));
+    }
+    static get is() { return "dropi-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-navbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-navbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-url",
+                "defaultValue": "''"
+            },
+            "logoAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo alt"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-alt",
+                "defaultValue": "'Logo'"
+            },
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation data (matches Angular `data: DropiTableRow[]`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title (matches Angular `title`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "activeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active item ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-id",
+                "defaultValue": "''"
+            },
+            "userName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-name",
+                "defaultValue": "''"
+            },
+            "userAvatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User avatar URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-avatar",
+                "defaultValue": "''"
+            },
+            "notifications": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification count (0 = no badge)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notifications",
+                "defaultValue": "0"
+            },
+            "showMenuToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show menu toggle (mobile)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-menu-toggle",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clickLoadItem",
+                "name": "clickLoadItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a nav item is clicked (matches Angular `clickLoadItem`)"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiNotificationsClick",
+                "name": "dropiNotificationsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when notification bell is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiUserClick",
+                "name": "dropiUserClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when avatar/user is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiMenuToggle",
+                "name": "dropiMenuToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when mobile menu toggle clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -12,27 +12,34 @@
 
 .otp__inputs {
   display: flex;
-  gap: var(--Size-2, 8px);
+  gap: var(--Size-4, 16px);
 }
 
 .otp__digit {
-  width: 48px;
+  width: 56px;
   height: 56px;
-  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  border: 1.5px solid var(--Gray-Gray-200, #d3d7de);
   border-radius: var(--Border-2, 8px);
   text-align: center;
-  font-size: var(--font-size-xl, 20px);
+  font-size: 22px;
   font-weight: var(--font-weight-bold, 700);
   font-family: inherit;
-  color: var(--Gray-Gray-800, #1a2033);
+  color: var(--Gray-Gray-800, #1f2433);
   outline: none;
-  transition: border-color 0.15s;
-  background: var(--Neutral-White, #fff);
+  transition: border-color 0.15s ease;
+  background: var(--Neutral-White, #ffffff);
 }
 
-.otp__digit:focus { border-color: var(--Info-Info-500, #50a5f1); }
-.otp__digit--filled { border-color: var(--Success-Success-500, #34c55a); color: var(--Success-Success-500, #34c55a); }
-.otp__digit--error { border-color: var(--Error-Error-500, #f46a6b); }
+.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;

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

@@ -11,7 +11,7 @@ export class DropiOtpSendCode {
     /** Contact info (email/phone to show in label) */
     labelContact = '';
     /** Show contact label */
-    showLabelContact = true;
+    showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
     digits = Array(OTP_LENGTH).fill('');
@@ -22,7 +22,7 @@ export class DropiOtpSendCode {
     inputs = [];
     timer;
     /** Emitted when all 6 digits are entered. e.detail = the complete code string */
-    dropiCodeCompleted;
+    codeCompleted;
     /** Emitted when resend is requested */
     dropiResend;
     componentDidLoad() { this.startCountdown(); }
@@ -50,7 +50,7 @@ export class DropiOtpSendCode {
         if (val && index < OTP_LENGTH - 1)
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
-            this.dropiCodeCompleted.emit(newDigits.join(''));
+            this.codeCompleted.emit(newDigits.join(''));
         }
     }
     handleKeyDown(e, index) {
@@ -67,18 +67,18 @@ export class DropiOtpSendCode {
         this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
         this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
         if (newDigits.every(d => d !== ''))
-            this.dropiCodeCompleted.emit(newDigits.join(''));
+            this.codeCompleted.emit(newDigits.join(''));
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '9c8e1efcdb61bd8f6988826b769240354d42339e', class: "otp" }, this.showLabelContact && (h("p", { key: 'dd8ccef18ed569371c1bba5fc2a39a43b6daf1b9', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'a3fc70430e66b153cf12ed2c0240f2fb00ec4a47' }, " ", this.labelContact))), h("div", { key: '450a3a7923a363c1ebbbbd06ca1cc291eba3281c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        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) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i], onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '4c6f9131d4a5b197dea318d6309540823b4cdfeb', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a6a32b9ee19bc1b0394d5c14fbc44ddf73536630', 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: '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")))));
     }
     static get is() { return "dropi-otp-send-code"; }
     static get encapsulation() { return "shadow"; }
@@ -152,7 +152,7 @@ export class DropiOtpSendCode {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-label-contact",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
@@ -187,8 +187,8 @@ export class DropiOtpSendCode {
     }
     static get events() {
         return [{
-                "method": "dropiCodeCompleted",
-                "name": "dropiCodeCompleted",
+                "method": "codeCompleted",
+                "name": "codeCompleted",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -46,7 +46,7 @@
 
 .paginator-btn--active {
   background: var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #fff);
+  color: var(--Neutral-White, #ffffff);
   font-weight: var(--font-weight-bold, 700);
 }
 
@@ -94,7 +94,7 @@
   padding: 0 var(--Size-2, 8px);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-1, 4px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
   font-family: inherit;