@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,143 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-sidebar
+ * Sidebar list container (Strictly ported from Angular core).
+ * This component handles rendering the sidebar items array natively.
+ */
+export class DropiSidebar {
+    /**
+     * 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 || []);
+    }
+    componentWillLoad() {
+        this.watchPropHandler(this.sideBarProperties);
+    }
+    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() {
+        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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-sidebar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-sidebar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sideBarProperties": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SidebarProperties[] | string",
+                    "resolved": "SidebarProperties[] | string",
+                    "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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": "side-bar-properties",
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedProperties": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onIndexChanged",
+                "name": "onIndexChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido cuando se selecciona una opci\u00F3n en el men\u00FA o un sub-hijo."
+                },
+                "complexType": {
+                    "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: 'fc845e4030b4a41c636bc93b969ec561a8e152a5', 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'"
             }
         };
     }

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

@@ -7,16 +7,22 @@ export class DropiSkeleton {
     /** Shape variant: 'text' | 'circle' | 'rect' */
     variant = 'text';
     /** Width (CSS value, e.g. "100%", "200px") */
-    width = '100%';
+    width = '';
     /** Height (CSS value, e.g. "16px", "48px") */
-    height = '16px';
+    height = '';
     /** Border radius override */
-    borderRadius = '';
+    radius = '8px';
     /** Number of lines to repeat (text variant only) */
     lines = 1;
+    /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */
+    baseColor = '#f6f7f8';
+    getBackground() {
+        const color = this.baseColor.startsWith('#') ? this.baseColor : `var(--${this.baseColor})`;
+        return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;
+    }
     getRadius() {
-        if (this.borderRadius)
-            return this.borderRadius;
+        if (this.radius)
+            return this.radius;
         if (this.variant === 'circle')
             return '50%';
         if (this.variant === 'text')
@@ -29,12 +35,16 @@ export class DropiSkeleton {
                     width: i === this.lines - 1 ? '70%' : this.width,
                     height: this.height,
                     borderRadius: this.getRadius(),
+                    background: this.getBackground(),
+                    backgroundSize: '1000px 104px',
                 } })))));
         }
         return (h("div", { class: "skeleton", style: {
                 width: this.width,
                 height: this.height,
                 borderRadius: this.getRadius(),
+                background: this.getBackground(),
+                backgroundSize: '1000px 104px',
             } }));
     }
     static get is() { return "dropi-skeleton"; }
@@ -95,7 +105,7 @@ export class DropiSkeleton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "width",
-                "defaultValue": "'100%'"
+                "defaultValue": "''"
             },
             "height": {
                 "type": "string",
@@ -115,9 +125,9 @@ export class DropiSkeleton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "height",
-                "defaultValue": "'16px'"
+                "defaultValue": "''"
             },
-            "borderRadius": {
+            "radius": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -134,8 +144,8 @@ export class DropiSkeleton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "border-radius",
-                "defaultValue": "''"
+                "attribute": "radius",
+                "defaultValue": "'8px'"
             },
             "lines": {
                 "type": "number",
@@ -156,6 +166,26 @@ export class DropiSkeleton {
                 "reflect": false,
                 "attribute": "lines",
                 "defaultValue": "1"
+            },
+            "baseColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-color",
+                "defaultValue": "'#f6f7f8'"
             }
         };
     }

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

@@ -43,13 +43,13 @@
 }
 
 .stepper__circle--pending {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Gray-Gray-200, #c3c9d9);
   color: var(--Gray-Gray-400, #858ea6);
 }
 
 .stepper__circle--focus {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Primary-Primary-500, #f49a3d);
   color: var(--Primary-Primary-500, #f49a3d);
 }
@@ -57,7 +57,7 @@
 .stepper__circle--completed {
   background: var(--Primary-Primary-500, #f49a3d);
   border: 2px solid var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #fff);
+  color: var(--Neutral-White, #ffffff);
 }
 
 /* ── Connecting line ────────────────────────────────────── */

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

@@ -9,9 +9,11 @@ export class DropiSteps {
     /** Show step number inside the circle */
     showNumberOfStep = true;
     /** Active/current step index (1-based) */
-    currentStep = 1;
+    currentStep = 0;
     /** Labels for each step. Pass as JSON string or array */
     stepLabels = [];
+    /** Visual state applied to the active step (matches Angular `state`) */
+    state = 'pending';
     get parsedLabels() {
         if (typeof this.stepLabels === 'string') {
             try {
@@ -33,7 +35,7 @@ export class DropiSteps {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: '446597aa40fdfd1c5e5274a89d3cc45a98003da9', class: "stepper" }, steps.map((step) => {
+        return (h("div", { key: 'cc54b22068478a85a29603e05d618c66ec1d2218', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
             const isLast = step === this.stepsCount;
@@ -112,7 +114,7 @@ export class DropiSteps {
                 "setter": false,
                 "reflect": false,
                 "attribute": "current-step",
-                "defaultValue": "1"
+                "defaultValue": "0"
             },
             "stepLabels": {
                 "type": "string",
@@ -139,6 +141,32 @@ export class DropiSteps {
                 "reflect": false,
                 "attribute": "step-labels",
                 "defaultValue": "[]"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepState",
+                    "resolved": "\"completed\" | \"focus\" | \"pending\"",
+                    "references": {
+                        "StepState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-steps/dropi-steps.tsx",
+                            "id": "src/components/dropi-steps/dropi-steps.tsx::StepState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual state applied to the active step (matches Angular `state`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'pending'"
             }
         };
     }

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

@@ -9,14 +9,14 @@ export class DropiSwitch {
     /** Whether the switch is disabled */
     disabled = false;
     /** Emitted when the toggle state changes */
-    dropiChange;
+    onChange;
     onToggleChange(event) {
         const input = event.target;
         this.isChecked = input.checked;
-        this.dropiChange.emit(this.isChecked);
+        this.onChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: 'd756605f85a24fdbf8714824921b17e618bde921', class: "toggle-switch" }, h("input", { key: '8d774e122778bd286269552ebabac1c04aa894c4', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'ff8d52dec5653e82fa965bca0ddd19ecb49cdad3', class: "slider" })));
+        return (h("label", { key: '15d604adb71cbe0c4d7e3627b8ee58380749c4df', class: "toggle-switch" }, h("input", { key: '5ff458aa0c536d88e2ee44576e7b5cbfdb15e990', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'a0dbc3f038af17fcea903fccd5f1e1638192c89a', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -77,8 +77,8 @@ export class DropiSwitch {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,