Merging 4.4.0 changes

examples/angular/package.json

@@ -21,7 +21,7 @@
         "@angular/platform-browser": "^5.2.11",
         "@angular/platform-browser-dynamic": "^5.2.11",
         "@angular/router": "^5.2.11",
-        "@mobiscroll/angular-lite": "^4.3.2",
+        "@mobiscroll/angular-lite": "^4.4.0",
         "core-js": "^2.5.7",
         "rxjs": "^5.5.11",
         "zone.js": "^0.8.26"

examples/angular/src/app/app.component.html

@@ -1,5 +1,5 @@
 <mbsc-page>
-    <mbsc-form>
+    <mbsc-form label-style="floating">
         <div class="mbsc-form-group">
             <div class="mbsc-form-group-title">Account information</div>
             <mbsc-input [(ngModel)]="firstName" placeholder="What's your first name?">First Name</mbsc-input>
@@ -48,4 +48,4 @@
             <mbsc-button>Save Settings</mbsc-button>
         </div>
     </mbsc-form>
-</mbsc-page>
+</mbsc-page>

examples/kitchen-sink/index.html

@@ -22,21 +22,21 @@
                         <div class="mbsc-col-sm-6">
                             <label>
                                 First Name
-                                <input type="text" id="first" placeholder="What's your first name?" />
+                                <input type="text" id="first" data-label-style="floating" placeholder="What's your first name?" />
                             </label>
                             <label>
                                 Last Name
-                                <input type="text" id="last" placeholder="What's your last name?" />
+                                <input type="text" id="last" data-label-style="floating" placeholder="What's your last name?" />
                             </label>
                         </div>
                         <div class="mbsc-col-sm-6">
                             <label>
                                 Email
-                                <input type="email" id="email" placeholder="[email protected]" />
+                                <input type="email" id="email" data-label-style="floating" placeholder="[email protected]" />
                             </label>
                             <label>
                                 Password
-                                <input type="password" id="password" placeholder="Minimum 6 characters" data-password-toggle="true" />
+                                <input type="password" id="password" data-label-style="floating" placeholder="Minimum 6 characters" data-password-toggle="true" />
                             </label>
                         </div>
                     </div>

examples/react/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@mobiscroll/react-lite": "^4.3.2",
+        "@mobiscroll/react-lite": "^4.4.0",
         "react": "^16.4.1",
         "react-dom": "^16.4.1",
         "react-scripts": "^1.1.4"

examples/react/src/App.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Page, Form, Rating, Stepper, Switch } from '@mobiscroll/react-lite';
+import { Page, Form, Rating, Stepper, Switch, Input } from '@mobiscroll/react-lite';
 import '@mobiscroll/react-lite/dist/css/mobiscroll.min.css';
 import logo from './logo.svg';
 import './App.css';
@@ -17,22 +17,10 @@ class App extends Component {
         <Form>
           <div className="mbsc-form-group">
             <div className="mbsc-form-group-title">Account information</div>
-            <label>
-              First Name
-              <input type="text" placeholder="What's your first name?" />
-            </label>
-            <label>
-              Last Name
-              <input type="text" placeholder="What's your last name?" />
-            </label>
-            <label>
-              Email
-              <input type="email" placeholder="[email protected]" />
-            </label>
-            <label>
-              Password
-              <input type="password" placeholder="Minimum 6 characters" data-password-toggle="true" />
-            </label>
+            <Input type="text" placeholder="What's your first name?" labelStyle="floating">First Name</Input>
+            <Input type="text" placeholder="What's your last name?" labelStyle="floating">Last Name</Input>
+            <Input type="email" placeholder="[email protected]" labelStyle="floating">Email</Input>
+            <Input type="password" placeholder="Minimum 6 characters" labelStyle="floating" passwordToggle={true}>Password</Input>
             <Rating value={4}>
               Rating
             </Rating>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobiscroll",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "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.3.2",
+    "version": "4.4.0",
     "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.3.2",
+    "version": "4.4.0",
     "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.3.2",
+    "version": "4.4.0",
     "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.3.2",
+    "version": "4.4.0",
     "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.3.2",
+    "version": "4.4.0",
     "description": "React UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

src/js/classes/form-control.js

@@ -73,11 +73,17 @@ function addIconToggle(that, $parent, $control) {
     }
 }
 
