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

Comparing version 0.2.36 to 0.3.0

dist/cjs/component/Input.js

@@ -10,3 +10,3 @@ 'use strict';
 
-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 _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/* for compatibility */\n\nsling-input {\n  display: block;\n}\n\nsling-input[state="success"] .emd-input {\n  border: 1px solid #2ECC71;\n}\n\nsling-input[state="success"] .emd-input__tips {\n  color: #2ECC71;\n}\n\nsling-input[state="warning"] .emd-input {\n  border: 1px solid #F9BF09;\n}\n\nsling-input[state="warning"] .emd-input__tips {\n  color: #F9BF09;\n}\n\nsling-input[state="error"] .emd-input {\n  border: 1px solid #E74C3C;\n}\n\nsling-input[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/* for compatibility */\n\nsling-input {\n  display: block;\n}\n\nsling-input[state="success"] .emd-input {\n  border: 1px solid #2ECC71;\n}\n\nsling-input[state="success"] .emd-input__tips {\n  color: #2ECC71;\n}\n\nsling-input[state="warning"] .emd-input {\n  border: 1px solid #F9BF09;\n}\n\nsling-input[state="warning"] .emd-input__tips {\n  color: #F9BF09;\n}\n\nsling-input[state="error"] .emd-input {\n  border: 1px solid #E74C3C;\n}\n\nsling-input[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   ']);
 
@@ -108,3 +108,3 @@ var _cjs = require('sling-web-framework/dist/cjs');
     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);
+      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);
     }
@@ -111,0 +111,0 @@ }], [{

dist/es/component/Input.js

@@ -233,2 +233,32 @@ import { html, SlingElement } from 'sling-web-framework/dist/es';
 
+/* for compatibility */
+
+sling-input {
+  display: block;
+}
+
+sling-input[state="success"] .emd-input {
+  border: 1px solid #2ECC71;
+}
+
+sling-input[state="success"] .emd-input__tips {
+  color: #2ECC71;
+}
+
+sling-input[state="warning"] .emd-input {
+  border: 1px solid #F9BF09;
+}
+
+sling-input[state="warning"] .emd-input__tips {
+  color: #F9BF09;
+}
+
+sling-input[state="error"] .emd-input {
+  border: 1px solid #E74C3C;
+}
+
+sling-input[state="error"] .emd-input__tips {
+ color: #E74C3C;
+}
+
     </style>
@@ -242,17 +272,17 @@
         disabled="${this.disabled}"
-        max$="${this.max}"
-        maxlength$="${this.maxlength}" 
-        min$="${this.min}"
-        minlength$="${this.minlength}"
+        max="${this.max}"
+        maxlength="${this.maxlength}" 
+        min="${this.min}"
+        minlength="${this.minlength}"
         name="${this.name}"
         oninput="${this.handleInput}"
-        pattern$="${this.pattern}"
+        pattern="${this.pattern}"
         placeholder="${this.placeholder}"
         readonly="${this.readonly}"
         required="${this.required}"
-        size$="${this.size}"
-        src$="${this.src}"
+        size="${this.size}"
+        src="${this.src}"
         step="${this.step}"
         type="${this.type}"
-        value="${this.value}">
+        value="${this.value || ''}">
       <p class="emd-input__tips">${this.validationmessage}</p>
@@ -259,0 +289,0 @@ </label>

package.json

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

New alerts

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

Fixed alerts

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

26015

increased by6.6%

Lines of code

472

increased by5.83%

Dependency changes

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

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

• + Addedsling-web-helpers@0.3.3(transitive)

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

• - Removedsling-web-component-sdk-connect@0.2.34(transitive)

• - Removedsling-web-framework@0.2.36(transitive)

• - Removedsling-web-sdk@0.2.36(transitive)

• Updatedsling-web-framework@^0.3.0