X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=a2606902e0689b667ff377c2cf12560858416348;hb=dbe9e326ba1541010b127a8ea347750c0602141e;hp=57832ac90c11683a8d5395767fddc493df068a11;hpb=47eb385386dbd396e5cb7f78f880eb1e94c332e0;p=roojs1

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 57832ac90c..a2606902e0 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -413,7 +413,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
             return;
         }
          
-        this.getVisibilityEl().removeClass('hidden');
+        this.getVisibilityEl().removeClass(['hidden','d-none']);
         
         this.fireEvent('show', this);
         
@@ -428,7 +428,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
             return;
         }
         
-        this.getVisibilityEl().addClass('hidden');
+        this.getVisibilityEl().addClass(['hidden','d-none']);
         
         this.fireEvent('hide', this);
         
@@ -2410,7 +2410,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
             this.hide();
         } else {
             Roo.log('show');
-            this.show(this.triggerEl, false, false);
+            this.show(this.triggerEl, '?', false);
         }
         
         if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
@@ -2768,7 +2768,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
                 var btn = Roo.factory(b);
 
-                btn.render(this.el.select('.modal-footer div').first());
+                btn.render(this.getButtonContainer());
 
             },this);
         }
@@ -2810,7 +2810,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         if(this.specificTitle){
             title = this.title;
 
-        };
+        }
 
         var header = [];
         if (this.allow_close && Roo.bootstrap.version == 3) {
@@ -2908,6 +2908,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
 
     },
+  
 
     resize : function()
     {
@@ -2917,9 +2918,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         );
         
         if (this.fitwindow) {
+            
+           
             this.setSize(
                 this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
-                this.height || Roo.lib.Dom.getViewportHeight(true) - 60
+                this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
             );
             return;
         }