-function wrapLabel($parent, type) {
+function wrapLabel($parent, type, inputStyle, labelStyle, elm) {
     // Wrap non-empty text nodes in span with mbsc-label class
     if (type != 'button' && type != 'submit' && type != 'segmented') {
         $parent
             .addClass('mbsc-control-w')
+            .addClass(inputStyle == 'box' ? 'mbsc-input-box' : '')
+            .addClass(inputStyle == 'outline' ? 'mbsc-input-outline' : '')
+            .addClass(labelStyle == 'inline' ? 'mbsc-label-inline' : '')
+            .addClass(labelStyle == 'stacked' ? 'mbsc-label-stacked' : '')
+            .addClass(labelStyle == 'floating' ? 'mbsc-label-floating' : '')
+            .addClass(labelStyle == 'floating' && elm.value ? 'mbsc-label-floating-active' : '')
             .find('label')
             .addClass('mbsc-label')
             .each(function (i, v) {
@@ -110,22 +116,28 @@ function getRipple(theme) {
     return ripple && ripple.addRipple ? ripple : null;
 }
 
+function getAttr($elm, attr, def) {
+    var v = $elm.attr(attr);
+    return v === undefined || v === '' ? def : v;
+}
+
 export class FormControl {
     constructor(elm, 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;
         // Check for inline mobiscroll components
         const $frame = $elm.next().hasClass('mbsc-fr') ? $elm.next() : null;
         const type = getControlType($elm);
+        const inputStyle = getAttr($elm, 'data-input-style', s.inputStyle);
+        const labelStyle = getAttr($elm, 'data-label-style', s.labelStyle);
 
         if ($frame) {
             $frame.insertAfter($parent);
         }
 
-        wrapLabel($parent, type);
+        wrapLabel($parent, type, inputStyle, labelStyle, elm);
 
         $elm.addClass('mbsc-control');
 
@@ -143,6 +155,7 @@ export class FormControl {
         this._$parent = $parent;
         this._$frame = $frame;
         this._ripple = getRipple(s.theme);
+        this._isFloating = labelStyle == 'floating' || $parent.hasClass('mbsc-label-floating');
 
         elm.mbscInst = this;
     }
@@ -175,6 +188,7 @@ export class FormControl {
             case 'mouseup':
             case 'mouseleave':
                 this._onEnd(ev);
+                break;
         }
     }
 

src/js/classes/forms.d.ts

@@ -1,6 +1,9 @@
 import { Base, MbscCoreOptions } from '../core/core';
 
-export interface MbscFormOptions extends MbscCoreOptions { }
+export interface MbscFormOptions extends MbscCoreOptions {
+    inputStyle?: string;
+    labelStyle?: string;
+}
 
 export class Form extends Base {
     settings: MbscFormOptions;

src/js/classes/frame.js

@@ -293,6 +293,7 @@ export const Frame = function (el, settings, inherit) {
         $wnd.on(posEvents, onPosition);
 
         if (isModal) {
+            $markup.removeClass('mbsc-fr-pos');
             if (doAnim && !prevAnim) {
                 $markup
                     .addClass('mbsc-anim-in mbsc-anim-trans mbsc-anim-trans-' + doAnim)
@@ -500,7 +501,6 @@ export const Frame = function (el, settings, inherit) {
         css.left = Math.floor(left);
 
         $popup.css(css);
-        $markup.removeClass('mbsc-fr-pos');
 
         wndWidth = newWidth;
         wndHeight = newHeight;

src/js/classes/input.js

@@ -1,11 +1,52 @@
 import { FormControl, addIconToggle } from './form-control';
 
+const events = ['focus', 'change', 'blur'];
+
 export class Input extends FormControl {
     constructor(elm, settings) {
         super(elm, settings);
 
         addIconToggle(this, this._$parent, this._$elm);
         this._$parent.addClass('mbsc-input');
+
+        // Attach events
+        // Prevent 300ms click latency
+        events.forEach(ev => {
+            elm.addEventListener(ev, this);
+        });
+    }
+
+    handleEvent(ev) {
+        super.handleEvent(ev);
+        switch (ev.type) {
+            case 'focus':
+                this.onFocus();
+                break;
+            case 'change':
+            case 'blur':
+                this.onChange();
+                break;
+        }
+    }
+
+    refresh() {
+        this.onChange();
+    }
+
+    onChange() {
+        if (this._isFloating) {
+            if (!this._elm.value) {
+                this._$parent.removeClass('mbsc-label-floating-active');
+            } else {
+                this._$parent.addClass('mbsc-label-floating-active');
+            }
+        }
+    }
+
+    onFocus() {
+        if (this._isFloating) {
+            this._$parent.addClass('mbsc-label-floating-active');
+        }
     }
 
     destroy() {
@@ -14,5 +55,9 @@ export class Input extends FormControl {
             .removeClass('mbsc-ic-left mbsc-ic-right')
             .find('.mbsc-input-ic')
             .remove();
+
+        events.forEach(ev => {
+            this._elm.removeEventListener(ev, this);
+        });
     }
 }

src/js/classes/popup.d.ts

@@ -1,6 +1,9 @@
 import { Frame, MbscFrameOptions } from './frame';
 
-export interface MbscPopupOptions extends MbscFrameOptions { }
+export interface MbscPopupOptions extends MbscFrameOptions {
+    okText?: string;
+    onSet?(event: { valueText?: string }, inst: any): void;
+}
 export interface MbscWidgetOptions extends MbscPopupOptions { }
 
 export class Popup extends Frame {