@dropi/ui 0.1.24 → 0.1.25

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

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

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

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

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

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

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

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