@maggioli-design-system/mds-input-range 2.5.4 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/mds-input-range.cjs.entry.js +3 -2
- package/dist/collection/components/mds-input-range/mds-input-range.css +38 -22
- package/dist/collection/components/mds-input-range/mds-input-range.js +3 -1
- package/dist/collection/components/mds-input-range/test/mds-input-range.stories.js +1 -1
- package/dist/components/mds-input-range.js +3 -2
- package/dist/documentation.json +33 -5
- package/dist/esm/mds-input-range.entry.js +3 -2
- package/dist/esm-es5/mds-input-range.entry.js +1 -1
- package/dist/mds-input-range/mds-input-range.esm.js +1 -1
- package/dist/mds-input-range/p-612adc59.entry.js +1 -0
- package/dist/mds-input-range/p-b4fbf017.system.entry.js +1 -0
- package/dist/mds-input-range/p-b6d99f83.system.js +1 -1
- package/dist/stats.json +54 -21
- package/dist/types/components/mds-input-range/mds-input-range.d.ts +1 -0
- package/dist/types/dictionary/icon.d.ts +1 -1
- package/documentation.json +43 -5
- package/package.json +1 -1
- package/readme.md +12 -7
- package/src/components/mds-input-range/mds-input-range.css +39 -23
- package/src/components/mds-input-range/mds-input-range.tsx +6 -2
- package/src/components/mds-input-range/readme.md +12 -7
- package/src/components/mds-input-range/test/mds-input-range.stories.tsx +3 -1
- package/www/build/mds-input-range.esm.js +1 -1
- package/www/build/p-612adc59.entry.js +1 -0
- package/www/build/p-b4fbf017.system.entry.js +1 -0
- package/www/build/p-b6d99f83.system.js +1 -1
- package/dist/mds-input-range/p-55273f42.entry.js +0 -1
- package/dist/mds-input-range/p-b3abfa80.system.entry.js +0 -1
- package/src/fixtures/icons.json +0 -473
- package/www/build/p-55273f42.entry.js +0 -1
- package/www/build/p-b3abfa80.system.entry.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
System.register(["./p-7315ada7.system.js"],(function(t){"use strict";var e,r,a,i,d;return{setters:[function(t){e=t.r;r=t.c;a=t.h;i=t.H;d=t.g}],execute:function(){var n='@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-input-range-thumb-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-thumb-background:rgb(var(--tone-neutral));--mds-input-range-thumb-cursor:col-resize;--mds-input-range-thumb-size:1rem;--mds-input-range-track-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-track-background:rgb(var(--tone-neutral-08));--mds-input-range-track-progress-background-disabled:rgb(var(--tone-neutral-06));--mds-input-range-track-progress-background:rgb(var(--variant-primary-03));--mds-input-range-track-size:1.5rem;--private-border-width:calc(calc(var(--mds-input-range-track-size) - var(--mds-input-range-thumb-size)) / 2);--private-thumb-size:calc(var(--mds-input-range-thumb-size) + var(--private-border-width) * 2);gap:0.5rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);display:grid;-webkit-transition-property:color;transition-property:color}.header{gap:0.5rem;display:-ms-flexbox;display:flex}.label{min-width:0rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value{margin-left:auto}.range{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:var(--private-thumb-size);position:relative}.track{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute}.field{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.field:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.field{z-index:20;height:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-radius:1000px;-ms-flex-positive:1;flex-grow:1;margin:0}.field:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.field::-webkit-slider-thumb{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-appearance:none;appearance:none;background-color:var(--mds-input-range-thumb-background);border-color:var(--mds-input-range-track-progress-background);border-radius:var(--mds-input-range-thumb-size);border-style:solid;border-width:var(--private-border-width);cursor:var(--mds-input-range-thumb-cursor);height:var(--private-thumb-size);line-height:0;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition-property:background-color, border;transition-property:background-color, border;width:var(--private-thumb-size)}.field::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;border:0;height:0;width:100%}.track-progress{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-input-range-track-progress-background);display:-ms-flexbox;display:flex;height:var(--mds-input-range-track-size);-webkit-transition-property:background-color;transition-property:background-color;width:calc(\n (100% - var(--mds-input-range-track-size)) * (var(--mds-input-range-progress, 0) * 0.01)\n + (var(--mds-input-range-track-size) / 2)\n )}.track-total{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-input-range-track-background);border-radius:var(--mds-input-range-track-size);display:-ms-flexbox;display:flex;height:var(--mds-input-range-track-size);overflow:hidden;-webkit-transition-property:background-color;transition-property:background-color;width:100%}.contrast-area{margin-left:0.25rem;margin-right:0.25rem;border-radius:var(--mds-input-range-track-size)}:host([disabled]:not([disabled="false"])){--mds-input-range-thumb-background:var(--mds-input-range-thumb-background-disabled);--mds-input-range-track-background:var(--mds-input-range-track-background-disabled);--mds-input-range-track-progress-background:var(--mds-input-range-track-progress-background-disabled)}:host([disabled]:not([disabled="false"])) .field::-webkit-slider-thumb{cursor:not-allowed}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .field::-webkit-slider-thumb,:host-context(.pref-animation-reduce) .field::-webkit-slider-runnable-track,:host-context(.pref-animation-reduce) .track-progress,:host-context(.pref-animation-reduce) .track-total{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system),:host-context(.pref-animation-system) .field::-webkit-slider-thumb,:host-context(.pref-animation-system) .field::-webkit-slider-runnable-track,:host-context(.pref-animation-system) .track-progress,:host-context(.pref-animation-system) .track-total{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-range-thumb-background:rgb(var(--variant-primary-04));--mds-input-range-track-background:rgb(var(--tone-neutral-07));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-range-thumb-background:rgb(var(--variant-primary-04));--mds-input-range-track-background:rgb(var(--tone-neutral-07));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05))}}:host-context(.pref-contrast-more){color:rgb(var(--tone-neutral-01))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){color:rgb(var(--tone-neutral-01))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}';var s=n;var o=t("mds_input_range",function(){function t(t){var a=this;e(this,t);this.changeEvent=r(this,"mdsInputRangeChange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.max=100;this.min=0;this.step=1;this.onInput=function(){if(Number.isNaN(a.inputElement.value))throw Error("Entered value ".concat(a.inputElement.value," is not a Number"));a.value=Number(a.inputElement.value)}}t.prototype.calculateProgress=function(){var t=Number(this.inputElement.value);var e=Math.pow(10,this.decimalPlaces);if(t>this.max)t=this.max;else if(t<this.min)t=this.min;if((t-this.min)*e%(this.step*e)!==0){t=(Math.round((t*e-this.min*e)/(this.step*e))*(this.step*e)+this.min*e)/e}this.value=t;this.internals.setFormValue(this.value.toString());var r=this.max-this.min;var a=this.value-this.min;this.progress=a/r*100};t.prototype.countDecimals=function(t){if(Math.floor(t)===t)return 0;return t.toString().split(".")[1].length||0};t.prototype.disabledChanged=function(t){if(t){this.internals.setFormValue(null)}};t.prototype.valueChanged=function(t,e){if(t===e)return;this.inputElement.value=this.value.toString();this.calculateProgress();this.changeEvent.emit(this.value)};t.prototype.minChanged=function(){this.calculateProgress()};t.prototype.maxChanged=function(){this.calculateProgress()};t.prototype.stepChanged=function(){if(this.step<=0)throw Error("step cant be negative or zero");this.decimalPlaces=this.countDecimals(this.step);this.calculateProgress()};t.prototype.formResetCallback=function(){this.internals.setFormValue("")};t.prototype.componentDidLoad=function(){var t;this.decimalPlaces=this.countDecimals(this.step);this.onInput();this.label=(t=this.element.textContent)!==null&&t!==void 0?t:"";this.calculateProgress()};t.prototype.render=function(){var t=this;var e;return a(i,{key:"c18e348050b8613f09cd7f8b3de699ba2893d56a"},a("header",{key:"74f89b34d4be455e8a20574db178a477c5a04892",class:"header",part:"header"},a("mds-text",{key:"52afe2fa8c6a632a7af247fa4dab2ce5a0218617",class:"label",typography:"label"},a("slot",{key:"04af45448ed4baea021aa1fe15c56d8fff786e78"})),a("mds-text",{key:"767fceb22930f70dbf7f140aa94e2eb3f14790e4",class:"value",typography:"label"},this.formatValue?this.formatValue(this.value):this.value)),a("div",{key:"02ebb09257839fa9de003fb384c94714d3356845",class:"range"},a("div",{key:"2e0f349c8aa8283806e0b831f516af183039133d",class:"track",part:"track"},a("div",{key:"6be1a2e9982606574b55031cebe1f42b092034c1",class:"contrast-area"}),a("div",{key:"8502811a582e9b5f48bc198f92fcda6729601d87",class:"track-total"},a("div",{key:"ce6acc53f5ac8bd74b31961f87ddf4dc5e2db816",class:"track-progress",style:{"--mds-input-range-progress":"".concat((e=this.progress)!==null&&e!==void 0?e:0)}}))),a("input",{key:"9be4d67701b2007ed1ce4b9bc10532fc8bd6f969",ref:function(e){return t.inputElement=e},class:"field","aria-label":this.label,disabled:this.disabled,max:this.max,min:this.min,onInput:this.onInput,step:this.step,type:"range",value:this.value})))};Object.defineProperty(t,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"element",{get:function(){return d(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}},enumerable:false,configurable:true});return t}());o.style=s}}}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(n,e,t,r){function i(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,a){function u(n){try{c(r.next(n))}catch(n){a(n)}}function o(n){try{c(r["throw"](n))}catch(n){a(n)}}function c(n){n.done?t(n.value):i(n.value).then(u,o)}c((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,u;return u={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function o(n){return function(e){return c([n,e])}}function c(o){if(r)throw new TypeError("Generator is already executing.");while(u&&(u=0,o[0]&&(t=0)),t)try{if(r=1,i&&(a=o[0]&2?i["return"]:o[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,o[1])).done)return a;if(i=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:t.label++;return{value:o[1],done:false};case 5:t.label++;i=o[1];o=[0];continue;case 7:o=t.ops.pop();t.trys.pop();continue;default:if(!(a=t.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){t=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){t.label=o[1];break}if(o[0]===6&&t.label<a[1]){t.label=a[1];a=o;break}if(a&&t.label<a[2]){t.label=a[2];t.ops.push(o);break}if(a[2])t.ops.pop();t.trys.pop();continue}o=e.call(n,t)}catch(n){o=[6,n];i=0}finally{r=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-7315ada7.system.js","./p-56ba5cbf.system.js"],(function(n,e){"use strict";var t,r,i;return{setters:[function(e){t=e.p;r=e.b;n("setNonce",e.s)},function(n){i=n.g}],execute:function(){var n=this;var a=function(){var n=e.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return t(r)};a().then((function(e){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(n,e,t,r){function i(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,a){function u(n){try{c(r.next(n))}catch(n){a(n)}}function o(n){try{c(r["throw"](n))}catch(n){a(n)}}function c(n){n.done?t(n.value):i(n.value).then(u,o)}c((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,u;return u={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function o(n){return function(e){return c([n,e])}}function c(o){if(r)throw new TypeError("Generator is already executing.");while(u&&(u=0,o[0]&&(t=0)),t)try{if(r=1,i&&(a=o[0]&2?i["return"]:o[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,o[1])).done)return a;if(i=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:t.label++;return{value:o[1],done:false};case 5:t.label++;i=o[1];o=[0];continue;case 7:o=t.ops.pop();t.trys.pop();continue;default:if(!(a=t.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){t=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){t.label=o[1];break}if(o[0]===6&&t.label<a[1]){t.label=a[1];a=o;break}if(a&&t.label<a[2]){t.label=a[2];t.ops.push(o);break}if(a[2])t.ops.pop();t.trys.pop();continue}o=e.call(n,t)}catch(n){o=[6,n];i=0}finally{r=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-7315ada7.system.js","./p-56ba5cbf.system.js"],(function(n,e){"use strict";var t,r,i;return{setters:[function(e){t=e.p;r=e.b;n("setNonce",e.s)},function(n){i=n.g}],execute:function(){var n=this;var a=function(){var n=e.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return t(r)};a().then((function(e){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-b4fbf017.system",[[65,"mds-input-range",{formatValue:[16],max:[2],min:[2],step:[2],disabled:[1540],value:[1538],progress:[32]},null,{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}]]]],e)]}}))}))}))}}}));
|
package/dist/stats.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-
|
|
2
|
+
"timestamp": "2026-03-18T11:03:19",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "node",
|
|
5
5
|
"version": "22.15.0"
|
|
@@ -112,10 +112,10 @@
|
|
|
112
112
|
"./dist/mds-input-range/mds-input-range.js",
|
|
113
113
|
"./dist/mds-input-range/p-155deafe.js",
|
|
114
114
|
"./dist/mds-input-range/p-50ea2036.system.js",
|
|
115
|
-
"./dist/mds-input-range/p-55273f42.entry.js",
|
|
116
115
|
"./dist/mds-input-range/p-56ba5cbf.system.js",
|
|
116
|
+
"./dist/mds-input-range/p-612adc59.entry.js",
|
|
117
117
|
"./dist/mds-input-range/p-7315ada7.system.js",
|
|
118
|
-
"./dist/mds-input-range/p-
|
|
118
|
+
"./dist/mds-input-range/p-b4fbf017.system.entry.js",
|
|
119
119
|
"./dist/mds-input-range/p-b6d99f83.system.js",
|
|
120
120
|
"./dist/mds-input-range/p-e1255160.js",
|
|
121
121
|
"./www/build/index.esm.js",
|
|
@@ -123,10 +123,10 @@
|
|
|
123
123
|
"./www/build/mds-input-range.js",
|
|
124
124
|
"./www/build/p-155deafe.js",
|
|
125
125
|
"./www/build/p-50ea2036.system.js",
|
|
126
|
-
"./www/build/p-55273f42.entry.js",
|
|
127
126
|
"./www/build/p-56ba5cbf.system.js",
|
|
127
|
+
"./www/build/p-612adc59.entry.js",
|
|
128
128
|
"./www/build/p-7315ada7.system.js",
|
|
129
|
-
"./www/build/p-
|
|
129
|
+
"./www/build/p-b4fbf017.system.entry.js",
|
|
130
130
|
"./www/build/p-b6d99f83.system.js",
|
|
131
131
|
"./www/build/p-e1255160.js"
|
|
132
132
|
]
|
|
@@ -161,12 +161,12 @@
|
|
|
161
161
|
"components": [
|
|
162
162
|
"mds-input-range"
|
|
163
163
|
],
|
|
164
|
-
"bundleId": "p-
|
|
165
|
-
"fileName": "p-
|
|
164
|
+
"bundleId": "p-612adc59",
|
|
165
|
+
"fileName": "p-612adc59.entry.js",
|
|
166
166
|
"imports": [
|
|
167
167
|
"p-155deafe.js"
|
|
168
168
|
],
|
|
169
|
-
"originalByteSize":
|
|
169
|
+
"originalByteSize": 17650
|
|
170
170
|
}
|
|
171
171
|
],
|
|
172
172
|
"esm": [
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
"imports": [
|
|
181
181
|
"index-e9d1fa7e.js"
|
|
182
182
|
],
|
|
183
|
-
"originalByteSize":
|
|
183
|
+
"originalByteSize": 17654
|
|
184
184
|
}
|
|
185
185
|
],
|
|
186
186
|
"es5": [
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
"imports": [
|
|
195
195
|
"index-e9d1fa7e.js"
|
|
196
196
|
],
|
|
197
|
-
"originalByteSize":
|
|
197
|
+
"originalByteSize": 17654
|
|
198
198
|
}
|
|
199
199
|
],
|
|
200
200
|
"system": [
|
|
@@ -203,12 +203,12 @@
|
|
|
203
203
|
"components": [
|
|
204
204
|
"mds-input-range"
|
|
205
205
|
],
|
|
206
|
-
"bundleId": "p-
|
|
207
|
-
"fileName": "p-
|
|
206
|
+
"bundleId": "p-b4fbf017.system",
|
|
207
|
+
"fileName": "p-b4fbf017.system.entry.js",
|
|
208
208
|
"imports": [
|
|
209
209
|
"p-7315ada7.system.js"
|
|
210
210
|
],
|
|
211
|
-
"originalByteSize":
|
|
211
|
+
"originalByteSize": 18558
|
|
212
212
|
}
|
|
213
213
|
],
|
|
214
214
|
"commonjs": [
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
"imports": [
|
|
223
223
|
"index-37d5e60f.js"
|
|
224
224
|
],
|
|
225
|
-
"originalByteSize":
|
|
225
|
+
"originalByteSize": 17755
|
|
226
226
|
}
|
|
227
227
|
]
|
|
228
228
|
},
|
|
@@ -243,6 +243,10 @@
|
|
|
243
243
|
{
|
|
244
244
|
"name": "part",
|
|
245
245
|
"text": "header - The element containing the labels displayed over the input element"
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"name": "part",
|
|
249
|
+
"text": "track - The element containing the track of the input range"
|
|
246
250
|
}
|
|
247
251
|
],
|
|
248
252
|
"text": ""
|
|
@@ -622,6 +626,24 @@
|
|
|
622
626
|
"internal": false,
|
|
623
627
|
"assetsDirs": [],
|
|
624
628
|
"styleDocs": [
|
|
629
|
+
{
|
|
630
|
+
"name": "--mds-input-range-thumb-background-disabled",
|
|
631
|
+
"docs": "Sets the thumb background color when the component is disabled",
|
|
632
|
+
"annotation": "prop",
|
|
633
|
+
"mode": "$"
|
|
634
|
+
},
|
|
635
|
+
{
|
|
636
|
+
"name": "--mds-input-range-thumb-background",
|
|
637
|
+
"docs": "Sets the thumb background color",
|
|
638
|
+
"annotation": "prop",
|
|
639
|
+
"mode": "$"
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"name": "--mds-input-range-thumb-cursor",
|
|
643
|
+
"docs": "Sets the thumb cursor",
|
|
644
|
+
"annotation": "prop",
|
|
645
|
+
"mode": "$"
|
|
646
|
+
},
|
|
625
647
|
{
|
|
626
648
|
"name": "--mds-input-range-thumb-size",
|
|
627
649
|
"docs": "Sets the thumb width and height of the component",
|
|
@@ -629,26 +651,32 @@
|
|
|
629
651
|
"mode": "$"
|
|
630
652
|
},
|
|
631
653
|
{
|
|
632
|
-
"name": "--mds-input-range-
|
|
633
|
-
"docs": "",
|
|
654
|
+
"name": "--mds-input-range-track-background-disabled",
|
|
655
|
+
"docs": "Sets the track background color when the component is disabled",
|
|
634
656
|
"annotation": "prop",
|
|
635
657
|
"mode": "$"
|
|
636
658
|
},
|
|
637
659
|
{
|
|
638
660
|
"name": "--mds-input-range-track-background",
|
|
639
|
-
"docs": "",
|
|
661
|
+
"docs": "Sets the track background color",
|
|
640
662
|
"annotation": "prop",
|
|
641
663
|
"mode": "$"
|
|
642
664
|
},
|
|
643
665
|
{
|
|
644
|
-
"name": "--mds-input-range-track-
|
|
645
|
-
"docs": "",
|
|
666
|
+
"name": "--mds-input-range-track-progress-background-disabled",
|
|
667
|
+
"docs": "Sets the track progress background color when the component is disabled",
|
|
646
668
|
"annotation": "prop",
|
|
647
669
|
"mode": "$"
|
|
648
670
|
},
|
|
649
671
|
{
|
|
650
672
|
"name": "--mds-input-range-track-progress-background",
|
|
651
|
-
"docs": "",
|
|
673
|
+
"docs": "Sets the track progress background color",
|
|
674
|
+
"annotation": "prop",
|
|
675
|
+
"mode": "$"
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
"name": "--mds-input-range-track-size",
|
|
679
|
+
"docs": "Sets the track width and height",
|
|
652
680
|
"annotation": "prop",
|
|
653
681
|
"mode": "$"
|
|
654
682
|
}
|
|
@@ -658,6 +686,10 @@
|
|
|
658
686
|
{
|
|
659
687
|
"name": "part",
|
|
660
688
|
"text": "header - The element containing the labels displayed over the input element"
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
"name": "part",
|
|
692
|
+
"text": "track - The element containing the track of the input range"
|
|
661
693
|
}
|
|
662
694
|
],
|
|
663
695
|
"text": ""
|
|
@@ -735,7 +767,8 @@
|
|
|
735
767
|
"input"
|
|
736
768
|
],
|
|
737
769
|
"htmlParts": [
|
|
738
|
-
"header"
|
|
770
|
+
"header",
|
|
771
|
+
"track"
|
|
739
772
|
],
|
|
740
773
|
"isUpdateable": true,
|
|
741
774
|
"potentialCmpRefs": [
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
2
|
/**
|
|
3
3
|
* @part header - The element containing the labels displayed over the input element
|
|
4
|
+
* @part track - The element containing the track of the input range
|
|
4
5
|
*/
|
|
5
6
|
export declare class MdsInputRange {
|
|
6
7
|
private progress;
|
package/documentation.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-
|
|
2
|
+
"timestamp": "2026-03-18T10:25:32",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.27.2",
|
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
{
|
|
17
17
|
"name": "part",
|
|
18
18
|
"text": "header - The element containing the labels displayed over the input element"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "part",
|
|
22
|
+
"text": "track - The element containing the track of the input range"
|
|
19
23
|
}
|
|
20
24
|
],
|
|
21
25
|
"usage": {},
|
|
@@ -189,7 +193,17 @@
|
|
|
189
193
|
{
|
|
190
194
|
"name": "--mds-input-range-thumb-background",
|
|
191
195
|
"annotation": "prop",
|
|
192
|
-
"docs": ""
|
|
196
|
+
"docs": "Sets the thumb background color"
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "--mds-input-range-thumb-background-disabled",
|
|
200
|
+
"annotation": "prop",
|
|
201
|
+
"docs": "Sets the thumb background color when the component is disabled"
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"name": "--mds-input-range-thumb-cursor",
|
|
205
|
+
"annotation": "prop",
|
|
206
|
+
"docs": "Sets the thumb cursor"
|
|
193
207
|
},
|
|
194
208
|
{
|
|
195
209
|
"name": "--mds-input-range-thumb-size",
|
|
@@ -199,17 +213,27 @@
|
|
|
199
213
|
{
|
|
200
214
|
"name": "--mds-input-range-track-background",
|
|
201
215
|
"annotation": "prop",
|
|
202
|
-
"docs": ""
|
|
216
|
+
"docs": "Sets the track background color"
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "--mds-input-range-track-background-disabled",
|
|
220
|
+
"annotation": "prop",
|
|
221
|
+
"docs": "Sets the track background color when the component is disabled"
|
|
203
222
|
},
|
|
204
223
|
{
|
|
205
224
|
"name": "--mds-input-range-track-progress-background",
|
|
206
225
|
"annotation": "prop",
|
|
207
|
-
"docs": ""
|
|
226
|
+
"docs": "Sets the track progress background color"
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"name": "--mds-input-range-track-progress-background-disabled",
|
|
230
|
+
"annotation": "prop",
|
|
231
|
+
"docs": "Sets the track progress background color when the component is disabled"
|
|
208
232
|
},
|
|
209
233
|
{
|
|
210
234
|
"name": "--mds-input-range-track-size",
|
|
211
235
|
"annotation": "prop",
|
|
212
|
-
"docs": ""
|
|
236
|
+
"docs": "Sets the track width and height"
|
|
213
237
|
}
|
|
214
238
|
],
|
|
215
239
|
"slots": [],
|
|
@@ -217,6 +241,10 @@
|
|
|
217
241
|
{
|
|
218
242
|
"name": "header",
|
|
219
243
|
"docs": "The element containing the labels displayed over the input element"
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
"name": "track",
|
|
247
|
+
"docs": "The element containing the track of the input range"
|
|
220
248
|
}
|
|
221
249
|
],
|
|
222
250
|
"dependents": [],
|
|
@@ -626,6 +654,11 @@
|
|
|
626
654
|
"docstring": "",
|
|
627
655
|
"path": "src/components/mds-modal/meta/types.ts"
|
|
628
656
|
},
|
|
657
|
+
"src/components/mds-modal/meta/types.ts::ModalInteractionType": {
|
|
658
|
+
"declaration": "export type ModalInteractionType =\n | 'strict'\n | 'relaxed'",
|
|
659
|
+
"docstring": "",
|
|
660
|
+
"path": "src/components/mds-modal/meta/types.ts"
|
|
661
|
+
},
|
|
629
662
|
"src/type/variant.ts::LabelVariantType": {
|
|
630
663
|
"declaration": "export type LabelVariantType =\n | 'amaranth'\n | 'aqua'\n | 'blue'\n | 'green'\n | 'lime'\n | 'orange'\n | 'orchid'\n | 'sky'\n | 'violet'\n | 'yellow'",
|
|
631
664
|
"docstring": "",
|
|
@@ -741,6 +774,11 @@
|
|
|
741
774
|
"docstring": "",
|
|
742
775
|
"path": "src/components/mds-status-bar/meta/types.ts"
|
|
743
776
|
},
|
|
777
|
+
"src/components/mds-stepper-bar/meta/meta.ts::StepperBarNavigationType": {
|
|
778
|
+
"declaration": "export type StepperBarNavigationType =\n | 'none'\n | 'scrollbar'",
|
|
779
|
+
"docstring": "",
|
|
780
|
+
"path": "src/components/mds-stepper-bar/meta/meta.ts"
|
|
781
|
+
},
|
|
744
782
|
"src/components/mds-stepper-bar/meta/event-detail.ts::MdsStepperBarEventDetail": {
|
|
745
783
|
"declaration": "export interface MdsStepperBarEventDetail {\n step: number\n value: string\n}",
|
|
746
784
|
"docstring": "",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/mds-input-range",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"description": "mds-input-range is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
package/readme.md
CHANGED
|
@@ -31,17 +31,22 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
|
|
|
31
31
|
| Part | Description |
|
|
32
32
|
| ---------- | ------------------------------------------------------------------ |
|
|
33
33
|
| `"header"` | The element containing the labels displayed over the input element |
|
|
34
|
+
| `"track"` | The element containing the track of the input range |
|
|
34
35
|
|
|
35
36
|
|
|
36
37
|
## CSS Custom Properties
|
|
37
38
|
|
|
38
|
-
| Name
|
|
39
|
-
|
|
|
40
|
-
| `--mds-input-range-thumb-background`
|
|
41
|
-
| `--mds-input-range-thumb-
|
|
42
|
-
| `--mds-input-range-
|
|
43
|
-
| `--mds-input-range-
|
|
44
|
-
| `--mds-input-range-track-
|
|
39
|
+
| Name | Description |
|
|
40
|
+
| ------------------------------------------------------ | ----------------------------------------------------------------------- |
|
|
41
|
+
| `--mds-input-range-thumb-background` | Sets the thumb background color |
|
|
42
|
+
| `--mds-input-range-thumb-background-disabled` | Sets the thumb background color when the component is disabled |
|
|
43
|
+
| `--mds-input-range-thumb-cursor` | Sets the thumb cursor |
|
|
44
|
+
| `--mds-input-range-thumb-size` | Sets the thumb width and height of the component |
|
|
45
|
+
| `--mds-input-range-track-background` | Sets the track background color |
|
|
46
|
+
| `--mds-input-range-track-background-disabled` | Sets the track background color when the component is disabled |
|
|
47
|
+
| `--mds-input-range-track-progress-background` | Sets the track progress background color |
|
|
48
|
+
| `--mds-input-range-track-progress-background-disabled` | Sets the track progress background color when the component is disabled |
|
|
49
|
+
| `--mds-input-range-track-size` | Sets the track width and height |
|
|
45
50
|
|
|
46
51
|
|
|
47
52
|
## Dependencies
|
|
@@ -3,28 +3,36 @@
|
|
|
3
3
|
@tailwind components;
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
+
* @prop --mds-input-range-thumb-background-disabled: Sets the thumb background color when the component is disabled
|
|
7
|
+
* @prop --mds-input-range-thumb-background: Sets the thumb background color
|
|
8
|
+
* @prop --mds-input-range-thumb-cursor: Sets the thumb cursor
|
|
6
9
|
* @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component
|
|
7
|
-
* @prop --mds-input-range-
|
|
8
|
-
* @prop --mds-input-range-track-background:
|
|
9
|
-
* @prop --mds-input-range-track-
|
|
10
|
-
* @prop --mds-input-range-track-progress-background:
|
|
10
|
+
* @prop --mds-input-range-track-background-disabled: Sets the track background color when the component is disabled
|
|
11
|
+
* @prop --mds-input-range-track-background: Sets the track background color
|
|
12
|
+
* @prop --mds-input-range-track-progress-background-disabled: Sets the track progress background color when the component is disabled
|
|
13
|
+
* @prop --mds-input-range-track-progress-background: Sets the track progress background color
|
|
14
|
+
* @prop --mds-input-range-track-size: Sets the track width and height
|
|
11
15
|
*/
|
|
12
16
|
|
|
13
17
|
:host {
|
|
18
|
+
--mds-input-range-thumb-background-disabled: rgb(var(--tone-neutral-08));
|
|
19
|
+
--mds-input-range-thumb-background: rgb(var(--tone-neutral));
|
|
20
|
+
--mds-input-range-thumb-cursor: col-resize;
|
|
14
21
|
--mds-input-range-thumb-size: theme('spacing.400');
|
|
15
|
-
--mds-input-range-
|
|
16
|
-
--mds-input-range-
|
|
17
|
-
--mds-input-range-track-background:
|
|
18
|
-
--mds-input-range-track-
|
|
19
|
-
--mds-input-range-track-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
--mds-input-range-track-
|
|
22
|
+
--mds-input-range-track-background-disabled: rgb(var(--tone-neutral-08));
|
|
23
|
+
--mds-input-range-track-background: rgb(var(--tone-neutral-08));
|
|
24
|
+
--mds-input-range-track-progress-background-disabled: rgb(var(--tone-neutral-06));
|
|
25
|
+
--mds-input-range-track-progress-background: rgb(var(--variant-primary-03));
|
|
26
|
+
--mds-input-range-track-size: theme('spacing.600');
|
|
27
|
+
|
|
28
|
+
/* private properties */
|
|
29
|
+
--private-border-width: calc(calc(var(--mds-input-range-track-size) - var(--mds-input-range-thumb-size)) / 2);
|
|
30
|
+
--private-thumb-size: calc(var(--mds-input-range-thumb-size) + var(--private-border-width) * 2);
|
|
23
31
|
|
|
24
32
|
@apply
|
|
25
33
|
duration-300
|
|
26
34
|
ease-in-out
|
|
27
|
-
gap-
|
|
35
|
+
gap-200;
|
|
28
36
|
|
|
29
37
|
display: grid;
|
|
30
38
|
transition-property: color;
|
|
@@ -49,17 +57,14 @@
|
|
|
49
57
|
.range {
|
|
50
58
|
align-items: center;
|
|
51
59
|
display: flex;
|
|
52
|
-
height: var(--
|
|
60
|
+
height: var(--private-thumb-size);
|
|
53
61
|
position: relative;
|
|
54
62
|
}
|
|
55
63
|
|
|
56
64
|
.track {
|
|
57
65
|
@apply w-full;
|
|
58
66
|
|
|
59
|
-
--margin: calc(var(--mds-input-range-track-size) / 2);
|
|
60
|
-
|
|
61
67
|
box-sizing: border-box;
|
|
62
|
-
padding: 0 var(--margin);
|
|
63
68
|
position: absolute;
|
|
64
69
|
}
|
|
65
70
|
|
|
@@ -87,15 +92,16 @@
|
|
|
87
92
|
|
|
88
93
|
appearance: none;
|
|
89
94
|
background-color: var(--mds-input-range-thumb-background);
|
|
90
|
-
border:
|
|
95
|
+
border-color: var(--mds-input-range-track-progress-background);
|
|
91
96
|
border-radius: var(--mds-input-range-thumb-size);
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
97
|
+
border-style: solid;
|
|
98
|
+
border-width: var(--private-border-width);
|
|
99
|
+
cursor: var(--mds-input-range-thumb-cursor);
|
|
100
|
+
height: var(--private-thumb-size);
|
|
95
101
|
line-height: 0;
|
|
96
102
|
transform: translate(0, -50%);
|
|
97
|
-
transition-property: background-color,
|
|
98
|
-
width: var(--
|
|
103
|
+
transition-property: background-color, border;
|
|
104
|
+
width: var(--private-thumb-size);
|
|
99
105
|
}
|
|
100
106
|
|
|
101
107
|
.field::-webkit-slider-runnable-track {
|
|
@@ -114,6 +120,16 @@
|
|
|
114
120
|
display: flex;
|
|
115
121
|
height: var(--mds-input-range-track-size);
|
|
116
122
|
transition-property: background-color;
|
|
123
|
+
|
|
124
|
+
/*
|
|
125
|
+
Align fill end with thumb center.
|
|
126
|
+
Thumb center travels across (100% - thumbSize); at 0% and 100% it's inset by thumbSize/2.
|
|
127
|
+
We use track size as the thumb's outer size (matches current thumb calc).
|
|
128
|
+
*/
|
|
129
|
+
width: calc(
|
|
130
|
+
(100% - var(--mds-input-range-track-size)) * (var(--mds-input-range-progress, 0) * 0.01)
|
|
131
|
+
+ (var(--mds-input-range-track-size) / 2)
|
|
132
|
+
);
|
|
117
133
|
}
|
|
118
134
|
|
|
119
135
|
.track-total {
|
|
@@ -2,6 +2,7 @@ import { AttachInternals, Component, Element, Event, EventEmitter, Host, h, Prop
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @part header - The element containing the labels displayed over the input element
|
|
5
|
+
* @part track - The element containing the track of the input range
|
|
5
6
|
*/
|
|
6
7
|
@Component({
|
|
7
8
|
tag: 'mds-input-range',
|
|
@@ -138,10 +139,13 @@ export class MdsInputRange {
|
|
|
138
139
|
<mds-text class="value" typography="label">{ this.formatValue ? this.formatValue(this.value) : this.value }</mds-text>
|
|
139
140
|
</header>
|
|
140
141
|
<div class="range">
|
|
141
|
-
<div class="track">
|
|
142
|
+
<div class="track" part="track">
|
|
142
143
|
<div class="contrast-area"></div>
|
|
143
144
|
<div class="track-total">
|
|
144
|
-
<div
|
|
145
|
+
<div
|
|
146
|
+
class="track-progress"
|
|
147
|
+
style={{ '--mds-input-range-progress': `${this.progress ?? 0}` }}
|
|
148
|
+
></div>
|
|
145
149
|
</div>
|
|
146
150
|
</div>
|
|
147
151
|
<input
|
|
@@ -29,17 +29,22 @@
|
|
|
29
29
|
| Part | Description |
|
|
30
30
|
| ---------- | ------------------------------------------------------------------ |
|
|
31
31
|
| `"header"` | The element containing the labels displayed over the input element |
|
|
32
|
+
| `"track"` | The element containing the track of the input range |
|
|
32
33
|
|
|
33
34
|
|
|
34
35
|
## CSS Custom Properties
|
|
35
36
|
|
|
36
|
-
| Name
|
|
37
|
-
|
|
|
38
|
-
| `--mds-input-range-thumb-background`
|
|
39
|
-
| `--mds-input-range-thumb-
|
|
40
|
-
| `--mds-input-range-
|
|
41
|
-
| `--mds-input-range-
|
|
42
|
-
| `--mds-input-range-track-
|
|
37
|
+
| Name | Description |
|
|
38
|
+
| ------------------------------------------------------ | ----------------------------------------------------------------------- |
|
|
39
|
+
| `--mds-input-range-thumb-background` | Sets the thumb background color |
|
|
40
|
+
| `--mds-input-range-thumb-background-disabled` | Sets the thumb background color when the component is disabled |
|
|
41
|
+
| `--mds-input-range-thumb-cursor` | Sets the thumb cursor |
|
|
42
|
+
| `--mds-input-range-thumb-size` | Sets the thumb width and height of the component |
|
|
43
|
+
| `--mds-input-range-track-background` | Sets the track background color |
|
|
44
|
+
| `--mds-input-range-track-background-disabled` | Sets the track background color when the component is disabled |
|
|
45
|
+
| `--mds-input-range-track-progress-background` | Sets the track progress background color |
|
|
46
|
+
| `--mds-input-range-track-progress-background-disabled` | Sets the track progress background color when the component is disabled |
|
|
47
|
+
| `--mds-input-range-track-size` | Sets the track width and height |
|
|
43
48
|
|
|
44
49
|
|
|
45
50
|
----------------------------------------------
|
|
@@ -30,7 +30,9 @@ export default {
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
const Template = args => (
|
|
33
|
-
<
|
|
33
|
+
<div class="grid gap-400">
|
|
34
|
+
<mds-input-range {...args}>Range label</mds-input-range>
|
|
35
|
+
</div>
|
|
34
36
|
)
|
|
35
37
|
|
|
36
38
|
const TemplateFormatLabel = args => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as a,b as e}from"./p-155deafe.js";export{s as setNonce}from"./p-155deafe.js";import{g as n}from"./p-e1255160.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),a(s)})().then((async a=>(await n(),e([["p-612adc59",[[65,"mds-input-range",{formatValue:[16],max:[2],min:[2],step:[2],disabled:[1540],value:[1538],progress:[32]},null,{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}]]]],a))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as e,h as a,H as r,g as d}from"./p-155deafe.js";const i=class{constructor(a){t(this,a),this.changeEvent=e(this,"mdsInputRangeChange",7),a.$hostElement$["s-ei"]?this.internals=a.$hostElement$["s-ei"]:(this.internals=a.$hostElement$.attachInternals(),a.$hostElement$["s-ei"]=this.internals),this.max=100,this.min=0,this.step=1,this.onInput=()=>{if(Number.isNaN(this.inputElement.value))throw Error(`Entered value ${this.inputElement.value} is not a Number`);this.value=Number(this.inputElement.value)}}calculateProgress(){let t=Number(this.inputElement.value);const e=Math.pow(10,this.decimalPlaces);t>this.max?t=this.max:t<this.min&&(t=this.min),(t-this.min)*e%(this.step*e)!=0&&(t=(Math.round((t*e-this.min*e)/(this.step*e))*(this.step*e)+this.min*e)/e),this.value=t,this.internals.setFormValue(this.value.toString()),this.progress=(this.value-this.min)/(this.max-this.min)*100}countDecimals(t){return Math.floor(t)===t?0:t.toString().split(".")[1].length||0}disabledChanged(t){t&&this.internals.setFormValue(null)}valueChanged(t,e){t!==e&&(this.inputElement.value=this.value.toString(),this.calculateProgress(),this.changeEvent.emit(this.value))}minChanged(){this.calculateProgress()}maxChanged(){this.calculateProgress()}stepChanged(){if(this.step<=0)throw Error("step cant be negative or zero");this.decimalPlaces=this.countDecimals(this.step),this.calculateProgress()}formResetCallback(){this.internals.setFormValue("")}componentDidLoad(){var t;this.decimalPlaces=this.countDecimals(this.step),this.onInput(),this.label=null!==(t=this.element.textContent)&&void 0!==t?t:"",this.calculateProgress()}render(){var t;return a(r,{key:"c18e348050b8613f09cd7f8b3de699ba2893d56a"},a("header",{key:"74f89b34d4be455e8a20574db178a477c5a04892",class:"header",part:"header"},a("mds-text",{key:"52afe2fa8c6a632a7af247fa4dab2ce5a0218617",class:"label",typography:"label"},a("slot",{key:"04af45448ed4baea021aa1fe15c56d8fff786e78"})),a("mds-text",{key:"767fceb22930f70dbf7f140aa94e2eb3f14790e4",class:"value",typography:"label"},this.formatValue?this.formatValue(this.value):this.value)),a("div",{key:"02ebb09257839fa9de003fb384c94714d3356845",class:"range"},a("div",{key:"2e0f349c8aa8283806e0b831f516af183039133d",class:"track",part:"track"},a("div",{key:"6be1a2e9982606574b55031cebe1f42b092034c1",class:"contrast-area"}),a("div",{key:"8502811a582e9b5f48bc198f92fcda6729601d87",class:"track-total"},a("div",{key:"ce6acc53f5ac8bd74b31961f87ddf4dc5e2db816",class:"track-progress",style:{"--mds-input-range-progress":`${null!==(t=this.progress)&&void 0!==t?t:0}`}}))),a("input",{key:"9be4d67701b2007ed1ce4b9bc10532fc8bd6f969",ref:t=>this.inputElement=t,class:"field","aria-label":this.label,disabled:this.disabled,max:this.max,min:this.min,onInput:this.onInput,step:this.step,type:"range",value:this.value})))}static get formAssociated(){return!0}get element(){return d(this)}static get watchers(){return{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}}};i.style='@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-input-range-thumb-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-thumb-background:rgb(var(--tone-neutral));--mds-input-range-thumb-cursor:col-resize;--mds-input-range-thumb-size:1rem;--mds-input-range-track-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-track-background:rgb(var(--tone-neutral-08));--mds-input-range-track-progress-background-disabled:rgb(var(--tone-neutral-06));--mds-input-range-track-progress-background:rgb(var(--variant-primary-03));--mds-input-range-track-size:1.5rem;--private-border-width:calc(calc(var(--mds-input-range-track-size) - var(--mds-input-range-thumb-size)) / 2);--private-thumb-size:calc(var(--mds-input-range-thumb-size) + var(--private-border-width) * 2);gap:0.5rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);display:grid;-webkit-transition-property:color;transition-property:color}.header{gap:0.5rem;display:-ms-flexbox;display:flex}.label{min-width:0rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value{margin-left:auto}.range{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:var(--private-thumb-size);position:relative}.track{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute}.field{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.field:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.field{z-index:20;height:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-radius:1000px;-ms-flex-positive:1;flex-grow:1;margin:0}.field:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.field::-webkit-slider-thumb{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-appearance:none;appearance:none;background-color:var(--mds-input-range-thumb-background);border-color:var(--mds-input-range-track-progress-background);border-radius:var(--mds-input-range-thumb-size);border-style:solid;border-width:var(--private-border-width);cursor:var(--mds-input-range-thumb-cursor);height:var(--private-thumb-size);line-height:0;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition-property:background-color, border;transition-property:background-color, border;width:var(--private-thumb-size)}.field::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;border:0;height:0;width:100%}.track-progress{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-input-range-track-progress-background);display:-ms-flexbox;display:flex;height:var(--mds-input-range-track-size);-webkit-transition-property:background-color;transition-property:background-color;width:calc(\n (100% - var(--mds-input-range-track-size)) * (var(--mds-input-range-progress, 0) * 0.01)\n + (var(--mds-input-range-track-size) / 2)\n )}.track-total{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-input-range-track-background);border-radius:var(--mds-input-range-track-size);display:-ms-flexbox;display:flex;height:var(--mds-input-range-track-size);overflow:hidden;-webkit-transition-property:background-color;transition-property:background-color;width:100%}.contrast-area{margin-left:0.25rem;margin-right:0.25rem;border-radius:var(--mds-input-range-track-size)}:host([disabled]:not([disabled="false"])){--mds-input-range-thumb-background:var(--mds-input-range-thumb-background-disabled);--mds-input-range-track-background:var(--mds-input-range-track-background-disabled);--mds-input-range-track-progress-background:var(--mds-input-range-track-progress-background-disabled)}:host([disabled]:not([disabled="false"])) .field::-webkit-slider-thumb{cursor:not-allowed}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .field::-webkit-slider-thumb,:host-context(.pref-animation-reduce) .field::-webkit-slider-runnable-track,:host-context(.pref-animation-reduce) .track-progress,:host-context(.pref-animation-reduce) .track-total{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system),:host-context(.pref-animation-system) .field::-webkit-slider-thumb,:host-context(.pref-animation-system) .field::-webkit-slider-runnable-track,:host-context(.pref-animation-system) .track-progress,:host-context(.pref-animation-system) .track-total{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-range-thumb-background:rgb(var(--variant-primary-04));--mds-input-range-track-background:rgb(var(--tone-neutral-07));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-range-thumb-background:rgb(var(--variant-primary-04));--mds-input-range-track-background:rgb(var(--tone-neutral-07));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05))}}:host-context(.pref-contrast-more){color:rgb(var(--tone-neutral-01))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){color:rgb(var(--tone-neutral-01))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}';export{i as mds_input_range}
|