material-input - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/material-input.js

@@ -38,3 +38,3 @@ 'use strict';
 
-            this.createShadowRoot().innerHTML = '\n            <style>\n                :host{\n                    display: block;\n                    position: relative;\n                    background: transparent;\n                    margin: .5em 0;\n                }\n                .material-input__container{\n                    width: inherit;\n                    display: block;\n                    position: relative;\n                }\n                .material-input__input{\n                    box-sizing: border-box;\n                    position: relative;\n                    background-color: transparent;\n                    font-size: 1em;\n                    color: var(--material-input-text-color, black);\n                    padding: 1.4em 1em .6em 10px;\n                    display: block;\n                    width: 100%;\n                    border: none;\n                    border-bottom: var(--material-input-line-height, 1px) solid var(--material-input-border-color, rgb(206,212,218));\n                    box-shadow: none;\n                }\n                .material-input__container.invalid .material-input__input{\n                    border-bottom-color: var(--material-input-invalid-color, rgb(224,49,49));\n                }\n                .material-input__container.valid .material-input__input{\n                    border-bottom-color: var(--material-input-valid-color, rgb(47,158,68));\n                }\n                .material-input__input:focus{\n                    outline: none;\n                }\n                /* placeholder and placeholder fade on focus */\n                .material-input__input::-webkit-input-placeholder {\n                    color: var(--material-input-placeholder-color, rgb(134,142,150));\n                    opacity: 1;\n                }\n                .material-input__input:focus::-webkit-input-placeholder {\n                    opacity: .5;\n                    transition: opacity .35s ease;\n                }\n                .material-input__input::-moz-placeholder {\n                    color: var(--material-input-placeholder-color, rgb(134,142,150));\n                    opacity: 1;\n                }\n                .material-input__input:focus::-moz-placeholder {\n                    opacity: .5;\n                    transition: opacity .35s ease;\n                }\n                .material-input__input:-ms-input-placeholder {\n                    color: var(--material-input-placeholder-color, rgb(134,142,150));\n                    opacity: 1;\n                }\n                .material-input__input:-ms-input-placeholder {\n                    opacity: .5;\n                    transition: opacity .35s ease;\n                }\n                /* Labels */\n                .material-input__label{\n                    color: rgb(134,142,150);\n                    font-size: inherit;\n                    pointer-events: none;\n                    position: absolute;\n                    left: 10px;\n                    bottom: 1em;\n                    transition: 0.2s ease all;\n                }\n                .material-input__container.no-animation .material-input__label,\n                .material-input__container.label-always-floats .material-input__label{\n                    transition: 0s ease all;\n                }\n                .material-input__container.is-empty .material-input__input[placeholder] ~ .material-input__label{\n                    color: var(--material-input-text-color, black);\n                }\n                /* active state */\n                .material-input__input:focus ~ .material-input__label,\n                .material-input__container:not(.is-empty) .material-input__label,\n                .material-input__container.label-always-floats .material-input__label{\n                    bottom: 3em;\n                    font-size: .75em;\n                }\n                .material-input__input:focus ~ .material-input__label,\n                .material-input__container.is-empty .material-input__input[placeholder]:focus ~ .material-input__label{\n                    color: var(--material-input-highlight-color, rgb(54,79,199));\n                }\n                /* errror state */\n                .material-input__container.invalid.label-always-floats .material-input__label,\n                .material-input__container.invalid .material-input__input:focus ~ .material-input__label,\n                .material-input__container.is-empty.invalid .material-input__input[placeholder]:focus ~ .material-input__label,\n                .material-input__container.is-empty.invalid .material-input__input[placeholder] ~ .material-input__label{\n                    color: var(--material-input-invalid-color, rgb(224,49,49));\n                }\n                /* valid state */\n                .material-input__container.valid.label-always-floats .material-input__label,\n                .material-input__container.valid .material-input__input:focus ~ .material-input__label,\n                .material-input__container.is-empty.valid .material-input__input[placeholder]:focus ~ .material-input__label,\n                .material-input__container.is-empty.valid .material-input__input[placeholder] ~ .material-input__label{\n                    color: var(--material-input-valid-color, rgb(47,158,68));\n                }\n                /* bar */\n                .material-input__bar{\n                    position:relative;\n                    display:block;\n                    width:100%;\n                }\n                .material-input__bar::before, .material-input__bar::after {\n                    content:\'\';\n                    height: var(--material-input-highlight-line-height, 2px);\n                    width:0;\n                    bottom:0;\n                    position:absolute;\n                    background: var(--material-input-highlight-color, rgb(54,79,199));\n                    transition:0.2s ease all;\n                }\n                .material-input__container.invalid .material-input__bar::before,\n                .material-input__container.invalid .material-input__bar::after{\n                    background: var(--material-input-invalid-color, rgb(224,49,49));\n                }\n                .material-input__container.valid .material-input__bar::before,\n                .material-input__container.valid .material-input__bar::after{\n                    background: var(--material-input-valid-color, rgb(47,158,68));\n                }\n                .material-input__bar::before {\n                    left:50%;\n                }\n                .material-input__bar::after {\n                    right:50%;\n                }\n                .material-input__input:focus ~ .material-input__bar:before, .material-input__input:focus ~ .material-input__bar:after{\n                    width:50%;\n                }\n            </style>\n            <div class="material-input__container no-animation' + (this.value == '' ? ' is-empty' : '') + '">\n                <content></content>\n                <input class="material-input__input" tabindex="-1" />\n                <label class="material-input__label"></label>\n                <div class="material-input__bar"></div>\n                <div class="material-input__message"></div>\n            </div>\n        ';
+            this.createShadowRoot().innerHTML = '\n            <style>\n                :host{\n                    display: block;\n                    position: relative;\n                    background: transparent;\n                    margin: .5em 0;\n                    --material-input-accent-color: var(--accent-color, rgb(54,79,199));\n                }\n                .material-input__container{\n                    width: inherit;\n                    display: block;\n                    position: relative;\n                }\n                .material-input__input{\n                    box-sizing: border-box;\n                    position: relative;\n                    background-color: transparent;\n                    font-size: 1em;\n                    color: var(--material-input-text-color, black);\n                    padding: 1.4em 1em .6em 10px;\n                    display: block;\n                    width: 100%;\n                    border: none;\n                    border-bottom: var(--material-input-line-height, 1px) solid var(--material-input-border-color, rgb(206,212,218));\n                    box-shadow: none;\n                }\n                .material-input__container.invalid .material-input__input{\n                    border-bottom-color: var(--material-input-invalid-color, rgb(224,49,49));\n                }\n                .material-input__container.valid .material-input__input{\n                    border-bottom-color: var(--material-input-valid-color, rgb(47,158,68));\n                }\n                .material-input__input:focus{\n                    outline: none;\n                }\n                /* placeholder and placeholder fade on focus */\n                .material-input__input::-webkit-input-placeholder {\n                    color: var(--material-input-placeholder-color, rgb(134,142,150));\n                    opacity: 1;\n                }\n                .material-input__input:focus::-webkit-input-placeholder {\n                    opacity: .5;\n                    transition: opacity .35s ease;\n                }\n                .material-input__input::-moz-placeholder {\n                    color: var(--material-input-placeholder-color, rgb(134,142,150));\n                    opacity: 1;\n                }\n                .material-input__input:focus::-moz-placeholder {\n                    opacity: .5;\n                    transition: opacity .35s ease;\n                }\n                .material-input__input:-ms-input-placeholder {\n                    color: var(--material-input-placeholder-color, rgb(134,142,150));\n                    opacity: 1;\n                }\n                .material-input__input:-ms-input-placeholder {\n                    opacity: .5;\n                    transition: opacity .35s ease;\n                }\n                /* Labels */\n                .material-input__label{\n                    color: rgb(134,142,150);\n                    font-size: inherit;\n                    pointer-events: none;\n                    position: absolute;\n                    left: 10px;\n                    top: 1.42em;\n                    transition: 0.2s ease all;\n                }\n                .material-input__container.no-animation .material-input__label,\n                .material-input__container.label-always-floats .material-input__label{\n                    transition: 0s ease all;\n                }\n                .material-input__container.is-empty .material-input__input[placeholder] ~ .material-input__label{\n                    color: var(--material-input-text-color, black);\n                }\n                /* active state */\n                .material-input__input:focus ~ .material-input__label,\n                .material-input__container:not(.is-empty) .material-input__label,\n                .material-input__container.label-always-floats .material-input__label{\n                    top: .6em;\n                    font-size: .75em;\n                }\n                .material-input__input:focus ~ .material-input__label,\n                .material-input__container.is-empty .material-input__input[placeholder]:focus ~ .material-input__label{\n                    color: var(--material-input-highlight-color, --material-input-accent-color);\n                }\n                /* errror state */\n                .material-input__container.invalid.label-always-floats .material-input__label,\n                .material-input__container.invalid .material-input__input:focus ~ .material-input__label,\n                .material-input__container.is-empty.invalid .material-input__input[placeholder]:focus ~ .material-input__label,\n                .material-input__container.is-empty.invalid .material-input__input[placeholder] ~ .material-input__label{\n                    color: var(--material-input-invalid-color, rgb(224,49,49));\n                }\n                /* valid state */\n                .material-input__container.valid.label-always-floats .material-input__label,\n                .material-input__container.valid .material-input__input:focus ~ .material-input__label,\n                .material-input__container.is-empty.valid .material-input__input[placeholder]:focus ~ .material-input__label,\n                .material-input__container.is-empty.valid .material-input__input[placeholder] ~ .material-input__label{\n                    color: var(--material-input-valid-color, rgb(47,158,68));\n                }\n                /* bar */\n                .material-input__bar{\n                    position:relative;\n                    display:block;\n                    width:100%;\n                }\n                .material-input__bar::before, .material-input__bar::after {\n                    content:\'\';\n                    height: var(--material-input-highlight-line-height, 2px);\n                    width:0;\n                    bottom:0;\n                    position:absolute;\n                    background: var(--material-input-highlight-color, --material-input-accent-color);\n                    transition:0.2s ease all;\n                }\n                .material-input__container.invalid .material-input__bar::before,\n                .material-input__container.invalid .material-input__bar::after{\n                    background: var(--material-input-invalid-color, rgb(224,49,49));\n                }\n                .material-input__container.valid .material-input__bar::before,\n                .material-input__container.valid .material-input__bar::after{\n                    background: var(--material-input-valid-color, rgb(47,158,68));\n                }\n                .material-input__bar::before {\n                    left:50%;\n                }\n                .material-input__bar::after {\n                    right:50%;\n                }\n                .material-input__input:focus ~ .material-input__bar:before, .material-input__input:focus ~ .material-input__bar:after{\n                    width:50%;\n                }\n                .material-input__message{\n                    font-size: 70%;\n                    color: var(--material-input-invalid-color, rgb(224,49,49));\n                    padding: .3rem 0 .5rem 10px;\n                }\n                .material-input__message:empty{\n                    display: none;\n                }\n            </style>\n            <div class="material-input__container no-animation' + (this.value == '' ? ' is-empty' : '') + '">\n                <content></content>\n                <input class="material-input__input" tabindex="-1" />\n                <label class="material-input__label"></label>\n                <div class="material-input__bar"></div>\n                <div class="material-input__message"></div>\n            </div>\n        ';
             this.attributesExceptions = ['name', 'id', 'style', 'label', 'tabindex', 'placeholder', 'autofocus', 'autocomplete', 'autovalidate'];
