New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@tradeshift/elements.progress-bar

Package Overview
Dependencies
Maintainers
6
Versions
100
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tradeshift/elements.progress-bar - npm Package Compare versions

Comparing version 0.4.5 to 0.5.0

109

lib/progress-bar.umd.js

@@ -1,1 +0,108 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["@tradeshift/elements"],e):e((t=t||self).ts.elements)}(this,function(t){"use strict";function e(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function r(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}function i(){var t,e,r=(t=['\n\t\t\t\t<div class="progress-bar-wrapper" ?data-indeterminate="','">\n\t\t\t\t\t<div class="progress-bar-total">\n\t\t\t\t\t\t<div style="','" class="progress-bar-done"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t'],e||(e=t.slice(0)),t.raw=e,t);return i=function(){return r},r}t.customElementDefineHelper("ts-progress-bar",function(e){var n,o;function a(){var t=e.call(this)||this;return t.total=100,t.done=0,t.indeterminate=!1,t}return o=e,(n=a).prototype=Object.create(o.prototype),n.prototype.constructor=n,n.__proto__=o,r(a,null,[{key:"styles",get:function(){return[t.TSElement.styles,t.unsafeCSS(":host{width:100%}.progress-bar-wrapper{height:8px;height:var(--ts-progress-bar-height);border-radius:100em;overflow:hidden}.progress-bar-total{position:relative;height:100%;width:100%;background-color:#ade5ff;background-color:var(--ts-color-blue-lighter)}.progress-bar-done{position:absolute;border-radius:100em;left:0;top:0;height:100%;background-color:#00aeff;background-color:var(--ts-color-blue)}.progress-bar-wrapper[data-indeterminate] .progress-bar-done{-webkit-animation:infinite-progress 1s linear infinite;animation:infinite-progress 1s linear infinite}@-webkit-keyframes infinite-progress{0%{width:0;margin-left:0;margin-right:100%}20%{width:30%;margin-left:0;margin-right:0}40%{width:30%;margin-left:30%;margin-right:0}60%{width:40%;margin-left:50%;margin-right:0}80%{width:40%;margin-left:70%;margin-right:0}to{width:0;margin-left:100%;margin-right:0}}@keyframes infinite-progress{0%{width:0;margin-left:0;margin-right:100%}20%{width:30%;margin-left:0;margin-right:0}40%{width:30%;margin-left:30%;margin-right:0}60%{width:40%;margin-left:50%;margin-right:0}80%{width:40%;margin-left:70%;margin-right:0}to{width:0;margin-left:100%;margin-right:0}}")]}},{key:"properties",get:function(){return{total:{type:Number,reflect:!0},done:{type:Number,reflect:!0},indeterminate:{type:Boolean,reflect:!0}}}}]),a.prototype.render=function(){return t.html(i(),this.indeterminate,this.doneWidthStyle)},r(a,[{key:"doneWidthStyle",get:function(){if(!this.indeterminate)return"width: "+this.done/this.total*100+"%"}}]),a}(t.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:host {\n\twidth: 100%;\n}\n\n.progress-bar-wrapper {\n\theight: 8px;\n\theight: var(--ts-progress-bar-height);\n\tborder-radius: 100em;\n\toverflow: hidden;\n}\n\n.progress-bar-total {\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: rgb(173, 229, 255);\n\tbackground-color: var(--ts-color-blue-lighter);\n}\n\n.progress-bar-done {\n\tposition: absolute;\n\tborder-radius: 100em;\n\tleft: 0;\n\ttop: 0;\n\theight: 100%;\n\tbackground-color: rgb(0, 174, 255);\n\tbackground-color: var(--ts-color-blue);\n}\n\n.progress-bar-wrapper[data-indeterminate] .progress-bar-done {\n\t-webkit-animation: infinite-progress 1s linear infinite;\n\t animation: infinite-progress 1s linear infinite;\n}\n\n@-webkit-keyframes infinite-progress {\n\t0% {\n\t\twidth: 0;\n\t\tmargin-left: 0;\n\t\tmargin-right: 100%;\n\t}\n\t20% {\n\t\twidth: 30%;\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t40% {\n\t\twidth: 30%;\n\t\tmargin-left: 30%;\n\t\tmargin-right: 0;\n\t}\n\t60% {\n\t\twidth: 40%;\n\t\tmargin-left: 50%;\n\t\tmargin-right: 0;\n\t}\n\t80% {\n\t\twidth: 40%;\n\t\tmargin-left: 70%;\n\t\tmargin-right: 0;\n\t}\n\t100% {\n\t\twidth: 0;\n\t\tmargin-left: 100%;\n\t\tmargin-right: 0;\n\t}\n}\n\n@keyframes infinite-progress {\n\t0% {\n\t\twidth: 0;\n\t\tmargin-left: 0;\n\t\tmargin-right: 100%;\n\t}\n\t20% {\n\t\twidth: 30%;\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\t40% {\n\t\twidth: 30%;\n\t\tmargin-left: 30%;\n\t\tmargin-right: 0;\n\t}\n\t60% {\n\t\twidth: 40%;\n\t\tmargin-left: 50%;\n\t\tmargin-right: 0;\n\t}\n\t80% {\n\t\twidth: 40%;\n\t\tmargin-left: 70%;\n\t\tmargin-right: 0;\n\t}\n\t100% {\n\t\twidth: 0;\n\t\tmargin-left: 100%;\n\t\tmargin-right: 0;\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0VBQW9FO0FBQ3BFO0NBQ0MsV0FBVztBQUNaOztBQUVBO0NBQ0MsV0FBcUM7Q0FBckMscUNBQXFDO0NBQ3JDLG9CQUFvQjtDQUNwQixnQkFBZ0I7QUFDakI7O0FBRUE7Q0FDQyxrQkFBa0I7Q0FDbEIsWUFBWTtDQUNaLFdBQVc7Q0FDWCxvQ0FBOEM7Q0FBOUMsOENBQThDO0FBQy9DOztBQUVBO0NBQ0Msa0JBQWtCO0NBQ2xCLG9CQUFvQjtDQUNwQixPQUFPO0NBQ1AsTUFBTTtDQUNOLFlBQVk7Q0FDWixrQ0FBc0M7Q0FBdEMsc0NBQXNDO0FBQ3ZDOztBQUVBO0NBQ0MsdURBQStDO1NBQS9DLCtDQUErQztBQUNoRDs7QUFFQTtDQUNDO0VBQ0MsUUFBUTtFQUNSLGNBQWM7RUFDZCxrQkFBa0I7Q0FDbkI7Q0FDQTtFQUNDLFVBQVU7RUFDVixjQUFjO0VBQ2QsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixlQUFlO0NBQ2hCO0NBQ0E7RUFDQyxVQUFVO0VBQ1YsZ0JBQWdCO0VBQ2hCLGVBQWU7Q0FDaEI7Q0FDQTtFQUNDLFVBQVU7RUFDVixnQkFBZ0I7RUFDaEIsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsUUFBUTtFQUNSLGlCQUFpQjtFQUNqQixlQUFlO0NBQ2hCO0FBQ0Q7O0FBL0JBO0NBQ0M7RUFDQyxRQUFRO0VBQ1IsY0FBYztFQUNkLGtCQUFrQjtDQUNuQjtDQUNBO0VBQ0MsVUFBVTtFQUNWLGNBQWM7RUFDZCxlQUFlO0NBQ2hCO0NBQ0E7RUFDQyxVQUFVO0VBQ1YsZ0JBQWdCO0VBQ2hCLGVBQWU7Q0FDaEI7Q0FDQTtFQUNDLFVBQVU7RUFDVixnQkFBZ0I7RUFDaEIsZUFBZTtDQUNoQjtDQUNBO0VBQ0MsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixlQUFlO0NBQ2hCO0NBQ0E7RUFDQyxRQUFRO0VBQ1IsaUJBQWlCO0VBQ2pCLGVBQWU7Q0FDaEI7QUFDRCIsImZpbGUiOiJwcm9ncmVzcy1iYXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogR2VuZXJhbC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uICovXG46aG9zdCB7XG5cdHdpZHRoOiAxMDAlO1xufVxuXG4ucHJvZ3Jlc3MtYmFyLXdyYXBwZXIge1xuXHRoZWlnaHQ6IHZhcigtLXRzLXByb2dyZXNzLWJhci1oZWlnaHQpO1xuXHRib3JkZXItcmFkaXVzOiAxMDBlbTtcblx0b3ZlcmZsb3c6IGhpZGRlbjtcbn1cblxuLnByb2dyZXNzLWJhci10b3RhbCB7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0aGVpZ2h0OiAxMDAlO1xuXHR3aWR0aDogMTAwJTtcblx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZS1saWdodGVyKTtcbn1cblxuLnByb2dyZXNzLWJhci1kb25lIHtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRib3JkZXItcmFkaXVzOiAxMDBlbTtcblx0bGVmdDogMDtcblx0dG9wOiAwO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xufVxuXG4ucHJvZ3Jlc3MtYmFyLXdyYXBwZXJbZGF0YS1pbmRldGVybWluYXRlXSAucHJvZ3Jlc3MtYmFyLWRvbmUge1xuXHRhbmltYXRpb246IGluZmluaXRlLXByb2dyZXNzIDFzIGxpbmVhciBpbmZpbml0ZTtcbn1cblxuQGtleWZyYW1lcyBpbmZpbml0ZS1wcm9ncmVzcyB7XG5cdDAlIHtcblx0XHR3aWR0aDogMDtcblx0XHRtYXJnaW4tbGVmdDogMDtcblx0XHRtYXJnaW4tcmlnaHQ6IDEwMCU7XG5cdH1cblx0MjAlIHtcblx0XHR3aWR0aDogMzAlO1xuXHRcdG1hcmdpbi1sZWZ0OiAwO1xuXHRcdG1hcmdpbi1yaWdodDogMDtcblx0fVxuXHQ0MCUge1xuXHRcdHdpZHRoOiAzMCU7XG5cdFx0bWFyZ2luLWxlZnQ6IDMwJTtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cblx0NjAlIHtcblx0XHR3aWR0aDogNDAlO1xuXHRcdG1hcmdpbi1sZWZ0OiA1MCU7XG5cdFx0bWFyZ2luLXJpZ2h0OiAwO1xuXHR9XG5cdDgwJSB7XG5cdFx0d2lkdGg6IDQwJTtcblx0XHRtYXJnaW4tbGVmdDogNzAlO1xuXHRcdG1hcmdpbi1yaWdodDogMDtcblx0fVxuXHQxMDAlIHtcblx0XHR3aWR0aDogMDtcblx0XHRtYXJnaW4tbGVmdDogMTAwJTtcblx0XHRtYXJnaW4tcmlnaHQ6IDA7XG5cdH1cbn1cbiJdfQ== */";
function _templateObject() {
var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div class=\"progress-bar-wrapper\" ?data-indeterminate=\"", "\">\n\t\t\t\t\t<div class=\"progress-bar-total\">\n\t\t\t\t\t\t<div style=\"", "\" class=\"progress-bar-done\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
elements.customElementDefineHelper('ts-progress-bar',
/*#__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 {
total: {
type: Number,
reflect: true
},
done: {
type: Number,
reflect: true
},
indeterminate: {
type: Boolean,
reflect: true
}
};
}
}]);
function _class() {
var _this;
_this = _TSElement.call(this) || this;
_this.total = 100;
_this.done = 0;
_this.indeterminate = false;
return _this;
}
var _proto = _class.prototype;
_proto.render = function render() {
return elements.html(_templateObject(), this.indeterminate, this.doneWidthStyle);
};
_createClass(_class, [{
key: "doneWidthStyle",
get: function get() {
if (!this.indeterminate) {
return "width: " + this.done / this.total * 100 + "%";
}
}
}]);
return _class;
}(elements.TSElement));
}));
//# sourceMappingURL=progress-bar.umd.js.map

6

package.json
{
"name": "@tradeshift/elements.progress-bar",
"version": "0.4.5",
"version": "0.5.0",
"src": "src/progress-bar.js",

@@ -11,5 +11,5 @@ "main": "lib/progress-bar.umd.js",

"dependencies": {
"@tradeshift/elements": "^0.4.5"
"@tradeshift/elements": "^0.5.0"
},
"gitHead": "e32fb61b92d3b871d6b609046b94e616e317aa30"
"gitHead": "f44043114952b9e1acea6811caff85d6c6970dc8"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc