X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=43aa293fb711c7f9a9e7788a8a68b08fa9a2873d;hb=7c5c5e78c540179da19c9417b1c04eac05a253be;hp=694a8235901d933e44e5078b8671f4e57f6dd670;hpb=700224870cf6aa1ea0b725c1c037c659fddd570d;p=roojs1

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 694a823590..43aa293fb7 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -6,13 +6,210 @@
 Roo.bootstrap.version = (
         function() {
                 var ret=3;
-                Roo.each(document.styleSheets[0], function(s) {
-                    if (s.href.match(/css-bootstrap4/)) {
+                Roo.each(document.styleSheets, function(s) {
+                    if ( s.href  && s.href.match(/css-bootstrap4/)) {
                         ret=4;
                     }
                 });
         return ret;
-})();/*
+})(); /*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/**
+ * @class Roo.Shadow
+ * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
+ * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
+ * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
+ * @constructor
+ * Create a new Shadow
+ * @param {Object} config The config object
+ */
+Roo.Shadow = function(config){
+    Roo.apply(this, config);
+    if(typeof this.mode != "string"){
+        this.mode = this.defaultMode;
+    }
+    var o = this.offset, a = {h: 0};
+    var rad = Math.floor(this.offset/2);
+    switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
+        case "drop":
+            a.w = 0;
+            a.l = a.t = o;
+            a.t -= 1;
+            if(Roo.isIE){
+                a.l -= this.offset + rad;
+                a.t -= this.offset + rad;
+                a.w -= rad;
+                a.h -= rad;
+                a.t += 1;
+            }
+        break;
+        case "sides":
+            a.w = (o*2);
+            a.l = -o;
+            a.t = o-1;
+            if(Roo.isIE){
+                a.l -= (this.offset - rad);
+                a.t -= this.offset + rad;
+                a.l += 1;
+                a.w -= (this.offset - rad)*2;
+                a.w -= rad + 1;
+                a.h -= 1;
+            }
+        break;
+        case "frame":
+            a.w = a.h = (o*2);
+            a.l = a.t = -o;
+            a.t += 1;
+            a.h -= 2;
+            if(Roo.isIE){
+                a.l -= (this.offset - rad);
+                a.t -= (this.offset - rad);
+                a.l += 1;
+                a.w -= (this.offset + rad + 1);
+                a.h -= (this.offset + rad);
+                a.h += 1;
+            }
+        break;
+    };
+
+    this.adjusts = a;
+};
+
+Roo.Shadow.prototype = {
+    /**
+     * @cfg {String} mode
+     * The shadow display mode.  Supports the following options:<br />
+     * sides: Shadow displays on both sides and bottom only<br />
+     * frame: Shadow displays equally on all four sides<br />
+     * drop: Traditional bottom-right drop shadow (default)
+     */
+    /**
+     * @cfg {String} offset
+     * The number of pixels to offset the shadow from the element (defaults to 4)
+     */
+    offset: 4,
+
+    // private
+    defaultMode: "drop",
+
+    /**
+     * Displays the shadow under the target element
+     * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
+     */
+    show : function(target){
+        target = Roo.get(target);
+        if(!this.el){
+            this.el = Roo.Shadow.Pool.pull();
+            if(this.el.dom.nextSibling != target.dom){
+                this.el.insertBefore(target);
+            }
+        }
+        this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
+        if(Roo.isIE){
+            this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
+        }
+        this.realign(
+            target.getLeft(true),
+            target.getTop(true),
+            target.getWidth(),
+            target.getHeight()
+        );
+        this.el.dom.style.display = "block";
+    },
+
+    /**
+     * Returns true if the shadow is visible, else false
+     */
+    isVisible : function(){
+        return this.el ? true : false;  
+    },
+
+    /**
+     * Direct alignment when values are already available. Show must be called at least once before
+     * calling this method to ensure it is initialized.
+     * @param {Number} left The target element left position
+     * @param {Number} top The target element top position
+     * @param {Number} width The target element width
+     * @param {Number} height The target element height
+     */
+    realign : function(l, t, w, h){
+        if(!this.el){
+            return;
+        }
+        var a = this.adjusts, d = this.el.dom, s = d.style;
+        var iea = 0;
+        s.left = (l+a.l)+"px";
+        s.top = (t+a.t)+"px";
+        var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
+ 
+        if(s.width != sws || s.height != shs){
+            s.width = sws;
+            s.height = shs;
+            if(!Roo.isIE){
+                var cn = d.childNodes;
+                var sww = Math.max(0, (sw-12))+"px";
+                cn[0].childNodes[1].style.width = sww;
+                cn[1].childNodes[1].style.width = sww;
+                cn[2].childNodes[1].style.width = sww;
+                cn[1].style.height = Math.max(0, (sh-12))+"px";
+            }
+        }
+    },
+
+    /**
+     * Hides this shadow
+     */
+    hide : function(){
+        if(this.el){
+            this.el.dom.style.display = "none";
+            Roo.Shadow.Pool.push(this.el);
+            delete this.el;
+        }
+    },
+
+    /**
+     * Adjust the z-index of this shadow
+     * @param {Number} zindex The new z-index
+     */
+    setZIndex : function(z){
+        this.zIndex = z;
+        if(this.el){
+            this.el.setStyle("z-index", z);
+        }
+    }
+};
+
+// Private utility class that manages the internal Shadow cache
+Roo.Shadow.Pool = function(){
+    var p = [];
+    var markup = Roo.isIE ?
+                 '<div class="x-ie-shadow"></div>' :
+                 '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
+    return {
+        pull : function(){
+            var sh = p.shift();
+            if(!sh){
+                sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
+                sh.autoBoxAdjust = false;
+            }
+            return sh;
+        },
+
+        push : function(sh){
+            p.push(sh);
+        }
+    };
+}();/*
  * - LGPL
  *
  * base class for bootstrap elements.
@@ -413,7 +610,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
             return;
         }
          
-        this.getVisibilityEl().removeClass('hidden');
+        this.getVisibilityEl().removeClass(['hidden','d-none']);
         
         this.fireEvent('show', this);
         
@@ -428,13 +625,196 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
             return;
         }
         
-        this.getVisibilityEl().addClass('hidden');
+        this.getVisibilityEl().addClass(['hidden','d-none']);
         
         this.fireEvent('hide', this);
         
     }
 });
 
+ /*
+ * - LGPL
+ *
+ * element
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.Element
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Element class
+ * @cfg {String} html contents of the element
+ * @cfg {String} tag tag of the element
+ * @cfg {String} cls class of the element
+ * @cfg {Boolean} preventDefault (true|false) default false
+ * @cfg {Boolean} clickable (true|false) default false
+ * 
+ * @constructor
+ * Create a new Element
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.Element = function(config){
+    Roo.bootstrap.Element.superclass.constructor.call(this, config);
+    
+    this.addEvents({
+        // raw events
+        /**
+         * @event click
+         * When a element is chick
+         * @param {Roo.bootstrap.Element} this
+         * @param {Roo.EventObject} e
+         */
+        "click" : true
+    });
+};
+
+Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
+    
+    tag: 'div',
+    cls: '',
+    html: '',
+    preventDefault: false, 
+    clickable: false,
+    
+    getAutoCreate : function(){
+        
+        var cfg = {
+            tag: this.tag,
+            // cls: this.cls, double assign in parent class Component.js :: onRender
+            html: this.html
+        };
+        
+        return cfg;
+    },
+    
+    initEvents: function() 
+    {
+        Roo.bootstrap.Element.superclass.initEvents.call(this);
+        
+        if(this.clickable){
+            this.el.on('click', this.onClick, this);
+        }
+        
+    },
+    
+    onClick : function(e)
+    {
+        if(this.preventDefault){
+            e.preventDefault();
+        }
+        
+        this.fireEvent('click', this, e);
+    },
+    
+    getValue : function()
+    {
+        return this.el.dom.innerHTML;
+    },
+    
+    setValue : function(value)
+    {
+        this.el.dom.innerHTML = value;
+    }
+   
+});
+
+ 
+
+ /*
+ * - LGPL
+ *
+ * dropable area
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.DropTarget
+ * @extends Roo.bootstrap.Element
+ * Bootstrap DropTarget class
+ 
+ * @cfg {string} name dropable name
+ * 
+ * @constructor
+ * Create a new Dropable Area
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.DropTarget = function(config){
+    Roo.bootstrap.DropTarget.superclass.constructor.call(this, config);
+    
+    this.addEvents({
+        // raw events
+        /**
+         * @event click
+         * When a element is chick
+         * @param {Roo.bootstrap.Element} this
+         * @param {Roo.EventObject} e
+         */
+        "drop" : true
+    });
+};
+
+Roo.extend(Roo.bootstrap.DropTarget, Roo.bootstrap.Element,  {
+    
+    
+    getAutoCreate : function(){
+        
+         
+    },
+    
+    initEvents: function() 
+    {
+        Roo.bootstrap.DropTarget.superclass.initEvents.call(this);
+        this.dropZone = new Roo.dd.DropTarget(this.getEl(), {
+            ddGroup: this.name,
+            listeners : {
+                drop : this.dragDrop.createDelegate(this),
+                enter : this.dragEnter.createDelegate(this),
+                out : this.dragOut.createDelegate(this),
+                over : this.dragOver.createDelegate(this)
+            }
+            
+        });
+        this.dropZone.DDM.useCache = false // so data gets refreshed when we resize stuff
+    },
+    
+    dragDrop : function(source,e,data)
+    {
+        // user has to decide how to impliment this.
+        Roo.log('drop');
+        Roo.log(this);
+        //this.fireEvent('drop', this, source, e ,data);
+        return false;
+    },
+    
+    dragEnter : function(n, dd, e, data)
+    {
+        // probably want to resize the element to match the dropped element..
+        Roo.log("enter");
+        this.originalSize = this.el.getSize();
+        this.el.setSize( n.el.getSize());
+        this.dropZone.DDM.refreshCache(this.name);
+        Roo.log([n, dd, e, data]);
+    },
+    
+    dragOut : function(value)
+    {
+        // resize back to normal
+        Roo.log("out");
+        this.el.setSize(this.originalSize);
+        this.dropZone.resetConstraints();
+    },
+    
+    dragOver : function()
+    {
+        // ??? do nothing?
+    }
+   
+});
+
+ 
+
  /*
  * - LGPL
  *
@@ -581,11 +961,11 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
  * @extends Roo.bootstrap.Component
  * Bootstrap Button class
  * @cfg {String} html The button content
- * @cfg {String} weight (default | primary | secondary | success | info | warning | danger | link ) default
- * @cfg {String} badge_weight (default | primary | secondary | success | info | warning | danger | link ) default (same as button)
+ * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link ) default
+ * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link ) default (same as button)
  * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
- * @cfg {String} size ( lg | sm | xs)
- * @cfg {String} tag ( a | input | submit)
+ * @cfg {String} size (lg|sm|xs)
+ * @cfg {String} tag (a|input|submit)
  * @cfg {String} href empty or href
  * @cfg {Boolean} disabled default false;
  * @cfg {Boolean} isClose default false;
@@ -595,12 +975,12 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
  * @cfg {String} theme (default|glow)  
  * @cfg {Boolean} inverse dark themed version
  * @cfg {Boolean} toggle is it a slidy toggle button
- * @cfg {Boolean} pressed　(true|false) default null - if the button ahs active state
+ * @cfg {Boolean} pressed　  default null - if the button ahs active state
  * @cfg {String} ontext text for on slidy toggle state
  * @cfg {String} offtext text for off slidy toggle state
  * @cfg {Boolean} preventDefault  default true (stop click event triggering the URL if it's a link.)
  * @cfg {Boolean} removeClass remove the standard class..
- * @cfg {String} target  target for a href. (_self|_blank|_parent|_top| other)
+ * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href. 
  * 
  * @constructor
  * Create a new button
@@ -1060,7 +1440,8 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
         };
         
         var settings=this;
-        ['xs','sm','md','lg'].map(function(size){
+        var sizes =   ['xs','sm','md','lg'];
+        sizes.map(function(size ,ix){
             //Roo.log( size + ':' + settings[size]);
             
             if (settings[size+'off'] !== false) {
@@ -1072,10 +1453,18 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
             }
             
             if (!settings[size]) { // 0 = hidden
-                cfg.cls += ' hidden-' + size;
+                cfg.cls += ' hidden-' + size + ' hidden-' + size + '-down';
+                // bootsrap4
+                for (var i = ix; i > -1; i--) {
+                    cfg.cls +=  ' d-' + sizes[i] + '-none'; 
+                }
+                
+                
                 return;
             }
-            cfg.cls += ' col-' + size + '-' + settings[size];
+            cfg.cls += ' col-' + size + '-' + settings[size] + (
+                size == 'xs' ? (' col-' + settings[size] ) : '' // bs4 col-{num} replaces col-xs
+            );
             
         });
         
@@ -1485,6 +1874,811 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
     }
 });
 
+ /*
+ *  - LGPL
+ *
+ *  This is BS4's Card element.. - similar to our containers probably..
+ * 
+ */
+/**
+ * @class Roo.bootstrap.Card
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Card class
+ *
+ *
+ * possible... may not be implemented..
+ * @cfg {String} header_image  src url of image.
+ * @cfg {String|Object} header
+ * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
+ * 
+ * @cfg {String} title
+ * @cfg {String} subtitle
+ * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it..
+ * @cfg {String} footer
+ 
+ * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
+ * 
+ * @cfg {String} margin (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_top (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_left (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_right (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_x (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_y (0|1|2|3|4|5|auto)
+ *
+ * @cfg {String} padding (0|1|2|3|4|5)
+ * @cfg {String} padding_top (0|1|2|3|4|5)
+ * @cfg {String} padding_bottom (0|1|2|3|4|5)
+ * @cfg {String} padding_left (0|1|2|3|4|5)
+ * @cfg {String} padding_right (0|1|2|3|4|5)
+ * @cfg {String} padding_x (0|1|2|3|4|5)
+ * @cfg {String} padding_y (0|1|2|3|4|5)
+ *
+ * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ 
+ * @config {Boolean} dragable  if this card can be dragged.
+ * @config {String} drag_group  group for drag
+ * @config {Boolean} dropable  if this card can recieve other cards being dropped onto it..
+ * @config {String} drop_group  group for drag
+ * 
+ * @config {Boolean} collapsable can the body be collapsed.
+ * @config {Boolean} collapsed is the body collapsed when rendered...
+ * @config {Boolean} rotateable can the body be rotated by clicking on it..
+ * @config {Boolean} rotated is the body rotated when rendered...
+ * 
+ * @constructor
+ * Create a new Container
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.Card = function(config){
+    Roo.bootstrap.Card.superclass.constructor.call(this, config);
+    
+    this.addEvents({
+         // raw events
+        /**
+         * @event drop
+         * When a element a card is dropped
+         * @param {Roo.bootstrap.Element} this
+         * @param {Roo.Element} n the node being dropped?
+         * @param {Object} dd Drag and drop data
+         * @param {Roo.EventObject} e
+         * @param {Roo.EventObject} data  the data passed via getDragData
+         */
+        'drop' : true,
+         /**
+         * @event rotate
+         * When a element a card is rotate
+         * @param {Roo.bootstrap.Element} this
+         * @param {Roo.Element} n the node being dropped?
+         * @param {Boolean} rotate status
+         */
+        'rotate' : true
+        
+    });
+};
+
+
+Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
+    
+    
+    weight : '',
+    
+    margin: '', /// may be better in component?
+    margin_top: '', 
+    margin_bottom: '', 
+    margin_left: '',
+    margin_right: '',
+    margin_x: '',
+    margin_y: '',
+    
+    padding : '',
+    padding_top: '', 
+    padding_bottom: '', 
+    padding_left: '',
+    padding_right: '',
+    padding_x: '',
+    padding_y: '',
+    
+    display: '', 
+    display_xs: '', 
+    display_sm: '', 
+    display_lg: '',
+    display_xl: '',
+ 
+    header_image  : '',
+    header : '',
+    header_size : 0,
+    title : '',
+    subtitle : '',
+    html : '',
+    footer: '',
+
+    collapsable : false,
+    collapsed : false,
+    rotateable : false,
+    rotated : false,
+    
+    dragable : false,
+    drag_group : false,
+    dropable : false,
+    drop_group : false,
+    childContainer : false,
+    dropEl : false, /// the dom placeholde element that indicates drop location.
+    
+    layoutCls : function()
+    {
+        var cls = '';
+        var t = this;
+        Roo.log(this.margin_bottom.length);
+        ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
+            // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
+            
+            if (('' + t['margin' + (v.length ? '_' : '') + v]).length) {
+                cls += ' m' +  (v.length ? v[0]  : '') + '-' +  t['margin' + (v.length ? '_' : '') + v];
+            }
+            if (('' + t['padding' + (v.length ? '_' : '') + v]).length) {
+                cls += ' p' +  (v.length ? v[0]  : '') + '-' +  t['padding' + (v.length ? '_' : '') + v];
+            }
+        });
+        
+        ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
+            if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
+                cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v]
+            }
+        });
+        
+        // more generic support?
+        if (this.hidden) {
+            cls += ' d-none';
+        }
+        
+        return cls;
+    },
+ 
+       // Roo.log("Call onRender: " + this.xtype);
+        /*  We are looking at something like this.
+<div class="card">
+    <img src="..." class="card-img-top" alt="...">
+    <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+         <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+
+        >> this bit is really the body...
+        <div> << we will ad dthis in hopefully it will not break shit.
+        
+        ** card text does not actually have any styling...
+        
+            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        
+        </div> <<
+          <a href="#" class="card-link">Card link</a>
+          
+    </div>
+    <div class="card-footer">
+        <small class="text-muted">Last updated 3 mins ago</small>
+    </div>
+</div>
+         */
+    getAutoCreate : function(){
+        
+        var cfg = {
+            tag : 'div',
+            cls : 'card',
+            cn : [ ]
+        };
+        
+        if (this.weight.length && this.weight != 'light') {
+            cfg.cls += ' text-white';
+        } else {
+            cfg.cls += ' text-dark'; // need as it's nested..
+        }
+        if (this.weight.length) {
+            cfg.cls += ' bg-' + this.weight;
+        }
+        
+        cfg.cls += this.layoutCls(); 
+        
+        var hdr = false;
+        if (this.header.length) {
+            hdr = {
+                tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
+                cls : 'card-header',
+                cn : []
+            };
+            cfg.cn.push(hdr);
+            hdr_ctr = hdr;
+        } else {
+            hdr = {
+                tag : 'div',
+                cls : 'card-header d-none',
+                cn : []
+            };
+            cfg.cn.push(hdr);
+        }
+        if (this.collapsable) {
+            hdr_ctr = {
+            tag : 'a',
+            cls : 'd-block user-select-none',
+            cn: [
+                    {
+                        tag: 'i',
+                        cls : 'roo-collapse-toggle fa fa-chevron-down float-right ' + (this.collapsed ? 'collapsed' : '')
+                    }
+                   
+                ]
+            };
+            hdr.cn.push(hdr_ctr);
+        }
+        
+        hdr_ctr.cn.push(        {
+            tag: 'span',
+            cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'),
+            html : this.header
+        });
+        
+        
+        if (this.header_image.length) {
+            cfg.cn.push({
+                tag : 'img',
+                cls : 'card-img-top',
+                src: this.header_image // escape?
+            });
+        } else {
+            cfg.cn.push({
+                    tag : 'div',
+                    cls : 'card-img-top d-none' 
+                });
+        }
+            
+        var body = {
+            tag : 'div',
+            cls : 'card-body' + (this.html === false  ? ' d-none' : ''),
+            cn : []
+        };
+        var obody = body;
+        if (this.collapsable || this.rotateable) {
+            obody = {
+                tag: 'div',
+                cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
+                cn : [  body ]
+            };
+        }
+        
+        cfg.cn.push(obody);
+        
+        if (this.title.length) {
+            body.cn.push({
+                tag : 'div',
+                cls : 'card-title',
+                src: this.title // escape?
+            });
+        }  
+        
+        if (this.subtitle.length) {
+            body.cn.push({
+                tag : 'div',
+                cls : 'card-title',
+                src: this.subtitle // escape?
+            });
+        }
+        
+        body.cn.push({
+            tag : 'div',
+            cls : 'roo-card-body-ctr'
+        });
+        
+        if (this.html.length) {
+            body.cn.push({
+                tag: 'div',
+                html : this.html
+            });
+        }
+        // fixme ? handle objects?
+        
+        if (this.footer.length) {
+           
+            cfg.cn.push({
+                cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
+                html : this.footer
+            });
+            
+        } else {
+            cfg.cn.push({cls : 'card-footer d-none'});
+        }
+        
+        // footer...
+        
+        return cfg;
+    },
+    
+    
+    getCardHeader : function()
+    {
+        var  ret = this.el.select('.card-header',true).first();
+        if (ret.hasClass('d-none')) {
+            ret.removeClass('d-none');
+        }
+        
+        return ret;
+    },
+    getCardFooter : function()
+    {
+        var  ret = this.el.select('.card-footer',true).first();
+        if (ret.hasClass('d-none')) {
+            ret.removeClass('d-none');
+        }
+        
+        return ret;
+    },
+    getCardImageTop : function()
+    {
+        var  ret = this.el.select('.card-img-top',true).first();
+        if (ret.hasClass('d-none')) {
+            ret.removeClass('d-none');
+        }
+            
+        return ret;
+    },
+    
+    getChildContainer : function()
+    {
+        
+        if(!this.el){
+            return false;
+        }
+        return this.el.select('.roo-card-body-ctr',true).first();    
+    },
+    
+    initEvents: function() 
+    {
+        
+        this.bodyEl = this.getChildContainer();
+        if(this.dragable){
+            this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+                    containerScroll: true,
+                    ddGroup: this.drag_group || 'default_card_drag_group'
+            });
+            this.dragZone.getDragData = this.getDragData.createDelegate(this);
+        }
+        if (this.dropable) {
+            this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
+                containerScroll: true,
+                ddGroup: this.drop_group || 'default_card_drag_group'
+            });
+            this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+            this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+            this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+            this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+            this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+        }
+        
+        if (this.collapsable) {
+            this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
+        }
+        if (this.rotateable) {
+            this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
+        }
+        this.collapsableEl = this.el.select('.roo-collapsable').first();
+         
+        this.footerEl = this.el.select('.card-footer').first();
+        this.collapsableToggleEl = this.el.select('.roo-collapse-toggle');
+        this.headerEl = this.el.select('.roo-card-header-ctr').first();
+        
+        if (this.rotated) {
+            this.el.addClass('roo-card-rotated');
+            this.fireEvent('rotate', this, true);
+        }
+        
+    },
+    getDragData : function(e)
+    {
+        var target = this.getEl();
+        if (target) {
+            //this.handleSelection(e);
+            
+            var dragData = {
+                source: this,
+                copy: false,
+                nodes: this.getEl(),
+                records: []
+            };
+            
+            
+            dragData.ddel = target.dom ;    // the div element
+            Roo.log(target.getWidth( ));
+            dragData.ddel.style.width = target.getWidth() + 'px';
+            
+            return dragData;
+        }
+        return false;
+    },
+    /**
+    *    Part of the Roo.dd.DropZone interface. If no target node is found, the
+    *    whole Element becomes the target, and this causes the drop gesture to append.
+    */
+    getTargetFromEvent : function(e, dragged_card_el)
+    {
+        var target = e.getTarget();
+        while ((target !== null) && (target.parentNode != this.bodyEl.dom)) {
+            target = target.parentNode;
+        }
+        
+        var ret = {
+            position: '',
+            cards : [],
+            card_n : -1,
+            items_n : -1,
+            card : false 
+        };
+        
+        //Roo.log([ 'target' , target ? target.id : '--nothing--']);
+        // see if target is one of the 'cards'...
+        
+        
+        //Roo.log(this.items.length);
+        var pos = false;
+        
+        var last_card_n = 0;
+        var cards_len  = 0;
+        for (var i = 0;i< this.items.length;i++) {
+            
+            if (!this.items[i].el.hasClass('card')) {
+                 continue;
+            }
+            pos = this.getDropPoint(e, this.items[i].el.dom);
+            
+            cards_len = ret.cards.length;
+            //Roo.log(this.items[i].el.dom.id);
+            ret.cards.push(this.items[i]);
+            last_card_n  = i;
+            if (ret.card_n < 0 && pos == 'above') {
+                ret.position = cards_len > 0 ? 'below' : pos;
+                ret.items_n = i > 0 ? i - 1 : 0;
+                ret.card_n  = cards_len  > 0 ? cards_len - 1 : 0;
+                ret.card = ret.cards[ret.card_n];
+            }
+        }
+        if (!ret.cards.length) {
+            ret.card = true;
+            ret.position = 'below';
+            ret.items_n;
+            return ret;
+        }
+        // could not find a card.. stick it at the end..
+        if (ret.card_n < 0) {
+            ret.card_n = last_card_n;
+            ret.card = ret.cards[last_card_n];
+            ret.items_n = this.items.indexOf(ret.cards[last_card_n]);
+            ret.position = 'below';
+        }
+        
+        if (this.items[ret.items_n].el == dragged_card_el) {
+            return false;
+        }
+        
+        if (ret.position == 'below') {
+            var card_after = ret.card_n+1 == ret.cards.length ? false : ret.cards[ret.card_n+1];
+            
+            if (card_after  && card_after.el == dragged_card_el) {
+                return false;
+            }
+            return ret;
+        }
+        
+        // its's after ..
+        var card_before = ret.card_n > 0 ? ret.cards[ret.card_n-1] : false;
+        
+        if (card_before  && card_before.el == dragged_card_el) {
+            return false;
+        }
+        
+        return ret;
+    },
+    
+    onNodeEnter : function(n, dd, e, data){
+        return false;
+    },
+    onNodeOver : function(n, dd, e, data)
+    {
+       
+        var target_info = this.getTargetFromEvent(e,data.source.el);
+        if (target_info === false) {
+            this.dropPlaceHolder('hide');
+            return false;
+        }
+        Roo.log(['getTargetFromEvent', target_info ]);
+        
+         
+        this.dropPlaceHolder('show', target_info,data);
+        
+        return false; 
+    },
+    onNodeOut : function(n, dd, e, data){
+        this.dropPlaceHolder('hide');
+     
+    },
+    onNodeDrop : function(n, dd, e, data)
+    {
+        
+        // call drop - return false if
+        
+        // this could actually fail - if the Network drops..
+        // we will ignore this at present..- client should probably reload
+        // the whole set of cards if stuff like that fails.
+        
+        
+        var info = this.getTargetFromEvent(e,data.source.el);
+        if (info === false) {
+            return false;
+        }
+        
+        if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+            return false;
+        }
+         
+        this.dropPlaceHolder('hide');
+        
+        // do the dom manipulation first..
+        var dom = data.source.el.dom;
+        dom.parentNode.removeChild(dom);
+        
+        
+        if (info.card !== true) {
+            var cardel = info.card.el.dom;
+            
+            if (info.position == 'above') {
+                cardel.parentNode.insertBefore(dom, cardel);
+            } else if (cardel.nextSibling) {
+                cardel.parentNode.insertBefore(dom,cardel.nextSibling);
+            } else {
+                cardel.parentNode.append(dom);
+            }
+        } else {
+            // card container???
+            this.bodyEl.dom.append(dom);
+        }
+        
+        //FIXME HANDLE card = true 
+        
+        // add this to the correct place in items.
+        
+        
+        
+        // remove Card from items.
+        
+        var old_parent = data.source.parent();
+        
+        old_parent.items = old_parent.items.filter(function(e) { return e != data.source });
+        
+        if (this.items.length) {
+            var nitems = [];
+            //Roo.log([info.items_n, info.position, this.items.length]);
+            for (var i =0; i < this.items.length; i++) {
+                if (i == info.items_n && info.position == 'above') {
+                    nitems.push(data.source);
+                }
+                nitems.push(this.items[i]);
+                if (i == info.items_n && info.position == 'below') {
+                    nitems.push(data.source);
+                }
+            }
+            this.items = nitems;
+            Roo.log(this.items);
+        } else {
+            this.items.push(data.source);
+        }
+        
+        data.source.parentId = this.id;
+        
+        return true;
+    },
+    
+    /**    Decide whether to drop above or below a View node. */
+    getDropPoint : function(e, n, dd)
+    {
+        if (dd) {
+             return false;
+        }
+        if (n == this.bodyEl.dom) {
+            return "above";
+        }
+        var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
+        var c = t + (b - t) / 2;
+        var y = Roo.lib.Event.getPageY(e);
+        if(y <= c) {
+            return "above";
+        }else{
+            return "below";
+        }
+    },
+    onToggleCollapse : function(e)
+        {
+        if (this.collapsed) {
+            this.el.select('.roo-collapse-toggle').removeClass('collapsed');
+            this.collapsableEl.addClass('show');
+            this.collapsed = false;
+            return;
+        }
+        this.el.select('.roo-collapse-toggle').addClass('collapsed');
+        this.collapsableEl.removeClass('show');
+        this.collapsed = true;
+        
+    
+    },
+    
+    onToggleRotate : function(e)
+    {
+        this.collapsableEl.removeClass('show');
+        this.footerEl.removeClass('d-none');
+        this.el.removeClass('roo-card-rotated');
+        this.el.removeClass('d-none');
+        if (this.rotated) {
+            
+            this.collapsableEl.addClass('show');
+            this.rotated = false;
+            this.fireEvent('rotate', this, this.rotated);
+            return;
+        }
+        this.el.addClass('roo-card-rotated');
+        this.footerEl.addClass('d-none');
+        this.el.select('.roo-collapsable').removeClass('show');
+        
+        this.rotated = true;
+        this.fireEvent('rotate', this, this.rotated);
+    
+    },
+    
+    dropPlaceHolder: function (action, info, data)
+    {
+        if (this.dropEl === false) {
+            this.dropEl = Roo.DomHelper.append(this.bodyEl, {
+            cls : 'd-none'
+            },true);
+        }
+        this.dropEl.removeClass(['d-none', 'd-block']);        
+        if (action == 'hide') {
+            
+            this.dropEl.addClass('d-none');
+            return;
+        }
+        // FIXME - info.card == true!!!
+        this.dropEl.dom.parentNode.removeChild(this.dropEl.dom);
+        
+        if (info.card !== true) {
+            var cardel = info.card.el.dom;
+            
+            if (info.position == 'above') {
+                cardel.parentNode.insertBefore(this.dropEl.dom, cardel);
+            } else if (cardel.nextSibling) {
+                cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling);
+            } else {
+                cardel.parentNode.append(this.dropEl.dom);
+            }
+        } else {
+            // card container???
+            this.bodyEl.dom.append(this.dropEl.dom);
+        }
+        
+        this.dropEl.addClass('d-block roo-card-dropzone');
+        
+        this.dropEl.setHeight( Roo.get(data.ddel).getHeight() );
+        
+        
+    
+    
+    
+    },
+    setHeaderText: function(html)
+    {
+        this.headerEl.dom.innerHTML = html;
+    }
+
+    
+});
+
+/*
+ * - LGPL
+ *
+ * Card header - holder for the card header elements.
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.CardHeader
+ * @extends Roo.bootstrap.Element
+ * Bootstrap CardHeader class
+ * @constructor
+ * Create a new Card Header - that you can embed children into
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardHeader = function(config){
+    Roo.bootstrap.CardHeader.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element,  {
+    
+    
+    container_method : 'getCardHeader' 
+    
+     
+    
+    
+   
+});
+
+ 
+
+ /*
+ * - LGPL
+ *
+ * Card footer - holder for the card footer elements.
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.CardFooter
+ * @extends Roo.bootstrap.Element
+ * Bootstrap CardFooter class
+ * @constructor
+ * Create a new Card Footer - that you can embed children into
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardFooter = function(config){
+    Roo.bootstrap.CardFooter.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.CardFooter, Roo.bootstrap.Element,  {
+    
+    
+    container_method : 'getCardFooter' 
+    
+     
+    
+    
+   
+});
+
+ 
+
+ /*
+ * - LGPL
+ *
+ * Card header - holder for the card header elements.
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.CardImageTop
+ * @extends Roo.bootstrap.Element
+ * Bootstrap CardImageTop class
+ * @constructor
+ * Create a new Card Image Top container
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardImageTop = function(config){
+    Roo.bootstrap.CardImageTop.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element,  {
+    
+   
+    container_method : 'getCardImageTop' 
+    
+     
+    
+   
+});
+
+ 
+
  /*
  * - LGPL
  *
@@ -2060,13 +3254,13 @@ Roo.bootstrap.Menu = function(config){
     this.addEvents({
         /**
          * @event beforeshow
-         * Fires before this menu is displayed
+         * Fires before this menu is displayed (return false to block)
          * @param {Roo.menu.Menu} this
          */
         beforeshow : true,
         /**
          * @event beforehide
-         * Fires before this menu is hidden
+         * Fires before this menu is hidden (return false to block)
          * @param {Roo.menu.Menu} this
          */
         beforehide : true,
