sling-web-component-input - npm Package Compare versions

Comparing version 0.2.31 to 0.2.32

dist/cjs/component/Input.js

@@ -6,5 +6,14 @@ 'use strict';
 });
+exports.Input = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _templateObject = _taggedTemplateLiteral(['\n    <style>\n      .emd-input {\n  border: 1px solid #C3C8D2;\n  box-sizing: border-box;\n  border-radius: 2px;\n  color: #96A0AF;\n  font-family: \'Heebo\', sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  letter-spacing: 0;\n  padding: 16px;\n  width: 100%;\n}\n\n.emd-input:hover {\n  border: 1px solid #96A0AF;\n  color: #96A0AF;\n}\n\n.emd-input:disabled {\n  background: #FAFAFC;\n  border: 1px solid #EBEBF0;\n  color: #C3C8D2;\n}\n\n.emd-input:focus {\n  border: 1px solid #95C93D;\n  color: #2D3844;\n  outline: none;\n}\n\n.emd-input__label {\n  display: block;\n  font-family: \'Heebo\', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.4px;\n  line-height: 16px;\n}\n\n.emd-input__tips {\n  color: #96A0AF;\n  font-family: \'Heebo\', sans-serif;\n  font-size: 11px;\n  font-weight: 400;\n  letter-spacing: 0;\n  line-height: 13px;\n}\n\n:host {\n  display: block;\n}\n\n:host([state="success"]) .emd-input {\n  border: 1px solid #2ECC71;\n}\n\n:host([state="success"]) .emd-input__tips {\n  color: #2ECC71;\n}\n\n:host([state="warning"]) .emd-input {\n  border: 1px solid #F9BF09;\n}\n\n:host([state="warning"]) .emd-input__tips {\n  color: #F9BF09;\n}\n\n:host([state="error"]) .emd-input {\n  border: 1px solid #E74C3C;\n}\n\n:host([state="error"]) .emd-input__tips {\n color: #E74C3C;\n}\n\n    </style>\n    \n    <label class="emd-input__label">', ' \n      <input \n        autocomplete="', '"\n        checked="', '"\n        class="emd-input"\n        disabled="', '"\n        max$="', '"\n        maxlength$="', '" \n        min$="', '"\n        minlength$="', '"\n        name="', '"\n        oninput="', '"\n        pattern$="', '"\n        placeholder="', '"\n        readonly="', '"\n        required="', '"\n        size$="', '"\n        src$="', '"\n        step="', '"\n        type="', '"\n        value="', '">\n      <p class="emd-input__tips">', '</p>\n    </label>\n   '], ['\n    <style>\n      .emd-input {\n  border: 1px solid #C3C8D2;\n  box-sizing: border-box;\n  border-radius: 2px;\n  color: #96A0AF;\n  font-family: \'Heebo\', sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  letter-spacing: 0;\n  padding: 16px;\n  width: 100%;\n}\n\n.emd-input:hover {\n  border: 1px solid #96A0AF;\n  color: #96A0AF;\n}\n\n.emd-input:disabled {\n  background: #FAFAFC;\n  border: 1px solid #EBEBF0;\n  color: #C3C8D2;\n}\n\n.emd-input:focus {\n  border: 1px solid #95C93D;\n  color: #2D3844;\n  outline: none;\n}\n\n.emd-input__label {\n  display: block;\n  font-family: \'Heebo\', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.4px;\n  line-height: 16px;\n}\n\n.emd-input__tips {\n  color: #96A0AF;\n  font-family: \'Heebo\', sans-serif;\n  font-size: 11px;\n  font-weight: 400;\n  letter-spacing: 0;\n  line-height: 13px;\n}\n\n:host {\n  display: block;\n}\n\n:host([state="success"]) .emd-input {\n  border: 1px solid #2ECC71;\n}\n\n:host([state="success"]) .emd-input__tips {\n  color: #2ECC71;\n}\n\n:host([state="warning"]) .emd-input {\n  border: 1px solid #F9BF09;\n}\n\n:host([state="warning"]) .emd-input__tips {\n  color: #F9BF09;\n}\n\n:host([state="error"]) .emd-input {\n  border: 1px solid #E74C3C;\n}\n\n:host([state="error"]) .emd-input__tips {\n color: #E74C3C;\n}\n\n    </style>\n    \n    <label class="emd-input__label">', ' \n      <input \n        autocomplete="', '"\n        checked="', '"\n        class="emd-input"\n        disabled="', '"\n        max$="', '"\n        maxlength$="', '" \n        min$="', '"\n        minlength$="', '"\n        name="', '"\n        oninput="', '"\n        pattern$="', '"\n        placeholder="', '"\n        readonly="', '"\n        required="', '"\n        size$="', '"\n        src$="', '"\n        step="', '"\n        type="', '"\n        value="', '">\n      <p class="emd-input__tips">', '</p>\n    </label>\n   ']);
+
+var _cjs = require('sling-web-framework/dist/cjs');
+
+var _cjs2 = require('sling-web-helpers/dist/cjs');
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -16,11 +25,5 @@
 