@@ -2980,7 +2983,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         Roo.get(document.body).addClass('modal-open');
  
         if(this.animate){  // element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
-            var _this = this;
+            
             (function(){
                 this.el.addClass('show');
                 this.el.addClass('in');
@@ -3072,7 +3075,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         var btn = Roo.factory(b);
 
-        btn.render(this.el.select('.modal-footer div').first());
+        btn.render(this.getButtonContainer());
 
         return btn;
 
@@ -3082,22 +3085,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     {
         //this.el.select('.modal-footer').()
     },
-    diff : false,
 
     resizeTo: function(w,h)
     {
-        // skip.. ?? why??
-
         this.dialogEl.setWidth(w);
-        if (this.diff === false) {
-            this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight();
-        }
-
-        this.bodyEl.setHeight(h - this.diff);
+        
+        var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30  
 
+        this.bodyEl.setHeight(h - diff);
+        
         this.fireEvent('resize', this);
-
     },
+    
     setContentSize  : function(w, h)
     {
 
@@ -3324,10 +3323,11 @@ Roo.bootstrap.MessageBox = function(){
             buttons["cancel"].hide();
             buttons["yes"].hide();
             buttons["no"].hide();
-            //dlg.footer.dom.style.display = 'none';
+            dlg.footerEl.hide();
+            
             return width;
         }
-        dlg.footerEl.dom.style.display = '';
+        dlg.footerEl.show();
         for(var k in buttons){
             if(typeof buttons[k] != "function"){
                 if(b[k]){
@@ -3604,6 +3604,9 @@ Roo.Msg.show({
                 textareaEl.hide();
             }
             progressEl.setDisplayed(opt.progress === true);
+            if (opt.progress) {
+                d.animate = false; // do not animate progress, as it may not have finished animating before we close it..
+            }
             this.updateProgress(0);
             activeTextEl.dom.value = opt.value || "";
             if(opt.prompt){
@@ -4016,14 +4019,23 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar,  {
         
         var cfg = {
             tag : this.tag || 'div',
-            cls : 'navbar navbar-expand-lg'
+            cls : 'navbar navbar-expand-lg roo-navbar-simple'
         };
 	if (['light','white'].indexOf(this.weight) > -1) {
 	    cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
 	}
 	cfg.cls += ' bg-' + this.weight;
 	
-	  
+	if (this.inverse) {
+            cfg.cls += ' navbar-inverse';
+            
+        }
+	
+	// i'm not actually sure these are really used - normally we add a navGroup to a navbar
+	
+	//if (Roo.bootstrap.version == 4) {
+	//    return cfg;
+	//}
 	
         cfg.cn = [
             {
@@ -4034,7 +4046,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar,  {
         
          
         this.type = this.type || 'nav';
-        if (['tabs','pills'].indexOf(this.type)!==-1) {
+        if (['tabs','pills'].indexOf(this.type) != -1) {
             cfg.cn[0].cls += ' nav-' + this.type
         
         
@@ -4048,7 +4060,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar,  {
         
         
         
-        if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
+        if (['stacked','justified'].indexOf(this.arrangement) != -1) {
             cfg.cn[0].cls += ' nav-' + this.arrangement;
         }
         
@@ -4057,10 +4069,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar,  {
             cfg.cn[0].cls += ' navbar-right';
         }
         
-        if (this.inverse) {
-            cfg.cls += ' navbar-inverse';
-            
-        }
+        
         
         
         return cfg;
@@ -4178,6 +4187,12 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
         
         cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default';
         
+        if (['light','white'].indexOf(this.weight) > -1) {
+	    cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
+	}
+	cfg.cls += ' bg-' + this.weight;
+        
+        
         if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
             cfg.cls += ' navbar-' + this.position + ' ' + this.position ;
             
@@ -4354,15 +4369,22 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
             tag : 'ul',
             cls: 'nav' 
         };
-        
-        if (['tabs','pills'].indexOf(this.type)!==-1) {
-            cfg.cls += ' nav-' + this.type
-        } else {
-            if (this.type!=='nav') {
-                Roo.log('nav type must be nav/tabs/pills')
-            }
-            cfg.cls += ' navbar-nav'
-        }
+        if (Roo.bootstrap.version == 4) {
+	    if (['tabs','pills'].indexOf(this.type) != -1) {
+		cfg.cls += ' nav-' + this.type; 
+	    } else {
+		cfg.cls += ' navbar-nav';
+	    }
+	} else {
+	    if (['tabs','pills'].indexOf(this.type) != -1) {
+		cfg.cls += ' nav-' + this.type
+	    } else {
+		if (this.type !== 'nav') {
+		    Roo.log('nav type must be nav/tabs/pills')
+		}
+		cfg.cls += ' navbar-nav'
+	    }
+	}
         
         if (this.parent() && this.parent().sidebar) {
             cfg = {
@@ -4376,7 +4398,7 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
         if (this.form === true) {
             cfg = {
                 tag: 'form',
-                cls: 'navbar-form'
+                cls: 'navbar-form form-inline'
             };
             
             if (this.align === 'right') {
@@ -4463,7 +4485,10 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
     */
     addItem : function(cfg)
     {
-        var cn = new Roo.bootstrap.NavItem(cfg);
+        if (this.form && Roo.bootstrap.version == 4) {
+	    cfg.tag = 'div';
+	}
+	var cn = new Roo.bootstrap.NavItem(cfg);
         this.register(cn);
         cn.parentId = this.id;
         cn.onRender(this.el, null);
@@ -4589,6 +4614,8 @@ Roo.apply(Roo.bootstrap.NavGroup, {
  * @extends Roo.bootstrap.Component
  * Bootstrap Navbar.NavItem class
  * @cfg {String} href  link to
+ * @cfg {String} button_weight (default | primary | secondary | success | info | warning | danger | link ) default none
+
  * @cfg {String} html content of button
  * @cfg {String} badge text inside badge
  * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
@@ -4650,16 +4677,20 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     preventDefault : false,
     tabId : false,
     tagtype : 'a',
+    tag: 'li',
     disabled : false,
     animateRef : false,
     was_active : false,
+    button_weight : '',
+    button_outline : false,
+    
+    navLink: false,
     
     getAutoCreate : function(){
          
         var cfg = {
-            tag: 'li',
+            tag: this.tag,
             cls: 'nav-item'
-            
         };
         
         if (this.active) {
@@ -4668,6 +4699,27 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         if (this.disabled) {
             cfg.cls += ' disabled';
         }
+	
+	// BS4 only?
+	if (this.button_weight.length) {
+	    cfg.tag = this.href ? 'a' : 'button';
+	    cfg.html = this.html || '';
+	    cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight;
+	    if (this.href) {
+		cfg.href = this.href;
+	    }
+	    if (this.fa) {
+                cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + this.html + '</span>';
+            }
+	    
+	    // menu .. should add dropdown-menu class - so no need for carat..
+	    
+	    if (this.badge !== '') {
+                 
+                cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
+            }
+	    return cfg;
+	}
         
         if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
             cfg.cn = [
@@ -4681,10 +4733,10 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
 		cfg.cn[0].cls = 'nav-link';
 	    }
             if (this.icon) {
-                cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
+                cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>';
             }
 	    if (this.fa) {
-                cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>'
+                cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>';
             }
             if(this.glyphicon) {
                 cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> '  + cfg.cn[0].html;
@@ -4706,6 +4758,19 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         
         return cfg;
     },
+    onRender : function(ct, position)
+    {
+       // Roo.log("Call onRender: " + this.xtype);
+        if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
+	    this.tag = 'div';
+	}
+	
+        var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
+	this.navLink = this.el.select('.nav-link',true).first();
+	return ret;
+    },
+      
+    
     initEvents: function() 
     {
         if (typeof (this.menu) != 'undefined') {
@@ -4807,8 +4872,14 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         
         if (!state ) {
             this.el.removeClass('active');
+	    this.navLink ? this.navLink.removeClass('active') : false;
         } else if (!this.el.hasClass('active')) {
+	    
             this.el.addClass('active');
+	    if (Roo.bootstrap.version == 4 && this.navLink ) {
+		this.navLink.addClass('active');
+	    }
+	    
         }
         if (fire) {
             this.fireEvent('changed', this, state);
@@ -8961,12 +9032,12 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
     
        
     /**
-     * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
+     * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid
      */
     invalidClass : "has-warning",
     
     /**
-     * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid")
+     * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid
      */
     validClass : "has-success",
     
@@ -9379,9 +9450,10 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
            cfg.cls += ' navbar-form';
         }
         
-        if (this.parentType === 'NavGroup') {
-           cfg.cls += ' navbar-form';
-           cfg.tag = 'li';
+        if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) {
+            // on BS4 we do this only if not form 
+            cfg.cls += ' navbar-form';
+            cfg.tag = 'li';
         }
         
         return cfg;
@@ -9717,8 +9789,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             return;
         }
         
-     
-        this.el.removeClass(this.invalidClass);
+        
+        this.el.removeClass([this.invalidClass, 'is-invalid']);
         
         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
             
@@ -9748,7 +9820,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         }
         
         this.el.removeClass([this.invalidClass, this.validClass]);
-        
+        this.inputEl().removeClass(['is-valid', 'is-invalid']);
+
         var feedback = this.el.select('.form-control-feedback', true).first();
             
         if(feedback){
@@ -9767,9 +9840,12 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         if(this.allowBlank && !this.getRawValue().length){
             return;
         }
-        
-        this.el.addClass(this.validClass);
-        
+        if (Roo.bootstrap.version == 3) {
+            this.el.addClass(this.validClass);
+        } else {
+            this.inputEl().addClass('is-valid');
+        }
+
         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
             
             var feedback = this.el.select('.form-control-feedback', true).first();
@@ -9795,11 +9871,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         }
         
         this.el.removeClass([this.invalidClass, this.validClass]);
+        this.inputEl().removeClass(['is-valid', 'is-invalid']);
         
         var feedback = this.el.select('.form-control-feedback', true).first();
             
         if(feedback){
-            this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
+            this.el.select('.form-control-feedback', true).first().removeClass(
+                    [this.invalidFeedbackClass, this.validFeedbackClass]);
         }
 
         if(this.disabled){
@@ -9814,8 +9892,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
             this.indicator.addClass('visible');
         }
+        if (Roo.bootstrap.version == 3) {
+            this.el.addClass(this.invalidClass);
+        } else {
+            this.inputEl().addClass('is-invalid');
+        }
+        
         
-        this.el.addClass(this.invalidClass);
         
         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
             
@@ -10162,9 +10245,9 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
         if(label && icon){
             icon.remove();
         }
-        
-        this.el.removeClass(this.invalidClass);
-        
+        this.el.removeClass( this.validClass);
+        this.inputEl().removeClass('is-invalid');
+         
         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
             
             var feedback = this.el.select('.form-control-feedback', true).first();
@@ -10188,6 +10271,7 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
         }
         
         this.el.removeClass([this.invalidClass, this.validClass]);
+        this.inputEl().removeClass(['is-valid', 'is-invalid']);
         
         var feedback = this.el.select('.form-control-feedback', true).first();
             
@@ -10205,8 +10289,12 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
         if(label && icon){
             icon.remove();
         }
+        if (Roo.bootstrap.version == 3) {
+            this.el.addClass(this.validClass);
+        } else {
+            this.inputEl().addClass('is-valid');
+        }
         
-        this.el.addClass(this.validClass);
         
         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
             
@@ -10233,6 +10321,7 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
         }
         
         this.el.removeClass([this.invalidClass, this.validClass]);
+        this.inputEl().removeClass(['is-valid', 'is-invalid']);
         
         var feedback = this.el.select('.form-control-feedback', true).first();
             
@@ -10255,9 +10344,14 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
                 style : 'margin-right:5px;'
             }, label, true);
         }
-
-        this.el.addClass(this.invalidClass);
         
+        if (Roo.bootstrap.version == 3) {
+            this.el.addClass(this.invalidClass);
+        } else {
+            this.inputEl().addClass('is-invalid');
+        }
+        
+        // fixme ... this may be depricated need to test..
         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
             
             var feedback = this.el.select('.form-control-feedback', true).first();
@@ -13233,12 +13327,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     multiple : false,
     
     /**
-     * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
+     * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now
      */
     invalidClass : "has-warning",
     
     /**
-     * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid")
+     * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now
      */
     validClass : "has-success",
     
@@ -18264,7 +18358,7 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
     {
         if(this.transition || typeof(pan) == 'undefined'){
             Roo.log("waiting for the transitionend");
-            return;
+            return false;
         }
         
         if (typeof(pan) == 'number') {
@@ -18296,22 +18390,28 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
         
         if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
             
+            //class="carousel-item carousel-item-next carousel-item-left"
+            
             this.transition = true;
             var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur)  ? 'next' : 'prev';
             var lr = dir == 'next' ? 'left' : 'right';
             pan.el.addClass(dir); // or prev
+            pan.el.addClass('carousel-item-' + dir); // or prev
             pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
             cur.el.addClass(lr); // or right
             pan.el.addClass(lr);
+            cur.el.addClass('carousel-item-' +lr); // or right
+            pan.el.addClass('carousel-item-' +lr);
+            
             
             var _this = this;
             cur.el.on('transitionend', function() {
                 Roo.log("trans end?");
                 
-                pan.el.removeClass([lr,dir]);
+                pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
                 pan.setActive(true);
                 
-                cur.el.removeClass([lr]);
+                cur.el.removeClass([lr, 'carousel-item-' + lr]);
                 cur.setActive(false);
                 
                 _this.transition = false;
@@ -18503,10 +18603,12 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
     href : '',
     
     getAutoCreate : function(){
-        var cfg = {
+        
+	
+	var cfg = {
             tag: 'div',
             // item is needed for carousel - not sure if it has any effect otherwise
-            cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
+            cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
             html: this.html || ''
         };
         
@@ -18518,6 +18620,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
             cfg.tabId = this.tabId;
         }
         
+	
         
         return cfg;
     },
@@ -21163,16 +21266,28 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
 
         if(this.inputType == 'radio'){
             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
-                e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]);
-                e.findParent('.form-group', false, true).addClass(_this.validClass);
+                var fg = e.findParent('.form-group', false, true);
+                if (Roo.bootstrap.version == 3) {
+                    fg.removeClass([_this.invalidClass, _this.validClass]);
+                    fg.addClass(_this.validClass);
+                } else {
+                    fg.removeClass(['is-valid', 'is-invalid']);
+                    fg.addClass('is-valid');
+                }
             });
             
             return;
         }
 
         if(!this.groupId){
-            this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
-            this.el.findParent('.form-group', false, true).addClass(this.validClass);
+            var fg = this.el.findParent('.form-group', false, true);
+            if (Roo.bootstrap.version == 3) {
+                fg.removeClass([this.invalidClass, this.validClass]);
+                fg.addClass(this.validClass);
+            } else {
+                fg.removeClass(['is-valid', 'is-invalid']);
+                fg.addClass('is-valid');
+            }
             return;
         }
         
@@ -21183,8 +21298,14 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         }
         
         for(var i in group){
-            group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
-            group[i].el.findParent('.form-group', false, true).addClass(this.validClass);
+            var fg = group[i].el.findParent('.form-group', false, true);
+            if (Roo.bootstrap.version == 3) {
+                fg.removeClass([this.invalidClass, this.validClass]);
+                fg.addClass(this.validClass);
+            } else {
+                fg.removeClass(['is-valid', 'is-invalid']);
+                fg.addClass('is-valid');
+            }
         }
     },
     
@@ -21213,17 +21334,30 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         }
             
         if(this.inputType == 'radio'){
+            
             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
-                e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]);
-                e.findParent('.form-group', false, true).addClass(_this.invalidClass);
+                var fg = e.findParent('.form-group', false, true);
+                if (Roo.bootstrap.version == 3) {
+                    fg.removeClass([_this.invalidClass, _this.validClass]);
+                    fg.addClass(_this.invalidClass);
+                } else {
+                    fg.removeClass(['is-invalid', 'is-valid']);
+                    fg.addClass('is-invalid');
+                }
             });
             
             return;
         }
         
         if(!this.groupId){
-            this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
-            this.el.findParent('.form-group', false, true).addClass(this.invalidClass);
+            var fg = this.el.findParent('.form-group', false, true);
+            if (Roo.bootstrap.version == 3) {
+                fg.removeClass([_this.invalidClass, _this.validClass]);
+                fg.addClass(_this.invalidClass);
+            } else {
+                fg.removeClass(['is-invalid', 'is-valid']);
+                fg.addClass('is-invalid');
+            }
             return;
         }
         
@@ -21234,8 +21368,14 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         }
         
         for(var i in group){
-            group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
-            group[i].el.findParent('.form-group', false, true).addClass(this.invalidClass);
+            var fg = group[i].el.findParent('.form-group', false, true);
+            if (Roo.bootstrap.version == 3) {
+                fg.removeClass([_this.invalidClass, _this.validClass]);
+                fg.addClass(_this.invalidClass);
+            } else {
+                fg.removeClass(['is-invalid', 'is-valid']);
+                fg.addClass('is-invalid');
+            }
         }
         
     },
@@ -21249,8 +21389,8 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
         
         if (label && label.iconEl) {
-            label.iconEl.removeClass(label.validClass);
-            label.iconEl.removeClass(label.invalidClass);
+            label.iconEl.removeClass([ label.validClass, label.invalidClass ]);
+            label.iconEl.removeClass(['is-invalid', 'is-valid']);
         }
     },
     
@@ -23879,9 +24019,7 @@ Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea,  {
     /**
      * @cfg {String} inputType @hide
      */
-    /**
-     * @cfg {String} invalidClass @hide
-     */
+     
     /**
      * @cfg {String} invalidText @hide
      */
@@ -30303,8 +30441,8 @@ Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component,  {
  * @cfg {String} cls class of the element
  * @cfg {String} target label target 
  * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
- * @cfg {String} invalidClass default "text-warning"
- * @cfg {String} validClass default "text-success"
+ * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid
+ * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
  * @cfg {String} iconTooltip default "This field is required"
  * @cfg {String} indicatorpos (left|right) default left
  * 
@@ -30426,10 +30564,14 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {
             this.indicator.removeClass('visible');
             this.indicator.addClass('invisible');
         }
+        if (Roo.bootstrap.version == 3) {
+	    this.el.removeClass(this.invalidClass);
+	    this.el.addClass(this.validClass);
+	} else {
+	    this.el.removeClass('is-invalid');
+            this.el.addClass('is-valid');
+	}
         
-        this.el.removeClass(this.invalidClass);
-        
-        this.el.addClass(this.validClass);
         
         this.fireEvent('valid', this);
     },
@@ -30444,10 +30586,14 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {
             this.indicator.removeClass('invisible');
             this.indicator.addClass('visible');
         }
+          if (Roo.bootstrap.version == 3) {
+	    this.el.removeClass(this.validClass);
+	    this.el.addClass(this.invalidClass);
+	} else {
+	    this.el.removeClass('is-valid');
+            this.el.addClass('is-invalid');
+	}
         
-        this.el.removeClass(this.validClass);
-        
-        this.el.addClass(this.invalidClass);
         
         this.fireEvent('invalid', this, msg);
     }
@@ -34019,21 +34165,23 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input,  {
                 }
             ]
         };
-        
-        if(this.indicatorpos == 'left'){
-            label.cn.unshift({
-                tag : 'i',
-                cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
-                tooltip : 'This field is required'
-            });
-        } else {
-            label.cn.push({
-                tag : 'i',
-                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                tooltip : 'This field is required'
-            });
+        if (Roo.bootstrap.version == 3) {
+            
+            
+            if(this.indicatorpos == 'left'){
+                label.cn.unshift({
+                    tag : 'i',
+                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+                    tooltip : 'This field is required'
+                });
+            } else {
+                label.cn.push({
+                    tag : 'i',
+                    cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                    tooltip : 'This field is required'
+                });
+            }
         }
-        
         var items = {
             tag : 'div',
             cls : 'roo-radio-set-items'
@@ -34185,14 +34333,19 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input,  {
     
     markValid : function()
     {
-        if(this.labelEl.isVisible(true)){
+        if(this.labelEl.isVisible(true) && this.indicatorEl()){
             this.indicatorEl().removeClass('visible');
             this.indicatorEl().addClass('invisible');
         }
         
-        this.el.removeClass([this.invalidClass, this.validClass]);
-        this.el.addClass(this.validClass);
         
+        if (Roo.bootstrap.version == 3) {
+            this.el.removeClass([this.invalidClass, this.validClass]);
+            this.el.addClass(this.validClass);
+        } else {
+            this.el.removeClass(['is-invalid','is-valid']);
+            this.el.addClass(['is-valid']);
+        }
         this.fireEvent('valid', this);
     },
     
@@ -34202,13 +34355,17 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input,  {
             return;
         }
         
-        if(this.labelEl.isVisible(true)){
+        if(this.labelEl.isVisible(true) && this.indicatorEl()){
             this.indicatorEl().removeClass('invisible');
             this.indicatorEl().addClass('visible');
         }
-        
-        this.el.removeClass([this.invalidClass, this.validClass]);
-        this.el.addClass(this.invalidClass);
+        if (Roo.bootstrap.version == 3) {
+            this.el.removeClass([this.invalidClass, this.validClass]);
+            this.el.addClass(this.invalidClass);
+        } else {
+            this.el.removeClass(['is-invalid','is-valid']);
+            this.el.addClass(['is-invalid']);
+        }
         
         this.fireEvent('invalid', this, msg);
         
@@ -34964,6 +35121,9 @@ Roo.bootstrap.layout.Border = function(config){
 Roo.bootstrap.layout.Border.regions =  ["north","south","east","west","center"];
 
 Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
+    
+    parent : false, // this might point to a 'nest' or a ???
+    
     /**
      * Creates and adds a new region if it doesn't already exist.
      * @param {String} target The target region key (north, south, east, west or center).
@@ -35218,13 +35378,18 @@ layout.addxtype({
             delete cfg.items;
         }
         var nb = false;
+	
+	if ( region == 'center') {
+	    Roo.log("Center: " + cfg.title);
+	}
+	
         
         switch(cfg.xtype) 
         {
             case 'Content':  // ContentPanel (el, cfg)
             case 'Scroll':  // ContentPanel (el, cfg)
             case 'View': 
-                cfg.autoCreate = true;
+                cfg.autoCreate = cfg.autoCreate || true;
                 ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
                 //} else {
                 //    var el = this.el.createChild();
@@ -35795,6 +35960,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
 
     position: '', // set by wrapper (eg. north/south etc..)
     unrendered_panels : null,  // unrendered panels.
+    
+    tabPosition : false,
+    
+    mgr: false, // points to 'Border'
+    
+    
     createBody : function(){
         /** This region's body element 
         * @type Roo.Element */
@@ -35816,15 +35987,15 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
         /** This region's title element 
         * @type Roo.Element */
     
-        this.titleEl = dh.append(this.el.dom,
-            {
-                    tag: "div",
-                    unselectable: "on",
-                    cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
-                    children:[
-                        {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
-                        {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
-                    ]}, true);
+        this.titleEl = dh.append(this.el.dom,  {
+                tag: "div",
+                unselectable: "on",
+                cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
+                children:[
+                    {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
+                    {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
+                ]
+            }, true);
         
         this.titleEl.enableDisplayMode();
         /** This region's title text element 
@@ -35929,7 +36100,7 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
         
         
-        this.bottomTabs = c.tabPosition != "top";
+        this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top";
         
         this.autoScroll = c.autoScroll || false;
         
@@ -36168,11 +36339,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
         //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render?
         
         var ts = new Roo.bootstrap.panel.Tabs({
-                el: this.bodyEl.dom,
-                tabPosition: this.bottomTabs ? 'bottom' : 'top',
-                disableTooltips: this.config.disableTabTips,
-                toolbar : this.config.toolbar
-            });
+            el: this.bodyEl.dom,
+            region : this,
+            tabPosition: this.tabPosition ? this.tabPosition  : 'top',
+            disableTooltips: this.config.disableTabTips,
+            toolbar : this.config.toolbar
+        });
         
         if(this.config.hideTabs){
             ts.stripWrap.setDisplayed(false);
@@ -36863,6 +37035,7 @@ Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, {
 
 
 
+
 Roo.bootstrap.layout.North = function(config)
 {
     config.region = 'north';
@@ -37055,8 +37228,7 @@ Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, {
         }
         Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
     }
-});
-Roo.namespace("Roo.bootstrap.panel");/*
+});Roo.namespace("Roo.bootstrap.panel");/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -37757,6 +37929,7 @@ Roo.bootstrap.panel.Nest = function(config)
     config.layout.monitorWindowResize = false; // turn off autosizing
     this.layout = config.layout;
     this.layout.getEl().addClass("roo-layout-nested-layout");
+    this.layout.parent = this;
     
     
     
@@ -37855,7 +38028,7 @@ panel.addxtype({
         return this.layout.addxtype(cfg);
     
     }
-});        /*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -37919,15 +38092,48 @@ Roo.bootstrap.panel.Tabs = function(config){
     }
     
     if(this.tabPosition == "bottom"){
+        // if tabs are at the bottom = create the body first.
         this.bodyEl = Roo.get(this.createBody(this.el.dom));
         this.el.addClass("roo-tabs-bottom");
     }
-    this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
-    this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
-    this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+    // next create the tabs holders
+    
+    if (this.tabPosition == "west"){
+        
+        var reg = this.region; // fake it..
+        while (reg) {
+            if (!reg.mgr.parent) {
+                break;
+            }
+            reg = reg.mgr.parent.region;
+        }
+        Roo.log("got nest?");
+        Roo.log(reg);
+        if (reg.mgr.getRegion('west')) {
+            var ctrdom = reg.mgr.getRegion('west').bodyEl.dom;
+            this.stripWrap = Roo.get(this.createStrip(ctrdom ), true);
+            this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+            this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
+            this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+        
+            
+        }
+        
+        
+    } else {
+     
+        this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
+        this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+        this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
+        this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+    }
+    
+    
     if(Roo.isIE){
         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
     }
+    
+    // finally - if tabs are at the top, then create the body last..
     if(this.tabPosition != "bottom"){
         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
          * @type Roo.Element
@@ -38018,7 +38224,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     /*
      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
      */
-    toolbar : false,
+    toolbar : false,  // set by caller..
+    
+    region : false, /// set by caller
+    
+    disableTooltips : true, // not used yet...
 
     /**
      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
@@ -38083,9 +38293,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
      * Adds an existing {@link Roo.TabPanelItem}.
      * @param {Roo.TabPanelItem} item The TabPanelItem to add
      */
-    addTabItem : function(item){
+    addTabItem : function(item)
+    {
         this.items[item.id] = item;
         this.items.push(item);
+        this.autoSizeTabs();
       //  if(this.resizeTabs){
     //       item.setWidth(this.currentTabWidth || this.preferredTabWidth);
   //         this.autoSizeTabs();
@@ -38167,7 +38379,10 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
      * @param {String/Number} id The id or index of the TabPanelItem to activate.
      * @return {Roo.TabPanelItem} The TabPanelItem.
      */
-    activate : function(id){
+    activate : function(id)
+    {
+        //Roo.log('activite:'  + id);
+        
         var tab = this.items[id];
         if(!tab){
             return null;
@@ -38233,12 +38448,22 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     /**
      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
      */
-    autoSizeTabs : function(){
+    autoSizeTabs : function()
+    {
         var count = this.items.length;
         var vcount = count - this.hiddenCount;
+        
+        if (vcount < 2) {
+            this.stripEl.hide();
+        } else {
+            this.stripEl.show();
+        }
+        
         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
             return;
         }
+        
+        
         var w = Math.max(this.el.getWidth() - this.cpad, 10);
         var availWidth = Math.floor(w / vcount);
         var b = this.stripBody;
@@ -38298,7 +38523,9 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     createStrip : function(container)
     {
         var strip = document.createElement("nav");
-        strip.className = "navbar navbar-default"; //"x-tabs-wrap";
+        strip.className = Roo.bootstrap.version == 4 ?
+            "navbar-light bg-light" : 
+            "navbar navbar-default"; //"x-tabs-wrap";
         container.appendChild(strip);
         return strip;
     },
@@ -38337,7 +38564,7 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     createStripElements :  function(stripEl, text, closable, tpl)
     {
         var td = document.createElement("li"); // was td..
-        
+        td.className = 'nav-item';
         
         //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
         
@@ -38377,12 +38604,18 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
             var template = tpl || this.tabTpl || false;
             
             if(!template){
-                
-                template = new Roo.Template(
-                   '<a href="#">' +
-                   '<span unselectable="on"' +
-                            (this.disableTooltips ? '' : ' title="{text}"') +
-                            ' >{text}</span></a>'
+                template =  new Roo.Template(
+                        Roo.bootstrap.version == 4 ? 
+                            (
+                                '<a class="nav-link" href="#" unselectable="on"' +
+                                     (this.disableTooltips ? '' : ' title="{text}"') +
+                                     ' >{text}</a>'
+                            ) : (
+                                '<a class="nav-link" href="#">' +
+                                '<span unselectable="on"' +
+                                         (this.disableTooltips ? '' : ' title="{text}"') +
+                                    ' >{text}</span></a>'
+                            )
                 );
             }
             
@@ -38449,8 +38682,13 @@ Roo.bootstrap.panel.TabItem = function(config){
     /** @private */
     this.el = Roo.get(els.el);
     this.inner = Roo.get(els.inner, true);
-    this.textEl = Roo.get(this.el.dom.firstChild, true);
-    this.pnode = Roo.get(els.el.parentNode, true);
+     this.textEl = Roo.bootstrap.version == 4 ?
+        this.el : Roo.get(this.el.dom.firstChild, true);
+
+    this.pnode = this.linode = Roo.get(els.el.parentNode, true);
+    this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
+
+    
 //    this.el.on("mousedown", this.onTabMouseDown, this);
     this.el.on("click", this.onTabClick, this);
     /** @private */
@@ -38505,7 +38743,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
      */
     show : function(){
-        this.pnode.addClass("active");
+        this.status_node.addClass("active");
         this.showAction();
         if(Roo.isOpera){
             this.tabPanel.stripWrap.repaint();
@@ -38525,7 +38763,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
      */
     hide : function(){
-        this.pnode.removeClass("active");
+        this.status_node.removeClass("active");
         this.hideAction();
         this.fireEvent("deactivate", this.tabPanel, this);
     },
@@ -38572,10 +38810,10 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
     },
 
     setWidth : function(width){
-        var iwidth = width - this.pnode.getPadding("lr");
+        var iwidth = width - this.linode.getPadding("lr");
         this.inner.setWidth(iwidth);
         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
-        this.pnode.setWidth(width);
+        this.linode.setWidth(width);
     },
 */
     /**
@@ -38584,7 +38822,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
      */
     setHidden : function(hidden){
         this.hidden = hidden;
-        this.pnode.setStyle("display", hidden ? "none" : "");
+        this.linode.setStyle("display", hidden ? "none" : "");
     },
 
     /**
@@ -38610,7 +38848,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
          *  #2804 [new] Tabs in Roojs
          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
          */
-        //this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
+        //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
         //this.el.endMeasure();
     //},
 
@@ -38639,7 +38877,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
     disable : function(){
         if(this.tabPanel.active != this){
             this.disabled = true;
-            this.pnode.addClass("disabled");
+            this.status_node.addClass("disabled");
         }
     },
 
@@ -38648,7 +38886,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
      */
     enable : function(){
         this.disabled = false;
-        this.pnode.removeClass("disabled");
+        this.status_node.removeClass("disabled");
     },
 
     /**
@@ -41261,4 +41499,220 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
         return this.el.select('input.hidden-number-input',true).first();
     }
     
-});
\ No newline at end of file
+});/**
+*    This script refer to:
+*    Title: Signature Pad
+*    Author: szimek
+*    Availability: https://github.com/szimek/signature_pad
+**/
+
+/**
+ * @class Roo.bootstrap.BezierSignature
+ * @extends Roo.bootstrap.Component
+ * Bootstrap BezierSignature class
+ * 
+ * @constructor
+ * Create a new BezierSignature
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.BezierSignature = function(config){
+    Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
+    
+    // this.addEvents({
+    //     // raw events
+    //     /**
+    //      * @event click
+    //      * When a Brick is click
+    //      * @param {Roo.bootstrap.Brick} this
+    //      * @param {Roo.EventObject} e
+    //      */
+    //     "click" : true
+    // });
+};
+
+Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
+    
+    /**
+     * @cfg(float or function) Radius of a single dot.
+     */ 
+    dotSize: false,
+    
+    /**
+     * @cfg(float) Minimum width of a line. Defaults to 0.5.
+     */
+    minWidth: 0.5,
+    
+    /**
+     * @cfg(float) Maximum width of a line. Defaults to 2.5.
+     */
+    maxWidth: 2.5,
+    
+    /**
+     * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
+     */
+    throttle: 16,
+    
+    /**
+     * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
+     */
+    minDistance: 5,
+    
+    /**
+     * @cfg(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
+     */
+    backgroundColor: 'rgba(0,0,0,0)',
+    
+    /**
+     * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
+     */
+    penColor: 'black',
+    
+    /**
+     * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
+     */
+    velocityFilterWeight: 0.7,
+    
+    /**
+     * @cfg(function) Callback when stroke begin.
+     */
+    onBegin: false,
+    
+    /**
+     * @cfg(function) Callback when stroke end.
+     */
+    onEnd: false,
+    
+    Point: (function () {
+        function Point(x, y, time) {
+            this.x = x;
+            this.y = y;
+            this.time = time || Date.now();
+        }
+        Point.prototype.distanceTo = function (start) {
+            return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
+        };
+        Point.prototype.equals = function (other) {
+            return this.x === other.x && this.y === other.y && this.time === other.time;
+        };
+        Point.prototype.velocityFrom = function (start) {
+            return this.time !== start.time
+            ? this.distanceTo(start) / (this.time - start.time)
+            : 0;
+        };
+        return Point;
+    }()),
+    
+    Bezier: (function () {
+        function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
+            this.startPoint = startPoint;
+            this.control2 = control2;
+            this.control1 = control1;
+            this.endPoint = endPoint;
+            this.startWidth = startWidth;
+            this.endWidth = endWidth;
+        }
+        Bezier.fromPoints = function (points, widths) {
+            var c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+            var c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+            return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+        };
+        Bezier.calculateControlPoints = function (s1, s2, s3) {
+            var dx1 = s1.x - s2.x;
+            var dy1 = s1.y - s2.y;
+            var dx2 = s2.x - s3.x;
+            var dy2 = s2.y - s3.y;
+            var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
+            var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
+            var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+            var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+            var dxm = m1.x - m2.x;
+            var dym = m1.y - m2.y;
+            var k = l2 / (l1 + l2);
+            var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+            var tx = s2.x - cm.x;
+            var ty = s2.y - cm.y;
+            return {
+                c1: new Point(m1.x + tx, m1.y + ty),
+                c2: new Point(m2.x + tx, m2.y + ty)
+            };
+        };
+        Bezier.prototype.length = function () {
+            var steps = 10;
+            var length = 0;
+            var px;
+            var py;
+            for (var i = 0; i <= steps; i += 1) {
+                var t = i / steps;
+                var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
+                var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
+                if (i > 0) {
+                    var xdiff = cx - px;
+                    var ydiff = cy - py;
+                    length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+                }
+                px = cx;
+                py = cy;
+            }
+            return length;
+        };
+        Bezier.prototype.point = function (t, start, c1, c2, end) {
+            return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
+            + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
+            + (3.0 * c2 * (1.0 - t) * t * t)
+            + (end * t * t * t);
+        };
+        return Bezier;
+    }()),
+    
+    getAutoCreate : function()
+    {
+        Roo.log('runing???');
+        
+        var cls = 'roo-signature';
+        
+        if(this.cls){
+            cls += ' ' + this.cls;
+        }
+        
+        var cfg = {
+            tag: 'div',
+            cls: cls,
+            cn: [
+                {
+                    tag: 'div',
+                    cls: 'roo-signature-body',
+                    cn: [
+                        {
+                            tag: 'canvas',
+                            cls: 'roo-signature-body-canvas'
+                        }
+                    ]
+                }
+            ]
+        };
+        
+        return cfg;
+    },
+    
+    initEvents: function() 
+    {
+        Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
+        // assign all object in here...
+    },
+    
+    isValid: function()
+    {
+        // form cannot detect...
+    },
+    
+    canvasEl: function()
+    {
+        // catching canvas
+    }
+    
+});
+
+ 
+
+ 
\ No newline at end of file