@dropi/ui 0.1.20 → 0.1.22

package/dist/esm/dropi-phone-input.entry.js

@@ -1,79 +1,192 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D5SAM1O2.js';
 
-const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.phone-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.phone-row{display:flex;align-items:center;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);height:40px;overflow:hidden;transition:border-color 0.2s}.phone-row:focus-within{border-color:var(--Info-Info-500, #50a5f1)}.phone-row--error{border-color:var(--Error-Error-500, #f46a6b)}.phone-row--disabled{background:var(--Gray-Gray-50, #f7f8fa);opacity:0.6;pointer-events:none}.phone-selector{display:flex;align-items:center;gap:4px;padding:0 var(--Size-2, 8px);background:none;border:none;cursor:pointer;height:100%;flex-shrink:0}.phone-selector:disabled{cursor:default}.phone-selector__flag{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);letter-spacing:0.5px}.phone-selector__dial{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.phone-divider{width:1px;height:20px;background:var(--Gray-Gray-200, #c3c9d9);flex-shrink:0}.phone-input{flex:1;height:100%;padding:0 var(--Size-2, 8px);border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.phone-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.phone-error{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}.phone-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:200;max-height:240px;overflow-y:auto}.phone-dropdown__search-wrap{padding:var(--Size-2, 8px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);position:sticky;top:0;background:var(--Neutral-White, #fff)}.phone-dropdown__search{width:100%;height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none}.phone-dropdown__search:focus{border-color:var(--Info-Info-500, #50a5f1)}.phone-dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.phone-dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.phone-dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.phone-dropdown__code{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);width:28px;flex-shrink:0}.phone-dropdown__name{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-dropdown__dial{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);flex-shrink:0}.phone-dropdown__empty{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
+const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type='number']{-moz-appearance:textfield;appearance:textfield}.phone-wrap{width:100%}.phone-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.phone-input-container{display:flex;align-items:center;gap:8px}.custom-select{position:relative;width:50%}.form-control{flex:1;width:100%;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:5px;font-size:14px;font-family:inherit;transition:border-color 0.3s ease-in-out;height:40px;padding:0 12px;outline:none;color:var(--Gray-Gray-700, #32394d);background-color:var(--Neutral-White, #ffffff)}.form-control::placeholder{color:var(--Gray-Gray-500, #69738c)}.form-control:focus::placeholder{color:var(--Gray-Gray-500, #69738c)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);outline:none}.form-control.is-invalid{background:#fffbfb;border-color:var(--Error-Error-500, #f46a6b) !important}.select-button{width:100%;height:40px;padding:0.47rem 0.75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-button img{width:20px;height:20px}.select-button:focus{border-color:var(--Info-Info-500, #50a5f1) !important;outline:none}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:unset}.select-button.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066);background:var(--Neutral-White, #ffffff)}.select-button.select-invalid{border-color:var(--Error-Error-500, #f46a6b) !important}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0 0;border:1px solid transparent;border-radius:var(--Border-2, 8px);overflow-y:scroll;z-index:100}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-thumb{background-color:var(--Gray-Gray-300, #d1d6e1);border-radius:4px}.expanded-select{max-height:250px;background:var(--Neutral-White, #ffffff);box-shadow:var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));border:1px solid var(--Gray-Gray-200, #c3c9d9);transition:max-height 0.2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;border:1px solid transparent;transition:max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out}.select-dropdown li{margin:0;padding:0}.option{width:100%;height:45px;border-radius:var(--Border-2, 8px);padding-top:var(--Size-3, 12px);padding-right:var(--Size-4, 16px);padding-bottom:var(--Size-3, 12px);padding-left:var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px}.option img{width:20px;height:20px}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled{color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:unset}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.phone-error{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}`;
 
 const COUNTRIES = [
-    { name: 'Colombia', code: 'CO', dial: '+57', maxLength: 10 },
-    { name: 'Ecuador', code: 'EC', dial: '+593', maxLength: 9 },
-    { name: 'México', code: 'MX', dial: '+52', maxLength: 10 },
-    { name: 'Perú', code: 'PE', dial: '+51', maxLength: 9 },
-    { name: 'Chile', code: 'CL', dial: '+56', maxLength: 9 },
-    { name: 'Argentina', code: 'AR', dial: '+54', maxLength: 10 },
-    { name: 'Venezuela', code: 'VE', dial: '+58', maxLength: 10 },
-    { name: 'Brasil', code: 'BR', dial: '+55', maxLength: 11 },
-    { name: 'Estados Unidos', code: 'US', dial: '+1', maxLength: 10 },
-    { name: 'España', code: 'ES', dial: '+34', maxLength: 9 },
+    { code: '57', name: 'Colombia', flag: 'CO', maxLength: 10 },
+    { code: '52', name: 'Mexico', flag: 'MX', maxLength: 10 },
+    { code: '507', name: 'Panama', flag: 'PA', maxLength: 8 },
+    { code: '56', name: 'Chile', flag: 'CL', maxLength: 9 },
+    { code: '593', name: 'Ecuador', flag: 'EC', maxLength: 10 },
+    { code: '51', name: 'Peru', flag: 'PE', maxLength: 9 },
+    { code: '34', name: 'España', flag: 'ES', maxLength: 9 },
+    { code: '595', name: 'Paraguay', flag: 'PY', maxLength: 9 },
+    { code: '58', name: 'Venezuela', flag: 'VE', maxLength: 11 },
+    { code: '54', name: 'Argentina', flag: 'AR', maxLength: 10 },
+    { code: '55', name: 'Brasil', flag: 'BR', maxLength: 11 },
+    { code: '1', name: 'United States', flag: 'US', maxLength: 10 },
+    { code: '502', name: 'Guatemala', flag: 'GT', maxLength: 8 },
+    { code: '598', name: 'Uruguay', flag: 'UY', maxLength: 9 },
+    { code: '501', name: 'Belize', flag: 'BZ', maxLength: 7 },
+    { code: '81', name: 'Japan', flag: 'JP', maxLength: 10 },
+    { code: '1', name: 'Canada', flag: 'CA', maxLength: 9 },
+    { code: '1473', name: 'Grenada', flag: 'GD', maxLength: 10 },
+    { code: '509', name: 'Haiti', flag: 'HT', maxLength: 10 },
+    { code: '1809', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },
+    { code: '1829', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },
+    { code: '1849', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },
+    { code: '1869', name: 'Saint Kitts And Nevis', flag: 'KN', maxLength: 10 },
+    { code: '1784', name: 'Saint Vincent And The Grenadines', flag: 'VC', maxLength: 10 },
+    { code: '1758', name: 'Saint Lucia', flag: 'LC', maxLength: 10 },
+    { code: '597', name: 'Suriname', flag: 'SR', maxLength: 10 },
+    { code: '1868', name: 'Trinidad and Tobago', flag: 'TT', maxLength: 10 },
+    { code: '505', name: 'Nicaragua', flag: 'NI', maxLength: 8 },
+    { code: '506', name: 'Costa Rica', flag: 'CR', maxLength: 8 },
+    { code: '591', name: 'Bolivia', flag: 'BO', maxLength: 8 },
+    { code: '7', name: 'Russia', flag: 'RU', maxLength: 11 },
+    { code: '20', name: 'Egypt', flag: 'EG', maxLength: 9 },
+    { code: '27', name: 'South Africa', flag: 'ZA', maxLength: 10 },
+    { code: '30', name: 'Greece', flag: 'GR', maxLength: 10 },
+    { code: '31', name: 'Netherlands', flag: 'NL', maxLength: 9 },
+    { code: '32', name: 'Belgium', flag: 'BE', maxLength: 8 },
+    { code: '33', name: 'France', flag: 'FR', maxLength: 9 },
+    { code: '36', name: 'Hungary', flag: 'HU', maxLength: 9 },
+    { code: '40', name: 'Romania', flag: 'RO', maxLength: 9 },
+    { code: '39', name: 'Italy', flag: 'IT', maxLength: 10 },
+    { code: '41', name: 'Switzerland', flag: 'CH', maxLength: 9 },
+    { code: '44', name: 'United Kingdom', flag: 'GB', maxLength: 11 },
+    { code: '45', name: 'Denmark', flag: 'DK', maxLength: 8 },
+    { code: '46', name: 'Sweden', flag: 'SE', maxLength: 8 },
+    { code: '47', name: 'Norway', flag: 'NO', maxLength: 8 },
+    { code: '48', name: 'Poland', flag: 'PL', maxLength: 9 },
+    { code: '49', name: 'Germany', flag: 'DE', maxLength: 11 },
+    { code: '53', name: 'Malta', flag: 'MT', maxLength: 8 },
+    { code: '60', name: 'Malaysia', flag: 'MY', maxLength: 9 },
+    { code: '61', name: 'Australia', flag: 'AU', maxLength: 9 },
+    { code: '62', name: 'Indonesia', flag: 'ID', maxLength: 12 },
+    { code: '63', name: 'Philippines', flag: 'PH', maxLength: 10 },
+    { code: '64', name: 'New Zealand', flag: 'NZ', maxLength: 12 },
+    { code: '65', name: 'Singapore', flag: 'SG', maxLength: 8 },
+    { code: '66', name: 'Thailand', flag: 'TH', maxLength: 9 },
+    { code: '82', name: 'South Korea', flag: 'KR', maxLength: 9 },
+    { code: '84', name: 'Vietnam', flag: 'VN', maxLength: 11 },
+    { code: '86', name: 'China', flag: 'CN', maxLength: 11 },
+    { code: '90', name: 'Turkey', flag: 'TR', maxLength: 10 },
+    { code: '91', name: 'India', flag: 'IN', maxLength: 10 },
+    { code: '92', name: 'Pakistan', flag: 'PK', maxLength: 9 },
+    { code: '93', name: 'Afghanistan', flag: 'AF', maxLength: 10 },
+    { code: '94', name: 'Sri Lanka', flag: 'LK', maxLength: 9 },
+    { code: '95', name: 'Myanmar', flag: 'MM', maxLength: 9 },
+    { code: '98', name: 'Iran', flag: 'IR', maxLength: 10 },
+    { code: '211', name: 'South Sudan', flag: 'SS', maxLength: 10 },
+    { code: '212', name: 'Morocco', flag: 'MA', maxLength: 9 },
+    { code: '213', name: 'Algeria', flag: 'DZ', maxLength: 9 },
+    { code: '216', name: 'Tunisia', flag: 'TN', maxLength: 8 },
+    { code: '218', name: 'Libya', flag: 'LY', maxLength: 9 },
+    { code: '220', name: 'Gambia', flag: 'GM', maxLength: 8 },
+    { code: '221', name: 'Senegal', flag: 'SN', maxLength: 9 },
+    { code: '222', name: 'Mauritania', flag: 'MR', maxLength: 9 },
+    { code: '223', name: 'Mali', flag: 'ML', maxLength: 8 },
+    { code: '224', name: 'Guinea', flag: 'GN', maxLength: 9 },
+    { code: '225', name: 'Ivory Coast', flag: 'CI', maxLength: 10 },
+    { code: '226', name: 'Burkina Faso', flag: 'BF', maxLength: 10 },
+    { code: '227', name: 'Niger', flag: 'NE', maxLength: 8 },
+    { code: '228', name: 'Togo', flag: 'TG', maxLength: 8 },
+    { code: '229', name: 'Benin', flag: 'BJ', maxLength: 8 },
+    { code: '230', name: 'Mauritius', flag: 'MU', maxLength: 10 },
+    { code: '231', name: 'Liberia', flag: 'LR', maxLength: 8 },
+    { code: '232', name: 'Sierra Leone', flag: 'SL', maxLength: 11 },
+    { code: '233', name: 'Ghana', flag: 'GH', maxLength: 9 },
+    { code: '234', name: 'Nigeria', flag: 'NG', maxLength: 11 },
+    { code: '235', name: 'Chad', flag: 'TD', maxLength: 8 },
+    { code: '236', name: 'Central African Republic', flag: 'CF', maxLength: 21 },
+    { code: '237', name: 'Cameroon', flag: 'CM', maxLength: 10 },
+    { code: '238', name: 'Cape Verde', flag: 'CV', maxLength: 9 },
+    { code: '239', name: 'São Tomé and Príncipe', flag: 'ST', maxLength: 14 },
+    { code: '240', name: 'Equatorial Guinea', flag: 'GQ', maxLength: 17 },
+    { code: '241', name: 'Gabon', flag: 'GA', maxLength: 9 },
 ];
 const DropiPhoneInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiCodeChange = createEvent(this, "dropiCodeChange", 7);
-        this.dropiPhoneChange = createEvent(this, "dropiPhoneChange", 7);
+        this.ngModelChangeCod = createEvent(this, "ngModelChangeCod", 7);
+        this.ngModelChangePhone = createEvent(this, "ngModelChangePhone", 7);
+        this.verifiedField = createEvent(this, "verifiedField", 7);
+        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
     }
-    /** Initial country dial code (e.g. "+57") */
-    codArea = '+57';
-    /** Phone number value */
-    value = '';
-    /** Input placeholder */
-    placeholder = 'Número de teléfono';
-    /** Disabled state */
-    disabled = false;
-    /** Show error state */
-    isValid = true;
-    /** Error message */
-    errorMessage = 'Número inválido';
-    /** Label */
-    label = '';
+    get el() { return getElement(this); }
+    /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
+    codArea = '57';
+    /** Phone number value — matches Angular 'ngModelPhone' */
+    ngModelPhone = '';
+    /** Input placeholder — matches Angular 'phoneNumberPlaceholder' */
+    phoneNumberPlaceholder = null;
+    /** Disabled state — matches Angular 'disabledInput' */
+    disabledInput = false;
+    /** Validation state — matches Angular 'isValidPhone' */
+    isValidPhone = undefined;
+    /** Validate on init — matches Angular 'validateOnInit' */
+    validateOnInit = true;
+    /**
+     * Pre-selected country object (matches Angular `selectedOption: Country`).
+     * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.
+     */
+    selectedOption = null;
+    /**
+     * Country select configuration object (matches Angular `selectProperties: SelectProperties`).
+     * Fields: `label`, `placeholder`, `options` (array of Country objects).
+     * When provided, overrides the internal country list.
+     */
+    selectProperties = null;
     open = false;
-    search = '';
-    /** Emitted when country dial code changes. e.detail = dial code string */
-    dropiCodeChange;
-    /** Emitted when phone number changes. e.detail = phone number string */
-    dropiPhoneChange;
+    /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
+    ngModelChangeCod;
+    /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
+    ngModelChangePhone;
+    /** Emitted on field verification — matches Angular 'verifiedField' */
+    verifiedField;
+    /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
+    onChangeSelect;
     codAreaChanged() {
-        this.value = '';
+        this.ngModelPhone = '';
     }
-    get selectedCountry() {
-        return COUNTRIES.find(c => c.dial === this.codArea) ?? COUNTRIES[0];
+    selectedOptionChanged(val) {
+        if (!val)
+            return;
+        // Support Angular Country shape: { dialCode, iso2 } or { code }
+        const code = val.dialCode ?? val.code ?? this.codArea;
+        this.codArea = String(code).replace('+', '');
+    }
+    componentWillLoad() {
+        if (this.selectedOption)
+            this.selectedOptionChanged(this.selectedOption);
     }
-    get filtered() {
-        if (!this.search)
-            return COUNTRIES;
-        const q = this.search.toLowerCase();
-        return COUNTRIES.filter(c => c.name.toLowerCase().includes(q) || c.dial.includes(q));
+    get selectedCountry() {
+        const cleanCodArea = (this.codArea ?? '57').replace('+', '');
+        return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];
     }
     selectCountry(c) {
-        this.codArea = c.dial;
+        this.codArea = c.code;
         this.open = false;
-        this.search = '';
-        this.dropiCodeChange.emit(c.dial);
+        this.ngModelChangeCod.emit(c.code);
+        this.onChangeSelect.emit(c);
     }
     handleInput(e) {
         const raw = e.target.value.replace(/\D/g, '');
-        this.value = raw.slice(0, this.selectedCountry.maxLength);
-        e.target.value = this.value;
-        this.dropiPhoneChange.emit(this.value);
+        this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);
+        e.target.value = this.ngModelPhone;
+        this.ngModelChangePhone.emit(this.ngModelPhone);
+    }
+    handleWindowClick(ev) {
+        const path = ev.composedPath();
+        if (!path.includes(this.el)) {
+            this.open = false;
+        }
     }
     render() {
         const country = this.selectedCountry;
-        return (h("div", { key: '8a22ead8fdf5d8916dd6d5376600ded1528f23e3', class: "phone-wrap" }, this.label && h("label", { key: '5d531f606de5691eeb608a3a32b71bd1b7925ae1', class: "phone-label" }, this.label), h("div", { key: '97d858e4dd57114e63bb460970ea5e0a22e3a4a7', class: { 'phone-row': true, 'phone-row--error': !this.isValid, 'phone-row--disabled': this.disabled } }, h("button", { key: '2f18bc35a7698d9c5f24dad68458ff27161c1b9d', type: "button", class: "phone-selector", disabled: this.disabled, onClick: () => {
-                if (!this.disabled)
+        const isInvalid = this.isValidPhone === false;
+        return (h("div", { key: 'e4a9468971ff90e3e1c2cf6944a8475451843428', class: "phone-wrap" }, h("div", { key: 'dabdccaf0453e98afb3db78ee6b6f83a66615baa', class: "phone-input-container" }, h("div", { key: '6481136b782da271fe47c19cfd359398bf632f35', class: "custom-select" }, h("button", { key: 'd314c0e2c74724eff20eae8f34241caf1fc2448c', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+                if (!this.disabledInput)
                     this.open = !this.open;
-            }, "aria-haspopup": "listbox", "aria-expanded": this.open }, h("span", { key: 'e0e5c9c22eab18335ce75ba273bf98934ad2fec0', class: "phone-selector__flag" }, country.code), h("span", { key: '9494233c07ed5f5fe6f6ad71f1f9d4c2b94be249', class: "phone-selector__dial" }, country.dial), h("dropi-icon", { key: '721e47d92b5dc9f973a5ce08b383a87371fdb736', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), h("div", { key: '93183e161f42b12cd42daa488c49318b2c378351', class: "phone-divider" }), h("input", { key: 'd9b4254f760cf967b2e0ca27946968d2cfc0ca86', class: "phone-input", type: "tel", inputmode: "numeric", placeholder: this.placeholder, value: this.value, disabled: this.disabled, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) })), !this.isValid && (h("p", { key: '62a89722bdab5c9b3a67c444543679acfc91f4e9', class: "phone-error" }, this.errorMessage)), this.open && (h("div", { key: 'd51d4d3a43eb6d823dd9039d534f97e6a456b343', class: "phone-dropdown" }, h("div", { key: 'd3f5912e02d62fdbec2b8a859b49c80b94047a2c', class: "phone-dropdown__search-wrap" }, h("input", { key: '2349669feca48b0760277a4288420f2680eb41c4', class: "phone-dropdown__search", type: "text", placeholder: "Buscar pa\u00EDs...", value: this.search, onInput: (e) => this.search = e.target.value })), this.filtered.length === 0 ? (h("div", { class: "phone-dropdown__empty" }, "Sin resultados")) : (this.filtered.map(c => (h("div", { class: { 'phone-dropdown__item': true, 'phone-dropdown__item--active': c.dial === this.codArea }, onMouseDown: (e) => { e.preventDefault(); this.selectCountry(c); } }, h("span", { class: "phone-dropdown__code" }, c.code), h("span", { class: "phone-dropdown__name" }, c.name), h("span", { class: "phone-dropdown__dial" }, c.dial)))))))));
+            } }, h("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '0ace7b7188e846793d66373ea3d2c2d8ae881c24', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), h("ul", { key: '832b37902ce54aac152e956d671fb6f899781029', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: 'eaf32641b019e1ffd3fe5a1d7a3c4597e1cd0cb5', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get watchers() { return {
         "codArea": [{
                 "codAreaChanged": 0
+            }],
+        "selectedOption": [{
+                "selectedOptionChanged": 0
             }]
     }; }
 };

package/dist/esm/dropi-radio-button.entry.js

@@ -1,18 +1,18 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
 const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
 const DropiRadioButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.onChange = createEvent(this, "onChange", 7);
     }
     /** Label text displayed next to the radio */
     label = '';
     /** Input name (for grouping radio buttons) */
-    name = 'radio';
+    name = 'name';
     /** Input id */
-    inputId = 'radioButton';
+    id = 'radioButton';
     /** Whether this radio is selected */
     checked = false;
     /**
@@ -21,17 +21,17 @@ const DropiRadioButton = class {
      */
     resetTrigger = false;
     /** Emitted when the radio is selected */
-    dropiChange;
+    onChange;
     onResetTrigger(val) {
         if (val)
             this.checked = false;
     }
     handleChange(e) {
         this.checked = e.target.checked;
-        this.dropiChange.emit(e);
+        this.onChange.emit(e);
     }
     render() {
-        return (h("div", { key: '50ae300b1dc5972c7c8979f7711edd5f59109653', class: "dropi-radio-button" }, h("label", { key: 'c91a4ee63c63fe9ae437f344fa1b249db227a4cb', htmlFor: this.inputId }, h("input", { key: 'ad993a1748315909539f512c09176713693a99d9', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: '86430f601f7ddb6144682c0356938886217eb2ae', class: "dropi-radio-button" }, h("label", { key: '653fa8d5c33fc64ab44174e6d0fe35c6fd992be7', htmlFor: this.id }, h("input", { key: 'd99eae69867b0a09b6585a18dfaa52da353c5bd2', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/esm/dropi-radio-selection-list.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
-const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.rsl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.rsl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.rsl__list{display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.rsl__item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);cursor:pointer;transition:border-color 0.15s, background 0.15s}.rsl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.rsl__item--selected{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.rsl__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--Gray-Gray-300, #a3abbf);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:border-color 0.15s}.rsl__radio--checked{border-color:var(--Primary-Primary-500, #f49a3d)}.rsl__radio-dot{width:8px;height:8px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.rsl__content{display:flex;flex-direction:column;gap:2px}.rsl__name{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.rsl__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
+const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.rsl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.rsl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.rsl__list{display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.rsl__item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);cursor:pointer;transition:border-color 0.15s, background 0.15s}.rsl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.rsl__item--selected{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.rsl__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--Gray-Gray-300, #a3abbf);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;transition:border-color 0.15s}.rsl__radio--checked{border-color:var(--Primary-Primary-500, #f49a3d)}.rsl__radio-dot{width:8px;height:8px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.rsl__content{display:flex;flex-direction:column;gap:2px}.rsl__name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d)}.rsl__desc{font-size:var(--font-size-xs, 10px);line-height:1.4;color:var(--Gray-Gray-500, #69738c)}`;
 
 const DropiRadioSelectionList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
-        this.dropiSearch = createEvent(this, "dropiSearch", 7);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.onSearch = createEvent(this, "onSearch", 7);
     }
     /** Options array or JSON string */
     options = [];
@@ -15,15 +15,19 @@ const DropiRadioSelectionList = class {
     /** Show search box */
     showFilter = false;
     /** Search placeholder */
-    filterPlaceholder = 'Buscar...';
-    /** Show description below name */
+    filterPlaceholder = 'Search';
+    /** Show description even when option is not selected */
+    alwaysShowDescription = true;
+    /** Layout type */
     typeLayout = 'default';
+    /** Delay before filtering (matches Angular `searchDelay`) */
+    searchDelay = 100;
     filterText = '';
     parsedOptions = [];
     /** Emitted on selection change. e.detail = selected option id */
-    dropiChange;
-    /** Emitted on search. e.detail = search text */
-    dropiSearch;
+    valueChange;
+    /** Emitted on search — matches Angular 'onSearch' */
+    onSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -35,12 +39,12 @@ const DropiRadioSelectionList = class {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (h("div", { key: '162776e2e2c09a26761b276a078d526308d205fd', class: "rsl" }, this.showFilter && (h("div", { key: 'ea0d6f907ff1ff79ce672b0cbb75572f48d6c44b', class: "rsl__search" }, h("dropi-icon", { key: 'c7dc88e18883942492f778f53932fd99cbd1a9bc', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '07ea27e2502f8aeaedb24ab4cfdb42c1573f6125', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (h("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, h("dropi-icon", { key: '4f6a63480a811ed22d67485274b7edf3bf9765f4', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'c1f1c5942d422fceaa967640b7795a981896d68d', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
-                this.dropiSearch.emit(this.filterText);
-            } }))), h("div", { key: '95a4463b79a0795c8c0e7a30047f4ccd5f1d656d', class: "rsl__list" }, this.filtered.map(opt => {
+                this.onSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
+            } }))), h("div", { key: '425b4048cbf4fa4a22c13d932f296cb594ffe993', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
-            return (h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && h("div", { class: "rsl__radio-dot" })), h("div", { class: "rsl__content" }, h("span", { class: "rsl__name" }, opt.name), this.typeLayout === 'description' && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
+            return (h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.valueChange.emit(opt.id); } }, h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && h("div", { class: "rsl__radio-dot" })), h("div", { class: "rsl__content" }, h("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
         }))));
     }
     static get watchers() { return {

package/dist/esm/dropi-read-more.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, h } from './index-D5SAM1O2.js';
 
-const dropiReadMoreCss = () => `:host{display:block}.read-more__text{margin:0 0 4px;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-800, #1a2033);line-height:1.5}.read-more__toggle{background:none;border:none;padding:0;margin:0;font-size:var(--font-size-s, 12px);font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}.read-more__toggle:hover{color:var(--Primary-Primary-600, #d4872e)}`;
+const dropiReadMoreCss = () => `:host{display:block}.read-more__text{margin:0;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);line-height:1.5}.read-more__toggle{all:unset;display:inline;font-size:var(--font-size-s, 12px);font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-600);cursor:pointer}.read-more__toggle:hover{color:var(--Primary-Primary-600, #d4872e)}`;
 
 const DropiReadMore = class {
     constructor(hostRef) {
@@ -12,6 +12,10 @@ const DropiReadMore = class {
     maxWords = 20;
     /** Allow collapsing back after expanding */
     showSeeLess = true;
+    /** Inline CSS string applied to the text element (matches Angular `textStyle`) */
+    textStyle = '';
+    /** Inline CSS string applied to the toggle button (matches Angular `buttonStyle`) */
+    buttonStyle = '';
     expanded = false;
     get words() {
         return (this.text || '').split(/\s+/).filter(Boolean);
@@ -22,11 +26,11 @@ const DropiReadMore = class {
     get displayText() {
         if (!this.needsTruncation || this.expanded)
             return this.text;
-        return this.words.slice(0, this.maxWords).join(' ') + '…';
+        return this.words.slice(0, this.maxWords).join(' ');
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: '82c3554cc4488391be3b70c5e3bbb5a38a957ec8', class: "read-more" }, h("p", { key: '48287caef84486c77d8e8f36080c59c32c90cd00', class: "read-more__text" }, this.displayText), showToggle && (h("button", { key: 'b808d8cf10d65381e16cdda460db8ceb4d8467c0', class: "read-more__toggle", onClick: () => this.expanded = !this.expanded }, this.expanded ? 'Ver menos' : 'Ver más'))));
+        return (h("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, h("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
 };
 DropiReadMore.style = dropiReadMoreCss();

package/dist/esm/dropi-search.entry.js

@@ -1,104 +1,118 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
-const dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.search-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.search-input-row{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;pointer-events:none;z-index:1}.search-input{width:100%;height:40px;padding:0 36px 0 34px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none;transition:border-color 0.2s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{position:absolute;right:10px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;z-index:1}.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:var(--dropdown-height, 240px);overflow-y:auto;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);z-index:100}.search-option{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.search-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.search-option--selected{background:var(--Primary-Primary-50, #fff5eb)}.search-option__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-no-results{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
+const dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.search-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.search-input-row{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;pointer-events:none;z-index:1}.search-input{width:100%;height:40px;padding:0 36px 0 34px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none;transition:border-color 0.2s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{position:absolute;right:10px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;z-index:1}.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:var(--dropdown-height, 240px);overflow-y:auto;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);z-index:100}.search-option{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.search-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.search-option--selected{background:var(--Primary-Primary-50, #fff5eb)}.search-option__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-no-results{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
 
 const DropiSearch = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiInput = createEvent(this, "dropiInput", 7);
-        this.dropiBlur = createEvent(this, "dropiBlur", 7);
-        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter", 7);
-        this.dropiClear = createEvent(this, "dropiClear", 7);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.onInput = createEvent(this, "onInput", 7);
+        this.onBlur = createEvent(this, "onBlur", 7);
+        this.onKeyEnter = createEvent(this, "onKeyEnter", 7);
+        this.onChange = createEvent(this, "onChange", 7);
+        this.onClear = createEvent(this, "onClear", 7);
+        this.modelChange = createEvent(this, "modelChange", 7);
     }
+    /** 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 watchers() { return {
-        "options": [{
+        "dataToSearch": [{
                 "optionsChanged": 0
             }]
     }; }