UNPKG

14.5 kBJavaScriptView Raw
1System.register(['./index-1a441b18.system.js'], function (exports) {
2 'use strict';
3 var registerInstance, h, Host;
4 return {
5 setters: [function (module) {
6 registerInstance = module.r;
7 h = module.h;
8 Host = module.H;
9 }],
10 execute: function () {
11 var sliderCss = "input[type=range].slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:1rem 0;background:transparent}input[type=range].slider.is-fullwidth{display:block;width:100%}input[type=range].slider:focus{outline:none}input[type=range].slider:not([orient=vertical])::-webkit-slider-runnable-track{width:100%}input[type=range].slider:not([orient=vertical])::-moz-range-track{width:100%}input[type=range].slider:not([orient=vertical])::-ms-track{width:100%}input[type=range].slider:not([orient=vertical]).has-output+output,input[type=range].slider:not([orient=vertical]).has-output-tooltip+output{width:3rem;background:#4a4a4a;border-radius:4px;padding:0.4rem 0.8rem;font-size:0.75rem;line-height:0.75rem;text-align:center;text-overflow:ellipsis;white-space:nowrap;color:white;overflow:hidden;pointer-events:none;z-index:200}input[type=range].slider:not([orient=vertical]).has-output{display:inline-block;width:calc(100% - ( 4.2rem ))}input[type=range].slider:not([orient=vertical]).has-output+output{display:inline-block;position:relative;margin-left:0.75rem;top:-0.75rem}input[type=range].slider:not([orient=vertical]).has-output-tooltip{display:block}input[type=range].slider:not([orient=vertical]).has-output-tooltip+output{position:absolute;left:0;top:-0.1rem}input[type=range].slider[orient=vertical]{-webkit-appearance:slider-vertical;-webkit-writing-mode:bt-lr;-ms-writing-mode:bt-lr;writing-mode:bt-lr}input[type=range].slider[orient=vertical]::-webkit-slider-runnable-track{height:100%}input[type=range].slider[orient=vertical]::-moz-range-track{height:100%}input[type=range].slider[orient=vertical]::-ms-track{height:100%}input[type=range].slider::-webkit-slider-runnable-track{cursor:pointer;animate:0.2s;-webkit-box-shadow:0px 0px 0px #7a7a7a;box-shadow:0px 0px 0px #7a7a7a;background:#dbdbdb;border-radius:4px;border:0px solid #7a7a7a}input[type=range].slider::-moz-range-track{cursor:pointer;animate:0.2s;box-shadow:0px 0px 0px #7a7a7a;background:#dbdbdb;border-radius:4px;border:0px solid #7a7a7a}input[type=range].slider::-ms-track{cursor:pointer;animate:0.2s;box-shadow:0px 0px 0px #7a7a7a;background:#dbdbdb;border-radius:4px;border:0px solid #7a7a7a}input[type=range].slider::-ms-fill-lower{background:#5851ff}input[type=range].slider::-ms-fill-upper{background:#dbdbdb}input[type=range].slider::-webkit-slider-thumb{-webkit-box-shadow:none;box-shadow:none;border:1px solid #b5b5b5;border-radius:4px;background:white;cursor:pointer;-webkit-appearance:none;transition:transform 0.2s ease, -webkit-transform 0.2s ease;-webkit-transition:-webkit-transform 0.2s ease;transition:transform 0.2s ease;transition:-webkit-transform 0.2s ease}input[type=range].slider::-moz-range-thumb{box-shadow:none;border:1px solid #b5b5b5;background:white;border-radius:4px;cursor:pointer;transition:transform 0.2s ease, -webkit-transform 0.2s ease;-moz-transition:transform 0.2s ease;transition:transform 0.2s ease;transition:-webkit-transform 0.2s ease}input[type=range].slider::-ms-thumb{box-shadow:none;border:1px solid #b5b5b5;background:white;border-radius:4px;cursor:pointer;transition:transform 0.2s ease, -webkit-transform 0.2s ease;-ms-transition:transform 0.2s ease;transition:transform 0.2s ease;transition:-webkit-transform 0.2s ease}input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none}input[type=range].slider.is-circle::-webkit-slider-thumb{border-radius:50%}input[type=range].slider.is-circle::-moz-range-thumb{border-radius:50%}input[type=range].slider.is-circle::-ms-thumb{border-radius:50%}input[type=range].slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}input[type=range].slider:active::-moz-range-thumb{transform:scale(1.25)}input[type=range].slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}input[type=range].slider:disabled{opacity:0.5;cursor:not-allowed}input[type=range].slider:disabled::-webkit-slider-thumb{cursor:not-allowed;-webkit-transform:scale(1);transform:scale(1)}input[type=range].slider:disabled::-moz-range-thumb{cursor:not-allowed;transform:scale(1)}input[type=range].slider:disabled::-ms-thumb{cursor:not-allowed;-ms-transform:scale(1);transform:scale(1)}input[type=range].slider:not([orient=vertical])::-webkit-slider-runnable-track{height:0.5rem}input[type=range].slider:not([orient=vertical])::-moz-range-track{height:0.5rem}input[type=range].slider:not([orient=vertical])::-ms-track{height:0.5rem}input[type=range].slider[orient=vertical]::-webkit-slider-runnable-track{width:0.5rem}input[type=range].slider[orient=vertical]::-moz-range-track{width:0.5rem}input[type=range].slider[orient=vertical]::-ms-track{width:0.5rem}input[type=range].slider::-webkit-slider-thumb{height:1rem;width:1rem;margin-top:-0.25rem}input[type=range].slider::-moz-range-thumb{height:1rem;width:1rem}input[type=range].slider::-ms-thumb{height:1rem;width:1rem}input[type=range].slider[orient=vertical]::-webkit-slider-thumb{margin-top:auto;margin-left:-0.25rem}input[type=range].slider.is-small:not([orient=vertical])::-webkit-slider-runnable-track{height:0.375rem}input[type=range].slider.is-small:not([orient=vertical])::-moz-range-track{height:0.375rem}input[type=range].slider.is-small:not([orient=vertical])::-ms-track{height:0.375rem}input[type=range].slider.is-small[orient=vertical]::-webkit-slider-runnable-track{width:0.375rem}input[type=range].slider.is-small[orient=vertical]::-moz-range-track{width:0.375rem}input[type=range].slider.is-small[orient=vertical]::-ms-track{width:0.375rem}input[type=range].slider.is-small::-webkit-slider-thumb{height:0.75rem;width:0.75rem;margin-top:-0.1875rem}input[type=range].slider.is-small::-moz-range-thumb{height:0.75rem;width:0.75rem}input[type=range].slider.is-small::-ms-thumb{height:0.75rem;width:0.75rem}input[type=range].slider.is-small[orient=vertical]::-webkit-slider-thumb{margin-top:auto;margin-left:-0.1875rem}input[type=range].slider.is-medium:not([orient=vertical])::-webkit-slider-runnable-track{height:0.625rem}input[type=range].slider.is-medium:not([orient=vertical])::-moz-range-track{height:0.625rem}input[type=range].slider.is-medium:not([orient=vertical])::-ms-track{height:0.625rem}input[type=range].slider.is-medium[orient=vertical]::-webkit-slider-runnable-track{width:0.625rem}input[type=range].slider.is-medium[orient=vertical]::-moz-range-track{width:0.625rem}input[type=range].slider.is-medium[orient=vertical]::-ms-track{width:0.625rem}input[type=range].slider.is-medium::-webkit-slider-thumb{height:1.25rem;width:1.25rem;margin-top:-0.3125rem}input[type=range].slider.is-medium::-moz-range-thumb{height:1.25rem;width:1.25rem}input[type=range].slider.is-medium::-ms-thumb{height:1.25rem;width:1.25rem}input[type=range].slider.is-medium[orient=vertical]::-webkit-slider-thumb{margin-top:auto;margin-left:-0.3125rem}input[type=range].slider.is-large:not([orient=vertical])::-webkit-slider-runnable-track{height:0.75rem}input[type=range].slider.is-large:not([orient=vertical])::-moz-range-track{height:0.75rem}input[type=range].slider.is-large:not([orient=vertical])::-ms-track{height:0.75rem}input[type=range].slider.is-large[orient=vertical]::-webkit-slider-runnable-track{width:0.75rem}input[type=range].slider.is-large[orient=vertical]::-moz-range-track{width:0.75rem}input[type=range].slider.is-large[orient=vertical]::-ms-track{width:0.75rem}input[type=range].slider.is-large::-webkit-slider-thumb{height:1.5rem;width:1.5rem;margin-top:-0.375rem}input[type=range].slider.is-large::-moz-range-thumb{height:1.5rem;width:1.5rem}input[type=range].slider.is-large::-ms-thumb{height:1.5rem;width:1.5rem}input[type=range].slider.is-large[orient=vertical]::-webkit-slider-thumb{margin-top:auto;margin-left:-0.375rem}input[type=range].slider.is-white::-moz-range-track{background:white}input[type=range].slider.is-white::-webkit-slider-runnable-track{background:white}input[type=range].slider.is-white::-ms-track{background:white !important}input[type=range].slider.is-white::-ms-fill-lower{background:white}input[type=range].slider.is-white.has-output+output,input[type=range].slider.is-white .has-output-tooltip+output{background-color:white;color:#0a0a0a}input[type=range].slider.is-black::-moz-range-track{background:#0a0a0a}input[type=range].slider.is-black::-webkit-slider-runnable-track{background:#0a0a0a}input[type=range].slider.is-black::-ms-track{background:#0a0a0a !important}input[type=range].slider.is-black::-ms-fill-lower{background:#0a0a0a}input[type=range].slider.is-black.has-output+output,input[type=range].slider.is-black .has-output-tooltip+output{background-color:#0a0a0a;color:white}input[type=range].slider.is-light::-moz-range-track{background:whitesmoke}input[type=range].slider.is-light::-webkit-slider-runnable-track{background:whitesmoke}input[type=range].slider.is-light::-ms-track{background:whitesmoke !important}input[type=range].slider.is-light::-ms-fill-lower{background:whitesmoke}input[type=range].slider.is-light.has-output+output,input[type=range].slider.is-light .has-output-tooltip+output{background-color:whitesmoke;color:rgba(0, 0, 0, 0.7)}input[type=range].slider.is-dark::-moz-range-track{background:#363636}input[type=range].slider.is-dark::-webkit-slider-runnable-track{background:#363636}input[type=range].slider.is-dark::-ms-track{background:#363636 !important}input[type=range].slider.is-dark::-ms-fill-lower{background:#363636}input[type=range].slider.is-dark.has-output+output,input[type=range].slider.is-dark .has-output-tooltip+output{background-color:#363636;color:#fff}input[type=range].slider.is-primary::-moz-range-track{background:#5851ff}input[type=range].slider.is-primary::-webkit-slider-runnable-track{background:#5851ff}input[type=range].slider.is-primary::-ms-track{background:#5851ff !important}input[type=range].slider.is-primary::-ms-fill-lower{background:#5851ff}input[type=range].slider.is-primary.has-output+output,input[type=range].slider.is-primary .has-output-tooltip+output{background-color:#5851ff;color:#fff}input[type=range].slider.is-link::-moz-range-track{background:#3273dc}input[type=range].slider.is-link::-webkit-slider-runnable-track{background:#3273dc}input[type=range].slider.is-link::-ms-track{background:#3273dc !important}input[type=range].slider.is-link::-ms-fill-lower{background:#3273dc}input[type=range].slider.is-link.has-output+output,input[type=range].slider.is-link .has-output-tooltip+output{background-color:#3273dc;color:#fff}input[type=range].slider.is-info::-moz-range-track{background:#3298dc}input[type=range].slider.is-info::-webkit-slider-runnable-track{background:#3298dc}input[type=range].slider.is-info::-ms-track{background:#3298dc !important}input[type=range].slider.is-info::-ms-fill-lower{background:#3298dc}input[type=range].slider.is-info.has-output+output,input[type=range].slider.is-info .has-output-tooltip+output{background-color:#3298dc;color:#fff}input[type=range].slider.is-success::-moz-range-track{background:#48c774}input[type=range].slider.is-success::-webkit-slider-runnable-track{background:#48c774}input[type=range].slider.is-success::-ms-track{background:#48c774 !important}input[type=range].slider.is-success::-ms-fill-lower{background:#48c774}input[type=range].slider.is-success.has-output+output,input[type=range].slider.is-success .has-output-tooltip+output{background-color:#48c774;color:#fff}input[type=range].slider.is-warning::-moz-range-track{background:#ffdd57}input[type=range].slider.is-warning::-webkit-slider-runnable-track{background:#ffdd57}input[type=range].slider.is-warning::-ms-track{background:#ffdd57 !important}input[type=range].slider.is-warning::-ms-fill-lower{background:#ffdd57}input[type=range].slider.is-warning.has-output+output,input[type=range].slider.is-warning .has-output-tooltip+output{background-color:#ffdd57;color:rgba(0, 0, 0, 0.7)}input[type=range].slider.is-danger::-moz-range-track{background:#f14668}input[type=range].slider.is-danger::-webkit-slider-runnable-track{background:#f14668}input[type=range].slider.is-danger::-ms-track{background:#f14668 !important}input[type=range].slider.is-danger::-ms-fill-lower{background:#f14668}input[type=range].slider.is-danger.has-output+output,input[type=range].slider.is-danger .has-output-tooltip+output{background-color:#f14668;color:#fff}";
12 var Slider = /** @class */ (function () {
13 function Slider(hostRef) {
14 var _this = this;
15 registerInstance(this, hostRef);
16 /**
17 * Step
18 */
19 this.step = 1;
20 /**
21 * Min
22 */
23 this.min = 0;
24 /**
25 * CSS Classes
26 */
27 this.max = 100;
28 /**
29 * CSS Classes
30 */
31 this.class = '';
32 /**
33 * Circle
34 */
35 this.isCircle = false;
36 /**
37 * Disabled
38 */
39 this.disabled = false;
40 this.handleInputChange = function (event) {
41 _this.value = event.target.value;
42 };
43 }
44 Slider.prototype.render = function () {
45 var _a;
46 return (h(Host, null, h("input", { type: "range", onChange: this.handleInputChange, class: (_a = {
47 slider: true,
48 'is-fullwidth': true
49 },
50 _a[this.color] = Boolean(this.color),
51 _a[this.size] = Boolean(this.size),
52 _a['is-circle'] = this.isCircle,
53 _a), step: this.step, min: this.min, max: this.max, value: this.value, disabled: this.disabled })));
54 };
55 return Slider;
56 }());
57 exports('bm_slider', Slider);
58 Slider.style = sliderCss;
59 }
60 };
61});