Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nrk/core-progress

Package Overview
Dependencies
Maintainers
130
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nrk/core-progress - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

.DS_Store

6

core-progress.cjs.js

@@ -255,9 +255,9 @@ 'use strict';

value: function attributeChangedCallback(name, prev, next) {
var changeType = this.parentElement && name === 'type' && prev !== next;
var changeType = this.parentElement && name === 'type' && next === 'radial' === !this.querySelector('svg');
var percentage = this.indeterminate ? 100 : this.percentage;
this.setAttribute('aria-label', this.indeterminate || "".concat(this.percentage, "%"));
this.setAttribute('aria-label', this.indeterminate || "".concat(percentage, "%"));
this.toggleAttribute('indeterminate', this.indeterminate);
if (this.type === 'linear') this.style.width = "".concat(percentage, "%");
if (this.type === 'radial') this.style.strokeDashoffset = Math.round((100 - percentage) * Math.PI);
if (changeType) this.innerHTML = next !== 'radial' ? '' : '<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>';
if (changeType) this.innerHTML = next === 'radial' ? '<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>' : '';
if (name === 'value' && Number(next) !== Number(prev)) dispatchEvent(this, 'change'); // Only trigger event on actual change

@@ -264,0 +264,0 @@ }

@@ -13,6 +13,6 @@ import { addStyle, dispatchEvent } from '../utils'

attributeChangedCallback (name, prev, next) {
const changeType = this.parentElement && name === 'type' && prev !== next
const changeType = this.parentElement && name === 'type' && (next === 'radial') === !this.querySelector('svg')
const percentage = this.indeterminate ? 100 : this.percentage
this.setAttribute('aria-label', this.indeterminate || `${this.percentage}%`)
this.setAttribute('aria-label', this.indeterminate || `${percentage}%`)
this.toggleAttribute('indeterminate', this.indeterminate)

@@ -22,3 +22,3 @@

if (this.type === 'radial') this.style.strokeDashoffset = Math.round((100 - percentage) * Math.PI)
if (changeType) this.innerHTML = next !== 'radial' ? '' : '<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>'
if (changeType) this.innerHTML = next === 'radial' ? '<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>' : ''
if (name === 'value' && Number(next) !== Number(prev)) dispatchEvent(this, 'change') // Only trigger event on actual change

@@ -25,0 +25,0 @@ }

