Merge 4.7.3

examples/angular/package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "~8.0.0",
     "@angular/platform-browser-dynamic": "~8.0.0",
     "@angular/router": "~8.0.0",
-    "@mobiscroll/angular-lite": "4.7.2",
+    "@mobiscroll/angular-lite": "4.7.3",
     "rxjs": "~6.4.0",
     "rxjs-compat": "^6.5.2",
     "tslib": "^1.9.0",

examples/react/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@mobiscroll/react-lite": "4.7.2",
+        "@mobiscroll/react-lite": "4.7.3",
         "@types/jest": "^24.0.11",
         "@types/node": "^11.12.1",
         "@types/react": "^16.8.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobiscroll",
-  "version": "4.7.2",
+  "version": "4.7.3",
   "description": "Cross platform UI controls for progressive web an hybrid apps",
   "homepage": "https://mobiscroll.com/",
   "license": "Apache-2.0",

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/angular-lite",
-    "version": "4.7.2",
+    "version": "4.7.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-lite",
-    "version": "4.7.2",
+    "version": "4.7.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-lite",
-    "version": "4.7.2",
+    "version": "4.7.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-lite",
-    "version": "4.7.2",
+    "version": "4.7.3",
     "description": "jQuery and jQuery Mobile 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-lite",
-    "version": "4.7.2",
+    "version": "4.7.3",
     "description": "React UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

src/js/classes/form-control.js

@@ -12,6 +12,7 @@ let $active;
 
 function addIcon($control, ic) {
     var icons = {},
+        control = $control[0],
         $parent = $control.parent(),
         errorMsg = $parent.find('.mbsc-err-msg'),
         align = $control.attr('data-icon-align') || 'left',
@@ -36,6 +37,11 @@ function addIcon($control, ic) {
         }
     }
 
