@dropi/ui 0.1.20 → 0.1.22

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

@@ -5,91 +5,104 @@ import { h } from "@stencil/core";
  * Supports single and multi-select, keyboard navigation, and clear button.
  */
 export class DropiSearch {
+    /** Visual variant (matches Angular `type`) */
+    type = 'default';
     /** Placeholder text */
-    placeholder = 'Buscar...';
+    placeholder = 'Search...';
     /** Controlled input value */
-    value = '';
+    textInput = '';
+    /** HTML input type: text | number (matches Angular `typeInput`) */
+    typeInput = 'text';
     /** Max character length */
-    maxlength;
+    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 */
-    options = [];
+    dataToSearch = [];
     /** Property name to display and search */
-    labelKey = 'name';
+    dataName = 'name';
+    /** Dropdown open direction: down | top (matches Angular `position`) */
+    position = 'down';
     /** Allow multiple selection */
-    multiSelect = false;
-    /** Max height of dropdown (CSS value) */
-    dropdownHeight = '240px';
+    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 */
-    dropiInput;
+    onInput;
     /** Emitted on blur */
-    dropiBlur;
+    onBlur;
     /** Emitted when Enter is pressed. e.detail = current text */
-    dropiKeyEnter;
+    onKeyEnter;
+    /** Emitted on change event of the native input (matches Angular `onChange`) */
+    onChange;
     /** Emitted when clear button clicked */
-    dropiClear;
+    onClear;
     /** Emitted when selection changes. e.detail = selected items */
-    dropiChange;
+    modelChange;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
     componentWillLoad() {
-        this.optionsChanged(this.options);
+        this.optionsChanged(this.dataToSearch);
     }
     get filtered() {
-        if (!this.value)
+        if (!this.textInput)
             return this.parsedOptions;
-        const q = this.value.toLowerCase();
-        return this.parsedOptions.filter(o => String(o[this.labelKey] ?? '').toLowerCase().includes(q));
+        const q = this.textInput.toLowerCase();
+        return this.parsedOptions.filter(o => String(o[this.dataName] ?? '').toLowerCase().includes(q));
     }
     handleInput(e) {
-        this.value = e.target.value;
+        this.textInput = e.target.value;
         this.open = this.parsedOptions.length > 0;
-        this.dropiInput.emit(this.value);
+        this.onInput.emit(this.textInput);
+        this.onChange.emit(this.textInput);
     }
     handleKeyDown(e) {
         if (e.key === 'Enter')
-            this.dropiKeyEnter.emit(this.value);
+            this.onKeyEnter.emit(this.textInput);
         if (e.key === 'Escape')
             this.open = false;
     }
     handleClear() {
-        this.value = '';
+        this.textInput = '';
         this.open = false;
-        this.dropiClear.emit();
-        this.dropiInput.emit('');
+        this.onClear.emit();
+        this.onInput.emit('');
     }
     isSelected(opt) {
-        return this.selected.some(s => s[this.labelKey] === opt[this.labelKey]);
+        return this.selected.some(s => s[this.dataName] === opt[this.dataName]);
     }
     selectOption(opt) {
-        if (this.multiSelect) {
+        if (this.multipleSelectModel) {
             if (this.isSelected(opt)) {
-                this.selected = this.selected.filter(s => s[this.labelKey] !== opt[this.labelKey]);
+                this.selected = this.selected.filter(s => s[this.dataName] !== opt[this.dataName]);
             }
             else {
                 this.selected = [...this.selected, opt];
             }
         }
         else {
-            this.value = opt[this.labelKey] ?? '';
+            this.textInput = opt[this.dataName] ?? '';
             this.selected = [opt];
             this.open = false;
         }
-        this.dropiChange.emit(this.selected);
+        this.modelChange.emit(this.selected);
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (h("div", { key: 'f7b5b5256a42dc534286dd02248b419fddd74d39', class: "search-wrap" }, this.label && h("label", { key: '721b09602381aad6f1f72acdc1029556222144c8', class: "search-label" }, this.label), h("div", { key: 'a6c9cff477367a5a6e3653ddd2ae56066acc9236', class: "search-input-row" }, h("dropi-icon", { key: '95a51114f701aa87c258e620ccd60e2282830554', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'fc0f13786b69d08a1fa71accf5316ca98d6e3823', 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: () => {
+        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.dropiBlur.emit(); } }), this.showClear && this.value && (h("button", { key: 'e16e8746a1800927966aec5268c73bf8c4c10275', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '691106cf972751b909d1a0a467268098e3ff02e8', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '41f2d2f38dbe9d5fb1c48e1b960888fb8cc5738b', 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])))))))));
+            }, 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"; }
@@ -105,6 +118,26 @@ export class DropiSearch {
     }
     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,
