Merging 3.2.3 changes

grunt/babel.js

@@ -1,9 +1,12 @@
 module.exports = {
     options: {
+        babelrc: false,
         plugins: [
             'transform-react-jsx',
             'transform-object-rest-spread',
-            'transform-es2015-destructuring'
+            'transform-es2015-destructuring',
+            "transform-decorators-legacy",
+            "transform-class-properties"
         ]
     },
     dist: {
@@ -13,4 +16,4 @@ module.exports = {
             'src/js/page.react.js': 'src/js/page.react.jsx'
         }
     }
-};
+};

package.json

@@ -55,6 +55,8 @@
     "babel-helpers": "^6.22.0",
     "babel-install": "2.1.0",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-es2015-destructuring": "^6.19.0",
     "babel-plugin-transform-object-rest-spread": "^6.20.0",
     "babel-plugin-transform-react-jsx": "^6.8.0",

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobiscroll-angular",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "Angular UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

packages/angularjs/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobiscroll-angularjs",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "AngularJS UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

packages/javascript/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobiscroll-javascript",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "Framework agnostic UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

packages/jquery/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobiscroll-jquery",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "jQuery and jQuery Mobile UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

packages/knockout/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobiscroll-knockout",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "Knockout UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobiscroll-react",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "React UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",
@@ -37,7 +37,8 @@
         "dist/css/icons_mobiscroll.woff"
     ],
     "dependencies": {
-        "react": ">=0.13.0",
-        "react-dom": ">=0.13.0"
+        "react": ">=15.3.0",
+        "react-dom": ">=15.3.0",
+        "prop-types": ">=15.5.0"
     }
 }

src/js/classes/form-control.js

@@ -37,7 +37,7 @@ function getRipple(theme) {
 class FormControl {
     constructor(elm, settings) {
 
-        const s = extend({}, defaults, settings);
+        const s = extend({}, defaults, mobiscroll.settings, settings);
         const $elm = $(elm);
         const $p = $elm.parent();
         const $parent = $p.hasClass('mbsc-input-wrap') ? $p.parent() : $p;

src/js/classes/frame.js

@@ -563,6 +563,8 @@ const Frame = function (el, settings, inherit) {
 
         hasButtons = buttons.length > 0;
 
+        touched = false;
+
         if (doAnim !== false) {
             if (s.display == 'top') {
                 doAnim = doAnim || 'slidedown';

src/js/classes/progress.js

@@ -197,6 +197,7 @@ Progress.prototype = {
     _css: 'mbsc-progress',
     _hasTheme: true,
     _hasLang: true,
+    _hasDef: true,
     _defaults: {
         min: 0,
         max: 100,

src/js/classes/slider-base.js

@@ -30,6 +30,7 @@ const SliderBase = function (elm, settings, inherit) {
         min,
         moved,
         multiple,
+        oldValue,
         step,
         s,
         scale,
@@ -223,7 +224,7 @@ const SliderBase = function (elm, settings, inherit) {
         }
 
         if (that._update) {
-            that._update(v, value, index, percent, multiple, refresh, $handleCont);
+            v = that._update(v, value, index, percent, multiple, refresh, $handleCont);
         } else {
             $handleCont.css({
                 left: isRtl ? 'auto' : (percent || getPercent(v)) + '%',
@@ -238,14 +239,18 @@ const SliderBase = function (elm, settings, inherit) {
         }
 
         // Check if value changed
-        if (fill && value[index] != v) {
+        if (oldValue[index] != v) {
             changed = true;
 
+            oldValue[index] = v;
+
             // Store new value
             value[index] = v;
 
-            // Set new value to the input
-            that._fillValue(v, index, change);
+            if (fill) {
+                // Set new value to the input
+                that._fillValue(v, index, change);
+            }
         }
 
         $handle.attr('aria-valuenow', v);
@@ -288,6 +293,7 @@ const SliderBase = function (elm, settings, inherit) {
         multiple = $elm.length > 1;
         isRtl = s.rtl;
         value = [];
+        oldValue = [];
 
         // Read values
         $elm.each(function (i) {
@@ -357,6 +363,10 @@ const SliderBase = function (elm, settings, inherit) {
             val = [val];
         }
 
+        $.each(val, function (i, v) {
+            value[i] = v;
+        });
+
         $.each(val, function (i, v) {
             updateValue(v, i, true, false, true, change);
         });

src/js/classes/slider.js

@@ -84,6 +84,9 @@ const Slider = function (elm, settings, inherit) {
         if (!multiple && (value[index] != v || refresh)) {
             that._display(v);
         }
+
+        // Return validated value
+        return v;
     };
 
     that._readValue = function ($elm) {
@@ -168,6 +171,7 @@ Slider.prototype = {
     _css: 'mbsc-progress mbsc-slider',
     _hasTheme: true,
     _hasLang: true,
+    _hasDef: true,
     _defaults: {
         changeEvent: 'change',
         stopProp: true,

src/js/classes/stepper.js

@@ -227,7 +227,7 @@ const Stepper = function (control, settings) {
         displayValue = $control.attr('data-val') || s.val;
         val = Math.min(max, Math.max(Math.round(+control.value / step) * step || 0, min));
 
-        theme = mobiscroll.themes.form[settings.theme];
+        theme = mobiscroll.themes.form[s.theme];
         ripple = theme && theme.addRipple ? theme : null;
 
         if (!ready) {
@@ -292,6 +292,7 @@ const Stepper = function (control, settings) {
 
 Stepper.prototype = {
     _class: 'stepper',
+    _hasDef: true,
     _defaults: {
         min: 0,
         max: 100,

src/js/classes/switch.js

@@ -84,6 +84,7 @@ Switch.prototype = {
     _css: 'mbsc-switch',
     _hasTheme: true,
     _hasLang: true,
+    _hasDef: true,
     _defaults: {
         stopProp: true,
         offText: 'Off',

src/js/core/core.js

@@ -1,5 +1,5 @@
 /*!
- * Mobiscroll v3.2.2
+ * Mobiscroll v3.2.3
  * http://mobiscroll.com
  *
  * Copyright 2010-2016, Acid Media
@@ -64,7 +64,7 @@ if (isBrowser) {
 
 ms = extend(mobiscroll, {
     $: $,
-    version: '3.2.2',
+    version: '3.2.3',
     util: {
         prefix: prefix,
         jsPrefix: pr,

src/js/forms.angular.ts

@@ -247,6 +247,7 @@ export class MbscInputBase extends MbscFormValueBase {
 
 @Component({
     selector: 'mbsc-input',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
         <label [class.mbsc-err]="error">
             <ng-content></ng-content>
@@ -283,6 +284,7 @@ export class MbscInput extends MbscInputBase {
 
 @Component({
     selector: 'mbsc-textarea',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
         <label [class.mbsc-err]="error">
             <ng-content></ng-content>
@@ -317,6 +319,7 @@ export class MbscTextarea extends MbscInputBase {
 
 @Component({
     selector: 'mbsc-dropdown',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
         <label [class.mbsc-err]="error">
             {{label}}
@@ -446,6 +449,7 @@ export class MbscButton extends MbscFormBase {
 
 @Component({
     selector: 'mbsc-checkbox',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
         <label>
             <input #initElement 
@@ -473,6 +477,7 @@ export class MbscCheckbox extends MbscFormValueBase {
 
 @Component({
     selector: 'mbsc-switch',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
         <label>
             <ng-content></ng-content>
@@ -542,10 +547,14 @@ export class MbscSwitch extends MbscControlBase implements OnInit {
     }
 }
 
+/**
+ * Note on the template: Wrapper needs to be a div (instead of label) - not to fire click events twice
+ */
 @Component({
     selector: 'mbsc-stepper',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
-        <label>
+        <div>
             <ng-content></ng-content>
             <input #initElement
                 data-role="stepper"
@@ -555,7 +564,7 @@ export class MbscSwitch extends MbscControlBase implements OnInit {
                 [attr.step]="step !== undefined ? step : null"
                 [attr.data-val]="val ? val : null"
                 [disabled]="disabled" />
-        </label>
+        </div>
     `,
     exportAs: 'mobiscroll'
 })
@@ -638,6 +647,7 @@ export class MbscStepper extends MbscControlBase implements OnInit {
 
 @Component({
     selector: 'mbsc-progress',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
         <label>
             <ng-content></ng-content>
@@ -803,6 +813,7 @@ export class MbscRadioGroup extends MbscRadioGroupBase {
 
 @Component({
     selector: 'mbsc-radio',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
         <label>
             <input #initElement 
@@ -951,12 +962,14 @@ export class MbscSegmented extends MbscFormBase {
 
 @Component({
     selector: 'mbsc-slider',
+    host: { 'class': 'mbsc-control-ng' },
     template: `
         <label>
             <ng-content></ng-content>
             <input #inputElements *ngFor="let v of dummyArray" 
                 type="range"
                 [disabled]="disabled"
+                [attr.value]="dummyArray.length > 1 ? initialValue[v]: initialValue"
                 [attr.data-step-labels]="stepLabels"
                 [attr.data-template]="valueTemplate"
                 [attr.data-tooltip]="tooltip ? 'true' : null"
@@ -1097,6 +1110,13 @@ export class MbscSlider extends MbscControlBase {
     ngAfterViewInit() {
         super.ngAfterViewInit();
 
+        // handle change for each input (when multi value)
+        this.inputElements.forEach((input, index) => {
+            if (index) {
+                this.handleChange(input.nativeElement);
+            }
+        });
+
         let options = extend({}, this._inheritedOptions, this.options);
         this._instance = new Slider(this.inputElements.first.nativeElement, options);