@dropi/ui 0.1.23 → 0.1.24

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

@@ -0,0 +1,166 @@
+: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;
+}
+
+/* Left */
+.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;
+}
+
+/* Center nav items */
+.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;
+}
+
+/* Right */
+.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;
+}

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: '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: '11b4c378a089644e63d6186fe40e31ca7b4ab924', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'c2a140081f5ad014b73d35f45476cc1ac41391b5', 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

@@ -0,0 +1,67 @@
+: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;
+}