@tradeshift/elements.spinner
Advanced tools
Comparing version 0.19.3 to 0.20.0
@@ -1,1 +0,1 @@ | ||
import{html as r,customElementDefineHelper as e,TSElement as t,unsafeCSS as i}from"@tradeshift/elements";function n(r,e){for(var t=0;t<e.length;t++){var i=e[t];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(r,i.key,i)}}function o(r,e){return e||(e=r.slice(0)),r.raw=e,r}var s="large",a="blue";function p(){var r=o(['\n\t\t\t<div class="message">',"</div>\n\t\t"]);return p=function(){return r},r}function l(){var r=o(['\n\t\t\t<div class="spinner"></div>\n\t\t\t',"\n\t\t"]);return l=function(){return r},r}function d(){var r=o([""]);return d=function(){return r},r}var m=function(e){var o,m,u,f,h;function g(){var r=e.call(this)||this;return r.color=a,r.size=s,r}return m=e,(o=g).prototype=Object.create(m.prototype),o.prototype.constructor=o,o.__proto__=m,g.prototype.render=function(){return this.visible?r(l(),this.messageHtml):r(d())},u=g,h=[{key:"styles",get:function(){return[t.styles,i(":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",reflect:!0},size:{type:String,attribute:"data-size",reflect:!0},visible:{type:Boolean,attribute:"data-visible",reflect:!0}}}}],(f=[{key:"messageHtml",get:function(){return this.message?r(p(),this.message):""}}])&&n(u.prototype,f),h&&n(u,h),g}(t);e("ts-spinner",m);export{m as TSSpinner}; | ||
import{html as e,customElementDefineHelper as r,TSElement as t,unsafeCSS as i}from"@tradeshift/elements";function n(e,r){for(var t=0;t<r.length;t++){var i=r[t];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function o(e,r){return(o=Object.setPrototypeOf||function(e,r){return e.__proto__=r,e})(e,r)}function s(e,r){return r||(r=e.slice(0)),e.raw=r,e}var a,p,l,d="large",m="blue",f=function(r){var f,h,g,u,b;function c(){var e=r.call(this)||this;return e.color=m,e.size=d,e}return h=r,(f=c).prototype=Object.create(h.prototype),f.prototype.constructor=f,o(f,h),c.prototype.render=function(){return this.visible?e(p||(p=s(['\n\t\t\t<div class="spinner"></div>\n\t\t\t',"\n\t\t"])),this.messageHtml):e(a||(a=s([""])))},g=c,b=[{key:"styles",get:function(){return[t.styles,i(":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",reflect:!0},size:{type:String,attribute:"data-size",reflect:!0},visible:{type:Boolean,attribute:"data-visible",reflect:!0}}}}],(u=[{key:"messageHtml",get:function(){return this.message?e(l||(l=s(['\n\t\t\t<div class="message">',"</div>\n\t\t"])),this.message):""}}])&&n(g.prototype,u),b&&n(g,b),c}(t);r("ts-spinner",f);export{f as TSSpinner}; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["exports","@tradeshift/elements"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).ts=e.ts||{},e.ts.elements=e.ts.elements||{},e.ts.elements.spinner=e.ts.elements.spinner||{}),e.ts.elements)}(this,(function(e,t){"use strict";function r(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function n(e,t){return t||(t=e.slice(0)),e.raw=t,e}var i="large",s="blue";function o(){var e=n(['\n\t\t\t<div class="message">',"</div>\n\t\t"]);return o=function(){return e},e}function a(){var e=n(['\n\t\t\t<div class="spinner"></div>\n\t\t\t',"\n\t\t"]);return a=function(){return e},e}function l(){var e=n([""]);return l=function(){return e},e}var p=function(e){var n,p,d,f,m;function u(){var t=e.call(this)||this;return t.color=s,t.size=i,t}return p=e,(n=u).prototype=Object.create(p.prototype),n.prototype.constructor=n,n.__proto__=p,u.prototype.render=function(){return this.visible?t.html(a(),this.messageHtml):t.html(l())},d=u,m=[{key:"styles",get:function(){return[t.TSElement.styles,t.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",reflect:!0},size:{type:String,attribute:"data-size",reflect:!0},visible:{type:Boolean,attribute:"data-visible",reflect:!0}}}}],(f=[{key:"messageHtml",get:function(){return this.message?t.html(o(),this.message):""}}])&&r(d.prototype,f),m&&r(d,m),u}(t.TSElement);t.customElementDefineHelper("ts-spinner",p),e.TSSpinner=p,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["exports","@tradeshift/elements"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).ts=e.ts||{},e.ts.elements=e.ts.elements||{},e.ts.elements.spinner=e.ts.elements.spinner||{}),e.ts.elements)}(this,(function(e,t){"use strict";function r(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function n(e,t){return(n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function i(e,t){return t||(t=e.slice(0)),e.raw=t,e}var s,o,a,l="large",p="blue",d=function(e){var d,m,f,u,h;function g(){var t=e.call(this)||this;return t.color=p,t.size=l,t}return m=e,(d=g).prototype=Object.create(m.prototype),d.prototype.constructor=d,n(d,m),g.prototype.render=function(){return this.visible?t.html(o||(o=i(['\n\t\t\t<div class="spinner"></div>\n\t\t\t',"\n\t\t"])),this.messageHtml):t.html(s||(s=i([""])))},f=g,h=[{key:"styles",get:function(){return[t.TSElement.styles,t.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",reflect:!0},size:{type:String,attribute:"data-size",reflect:!0},visible:{type:Boolean,attribute:"data-visible",reflect:!0}}}}],(u=[{key:"messageHtml",get:function(){return this.message?t.html(a||(a=i(['\n\t\t\t<div class="message">',"</div>\n\t\t"])),this.message):""}}])&&r(f.prototype,u),h&&r(f,h),g}(t.TSElement);t.customElementDefineHelper("ts-spinner",d),e.TSSpinner=d,Object.defineProperty(e,"__esModule",{value:!0})})); |
{ | ||
"name": "@tradeshift/elements.spinner", | ||
"version": "0.19.3", | ||
"version": "0.20.0", | ||
"repository": { | ||
@@ -18,6 +18,6 @@ "type": "git", | ||
"dependencies": { | ||
"@tradeshift/elements": "^0.19.3" | ||
"@tradeshift/elements": "^0.20.0" | ||
}, | ||
"src": "src/spinner.js", | ||
"gitHead": "de21b6b94b9c536f1030fe9905cd4f81288eebb3" | ||
"gitHead": "2c7e9c7c5b436cb1103cfdc15f48834a74f43f36" | ||
} |
@@ -30,3 +30,3 @@ <h1 align="center"> | ||
table { | ||
width:100%; | ||
width:100%; | ||
} | ||
@@ -37,8 +37,8 @@ </style> | ||
| Property | Attribute | Type | Default | Description | | ||
| -------- | ------------ | ------- | ------- | ----------------------------------------------- | | ||
| visible | data-visible | boolean | false | Show/hide the spinner | | ||
| message | data-message | string | - | Text to show below the spinner | | ||
| size | data-size | string | large | Size of the spinner, `large`, `medium`, `small` | | ||
| color | data-color | string | blue | Spinner color, `blue`, `mono`, `white` | | ||
| Property | Attribute | Type | Default | Description | | ||
| -------- | ------------ | ------- | ----------- | ----------------------------------------------- | | ||
| color | data-color | String | colors.BLUE | Spinner color, `blue`, `mono`, `white` | | ||
| message | data-message | String | | Text to show below the spinner | | ||
| size | data-size | String | sizes.LARGE | Size of the spinner, `large`, `medium`, `small` | | ||
| visible | data-visible | Boolean | false | Show/hide the spinner | | ||
@@ -45,0 +45,0 @@ ## ➤ How to use it |
23789
9
45
+ Added@tradeshift/elements@0.20.1(transitive)
- Removed@tradeshift/elements@0.19.3(transitive)
Updated@tradeshift/elements@^0.20.0