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

Comparing version 1.5.0 to 1.6.0

dist/cjs/es5/component/Select.js

@@ -16,3 +16,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n      <style>\n        .emd-select {\n  border: 1px solid #C3C8D2;\n  border-radius: 2px;\n  box-sizing: border-box;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  letter-spacing: 0;\n  width: 100%;\n  height: 50px;\n  background: #fff;\n}\n\n.emd-select:focus {\n  border: 1px solid #95C93D;\n  color: #2D3844;\n  outline: none;\n}\n\n.emd-select__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-select__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([validationstatus=\"success\"]) .emd-select {\n  border: 1px solid #2ECC71;\n}\n\n:host([validationstatus=\"success\"]) .emd-select__tips {\n  color: #2ECC71;\n}\n\n:host([validationstatus=\"warning\"]) .emd-select {\n  border: 1px solid #F9BF09;\n}\n\n:host([validationstatus=\"warning\"]) .emd-select__tips {\n  color: #F9BF09;\n}\n\n:host([validationstatus=\"error\"]) .emd-select {\n  border: 1px solid #E74C3C;\n}\n\n:host([validationstatus=\"error\"]) .emd-select__tips {\n color: #E74C3C;\n}\n\n/* for compatibility */\n\nsling-input {\n  display: block;\n}\n\nsling-input[validationstatus=\"success\"] .emd-select {\n  border: 1px solid #2ECC71;\n}\n\nsling-input[validationstatus=\"success\"] .emd-select__tips {\n  color: #2ECC71;\n}\n\nsling-input[validationstatus=\"warning\"] .emd-select {\n  border: 1px solid #F9BF09;\n}\n\nsling-input[validationstatus=\"warning\"] .emd-select__tips {\n  color: #F9BF09;\n}\n\nsling-input[validationstatus=\"error\"] .emd-select {\n  border: 1px solid #E74C3C;\n}\n\nsling-input[validationstatus=\"error\"] .emd-select__tips {\n color: #E74C3C;\n}\n\n\n      </style>\n\n      <label class=\"emd-select__label\">", "\n        <select\n          class=\"emd-select\"\n          onblur=\"", "\"\n          onfocus=\"", "\"\n          onchange=\"", "\"\n          disabled=\"", "\"\n          name=\"", "\"\n          size=\"", "\"\n          value=\"", "\">\n          <option value=\"\" disabled hidden selected=\"", "\">\n            ", "\n          </option>\n          ", "\n        </select>\n        <p class=\"emd-select__tips\">", "</p>\n      </label>\n    "]);
+  var data = _taggedTemplateLiteral(["\n      <style>\n        .emd-select {\n  border: 1px solid #C3C8D2;\n  border-radius: 2px;\n  box-sizing: border-box;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  letter-spacing: 0;\n  width: 100%;\n  height: 50px;\n  background: #fff;\n}\n\n.emd-select:focus {\n  border: 1px solid #95C93D;\n  color: #2D3844;\n  outline: none;\n}\n\n.emd-select__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-select__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([validationstatus=\"success\"]) .emd-select {\n  border: 1px solid #2ECC71;\n}\n\n:host([validationstatus=\"success\"]) .emd-select__tips {\n  color: #2ECC71;\n}\n\n:host([validationstatus=\"warning\"]) .emd-select {\n  border: 1px solid #F9BF09;\n}\n\n:host([validationstatus=\"warning\"]) .emd-select__tips {\n  color: #F9BF09;\n}\n\n:host([validationstatus=\"error\"]) .emd-select {\n  border: 1px solid #E74C3C;\n}\n\n:host([validationstatus=\"error\"]) .emd-select__tips {\n color: #E74C3C;\n}\n\n/* for compatibility */\n\nsling-input {\n  display: block;\n}\n\nsling-input[validationstatus=\"success\"] .emd-select {\n  border: 1px solid #2ECC71;\n}\n\nsling-input[validationstatus=\"success\"] .emd-select__tips {\n  color: #2ECC71;\n}\n\nsling-input[validationstatus=\"warning\"] .emd-select {\n  border: 1px solid #F9BF09;\n}\n\nsling-input[validationstatus=\"warning\"] .emd-select__tips {\n  color: #F9BF09;\n}\n\nsling-input[validationstatus=\"error\"] .emd-select {\n  border: 1px solid #E74C3C;\n}\n\nsling-input[validationstatus=\"error\"] .emd-select__tips {\n color: #E74C3C;\n}\n\n\n      </style>\n\n      <label class=\"emd-select__label\">", "\n        <select\n          class=\"emd-select\"\n          onchange=\"", "\"\n          disabled=\"", "\"\n          name=\"", "\"\n          size=\"", "\"\n          value=\"", "\">\n          <option value=\"\" disabled hidden selected=\"", "\">\n            ", "\n          </option>\n          ", "\n        </select>\n        <p class=\"emd-select__tips\">", "</p>\n      </label>\n    "]);
 
@@ -62,4 +62,2 @@ _templateObject = function _templateObject() {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this));
-    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
@@ -76,22 +74,6 @@ return _this;
   }, {
-    key: "handleBlur",
-    value: function handleBlur(_ref2) {
-      var target = _ref2.target;
-      this.dispatchEventAndMethod('fieldblur', {
-        target: target
-      });
-    }
-  }, {
-    key: "handleFocus",
-    value: function handleFocus(_ref3) {
-      var target = _ref3.target;
-      this.dispatchEventAndMethod('fieldfocus', {
-        target: target
-      });
-    }
-  }, {
     key: "dispatchUpdateEvent",
     value: function dispatchUpdateEvent(newValue, oldValue) {
       if (oldValue !== newValue) {
-        this.dispatchEventAndMethod('update', {
+        this.dispatchEventAndMethod('input', {
           value: this.value
@@ -108,3 +90,3 @@ });
           srcoptions = _this$srcoptions === void 0 ? [] : _this$srcoptions;
-      return _slingFramework.html(_templateObject(), this.label, this.handleBlur, this.handleFocus, this.handleChange, this.disabled, this.name, this.size, this.value, this.value == null, this.placeholder || 'Select a value', srcoptions.map(function (option) {
+      return _slingFramework.html(_templateObject(), this.label, this.handleChange, this.disabled, this.name, this.size, this.value, this.value == null, this.placeholder || 'Select a value', srcoptions.map(function (option) {
         return _slingFramework.html(_templateObject2(), option.id, String(option.id) === String(_this2.value), option.name);
@@ -111,0 +93,0 @@ }), this.validationmessage);

dist/cjs/es6/component/Select.js

@@ -13,4 +13,2 @@ "use strict";
     super();
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
     this.handleChange = this.handleChange.bind(this);
@@ -66,21 +64,5 @@ }
 
-  handleBlur({
-    target
-  }) {
-    this.dispatchEventAndMethod('fieldblur', {
-      target
-    });
-  }
-
-  handleFocus({
-    target
-  }) {
-    this.dispatchEventAndMethod('fieldfocus', {
-      target
-    });
-  }
-
   dispatchUpdateEvent(newValue, oldValue) {
     if (oldValue !== newValue) {
-      this.dispatchEventAndMethod('update', {
+      this.dispatchEventAndMethod('input', {
         value: this.value
@@ -198,4 +180,2 @@ });
           class="emd-select"
-          onblur="${this.handleBlur}"
-          onfocus="${this.handleFocus}"
           onchange="${this.handleChange}"
@@ -202,0 +182,0 @@ disabled="${this.disabled}"

dist/es/es5/component/Select.js

@@ -14,3 +14,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n      <style>\n        .emd-select {\n  border: 1px solid #C3C8D2;\n  border-radius: 2px;\n  box-sizing: border-box;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  letter-spacing: 0;\n  width: 100%;\n  height: 50px;\n  background: #fff;\n}\n\n.emd-select:focus {\n  border: 1px solid #95C93D;\n  color: #2D3844;\n  outline: none;\n}\n\n.emd-select__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-select__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([validationstatus=\"success\"]) .emd-select {\n  border: 1px solid #2ECC71;\n}\n\n:host([validationstatus=\"success\"]) .emd-select__tips {\n  color: #2ECC71;\n}\n\n:host([validationstatus=\"warning\"]) .emd-select {\n  border: 1px solid #F9BF09;\n}\n\n:host([validationstatus=\"warning\"]) .emd-select__tips {\n  color: #F9BF09;\n}\n\n:host([validationstatus=\"error\"]) .emd-select {\n  border: 1px solid #E74C3C;\n}\n\n:host([validationstatus=\"error\"]) .emd-select__tips {\n color: #E74C3C;\n}\n\n/* for compatibility */\n\nsling-input {\n  display: block;\n}\n\nsling-input[validationstatus=\"success\"] .emd-select {\n  border: 1px solid #2ECC71;\n}\n\nsling-input[validationstatus=\"success\"] .emd-select__tips {\n  color: #2ECC71;\n}\n\nsling-input[validationstatus=\"warning\"] .emd-select {\n  border: 1px solid #F9BF09;\n}\n\nsling-input[validationstatus=\"warning\"] .emd-select__tips {\n  color: #F9BF09;\n}\n\nsling-input[validationstatus=\"error\"] .emd-select {\n  border: 1px solid #E74C3C;\n}\n\nsling-input[validationstatus=\"error\"] .emd-select__tips {\n color: #E74C3C;\n}\n\n\n      </style>\n\n      <label class=\"emd-select__label\">", "\n        <select\n          class=\"emd-select\"\n          onblur=\"", "\"\n          onfocus=\"", "\"\n          onchange=\"", "\"\n          disabled=\"", "\"\n          name=\"", "\"\n          size=\"", "\"\n          value=\"", "\">\n          <option value=\"\" disabled hidden selected=\"", "\">\n            ", "\n          </option>\n          ", "\n        </select>\n        <p class=\"emd-select__tips\">", "</p>\n      </label>\n    "]);
+  var data = _taggedTemplateLiteral(["\n      <style>\n        .emd-select {\n  border: 1px solid #C3C8D2;\n  border-radius: 2px;\n  box-sizing: border-box;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  letter-spacing: 0;\n  width: 100%;\n  height: 50px;\n  background: #fff;\n}\n\n.emd-select:focus {\n  border: 1px solid #95C93D;\n  color: #2D3844;\n  outline: none;\n}\n\n.emd-select__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-select__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([validationstatus=\"success\"]) .emd-select {\n  border: 1px solid #2ECC71;\n}\n\n:host([validationstatus=\"success\"]) .emd-select__tips {\n  color: #2ECC71;\n}\n\n:host([validationstatus=\"warning\"]) .emd-select {\n  border: 1px solid #F9BF09;\n}\n\n:host([validationstatus=\"warning\"]) .emd-select__tips {\n  color: #F9BF09;\n}\n\n:host([validationstatus=\"error\"]) .emd-select {\n  border: 1px solid #E74C3C;\n}\n\n:host([validationstatus=\"error\"]) .emd-select__tips {\n color: #E74C3C;\n}\n\n/* for compatibility */\n\nsling-input {\n  display: block;\n}\n\nsling-input[validationstatus=\"success\"] .emd-select {\n  border: 1px solid #2ECC71;\n}\n\nsling-input[validationstatus=\"success\"] .emd-select__tips {\n  color: #2ECC71;\n}\n\nsling-input[validationstatus=\"warning\"] .emd-select {\n  border: 1px solid #F9BF09;\n}\n\nsling-input[validationstatus=\"warning\"] .emd-select__tips {\n  color: #F9BF09;\n}\n\nsling-input[validationstatus=\"error\"] .emd-select {\n  border: 1px solid #E74C3C;\n}\n\nsling-input[validationstatus=\"error\"] .emd-select__tips {\n color: #E74C3C;\n}\n\n\n      </style>\n\n      <label class=\"emd-select__label\">", "\n        <select\n          class=\"emd-select\"\n          onchange=\"", "\"\n          disabled=\"", "\"\n          name=\"", "\"\n          size=\"", "\"\n          value=\"", "\">\n          <option value=\"\" disabled hidden selected=\"", "\">\n            ", "\n          </option>\n          ", "\n        </select>\n        <p class=\"emd-select__tips\">", "</p>\n      </label>\n    "]);
 
@@ -54,4 +54,2 @@ _templateObject = function _templateObject() {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this));
-    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
@@ -68,22 +66,6 @@ return _this;
   }, {
-    key: "handleBlur",
-    value: function handleBlur(_ref2) {
-      var target = _ref2.target;
-      this.dispatchEventAndMethod('fieldblur', {
-        target: target
-      });
-    }
-  }, {
-    key: "handleFocus",
-    value: function handleFocus(_ref3) {
-      var target = _ref3.target;
-      this.dispatchEventAndMethod('fieldfocus', {
-        target: target
-      });
-    }
-  }, {
     key: "dispatchUpdateEvent",
     value: function dispatchUpdateEvent(newValue, oldValue) {
       if (oldValue !== newValue) {
-        this.dispatchEventAndMethod('update', {
+        this.dispatchEventAndMethod('input', {
           value: this.value
@@ -100,3 +82,3 @@ });
           srcoptions = _this$srcoptions === void 0 ? [] : _this$srcoptions;
-      return html(_templateObject(), this.label, this.handleBlur, this.handleFocus, this.handleChange, this.disabled, this.name, this.size, this.value, this.value == null, this.placeholder || 'Select a value', srcoptions.map(function (option) {
+      return html(_templateObject(), this.label, this.handleChange, this.disabled, this.name, this.size, this.value, this.value == null, this.placeholder || 'Select a value', srcoptions.map(function (option) {
         return html(_templateObject2(), option.id, String(option.id) === String(_this2.value), option.name);
@@ -103,0 +85,0 @@ }), this.validationmessage);

dist/es/es6/component/Select.js

@@ -6,4 +6,2 @@ import { SlingElement, html } from 'sling-framework';
     super();
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
     this.handleChange = this.handleChange.bind(this);
@@ -57,13 +55,5 @@ }
 
-  handleBlur({ target }) {
-    this.dispatchEventAndMethod('fieldblur', { target });
-  }
-
-  handleFocus({ target }) {
-    this.dispatchEventAndMethod('fieldfocus', { target });
-  }
-
   dispatchUpdateEvent(newValue, oldValue) {
     if (oldValue !== newValue) {
-      this.dispatchEventAndMethod('update', { value: this.value });
+      this.dispatchEventAndMethod('input', { value: this.value });
     }
@@ -178,4 +168,2 @@ }
           class="emd-select"
-          onblur="${this.handleBlur}"
-          onfocus="${this.handleFocus}"
           onchange="${this.handleChange}"
@@ -182,0 +170,0 @@ disabled="${this.disabled}"

package.json

 {
   "name": "sling-web-component-select",
-  "version": "1.5.0",
-  "description": "Sling Web Component Select",
+  "version": "1.6.0",
+  "description": "Sling Select",
   "module": "src/index.js",
-  "main": "dist/cjs/es6/index.js",
+  "main": "dist/cjs/es5/index.js",
   "jsnext:main": "dist/es/es6/index.js",
@@ -11,5 +11,5 @@ "browser": "dist/iife/es6/index.js",
   "dependencies": {
-    "sling-framework": "^1.5.0",
-    "sling-helpers": "^1.5.0"
+    "sling-framework": "^1.6.0",
+    "sling-helpers": "^1.6.0"
   }
 }

src/component/Select.js

@@ -6,4 +6,2 @@ import { SlingElement, html } from 'sling-framework';
     super();
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
     this.handleChange = this.handleChange.bind(this);
@@ -57,13 +55,5 @@ }
 
-  handleBlur({ target }) {
-    this.dispatchEventAndMethod('fieldblur', { target });
-  }
-
-  handleFocus({ target }) {
-    this.dispatchEventAndMethod('fieldfocus', { target });
-  }
-
   dispatchUpdateEvent(newValue, oldValue) {
     if (oldValue !== newValue) {
-      this.dispatchEventAndMethod('update', { value: this.value });
+      this.dispatchEventAndMethod('input', { value: this.value });
     }
@@ -178,4 +168,2 @@ }
           class="emd-select"
-          onblur="${this.handleBlur}"
-          onfocus="${this.handleFocus}"
           onchange="${this.handleChange}"
@@ -182,0 +170,0 @@ disabled="${this.disabled}"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

499244

decreased by-0.72%

Lines of code

12392

decreased by-0.82%

Dependency changes

• Updatedsling-framework@^1.6.0

• Updatedsling-helpers@^1.6.0