@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,526 +0,0 @@
-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: '3a191ce6fcdede699dcc707411c4f901a4c16e49', class: "search-wrap" }, this.label && h("label", { key: '41049aa159d5bdb89d07b94821bbfe41bb12c2c7', class: "search-label" }, this.label), h("div", { key: 'fba00db1ed11f78cefc0a12ca4d3be780989a48e', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: '7b9d9a9c91eb88161492e4fb8f0c87e89c0f24cb', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '0340848a8c7cdb336fca7e70a863b83a8e8e31ef', 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: '80b5c05828f5f67c861b2f05db4e11f3282c995c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: 'b83d1998021e65431225e73d1edd0388e01b07ce', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '1800618fb2f8f2a47c9a8ddbb9c9649c254a03d2', 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"
-            }];
-    }
-}