@tradeshift/elements.spinner - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

lib/spinner.umd.js

@@ -1,1 +0,142 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["@tradeshift/elements"],t):t((e=e||self).ts.elements)}(this,function(e){"use strict";function t(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function r(e,r,i){return r&&t(e.prototype,r),i&&t(e,i),e}function i(e,t){return t||(t=e.slice(0)),e.raw=t,e}var n={LARGE:"large",MEDIUM:"medium",SMALL:"small"},o={BLUE:"blue",MONO:"mono",WHITE:"white"};function s(){var e=i(['\n\t\t\t\t<div class="message">',"</div>\n\t\t\t"]);return s=function(){return e},e}function a(){var e=i(['\n\t\t\t\t<div class="spinner"></div>\n\t\t\t\t',"\n\t\t\t"]);return a=function(){return e},e}e.customElementDefineHelper("ts-spinner",function(t){var i,l;function p(){var e=t.call(this)||this;return e.color=o.BLUE,e.message="",e.size=n.LARGE,e.visible=!1,e}return l=t,(i=p).prototype=Object.create(l.prototype),i.prototype.constructor=i,i.__proto__=l,r(p,null,[{key:"styles",get:function(){return[e.TSElement.styles,e.unsafeCSS(":host{z-index:4000;z-index:var(--ts-zindex-spin)}:host .spinner{border:8px solid rgba(203,215,220,.5);border:var(--spinner-border-large) solid var(--spinner-border-color);border-top-color:#00aeff;border-top-color:var(--spinner-color-blue);border-radius:50%;width:80px;width:var(--spinner-size-large);height:80px;height:var(--spinner-size-large);-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;margin:0 auto}:host .message{text-align:center;margin:20px;margin:var(--ts-unit);font-size:14px;font-size:var(--ts-font-size-default)}:host([data-size=large]) .spinner{border-width:8px;border-width:var(--spinner-border-large);width:80px;width:var(--spinner-size-large);height:80px;height:var(--spinner-size-large)}:host([data-size=large]) .message{margin:20px;margin:var(--ts-unit);font-size:14px;font-size:var(--ts-fontsize)}:host([data-size=medium]) .spinner{border-width:4px;border-width:var(--spinner-border-medium);width:40px;width:var(--spinner-size-medium);height:40px;height:var(--spinner-size-medium)}:host([data-size=medium]) .message{margin:10px;margin:var(--ts-unit-half);font-size:12px;font-size:var(--ts-fontsize-mini)}:host([data-size=small]) .spinner{border-width:3px;border-width:var(--spinner-border-small);width:20px;width:var(--spinner-size-small);height:20px;height:var(--spinner-size-small)}:host([data-size=small]) .message{margin:5px;margin:var(--ts-unit-quarter);font-size:11px;font-size:var(--ts-fontsize-small)}:host([data-color=blue]) .spinner{border-top-color:#00aeff;border-top-color:var(--spinner-color-blue)}:host([data-color=mono]) .spinner{border-top-color:#506b77;border-top-color:var(--spinner-color-mono)}:host([data-color=white]) .spinner{border-top-color:#fff;border-top-color:var(--spinner-color-white)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}")]}},{key:"properties",get:function(){return{color:{type:String,attribute:"data-color",reflect:!0},message:{type:String,attribute:"data-message"},size:{type:String,attribute:"data-size",reflect:!0},visible:{type:Boolean,attribute:"data-visible"}}}}]),p.prototype.render=function(){return this.visible?e.html(a(),this.messageHtml):""},r(p,[{key:"messageHtml",get:function(){return this.message?e.html(s(),this.message):""}}]),p}(e.TSElement))});
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('@tradeshift/elements')) :
+  typeof define === 'function' && define.amd ? define(['@tradeshift/elements'], factory) :
+  (global = global || self, factory(global.ts.elements));
+}(this, function (elements) { 'use strict';
+
+  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);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+    subClass.__proto__ = superClass;
+  }
+
+  function _taggedTemplateLiteralLoose(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    strings.raw = raw;
+    return strings;
+  }
+
+  var css = "/* General........................................................ */\n\n:host {\n\tz-index: 4000;\n\tz-index: var(--ts-zindex-spin);\n}\n\n:host .spinner {\n\tborder: 8px solid rgba(203, 215, 220, 0.5);\n\tborder: var(--spinner-border-large) solid var(--spinner-border-color);\n\tborder-top-color: rgb(0, 174, 255);\n\tborder-top-color: var(--spinner-color-blue);\n\tborder-radius: 50%;\n\twidth: 80px;\n\twidth: var(--spinner-size-large);\n\theight: 80px;\n\theight: var(--spinner-size-large);\n\t-webkit-animation: spin 1s linear infinite;\n\t        animation: spin 1s linear infinite;\n\tmargin: 0 auto;\n}\n\n:host .message {\n\ttext-align: center;\n\tmargin: 20px;\n\tmargin: var(--ts-unit);\n\tfont-size: 14px;\n\tfont-size: var(--ts-font-size-default);\n}\n/* Size............................................................ */\n\n:host([data-size='large']) .spinner {\n\tborder-width: 8px;\n\tborder-width: var(--spinner-border-large);\n\twidth: 80px;\n\twidth: var(--spinner-size-large);\n\theight: 80px;\n\theight: var(--spinner-size-large);\n}\n\n:host([data-size='large']) .message {\n\tmargin: 20px;\n\tmargin: var(--ts-unit);\n\tfont-size: 14px;\n\tfont-size: var(--ts-fontsize);\n}\n\n:host([data-size='medium']) .spinner {\n\tborder-width: 4px;\n\tborder-width: var(--spinner-border-medium);\n\twidth: calc(2 * 20px);\n\twidth: var(--spinner-size-medium);\n\theight: calc(2 * 20px);\n\theight: var(--spinner-size-medium);\n}\n\n:host([data-size='medium']) .message {\n\tmargin: calc(0.5 * 20px);\n\tmargin: var(--ts-unit-half);\n\tfont-size: 12px;\n\tfont-size: var(--ts-fontsize-mini);\n}\n\n:host([data-size='small']) .spinner {\n\tborder-width: 3px;\n\tborder-width: var(--spinner-border-small);\n\twidth: 20px;\n\twidth: var(--spinner-size-small);\n\theight: 20px;\n\theight: var(--spinner-size-small);\n}\n\n:host([data-size='small']) .message {\n\tmargin: calc(0.25 * 20px);\n\tmargin: var(--ts-unit-quarter);\n\tfont-size: 11px;\n\tfont-size: var(--ts-fontsize-small);\n}\n\n/* Color............................................................ */\n\n:host([data-color='blue']) .spinner {\n\tborder-top-color: rgb(0, 174, 255);\n\tborder-top-color: var(--spinner-color-blue);\n}\n\n:host([data-color='mono']) .spinner {\n\tborder-top-color: rgb(80, 107, 119);\n\tborder-top-color: var(--spinner-color-mono);\n}\n\n:host([data-color='white']) .spinner {\n\tborder-top-color: rgb(255, 255, 255);\n\tborder-top-color: var(--spinner-color-white);\n}\n\n@-webkit-keyframes spin {\n\t0% {\n\t\t-webkit-transform: rotate(0deg);\n\t\t        transform: rotate(0deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(360deg);\n\t\t        transform: rotate(360deg);\n\t}\n}\n\n@keyframes spin {\n\t0% {\n\t\t-webkit-transform: rotate(0deg);\n\t\t        transform: rotate(0deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(360deg);\n\t\t        transform: rotate(360deg);\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNwaW5uZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxhQUE4QjtDQUE5Qiw4QkFBOEI7QUFDL0I7O0FBRUE7Q0FDQywwQ0FBcUU7Q0FBckUscUVBQXFFO0NBQ3JFLGtDQUEyQztDQUEzQywyQ0FBMkM7Q0FDM0Msa0JBQWtCO0NBQ2xCLFdBQWdDO0NBQWhDLGdDQUFnQztDQUNoQyxZQUFpQztDQUFqQyxpQ0FBaUM7Q0FDakMsMENBQWtDO1NBQWxDLGtDQUFrQztDQUNsQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxrQkFBa0I7Q0FDbEIsWUFBc0I7Q0FBdEIsc0JBQXNCO0NBQ3RCLGVBQXNDO0NBQXRDLHNDQUFzQztBQUN2QztBQUNBLHFFQUFxRTs7QUFFckU7Q0FDQyxpQkFBeUM7Q0FBekMseUNBQXlDO0NBQ3pDLFdBQWdDO0NBQWhDLGdDQUFnQztDQUNoQyxZQUFpQztDQUFqQyxpQ0FBaUM7QUFDbEM7O0FBRUE7Q0FDQyxZQUFzQjtDQUF0QixzQkFBc0I7Q0FDdEIsZUFBNkI7Q0FBN0IsNkJBQTZCO0FBQzlCOztBQUVBO0NBQ0MsaUJBQTBDO0NBQTFDLDBDQUEwQztDQUMxQyxxQkFBaUM7Q0FBakMsaUNBQWlDO0NBQ2pDLHNCQUFrQztDQUFsQyxrQ0FBa0M7QUFDbkM7O0FBRUE7Q0FDQyx3QkFBMkI7Q0FBM0IsMkJBQTJCO0NBQzNCLGVBQWtDO0NBQWxDLGtDQUFrQztBQUNuQzs7QUFFQTtDQUNDLGlCQUF5QztDQUF6Qyx5Q0FBeUM7Q0FDekMsV0FBZ0M7Q0FBaEMsZ0NBQWdDO0NBQ2hDLFlBQWlDO0NBQWpDLGlDQUFpQztBQUNsQzs7QUFFQTtDQUNDLHlCQUE4QjtDQUE5Qiw4QkFBOEI7Q0FDOUIsZUFBbUM7Q0FBbkMsbUNBQW1DO0FBQ3BDOztBQUVBLHNFQUFzRTs7QUFFdEU7Q0FDQyxrQ0FBMkM7Q0FBM0MsMkNBQTJDO0FBQzVDOztBQUVBO0NBQ0MsbUNBQTJDO0NBQTNDLDJDQUEyQztBQUM1Qzs7QUFFQTtDQUNDLG9DQUE0QztDQUE1Qyw0Q0FBNEM7QUFDN0M7O0FBRUE7Q0FDQztFQUNDLCtCQUF1QjtVQUF2Qix1QkFBdUI7Q0FDeEI7Q0FDQTtFQUNDLGlDQUF5QjtVQUF6Qix5QkFBeUI7Q0FDMUI7QUFDRDs7QUFQQTtDQUNDO0VBQ0MsK0JBQXVCO1VBQXZCLHVCQUF1QjtDQUN4QjtDQUNBO0VBQ0MsaUNBQXlCO1VBQXpCLHlCQUF5QjtDQUMxQjtBQUNEIiwiZmlsZSI6InNwaW5uZXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogR2VuZXJhbC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uICovXG5cbjpob3N0IHtcblx0ei1pbmRleDogdmFyKC0tdHMtemluZGV4LXNwaW4pO1xufVxuXG46aG9zdCAuc3Bpbm5lciB7XG5cdGJvcmRlcjogdmFyKC0tc3Bpbm5lci1ib3JkZXItbGFyZ2UpIHNvbGlkIHZhcigtLXNwaW5uZXItYm9yZGVyLWNvbG9yKTtcblx0Ym9yZGVyLXRvcC1jb2xvcjogdmFyKC0tc3Bpbm5lci1jb2xvci1ibHVlKTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHR3aWR0aDogdmFyKC0tc3Bpbm5lci1zaXplLWxhcmdlKTtcblx0aGVpZ2h0OiB2YXIoLS1zcGlubmVyLXNpemUtbGFyZ2UpO1xuXHRhbmltYXRpb246IHNwaW4gMXMgbGluZWFyIGluZmluaXRlO1xuXHRtYXJnaW46IDAgYXV0bztcbn1cblxuOmhvc3QgLm1lc3NhZ2Uge1xuXHR0ZXh0LWFsaWduOiBjZW50ZXI7XG5cdG1hcmdpbjogdmFyKC0tdHMtdW5pdCk7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udC1zaXplLWRlZmF1bHQpO1xufVxuLyogU2l6ZS4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuXG46aG9zdChbZGF0YS1zaXplPSdsYXJnZSddKSAuc3Bpbm5lciB7XG5cdGJvcmRlci13aWR0aDogdmFyKC0tc3Bpbm5lci1ib3JkZXItbGFyZ2UpO1xuXHR3aWR0aDogdmFyKC0tc3Bpbm5lci1zaXplLWxhcmdlKTtcblx0aGVpZ2h0OiB2YXIoLS1zcGlubmVyLXNpemUtbGFyZ2UpO1xufVxuXG46aG9zdChbZGF0YS1zaXplPSdsYXJnZSddKSAubWVzc2FnZSB7XG5cdG1hcmdpbjogdmFyKC0tdHMtdW5pdCk7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUpO1xufVxuXG46aG9zdChbZGF0YS1zaXplPSdtZWRpdW0nXSkgLnNwaW5uZXIge1xuXHRib3JkZXItd2lkdGg6IHZhcigtLXNwaW5uZXItYm9yZGVyLW1lZGl1bSk7XG5cdHdpZHRoOiB2YXIoLS1zcGlubmVyLXNpemUtbWVkaXVtKTtcblx0aGVpZ2h0OiB2YXIoLS1zcGlubmVyLXNpemUtbWVkaXVtKTtcbn1cblxuOmhvc3QoW2RhdGEtc2l6ZT0nbWVkaXVtJ10pIC5tZXNzYWdlIHtcblx0bWFyZ2luOiB2YXIoLS10cy11bml0LWhhbGYpO1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1pbmkpO1xufVxuXG46aG9zdChbZGF0YS1zaXplPSdzbWFsbCddKSAuc3Bpbm5lciB7XG5cdGJvcmRlci13aWR0aDogdmFyKC0tc3Bpbm5lci1ib3JkZXItc21hbGwpO1xuXHR3aWR0aDogdmFyKC0tc3Bpbm5lci1zaXplLXNtYWxsKTtcblx0aGVpZ2h0OiB2YXIoLS1zcGlubmVyLXNpemUtc21hbGwpO1xufVxuXG46aG9zdChbZGF0YS1zaXplPSdzbWFsbCddKSAubWVzc2FnZSB7XG5cdG1hcmdpbjogdmFyKC0tdHMtdW5pdC1xdWFydGVyKTtcblx0Zm9udC1zaXplOiB2YXIoLS10cy1mb250c2l6ZS1zbWFsbCk7XG59XG5cbi8qIENvbG9yLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uICovXG5cbjpob3N0KFtkYXRhLWNvbG9yPSdibHVlJ10pIC5zcGlubmVyIHtcblx0Ym9yZGVyLXRvcC1jb2xvcjogdmFyKC0tc3Bpbm5lci1jb2xvci1ibHVlKTtcbn1cblxuOmhvc3QoW2RhdGEtY29sb3I9J21vbm8nXSkgLnNwaW5uZXIge1xuXHRib3JkZXItdG9wLWNvbG9yOiB2YXIoLS1zcGlubmVyLWNvbG9yLW1vbm8pO1xufVxuXG46aG9zdChbZGF0YS1jb2xvcj0nd2hpdGUnXSkgLnNwaW5uZXIge1xuXHRib3JkZXItdG9wLWNvbG9yOiB2YXIoLS1zcGlubmVyLWNvbG9yLXdoaXRlKTtcbn1cblxuQGtleWZyYW1lcyBzcGluIHtcblx0MCUge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuXHR9XG5cdDEwMCUge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbn1cbiJdfQ== */";
+
+  var sizes = {
+    LARGE: 'large',
+    MEDIUM: 'medium',
+    SMALL: 'small'
+  };
+  var colors = {
+    BLUE: 'blue',
+    MONO: 'mono',
+    WHITE: 'white'
+  };
+
+  function _templateObject2() {
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div class=\"message\">", "</div>\n\t\t\t"]);
+
+    _templateObject2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject() {
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div class=\"spinner\"></div>\n\t\t\t\t", "\n\t\t\t"]);
+
+    _templateObject = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  elements.customElementDefineHelper('ts-spinner',
+  /*#__PURE__*/
+  function (_TSElement) {
+    _inheritsLoose(_class, _TSElement);
+
+    _createClass(_class, null, [{
+      key: "styles",
+      get: function get() {
+        return [elements.TSElement.styles, elements.unsafeCSS(css)];
+      }
+    }, {
+      key: "properties",
+      get: function get() {
+        return {
+          color: {
+            type: String,
+            attribute: 'data-color',
+            reflect: true
+          },
+          message: {
+            type: String,
+            attribute: 'data-message'
+          },
+          size: {
+            type: String,
+            attribute: 'data-size',
+            reflect: true
+          },
+          visible: {
+            type: Boolean,
+            attribute: 'data-visible'
+          }
+        };
+      }
+    }]);
+
+    function _class() {
+      var _this;
+
+      _this = _TSElement.call(this) || this;
+      _this.color = colors.BLUE;
+      _this.message = '';
+      _this.size = sizes.LARGE;
+      _this.visible = false;
+      return _this;
+    }
+
+    var _proto = _class.prototype;
+
+    _proto.render = function render() {
+      if (!this.visible) {
+        return '';
+      }
+
+      return elements.html(_templateObject(), this.messageHtml);
+    };
+
+    _createClass(_class, [{
+      key: "messageHtml",
+      get: function get() {
+        if (!this.message) {
+          return '';
+        }
+
+        return elements.html(_templateObject2(), this.message);
+      }
+    }]);
+
+    return _class;
+  }(elements.TSElement));
+
+}));
+//# sourceMappingURL=spinner.umd.js.map

package.json

 {
   "name": "@tradeshift/elements.spinner",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "src": "src/spinner.js",
@@ -12,5 +12,5 @@ "main": "lib/spinner.umd.js",
   "dependencies": {
-    "@tradeshift/elements": "^0.6.0"
+    "@tradeshift/elements": "^0.7.0"
   },
-  "gitHead": "a40f2b733b10bbc573ade7d66b39041459213810"
+  "gitHead": "d0ea80e217c6b4da934c0ad9f2e510bf4db76adb"
 }

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29410

increased by30.73%

Lines of code

159

increased by448.28%

Number of low quality alerts

2

decreased by-33.33%

Dependency changes

• + Added@tradeshift/elements@0.7.6(transitive)

• - Removed@tradeshift/elements@0.6.0(transitive)

• Updated@tradeshift/elements@^0.7.0