-var attributesBlackList = ['class', 'style'];
+var Input = exports.Input = function (_SlingElement) {
+  _inherits(Input, _SlingElement);
 
-/**
- * Basic Input Component. It can receive everything that a basic HTML input can. Comes configured with basic validation and masks based on the attributes.
- */
-
-var Input = exports.Input = function (_HTMLElement) {
-  _inherits(Input, _HTMLElement);
-
   function Input() {
@@ -31,152 +34,167 @@ _classCallCheck(this, Input);
 
-    _this.handleChange = _this.handleChange.bind(_this);
-    _this.attachShadow({ mode: 'open' });
+    _this.mask = { resolve: function resolve(value) {
+        return value;
+      } };
+    _this.handleInput = _this.handleInput.bind(_this);
+    _this.formatType = _this.formatType.bind(_this);
     return _this;
   }
 
-  /**
-   * @return {string} getter function for value.
-   */
-
-
   _createClass(Input, [{
-    key: 'handleChange',
+    key: 'handleInput',
+    value: function handleInput(_ref) {
+      var target = _ref.target;
 
-
-    /**
-     * onChange event handler.
-     * @param {object} event - event object.
-     */
-    value: function handleChange(event) {
-      var value = event.target.value;
-
-      this.value = value;
+      this.value = target.value;
+      this.dispatchEventAndMethod('input', {
+        value: this.value,
+        type: this.type
+      });
     }
   }, {
-    key: 'connectedCallback',
-    value: function connectedCallback() {
-      this.shadowRoot.innerHTML = '\n      <style>\n        :host .label {\n  font: 300 1.125rem/1.5 \'Montserrat\', sans-serif;\n  margin: 0 0 5px 0;\n}\n\n:host .input {\n  font: 400 1.125rem/1.5 \'Montserrat\', sans-serif;\n  padding: 4px;\n  border: 2px solid #E8EBEE;\n  border-radius: 2px;\n  outline: none;\n}\n\n:host .input_error {\n  border: 2px solid rgba(230, 75, 40, 0.75);\n}\n\n:host .validation {\n  color: #E64B28;\n  font: 300 0.875rem/1.5 \'Montserrat\', sans-serif;\n  margin: 0;\n  height: 20px;\n  padding: 4px 0;\n}\n\n      </style>\n    ';
+    key: 'formatType',
+    value: function formatType() {
+      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
-      this.$label = document.createElement('p');
-      this.$label.className = 'label';
-      this.$input = document.createElement('input');
-      this.$input.className = 'input';
-      this.$validation = document.createElement('p');
-      this.$validation.className = 'validation';
-
-      this.shadowRoot.appendChild(this.$label);
-      this.shadowRoot.appendChild(this.$input);
-      this.shadowRoot.appendChild(this.$validation);
-
-      this.setupInput();
-    }
-  }, {
-    key: 'setupInput',
-    value: function setupInput() {
-      var _this2 = this;
-
-      this.$label.innerText = this.label;
-      this.$input.addEventListener('input', this.handleChange);
-
-      Object.values(this.attributes).forEach(function (value) {
-        var name = value.name,
-            nodeValue = value.nodeValue;
-
-
-        if (!attributesBlackList.includes(name)) {
-          _this2.$input.setAttribute(name, nodeValue);
+      if (type) {
+        switch (type) {
+          case 'cnpj':
+            {
+              this.mask = _cjs2.imask.createMask({
+                mask: '00.000.000/0000-00'
+              });
+              this.maxlength = 18;
+              break;
+            }
+          case 'cpf':
+            {
+              this.mask = _cjs2.imask.createMask({
+                mask: '000.000.000-00'
+              });
+              this.maxlength = 14;
+              break;
+            }
+          case 'telefone':
+            {
+              this.mask = _cjs2.imask.createMask({
+                mask: '(00)00000-0000'
+              });
+              this.maxlength = 14;
+              break;
+            }
+          case 'cep':
+            {
+              this.mask = _cjs2.imask.createMask({
+                mask: '00.000-000'
+              });
+              break;
+            }
+          default:
+            {
+              break;
+            }
         }
-      });
-    }
-  }, {
-    key: 'disconnectedCallback',
-    value: function disconnectedCallback() {
-      this.$input.removeEventListener('input', this.handleChange);
-    }
-  }, {
-    key: 'value',
-    get: function get() {
-      return this.getAttribute('value');
-    }
-
-    /**
-     * @param {string} value - new value to be set.
-     */
-    ,
-    set: function set(value) {
-      if (value != null) {
-        this.setAttribute('value', value);
-      } else {
-        this.removeAttribute('value');
       }
+      return type;
     }
-
-    /**
-     * @return {string} getter function for type.
-     */
-
   }, {
-    key: 'type',
-    get: function get() {
-      return this.getAttribute('type');
-    }
-
-    /**
-     * @param {string} value - new value to be set.
-     */
-    ,
-    set: function set(value) {
-      if (value != null) {
-        this.setAttribute('type', value);
-      } else {
-        this.removeAttribute('type');
+    key: 'formatValue',
+    value: function formatValue(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.value = this.mask.resolve(newValue);
       }
     }
-
-    /**
-     * @return {string} getter function for label.
-     */
-
   }, {
-    key: 'label',
-    get: function get() {
-      return this.getAttribute('label');
+    key: 'render',
+    value: function render() {
+      return (0, _cjs.html)(_templateObject, this.label, this.autocomplete, this.checked, this.disabled, this.max, this.maxlength, this.min, this.minlength, this.name, this.handleInput, this.pattern, this.placeholder, this.readonly, this.required, this.size, this.src, this.step, this.type, this.value, this.validationmessage);
     }
-
-    /**
-     * @param {string} value - new value to be set.
-     */
-    ,
-    set: function set(value) {
-      if (value != null) {
-        this.setAttribute('label', value);
-      } else {
-        this.setAttribute('label', 'Field');
-      }
-    }
-
-    /**
-     * @return {boolean} getter function for required.
-     */
-
-  }, {
-    key: 'required',
+  }], [{
+    key: 'properties',
     get: function get() {
-      return this.hasAttribute('required');
+      return {
+        autocomplete: {
+          type: String,
+          reflectToAttribute: true
+        },
+        checked: {
+          type: Boolean,
+          reflectToAttribute: true
+        },
+        disabled: {
+          type: Boolean,
+          reflectToAttribute: true
+        },
+        label: {
+          type: String,
+          reflectToAttribute: true
+        },
+        type: {
+          type: String,
+          reflectToAttribute: true,
+          observer: 'formatType'
+        },
+        required: {
+          type: Boolean,
+          reflectToAttribute: true
+        },
+        max: {
+          type: Number,
+          reflectToAttribute: true
+        },
+        maxlength: {
+          type: Number,
+          reflectToAttribute: true
+        },
+        min: {
+          type: Number,
+          reflectToAttribute: true
+        },
+        minlength: {
+          type: Number,
+          reflectToAttribute: true
+        },
+        name: {
+          type: String,
+          reflectToAttribute: true
+        },
+        pattern: {
+          type: String,
+          reflectToAttribute: true
+        },
+        placeholder: {
+          type: String,
+          reflectToAttribute: true
+        },
+        readonly: {
+          type: Boolean,
+          reflectToAttribute: true
+        },
+        size: {
+          type: Number,
+          reflectToAttribute: true
+        },
+        src: {
+          type: String,
+          reflectToAttribute: true
+        },
+        state: {
+          type: String,
+          reflectToAttribute: true
+        },
+        step: {
+          type: Number,
+          reflectToAttribute: true
+        },
+        validationmessage: { type: Object },
+        value: {
+          type: String,
+          reflectToAttribute: true,
+          observer: 'formatValue'
+        }
+      };
     }
-
-    /**
-     * @param {boolean} value - new value to be set.
-     */
-    ,
-    set: function set(value) {
-      if (value) {
-        this.setAttribute('required', '');
-      } else {
-        this.removeAttribute('required');
-      }
-    }
   }]);
 
   return Input;
-}(HTMLElement);
+}(_cjs.SlingElement);

dist/es/component/Input.js

@@ -1,155 +0,260 @@
-const attributesBlackList = ['class', 'style'];
+import { html, SlingElement } from 'sling-web-framework/dist/es';
+import { imask } from 'sling-web-helpers/dist/es';
 
-/**
- * Basic Input Component. It can receive everything that a basic HTML input can. Comes configured with basic validation and masks based on the attributes.
- */
-export class Input extends HTMLElement {
+export class Input extends SlingElement {
   constructor() {
     super();
-    this.handleChange = this.handleChange.bind(this);
-    this.attachShadow({ mode: 'open' });
+    this.mask = { resolve: value => value };
+    this.handleInput = this.handleInput.bind(this);
+    this.formatType = this.formatType.bind(this);
   }
 
-  /**
-   * @return {string} getter function for value.
-   */
-  get value() {
-    return this.getAttribute('value');
+  static get properties() {
+    return {
+      autocomplete: {
+        type: String,
+        reflectToAttribute: true
+      },
+      checked: {
+        type: Boolean,
+        reflectToAttribute: true
+      },
+      disabled: {
+        type: Boolean,
+        reflectToAttribute: true
+      },
+      label: {
+        type: String,
+        reflectToAttribute: true
+      },
+      type: {
+        type: String,
+        reflectToAttribute: true,
+        observer: 'formatType'
+      },
+      required: {
+        type: Boolean,
+        reflectToAttribute: true
+      },
+      max: {
+        type: Number,
+        reflectToAttribute: true
+      },
+      maxlength: {
+        type: Number,
+        reflectToAttribute: true
+      },
+      min: {
+        type: Number,
+        reflectToAttribute: true
+      },
+      minlength: {
+        type: Number,
+        reflectToAttribute: true
+      },
+      name: {
+        type: String,
+        reflectToAttribute: true
+      },
+      pattern: {
+        type: String,
+        reflectToAttribute: true
+      },
+      placeholder: {
+        type: String,
+        reflectToAttribute: true
+      },
+      readonly: {
+        type: Boolean,
+        reflectToAttribute: true
+      },
+      size: {
+        type: Number,
+        reflectToAttribute: true
+      },
+      src: {
+        type: String,
+        reflectToAttribute: true
+      },
+      state: {
+        type: String,
+        reflectToAttribute: true
+      },
+      step: {
+        type: Number,
+        reflectToAttribute: true
+      },
+      validationmessage: { type: Object },
+      value: {
+        type: String,
+        reflectToAttribute: true,
+        observer: 'formatValue'
+      }
+    };
   }
 
-  /**
-   * @param {string} value - new value to be set.
-   */
-  set value(value) {
-    if (value != null) {
-      this.setAttribute('value', value);
-    } else {
-      this.removeAttribute('value');
-    }
+  handleInput({ target }) {
+    this.value = target.value;
+    this.dispatchEventAndMethod('input', {
+      value: this.value,
+      type: this.type
+    });
   }
 
-  /**
-   * @return {string} getter function for type.
-   */
-  get type() {
-    return this.getAttribute('type');
-  }
-
-  /**
-   * @param {string} value - new value to be set.
-   */
-  set type(value) {
-    if (value != null) {
-      this.setAttribute('type', value);
-    } else {
-      this.removeAttribute('type');
+  formatType(type = '') {
+    if (type) {
+      switch (type) {
+        case 'cnpj':
+          {
+            this.mask = imask.createMask({
+              mask: '00.000.000/0000-00'
+            });
+            this.maxlength = 18;
+            break;
+          }
+        case 'cpf':
+          {
+            this.mask = imask.createMask({
+              mask: '000.000.000-00'
+            });
+            this.maxlength = 14;
+            break;
+          }
+        case 'telefone':
+          {
+            this.mask = imask.createMask({
+              mask: '(00)00000-0000'
+            });
+            this.maxlength = 14;
+            break;
+          }
+        case 'cep':
+          {
+            this.mask = imask.createMask({
+              mask: '00.000-000'
+            });
+            break;
+          }
+        default:
+          {
+            break;
+          }
+      }
     }
+    return type;
   }
 
-  /**
-   * @return {string} getter function for label.
-   */
-  get label() {
-    return this.getAttribute('label');
-  }
-
-  /**
-   * @param {string} value - new value to be set.
-   */
-  set label(value) {
-    if (value != null) {
-      this.setAttribute('label', value);
-    } else {
-      this.setAttribute('label', 'Field');
+  formatValue(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.value = this.mask.resolve(newValue);
     }
   }
 
-  /**
-   * @return {boolean} getter function for required.
-   */
-  get required() {
-    return this.hasAttribute('required');
-  }
+  render() {
+    return html`
+    <style>
+      .emd-input {
+  border: 1px solid #C3C8D2;
+  box-sizing: border-box;
+  border-radius: 2px;
+  color: #96A0AF;
+  font-family: 'Heebo', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0;
+  padding: 16px;
+  width: 100%;
+}
 
-  /**
-   * @param {boolean} value - new value to be set.
-   */
-  set required(value) {
-    if (value) {
-      this.setAttribute('required', '');
-    } else {
-      this.removeAttribute('required');
-    }
-  }
+.emd-input:hover {
+  border: 1px solid #96A0AF;
+  color: #96A0AF;
+}
 
-  /**
-   * onChange event handler.
-   * @param {object} event - event object.
-   */
-  handleChange(event) {
-    const { value } = event.target;
-    this.value = value;
-  }
-
-  connectedCallback() {
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host .label {
-  font: 300 1.125rem/1.5 'Montserrat', sans-serif;
-  margin: 0 0 5px 0;
+.emd-input:disabled {
+  background: #FAFAFC;
+  border: 1px solid #EBEBF0;
+  color: #C3C8D2;
 }
 
-:host .input {
-  font: 400 1.125rem/1.5 'Montserrat', sans-serif;
-  padding: 4px;
-  border: 2px solid #E8EBEE;
-  border-radius: 2px;
+.emd-input:focus {
+  border: 1px solid #95C93D;
+  color: #2D3844;
   outline: none;
 }
 
-:host .input_error {
-  border: 2px solid rgba(230, 75, 40, 0.75);
+.emd-input__label {
+  display: block;
+  font-family: 'Heebo', sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+  line-height: 16px;
 }
 
-:host .validation {
-  color: #E64B28;
-  font: 300 0.875rem/1.5 'Montserrat', sans-serif;
-  margin: 0;
-  height: 20px;
-  padding: 4px 0;
+.emd-input__tips {
+  color: #96A0AF;
+  font-family: 'Heebo', sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 13px;
 }
 
-      </style>
-    `;
+:host {
+  display: block;
+}
 
-    this.$label = document.createElement('p');
-    this.$label.className = 'label';
-    this.$input = document.createElement('input');
-    this.$input.className = 'input';
-    this.$validation = document.createElement('p');
-    this.$validation.className = 'validation';
+:host([state="success"]) .emd-input {
+  border: 1px solid #2ECC71;
+}
 
-    this.shadowRoot.appendChild(this.$label);
-    this.shadowRoot.appendChild(this.$input);
-    this.shadowRoot.appendChild(this.$validation);
+:host([state="success"]) .emd-input__tips {
+  color: #2ECC71;
+}
 
-    this.setupInput();
-  }
+:host([state="warning"]) .emd-input {
+  border: 1px solid #F9BF09;
+}
 
-  setupInput() {
-    this.$label.innerText = this.label;
-    this.$input.addEventListener('input', this.handleChange);
+:host([state="warning"]) .emd-input__tips {
+  color: #F9BF09;
+}
 
-    Object.values(this.attributes).forEach(value => {
-      const { name, nodeValue } = value;
+:host([state="error"]) .emd-input {
+  border: 1px solid #E74C3C;
+}
 
-      if (!attributesBlackList.includes(name)) {
-        this.$input.setAttribute(name, nodeValue);
-      }
-    });
-  }
+:host([state="error"]) .emd-input__tips {
+ color: #E74C3C;
+}
 
-  disconnectedCallback() {
-    this.$input.removeEventListener('input', this.handleChange);
+    </style>
+    
+    <label class="emd-input__label">${this.label} 
+      <input 
+        autocomplete="${this.autocomplete}"
+        checked="${this.checked}"
+        class="emd-input"
+        disabled="${this.disabled}"
+        max$="${this.max}"
+        maxlength$="${this.maxlength}" 
+        min$="${this.min}"
+        minlength$="${this.minlength}"
+        name="${this.name}"
+        oninput="${this.handleInput}"
+        pattern$="${this.pattern}"
+        placeholder="${this.placeholder}"
+        readonly="${this.readonly}"
+        required="${this.required}"
+        size$="${this.size}"
+        src$="${this.src}"
+        step="${this.step}"
+        type="${this.type}"
+        value="${this.value}">
+      <p class="emd-input__tips">${this.validationmessage}</p>
+    </label>
+   `;
   }
 }

package.json

 {
   "name": "sling-web-component-input",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "description": "",
@@ -12,4 +12,5 @@ "main": "dist/cjs/index.js",
   "dependencies": {
-    "sling-web-helpers": "^0.2.31"
+    "sling-web-framework": "^0.2.32",
+    "sling-web-helpers": "^0.2.32"
   }
 }

README.md

@@ -1,3 +0,71 @@
-# sling-web-component-input
+# sling-web-component-input    
+`sling-web-component-input` is a simple design input.
 
-The input Component. To use it just add the tag to your index.html.
+## Install      
+     
+ `npm instal sling-web-component-input`
+ 
+ ## Tag
+ 
+ ```HTML   
+  <sling-input></sling-input>
+```
+
+ ## Dependencies        
+     
+    sling-web-framework       
+    sling-web-helpers        
+     
+ ## Attributes and properties   
+        
+|Name|Type|Default|ReflectToAttribute|Observer|callSdk| Description     
+|:--|:--|:--|:--:|:--|:--:| :--|
+|autocomplete|String|  |:heavy_check_mark:||||    
+|checked|Boolean |  |:heavy_check_mark:|          
+|disabled|Boolean|  |:heavy_check_mark:|          
+|label|String|  |:heavy_check_mark:|     
+|type|String|  |:heavy_check_mark:|formatType |       
+|max|Number|  |:heavy_check_mark:|
+|maxlength|Number|  |:heavy_check_mark:|    
+|min|Number|  |:heavy_check_mark:|    
+|minlength|Number|  |:heavy_check_mark:|    
+|name|String|  |:heavy_check_mark:|    
+|pattern|String|  |:heavy_check_mark:|    
+|placeholder|String|  |:heavy_check_mark:|    
+|readonly|Boolean |  |:heavy_check_mark:|    
+|size|Number|  |:heavy_check_mark:|    
+|src|String|  |:heavy_check_mark:|  
+|state|String|  |:heavy_check_mark:|   
+|step|Number|  |:heavy_check_mark:|   
+|validationmessage|Object|  |:heavy_check_mark:|   
+|value|String|  |:heavy_check_mark:| formatValue |    
+        
+## Events       
+        
+| Name | Arguments | Details |
+|:---|:---|:--|  
+| Input| Native event |      
+       
+ ## Examples      
+ 
+All component examples can be emulated using the `npm start sling-web-component-input` command.   
+### Use
+
+
+```HTML
+<sling-input label="Label" placeholder="Placeholder..."></sling-input>
+```
+
+![image](https://user-images.githubusercontent.com/22959060/40748998-e25d4580-6438-11e8-9926-95eaa9840d72.png)
+      
+  
+```HTML
+<sling-input label="Disabled" placeholder="Placeholder..." disabled></sling-input>
+```
+
+![image](https://user-images.githubusercontent.com/22959060/40749159-77aced3e-6439-11e8-89ad-76e53e5fb0aa.png)
+  
+```HTML
+<sling-input label="Success" placeholder="Placeholder..." state="success"></sling-input>
+ ```  
+![image](https://user-images.githubusercontent.com/22959060/40749201-93b49d88-6439-11e8-877b-d64f4b1ca541.png)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19806

increased by77.55%

Number of package files

9

increased by12.5%

Lines of code

446

increased by37.65%

Number of lines in readme file

72

increased by1700%

Worsened metrics

Dependency count

2

increased by100%

Number of low supply chain risk alerts

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedsling-web-framework@^0.2.32

• + Added@babel/runtime@7.26.7(transitive)

• + Added@polymer/lit-element@0.2.3(transitive)

• + Added@polymer/polymer@3.5.2(transitive)

• + Added@webcomponents/shadycss@1.11.2(transitive)

• + Addedaxios@0.18.1(transitive)

• + Addedfollow-redirects@1.5.10(transitive)

• + Addedis-buffer@2.0.5(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedlit-html@0.9.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlodash-es@4.17.21(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedredux@3.7.24.2.1(transitive)

• + Addedredux-thunk@2.4.2(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedsling-web-component-sdk-connect@0.2.34(transitive)

• + Addedsling-web-framework@0.2.36(transitive)

• + Addedsling-web-sdk@0.2.36(transitive)

• + Addedsymbol-observable@1.2.0(transitive)

• Updatedsling-web-helpers@^0.2.32