@dropi/ui 0.1.20 → 0.1.21

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

@@ -1,117 +1,76 @@
-:host { display: block; height: 100%; }
-*, *::before, *::after { box-sizing: border-box; }
+:host {
+  display: block;
+}
 
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--Neutral-White, #fff);
-  border-right: 1px solid var(--Gray-Gray-100, #eceef4);
-  transition: width 0.25s ease;
-  overflow: hidden;
-  flex-shrink: 0;
+.main-sidebar-container {
+  margin-top: 20px;
 }
 
-/* Logo */
-.sidebar__logo-wrap {
+.sidebar-option {
+  height: 45px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: var(--Size-4, 16px) var(--Size-3, 12px);
-  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+  position: relative;
+  font-weight: var(--font-weight-medium, 500);
+  gap: var(--Size-3, 12px);
+  padding: var(--Size-3, 12px);
+  font-size: var(--font-size-s, 12px);
+  border-radius: var(--Border-1, 4px);
+  min-width: 147px;
+  cursor: pointer;
+  user-select: none;
 }
 
-.sidebar__logo {
-  height: 28px;
-  object-fit: contain;
-  max-width: 100%;
+.sidebar-option .arrow {
+  position: absolute;
+  right: 17px;
+  transition: transform 0.3s ease;
 }
 
-/* Toggle */
-.sidebar__toggle {
-  align-self: flex-end;
-  margin: var(--Size-2, 8px);
-  background: none;
-  border: 1px solid var(--Gray-Gray-100, #eceef4);
-  border-radius: var(--Border-1, 4px);
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background 0.15s;
-  flex-shrink: 0;
+.sidebar-option .arrow-expanded {
+  transform: rotate(180deg);
 }
-.sidebar__toggle:hover { background: var(--Gray-Gray-50, #f7f8fa); }
 
-/* Nav */
-.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--Size-2, 8px) 0; }
-.sidebar__list, .sidebar__sub {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.sidebar-default-option {
+  color: var(--Gray-Gray-500, #68738f);
 }
 
-/* Items */
-.sidebar__item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: var(--Size-2, 8px);
-  padding: var(--Size-2, 8px) var(--Size-3, 12px);
-  background: none;
-  border: none;
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  color: var(--Gray-Gray-600, #475066);
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.15s, color 0.15s;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }
-.sidebar__item--active {
-  background: var(--Primary-Primary-50, #fff5eb);
+.sidebar-active-option {
   color: var(--Primary-Primary-500, #f49a3d);
-  font-weight: var(--font-weight-bold, 700);
+  background-color: #fef8f1;
 }
-.sidebar__item--depth1 { font-size: var(--font-size-xs, 10px); }
 
-.sidebar__item-label {
-  flex: 1;
+.sidebar-sub-item {
   overflow: hidden;
-  text-overflow: ellipsis;
+  max-height: 0;
+  height: auto;
+  font-weight: var(--font-weight-medium, 500);
+  gap: var(--Size-3, 12px);
+  font-size: var(--font-size-s, 12px);
+  cursor: pointer;
+  opacity: 0;
+  padding: 0 var(--Size-3, 12px) 0 var(--Size-8, 32px);
+  transition:
+    max-height 0.3s ease-out,
+    opacity 0.3s ease-out,
+    padding 0.3s ease-out;
+  user-select: none;
 }
 
-.sidebar__badge {
-  background: var(--Error-Error-500, #f46a6b);
-  color: var(--Neutral-White, #fff);
-  font-size: 9px;
-  font-weight: 700;
-  min-width: 16px;
-  height: 16px;
-  border-radius: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 4px;
-  flex-shrink: 0;
+.sidebar-sub-item.sidebar-expanded {
+  max-height: 200px;
+  opacity: 1;
+  padding: var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-8, 32px);
 }
 
-.sidebar__sub { padding-left: 0; }
+.sidebar-sub-item-default {
+  color: var(--Gray-Gray-500, #68738f);
+}
 
-/* Footer */
-.sidebar__footer {
-  padding: var(--Size-3, 12px);
-  border-top: 1px solid var(--Gray-Gray-100, #eceef4);
-  flex-shrink: 0;
+.sidebar-sub-item-active {
+  color: var(--Primary-Primary-500, #f49a3d);
 }
-.sidebar__footer:empty { display: none; }
 
-/* Collapsed state */
-.sidebar--collapsed .sidebar__item {
-  justify-content: center;
-  padding: var(--Size-2, 8px);
+.space-between {
+  justify-content: space-between;
 }

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

@@ -1,59 +1,67 @@
 import { h } from "@stencil/core";
 /**
  * @component dropi-sidebar
- * Collapsible vertical sidebar navigation with icon support and nested items.
+ * Sidebar list container (Strictly ported from Angular core).
+ * This component handles rendering the sidebar items array natively.
  */
 export class DropiSidebar {
-    /** Navigation items (array or JSON string) */
-    items = [];
-    /** Active item ID */
-    activeId = '';
-    /** Collapsed state (icon-only) */
-    collapsed = false;
-    /** Show collapse toggle button */
-    showToggle = true;
-    /** Logo URL (shown at top) */
-    logoUrl = '';
-    /** Sidebar width when expanded */
-    width = '240px';
-    expandedIds = new Set();
-    /** Emitted when an item is clicked. e.detail = item id */
-    dropiSidebarItemClick;
-    /** Emitted when collapse state changes. e.detail = collapsed */
-    dropiCollapse;
-    get parsedItems() {
-        const val = this.items;
-        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    /**
+     * Define las propiedades y la cantidad de elementos a renderizar.
+     * Pasarlo como JSON string o directamente como array de SidebarProperties.
+     */
+    sideBarProperties = [];
+    /**
+     * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.
+     */
+    onIndexChanged;
+    parsedProperties = [];
+    watchPropHandler(newValue) {
+        this.parsedProperties = typeof newValue === 'string' ? JSON.parse(newValue) : (newValue || []);
     }
-    toggleExpand(id) {
-        if (this.expandedIds.has(id))
-            this.expandedIds.delete(id);
-        else
-            this.expandedIds.add(id);
-        // Force re-render
-        this.expandedIds = new Set(this.expandedIds);
+    componentWillLoad() {
+        this.watchPropHandler(this.sideBarProperties);
     }
-    renderItem(item, depth = 0) {
-        const hasChildren = item.children && item.children.length > 0;
-        const isExpanded = this.expandedIds.has(item.id);
-        const isActive = item.id === this.activeId;
-        return (h("li", null, h("button", { class: {
-                'sidebar__item': true,
-                'sidebar__item--active': isActive,
-                'sidebar__item--depth1': depth === 1,
-            }, style: { paddingLeft: depth > 0 ? `${12 + depth * 12}px` : undefined }, onClick: () => {
-                if (hasChildren)
-                    this.toggleExpand(item.id);
-                else
-                    this.dropiSidebarItemClick.emit(item.id);
-            }, type: "button", title: this.collapsed ? item.label : undefined }, item.icon && (h("dropi-icon", { name: item.icon, width: "18px", height: "18px", color: isActive ? 'Primary-Primary-500' : 'Gray-Gray-600' })), !this.collapsed && (h("span", { class: "sidebar__item-label" }, item.label)), !this.collapsed && item.badge != null && String(item.badge) !== '0' && (h("span", { class: "sidebar__badge" }, item.badge)), !this.collapsed && hasChildren && (h("dropi-icon", { name: isExpanded ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "12px", height: "12px", color: "Gray-Gray-400" }))), hasChildren && isExpanded && !this.collapsed && (h("ul", { class: "sidebar__sub" }, item.children.map(child => this.renderItem(child, depth + 1))))));
+    setExpandedPropertie(id) {
+        const propertieIndex = this.parsedProperties.findIndex((item) => item.id === id);
+        if (propertieIndex !== -1) {
+            const newProps = [...this.parsedProperties];
+            newProps[propertieIndex] = {
+                ...newProps[propertieIndex],
+                expandedMenu: !newProps[propertieIndex].expandedMenu
+            };
+            this.parsedProperties = newProps;
+        }
+    }
+    onItemClick(itemClicked) {
+        this.onIndexChanged.emit(itemClicked);
+        if (itemClicked.subItems && itemClicked.subItems.length > 0) {
+            this.setExpandedPropertie(itemClicked.id);
+        }
+    }
+    onSubItemClick(itemClicked) {
+        this.onIndexChanged.emit(itemClicked);
     }
     render() {
-        const items = this.parsedItems;
-        return (h("aside", { key: '97c46e8c84a9e389fb67b34364321c35b0c5ebf2', class: { 'sidebar': true, 'sidebar--collapsed': this.collapsed }, style: { width: this.collapsed ? '56px' : this.width } }, this.logoUrl && (h("div", { key: '211e43514bcdd6b613aa1001ef630e5b9629091a', class: "sidebar__logo-wrap" }, h("img", { key: 'ce6b7a3b9ce26f4caa1eafd4821f5a2fa70e4dda', class: "sidebar__logo", src: this.logoUrl, alt: "Logo" }))), this.showToggle && (h("button", { key: 'ba66d7664b76ecdea519f9d128e998331106da8f', class: "sidebar__toggle", onClick: () => {
-                this.collapsed = !this.collapsed;
-                this.dropiCollapse.emit(this.collapsed);
-            }, "aria-label": this.collapsed ? 'Expandir' : 'Colapsar', type: "button" }, h("dropi-icon", { key: '3a362cb657dfa881523ae29c1e677e6cc16afb61', name: this.collapsed ? 'Arrow-Right-2' : 'Arrow-Left-2', width: "16px", height: "16px", color: "Gray-Gray-400" }))), h("nav", { key: '02152d2e92f7802daa1192bd9d00d21c13619de4', class: "sidebar__nav" }, h("ul", { key: '9e90a7d2d25a63885713b881c6d091528027ec57', class: "sidebar__list" }, items.map(item => this.renderItem(item)))), h("div", { key: 'b70d89a324de1b56e022ec66b52ecb2b01031d34', class: "sidebar__footer" }, h("slot", { key: '6ead0e515e6a59194cd3495bd691ae9acdb0dd05', name: "footer" }))));
+        return (h("div", { key: '713a17f5279e5ca1a7110fdbf189e24e199b11cf', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
+            return [
+                /* Item Principal */
+                h("div", { class: {
+                        'sidebar-option': true,
+                        'sidebar-active-option': !!item.active,
+                        'sidebar-default-option': !item.active
+                    }, onClick: () => this.onItemClick(item) }, h("dropi-icon", { name: item.icon || 'Cube', width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }), h("span", null, item.text), item.subItems && item.subItems.length > 0 && (h("dropi-icon", { class: {
+                        'arrow': true,
+                        'arrow-expanded': !!item.expandedMenu
+                    }, name: "Dropdown-down", width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }))),
+                /* SubItems Renderizados al mismo nivel DOM que instruye Angular ng-container */
+                item.subItems && item.subItems.length > 0 && (item.subItems.map(subOption => (h("div", { class: {
+                        'sidebar-sub-item': true,
+                        'sidebar-expanded': !!item.expandedMenu,
+                        'sidebar-sub-item-default': !subOption.active,
+                        'sidebar-sub-item-active': !!subOption.active
+                    }, onClick: (e) => { e.stopPropagation(); this.onSubItemClick(subOption); } }, subOption.text))))
+            ];
+        })));
     }
     static get is() { return "dropi-sidebar"; }
     static get encapsulation() { return "shadow"; }
@@ -69,17 +77,17 @@ export class DropiSidebar {
     }
     static get properties() {
         return {
-            "items": {
+            "sideBarProperties": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "SidebarItem[] | string",
-                    "resolved": "SidebarItem[] | string",
+                    "original": "SidebarProperties[] | string",
+                    "resolved": "SidebarProperties[] | string",
                     "references": {
-                        "SidebarItem": {
+                        "SidebarProperties": {
                             "location": "local",
                             "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-sidebar/dropi-sidebar.tsx",
-                            "id": "src/components/dropi-sidebar/dropi-sidebar.tsx::SidebarItem"
+                            "id": "src/components/dropi-sidebar/dropi-sidebar.tsx::SidebarProperties"
                         }
                     }
                 },
@@ -87,147 +95,49 @@ export class DropiSidebar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Navigation items (array or JSON string)"
+                    "text": "Define las propiedades y la cantidad de elementos a renderizar.\nPasarlo como JSON string o directamente como array de SidebarProperties."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "items",
+                "attribute": "side-bar-properties",
                 "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": "''"
-            },
-            "collapsed": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Collapsed state (icon-only)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "collapsed",
-                "defaultValue": "false"
-            },
-            "showToggle": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show collapse toggle button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-toggle",
-                "defaultValue": "true"
-            },
-            "logoUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Logo URL (shown at top)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "logo-url",
-                "defaultValue": "''"
-            },
-            "width": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sidebar width when expanded"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width",
-                "defaultValue": "'240px'"
             }
         };
     }
+    static get states() {
+        return {
+            "parsedProperties": {}
+        };
+    }
     static get events() {
         return [{
-                "method": "dropiSidebarItemClick",
-                "name": "dropiSidebarItemClick",
+                "method": "onIndexChanged",
+                "name": "onIndexChanged",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when an item is clicked. e.detail = item id"
+                    "text": "Evento emitido cuando se selecciona una opci\u00F3n en el men\u00FA o un sub-hijo."
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiCollapse",
-                "name": "dropiCollapse",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when collapse state changes. e.detail = collapsed"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "SidebarProperties",
+                    "resolved": "SidebarProperties",
+                    "references": {
+                        "SidebarProperties": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-sidebar/dropi-sidebar.tsx",
+                            "id": "src/components/dropi-sidebar/dropi-sidebar.tsx::SidebarProperties"
+                        }
+                    }
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "sideBarProperties",
+                "methodName": "watchPropHandler"
+            }];
+    }
 }

package/dist/collection/components/dropi-simple-stepper/dropi-simple-stepper.css

@@ -55,7 +55,7 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   display: block;
 }
 
@@ -66,7 +66,7 @@
 .stepper__number {
   font-size: var(--font-size-xs, 10px);
   font-weight: var(--font-weight-bold, 700);
-  color: var(--Neutral-White, #fff);
+  color: var(--Neutral-White, #ffffff);
 }
 
 .stepper__circle--pending .stepper__number {

package/dist/collection/components/dropi-simple-stepper/dropi-simple-stepper.js

@@ -7,13 +7,15 @@ export class DropiSimpleStepper {
     /** Total steps */
     stepsCount = 3;
     /** Circle content: 'point' (dot) | 'number' */
-    typeStep = 'number';
+    typeStep = 'point';
     /** Current active step (1-based) */
-    currentStep = 1;
+    currentStep = 0;
     /** Labels shown below each step. Pass as JSON string or array */
     labelStepper = [];
     /** Flow mode (visual only) */
-    flowMode = 'Sequential';
+    flowMode = 'Simultaneous';
+    /** White-label brand identifier (matches Angular `white_brand`) */
+    white_brand = 'dropi';
     get parsedLabels() {
         if (typeof this.labelStepper === 'string') {
             try {
@@ -28,7 +30,7 @@ export class DropiSimpleStepper {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: '9991a928ba08a7720d8ded5aea01b3bc77372e71', class: "stepper" }, steps.map((step, i) => {
+        return (h("div", { key: 'e4613f72ea46ed367287005c573c80e7deac1470', class: "stepper" }, steps.map((step, i) => {
             const isCompleted = step < this.currentStep;
             const isActive = step === this.currentStep;
             const isLast = i === steps.length - 1;
@@ -99,7 +101,7 @@ export class DropiSimpleStepper {
                 "setter": false,
                 "reflect": false,
                 "attribute": "type-step",
-                "defaultValue": "'number'"
+                "defaultValue": "'point'"
             },
             "currentStep": {
                 "type": "number",
@@ -119,7 +121,7 @@ export class DropiSimpleStepper {
                 "setter": false,
                 "reflect": false,
                 "attribute": "current-step",
-                "defaultValue": "1"
+                "defaultValue": "0"
             },
             "labelStepper": {
                 "type": "string",
@@ -165,7 +167,27 @@ export class DropiSimpleStepper {
                 "setter": false,
                 "reflect": false,
                 "attribute": "flow-mode",
-                "defaultValue": "'Sequential'"
+                "defaultValue": "'Simultaneous'"
+            },
+            "white_brand": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "White-label brand identifier (matches Angular `white_brand`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "white_brand",
+                "defaultValue": "'dropi'"
             }
         };
     }