@dropi/ui 0.1.17 → 0.1.19

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

@@ -0,0 +1,392 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-search
+ * Text search input with optional dropdown results list.
+ * Supports single and multi-select, keyboard navigation, and clear button.
+ */
+export class DropiSearch {
+    /** Placeholder text */
+    placeholder = 'Buscar...';
+    /** Controlled input value */
+    value = '';
+    /** Max character length */
+    maxlength;
+    /** Show clear (×) button when input has text */
+    showClear = true;
+    /** Data source to filter. Pass as array or JSON string */
+    options = [];
+    /** Property name to display and search */
+    labelKey = 'name';
+    /** Allow multiple selection */
+    multiSelect = false;
+    /** Max height of dropdown (CSS value) */
+    dropdownHeight = '240px';
+    /** Label shown above the input */
+    label = '';
+    open = false;
+    selected = [];
+    parsedOptions = [];
+    /** Emitted on input change. e.detail = current text */
+    dropiInput;
+    /** Emitted on blur */
+    dropiBlur;
+    /** Emitted when Enter is pressed. e.detail = current text */
+    dropiKeyEnter;
+    /** Emitted when clear button clicked */
+    dropiClear;
+    /** Emitted when selection changes. e.detail = selected items */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    get filtered() {
+        if (!this.value)
+            return this.parsedOptions;
+        const q = this.value.toLowerCase();
+        return this.parsedOptions.filter(o => String(o[this.labelKey] ?? '').toLowerCase().includes(q));
+    }
+    handleInput(e) {
+        this.value = e.target.value;
+        this.open = this.parsedOptions.length > 0;
+        this.dropiInput.emit(this.value);
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter')
+            this.dropiKeyEnter.emit(this.value);
+        if (e.key === 'Escape')
+            this.open = false;
+    }
+    handleClear() {
+        this.value = '';
+        this.open = false;
+        this.dropiClear.emit();
+        this.dropiInput.emit('');
+    }
+    isSelected(opt) {
+        return this.selected.some(s => s[this.labelKey] === opt[this.labelKey]);
+    }
+    selectOption(opt) {
+        if (this.multiSelect) {
+            if (this.isSelected(opt)) {
+                this.selected = this.selected.filter(s => s[this.labelKey] !== opt[this.labelKey]);
+            }
+            else {
+                this.selected = [...this.selected, opt];
+            }
+        }
+        else {
+            this.value = opt[this.labelKey] ?? '';
+            this.selected = [opt];
+            this.open = false;
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    render() {
+        const showDropdown = this.open && this.parsedOptions.length > 0;
+        return (h("div", { key: '279addf53afde1573747ffaf657a13160eeb3743', class: "search-wrap" }, this.label && h("label", { key: '1f85892d998de1e9086ea6d8d077ace4d92ec6bd', class: "search-label" }, this.label), h("div", { key: 'af9a3592bb880598d6aa9790a2929d813a268b83', class: "search-input-row" }, h("dropi-icon", { key: '02bfc0bb9319e7918dcd9e24ebe5bd8d4c23df24', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '62faea9197d2f376d0befe0c740865386877474a', class: "search-input", type: "text", placeholder: this.placeholder, value: this.value, maxLength: this.maxlength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+                if (this.parsedOptions.length)
+                    this.open = true;
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.value && (h("button", { key: '9ca3eb1c01aa527768fe0b34d60f2e8e4637fd20', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '4dbd5f3d1226b6925a832fc4651e5c3610f33575', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '0f60b572e94cd5d9c4ef0595a2345314ea2622eb', class: "search-dropdown", style: { '--dropdown-height': this.dropdownHeight } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multiSelect && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.labelKey])))))))));
+    }
+    static get is() { return "dropi-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-search.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Buscar...'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max character length"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "showClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show clear (\u00D7) button when input has text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-clear",
+                "defaultValue": "true"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SearchOption[] | string",
+                    "resolved": "SearchOption[] | string",
+                    "references": {
+                        "SearchOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-search/dropi-search.tsx",
+                            "id": "src/components/dropi-search/dropi-search.tsx::SearchOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data source to filter. Pass as array or JSON string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "labelKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property name to display and search"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-key",
+                "defaultValue": "'name'"
+            },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select",
+                "defaultValue": "false"
+            },
+            "dropdownHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max height of dropdown (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-height",
+                "defaultValue": "'240px'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label shown above the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "selected": {},
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiInput",
+                "name": "dropiInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on input change. e.detail = current text"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiBlur",
+                "name": "dropiBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on blur"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiKeyEnter",
+                "name": "dropiKeyEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when Enter is pressed. e.detail = current text"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiClear",
+                "name": "dropiClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when clear button clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes. e.detail = selected items"
+                },
+                "complexType": {
+                    "original": "SearchOption[]",
+                    "resolved": "SearchOption[]",
+                    "references": {
+                        "SearchOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-search/dropi-search.tsx",
+                            "id": "src/components/dropi-search/dropi-search.tsx::SearchOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }];
+    }
+}

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

@@ -315,7 +315,7 @@ export class DropiSelect {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '0062ad3d0ca25d9126dff2f8130c9159a6b356f6', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'ad5db5fa4fe19ee2200ab65fd1f3fcdf65bd851f', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '27e474c585d345168d01e156acf8fdaa9c70dbfc', class: "asterisk" }, " *"))), h("div", { key: '2cc4da6a0109022a7bdb21b4b7410cf1ea2a6c01', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'c60838f5ce7a250bb36164a989b68c93973aa661', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a30c3cb4f8abf4b820c1e1d73005547398c8ff12', class: "select-helper" }, h("span", { key: '239dffdcdc8bceca6c21b0160a78078acf96eb09' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '76fced13295c9dff83389920caf128430c2fd35c', class: "select-helper-error" }, h("dropi-icon", { key: 'f1c5798ee5f504387ba80a4ddeca817a6416b770', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '84a93d1b293b2abe0027316c6fd9824410f20efd' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '276daabfaed1bf21977f4dfee1c5da3aefed63ba', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '59a04e375f10bf2f9f85f17aaa47fe7b169f98d3', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'e801bfc29322e1e389b0d838a38b04168cb5a6b3', class: "asterisk" }, " *"))), h("div", { key: '190fdc37fc2b7464aea841514fb3ab7f71ef0d04', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '41c952f237f08af7d499d82fb49b9230fccfed99', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'f87a7f09f8c0cb3f4768e4c18604dc626a8769a7', class: "select-helper" }, h("span", { key: 'fc967f18d637b2469997ec67d252e0f28c66ec7d' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '3b59c1c81921f5a5890d464c4d9072ef09965232', class: "select-helper-error" }, h("dropi-icon", { key: '83d0975b4e606ec11e1f8f1a43ec8407d0b22c0e', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'ab365dad523b9069006d12942b169477b26a242e' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }

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, #fff);
+  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, #fff);
+}
+
+.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,172 @@
+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 = 'number';
+    /** Current active step (1-based) */
+    currentStep = 1;
+    /** Labels shown below each step. Pass as JSON string or array */
+    labelStepper = [];
+    /** Flow mode (visual only) */
+    flowMode = 'Sequential';
+    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: 'fc845e4030b4a41c636bc93b969ec561a8e152a5', 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": "'number'"
+            },
+            "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": "1"
+            },
+            "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": "'Sequential'"
+            }
+        };
+    }
+}