@@ -56,2 +56,4 @@ // set tab index to make element focussable
             this.$form = this._getParentForm(this);
+            //
+            this.validity = this.hasAttribute('valid') ? true : this.hasAttribute('invalid') ? false : undefined;
             // add events
@@ -66,3 +68,4 @@ this._addEvents();
             this._setPlaceholder(this.getAttribute('placeholder'));
-
+            this._setValid(this.validity);
+            this._setMessage(this.getAttribute('message'));
             // remove no-animation loading class
@@ -85,3 +88,4 @@ setTimeout(function () {
                 'placeholder': this._setPlaceholder,
-                'name': this._setName
+                'name': this._setName,
+                'message': this._setMessage
             };
@@ -122,3 +126,3 @@ // call callback if it exists
             // pass on value when user enters content
-            this.$input.addEventListener('keydown', function (e) {
+            this.$input.addEventListener('input', function (e) {
                 if (e.keyCode === 13) {
@@ -145,3 +149,3 @@ if (this.$form.checkValidity()) {
             if (this.hasAttribute('autovalidate') && String(this.getAttribute('autovalidate')) !== 'false') {
-                this.$input.addEventListener('keydown', function () {
+                this.$input.addEventListener('input', function () {
                     // check if is valid
@@ -151,3 +155,3 @@ this._checkValidity();
             } else {
-                this.$input.addEventListener('keydown', function () {
+                this.$input.addEventListener('input', function () {
                     // check if is valid
@@ -198,2 +202,11 @@ if (this.$container.classList.contains('invalid') && this.$input.value !== '' && this.$input.validity.valid === true) {
         /**
+         * set message
+         */
+
+    }, {
+        key: '_setMessage',
+        value: function _setMessage(msg) {
+            this.$message.innerHTML = msg;
+        }
+        /**
          * set name
@@ -200,0 +213,0 @@ */

package.json

 {
   "name": "material-input",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "An easy drop-in material-input solution as a custom element",
@@ -40,3 +40,3 @@ "main": "src/material-input.js",
     "mocha-istanbul": "^0.3.0",
-    "web-component-tester": "^4.3.5",
+    "web-component-tester": "^4",
     "web-component-tester-istanbul": "^0.10.0",
@@ -43,0 +43,0 @@ "webcomponents.js": "^0.7"

README.md

@@ -81,2 +81,8 @@ # Material-input
 
+#### Backend validation
+If you validate your forms via your backend (which you should!), you cann add an `invalid` or `valid` attribute to the `material-input`. This will set the field in the defined state.
+
+#### Error messages
+You can set the `message` attribute, which will add an error message below the field. This is always an error message, no matter what state the field is in.
+
 #### Autovalidate
@@ -83,0 +89,0 @@ When adding the `autovalidate` attribute to the `material-input`, the field will be validated on every `keydown` event. However, this means a field with no validation rules will always be valid and receive the `valid` immediately.

src/material-input.js

@@ -32,2 +32,3 @@ 'use strict';
                     margin: .5em 0;
+                    --material-input-accent-color: var(--accent-color, rgb(54,79,199));
                 }
@@ -93,3 +94,3 @@ .material-input__container{
                     left: 10px;
-                    bottom: 1em;
+                    top: 1.42em;
                     transition: 0.2s ease all;
@@ -108,3 +109,3 @@ }
                 .material-input__container.label-always-floats .material-input__label{
-                    bottom: 3em;
+                    top: .6em;
                     font-size: .75em;
@@ -114,3 +115,3 @@ }
                 .material-input__container.is-empty .material-input__input[placeholder]:focus ~ .material-input__label{
-                    color: var(--material-input-highlight-color, rgb(54,79,199));
+                    color: var(--material-input-highlight-color, --material-input-accent-color);
                 }
@@ -143,3 +144,3 @@ /* errror state */
                     position:absolute;
-                    background: var(--material-input-highlight-color, rgb(54,79,199));
+                    background: var(--material-input-highlight-color, --material-input-accent-color);
                     transition:0.2s ease all;
@@ -164,2 +165,10 @@ }
                 }
+                .material-input__message{
+                    font-size: 70%;
+                    color: var(--material-input-invalid-color, rgb(224,49,49));
+                    padding: .3rem 0 .5rem 10px;
+                }
+                .material-input__message:empty{
+                    display: none;
+                }
             </style>
@@ -200,2 +209,4 @@ <div class="material-input__container no-animation${this.value == '' ? ' is-empty' : ''}">
         this.$form = this._getParentForm(this);
+        //
+        this.validity = this.hasAttribute('valid') ? true : this.hasAttribute('invalid') ? false : undefined;
         // add events
@@ -210,3 +221,4 @@ this._addEvents();
         this._setPlaceholder(this.getAttribute('placeholder'));
-
+        this._setValid(this.validity);
+        this._setMessage(this.getAttribute('message'));
         // remove no-animation loading class
@@ -227,2 +239,3 @@ setTimeout(function(){
             'name': this._setName,
+            'message': this._setMessage
         };
@@ -258,3 +271,3 @@ // call callback if it exists
         // pass on value when user enters content
-        this.$input.addEventListener('keydown', function(e){
+        this.$input.addEventListener('input', function(e){
             if(e.keyCode === 13){
@@ -281,3 +294,3 @@ if(this.$form.checkValidity()){
         if(this.hasAttribute('autovalidate') && String(this.getAttribute('autovalidate')) !== 'false'){
-            this.$input.addEventListener('keydown', function(){
+            this.$input.addEventListener('input', function(){
                 // check if is valid
@@ -287,3 +300,3 @@ this._checkValidity();
         } else {
-            this.$input.addEventListener('keydown', function(){
+            this.$input.addEventListener('input', function(){
                 // check if is valid
@@ -325,2 +338,8 @@ if(this.$container.classList.contains('invalid') && this.$input.value !== '' && this.$input.validity.valid === true){
     /**
+     * set message
+     */
+    _setMessage(msg){
+        this.$message.innerHTML = msg;
+    }
+    /**
      * set name
@@ -327,0 +346,0 @@ */

wct.conf.js

@@ -6,16 +6,14 @@ module.exports = {
           "browsers": ["chrome"]
+      },
+      istanbul: {
+        dir: "./coverage",
+        reporters: ["text-summary", "lcov"],
+        include: [
+          "/src/*.js"
+        ],
+        exclude: [
+        ]
       }
-    //   istanbul: {
-    //     dir: "./coverage",
-    //     reporters: ["text-summary", "lcov"],
-    //     include: [
-    //       "src/*.js"
-    //     ],
-    //     exclude: [
-    //       "/polymer/polymer.js",
-    //       "/platform/platform.js"
-    //     ]
-    //   }
     }
 };
 // , "firefox" , "safari"

No alert changes

Improved metrics

Total package byte prevSize

952209

increased by0.43%

Lines of code

18176

increased by0.18%

Number of lines in readme file

114

increased by5.56%

No dependency changes