Fix #5654 - roojspacker - get it working as a doc tool...
[roojs1] / docs / src / Roo_bootstrap_PhoneInput.js.html
@@ -1,4 +1,4 @@
-<html><head><title>../roojs1/Roo/bootstrap/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">/**
+<html><head><title>/home/alan/gitlive/roojs1/Roo/bootstrap/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">/**
 *    This script refer to:
 *    Title: International Telephone Input
 *    Author: Jack O'Connor
 };
 
 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.PhoneInput</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.TriggerField</span><span class="jsdoc-syntax">, {
-        
+
         </span><span class="jsdoc-var">listWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
-        
+
         </span><span class="jsdoc-var">selectedClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">,
-        
+
         </span><span class="jsdoc-var">invalidClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;has-warning&quot;</span><span class="jsdoc-syntax">,
-        
+
         </span><span class="jsdoc-var">validClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'has-success'</span><span class="jsdoc-syntax">,
-        
+
         </span><span class="jsdoc-var">allowed</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0123456789'</span><span class="jsdoc-syntax">,
-        
+
+        </span><span class="jsdoc-var">max_length</span><span class="jsdoc-syntax">: 15,
+
         </span><span class="jsdoc-comment">/**
          * @cfg {String} defaultDialCode The default dial code when initializing the input
          */
         </span><span class="jsdoc-var">defaultDialCode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'+852'</span><span class="jsdoc-syntax">,
-        
+
         </span><span class="jsdoc-comment">/**
          * @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
          */
         </span><span class="jsdoc-var">preferedCountries</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
-        
+
         </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.bootstrap.PhoneInputData</span><span class="jsdoc-syntax">();
             </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">();
             </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">();
-            
+
             </span><span class="jsdoc-var">this.allCountries </span><span class="jsdoc-syntax">= [];
             </span><span class="jsdoc-var">this.dialCodeMapping </span><span class="jsdoc-syntax">= [];
-            
+
             </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">&lt; </span><span class="jsdoc-var">data.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
               </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">];
               </span><span class="jsdoc-var">this.allCountries</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = {
                   </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
               </span><span class="jsdoc-syntax">};
             }
-            
+
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-group'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
             };
-            
+
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">input </span><span class="jsdoc-syntax">=  {
                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-comment">// type: 'number', -- do not use number - we get the flaky up/down arrows.
+                </span><span class="jsdoc-var">maxlength</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.max_length</span><span class="jsdoc-syntax">,
                 </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">,
                 </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'new-password'
             </span><span class="jsdoc-syntax">};
-            
+
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hiddenInput </span><span class="jsdoc-syntax">= {
                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden-tel-input'
             </span><span class="jsdoc-syntax">};
-            
+
             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-var">hiddenInput.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
             }
-            
+
             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-var">input.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
             }
-            
+
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">flag_container </span><span class="jsdoc-syntax">= {
                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'flag-box'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-syntax">}
                 ]
             };
-            
+
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= {
                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
                 </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">,
                     </span><span class="jsdoc-syntax">}
                 ]
             };
-            
+
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= {
                 </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">,
                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
                     </span><span class="jsdoc-var">box
                 </span><span class="jsdoc-syntax">]
             };
-            
+
             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fieldLabel.length</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">indicator </span><span class="jsdoc-syntax">= {
                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">tooltip</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'This field is required'
                 </span><span class="jsdoc-syntax">};
-                
+
                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">label </span><span class="jsdoc-syntax">= {
                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'label'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-string">'for'</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'control-label'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
                 };
-                
+
                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">label_text </span><span class="jsdoc-syntax">= {
                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.fieldLabel
                 </span><span class="jsdoc-syntax">};
-                
+
                 </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">;
                 </span><span class="jsdoc-var">label.cn </span><span class="jsdoc-syntax">= [
                     </span><span class="jsdoc-var">indicator</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">label_text
                 </span><span class="jsdoc-syntax">];
-                
+
                 </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">) {
                     </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">;
                     </span><span class="jsdoc-var">label.cn </span><span class="jsdoc-syntax">= [
                         </span><span class="jsdoc-var">indicator
                     </span><span class="jsdoc-syntax">];
                 }
-                
+
                 </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">) {
                     </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= {
                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
                             </span><span class="jsdoc-var">container
                         </span><span class="jsdoc-syntax">]
                     };
-                    
+
                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelWidth </span><span class="jsdoc-syntax">&gt; 12){
                         </span><span class="jsdoc-var">label.style </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;width: &quot; </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">;
                     }
                     }
                 }
             }
-            
+
             </span><span class="jsdoc-var">cfg.cn </span><span class="jsdoc-syntax">= [
                 </span><span class="jsdoc-var">label</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">container
             </span><span class="jsdoc-syntax">];
-            
+
             </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">;
-            
+
             [</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">){
                 </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">]) {
                     </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">];
                 }
             });
-            
+
             </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">({
                 </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">({}),
                 </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">({
                     ]
                 })
             });
-            
+
             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.preferedCountries</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-var">this.preferedCountries </span><span class="jsdoc-syntax">= [
                     </span><span class="jsdoc-string">'hk'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-string">'us'
                 </span><span class="jsdoc-syntax">];
             }
-            
+
             </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">();
-            
+
             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">) {
                 </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">&lt; </span><span class="jsdoc-var">p.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
                     </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">&lt; </span><span class="jsdoc-var">this.allCountries.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++) {
                             </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);
                             </span><span class="jsdoc-var">this.allCountries.unshift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
                         }
-                    } 
+                    }
                 }
             }
