@nrk/core-progress
Advanced tools
Comparing version 2.0.5 to 2.0.6
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
95736
12
1