1 <html><head><title>Roo/bootstrap/form/PhoneInput.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
2 * This script refer to:
3 * Title: International Telephone Input
4 * Author: Jack O'Connor
5 * Code version: v12.1.12
6 * Availability: https://github.com/jackocnr/intl-tel-input.git
10 * @class Roo.bootstrap.form.PhoneInput
11 * @extends Roo.bootstrap.form.TriggerField
12 * An input with International dial-code selection
14 * @cfg {String} defaultDialCode default '+852'
15 * @cfg {Array} preferedCountries default []
18 * Create a new PhoneInput.
19 * @param {Object} config Configuration options
22 </span><span class="jsdoc-var">Roo.bootstrap.form.PhoneInput </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
23 </span><span class="jsdoc-var">Roo.bootstrap.form.PhoneInput.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
26 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.form.PhoneInput</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.form.TriggerField</span><span class="jsdoc-syntax">, {
27 </span><span class="jsdoc-comment">/**
28 * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined)
30 </span><span class="jsdoc-var">listWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
32 </span><span class="jsdoc-var">selectedClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">,
34 </span><span class="jsdoc-var">invalidClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"has-warning"</span><span class="jsdoc-syntax">,
36 </span><span class="jsdoc-var">validClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'has-success'</span><span class="jsdoc-syntax">,
38 </span><span class="jsdoc-var">allowed</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0123456789'</span><span class="jsdoc-syntax">,
40 </span><span class="jsdoc-var">max_length</span><span class="jsdoc-syntax">: 15,
42 </span><span class="jsdoc-comment">/**
43 * @cfg {String} defaultDialCode The default dial code when initializing the input
45 </span><span class="jsdoc-var">defaultDialCode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'+852'</span><span class="jsdoc-syntax">,
47 </span><span class="jsdoc-comment">/**
48 * @cfg {Array} preferedCountries A list of iso2 in array (e.g. ['hk','us']). Those related countries will show at the top of the input's choices
50 </span><span class="jsdoc-var">preferedCountries</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
52 </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
54 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.bootstrap.form.PhoneInputData</span><span class="jsdoc-syntax">();
55 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.labelAlign </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.parentLabelAlign</span><span class="jsdoc-syntax">();
56 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
58 </span><span class="jsdoc-var">this.allCountries </span><span class="jsdoc-syntax">= [];
59 </span><span class="jsdoc-var">this.dialCodeMapping </span><span class="jsdoc-syntax">= [];
61 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">data.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
62 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
63 </span><span class="jsdoc-var">this.allCountries</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = {
64 </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[0],
65 </span><span class="jsdoc-var">iso2</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[1],
66 </span><span class="jsdoc-var">dialCode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[2],
67 </span><span class="jsdoc-var">priority</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[3] || 0,
68 </span><span class="jsdoc-var">areaCodes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[4] || </span><span class="jsdoc-keyword">null
69 </span><span class="jsdoc-syntax">};
70 </span><span class="jsdoc-var">this.dialCodeMapping</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[2]] = {
71 </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[0],
72 </span><span class="jsdoc-var">iso2</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[1],
73 </span><span class="jsdoc-var">priority</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[3] || 0,
74 </span><span class="jsdoc-var">areaCodes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[4] || </span><span class="jsdoc-keyword">null
75 </span><span class="jsdoc-syntax">};
78 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
79 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-group'</span><span class="jsdoc-syntax">,
80 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
83 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">input </span><span class="jsdoc-syntax">= {
84 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
85 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
86 </span><span class="jsdoc-comment">// type: 'number', -- do not use number - we get the flaky up/down arrows.
87 </span><span class="jsdoc-var">maxlength</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.max_length</span><span class="jsdoc-syntax">,
88 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-control tel-input'</span><span class="jsdoc-syntax">,
89 </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'new-password'
90 </span><span class="jsdoc-syntax">};
92 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hiddenInput </span><span class="jsdoc-syntax">= {
93 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
94 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
95 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden-tel-input'
96 </span><span class="jsdoc-syntax">};
98 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">) {
99 </span><span class="jsdoc-var">hiddenInput.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
102 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">) {
103 </span><span class="jsdoc-var">input.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
106 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">flag_container </span><span class="jsdoc-syntax">= {
107 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
108 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'flag-box'</span><span class="jsdoc-syntax">,
109 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
111 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
112 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'flag'
113 </span><span class="jsdoc-syntax">},
115 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
116 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'caret'
117 </span><span class="jsdoc-syntax">}
121 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= {
122 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
123 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hasFeedback </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'has-feedback' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
124 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
125 </span><span class="jsdoc-var">hiddenInput</span><span class="jsdoc-syntax">,
126 </span><span class="jsdoc-var">input</span><span class="jsdoc-syntax">,
128 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
129 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'dial-code-holder'</span><span class="jsdoc-syntax">,
130 </span><span class="jsdoc-var">disabled</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
131 </span><span class="jsdoc-syntax">}
135 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= {
136 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-select2-container input-group'</span><span class="jsdoc-syntax">,
137 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
138 </span><span class="jsdoc-var">flag_container</span><span class="jsdoc-syntax">,
139 </span><span class="jsdoc-var">box
140 </span><span class="jsdoc-syntax">]
143 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fieldLabel.length</span><span class="jsdoc-syntax">) {
144 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">indicator </span><span class="jsdoc-syntax">= {
145 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
146 </span><span class="jsdoc-var">tooltip</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'This field is required'
147 </span><span class="jsdoc-syntax">};
149 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">label </span><span class="jsdoc-syntax">= {
150 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'label'</span><span class="jsdoc-syntax">,
151 </span><span class="jsdoc-string">'for'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
152 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'control-label'</span><span class="jsdoc-syntax">,
153 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
156 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">label_text </span><span class="jsdoc-syntax">= {
157 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
158 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.fieldLabel
159 </span><span class="jsdoc-syntax">};
161 </span><span class="jsdoc-var">indicator.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-required-indicator text-danger fa fa-lg fa-star left-indicator'</span><span class="jsdoc-syntax">;
162 </span><span class="jsdoc-var">label.cn </span><span class="jsdoc-syntax">= [
163 </span><span class="jsdoc-var">indicator</span><span class="jsdoc-syntax">,
164 </span><span class="jsdoc-var">label_text
165 </span><span class="jsdoc-syntax">];
167 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indicatorpos </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">) {
168 </span><span class="jsdoc-var">indicator.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-required-indicator text-danger fa fa-lg fa-star right-indicator'</span><span class="jsdoc-syntax">;
169 </span><span class="jsdoc-var">label.cn </span><span class="jsdoc-syntax">= [
170 </span><span class="jsdoc-var">label_text</span><span class="jsdoc-syntax">,
171 </span><span class="jsdoc-var">indicator
172 </span><span class="jsdoc-syntax">];
175 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">) {
176 </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= {
177 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
178 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
179 </span><span class="jsdoc-var">container
180 </span><span class="jsdoc-syntax">]
183 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelWidth </span><span class="jsdoc-syntax">> 12){
184 </span><span class="jsdoc-var">label.style </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"width: " </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">;
186 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelWidth </span><span class="jsdoc-syntax">< 13 && </span><span class="jsdoc-var">this.labelmd </span><span class="jsdoc-syntax">== 0){
187 </span><span class="jsdoc-var">this.labelmd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.labelWidth</span><span class="jsdoc-syntax">;
189 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labellg </span><span class="jsdoc-syntax">> 0){
190 </span><span class="jsdoc-var">label.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-lg-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labellg</span><span class="jsdoc-syntax">;
191 </span><span class="jsdoc-var">input.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-lg-' </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labellg</span><span class="jsdoc-syntax">);
193 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelmd </span><span class="jsdoc-syntax">> 0){
194 </span><span class="jsdoc-var">label.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-md-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelmd</span><span class="jsdoc-syntax">;
195 </span><span class="jsdoc-var">container.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-md-' </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labelmd</span><span class="jsdoc-syntax">);
197 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelsm </span><span class="jsdoc-syntax">> 0){
198 </span><span class="jsdoc-var">label.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-sm-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelsm</span><span class="jsdoc-syntax">;
199 </span><span class="jsdoc-var">container.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-sm-' </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labelsm</span><span class="jsdoc-syntax">);
201 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelxs </span><span class="jsdoc-syntax">> 0){
202 </span><span class="jsdoc-var">label.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-xs-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelxs</span><span class="jsdoc-syntax">;
203 </span><span class="jsdoc-var">container.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-xs-' </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labelxs</span><span class="jsdoc-syntax">);
208 </span><span class="jsdoc-var">cfg.cn </span><span class="jsdoc-syntax">= [
209 </span><span class="jsdoc-var">label</span><span class="jsdoc-syntax">,
210 </span><span class="jsdoc-var">container
211 </span><span class="jsdoc-syntax">];
213 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">settings </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
215 [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'md'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'lg'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.map</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">){
216 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">settings</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">]) {
217 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">settings</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">];
221 </span><span class="jsdoc-var">this.store </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.Store</span><span class="jsdoc-syntax">({
222 </span><span class="jsdoc-var">proxy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.MemoryProxy</span><span class="jsdoc-syntax">({}),
223 </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.JsonReader</span><span class="jsdoc-syntax">({
224 </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">: [
226 </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'name'</span><span class="jsdoc-syntax">,
227 </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
228 </span><span class="jsdoc-syntax">},
230 </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'iso2'</span><span class="jsdoc-syntax">,
231 </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
232 </span><span class="jsdoc-syntax">},
234 </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'dialCode'</span><span class="jsdoc-syntax">,
235 </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
236 </span><span class="jsdoc-syntax">},
238 </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'priority'</span><span class="jsdoc-syntax">,
239 </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
240 </span><span class="jsdoc-syntax">},
242 </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'areaCodes'</span><span class="jsdoc-syntax">,
243 </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
244 </span><span class="jsdoc-syntax">}
249 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.preferedCountries</span><span class="jsdoc-syntax">) {
250 </span><span class="jsdoc-var">this.preferedCountries </span><span class="jsdoc-syntax">= [
251 </span><span class="jsdoc-string">'hk'</span><span class="jsdoc-syntax">,
252 </span><span class="jsdoc-string">'gb'</span><span class="jsdoc-syntax">,
253 </span><span class="jsdoc-string">'us'
254 </span><span class="jsdoc-syntax">];
257 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.preferedCountries.reverse</span><span class="jsdoc-syntax">();
259 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">) {
260 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">p.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
261 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">this.allCountries.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++) {
262 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allCountries</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.iso2 </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) {
263 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.allCountries</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">];
264 </span><span class="jsdoc-var">this.allCountries.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">,1);
265 </span><span class="jsdoc-var">this.allCountries.unshift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
271 </span><span class="jsdoc-var">this.store.proxy.data </span><span class="jsdoc-syntax">= {
272 </span><span class="jsdoc-var">success</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
273 </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.allCountries
274 </span><span class="jsdoc-syntax">};
276 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
279 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
281 </span><span class="jsdoc-var">this.createList</span><span class="jsdoc-syntax">();
282 </span><span class="jsdoc-var">Roo.bootstrap.form.PhoneInput.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
284 </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indicatorEl</span><span class="jsdoc-syntax">();
285 </span><span class="jsdoc-var">this.flag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.flagEl</span><span class="jsdoc-syntax">();
286 </span><span class="jsdoc-var">this.dialCodeHolder </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dialCodeHolderEl</span><span class="jsdoc-syntax">();
288 </span><span class="jsdoc-var">this.trigger </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div.flag-box'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
289 </span><span class="jsdoc-var">this.trigger.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
291 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
293 (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
294 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_this.listWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">_this.minListWidth</span><span class="jsdoc-syntax">);
295 </span><span class="jsdoc-var">_this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
296 })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(100);
298 </span><span class="jsdoc-var">this.list.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseover'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onViewOver</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
299 </span><span class="jsdoc-var">this.list.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousemove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onViewMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
300 </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"keyup"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onKeyUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
301 </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"keypress"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onKeyPress</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
303 </span><span class="jsdoc-var">this.tpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>'</span><span class="jsdoc-syntax">;
305 </span><span class="jsdoc-var">this.view </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.View</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.list</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tpl</span><span class="jsdoc-syntax">, {
306 </span><span class="jsdoc-var">singleSelect</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.store</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">selectedClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.selectedClass
307 </span><span class="jsdoc-syntax">});
309 </span><span class="jsdoc-var">this.view.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onViewClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
310 </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.defaultDialCode</span><span class="jsdoc-syntax">);
313 </span><span class="jsdoc-var">onTriggerClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
315 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'trigger click'</span><span class="jsdoc-syntax">);
316 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
317 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
320 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isExpanded</span><span class="jsdoc-syntax">()){
321 </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
322 </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
323 }</span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
324 </span><span class="jsdoc-var">this.store.load</span><span class="jsdoc-syntax">({});
325 </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
326 </span><span class="jsdoc-var">this.expand</span><span class="jsdoc-syntax">();
330 </span><span class="jsdoc-var">isExpanded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
332 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.list.isVisible</span><span class="jsdoc-syntax">();
335 </span><span class="jsdoc-var">collapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
337 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isExpanded</span><span class="jsdoc-syntax">()){
338 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
340 </span><span class="jsdoc-var">this.list.hide</span><span class="jsdoc-syntax">();
341 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
342 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousewheel'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
343 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
344 </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
347 </span><span class="jsdoc-var">expand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
349 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'expand'</span><span class="jsdoc-syntax">);
351 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isExpanded</span><span class="jsdoc-syntax">() || !</span><span class="jsdoc-var">this.hasFocus</span><span class="jsdoc-syntax">){
352 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
355 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.listWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.minListWidth</span><span class="jsdoc-syntax">);
356 </span><span class="jsdoc-var">this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
358 </span><span class="jsdoc-var">this.list.show</span><span class="jsdoc-syntax">();
359 </span><span class="jsdoc-var">this.restrictHeight</span><span class="jsdoc-syntax">();
361 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
362 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousewheel'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
364 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'expand'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
367 </span><span class="jsdoc-var">restrictHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
369 </span><span class="jsdoc-var">this.list.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.listAlign</span><span class="jsdoc-syntax">);
370 </span><span class="jsdoc-var">this.list.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.listAlign</span><span class="jsdoc-syntax">);
373 </span><span class="jsdoc-var">onViewOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)
375 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inKeyMode</span><span class="jsdoc-syntax">){
376 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
378 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view.findItemFromChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
380 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
381 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
382 </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
386 </span><span class="jsdoc-comment">// private
387 </span><span class="jsdoc-var">onViewClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">view</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">doFocus</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
389 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view.getSelectedIndexes</span><span class="jsdoc-syntax">()[0];
391 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.store.getAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
393 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">){
394 </span><span class="jsdoc-var">this.onSelect</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
396 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doFocus </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">this.blockFocus</span><span class="jsdoc-syntax">){
397 </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.focus</span><span class="jsdoc-syntax">();
401 </span><span class="jsdoc-var">onViewMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)
403 </span><span class="jsdoc-var">this.inKeyMode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
406 </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scrollIntoView</span><span class="jsdoc-syntax">)
408 </span><span class="jsdoc-var">this.selectedIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">;
409 </span><span class="jsdoc-var">this.view.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
410 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scrollIntoView </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
411 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view.getNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
412 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
413 </span><span class="jsdoc-var">this.list.scrollChildIntoView</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
418 </span><span class="jsdoc-var">createList </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
420 </span><span class="jsdoc-var">this.list </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">({
421 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
422 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'typeahead typeahead-long dropdown-menu tel-list'</span><span class="jsdoc-syntax">,
423 </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display:none'
424 </span><span class="jsdoc-syntax">});
426 </span><span class="jsdoc-var">this.list.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
429 </span><span class="jsdoc-var">collapseIf </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
431 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">in_combo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.within</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
432 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">in_list </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.within</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.list</span><span class="jsdoc-syntax">);
433 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">is_list </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.list.id</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
435 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">in_combo </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">in_list </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">is_list</span><span class="jsdoc-syntax">) {
436 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
438 </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
441 </span><span class="jsdoc-var">onSelect </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">record</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">)
443 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeselect'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">record</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
445 </span><span class="jsdoc-var">this.setFlagClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">record.data.iso2</span><span class="jsdoc-syntax">);
446 </span><span class="jsdoc-var">this.setDialCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">record.data.dialCode</span><span class="jsdoc-syntax">);
447 </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
448 </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
449 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'select'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">record</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
453 </span><span class="jsdoc-var">flagEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
455 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">flag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div.flag'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
456 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">flag</span><span class="jsdoc-syntax">){
457 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
459 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">flag</span><span class="jsdoc-syntax">;
462 </span><span class="jsdoc-var">dialCodeHolderEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
464 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'input.dial-code-holder'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
465 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">){
466 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
468 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
471 </span><span class="jsdoc-var">setDialCode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">)
473 </span><span class="jsdoc-var">this.dialCodeHolder.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'+'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
476 </span><span class="jsdoc-var">setFlagClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">)
478 </span><span class="jsdoc-var">this.flag.dom.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'flag '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
481 </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
483 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getValue</span><span class="jsdoc-syntax">();
484 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dialCodeHolder</span><span class="jsdoc-syntax">) {
485 </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dialCodeHolder.dom.value</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getValue</span><span class="jsdoc-syntax">();
487 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
490 </span><span class="jsdoc-var">setValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">)
492 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDialCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
494 </span><span class="jsdoc-comment">//invalid dial code
495 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">== 0 || !</span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">d.length </span><span class="jsdoc-syntax">== 0) {
496 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
497 </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
498 </span><span class="jsdoc-var">this.hiddenEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
500 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
503 </span><span class="jsdoc-comment">//valid dial code
504 </span><span class="jsdoc-var">this.setFlagClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dialCodeMapping</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.iso2</span><span class="jsdoc-syntax">);
505 </span><span class="jsdoc-var">this.setDialCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
506 </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'+'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
507 </span><span class="jsdoc-var">this.hiddenEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
509 </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
512 </span><span class="jsdoc-var">getDialCode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">)
514 </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
516 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">== 0) {
517 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.dialCodeHolder.dom.value</span><span class="jsdoc-syntax">;
520 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dialCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">;
521 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.charAt</span><span class="jsdoc-syntax">(0) != </span><span class="jsdoc-string">"+"</span><span class="jsdoc-syntax">) {
522 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
524 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">numericChars </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">;
525 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 1; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">v.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
526 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.charAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
527 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">)) {
528 </span><span class="jsdoc-var">numericChars </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
529 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dialCodeMapping</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">numericChars</span><span class="jsdoc-syntax">]) {
530 </span><span class="jsdoc-var">dialCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.substr</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
532 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">numericChars.length </span><span class="jsdoc-syntax">== 4) {
533 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
537 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dialCode</span><span class="jsdoc-syntax">;
540 </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
542 </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.defaultDialCode</span><span class="jsdoc-syntax">);
543 </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
546 </span><span class="jsdoc-var">hiddenEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
548 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'input.hidden-tel-input'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
551 </span><span class="jsdoc-comment">// after setting val
552 </span><span class="jsdoc-var">onKeyUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
553 </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">());
556 </span><span class="jsdoc-var">onKeyPress </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
557 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowed.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String.fromCharCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getCharCode</span><span class="jsdoc-syntax">())) === -1){
558 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
562 });</span></code></body></html>