@dropi/ui 0.1.23 → 0.1.24

package/dist/collection/components/dropi-select/select.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,76 @@
+:host {
+  display: block;
+}
+
+.main-sidebar-container {
+  margin-top: 20px;
+}
+
+.sidebar-option {
+  height: 45px;
+  display: flex;
+  align-items: center;
+  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-option .arrow {
+  position: absolute;
+  right: 17px;
+  transition: transform 0.3s ease;
+}
+
+.sidebar-option .arrow-expanded {
+  transform: rotate(180deg);
+}
+
+.sidebar-default-option {
+  color: var(--Gray-Gray-500, #68738f);
+}
+
+.sidebar-active-option {
+  color: var(--Primary-Primary-500, #f49a3d);
+  background-color: #fef8f1;
+}
+
+.sidebar-sub-item {
+  overflow: hidden;
+  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-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-item-default {
+  color: var(--Gray-Gray-500, #68738f);
+}
+
+.sidebar-sub-item-active {
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.space-between {
+  justify-content: space-between;
+}

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: '9f79e6370ff61c6278a8238b0dc92881832f9b8f', 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

@@ -0,0 +1,94 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.stepper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.stepper__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.stepper__circle-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* ── Circle ─────────────────────────────────────────────── */
+.stepper__circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.stepper__circle--pending {
+  background: var(--Gray-Gray-100, #e6eaf2);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+}
+
+.stepper__circle--active {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.stepper__circle--completed {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.stepper__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--Neutral-White, #ffffff);
+  display: block;
+}
+
+.stepper__circle--pending .stepper__dot {
+  background: var(--Gray-Gray-400, #858ea6);
+}
+
+.stepper__number {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Neutral-White, #ffffff);
+}
+
+.stepper__circle--pending .stepper__number {
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+/* ── Connecting line ────────────────────────────────────── */
+.stepper__line {
+  flex: 1;
+  height: 2px;
+  background: var(--Gray-Gray-200, #c3c9d9);
+  transition: background 0.2s;
+}
+
+.stepper__line--done {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Label ──────────────────────────────────────────────── */
+.stepper__label {
+  margin-top: 6px;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  text-align: center;
+}

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

@@ -0,0 +1,194 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-simple-stepper
+ * Compact horizontal stepper using dots or numbers.
+ */
+export class DropiSimpleStepper {
+    /** Total steps */
+    stepsCount = 3;
+    /** Circle content: 'point' (dot) | 'number' */
+    typeStep = 'point';
+    /** Current active step (1-based) */
+    currentStep = 0;
+    /** Labels shown below each step. Pass as JSON string or array */
+    labelStepper = [];
+    /** Flow mode (visual only) */
+    flowMode = 'Simultaneous';
+    /** White-label brand identifier (matches Angular `white_brand`) */
+    white_brand = 'dropi';
+    get parsedLabels() {
+        if (typeof this.labelStepper === 'string') {
+            try {
+                return JSON.parse(this.labelStepper);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.labelStepper || [];
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (h("div", { key: 'f67f6e9404bf67700c46b987923836d5251ae1c4', class: "stepper" }, steps.map((step, i) => {
+            const isCompleted = step < this.currentStep;
+            const isActive = step === this.currentStep;
+            const isLast = i === steps.length - 1;
+            const label = labels[i];
+            return (h("div", { class: "stepper__item", key: step }, h("div", { class: "stepper__circle-row" }, h("div", { class: {
+                    'stepper__circle': true,
+                    'stepper__circle--active': isActive,
+                    'stepper__circle--completed': isCompleted,
+                    'stepper__circle--pending': !isActive && !isCompleted,
+                } }, this.typeStep === 'point' ? (h("span", { class: "stepper__dot" })) : (h("span", { class: "stepper__number" }, step))), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': isCompleted } })), label && h("span", { class: "stepper__label" }, label)));
+        })));
+    }
+    static get is() { return "dropi-simple-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-simple-stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-simple-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stepsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total steps"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps-count",
+                "defaultValue": "3"
+            },
+            "typeStep": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperType",
+                    "resolved": "\"number\" | \"point\"",
+                    "references": {
+                        "StepperType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-simple-stepper/dropi-simple-stepper.tsx",
+                            "id": "src/components/dropi-simple-stepper/dropi-simple-stepper.tsx::StepperType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Circle content: 'point' (dot) | 'number'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type-step",
+                "defaultValue": "'point'"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current active step (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "0"
+            },
+            "labelStepper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Labels shown below each step. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-stepper",
+                "defaultValue": "[]"
+            },
+            "flowMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FlowMode",
+                    "resolved": "\"Sequential\" | \"Simultaneous\"",
+                    "references": {
+                        "FlowMode": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-simple-stepper/dropi-simple-stepper.tsx",
+                            "id": "src/components/dropi-simple-stepper/dropi-simple-stepper.tsx::FlowMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flow mode (visual only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flow-mode",
+                "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.css

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--Gray-Gray-100, #e6eaf2) 25%,
+    var(--Gray-Gray-50, #f7f8fa) 50%,
+    var(--Gray-Gray-100, #e6eaf2) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.6s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}