-            
+
             </span><span class="jsdoc-var">this.store.proxy.data </span><span class="jsdoc-syntax">= {
                 </span><span class="jsdoc-var">success</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.allCountries
             </span><span class="jsdoc-syntax">};
-            
+
             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
         },
-        
+
         </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </span><span class="jsdoc-var">this.createList</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-var">Roo.bootstrap.PhoneInput.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
-            
+
             </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indicatorEl</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-var">this.flag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.flagEl</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-var">this.dialCodeHolder </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dialCodeHolderEl</span><span class="jsdoc-syntax">();
-            
+
             </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">();
             </span><span class="jsdoc-var">this.trigger.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</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">});
-            
+
             </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">;
-            
+
             (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
                 </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">);
                 </span><span class="jsdoc-var">_this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
             })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(100);
-            
+
             </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">);
             </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">);
             </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">&quot;keyup&quot;</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">);
-            
+            </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">&quot;keypress&quot;</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">);
+
             </span><span class="jsdoc-var">this.tpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;div class=&quot;flag {iso2}&quot;&gt;&lt;/div&gt;{name} &lt;span class=&quot;dial-code&quot;&gt;+{dialCode}&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;'</span><span class="jsdoc-syntax">;
 
             </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">, {
                 </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
             </span><span class="jsdoc-syntax">});
-            
+
             </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">);
             </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.defaultDialCode</span><span class="jsdoc-syntax">);
         },
-        
+
         </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">)
         {
             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'trigger click'</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
-            
+
             </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.collapse</span><span class="jsdoc-syntax">();
                 </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
                 </span><span class="jsdoc-var">this.expand</span><span class="jsdoc-syntax">();
             }
         },
-        
+
         </span><span class="jsdoc-var">isExpanded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.list.isVisible</span><span class="jsdoc-syntax">();
         },
-        
+
         </span><span class="jsdoc-var">collapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </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.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">);
             </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
         },
-        
+
         </span><span class="jsdoc-var">expand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'expand'</span><span class="jsdoc-syntax">);
             </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">){
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
-            
+
             </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">);
             </span><span class="jsdoc-var">this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
-            
+
             </span><span class="jsdoc-var">this.list.show</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-var">this.restrictHeight</span><span class="jsdoc-syntax">();
-            
+
             </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">);
             </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">);
-            
+
             </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">);
         },
-        
+
         </span><span class="jsdoc-var">restrictHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </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">);
             </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">);
         },
-        
+
         </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">)
         {
             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inKeyMode</span><span class="jsdoc-syntax">){
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
             </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">);
-            
+
             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
                 </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">);
                 </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">);
         </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">)
         {
             </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];
-            
+
             </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">);
-            
+
             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">){
                 </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">);
             }
                 </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.focus</span><span class="jsdoc-syntax">();
             }
         },
-        
+
         </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">)
         {
             </span><span class="jsdoc-var">this.inKeyMode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
         },
-        
+
         </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">)
         {
             </span><span class="jsdoc-var">this.selectedIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">;
                 }
             }
         },
-        
+
         </span><span class="jsdoc-var">createList </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </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">({
                 </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">,
                 </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display:none'
             </span><span class="jsdoc-syntax">});
-            </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">;;
+
+            </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">;
         },
-        
+
         </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">)
         {
             </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">);
             </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">);
             </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">;
-            
+
             </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">) {
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
             </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
         },
-        
+
         </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">)
         {
             </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">){
-                
+
                 </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">);
                 </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">);
                 </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
                 </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">);
             }
         },
-        
+
         </span><span class="jsdoc-var">flagEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </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">();
             }
             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">flag</span><span class="jsdoc-syntax">;
         },
-        
+
         </span><span class="jsdoc-var">dialCodeHolderEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </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">();
             }
             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
         },
-        
+
         </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">)
         {
             </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">;
         },
-        
+
         </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">)
         {
             </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">;
         },
-        
+
         </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </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">();
             }
             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
         },
-        
+
         </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">)
         {
             </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">);
-            
+
             </span><span class="jsdoc-comment">//invalid dial code
             </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) {
                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
                 }
                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
             }
-            
+
             </span><span class="jsdoc-comment">//valid dial code
             </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">);
             </span><span class="jsdoc-var">this.setDialCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
             </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">);
             </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">();
-            
+
             </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
         },
-        
-        </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">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">)
+
+        </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">)
         {
+            </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">;
+
             </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-keyword">return </span><span class="jsdoc-var">this.dialCodeHolder.dom.value</span><span class="jsdoc-syntax">;
             }
-            
+
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dialCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
             </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">&quot;+&quot;</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
             }
             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dialCode</span><span class="jsdoc-syntax">;
         },
-        
+
         </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.defaultDialCode</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
         },
-        
+
         </span><span class="jsdoc-var">hiddenEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
         {
             </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">();
         },
-        
+
+        </span><span class="jsdoc-comment">// after setting val
         </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">){
-            
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getCharCode</span><span class="jsdoc-syntax">();
-            
-            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
-                    (</span><span class="jsdoc-var">String.fromCharCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'.' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">String.fromCharCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'-'</span><span class="jsdoc-syntax">) &amp;&amp;
-                    </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">c</span><span class="jsdoc-syntax">)) === -1
-            ){
-                </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
-            }
-            
-            </span><span class="jsdoc-comment">// if(!Roo.isIE &amp;&amp; (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
-            //     return;
-            // }
-            </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">c</span><span class="jsdoc-syntax">)) === -1){
+            </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">());
+        },
+
+        </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">){
+            </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){
                 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
             }
-            
-            </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">());
         }
-        
+
 });</span></code></body></html>
\ No newline at end of file