@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,166 +0,0 @@
-: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

@@ -1,302 +0,0 @@
-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

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