@dropi/ui 0.1.23 → 0.1.24

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

@@ -0,0 +1,209 @@
+:host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }
+*, *::before, *::after { box-sizing: border-box; }
+
+/* Ocultar spin buttons en inputs numéricos */
+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;
+}
+
+/* Scrollbar */
+.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);
+}

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

@@ -0,0 +1,442 @@
+import { h } from "@stencil/core";
+const COUNTRIES = [
+    { 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.
+ * Syncs perfectly with dropi-core_front natively
+ */
+export class DropiPhoneInput {
+    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;
+    /** 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.ngModelPhone = '';
+    }
+    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 selectedCountry() {
+        const cleanCodArea = (this.codArea ?? '57').replace('+', '');
+        return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];
+    }
+    selectCountry(c) {
+        this.codArea = c.code;
+        this.open = false;
+        this.ngModelChangeCod.emit(c.code);
+        this.onChangeSelect.emit(c);
+    }
+    handleInput(e) {
+        const raw = e.target.value.replace(/\D/g, '');
+        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;
+        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;
+            } }, 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 is() { return "dropi-phone-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-phone-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-phone-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "codArea": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial country dial code (e.g. \"57\") \u2014 matches Angular 'CodArea' setter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cod-area",
+                "defaultValue": "'57'"
+            },
+            "ngModelPhone": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Phone number value \u2014 matches Angular 'ngModelPhone'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ng-model-phone",
+                "defaultValue": "''"
+            },
+            "phoneNumberPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder \u2014 matches Angular 'phoneNumberPlaceholder'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "phone-number-placeholder",
+                "defaultValue": "null"
+            },
+            "disabledInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state \u2014 matches Angular 'disabledInput'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-input",
+                "defaultValue": "false"
+            },
+            "isValidPhone": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state \u2014 matches Angular 'isValidPhone'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-valid-phone",
+                "defaultValue": "undefined"
+            },
+            "validateOnInit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validate on init \u2014 matches Angular 'validateOnInit'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validate-on-init",
+                "defaultValue": "true"
+            },
+            "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": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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": "select-properties",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ngModelChangeCod",
+                "name": "ngModelChangeCod",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when country dial code changes \u2014 matches Angular 'ngModelChangeCod'"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "ngModelChangePhone",
+                "name": "ngModelChangePhone",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "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
+            }];
+    }
+}