@@ -123,9 +156,9 @@ export class DropiSearch {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placeholder",
-                "defaultValue": "'Buscar...'"
+                "defaultValue": "'Search...'"
             },
-            "value": {
+            "textInput": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -142,10 +175,30 @@ export class DropiSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
+                "attribute": "text-input",
                 "defaultValue": "''"
             },
-            "maxlength": {
+            "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": {
@@ -162,7 +215,27 @@ export class DropiSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "maxlength"
+                "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",
@@ -184,7 +257,7 @@ export class DropiSearch {
                 "attribute": "show-clear",
                 "defaultValue": "true"
             },
-            "options": {
+            "dataToSearch": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -207,10 +280,10 @@ export class DropiSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "options",
+                "attribute": "data-to-search",
                 "defaultValue": "[]"
             },
-            "labelKey": {
+            "dataName": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -227,10 +300,30 @@ export class DropiSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label-key",
+                "attribute": "data-name",
                 "defaultValue": "'name'"
             },
-            "multiSelect": {
+            "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": {
@@ -247,28 +340,28 @@ export class DropiSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "multi-select",
-                "defaultValue": "false"
+                "attribute": "multiple-select-model",
+                "defaultValue": "true"
             },
-            "dropdownHeight": {
-                "type": "string",
+            "heightOverlay": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Max height of dropdown (CSS value)"
+                    "text": "Max height of dropdown (numeric value)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "dropdown-height",
-                "defaultValue": "'240px'"
+                "attribute": "height-overlay",
+                "defaultValue": "230"
             },
             "label": {
                 "type": "string",
@@ -289,6 +382,32 @@ export class DropiSearch {
                 "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": "[]"
             }
         };
     }
@@ -301,8 +420,8 @@ export class DropiSearch {
     }
     static get events() {
         return [{
-                "method": "dropiInput",
-                "name": "dropiInput",
+                "method": "onInput",
+                "name": "onInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -316,8 +435,8 @@ export class DropiSearch {
                     "references": {}
                 }
             }, {
-                "method": "dropiBlur",
-                "name": "dropiBlur",
+                "method": "onBlur",
+                "name": "onBlur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -331,8 +450,8 @@ export class DropiSearch {
                     "references": {}
                 }
             }, {
-                "method": "dropiKeyEnter",
-                "name": "dropiKeyEnter",
+                "method": "onKeyEnter",
+                "name": "onKeyEnter",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -346,8 +465,23 @@ export class DropiSearch {
                     "references": {}
                 }
             }, {
-                "method": "dropiClear",
-                "name": "dropiClear",
+                "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,
@@ -361,8 +495,8 @@ export class DropiSearch {
                     "references": {}
                 }
             }, {
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "modelChange",
+                "name": "modelChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -385,7 +519,7 @@ export class DropiSearch {
     }
     static get watchers() {
         return [{
-                "propName": "options",
+                "propName": "dataToSearch",
                 "methodName": "optionsChanged"
             }];
     }

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

@@ -48,7 +48,7 @@
   padding: 0 0.75rem;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-500, #69738c);
   font-size: var(--font-size-s, 12px);
   font-family: inherit;
@@ -121,7 +121,7 @@
   padding: var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);
   margin: 0;
   border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
   z-index: 9999;
   animation: dropdown-open 120ms ease-out;
@@ -184,7 +184,7 @@
 .sticky-search {
   position: sticky;
   top: calc(-1 * var(--Size-4, 16px));
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   z-index: 10;
   margin: calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;
   padding: var(--Size-2, 8px) var(--Size-4, 16px);
@@ -199,7 +199,7 @@
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
   padding: 6px 10px;
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
 }
 
 .search-input {
@@ -311,7 +311,7 @@
   background: var(--Primary-Primary-500, #f49a3d);
   color: white;
   font-size: 13px;
-  font-weight: bold;
+  font-weight: var(--font-weight-bold);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -325,14 +325,14 @@
 
 .option-second-label {
   color: var(--Gray-Gray-700, #32394d);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   white-space: nowrap;
 }
 
 /* ── Country flag placeholder ────────────────────────────────── */
 .flag-placeholder {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   color: var(--Gray-Gray-500, #69738c);
   flex-shrink: 0;
 }