@bulmil/core
Version:
63 lines (58 loc) • 16.3 kB
JavaScript
/*!
* Bulmil - MIT License
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const sliderCss = "input[type=range].slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:1rem 0;background:transparent;-ms-touch-action:none;touch-action:none}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:hsl(0, 0%, 29%);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:hsl(0, 0%, 100%);overflow:hidden;pointer-events:none;z-index:200}input[type=range].slider:not([orient=vertical]).has-output:disabled+output,input[type=range].slider:not([orient=vertical]).has-output-tooltip:disabled+output{opacity:0.5}input[type=range].slider:not([orient=vertical]).has-output{display:inline-block;vertical-align:middle;width:calc(100% - ( 4.2rem ))}input[type=range].slider:not([orient=vertical]).has-output+output{display:inline-block;margin-left:0.75rem;vertical-align:middle}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;-moz-appearance:slider-vertical;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;box-shadow:0px 0px 0px hsl(0, 0%, 48%);background:hsl(0, 0%, 86%);border-radius:4px;border:0px solid hsl(0, 0%, 48%)}input[type=range].slider::-moz-range-track{cursor:pointer;animate:0.2s;box-shadow:0px 0px 0px hsl(0, 0%, 48%);background:hsl(0, 0%, 86%);border-radius:4px;border:0px solid hsl(0, 0%, 48%)}input[type=range].slider::-ms-track{cursor:pointer;animate:0.2s;box-shadow:0px 0px 0px hsl(0, 0%, 48%);background:hsl(0, 0%, 86%);border-radius:4px;border:0px solid hsl(0, 0%, 48%)}input[type=range].slider::-ms-fill-lower{background:hsl(0, 0%, 86%);border-radius:4px}input[type=range].slider::-ms-fill-upper{background:hsl(0, 0%, 86%);border-radius:4px}input[type=range].slider::-webkit-slider-thumb{box-shadow:none;border:1px solid hsl(0, 0%, 71%);border-radius:4px;background:hsl(0, 0%, 100%);cursor:pointer}input[type=range].slider::-moz-range-thumb{box-shadow:none;border:1px solid hsl(0, 0%, 71%);border-radius:4px;background:hsl(0, 0%, 100%);cursor:pointer}input[type=range].slider::-ms-thumb{box-shadow:none;border:1px solid hsl(0, 0%, 71%);border-radius:4px;background:hsl(0, 0%, 100%);cursor:pointer}input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none}input[type=range].slider.is-circle::-webkit-slider-thumb{border-radius:9999px}input[type=range].slider.is-circle::-moz-range-thumb{border-radius:9999px}input[type=range].slider.is-circle::-ms-thumb{border-radius:9999px}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]){min-height:calc(( 1rem + 2px ) * 1.25)}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}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::-ms-thumb{margin-top:0}input[type=range].slider::-webkit-slider-thumb{margin-top:-0.25rem}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]){min-height:calc(( 0.75rem + 2px ) * 1.25)}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}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::-ms-thumb{margin-top:0}input[type=range].slider.is-small::-webkit-slider-thumb{margin-top:-0.1875rem}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]){min-height:calc(( 1.25rem + 2px ) * 1.25)}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}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::-ms-thumb{margin-top:0}input[type=range].slider.is-medium::-webkit-slider-thumb{margin-top:-0.3125rem}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]){min-height:calc(( 1.5rem + 2px ) * 1.25)}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}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::-ms-thumb{margin-top:0}input[type=range].slider.is-large::-webkit-slider-thumb{margin-top:-0.375rem}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:hsl(0, 0%, 100%) !important}input[type=range].slider.is-white::-webkit-slider-runnable-track{background:hsl(0, 0%, 100%) !important}input[type=range].slider.is-white::-ms-track{background:hsl(0, 0%, 100%) !important}input[type=range].slider.is-white::-ms-fill-lower{background:hsl(0, 0%, 100%)}input[type=range].slider.is-white::-ms-fill-upper{background:hsl(0, 0%, 100%)}input[type=range].slider.is-white.has-output+output,input[type=range].slider.is-white .has-output-tooltip+output{background-color:hsl(0, 0%, 100%);color:hsl(0, 0%, 4%)}input[type=range].slider.is-black::-moz-range-track{background:hsl(0, 0%, 4%) !important}input[type=range].slider.is-black::-webkit-slider-runnable-track{background:hsl(0, 0%, 4%) !important}input[type=range].slider.is-black::-ms-track{background:hsl(0, 0%, 4%) !important}input[type=range].slider.is-black::-ms-fill-lower{background:hsl(0, 0%, 4%)}input[type=range].slider.is-black::-ms-fill-upper{background:hsl(0, 0%, 4%)}input[type=range].slider.is-black.has-output+output,input[type=range].slider.is-black .has-output-tooltip+output{background-color:hsl(0, 0%, 4%);color:hsl(0, 0%, 100%)}input[type=range].slider.is-light::-moz-range-track{background:hsl(0, 0%, 96%) !important}input[type=range].slider.is-light::-webkit-slider-runnable-track{background:hsl(0, 0%, 96%) !important}input[type=range].slider.is-light::-ms-track{background:hsl(0, 0%, 96%) !important}input[type=range].slider.is-light::-ms-fill-lower{background:hsl(0, 0%, 96%)}input[type=range].slider.is-light::-ms-fill-upper{background:hsl(0, 0%, 96%)}input[type=range].slider.is-light.has-output+output,input[type=range].slider.is-light .has-output-tooltip+output{background-color:hsl(0, 0%, 96%);color:rgba(0, 0, 0, 0.7)}input[type=range].slider.is-dark::-moz-range-track{background:hsl(0, 0%, 21%) !important}input[type=range].slider.is-dark::-webkit-slider-runnable-track{background:hsl(0, 0%, 21%) !important}input[type=range].slider.is-dark::-ms-track{background:hsl(0, 0%, 21%) !important}input[type=range].slider.is-dark::-ms-fill-lower{background:hsl(0, 0%, 21%)}input[type=range].slider.is-dark::-ms-fill-upper{background:hsl(0, 0%, 21%)}input[type=range].slider.is-dark.has-output+output,input[type=range].slider.is-dark .has-output-tooltip+output{background-color:hsl(0, 0%, 21%);color:#fff}input[type=range].slider.is-primary::-moz-range-track{background:#5851ff !important}input[type=range].slider.is-primary::-webkit-slider-runnable-track{background:#5851ff !important}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::-ms-fill-upper{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:#5851ff !important}input[type=range].slider.is-link::-webkit-slider-runnable-track{background:#5851ff !important}input[type=range].slider.is-link::-ms-track{background:#5851ff !important}input[type=range].slider.is-link::-ms-fill-lower{background:#5851ff}input[type=range].slider.is-link::-ms-fill-upper{background:#5851ff}input[type=range].slider.is-link.has-output+output,input[type=range].slider.is-link .has-output-tooltip+output{background-color:#5851ff;color:#fff}input[type=range].slider.is-info::-moz-range-track{background:hsl(207, 61%, 53%) !important}input[type=range].slider.is-info::-webkit-slider-runnable-track{background:hsl(207, 61%, 53%) !important}input[type=range].slider.is-info::-ms-track{background:hsl(207, 61%, 53%) !important}input[type=range].slider.is-info::-ms-fill-lower{background:hsl(207, 61%, 53%)}input[type=range].slider.is-info::-ms-fill-upper{background:hsl(207, 61%, 53%)}input[type=range].slider.is-info.has-output+output,input[type=range].slider.is-info .has-output-tooltip+output{background-color:hsl(207, 61%, 53%);color:#fff}input[type=range].slider.is-success::-moz-range-track{background:hsl(153, 53%, 53%) !important}input[type=range].slider.is-success::-webkit-slider-runnable-track{background:hsl(153, 53%, 53%) !important}input[type=range].slider.is-success::-ms-track{background:hsl(153, 53%, 53%) !important}input[type=range].slider.is-success::-ms-fill-lower{background:hsl(153, 53%, 53%)}input[type=range].slider.is-success::-ms-fill-upper{background:hsl(153, 53%, 53%)}input[type=range].slider.is-success.has-output+output,input[type=range].slider.is-success .has-output-tooltip+output{background-color:hsl(153, 53%, 53%);color:#fff}input[type=range].slider.is-warning::-moz-range-track{background:hsl(44, 100%, 77%) !important}input[type=range].slider.is-warning::-webkit-slider-runnable-track{background:hsl(44, 100%, 77%) !important}input[type=range].slider.is-warning::-ms-track{background:hsl(44, 100%, 77%) !important}input[type=range].slider.is-warning::-ms-fill-lower{background:hsl(44, 100%, 77%)}input[type=range].slider.is-warning::-ms-fill-upper{background:hsl(44, 100%, 77%)}input[type=range].slider.is-warning.has-output+output,input[type=range].slider.is-warning .has-output-tooltip+output{background-color:hsl(44, 100%, 77%);color:rgba(0, 0, 0, 0.7)}input[type=range].slider.is-danger::-moz-range-track{background:hsl(348, 86%, 61%) !important}input[type=range].slider.is-danger::-webkit-slider-runnable-track{background:hsl(348, 86%, 61%) !important}input[type=range].slider.is-danger::-ms-track{background:hsl(348, 86%, 61%) !important}input[type=range].slider.is-danger::-ms-fill-lower{background:hsl(348, 86%, 61%)}input[type=range].slider.is-danger::-ms-fill-upper{background:hsl(348, 86%, 61%)}input[type=range].slider.is-danger.has-output+output,input[type=range].slider.is-danger .has-output-tooltip+output{background-color:hsl(348, 86%, 61%);color:#fff}";
const BmSliderStyle0 = sliderCss;
const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.handleInputChange = (event) => {
this.value = event.target.value;
};
this.step = 1;
this.min = 0;
this.max = 100;
this.value = undefined;
this.color = undefined;
this.size = undefined;
this.isCircle = false;
this.disabled = false;
}
render() {
return (h(Host, { key: 'fbb58b21d30ac50d8797e9fe74cd6c7049af33d0' }, h("input", { key: '9fb93f331a5817c94c267f96b672a485fcafc055', type: "range", onChange: this.handleInputChange, class: {
slider: true,
'is-fullwidth': true,
[this.color]: Boolean(this.color),
[this.size]: Boolean(this.size),
'is-circle': this.isCircle,
}, step: this.step, min: this.min, max: this.max, value: this.value, disabled: this.disabled })));
}
static get style() { return BmSliderStyle0; }
}, [0, "bm-slider", {
"step": [2],
"min": [2],
"max": [2],
"value": [514],
"color": [1],
"size": [1],
"isCircle": [4, "is-circle"],
"disabled": [4]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["bm-slider"];
components.forEach(tagName => { switch (tagName) {
case "bm-slider":
if (!customElements.get(tagName)) {
customElements.define(tagName, Slider);
}
break;
} });
}
const BmSlider = Slider;
const defineCustomElement = defineCustomElement$1;
export { BmSlider, defineCustomElement };