@@ -261,9 +261,9 @@ (function (global, factory) {

value: function attributeChangedCallback(name, prev, next) {
var changeType = this.parentElement && name === 'type' && prev !== next;
var changeType = this.parentElement && name === 'type' && next === 'radial' === !this.querySelector('svg');
var percentage = this.indeterminate ? 100 : this.percentage;
this.setAttribute('aria-label', this.indeterminate || "".concat(this.percentage, "%"));
this.setAttribute('aria-label', this.indeterminate || "".concat(percentage, "%"));
this.toggleAttribute('indeterminate', this.indeterminate);
if (this.type === 'linear') this.style.width = "".concat(percentage, "%");
if (this.type === 'radial') this.style.strokeDashoffset = Math.round((100 - percentage) * Math.PI);
if (changeType) this.innerHTML = next !== 'radial' ? '' : '<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>';
if (changeType) this.innerHTML = next === 'radial' ? '<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>' : '';
if (name === 'value' && Number(next) !== Number(prev)) dispatchEvent(this, 'change'); // Only trigger event on actual change

@@ -315,3 +315,3 @@ }

var version = "2.0.5";
var version = "2.0.6";

@@ -318,0 +318,0 @@ /**

@@ -1,3 +0,3 @@

/*! @nrk/core-progress v2.0.5 - Copyright (c) 2017-2019 NRK */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreProgress=e()}(this,function(){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function a(t){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function i(t,e,n){return(i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var r=[null];r.push.apply(r,e);var i=new(Function.bind.apply(t,r));return n&&c(i,n.prototype),i}).apply(null,arguments)}function s(t){var r="function"==typeof Map?new Map:void 0;return(s=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==r){if(r.has(t))return r.get(t);r.set(t,n)}function n(){return i(t,arguments,a(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window;t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t&&!window.Element.prototype.toggleAttribute&&(window.Element.prototype.toggleAttribute=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:!this.hasAttribute(t);return!e===this.hasAttribute(t)&&this[e?"setAttribute":"removeAttribute"](t,""),e}),t||global.HTMLElement||(global.HTMLElement=function(){return function t(){o(this,t)}}());var e,n;e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest;return function(t){function e(){return o(this,e),l(this,a(e).apply(this,arguments))}var n,r,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(e,s(HTMLElement)),n=e,i=[{key:"observedAttributes",get:function(){return["type","value","max"]}}],(r=[{key:"connectedCallback",value:function(){var t,e,n,r;this.setAttribute("role","img"),this.setAttribute("aria-label",this.getAttribute("aria-label")||"0%"),this.type=this.type,t=this.nodeName,e="".concat(this.nodeName,"{display:block;fill:none;stroke-width:15}"),n="style-".concat(t.toLowerCase()),r=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(r,"</style>"))}},{key:"attributeChangedCallback",value:function(t,e,n){var r=this.parentElement&&"type"===t&&e!==n,i=this.indeterminate?100:this.percentage;this.setAttribute("aria-label",this.indeterminate||"".concat(this.percentage,"%")),this.toggleAttribute("indeterminate",this.indeterminate),"linear"===this.type&&(this.style.width="".concat(i,"%")),"radial"===this.type&&(this.style.strokeDashoffset=Math.round((100-i)*Math.PI)),r&&(this.innerHTML="radial"!==n?"":'<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>'),"value"===t&&Number(n)!==Number(e)&&function(t,e){var n,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},i="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[i])return;t[i]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,r);var o=t.dispatchEvent(n);t[i]=null}(this,"change")}},{key:"indeterminate",get:function(){return isNaN(parseFloat(this.getAttribute("value")))&&this.getAttribute("value")}},{key:"percentage",get:function(){return Math.round(this.value/this.max*100)||0}},{key:"value",get:function(){return this.indeterminate||Number(this.getAttribute("value"))},set:function(t){this.setAttribute("value",t)}},{key:"max",get:function(){return Number(this.getAttribute("max"))||1},set:function(t){this.setAttribute("max",t)}},{key:"type",get:function(){return this.getAttribute("type")||"linear"},set:function(t){this.setAttribute("type",t)}}])&&u(n.prototype,r),i&&u(n,i),e}()}),window.customElements.define("core-progress",coreProgress);
/*! @nrk/core-progress v2.0.6 - Copyright (c) 2017-2019 NRK */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreProgress=e()}(this,function(){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function a(t){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function i(t,e,n){return(i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var r=[null];r.push.apply(r,e);var i=new(Function.bind.apply(t,r));return n&&c(i,n.prototype),i}).apply(null,arguments)}function s(t){var r="function"==typeof Map?new Map:void 0;return(s=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==r){if(r.has(t))return r.get(t);r.set(t,n)}function n(){return i(t,arguments,a(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window;t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t&&!window.Element.prototype.toggleAttribute&&(window.Element.prototype.toggleAttribute=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:!this.hasAttribute(t);return!e===this.hasAttribute(t)&&this[e?"setAttribute":"removeAttribute"](t,""),e}),t||global.HTMLElement||(global.HTMLElement=function(){return function t(){o(this,t)}}());var e,n;e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest;return function(t){function e(){return o(this,e),l(this,a(e).apply(this,arguments))}var n,r,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(e,s(HTMLElement)),n=e,i=[{key:"observedAttributes",get:function(){return["type","value","max"]}}],(r=[{key:"connectedCallback",value:function(){var t,e,n,r;this.setAttribute("role","img"),this.setAttribute("aria-label",this.getAttribute("aria-label")||"0%"),this.type=this.type,t=this.nodeName,e="".concat(this.nodeName,"{display:block;fill:none;stroke-width:15}"),n="style-".concat(t.toLowerCase()),r=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(r,"</style>"))}},{key:"attributeChangedCallback",value:function(t,e,n){var r=this.parentElement&&"type"===t&&"radial"===n==!this.querySelector("svg"),i=this.indeterminate?100:this.percentage;this.setAttribute("aria-label",this.indeterminate||"".concat(i,"%")),this.toggleAttribute("indeterminate",this.indeterminate),"linear"===this.type&&(this.style.width="".concat(i,"%")),"radial"===this.type&&(this.style.strokeDashoffset=Math.round((100-i)*Math.PI)),r&&(this.innerHTML="radial"===n?'<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>':""),"value"===t&&Number(n)!==Number(e)&&function(t,e){var n,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},i="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[i])return;t[i]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,r);var o=t.dispatchEvent(n);t[i]=null}(this,"change")}},{key:"indeterminate",get:function(){return isNaN(parseFloat(this.getAttribute("value")))&&this.getAttribute("value")}},{key:"percentage",get:function(){return Math.round(this.value/this.max*100)||0}},{key:"value",get:function(){return this.indeterminate||Number(this.getAttribute("value"))},set:function(t){this.setAttribute("value",t)}},{key:"max",get:function(){return Number(this.getAttribute("max"))||1},set:function(t){this.setAttribute("max",t)}},{key:"type",get:function(){return this.getAttribute("type")||"linear"},set:function(t){this.setAttribute("type",t)}}])&&u(n.prototype,r),i&&u(n,i),e}()}),window.customElements.define("core-progress",coreProgress);
//# sourceMappingURL=core-progress.min.js.map

@@ -259,9 +259,9 @@ 'use strict';

value: function attributeChangedCallback(name, prev, next) {
var changeType = this.parentElement && name === 'type' && prev !== next;
var changeType = this.parentElement && name === 'type' && next === 'radial' === !this.querySelector('svg');
var percentage = this.indeterminate ? 100 : this.percentage;
this.setAttribute('aria-label', this.indeterminate || "".concat(this.percentage, "%"));
this.setAttribute('aria-label', this.indeterminate || "".concat(percentage, "%"));
this.toggleAttribute('indeterminate', this.indeterminate);
if (this.type === 'linear') this.style.width = "".concat(percentage, "%");
if (this.type === 'radial') this.style.strokeDashoffset = Math.round((100 - percentage) * Math.PI);
if (changeType) this.innerHTML = next !== 'radial' ? '' : '<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>';
if (changeType) this.innerHTML = next === 'radial' ? '<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>' : '';
if (name === 'value' && Number(next) !== Number(prev)) dispatchEvent(this, 'change'); // Only trigger event on actual change

@@ -313,3 +313,3 @@ }

var version = "2.0.5";
var version = "2.0.6";

@@ -316,0 +316,0 @@ /**

@@ -5,3 +5,3 @@ {

"author": "NRK <opensource@nrk.no> (https://www.nrk.no/)",
"version": "2.0.5",
"version": "2.0.6",
"license": "MIT",

@@ -8,0 +8,0 @@ "main": "core-progress.cjs.js",

@@ -15,3 +15,3 @@ # Core Progress

<style>
.my-track { background: #ccc; border-radius: 3px; overflow: hidden; font: 700 12px/1 sans-serif }
.my-track { display: block; background: #ccc; border-radius: 3px; overflow: hidden; font: 700 12px/1 sans-serif }
.my-track [value] { background: #16f; color: #fff; padding: 3px 6px; transition: 1s }

@@ -31,5 +31,5 @@ .my-track [indeterminate] { animation: indeterminate 2s linear infinite; background: linear-gradient(90deg,#16f 25%, #8bf 50%, #16f 75%) 0/400% }

Progress:
<div class="my-track">
<span class="my-track">
<core-progress value=".5"></core-progress>
</div>
</span>
</label>

@@ -50,5 +50,5 @@ ```

return <label>Progress JSX:
<div className="my-track">
<span className="my-track">
<CoreProgress value={this.state.value} max={this.state.max} onProgressChange={(state) => this.setState(state)} />
</div>
</span>
</label>

@@ -64,5 +64,5 @@ }

<label>Indeterminate progress:
<div class="my-track">
<span class="my-track">
<core-progress value="Loading..." max="100"></core-progress>
</div>
</span>
</label>

@@ -74,5 +74,5 @@ ```

<label>Radial progress:
<div style="width:40px">
<span style="width:40px">
<core-progress type="radial" class="my-radial" value=".75"></core-progress>
</div>
</span>
</label>

@@ -79,0 +79,0 @@ ```

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

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