@@ -2268,7 +3462,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
     isVisible : function(){
         return !this.hidden;
     },
-     onMouseOut : function(e){
+    onMouseOut : function(e){
         var t  = this.findTargetItem(e);
         
         //if(t ){
@@ -2288,12 +3482,17 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
      * the element (defaults to this.defaultAlign)
      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
      */
-    show : function(el, pos, parentMenu){
-        this.parentMenu = parentMenu;
+    show : function(el, pos, parentMenu)
+    {
+        if (false === this.fireEvent("beforeshow", this)) {
+	    Roo.log("show canceled");
+	    return;
+	}
+	this.parentMenu = parentMenu;
         if(!this.el){
             this.render();
         }
-        this.fireEvent("beforeshow", this);
+        
         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
     },
      /**
@@ -2356,10 +3555,13 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
      */
     hide : function(deep)
     {
-        
+        if (false === this.fireEvent("beforehide", this)) {
+	    Roo.log("hide canceled");
+	    return;
+	}
         this.hideMenuItems();
         if(this.el && this.isVisible()){
-            this.fireEvent("beforehide", this);
+           
             if(this.activeItem){
                 this.activeItem.deactivate();
                 this.activeItem = null;
@@ -2410,7 +3612,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'){
@@ -2426,16 +3628,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
         if (!this.el) { 
             return;
         }
-        //$(backdrop).remove()
+        
         this.el.select('.open',true).each(function(aa) {
             
             aa.removeClass('open');
-          //var parent = getParent($(this))
-          //var relatedTarget = { relatedTarget: this }
-          
-           //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
-          //if (e.isDefaultPrevented()) return
-           //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
+         
         });
     },
     addxtypeChild : function (tree, cntr) {
@@ -2646,8 +3843,12 @@ Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component,  {
  * @cfg {Boolean} animate default true
  * @cfg {Boolean} allow_close default true
  * @cfg {Boolean} fitwindow default false
+ * @cfg {Number} width fixed width - usefull for chrome extension only really.
+ * @cfg {Number} height fixed height - usefull for chrome extension only really.
  * @cfg {String} size (sm|lg) default empty
  * @cfg {Number} max_width set the max width of modal
+ * @cfg {Boolean} editableTitle can the title be edited
+
  *
  *
  * @constructor
@@ -2671,7 +3872,15 @@ Roo.bootstrap.Modal = function(config){
          * @param {Roo.bootstrap.Modal} this
          * @param {Roo.EventObject} e
          */
-        "resize" : true
+        "resize" : true,
+        /**
+         * @event titlechanged
+         * Fire when the editable title has been changed
+         * @param {Roo.bootstrap.Modal} this
+         * @param {Roo.EventObject} value
+         */
+        "titlechanged" : true 
+        
     });
     this.buttons = this.buttons || [];
 
@@ -2717,6 +3926,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     max_height: 0,
     
     fit_content: false,
+    editableTitle  : false,
 
     onRender : function(ct, position)
     {
@@ -2768,7 +3978,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);
         }
@@ -2796,8 +4006,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
     getAutoCreate : function()
     {
+        // we will default to modal-body-overflow - might need to remove or make optional later.
         var bdy = {
-                cls : 'modal-body',
+                cls : 'modal-body enable-modal-body-overflow ', 
                 html : this.html || ''
         };
 
@@ -2807,10 +4018,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             html : this.title
         };
 
-        if(this.specificTitle){
+        if(this.specificTitle){ // WTF is this?
             title = this.title;
-
-        };
+        }
 
         var header = [];
         if (this.allow_close && Roo.bootstrap.version == 3) {
@@ -2823,6 +4033,14 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         header.push(title);
 
+        if (this.editableTitle) {
+            header.push({
+                cls: 'form-control roo-editable-title d-none',
+                tag: 'input',
+                type: 'text'
+            });
+        }
+        
         if (this.allow_close && Roo.bootstrap.version == 4) {
             header.push({
                 tag: 'button',
@@ -2870,18 +4088,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
                                     cn : header
                                 },
                                 bdy,
-                                {
-                                    cls : 'modal-footer',
-                                    cn : [
-                                        {
-                                            tag: 'div',
-                                            cls: 'btn-' + this.buttonPosition
-                                        }
-                                    ]
-
-                                }
-
-
+                                footer
                             ]
 
                         }
@@ -2916,9 +4123,21 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             this.closeEl.on('click', this.hide, this);
         }
         Roo.EventManager.onWindowResize(this.resize, this, true);
-
+        if (this.editableTitle) {
+            this.headerEditEl =  this.headerEl.select('.form-control',true).first();
+            this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
+            this.headerEditEl.on('keyup', function(e) {
+                    if(e.isNavKeyPress()){
+                            this.toggleHeaderInput(false)
+                    }
+                }, this);
+            this.headerEditEl.on('blur', function(e) {
+                this.toggleHeaderInput(false)
+            },this);
+        }
 
     },
+  
 
     resize : function()
     {
@@ -2928,9 +4147,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;
         }
@@ -2991,7 +4212,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');
@@ -3083,7 +4304,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;
 
@@ -3093,22 +4314,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)
     {
 
@@ -3124,6 +4341,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
      */
     setTitle: function(str) {
         this.titleEl.dom.innerHTML = str;
+        this.title = str;
     },
     /**
      * Set the body of the Dialog
@@ -3151,7 +4369,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             !child_nodes ||
             child_nodes.length == 0
         ) {
-            return;
+            return 0;
         }
         
         var child_height = 0;
@@ -3204,6 +4422,33 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         }
         
         return child_height;
+    },
+    toggleHeaderInput : function(is_edit)
+    {
+        
+        if (is_edit && this.is_header_editing) {
+            return; // already editing..
+        }
+        if (is_edit) {
+    
+            this.headerEditEl.dom.value = this.title;
+            this.headerEditEl.removeClass('d-none');
+            this.headerEditEl.dom.focus();
+            this.titleEl.addClass('d-none');
+            
+            this.is_header_editing = true;
+            return
+        }
+        // flip back to not editing.
+        this.title = this.headerEditEl.dom.value;
+        this.headerEditEl.addClass('d-none');
+        this.titleEl.removeClass('d-none');
+        this.titleEl.dom.innerHTML = String.format('{0}', this.title);
+        this.is_header_editing = false;
+        this.fireEvent('titlechanged', this, this.title);
+    
+            
+        
     }
 
 });
@@ -3272,6 +4517,7 @@ Roo.apply(Roo.bootstrap.Modal,  {
         
         zIndex : 10001
 });
+
 /*
  * - LGPL
  *
@@ -3335,10 +4581,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]){
@@ -3615,6 +4862,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){
@@ -3883,46 +5133,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     initEvents :function ()
     {
         //Roo.log(this.el.select('.navbar-toggle',true));
-        this.el.select('.navbar-toggle',true).on('click', function() {
-            if(this.fireEvent('beforetoggle', this) !== false){
-                var ce = this.el.select('.navbar-collapse',true).first();
-                ce.toggleClass('in'); // old...
-                if (ce.hasClass('collapse')) {
-                    // show it...
-                    ce.removeClass('collapse');
-                    ce.addClass('show');
-                    var h = ce.getHeight();
-                    Roo.log(h);
-                    ce.removeClass('show');
-                    // at this point we should be able to see it..
-                    ce.addClass('collapsing');
-                    
-                    ce.setHeight(0); // resize it ...
-                    ce.on('transitionend', function() {
-                        Roo.log('done transition');
-                        ce.removeClass('collapsing');
-                        ce.addClass('show');
-                        ce.removeClass('collapse');
-
-                        ce.dom.style.height = '';
-                    }, this, { single: true} );
-                    ce.setHeight(h);
-                    
-                } else {
-                    ce.setHeight(ce.getHeight());
-                    ce.removeClass('show');
-                    ce.addClass('collapsing');
-                    
-                    ce.on('transitionend', function() {
-                        ce.dom.style.height = '';
-                        ce.removeClass('collapsing');
-                        ce.addClass('collapse');
-                    }, this, { single: true} );
-                    ce.setHeight(0);
-                }
-            }
-            
-        }, this);
+        this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
         
         var mark = {
             tag: "div",
@@ -3944,7 +5155,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     
     getChildContainer : function()
     {
-        if (this.el.select('.collapse').getCount()) {
+        if (this.el && this.el.select('.collapse').getCount()) {
             return this.el.select('.collapse',true).first();
         }
         
@@ -3959,8 +5170,80 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     unmask : function()
     {
         this.maskEl.hide();
-    } 
+    },
+    onToggle : function()
+    {
+        
+        if(this.fireEvent('beforetoggle', this) === false){
+            return;
+        }
+        var ce = this.el.select('.navbar-collapse',true).first();
+      
+        if (!ce.hasClass('show')) {
+           this.expand();
+        } else {
+            this.collapse();
+        }
+        
+        
     
+    },
+    /**
+     * Expand the navbar pulldown 
+     */
+    expand : function ()
+    {
+       
+        var ce = this.el.select('.navbar-collapse',true).first();
+        if (ce.hasClass('collapsing')) {
+            return;
+        }
+        ce.dom.style.height = '';
+               // show it...
+        ce.addClass('in'); // old...
+        ce.removeClass('collapse');
+        ce.addClass('show');
+        var h = ce.getHeight();
+        Roo.log(h);
+        ce.removeClass('show');
+        // at this point we should be able to see it..
+        ce.addClass('collapsing');
+        
+        ce.setHeight(0); // resize it ...
+        ce.on('transitionend', function() {
+            //Roo.log('done transition');
+            ce.removeClass('collapsing');
+            ce.addClass('show');
+            ce.removeClass('collapse');
+
+            ce.dom.style.height = '';
+        }, this, { single: true} );
+        ce.setHeight(h);
+        ce.dom.scrollTop = 0;
+    },
+    /**
+     * Collapse the navbar pulldown 
+     */
+    collapse : function()
+    {
+         var ce = this.el.select('.navbar-collapse',true).first();
+       
+        if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
+            // it's collapsed or collapsing..
+            return;
+        }
+        ce.removeClass('in'); // old...
+        ce.setHeight(ce.getHeight());
+        ce.removeClass('show');
+        ce.addClass('collapsing');
+        
+        ce.on('transitionend', function() {
+            ce.dom.style.height = '';
+            ce.removeClass('collapsing');
+            ce.addClass('collapse');
+        }, this, { single: true} );
+        ce.setHeight(0);
+    }
     
     
     
@@ -4027,25 +5310,37 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar,  {
         
         var cfg = {
             tag : this.tag || 'div',
-            cls : 'navbar navbar-expand-lg'
+            cls : 'navbar roo-navbar-simple' //navbar-expand-lg ??
         };
 	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 && this.xtype == 'NavSimplebar') {
+	    return cfg;
+	}
+	
+	
+    
 	
         cfg.cn = [
             {
-                cls: 'nav',
+                cls: 'nav nav-' + this.xtype,
                 tag : 'ul'
             }
         ];
         
          
         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
         
         
@@ -4059,7 +5354,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;
         }
         
@@ -4068,10 +5363,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar,  {
             cfg.cn[0].cls += ' navbar-right';
         }
         
-        if (this.inverse) {
-            cfg.cls += ' navbar-inverse';
-            
-        }
+        
         
         
         return cfg;
@@ -4183,12 +5475,18 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
         
         cn.push({
             tag: 'div',
-            cls: 'collapse navbar-collapse',
+            cls: Roo.bootstrap.version == 4  ? 'nav flex-row roo-navbar-collapse collapse navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
             cn : []
         });
         
         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 ;
             
@@ -4227,6 +5525,13 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
         return this.getChildContainer();
     },
     
+    getChildContainer : function()
+    {
+	 
+	return this.el.select('.roo-navbar-collapse',true).first();
+	 
+	
+    },
     
     initEvents : function()
     {
@@ -4365,15 +5670,27 @@ 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 {
+		// trying to remove so header bar can right align top?
+		if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
+		    // do not use on header bar... 
+		    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 = {
@@ -4387,9 +5704,9 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
         if (this.form === true) {
             cfg = {
                 tag: 'form',
-                cls: 'navbar-form'
+                cls: 'navbar-form form-inline'
             };
-            
+            //nav navbar-right ml-md-auto
             if (this.align === 'right') {
                 cfg.cls += ' navbar-right ml-md-auto';
             } else {
@@ -4474,7 +5791,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);
@@ -4600,6 +5920,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
@@ -4661,16 +5983,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) {
@@ -4679,6 +6005,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 = [
@@ -4692,10 +6039,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;
@@ -4717,6 +6064,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') {
@@ -4797,7 +6157,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
         if (p.parentType == 'NavHeaderbar' && !this.menu) {
             // remove the collapsed menu expand...
-            p.parent().el.select('.navbar-collapse',true).removeClass('in');  
+            p.parent().el.select('.roo-navbar-collapse',true).removeClass('in');  
         }
     },
     
@@ -4818,8 +6178,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);
@@ -5065,7 +6431,7 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
             e.preventDefault();
         }
         
-        this.fireEvent('click', this);
+        this.fireEvent('click', this, e);
     },
     
     disable : function()
@@ -5168,95 +6534,6 @@ Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component,  {
 
  
 
- /*
- * - LGPL
- *
- * element
- * 
- */
-
-/**
- * @class Roo.bootstrap.Element
- * @extends Roo.bootstrap.Component
- * Bootstrap Element class
- * @cfg {String} html contents of the element
- * @cfg {String} tag tag of the element
- * @cfg {String} cls class of the element
- * @cfg {Boolean} preventDefault (true|false) default false
- * @cfg {Boolean} clickable (true|false) default false
- * 
- * @constructor
- * Create a new Element
- * @param {Object} config The config object
- */
-
-Roo.bootstrap.Element = function(config){
-    Roo.bootstrap.Element.superclass.constructor.call(this, config);
-    
-    this.addEvents({
-        // raw events
-        /**
-         * @event click
-         * When a element is chick
-         * @param {Roo.bootstrap.Element} this
-         * @param {Roo.EventObject} e
-         */
-        "click" : true
-    });
-};
-
-Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
-    
-    tag: 'div',
-    cls: '',
-    html: '',
-    preventDefault: false, 
-    clickable: false,
-    
-    getAutoCreate : function(){
-        
-        var cfg = {
-            tag: this.tag,
-            // cls: this.cls, double assign in parent class Component.js :: onRender
-            html: this.html
-        };
-        
-        return cfg;
-    },
-    
-    initEvents: function() 
-    {
-        Roo.bootstrap.Element.superclass.initEvents.call(this);
-        
-        if(this.clickable){
-            this.el.on('click', this.onClick, this);
-        }
-        
-    },
-    
-    onClick : function(e)
-    {
-        if(this.preventDefault){
-            e.preventDefault();
-        }
-        
-        this.fireEvent('click', this, e);
-    },
-    
-    getValue : function()
-    {
-        return this.el.dom.innerHTML;
-    },
-    
-    setValue : function(value)
-    {
-        this.el.dom.innerHTML = value;
-    }
-   
-});
-
- 
-
  /*
  * - LGPL
  *
@@ -6712,8 +7989,10 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 c.html = '<i class="glyphicon"></i>' + c.html;
             }
             
+            // could use BS4 hidden-..-down 
+            
             if(typeof(config.lgHeader) != 'undefined'){
-                hh += '<span class="hidden-xs hidden-sm hidden-md">' + config.lgHeader + '</span>';
+                hh += '<span class="hidden-xs hidden-sm hidden-md ">' + config.lgHeader + '</span>';
             }
             
             if(typeof(config.mdHeader) != 'undefined'){
@@ -6770,14 +8049,18 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 if(typeof(config[size]) == 'undefined'){
                     return;
                 }
-                
+                 
                 if (!config[size]) { // 0 = hidden
-                    c.cls += ' hidden-' + size;
+                    // BS 4 '0' is treated as hide that column and below.
+                    c.cls += ' hidden-' + size + ' hidden' + size + '-down';
                     return;
                 }
                 
-                c.cls += ' col-' + size + '-' + config[size];
-
+                c.cls += ' col-' + size + '-' + config[size] + (
+                    size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+                );
+                
+                
             });
             
             header.cn.push(c)
@@ -7083,12 +8366,18 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                     return;
                 }
                 
+                
+                  
                 if (!config[size]) { // 0 = hidden
-                    td.cls += ' hidden-' + size;
+                    // BS 4 '0' is treated as hide that column and below.
+                    td.cls += ' hidden-' + size + ' hidden' + size + '-down';
                     return;
                 }
                 
-                td.cls += ' col-' + size + '-' + config[size];
+                td.cls += ' col-' + size + '-' + config[size] + (
+                    size == 'xs' ? (' col-' +   config[size] ) : '' // bs4 col-{num} replaces col-xs
+                );
+                 
 
             });
             
@@ -7199,9 +8488,12 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         
         if (tbd) {
             
-            tbd.setSize(ctr.getWidth(),
-                        ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
-            );
+            tbd.setWidth(ctr.getWidth());
+            // if the body has a max height - and then scrolls - we should perhaps set up the height here
+            // this needs fixing for various usage - currently only hydra job advers I think..
+            //tdb.setHeight(
+            //        ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
+            //); 
             var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth);
             cw -= barsize;
         }
@@ -7843,7 +9135,8 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
                 url:this.getUrl(!isPost),
                 method: method,
                 params:isPost ? this.getParams() : null,
-                isUpload: this.form.fileUpload
+                isUpload: this.form.fileUpload,
+                formData : this.form.formData
             }));
             
             this.uploadProgress();
@@ -8886,6 +10179,7 @@ Roo.form.VTypes = function(){
  * @cfg {String} indicatorpos (left|right) default left
  * @cfg {String} capture (user|camera) use for file input only. (default empty)
  * @cfg {String} accept (image|video|audio) use for file input only. (default empty)
+ * @cfg {Boolean} preventMark Do not show tick or cross if error/success
 
  * @cfg {String} align (left|center|right) Default left
  * @cfg {Boolean} forceFeedback (true|false) Default false
@@ -8972,12 +10266,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",
     
@@ -9390,9 +10684,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;
@@ -9728,8 +11023,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){
             
@@ -9759,7 +11054,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){
@@ -9775,12 +11071,16 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             return;
         }
         
+           
         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();
@@ -9806,11 +11106,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){
@@ -9825,8 +11127,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){
             
@@ -10173,9 +11480,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();
@@ -10199,6 +11506,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();
             
@@ -10216,8 +11524,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)){
             
@@ -10244,6 +11556,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();
             
@@ -10266,9 +11579,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();
@@ -10313,7 +11631,7 @@ trigger.applyTo('my-field');
  * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
- * @cfg {String} caret (search|calendar) a fontawesome for the trigger icon see http://fortawesome.github.io/Font-Awesome/icons/
+ * @cfg {String} caret (search|calendar) BS3 only - carat fa name
 
  * @constructor
  * Create a new TriggerField.
@@ -10399,7 +11717,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                 cls: 'glyphicon form-control-feedback'
             };
             
-            if(this.removable && !this.editable && !this.tickable){
+            if(this.removable && !this.editable  ){
                 inputblock = {
                     cls : 'has-feedback',
                     cn :  [
@@ -10423,7 +11741,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
             }
 
         } else {
-            if(this.removable && !this.editable && !this.tickable){
+            if(this.removable && !this.editable ){
                 inputblock = {
                     cls : 'roo-removable',
                     cn :  [
@@ -10521,7 +11839,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                 tag :'span',
                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
                 cn : [
-                    caret,
+                    Roo.bootstrap.version == 3 ? caret : '',
                     {
                         tag: 'span',
                         cls: 'combobox-clear',
@@ -10894,7 +12212,329 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
      */
     onTriggerClick : Roo.emptyFn
 });
