diff --git a/examples/angular/package.json b/examples/angular/package.json
index f426eb1d..ed230e82 100644
--- a/examples/angular/package.json
+++ b/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",
diff --git a/examples/react/package.json b/examples/react/package.json
index 92b0ed85..ac21fd87 100644
--- a/examples/react/package.json
+++ b/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",
diff --git a/package.json b/package.json
index 653636c1..f6097a5e 100644
--- a/package.json
+++ b/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",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 9d55dc21..16c32024 100644
--- a/packages/angular/package.json
+++ b/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",
diff --git a/packages/angularjs/package.json b/packages/angularjs/package.json
index e17c64a4..aff0c3c0 100644
--- a/packages/angularjs/package.json
+++ b/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",
diff --git a/packages/javascript/package.json b/packages/javascript/package.json
index cbb07bca..3c09af8c 100644
--- a/packages/javascript/package.json
+++ b/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",
diff --git a/packages/jquery/package.json b/packages/jquery/package.json
index 522a5b52..9485ad37 100644
--- a/packages/jquery/package.json
+++ b/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",
diff --git a/packages/react/package.json b/packages/react/package.json
index c2b213f4..24a556ee 100644
--- a/packages/react/package.json
+++ b/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",
diff --git a/src/js/classes/form-control.js b/src/js/classes/form-control.js
index 5ac2bc77..8e2e6b52 100644
--- a/src/js/classes/form-control.js
+++ b/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);
diff --git a/src/js/classes/input.js b/src/js/classes/input.js
index 460fff50..369e8d3d 100644
--- a/src/js/classes/input.js
+++ b/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 = $('').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) {
diff --git a/src/js/classes/select.js b/src/js/classes/select.js
index 77d4416c..16d795c4 100644
--- a/src/js/classes/select.js
+++ b/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 : $('');
+ const $existing = $parent.find('.mbsc-select-input');
+ const $input = $existing.length ? $existing : $('');
this._$input = $input;
this._delm = $input[0];
diff --git a/src/js/core/core.js b/src/js/core/core.js
index fa0daef4..d88428e8 100644
--- a/src/js/core/core.js
+++ b/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: {},
diff --git a/src/js/forms.react.jsx b/src/js/forms.react.jsx
index d0ea13c2..3401f65b 100644
--- a/src/js/forms.react.jsx
+++ b/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
{children}
-
+
{drop}
{error}
diff --git a/src/js/input.angular.ts b/src/js/input.angular.ts
index 91b4107d..e7c74f91 100644
--- a/src/js/input.angular.ts
+++ b/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" />
@@ -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;
diff --git a/src/scss/core/ios.scss b/src/scss/core/ios.scss
index ac2f9266..5fbc0690 100644
--- a/src/scss/core/ios.scss
+++ b/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,6 +162,7 @@ $mbsc-ios-dark: #47494A !default;
$empty-color: $text;
$btn-cont-background: lighten($background-limited, 8%);
$background-contrast: #fff;
+ $snackbar-button: $button;
}
// Light button
@@ -168,7 +170,6 @@ $mbsc-ios-dark: #47494A !default;
$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
@@ -176,7 +177,6 @@ $mbsc-ios-dark: #47494A !default;
$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
diff --git a/src/scss/core/mobiscroll.scss b/src/scss/core/mobiscroll.scss
index cb490842..5991beef 100644
--- a/src/scss/core/mobiscroll.scss
+++ b/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;
diff --git a/src/scss/forms/forms.ios.colors.scss b/src/scss/forms/forms.ios.colors.scss
index 54ed5434..ccc11e6b 100644
--- a/src/scss/forms/forms.ios.colors.scss
+++ b/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;
}
diff --git a/src/scss/forms/forms.material.colors.scss b/src/scss/forms/forms.material.colors.scss
index 15e37d57..2e366ce3 100644
--- a/src/scss/forms/forms.material.colors.scss
+++ b/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;
diff --git a/src/scss/forms/forms.mobiscroll.colors.scss b/src/scss/forms/forms.mobiscroll.colors.scss
index 7e97059f..4b973d8c 100644
--- a/src/scss/forms/forms.mobiscroll.colors.scss
+++ b/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 {
diff --git a/src/scss/forms/forms.scss b/src/scss/forms/forms.scss
index f7be2b59..50be5715 100644
--- a/src/scss/forms/forms.scss
+++ b/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 {
diff --git a/src/scss/input/input.mobiscroll.scss b/src/scss/input/input.mobiscroll.scss
index de4e897e..c6b5e1fe 100644
--- a/src/scss/input/input.mobiscroll.scss
+++ b/src/scss/input/input.mobiscroll.scss
@@ -501,7 +501,7 @@
}
&.mbsc-input .mbsc-label {
- top: .166667em;
+ top: -.166667em;
z-index: 1;
padding: 0 .333334em;
}
diff --git a/src/scss/input/input.scss b/src/scss/input/input.scss
index fecd0ea6..eb1c49ea 100644
--- a/src/scss/input/input.scss
+++ b/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;
+ }
}