@tradeshift/elements.spinner
Advanced tools
Comparing version 0.5.0 to 0.5.2
@@ -1,230 +0,1 @@ | ||
(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; | ||
} | ||
(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)); | ||
})(undefined, function (elements) { | ||
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.cover {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tpointer-events: none;\n\toverflow: hidden;\n\tvisibility: hidden;\n\tbackground-color: rgb(15, 21, 26);\n\tbackground-color: var(--ts-color-black);\n\tz-index: 10000;\n\tz-index: var(--ts-zindex-max);\n}\n\n.ts-fadeIn {\n\tvisibility: visible;\n\topacity: 0.8;\n\ttransition: visibility 0.1s linear 0.1s, opacity 0.2s;\n\ttransition: visibility var(--ts-transition-now) linear var(--ts-transition-now), opacity var(--ts-transition-fast);\n}\n\n.ts-fadeOut {\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: visibility 0.1s linear 0.2s, opacity 0.2s;\n\ttransition: visibility var(--ts-transition-now) linear var(--ts-transition-fast), opacity var(--ts-transition-fast);\n}\n\n:host(.ts-aside-cover) > div {\n\t\tpointer-events: auto;\n\t\tz-index: 1999;\n\t\tz-index: var(--ts-zindex-aside-cover);\n\t}\n\n:host(.ts-dialog-cover) > div {\n\t\tpointer-events: auto;\n\t\tz-index: 2999;\n\t\tz-index: var(--ts-zindex-dialog-cover);\n\t}\n\n:host(.ts-spin-cover) > div {\n\t\tpointer-events: auto;\n\t\tz-index: 3999;\n\t\tz-index: var(--ts-zindex-spin-cover);\n\t}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvdmVyLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxvRUFBb0U7O0FBRXBFO0NBQ0Msa0JBQWtCO0NBQ2xCLE1BQU07Q0FDTixRQUFRO0NBQ1IsU0FBUztDQUNULE9BQU87Q0FDUCxvQkFBb0I7Q0FDcEIsZ0JBQWdCO0NBQ2hCLGtCQUFrQjtDQUNsQixpQ0FBdUM7Q0FBdkMsdUNBQXVDO0NBQ3ZDLGNBQTZCO0NBQTdCLDZCQUE2QjtBQUM5Qjs7QUFFQTtDQUNDLG1CQUFtQjtDQUNuQixZQUFZO0NBQ1oscURBQWtIO0NBQWxILGtIQUFrSDtBQUNuSDs7QUFFQTtDQUNDLGtCQUFrQjtDQUNsQixVQUFVO0NBQ1YscURBQW1IO0NBQW5ILG1IQUFtSDtBQUNwSDs7QUFHQztFQUNDLG9CQUFvQjtFQUNwQixhQUFxQztFQUFyQyxxQ0FBcUM7Q0FDdEM7O0FBSUE7RUFDQyxvQkFBb0I7RUFDcEIsYUFBc0M7RUFBdEMsc0NBQXNDO0NBQ3ZDOztBQUlBO0VBQ0Msb0JBQW9CO0VBQ3BCLGFBQW9DO0VBQXBDLG9DQUFvQztDQUNyQyIsImZpbGUiOiJjb3Zlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuLmNvdmVyIHtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cdHJpZ2h0OiAwO1xuXHRib3R0b206IDA7XG5cdGxlZnQ6IDA7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR2aXNpYmlsaXR5OiBoaWRkZW47XG5cdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsYWNrKTtcblx0ei1pbmRleDogdmFyKC0tdHMtemluZGV4LW1heCk7XG59XG5cbi50cy1mYWRlSW4ge1xuXHR2aXNpYmlsaXR5OiB2aXNpYmxlO1xuXHRvcGFjaXR5OiAwLjg7XG5cdHRyYW5zaXRpb246IHZpc2liaWxpdHkgdmFyKC0tdHMtdHJhbnNpdGlvbi1ub3cpIGxpbmVhciB2YXIoLS10cy10cmFuc2l0aW9uLW5vdyksIG9wYWNpdHkgdmFyKC0tdHMtdHJhbnNpdGlvbi1mYXN0KTtcbn1cblxuLnRzLWZhZGVPdXQge1xuXHR2aXNpYmlsaXR5OiBoaWRkZW47XG5cdG9wYWNpdHk6IDA7XG5cdHRyYW5zaXRpb246IHZpc2liaWxpdHkgdmFyKC0tdHMtdHJhbnNpdGlvbi1ub3cpIGxpbmVhciB2YXIoLS10cy10cmFuc2l0aW9uLWZhc3QpLCBvcGFjaXR5IHZhcigtLXRzLXRyYW5zaXRpb24tZmFzdCk7XG59XG5cbjpob3N0KC50cy1hc2lkZS1jb3Zlcikge1xuXHQmID4gZGl2IHtcblx0XHRwb2ludGVyLWV2ZW50czogYXV0bztcblx0XHR6LWluZGV4OiB2YXIoLS10cy16aW5kZXgtYXNpZGUtY292ZXIpO1xuXHR9XG59XG5cbjpob3N0KC50cy1kaWFsb2ctY292ZXIpIHtcblx0JiA+IGRpdiB7XG5cdFx0cG9pbnRlci1ldmVudHM6IGF1dG87XG5cdFx0ei1pbmRleDogdmFyKC0tdHMtemluZGV4LWRpYWxvZy1jb3Zlcik7XG5cdH1cbn1cblxuOmhvc3QoLnRzLXNwaW4tY292ZXIpIHtcblx0JiA+IGRpdiB7XG5cdFx0cG9pbnRlci1ldmVudHM6IGF1dG87XG5cdFx0ei1pbmRleDogdmFyKC0tdHMtemluZGV4LXNwaW4tY292ZXIpO1xuXHR9XG59XG4iXX0= */"; | ||
function _templateObject() { | ||
var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<div class=\"cover ", "\"></div>\n\t\t\t"]); | ||
_templateObject = function _templateObject() { | ||
return data; | ||
}; | ||
return data; | ||
} | ||
elements.customElementDefineHelper('ts-cover', | ||
/*#__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 { | ||
visible: { | ||
type: Boolean, | ||
attribute: 'data-visible', | ||
reflect: true | ||
} | ||
}; | ||
} | ||
}]); | ||
function _class() { | ||
var _this; | ||
_this = _TSElement.call(this) || this; | ||
_this.visible = false; | ||
return _this; | ||
} | ||
var _proto = _class.prototype; | ||
_proto.render = function render() { | ||
return elements.html(_templateObject(), this.visible ? 'ts-fadeIn' : 'ts-fadeOut'); | ||
}; | ||
return _class; | ||
}(elements.TSElement)); | ||
}); | ||
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: 8px solid rgb(0, 174, 255);\n\tborder-top: var(--spinner-border-large) solid 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\tborder-top-width: 8px;\n\tborder-top-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\tborder-top-width: 4px;\n\tborder-top-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\tborder-top-width: 3px;\n\tborder-top-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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNwaW5uZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9FQUFvRTs7QUFFcEU7Q0FDQyxhQUE4QjtDQUE5Qiw4QkFBOEI7QUFDL0I7O0FBRUE7Q0FDQywwQ0FBcUU7Q0FBckUscUVBQXFFO0NBQ3JFLHNDQUF1RTtDQUF2RSx1RUFBdUU7Q0FDdkUsa0JBQWtCO0NBQ2xCLFdBQWdDO0NBQWhDLGdDQUFnQztDQUNoQyxZQUFpQztDQUFqQyxpQ0FBaUM7Q0FDakMsMENBQWtDO1NBQWxDLGtDQUFrQztDQUNsQyxjQUFjO0FBQ2Y7O0FBRUE7Q0FDQyxrQkFBa0I7Q0FDbEIsWUFBc0I7Q0FBdEIsc0JBQXNCO0NBQ3RCLGVBQXNDO0NBQXRDLHNDQUFzQztBQUN2QztBQUNBLHFFQUFxRTs7QUFFckU7Q0FDQyxpQkFBeUM7Q0FBekMseUNBQXlDO0NBQ3pDLHFCQUE2QztDQUE3Qyw2Q0FBNkM7Q0FDN0MsV0FBZ0M7Q0FBaEMsZ0NBQWdDO0NBQ2hDLFlBQWlDO0NBQWpDLGlDQUFpQztBQUNsQzs7QUFFQTtDQUNDLFlBQXNCO0NBQXRCLHNCQUFzQjtDQUN0QixlQUE2QjtDQUE3Qiw2QkFBNkI7QUFDOUI7O0FBRUE7Q0FDQyxpQkFBMEM7Q0FBMUMsMENBQTBDO0NBQzFDLHFCQUE4QztDQUE5Qyw4Q0FBOEM7Q0FDOUMscUJBQWlDO0NBQWpDLGlDQUFpQztDQUNqQyxzQkFBa0M7Q0FBbEMsa0NBQWtDO0FBQ25DOztBQUVBO0NBQ0Msd0JBQTJCO0NBQTNCLDJCQUEyQjtDQUMzQixlQUFrQztDQUFsQyxrQ0FBa0M7QUFDbkM7O0FBRUE7Q0FDQyxpQkFBeUM7Q0FBekMseUNBQXlDO0NBQ3pDLHFCQUE2QztDQUE3Qyw2Q0FBNkM7Q0FDN0MsV0FBZ0M7Q0FBaEMsZ0NBQWdDO0NBQ2hDLFlBQWlDO0NBQWpDLGlDQUFpQztBQUNsQzs7QUFFQTtDQUNDLHlCQUE4QjtDQUE5Qiw4QkFBOEI7Q0FDOUIsZUFBbUM7Q0FBbkMsbUNBQW1DO0FBQ3BDOztBQUVBLHNFQUFzRTs7QUFFdEU7Q0FDQyxrQ0FBMkM7Q0FBM0MsMkNBQTJDO0FBQzVDOztBQUVBO0NBQ0MsbUNBQTJDO0NBQTNDLDJDQUEyQztBQUM1Qzs7QUFFQTtDQUNDLG9DQUE0QztDQUE1Qyw0Q0FBNEM7QUFDN0M7O0FBRUE7Q0FDQztFQUNDLCtCQUF1QjtVQUF2Qix1QkFBdUI7Q0FDeEI7Q0FDQTtFQUNDLGlDQUF5QjtVQUF6Qix5QkFBeUI7Q0FDMUI7QUFDRDs7QUFQQTtDQUNDO0VBQ0MsK0JBQXVCO1VBQXZCLHVCQUF1QjtDQUN4QjtDQUNBO0VBQ0MsaUNBQXlCO1VBQXpCLHlCQUF5QjtDQUMxQjtBQUNEIiwiZmlsZSI6InNwaW5uZXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogR2VuZXJhbC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uICovXG5cbjpob3N0IHtcblx0ei1pbmRleDogdmFyKC0tdHMtemluZGV4LXNwaW4pO1xufVxuXG46aG9zdCAuc3Bpbm5lciB7XG5cdGJvcmRlcjogdmFyKC0tc3Bpbm5lci1ib3JkZXItbGFyZ2UpIHNvbGlkIHZhcigtLXNwaW5uZXItYm9yZGVyLWNvbG9yKTtcblx0Ym9yZGVyLXRvcDogdmFyKC0tc3Bpbm5lci1ib3JkZXItbGFyZ2UpIHNvbGlkIHZhcigtLXNwaW5uZXItY29sb3ItYmx1ZSk7XG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0d2lkdGg6IHZhcigtLXNwaW5uZXItc2l6ZS1sYXJnZSk7XG5cdGhlaWdodDogdmFyKC0tc3Bpbm5lci1zaXplLWxhcmdlKTtcblx0YW5pbWF0aW9uOiBzcGluIDFzIGxpbmVhciBpbmZpbml0ZTtcblx0bWFyZ2luOiAwIGF1dG87XG59XG5cbjpob3N0IC5tZXNzYWdlIHtcblx0dGV4dC1hbGlnbjogY2VudGVyO1xuXHRtYXJnaW46IHZhcigtLXRzLXVuaXQpO1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnQtc2l6ZS1kZWZhdWx0KTtcbn1cbi8qIFNpemUuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3QoW2RhdGEtc2l6ZT0nbGFyZ2UnXSkgLnNwaW5uZXIge1xuXHRib3JkZXItd2lkdGg6IHZhcigtLXNwaW5uZXItYm9yZGVyLWxhcmdlKTtcblx0Ym9yZGVyLXRvcC13aWR0aDogdmFyKC0tc3Bpbm5lci1ib3JkZXItbGFyZ2UpO1xuXHR3aWR0aDogdmFyKC0tc3Bpbm5lci1zaXplLWxhcmdlKTtcblx0aGVpZ2h0OiB2YXIoLS1zcGlubmVyLXNpemUtbGFyZ2UpO1xufVxuXG46aG9zdChbZGF0YS1zaXplPSdsYXJnZSddKSAubWVzc2FnZSB7XG5cdG1hcmdpbjogdmFyKC0tdHMtdW5pdCk7XG5cdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUpO1xufVxuXG46aG9zdChbZGF0YS1zaXplPSdtZWRpdW0nXSkgLnNwaW5uZXIge1xuXHRib3JkZXItd2lkdGg6IHZhcigtLXNwaW5uZXItYm9yZGVyLW1lZGl1bSk7XG5cdGJvcmRlci10b3Atd2lkdGg6IHZhcigtLXNwaW5uZXItYm9yZGVyLW1lZGl1bSk7XG5cdHdpZHRoOiB2YXIoLS1zcGlubmVyLXNpemUtbWVkaXVtKTtcblx0aGVpZ2h0OiB2YXIoLS1zcGlubmVyLXNpemUtbWVkaXVtKTtcbn1cblxuOmhvc3QoW2RhdGEtc2l6ZT0nbWVkaXVtJ10pIC5tZXNzYWdlIHtcblx0bWFyZ2luOiB2YXIoLS10cy11bml0LWhhbGYpO1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLW1pbmkpO1xufVxuXG46aG9zdChbZGF0YS1zaXplPSdzbWFsbCddKSAuc3Bpbm5lciB7XG5cdGJvcmRlci13aWR0aDogdmFyKC0tc3Bpbm5lci1ib3JkZXItc21hbGwpO1xuXHRib3JkZXItdG9wLXdpZHRoOiB2YXIoLS1zcGlubmVyLWJvcmRlci1zbWFsbCk7XG5cdHdpZHRoOiB2YXIoLS1zcGlubmVyLXNpemUtc21hbGwpO1xuXHRoZWlnaHQ6IHZhcigtLXNwaW5uZXItc2l6ZS1zbWFsbCk7XG59XG5cbjpob3N0KFtkYXRhLXNpemU9J3NtYWxsJ10pIC5tZXNzYWdlIHtcblx0bWFyZ2luOiB2YXIoLS10cy11bml0LXF1YXJ0ZXIpO1xuXHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLXNtYWxsKTtcbn1cblxuLyogQ29sb3IuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3QoW2RhdGEtY29sb3I9J2JsdWUnXSkgLnNwaW5uZXIge1xuXHRib3JkZXItdG9wLWNvbG9yOiB2YXIoLS1zcGlubmVyLWNvbG9yLWJsdWUpO1xufVxuXG46aG9zdChbZGF0YS1jb2xvcj0nbW9ubyddKSAuc3Bpbm5lciB7XG5cdGJvcmRlci10b3AtY29sb3I6IHZhcigtLXNwaW5uZXItY29sb3ItbW9ubyk7XG59XG5cbjpob3N0KFtkYXRhLWNvbG9yPSd3aGl0ZSddKSAuc3Bpbm5lciB7XG5cdGJvcmRlci10b3AtY29sb3I6IHZhcigtLXNwaW5uZXItY29sb3Itd2hpdGUpO1xufVxuXG5Aa2V5ZnJhbWVzIHNwaW4ge1xuXHQwJSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0MTAwJSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxufVxuIl19 */"; | ||
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 | ||
!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))}); |
{ | ||
"name": "@tradeshift/elements.spinner", | ||
"version": "0.5.0", | ||
"version": "0.5.2", | ||
"src": "src/spinner.js", | ||
"main": "lib/spinner.umd.js", | ||
"browser": "lib/spinner.umd.js", | ||
"module": "lib/spinner.esm.js", | ||
"files": [ | ||
@@ -11,5 +12,5 @@ "lib/*" | ||
"dependencies": { | ||
"@tradeshift/elements": "^0.5.0" | ||
"@tradeshift/elements": "^0.5.2" | ||
}, | ||
"gitHead": "f44043114952b9e1acea6811caff85d6c6970dc8" | ||
"gitHead": "f9ad23777c014a17b135524dcd23652745337064" | ||
} |
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage 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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Minified code
QualityThis 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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
6
27259
29
3
2
Updated@tradeshift/elements@^0.5.2