- /*
+ 
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.bootstrap.CardUploader
+ * @extends Roo.bootstrap.Button
+ * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
+ * @cfg {Array}  html The button text.
+
+ *
+ * @constructor
+ * Create a new CardUploader
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardUploader = function(config){
+    
+ 
+    
+    Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
+    
+    
+    this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
+        return r.data.id
+        });
+    
+    
+};
+
+Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
+    
+     
+    errorTimeout : 3000,
+     
+    images : false,
+   
+    fileCollection : false,
+    allowBlank : true,
+    
+    getAutoCreate : function()
+    {
+        
+        var cfg =  {
+            cls :'form-group' ,
+            cn : [
+               
+                {
+                    tag: 'label',
+                   //cls : 'input-group-addon',
+                    html : this.fieldLabel
+
+                },
+
+                {
+                    tag: 'input',
+                    type : 'hidden',
+                    value : this.value,
+                    cls : 'd-none  form-control'
+                },
+                
+                {
+                    tag: 'input',
+                    multiple : 'multiple',
+                    type : 'file',
+                    cls : 'd-none  roo-card-upload-selector'
+                },
+                
+                {
+                    cls : 'roo-card-uploader-button-container w-100 mb-2'
+                },
+                {
+                    cls : 'card-columns roo-card-uploader-container'
+                }
+
+            ]
+        };
+           
+         
+        return cfg;
+    },
+    
+    getChildContainer : function() /// what children are added to.
+    {
+        return this.containerEl;
+    },
+   
+    getButtonContainer : function() /// what children are added to.
+    {
+        return this.el.select(".roo-card-uploader-button-container").first();
+    },
+   
+    initEvents : function()
+    {
+        
+        Roo.bootstrap.Input.prototype.initEvents.call(this);
+        
+        var t = this;
+        this.addxtype({
+            xns: Roo.bootstrap,
+
+            xtype : 'Button',
+            container_method : 'getButtonContainer' ,            
+            html :  this.html, // fix changable?
+            cls : 'w-100 ',
+            listeners : {
+                'click' : function(btn, e) {
+                    t.onClick(e);
+                }
+            }
+        });
+        
+        
+        
+        
+        this.urlAPI = (window.createObjectURL && window) || 
+                                (window.URL && URL.revokeObjectURL && URL) || 
+                                (window.webkitURL && webkitURL);
+                        
+         
+         
+         
+        this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
+        
+        this.selectorEl.on('change', this.onFileSelected, this);
+        if (this.images) {
+            var t = this;
+            this.images.forEach(function(img) {
+                t.addCard(img)
+            });
+            this.images = false;
+        }
+        this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
+         
+       
+    },
+    
+   
+    onClick : function(e)
+    {
+        e.preventDefault();
+         
+        this.selectorEl.dom.click();
+         
+    },
+    
+    onFileSelected : function(e)
+    {
+        e.preventDefault();
+        
+        if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+            return;
+        }
+        
+        Roo.each(this.selectorEl.dom.files, function(file){    
+            this.addFile(file);
+        }, this);
+         
+    },
+    
+      
+    
+      
+    
+    addFile : function(file)
+    {
+           
+        if(typeof(file) === 'string'){
+            throw "Add file by name?"; // should not happen
+            return;
+        }
+        
+        if(!file || !this.urlAPI){
+            return;
+        }
+        
+        // file;
+        // file.type;
+        
+        var _this = this;
+        
+        
+        var url = _this.urlAPI.createObjectURL( file);
+           
+        this.addCard({
+            id : Roo.bootstrap.CardUploader.ID--,
+            is_uploaded : false,
+            src : url,
+            title : file.name,
+            mimetype : file.type,
+            preview : false,
+            is_deleted : 0
+        })
+        
+    },
+    
+    addCard : function (data)
+    {
+        // hidden input element?
+        // if the file is not an image...
+        //then we need to use something other that and header_image
+        var t = this;
+        //   remove.....
+        var footer = [
+            {
+                xns : Roo.bootstrap,
+                xtype : 'CardFooter',
+                items: [
+                    {
+                        xns : Roo.bootstrap,
+                        xtype : 'Element',
+                        cls : 'd-flex',
+                        items : [
+                            
+                            {
+                                xns : Roo.bootstrap,
+                                xtype : 'Button',
+                                html : String.format("<small>{0}</small>", data.title),
+                                cls : 'col-11 text-left',
+                                size: 'sm',
+                                weight: 'link',
+                                fa : 'download',
+                                listeners : {
+                                    click : function() {
+                                        this.downloadCard(data.id)
+                                    }
+                                }
+                            },
+                          
+                            {
+                                xns : Roo.bootstrap,
+                                xtype : 'Button',
+                                
+                                size : 'sm',
+                                weight: 'danger',
+                                cls : 'col-1',
+                                fa : 'times',
+                                listeners : {
+                                    click : function() {
+                                        t.removeCard(data.id)
+                                    }
+                                }
+                            }
+                        ]
+                    }
+                    
+                ] 
+            }
+            
+        ];
+
+        var cn = this.addxtype(
+            {
+                 
+                xns : Roo.bootstrap,
+                xtype : 'Card',
+                closeable : true,
+                header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
+                header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
+                header_image_fit_square: true, // fixme  - we probably need to use the 'Img' element to do stuff like this.
+                data : data,
+                html : false,
+                 
+                items : footer,
+                initEvents : function() {
+                    Roo.bootstrap.Card.prototype.initEvents.call(this);
+                    this.imgEl = this.el.select('.card-img-top').first();
+                    if (this.imgEl) {
+                        this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
+                        this.imgEl.set({ 'pointer' : 'cursor' });
+                                  
+                    }
+                    
+                  
+                }
+                
+            }
+        );
+        // dont' really need ot update items.
+        // this.items.push(cn);
+        this.fileCollection.add(cn);
+        this.updateInput();
+        
+    },
+    removeCard : function(id)
+    {
+        
+        var card  = this.fileCollection.get(id);
+        card.data.is_deleted = 1;
+        card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
+        this.fileCollection.remove(card);
+        //this.items = this.items.filter(function(e) { return e != card });
+        // dont' really need ot update items.
+        card.el.dom.parentNode.removeChild(card.el.dom);
+        
+    },
+    reset: function()
+    {
+        this.fileCollection.each(function(card) {
+            card.el.dom.parentNode.removeChild(card.el.dom);    
+        });
+        this.fileCollection.clear();
+        this.updateInput();
+    },
+    
+    updateInput : function()
+    {
+        var data = [];
+        this.fileCollection.each(function(e) {
+            data.push(e.data);
+        });
+        
+        this.inputEl().dom.value = JSON.stringify(data);
+    }
+    
+    
+});
+
+
+Roo.bootstrap.CardUploader.ID = -1;/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -11680,6 +13320,16 @@ Roo.extend(Roo.data.Store, Roo.util.Observable, {
         var r = this.reader.readRecords(o);
         this.loadRecords(r, {add: append}, true);
     },
+    
+     /**
+     * using 'cn' the nested child reader read the child array into it's child stores.
+     * @param {Object} rec The record with a 'children array
+     */
+    loadDataFromChildren : function(rec)
+    {
+        this.loadData(this.reader.toLoadData(rec));
+    },
+    
 
     /**
      * Gets the number of cached records.
@@ -11984,14 +13634,16 @@ Roo.extend(Roo.data.Store, Roo.util.Observable, {
  * Small helper class to make creating Stores from Array data easier.
  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
  * @cfg {Array} fields An array of field definition objects, or field name strings.
+ * @cfg {Object} an existing reader (eg. copied from another store)
  * @cfg {Array} data The multi-dimensional array of data
  * @constructor
  * @param {Object} config
  */