+    if (control.type == 'file') {
+        // Set icon
+        icons.right = $control.attr('data-icon-upload') || 'upload';
+    }
+
     if (icon || ic) {
         extend(icons, ic);
 

src/js/classes/input.js

@@ -1,3 +1,4 @@
+import { $ } from '../core/core';
 import { FormControl, addIconToggle } from './form-control';
 
 const events = ['focus', 'change', 'blur', 'animationstart'];
@@ -6,15 +7,45 @@ export class Input extends FormControl {
     constructor(elm, settings) {
         super(elm, settings);
 
-        addIconToggle(this, this._$parent, this._$elm);
+        const $elm = this._$elm;
+        const $dummy = this._$parent.find('.mbsc-select-input');
+
+        addIconToggle(this, this._$parent, $elm);
+
+        if (elm.type == 'file') {
+            // Copy attributes and create dummy input
+            var $inp = $('<input type="text" class="' +
+                ($elm.attr('class') || '') + '" placeholder="' +
+                ($elm.attr('placeholder') || '') +
+                '"/>').insertAfter($elm);
+
+            // Copy value on file upload
+            $elm.on('change', function (ev) {
+                var files = ev.target.files,
+                    names = [];
+
+                for (var i = 0; i < files.length; ++i) {
+                    names.push(files[i].name);
+                }
+                names.join(', ');
+                $inp.val(names);
+            });
+        }
 
         this._$parent.addClass('mbsc-input');
         this.checkLabel = this.checkLabel.bind(this);
 
         // Attach events
         events.forEach(ev => {
-            this._$elm.on(ev, this.checkLabel);
+            $elm.on(ev, this.checkLabel);
         });
+
+        // Move the dummy input after the element for correct styling
+        if ($dummy.length) {
+            $elm.after($dummy);
+            this._delm = $dummy[0];
+            this.refresh();
+        }
     }
 
     checkLabel(ev) {

src/js/classes/select.js

@@ -7,8 +7,8 @@ export class Select extends Input {
 
         const $elm = this._$elm;
         const $parent = this._$parent;
-        const $existing = $parent.find('input.mbsc-control');
-        const $input = $existing.length ? $existing : $('<input tabindex="-1" class="mbsc-control" readonly>');
+        const $existing = $parent.find('.mbsc-select-input');
+        const $input = $existing.length ? $existing : $('<input tabindex="-1" class="mbsc-select-input mbsc-control" readonly>');
 
         this._$input = $input;
         this._delm = $input[0];

src/js/core/core.js

@@ -1,5 +1,5 @@
 /*!
- * Mobiscroll v4.7.2
+ * Mobiscroll v4.7.3
  * http://mobiscroll.com
  *
  * Copyright 2010-2018, Acid Media
@@ -76,7 +76,7 @@ extend(util, {
 
 ms = extend(mobiscroll, {
     $: $,
-    version: '4.7.2',
+    version: '4.7.3',
     autoTheme: 'mobiscroll',
     themes: {
         form: {},

src/js/forms.react.jsx

@@ -228,6 +228,7 @@ class MbscInput extends MbscInit {
         passwordToggle: PropTypes.bool,
         iconShow: PropTypes.string,
         iconHide: PropTypes.string,
+        iconUpload: PropTypes.string,
         name: PropTypes.string,
         dropdown: PropTypes.bool,
         inputStyle: PropTypes.string,
@@ -245,7 +246,7 @@ class MbscInput extends MbscInit {
 
     render() {
         /* eslint-disable no-unused-vars */
-        var { valid, errorMessage, type, icon, iconAlign, passwordToggle, iconShow, iconHide, inputStyle, labelStyle, children, dropdown, ...other } = this.props;
+        var { valid, errorMessage, type, icon, iconAlign, passwordToggle, iconShow, iconHide, iconUpload, inputStyle, labelStyle, children, dropdown, ...other } = this.props;
         /* eslint-enable */
 
         var error = null;
@@ -262,7 +263,7 @@ class MbscInput extends MbscInit {
         return <MbscLabel valid={valid} inputStyle={inputStyle} labelStyle={labelStyle} className={dropdown ? 'mbsc-select' : ''}>
             {children}
             <span className="mbsc-input-wrap">
-                <input ref={this.inputMounted} type={type} data-icon={icon} data-icon-align={iconAlign} data-password-toggle={passwordToggle} data-icon-show={iconShow} data-icon-hide={iconHide} {...other} />
+                <input ref={this.inputMounted} type={type} data-icon={icon} data-icon-align={iconAlign} data-password-toggle={passwordToggle} data-icon-show={iconShow} data-icon-hide={iconHide} data-icon-upload={iconUpload} {...other} />
                 {drop}
                 {error}
             </span>

src/js/input.angular.ts

@@ -204,6 +204,12 @@ export class MbscInputBase extends MbscFormValueBase {
     @Input('icon-hide')
     iconHide: string;
 
+    /**
+     *  Specify the upload icon.
+     */
+    @Input('icon-upload')
+    iconUpload: boolean;
+
     /**
      *  Specify the inputStyle.
     */
@@ -249,6 +255,21 @@ export class MbscInputBase extends MbscFormValueBase {
                     [attr.data-password-toggle]="passwordToggle ? 'true': null"
                     [attr.data-icon-show]="iconShow ? iconShow : null"
                     [attr.data-icon-hide]="iconHide ? iconHide : null"
+                    [attr.data-icon-upload]="iconUpload ? iconUpload : null"
+                    [attr.min]="min"
+                    [attr.max]="max"
+                    [attr.minlength]="minlength"
+                    [attr.maxlength]="maxlength"
+                    [attr.autocomplete]="autocomplete" 
+                    [attr.autocapitalize]="autocapitalize"
+                    [attr.autocorrect]="autocorrect"
+                    [attr.spellcheck]="spellcheck"
+                    [attr.autofocus]="autofocus"
+                    [attr.step]="step"
+                    [attr.pattern]="pattern"
+                    [attr.required]="required"
+                    [attr.accept]="accept"
+                    [attr.multiple]="multiple"
                     [disabled]="disabled"
                     [attr.readonly]="_readonly" />
                 <span *ngIf="dropdown" class="mbsc-select-ic mbsc-ic mbsc-ic-arrow-down5"></span>
@@ -261,6 +282,36 @@ export class MbscInputBase extends MbscFormValueBase {
 export class MbscInput extends MbscInputBase {
     instance: FormInput;
 
+    @Input()
+    min: number;
+    @Input()
+    max: number;
+    @Input()
+    minlength: number;
+    @Input()
+    maxlength: number;
+
+    @Input()
+    autocomplete: 'on' | 'off';
+    @Input()
+    autocapitalize: string;
+    @Input()
+    autocorrect: string;
+    @Input()
+    spellcheck: string;
+    @Input()
+    autofocus: string;
+    @Input()
+    step: number;
+    @Input()
+    pattern: string;
+    @Input()
+    required: string;
+    @Input()
+    accept: string;
+    @Input()
+    multiple: string;
+
     @Input()
     controlNg: boolean = true;
 

src/scss/core/ios.scss

@@ -120,6 +120,7 @@ $mbsc-ios-dark: #47494A !default;
     $empty-color: lighten($text, 43%);
     $btn-cont-background: darken($background, 3%);
     $background-contrast: #000;
+    $snackbar-button: hsl(hue($button), saturation($button), max(lightness($button), 80%));
   }
 
   // Dark background 
@@ -161,22 +162,21 @@ $mbsc-ios-dark: #47494A !default;
     $empty-color: $text;
     $btn-cont-background: lighten($background-limited, 8%);
     $background-contrast: #fff;
+    $snackbar-button: $button;
   }
 
   // Light button 
   @if (lightness($button) > 50%) {
     $button-contrast: #000;
     $cal-text: lighten(saturate($button, 5%), 42%);
     $form-selection: lighten(saturate($accent, 15%), 3%);
-    $snackbar-button: hsl(hue($button), saturation($button), max(lightness($button), 80%));
   }
 
   // Dark button 
   @else {
     $button-contrast: #fff;
     $cal-text: adjust-hue(lighten(desaturate($button, 42%), 35%), 3%);
     $form-selection: darken(desaturate($accent, 15%), 3%);
-    $snackbar-button: $button;
   }
 
   // Light button 

src/scss/core/mobiscroll.scss

@@ -56,8 +56,8 @@ $mbsc-mobiscroll-dark: #47494A !default;
   @else {
     $border: lighten($background, 17%);
     $empty-color: $text;
-    $input-disabled: darken($background, 17%);
-    $handle: darken($background, 7%);
+    $input-disabled: lighten($background, 17%);
+    $handle: lighten($background, 7%);
     $btn-disabled: lighten($background, 8%);
     $switch: lighten($background, 14%);
     $btn-light: $background;

src/scss/forms/forms.ios.colors.scss

@@ -190,7 +190,7 @@
       }
 
       .mbsc-segmented .mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
-        background: rgba(18, 114, 220, .3);
+        background: rgba($accent, .3);
         color: $form-selection;
       }
 

src/scss/forms/forms.material.colors.scss

@@ -225,6 +225,10 @@
         background: $background;
       }
 
+      .mbsc-stepper input {
+        color: $text;
+      }
+
       .mbsc-stepper input:disabled {
         color: $input-color;
         -webkit-text-fill-color: $input-color;

src/scss/forms/forms.mobiscroll.colors.scss

@@ -114,7 +114,7 @@
       }
 
       .mbsc-btn-flat.mbsc-btn.mbsc-active {
-        background: rgba(78, 204, 196, .3)
+        background: rgba($accent, .3)
       }
 
       .mbsc-btn-flat:disabled {

src/scss/forms/forms.scss

@@ -315,6 +315,12 @@
     z-index: 2;
   }
 
+  // Angular + Bootstrap compatibility
+  .mbsc-segmented-item label {
+    display: block;
+    margin: 0;
+  }
+
   .mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
   .mbsc-disabled .mbsc-segmented-content,
   .mbsc-segmented input:disabled + .mbsc-segmented-content {

src/scss/input/input.mobiscroll.scss

@@ -501,7 +501,7 @@
       }
 
       &.mbsc-input .mbsc-label {
-        top: .166667em;
+        top: -.166667em;
         z-index: 1;
         padding: 0 .333334em;
       }

src/scss/input/input.scss

@@ -202,4 +202,10 @@
     -webkit-transform-origin: top right;
     transform-origin: top right;
   }
+
+  /* file type */
+  .mbsc-input-wrap .mbsc-control[type="file"] {
+    position: absolute;
+    opacity: 0;
+  }
 }