@dropi/ui 0.1.27 → 0.1.29

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

@@ -0,0 +1,526 @@
+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 {
+    /** Visual variant (matches Angular `type`) */
+    type = 'default';
+    /** Placeholder text */
+    placeholder = 'Search...';
+    /** Controlled input value */
+    textInput = '';
+    /** HTML input type: text | number (matches Angular `typeInput`) */
+    typeInput = 'text';
+    /** Max character length */
+    maxLength;
+    /** Show the search icon (matches Angular `showIcon`) */
+    showIcon = true;
+    /** Show clear (×) button when input has text */
+    showClear = true;
+    /** Data source to filter. Pass as array or JSON string */
+    dataToSearch = [];
+    /** Property name to display and search */
+    dataName = 'name';
+    /** Dropdown open direction: down | top (matches Angular `position`) */
+    position = 'down';
+    /** Allow multiple selection */
+    multipleSelectModel = true;
+    /** Max height of dropdown (numeric value) */
+    heightOverlay = 230;
+    /** Label shown above the input */
+    label = '';
+    /** Controlled selected items array (matches Angular `model`) */
+    model = [];
+    open = false;
+    selected = [];
+    parsedOptions = [];
+    /** Emitted on input change. e.detail = current text */
+    onInput;
+    /** Emitted on blur */
+    onBlur;
+    /** Emitted when Enter is pressed. e.detail = current text */
+    onKeyEnter;
+    /** Emitted on change event of the native input (matches Angular `onChange`) */
+    onChange;
+    /** Emitted when clear button clicked */
+    onClear;
+    /** Emitted when selection changes. e.detail = selected items */
+    modelChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.dataToSearch);
+    }
+    get filtered() {
+        if (!this.textInput)
+            return this.parsedOptions;
+        const q = this.textInput.toLowerCase();
+        return this.parsedOptions.filter(o => String(o[this.dataName] ?? '').toLowerCase().includes(q));
+    }
+    handleInput(e) {
+        this.textInput = e.target.value;
+        this.open = this.parsedOptions.length > 0;
+        this.onInput.emit(this.textInput);
+        this.onChange.emit(this.textInput);
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter')
+            this.onKeyEnter.emit(this.textInput);
+        if (e.key === 'Escape')
+            this.open = false;
+    }
+    handleClear() {
+        this.textInput = '';
+        this.open = false;
+        this.onClear.emit();
+        this.onInput.emit('');
+    }
+    isSelected(opt) {
+        return this.selected.some(s => s[this.dataName] === opt[this.dataName]);
+    }
+    selectOption(opt) {
+        if (this.multipleSelectModel) {
+            if (this.isSelected(opt)) {
+                this.selected = this.selected.filter(s => s[this.dataName] !== opt[this.dataName]);
+            }
+            else {
+                this.selected = [...this.selected, opt];
+            }
+        }
+        else {
+            this.textInput = opt[this.dataName] ?? '';
+            this.selected = [opt];
+            this.open = false;
+        }
+        this.modelChange.emit(this.selected);
+    }
+    render() {
+        const showDropdown = this.open && this.parsedOptions.length > 0;
+        return (h("div", { key: 'ec00c8851a1d2d4ddda50edea458589a62d9451a', class: "search-wrap" }, this.label && h("label", { key: '31cadba1b21276ec43f3623676fe1a7f9bac4da2', class: "search-label" }, this.label), h("div", { key: 'bf68dbb7cfa657e8a7e441a2fe47db0e7d214e44', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: 'c1c442a8fed018f774d6addc9dcaf3d1e89d6121', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'd22791b1864320c54060827cc601bbc242d6c37d', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, 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.onBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: '55e8653e330b06d488c6d65f6a8ffe6465a24289', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '0c154c2a95119caefe84bd9cfc40860d4b722137', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: 'a4b4691ff29a427755f19c4bc4932f2634736701', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, 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.multipleSelectModel && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
+    }
+    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 {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'dropdown' | 'dropdown-button' | 'default-light'",
+                    "resolved": "\"default\" | \"default-light\" | \"dropdown\" | \"dropdown-button\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant (matches Angular `type`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "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": "'Search...'"
+            },
+            "textInput": {
+                "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": "text-input",
+                "defaultValue": "''"
+            },
+            "typeInput": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'number'",
+                    "resolved": "\"number\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML input type: text | number (matches Angular `typeInput`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type-input",
+                "defaultValue": "'text'"
+            },
+            "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": "max-length"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the search icon (matches Angular `showIcon`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "true"
+            },
+            "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"
+            },
+            "dataToSearch": {
+                "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": "data-to-search",
+                "defaultValue": "[]"
+            },
+            "dataName": {
+                "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": "data-name",
+                "defaultValue": "'name'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'down' | 'top'",
+                    "resolved": "\"down\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dropdown open direction: down | top (matches Angular `position`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'down'"
+            },
+            "multipleSelectModel": {
+                "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": "multiple-select-model",
+                "defaultValue": "true"
+            },
+            "heightOverlay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max height of dropdown (numeric value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height-overlay",
+                "defaultValue": "230"
+            },
+            "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": "''"
+            },
+            "model": {
+                "type": "string",
+                "mutable": true,
+                "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": "Controlled selected items array (matches Angular `model`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "model",
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "selected": {},
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onInput",
+                "name": "onInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on input change. e.detail = current text"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "onBlur",
+                "name": "onBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on blur"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "onKeyEnter",
+                "name": "onKeyEnter",
+                "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": "onChange",
+                "name": "onChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on change event of the native input (matches Angular `onChange`)"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "onClear",
+                "name": "onClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when clear button clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "modelChange",
+                "name": "modelChange",
+                "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": "dataToSearch",
+                "methodName": "optionsChanged"
+            }];
+    }
+}