-Roo.data.SimpleStore = function(config){
+Roo.data.SimpleStore = function(config)
+{
     Roo.data.SimpleStore.superclass.constructor.call(this, {
         isLocal : true,
-        reader: new Roo.data.ArrayReader({
+        reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
                 id: config.id
             },
             Roo.data.Record.create(config.fields)
@@ -12168,6 +13820,9 @@ Roo.data.DataReader = function(meta, recordType){
 };
 
 Roo.data.DataReader.prototype = {
+    
+    
+    readerType : 'Data',
      /**
      * Create an empty record
      * @param {Object} data (optional) - overlay some values
@@ -12188,6 +13843,7 @@ Roo.data.DataReader.prototype = {
         return new this.recordType(Roo.apply(da, d));
     }
     
+    
 };/*
  * Based on:
  * Ext JS Library 1.1.1
@@ -12295,7 +13951,7 @@ Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
         params = params || {};
         var result;
         try {
-            result = reader.readRecords(this.data);
+            result = reader.readRecords(params.data ? params.data :this.data);
         }catch(e){
             this.fireEvent("loadexception", this, arg, null, e);
             callback.call(scope, null, arg, false);
@@ -12726,6 +14382,8 @@ Roo.data.JsonReader = function(meta, recordType){
 };
 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
     
+    readerType : 'Json',
+    
     /**
      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
      * Used by Store query builder to append _requestMeta to params.
@@ -12867,6 +14525,14 @@ Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
             records : records,
             totalRecords : totalRecords
         };
+    },
+    // used when loading children.. @see loadDataFromChildren
+    toLoadData: function(rec)
+    {
+	// expect rec just to be an array.. eg [a,b,c, [...] << cn ]
+	var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+	return { data : data, total : data.length };
+	
     }
 });/*
  * Based on:
@@ -12902,51 +14568,68 @@ var myReader = new Roo.data.ArrayReader({
  * <pre><code>
 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
   </code></pre>
- * @cfg {String} id (optional) The subscript within row Array that provides an ID for the Record
+ 
  * @constructor
  * Create a new JsonReader
  * @param {Object} meta Metadata configuration options.
- * @param {Object} recordType Either an Array of field definition objects
+ * @param {Object|Array} recordType Either an Array of field definition objects
+ * 
+ * @cfg {Array} fields Array of field definition objects
+ * @cfg {String} id Name of the property within a row object that contains a record identifier value.
  * as specified to {@link Roo.data.Record#create},
  * or an {@link Roo.data.Record} object
+ *
+ * 
  * created using {@link Roo.data.Record#create}.
  */
-Roo.data.ArrayReader = function(meta, recordType){
-    Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType);
+Roo.data.ArrayReader = function(meta, recordType)
+{    
+    Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
 };
 
 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
-    /**
+    
+      /**
      * Create a data block containing Roo.data.Records from an XML document.
      * @param {Object} o An Array of row objects which represents the dataset.
-     * @return {Object} data A data block which is used by an Roo.data.Store object as
+     * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
      * a cache of Roo.data.Records.
      */
-    readRecords : function(o){
+    readRecords : function(o)
+    {
         var sid = this.meta ? this.meta.id : null;
     	var recordType = this.recordType, fields = recordType.prototype.fields;
     	var records = [];
     	var root = o;
-	    for(var i = 0; i < root.length; i++){
-		    var n = root[i];
-	        var values = {};
-	        var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
-	        for(var j = 0, jlen = fields.length; j < jlen; j++){
-                var f = fields.items[j];
-                var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
-                var v = n[k] !== undefined ? n[k] : f.defaultValue;
-                v = f.convert(v);
-                values[f.name] = v;
-            }
-	        var record = new recordType(values, id);
-	        record.json = n;
-	        records[records.length] = record;
+	for(var i = 0; i < root.length; i++){
+		var n = root[i];
+	    var values = {};
+	    var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
+	    for(var j = 0, jlen = fields.length; j < jlen; j++){
+		var f = fields.items[j];
+		var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
+		var v = n[k] !== undefined ? n[k] : f.defaultValue;
+		v = f.convert(v);
+		values[f.name] = v;
 	    }
-	    return {
-	        records : records,
-	        totalRecords : records.length
-	    };
+	    var record = new recordType(values, id);
+	    record.json = n;
+	    records[records.length] = record;
+	}
+	return {
+	    records : records,
+	    totalRecords : records.length
+	};
+    },
+    // used when loading children.. @see loadDataFromChildren
+    toLoadData: function(rec)
+    {
+	// expect rec just to be an array.. eg [a,b,c, [...] << cn ]
+	return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+	
     }
+    
+    
 });/*
  * - LGPL
  * * 
@@ -13092,7 +14775,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
      */
 
      /**
-     * @cfg {String/Roo.Template} tpl The template to use to render the output
+     * @cfg {String/Roo.Template} tpl The template to use to render the output default is  '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' 
      */
      
      /**
@@ -13244,12 +14927,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",
     
@@ -13442,6 +15125,8 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             combobox.cn.push(feedback);
         }
         
+        
+        
         var indicator = {
             tag : 'i',
             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
@@ -15232,8 +16917,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         if(!this.multiple && this.showToggleBtn){
             
             var caret = {
-                        tag: 'span',
-                        cls: 'caret'
+                cls: 'caret'
             };
             
             if (this.caret != false) {
@@ -15248,7 +16932,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                 tag :'span',
                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
                 cn : [
-                    caret,
+                    Roo.bootstrap.version == 3 ? caret : '',
                     {
                         tag: 'span',
                         cls: 'combobox-clear',
@@ -18275,7 +19959,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') {
@@ -18307,22 +19991,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;
@@ -18514,10 +20204,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 || ''
         };
         
@@ -18529,6 +20221,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
             cfg.tabId = this.tabId;
         }
         
+	
         
         return cfg;
     },
@@ -20739,6 +22432,11 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
     inline: false,
     tooltip : '',
     
+    // checkbox success does not make any sense really.. 
+    invalidClass : "",
+    validClass : "",
+    
+    
     getAutoCreate : function()
     {
         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
@@ -20747,10 +22445,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         
         var cfg = {};
         
-        cfg.cls = 'form-group ' + this.inputType; //input-group
+        cfg.cls = 'form-group form-check ' + this.inputType; //input-group
         
         if(this.inline){
-            cfg.cls += ' ' + this.inputType + '-inline';
+            cfg.cls += ' ' + this.inputType + '-inline  form-check-inline';
         }
         
         var input =  {
@@ -20839,6 +22537,22 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
             }
             
         }
+        var boxLabelCfg = false;
+        
+        if(this.boxLabel){
+           
+            boxLabelCfg = {
+                tag: 'label',
+                //'for': id, // box label is handled by onclick - so no for...
+                cls: 'box-label',
+                html: this.boxLabel
+            };
+            if(this.tooltip){
+                boxLabelCfg.tooltip = this.tooltip;
+            }
+             
+        }
+        
         
         if (align ==='left' && this.fieldLabel.length) {
 //                Roo.log("left and has label");
@@ -20857,6 +22571,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
                 }
             ];
             
+            if (boxLabelCfg) {
+                cfg.cn[1].cn.push(boxLabelCfg);
+            }
+            
             if(this.labelWidth > 12){
                 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
             }
@@ -20900,29 +22618,22 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
                     inputblock
                     
                 ];
+                if (boxLabelCfg) {
+                    cfg.cn.push(boxLabelCfg);
+                }
 
         } else {
             
 //                Roo.log(" no label && no align");
                 cfg.cn = [  inputblock ] ;
-                
+                if (boxLabelCfg) {
+                    cfg.cn.push(boxLabelCfg);
+                }
+
                 
         }
         
-        if(this.boxLabel){
-             var boxLabelCfg = {
-                tag: 'label',
-                //'for': id, // box label is handled by onclick - so no for...
-                cls: 'box-label',
-                html: this.boxLabel
-            };
-            
-            if(this.tooltip){
-                boxLabelCfg.tooltip = this.tooltip;
-            }
-             
-            cfg.cn.push(boxLabelCfg);
-        }
+       
         
         if(this.inputType != 'radio'){
             cfg.cn.push(hidden);
@@ -21174,16 +22885,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;
         }
         
@@ -21194,8 +22917,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');
+            }
         }
     },
     
@@ -21224,17 +22953,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;
         }
         
@@ -21245,8 +22987,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');
+            }
         }
         
     },
@@ -21260,8 +23008,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']);
         }
     },
     
@@ -21969,7 +23717,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             //<style type="text/css">' +
             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
             //'</style>' +
-            ' </head><body class="' +  cls + '"></body></html>';
+            ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
     },
 
     // private
@@ -22124,17 +23872,32 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             html = this.cleanHtml(html);
             // fix up the special chars.. normaly like back quotes in word...
             // however we do not want to do this with chinese..
-            html = html.replace(/([\x80-\uffff])/g, function (a, b) {
-                var cc = b.charCodeAt();
-                if (
+            html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
+                
+                var cc = match.charCodeAt();
+
+                // Get the character value, handling surrogate pairs
+                if (match.length == 2) {
+                    // It's a surrogate pair, calculate the Unicode code point
+                    var high = match.charCodeAt(0) - 0xD800;
+                    var low  = match.charCodeAt(1) - 0xDC00;
+                    cc = (high * 0x400) + low + 0x10000;
+                }  else if (
                     (cc >= 0x4E00 && cc < 0xA000 ) ||
                     (cc >= 0x3400 && cc < 0x4E00 ) ||
                     (cc >= 0xf900 && cc < 0xfb00 )
                 ) {
-                        return b;
-                }
-                return "&#"+cc+";" 
+                        return match;
+                }  
+         
+                // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
+                return "&#" + cc + ";";
+                
+                
             });
+            
+            
+             
             if(this.owner.fireEvent('beforesync', this, html) !== false){
                 this.el.dom.value = html;
                 this.owner.fireEvent('sync', this, html);
@@ -22318,7 +24081,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     insertTag : function(tg)
     {
         // could be a bit smarter... -> wrap the current selected tRoo..
-        if (tg.toLowerCase() == 'span' || tg.toLowerCase() == 'code') {
+        if (tg.toLowerCase() == 'span' ||
+            tg.toLowerCase() == 'code' ||
+            tg.toLowerCase() == 'sup' ||
+            tg.toLowerCase() == 'sub' 
+            ) {
             
             range = this.createRange(this.getSelection());
             var wrappingNode = this.doc.createElement(tg.toLowerCase());
@@ -22814,6 +24581,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
         var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
         
+        // spans with no attributes - just remove them..
+        if ((!node.attributes || !node.attributes.length) && lcname == 'span') { 
+            remove_keep_children = true;
+        }
+        
         // remove <a name=....> as rendering on yahoo mailer is borked with this.
         // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
         
@@ -22834,6 +24606,10 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         }
         
         if (!node.attributes || !node.attributes.length) {
+            
+          
+            
+            
             this.cleanUpChildren(node);
             return;
         }
@@ -22930,11 +24706,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             
             if (a.name == 'class') {
                 if (a.value.match(/^Mso/)) {
-                    node.className = '';
+                    node.removeAttribute('class');
                 }
                 
                 if (a.value.match(/^body$/)) {
-                    node.className = '';
+                    node.removeAttribute('class');
                 }
                 continue;
             }
@@ -22955,12 +24731,29 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
      */
     cleanWord : function(node)
     {
-        
-        
         if (!node) {
             this.cleanWord(this.doc.body);
             return;
         }
+        
+        if(
+                node.nodeName == 'SPAN' &&
+                !node.hasAttributes() &&
+                node.childNodes.length == 1 &&
+                node.firstChild.nodeName == "#text"  
+        ) {
+            var textNode = node.firstChild;
+            node.removeChild(textNode);
+            if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
+                node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
+            }
+            node.parentNode.insertBefore(textNode, node);
+            if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
+                node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
+            }
+            node.parentNode.removeChild(node);
+        }
+        
         if (node.nodeName == "#text") {
             // clean up silly Windows -- stuff?
             return; 
@@ -22975,16 +24768,20 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             node.parentNode.removeChild(node);
             return;
         }
-        
+        //Roo.log(node.tagName);
         // remove - but keep children..
-        if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|font)/)) {
+        if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
+            //Roo.log('-- removed');
             while (node.childNodes.length) {
                 var cn = node.childNodes[0];
                 node.removeChild(cn);
                 node.parentNode.insertBefore(cn, node);
+                // move node to parent - and clean it..
+                this.cleanWord(cn);
             }
             node.parentNode.removeChild(node);
-            this.iterateChildren(node, this.cleanWord);
+            /// no need to iterate chidlren = it's got none..
+            //this.iterateChildren(node, this.cleanWord);
             return;
         }
         // clean styles
@@ -23890,9 +25687,7 @@ Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea,  {
     /**
      * @cfg {String} inputType @hide
      */
-    /**
-     * @cfg {String} invalidClass @hide
-     */
+     
     /**
      * @cfg {String} invalidText @hide
      */
@@ -23914,6 +25709,7 @@ Roo.namespace('Roo.bootstrap.htmleditor');
  * @class Roo.bootstrap.HtmlEditorToolbar1
  * Basic Toolbar
  * 
+ * @example
  * Usage:
  *
  new Roo.bootstrap.HtmlEditor({
@@ -24234,6 +26030,12 @@ Roo.extend(Roo.bootstrap.Table.AbstractSelectionModel, Roo.util.Observable,  {
      */
     isLocked : function(){
         return this.locked;
+    },
+    
+    
+    initEvents : function ()
+    {
+        
     }
 });
 /**
@@ -27040,17 +28842,15 @@ Roo.apply(Roo.bootstrap.LocationPicker, {
     }
     
     
-});/*
- * - LGPL
- *
- * Alert
- * 
- */
-
-/**
+});/**
  * @class Roo.bootstrap.Alert
  * @extends Roo.bootstrap.Component
- * Bootstrap Alert class
+ * Bootstrap Alert class - shows an alert area box
+ * eg
+ * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
+  Enter a valid email address
+</div>
+ * @licence LGPL
  * @cfg {String} title The title of alert
  * @cfg {String} html The content of alert
  * @cfg {String} weight (  success | info | warning | danger )
@@ -30314,8 +32114,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
  * 
@@ -30437,10 +32237,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);
     },
@@ -30455,10 +32259,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);
     }
@@ -34030,21 +35838,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'
@@ -34196,14 +36006,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);
     },
     
@@ -34213,13 +36028,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);
         
@@ -34975,6 +36794,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).
@@ -35229,13 +37051,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();
@@ -35806,6 +37633,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 */
@@ -35827,15 +37660,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 
@@ -35940,7 +37773,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;
         
@@ -36179,11 +38012,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);
@@ -36874,6 +38708,7 @@ Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, {
 
 
 
+
 Roo.bootstrap.layout.North = function(config)
 {
     config.region = 'north';
@@ -37066,8 +38901,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.
@@ -37768,6 +39602,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;
     
     
     
@@ -37866,7 +39701,7 @@ panel.addxtype({
         return this.layout.addxtype(cfg);
     
     }
-});        /*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -37930,15 +39765,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
@@ -38029,7 +39897,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.
@@ -38094,9 +39966,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();
@@ -38178,7 +40052,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;
@@ -38244,12 +40121,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;
@@ -38309,7 +40196,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;
     },
@@ -38348,7 +40237,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]);
         
@@ -38388,12 +40277,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>'
+                            )
                 );
             }
             
@@ -38460,8 +40355,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 */
@@ -38516,7 +40416,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();
@@ -38536,7 +40436,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);
     },
@@ -38583,10 +40483,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);
     },
 */
     /**
@@ -38595,7 +40495,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" : "");
     },
 
     /**
@@ -38621,7 +40521,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();
     //},
 
@@ -38650,7 +40550,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");
         }
     },
 
@@ -38659,7 +40559,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
      */
     enable : function(){
         this.disabled = false;
-        this.pnode.removeClass("disabled");
+        this.status_node.removeClass("disabled");
     },
 
     /**
@@ -41272,4 +43172,601 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
         return this.el.select('input.hidden-number-input',true).first();
     }
     
-});
\ No newline at end of file
+});/**
+ * @class Roo.bootstrap.BezierSignature
+ * @extends Roo.bootstrap.Component
+ * Bootstrap BezierSignature class
+ * This script refer to:
+ *    Title: Signature Pad
+ *    Author: szimek
+ *    Availability: https://github.com/szimek/signature_pad
+ *
+ * @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({
+        "resize" : true
+    });
+};
+
+Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
+{
+     
+    curve_data: [],
+    
+    is_empty: true,
+    
+    mouse_btn_down: true,
+    
+    /**
+     * @cfg {int} canvas height
+     */
+    canvas_height: '200px',
+    
+    /**
+     * @cfg {float|function} Radius of a single dot.
+     */ 
+    dot_size: false,
+    
+    /**
+     * @cfg {float} Minimum width of a line. Defaults to 0.5.
+     */
+    min_width: 0.5,
+    
+    /**
+     * @cfg {float} Maximum width of a line. Defaults to 2.5.
+     */
+    max_width: 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.
+     */
+    min_distance: 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.
+     */
+    bg_color: '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".
+     */
+    dot_color: 'black',
+    
+    /**
+     * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
+     */ 
+    velocity_filter_weight: 0.7,
+    
+    /**
+     * @cfg {function} Callback when stroke begin. 
+     */
+    onBegin: false,
+    
+    /**
+     * @cfg {function} Callback when stroke end.
+     */
+    onEnd: false,
+    
+    getAutoCreate : function()
+    {
+        var cls = 'roo-signature column';
+        
+        if(this.cls){
+            cls += ' ' + this.cls;
+        }
+        
+        var col_sizes = [
+            'lg',
+            'md',
+            'sm',
+            'xs'
+        ];
+        
+        for(var i = 0; i < col_sizes.length; i++) {
+            if(this[col_sizes[i]]) {
+                cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
+            }
+        }
+        
+        var cfg = {
+            tag: 'div',
+            cls: cls,
+            cn: [
+                {
+                    tag: 'div',
+                    cls: 'roo-signature-body',
+                    cn: [
+                        {
+                            tag: 'canvas',
+                            cls: 'roo-signature-body-canvas',
+                            height: this.canvas_height,
+                            width: this.canvas_width
+                        }
+                    ]
+                },
+                {
+                    tag: 'input',
+                    type: 'file',
+                    style: 'display: none'
+                }
+            ]
+        };
+        
+        return cfg;
+    },
+    
+    initEvents: function() 
+    {
+        Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
+        
+        var canvas = this.canvasEl();
+        
+        // mouse && touch event swapping...
+        canvas.dom.style.touchAction = 'none';
+        canvas.dom.style.msTouchAction = 'none';
+        
+        this.mouse_btn_down = false;
+        canvas.on('mousedown', this._handleMouseDown, this);
+        canvas.on('mousemove', this._handleMouseMove, this);
+        Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
+        
+        if (window.PointerEvent) {
+            canvas.on('pointerdown', this._handleMouseDown, this);
+            canvas.on('pointermove', this._handleMouseMove, this);
+            Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
+        }
+        
+        if ('ontouchstart' in window) {
+            canvas.on('touchstart', this._handleTouchStart, this);
+            canvas.on('touchmove', this._handleTouchMove, this);
+            canvas.on('touchend', this._handleTouchEnd, this);
+        }
+        
+        Roo.EventManager.onWindowResize(this.resize, this, true);
+        
+        // file input event
+        this.fileEl().on('change', this.uploadImage, this);
+        
+        this.clear();
+        
+        this.resize();
+    },
+    
+    resize: function(){
+        
+        var canvas = this.canvasEl().dom;
+        var ctx = this.canvasElCtx();
+        var img_data = false;
+        
+        if(canvas.width > 0) {
+            var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        }
+        // setting canvas width will clean img data
+        canvas.width = 0;
+        
+        var style = window.getComputedStyle ? 
+            getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
+            
+        var padding_left = parseInt(style.paddingLeft) || 0;
+        var padding_right = parseInt(style.paddingRight) || 0;
+        
+        canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
+        
+        if(img_data) {
+            ctx.putImageData(img_data, 0, 0);
+        }
+    },
+    
+    _handleMouseDown: function(e)
+    {
+        if (e.browserEvent.which === 1) {
+            this.mouse_btn_down = true;
+            this.strokeBegin(e);
+        }
+    },
+    
+    _handleMouseMove: function (e)
+    {
+        if (this.mouse_btn_down) {
+            this.strokeMoveUpdate(e);
+        }
+    },
+    
+    _handleMouseUp: function (e)
+    {
+        if (e.browserEvent.which === 1 && this.mouse_btn_down) {
+            this.mouse_btn_down = false;
+            this.strokeEnd(e);
+        }
+    },
+    
+    _handleTouchStart: function (e) {
+        
+        e.preventDefault();
+        if (e.browserEvent.targetTouches.length === 1) {
+            // var touch = e.browserEvent.changedTouches[0];
+            // this.strokeBegin(touch);
+            
+             this.strokeBegin(e); // assume e catching the correct xy...
+        }
+    },
+    
+    _handleTouchMove: function (e) {
+        e.preventDefault();
+        // var touch = event.targetTouches[0];
+        // _this._strokeMoveUpdate(touch);
+        this.strokeMoveUpdate(e);
+    },
+    
+    _handleTouchEnd: function (e) {
+        var wasCanvasTouched = e.target === this.canvasEl().dom;
+        if (wasCanvasTouched) {
+            e.preventDefault();
+            // var touch = event.changedTouches[0];
+            // _this._strokeEnd(touch);
+            this.strokeEnd(e);
+        }
+    },
+    
+    reset: function () {
+        this._lastPoints = [];
+        this._lastVelocity = 0;
+        this._lastWidth = (this.min_width + this.max_width) / 2;
+        this.canvasElCtx().fillStyle = this.dot_color;
+    },
+    
+    strokeMoveUpdate: function(e)
+    {
+        this.strokeUpdate(e);
+        
+        if (this.throttle) {
+            this.throttleStroke(this.strokeUpdate, this.throttle);
+        }
+        else {
+            this.strokeUpdate(e);
+        }
+    },
+    
+    strokeBegin: function(e)
+    {
+        var newPointGroup = {
+            color: this.dot_color,
+            points: []
+        };
+        
+        if (typeof this.onBegin === 'function') {
+            this.onBegin(e);
+        }
+        
+        this.curve_data.push(newPointGroup);
+        this.reset();
+        this.strokeUpdate(e);
+    },
+    
+    strokeUpdate: function(e)
+    {
+        var rect = this.canvasEl().dom.getBoundingClientRect();
+        var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
+        var lastPointGroup = this.curve_data[this.curve_data.length - 1];
+        var lastPoints = lastPointGroup.points;
+        var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
+        var isLastPointTooClose = lastPoint
+            ? point.distanceTo(lastPoint) <= this.min_distance
+            : false;
+        var color = lastPointGroup.color;
+        if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
+            var curve = this.addPoint(point);
+            if (!lastPoint) {
+                this.drawDot({color: color, point: point});
+            }
+            else if (curve) {
+                this.drawCurve({color: color, curve: curve});
+            }
+            lastPoints.push({
+                time: point.time,
+                x: point.x,
+                y: point.y
+            });
+        }
+    },
+    
+    strokeEnd: function(e)
+    {
+        this.strokeUpdate(e);
+        if (typeof this.onEnd === 'function') {
+            this.onEnd(e);
+        }
+    },
+    
+    addPoint:  function (point) {
+        var _lastPoints = this._lastPoints;
+        _lastPoints.push(point);
+        if (_lastPoints.length > 2) {
+            if (_lastPoints.length === 3) {
+                _lastPoints.unshift(_lastPoints[0]);
+            }
+            var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+            var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
+            _lastPoints.shift();
+            return curve;
+        }
+        return null;
+    },
+    
+    calculateCurveWidths: function (startPoint, endPoint) {
+        var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
+            (1 - this.velocity_filter_weight) * this._lastVelocity;
+
+        var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
+        var widths = {
+            end: newWidth,
+            start: this._lastWidth
+        };
+        
+        this._lastVelocity = velocity;
+        this._lastWidth = newWidth;
+        return widths;
+    },
+    
+    drawDot: function (_a) {
+        var color = _a.color, point = _a.point;
+        var ctx = this.canvasElCtx();
+        var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
+        ctx.beginPath();
+        this.drawCurveSegment(point.x, point.y, width);
+        ctx.closePath();
+        ctx.fillStyle = color;
+        ctx.fill();
+    },
+    
+    drawCurve: function (_a) {
+        var color = _a.color, curve = _a.curve;
+        var ctx = this.canvasElCtx();
+        var widthDelta = curve.endWidth - curve.startWidth;
+        var drawSteps = Math.floor(curve.length()) * 2;
+        ctx.beginPath();
+        ctx.fillStyle = color;
+        for (var i = 0; i < drawSteps; i += 1) {
+        var t = i / drawSteps;
+        var tt = t * t;
+        var ttt = tt * t;
+        var u = 1 - t;
+        var uu = u * u;
+        var uuu = uu * u;
+        var x = uuu * curve.startPoint.x;
+        x += 3 * uu * t * curve.control1.x;
+        x += 3 * u * tt * curve.control2.x;
+        x += ttt * curve.endPoint.x;
+        var y = uuu * curve.startPoint.y;
+        y += 3 * uu * t * curve.control1.y;
+        y += 3 * u * tt * curve.control2.y;
+        y += ttt * curve.endPoint.y;
+        var width = curve.startWidth + ttt * widthDelta;
+        this.drawCurveSegment(x, y, width);
+        }
+        ctx.closePath();
+        ctx.fill();
+    },
+    
+    drawCurveSegment: function (x, y, width) {
+        var ctx = this.canvasElCtx();
+        ctx.moveTo(x, y);
+        ctx.arc(x, y, width, 0, 2 * Math.PI, false);
+        this.is_empty = false;
+    },
+    
+    clear: function()
+    {
+        var ctx = this.canvasElCtx();
+        var canvas = this.canvasEl().dom;
+        ctx.fillStyle = this.bg_color;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        this.curve_data = [];
+        this.reset();
+        this.is_empty = true;
+    },
+    
+    fileEl: function()
+    {
+        return  this.el.select('input',true).first();
+    },
+    
+    canvasEl: function()
+    {
+        return this.el.select('canvas',true).first();
+    },
+    
+    canvasElCtx: function()
+    {
+        return this.el.select('canvas',true).first().dom.getContext('2d');
+    },
+    
+    getImage: function(type)
+    {
+        if(this.is_empty) {
+            return false;
+        }
+        
+        // encryption ?
+        return this.canvasEl().dom.toDataURL('image/'+type, 1);
+    },
+    
+    drawFromImage: function(img_src)
+    {
+        var img = new Image();
+        
+        img.onload = function(){
+            this.canvasElCtx().drawImage(img, 0, 0);
+        }.bind(this);
+        
+        img.src = img_src;
+        
+        this.is_empty = false;
+    },
+    
+    selectImage: function()
+    {
+        this.fileEl().dom.click();
+    },
+    
+    uploadImage: function(e)
+    {
+        var reader = new FileReader();
+        
+        reader.onload = function(e){
+            var img = new Image();
+            img.onload = function(){
+                this.reset();
+                this.canvasElCtx().drawImage(img, 0, 0);
+            }.bind(this);
+            img.src = e.target.result;
+        }.bind(this);
+        
+        reader.readAsDataURL(e.target.files[0]);
+    },
+    
+    // Bezier Point Constructor
+    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 Constructor
+    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, scope) {
+            var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
+            var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
+            return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+        };
+        Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
+            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 scope.Point(m1.x + tx, m1.y + ty),
+                c2: new scope.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;
+    }()),
+    
+    throttleStroke: function(fn, wait) {
+      if (wait === void 0) { wait = 250; }
+      var previous = 0;
+      var timeout = null;
+      var result;
+      var storedContext;
+      var storedArgs;
+      var later = function () {
+          previous = Date.now();
+          timeout = null;
+          result = fn.apply(storedContext, storedArgs);
+          if (!timeout) {
+              storedContext = null;
+              storedArgs = [];
+          }
+      };
+      return function wrapper() {
+          var args = [];
+          for (var _i = 0; _i < arguments.length; _i++) {
+              args[_i] = arguments[_i];
+          }
+          var now = Date.now();
+          var remaining = wait - (now - previous);
+          storedContext = this;
+          storedArgs = args;
+          if (remaining <= 0 || remaining > wait) {
+              if (timeout) {
+                  clearTimeout(timeout);
+                  timeout = null;
+              }
+              previous = now;
+              result = fn.apply(storedContext, storedArgs);
+              if (!timeout) {
+                  storedContext = null;
+                  storedArgs = [];
+              }
+          }
+          else if (!timeout) {
+              timeout = window.setTimeout(later, remaining);
+          }
+          return result;
+      };
+  }
+  
+});
+
+ 
+
+ 
\ No newline at end of file