@dropi/ui 0.1.20 → 0.1.21

package/dist/collection/components/dropi-phone-input/dropi-phone-input.js

@@ -1,72 +1,180 @@
 import { h } from "@stencil/core";
 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 },
 ];
 /**
  * @component dropi-phone-input
  * Phone number input with country code selector.
- * Validates max length per country and emits changes.
+ * Syncs perfectly with dropi-core_front natively
  */
 export class DropiPhoneInput {
-    /** 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 = '';
+    el;
+    /** 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.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: '884ddc86a364c666e79c2e99501c607a5c332599', class: "phone-wrap" }, h("div", { key: 'e0b044ac41b640cddffe080c695b7fe2d4add574', class: "phone-input-container" }, h("div", { key: 'f9f8b6794fb73efff50e064550ce462e25bb4d51', class: "custom-select" }, h("button", { key: '564675d4b89d33cc7cba743f77b4d96f7f6afea3', 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: '884a8a6d688e9fae8bc62ace8ba1f870f3ebdedf', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '4c263356870f8d2aaaa84ffe5f1a1bff49f98e34', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '589ff50ef5881a58586e9b08d9db3e0abcde5873', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'fed2ed2efc5be49ebeb8fe8c36557914eff439c7', 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: 'dcefc1987643eab23dc5d9fbf211804fa90a9d82', 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 is() { return "dropi-phone-input"; }
     static get encapsulation() { return "shadow"; }
@@ -94,15 +202,15 @@ export class DropiPhoneInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Initial country dial code (e.g. \"+57\")"
+                    "text": "Initial country dial code (e.g. \"57\") \u2014 matches Angular 'CodArea' setter"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "cod-area",
-                "defaultValue": "'+57'"
+                "defaultValue": "'57'"
             },
-            "value": {
+            "ngModelPhone": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -114,19 +222,19 @@ export class DropiPhoneInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Phone number value"
+                    "text": "Phone number value \u2014 matches Angular 'ngModelPhone'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
+                "attribute": "ng-model-phone",
                 "defaultValue": "''"
             },
-            "placeholder": {
+            "phoneNumberPlaceholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | null",
                     "resolved": "string",
                     "references": {}
                 },
@@ -134,15 +242,15 @@ export class DropiPhoneInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Input placeholder"
+                    "text": "Input placeholder \u2014 matches Angular 'phoneNumberPlaceholder'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'N\u00FAmero de tel\u00E9fono'"
+                "attribute": "phone-number-placeholder",
+                "defaultValue": "null"
             },
-            "disabled": {
+            "disabledInput": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -154,15 +262,15 @@ export class DropiPhoneInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled state"
+                    "text": "Disabled state \u2014 matches Angular 'disabledInput'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "disabled-input",
                 "defaultValue": "false"
             },
-            "isValid": {
+            "isValidPhone": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -174,72 +282,91 @@ export class DropiPhoneInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show error state"
+                    "text": "Validation state \u2014 matches Angular 'isValidPhone'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "is-valid",
-                "defaultValue": "true"
+                "attribute": "is-valid-phone",
+                "defaultValue": "undefined"
             },
-            "errorMessage": {
-                "type": "string",
+            "validateOnInit": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Error message"
+                    "text": "Validate on init \u2014 matches Angular 'validateOnInit'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error-message",
-                "defaultValue": "'N\u00FAmero inv\u00E1lido'"
+                "attribute": "validate-on-init",
+                "defaultValue": "true"
             },
-            "label": {
-                "type": "string",
+            "selectedOption": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-selected country object (matches Angular `selectedOption: Country`).\nPass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-option",
+                "defaultValue": "null"
+            },
+            "selectProperties": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label"
+                    "text": "Country select configuration object (matches Angular `selectProperties: SelectProperties`).\nFields: `label`, `placeholder`, `options` (array of Country objects).\nWhen provided, overrides the internal country list."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
+                "attribute": "select-properties",
+                "defaultValue": "null"
             }
         };
     }
     static get states() {
         return {
-            "open": {},
-            "search": {}
+            "open": {}
         };
     }
     static get events() {
         return [{
-                "method": "dropiCodeChange",
-                "name": "dropiCodeChange",
+                "method": "ngModelChangeCod",
+                "name": "ngModelChangeCod",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when country dial code changes. e.detail = dial code string"
+                    "text": "Emitted when country dial code changes \u2014 matches Angular 'ngModelChangeCod'"
                 },
                 "complexType": {
                     "original": "string",
@@ -247,26 +374,69 @@ export class DropiPhoneInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiPhoneChange",
-                "name": "dropiPhoneChange",
+                "method": "ngModelChangePhone",
+                "name": "ngModelChangePhone",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when phone number changes. e.detail = phone number string"
+                    "text": "Emitted when phone number changes \u2014 matches Angular 'ngModelChangePhone'"
                 },
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "verifiedField",
+                "name": "verifiedField",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on field verification \u2014 matches Angular 'verifiedField'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "onChangeSelect",
+                "name": "onChangeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when country selection changes \u2014 matches Angular 'onChangeSelect'"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "codArea",
                 "methodName": "codAreaChanged"
+            }, {
+                "propName": "selectedOption",
+                "methodName": "selectedOptionChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -7,9 +7,9 @@ export class DropiRadioButton {
     /** 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;
     /**
@@ -18,17 +18,17 @@ export class DropiRadioButton {
      */
     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: '560f5edef6d0646d8797dfc3add17003ea847d0b', class: "dropi-radio-button" }, h("label", { key: 'aeb5159c64643485457ffe083bbeb78a97da8b50', htmlFor: this.id }, h("input", { key: '78ff657aee559c1230e2e16c01adfea0382e4979', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }
@@ -83,9 +83,9 @@ export class DropiRadioButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "name",
-                "defaultValue": "'radio'"
+                "defaultValue": "'name'"
             },
-            "inputId": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -102,7 +102,7 @@ export class DropiRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "input-id",
+                "attribute": "id",
                 "defaultValue": "'radioButton'"
             },
             "checked": {
@@ -149,8 +149,8 @@ export class DropiRadioButton {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -159,16 +159,9 @@ export class DropiRadioButton {
                     "text": "Emitted when the radio is selected"
                 },
                 "complexType": {
-                    "original": "Event",
-                    "resolved": "Event",
-                    "references": {
-                        "Event": {
-                            "location": "import",
-                            "path": "@stencil/core",
-                            "id": "node_modules::Event",
-                            "referenceLocation": "Event"
-                        }
-                    }
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
                 }
             }];
     }

package/dist/collection/components/dropi-radio-selection-list/dropi-radio-selection-list.css

@@ -46,7 +46,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-top: 1px;
+  margin-top: 3px;
   transition: border-color 0.15s;
 }
 
@@ -60,5 +60,5 @@
 }
 
 .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); }
+.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); }