@limetech/lime-elements
Version:
214 lines (209 loc) • 15.4 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-DBTJNfo7.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
/**
*
* @param value
*/
function getPercentageClass(value) {
const tenPercent = 0.1;
const twentyPercent = 0.2;
const thirtyPercent = 0.3;
const fortyPercent = 0.4;
const fiftyPercent = 0.5;
const sixtyPercent = 0.6;
const seventyPercent = 0.7;
const eightyPercent = 0.8;
const ninetyPercent = 0.9;
if (value === 0) {
return 'percent-0';
}
if (value < tenPercent) {
return 'percent-0-10';
}
if (value < twentyPercent) {
return 'percent-10-20';
}
if (value < thirtyPercent) {
return 'percent-20-30';
}
if (value < fortyPercent) {
return 'percent-30-40';
}
if (value < fiftyPercent) {
return 'percent-40-50';
}
if (value < sixtyPercent) {
return 'percent-50-60';
}
if (value < seventyPercent) {
return 'percent-60-70';
}
if (value < eightyPercent) {
return 'percent-70-80';
}
if (value < ninetyPercent) {
return 'percent-80-90';
}
return 'percent-90-100';
}
const sliderCss = () => ` "UTF-8";:host([displays-percentage-colors].percent-0){--lime-primary-color:var(--color-percent--0)}:host([displays-percentage-colors].percent-0-10){--lime-primary-color:var(--color-percent--0to10)}:host([displays-percentage-colors].percent-10-20){--lime-primary-color:var(--color-percent--10to20)}:host([displays-percentage-colors].percent-20-30){--lime-primary-color:var(--color-percent--20to30)}:host([displays-percentage-colors].percent-30-40){--lime-primary-color:var(--color-percent--30to40)}:host([displays-percentage-colors].percent-40-50){--lime-primary-color:var(--color-percent--40to50)}:host([displays-percentage-colors].percent-50-60){--lime-primary-color:var(--color-percent--50to60)}:host([displays-percentage-colors].percent-60-70){--lime-primary-color:var(--color-percent--60to70)}:host([displays-percentage-colors].percent-70-80){--lime-primary-color:var(--color-percent--70to80)}:host([displays-percentage-colors].percent-80-90){--lime-primary-color:var(--color-percent--80to90)}:host([displays-percentage-colors].percent-90-100){--lime-primary-color:var(--color-percent--90to100)}:host([displays-percentage-colors].percent-30-40) .indicator,:host([displays-percentage-colors].percent-40-50) .indicator,:host([displays-percentage-colors].percent-70-80) .indicator{color:rgb(var(--color-gray-darker))}:host([displays-percentage-colors].percent-50-60) .indicator,:host([displays-percentage-colors].percent-60-70) .indicator{color:rgb(var(--color-gray-dark))}:host([readonly]:not([readonly=false])) input[type=range]{cursor:default}:host([readonly]:not([readonly=false])) .track,:host([readonly]:not([readonly=false])) .active,:host([readonly]:not([readonly=false])) .indicator{height:0.75rem}:host([readonly]:not([readonly=false])) .indicator{box-shadow:none}:host([readonly]:not([readonly=false])) .knob{opacity:0}:host([readonly]:not([readonly=false])) .active{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.thumb{position:absolute;left:calc(var(--slider-fraction) * 100%);top:0;bottom:0;width:0;z-index:1}.knob{transition:border-color 0.5s ease;position:absolute;top:50%;left:0;transform:translate3d(-50%, -50%, 0);width:1.25rem;height:1.25rem;border-radius:50%;border:0.5rem solid;border-color:var(--lime-primary-color, var(--limel-theme-primary-color));background-color:rgb(var(--contrast-100))}.knob:before,.knob:after{transition:all 0.2s ease 0.2s;content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;width:0;height:0;border:0.375rem solid transparent}:host([disabled]:not([disabled=false])) .knob:before,:host([disabled]:not([disabled=false])) .knob:after{content:none}.knob:before{opacity:calc(var(--slider-fraction) * 100);left:-1rem;transform:rotate(90deg)}.knob:after{opacity:calc((1 - var(--slider-fraction)) * 100);right:-1rem;transform:rotate(-90deg)}.slider:hover .knob,.slider:has(input[type=range]:active) .knob,.slider:has(input[type=range]:focus) .knob{box-shadow:var(--button-shadow-normal)}.slider:hover .knob:before,.slider:has(input[type=range]:active) .knob:before,.slider:has(input[type=range]:focus) .knob:before{left:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.slider:hover .knob:after,.slider:has(input[type=range]:active) .knob:after,.slider:has(input[type=range]:focus) .knob:after{right:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.indicator{user-select:none;position:absolute;left:0;top:50%;z-index:1;transform:translate3d(-50%, -50%, 0);transform-origin:bottom center;transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.5s ease;border-radius:1.25rem;padding:0 0.375rem;height:1.25rem;display:flex;align-items:center;white-space:nowrap;color:rgb(var(--color-white));font-size:0.6875rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));box-shadow:var(--button-shadow-normal)}:host(:not([disabled]):not([readonly])) input[type=range]:active~.thumb .indicator,:host(:not([disabled]):not([readonly])) input[type=range]:focus~.thumb .indicator{transform:translate3d(-50%, calc(-100% - 0.75rem), 0) scale(1.25);box-shadow:var(--shadow-depth-16)}*,*:before,*:after{box-sizing:border-box;min-width:0;min-height:0}:host(limel-slider){box-sizing:border-box;isolation:isolate;position:relative;display:flex;flex-direction:column}:host(limel-slider:not([invalid]):not([invalid=true])) .limel-notched-outline,:host(limel-slider[disabled]:not([disabled=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}div[slot=content]{display:flex;flex-direction:column;width:100%;padding:0 0.25rem}.slider{position:relative;height:2.5rem;margin:0 0.75rem}input[type=range]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;margin:0;appearance:none}:host([disabled]:not([disabled=false])) input[type=range]{cursor:not-allowed}:host([disabled]:not([disabled=false])) .track .active{opacity:0.5}:host([disabled]:not([disabled=false])) .indicator{border-radius:0.125rem;box-shadow:var(--button-shadow-pressed)}.track{transition:background-color 0.5s ease;display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:0.5rem;border-radius:1rem;background-color:rgba(var(--contrast-700), 0.6)}.track:before,.track:after{content:"";display:inline-block;position:absolute;top:0;bottom:0;margin:auto;width:0.375rem;height:0.375rem;border-radius:50%;background-color:rgba(var(--contrast-700), 0.6)}.track:before{left:-0.75rem}.track:after{right:-0.75rem}.track .active{transition:background-color 0.5s ease;position:absolute;height:100%;width:calc(var(--slider-fraction) * 100%);border-radius:inherit;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.step-dot{transform:translateX(-50%);border-radius:50%;height:0.25rem;width:0.25rem;background-color:rgb(var(--contrast-100), 0.6)}.step-dot:first-of-type,.step-dot:last-of-type{opacity:0}.range-labels{display:flex;justify-content:space-between;margin-top:-0.75rem;width:100%}.range-labels .min,.range-labels .max{line-height:1;font-size:0.75rem;color:var(--limel-notched-outline-label-color, rgb(var(--contrast-1200)))}:host(limel-slider:focus),:host(limel-slider:focus-visible),:host(limel-slider:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-slider){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-slider:focus) limel-helper-line,:host(limel-slider:focus-visible) limel-helper-line,:host(limel-slider:focus-within) limel-helper-line,:host(limel-slider:hover) limel-helper-line{will-change:grid-template-rows}`;
const DEFAULT_FACTOR = 1;
const DEFAULT_MAX_VALUE = 100;
const DEFAULT_MIN_VALUE = 0;
const MAX_VISIBLE_STEP_DOTS = 20;
const Slider = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.change = createEvent(this, "change");
/**
* Disables the slider when `true`,
* and visually shows that the field is editable but disabled.
* This tells the users that if certain requirements are met,
* the slider may become interactable.
*/
this.disabled = false;
/**
* Disables the slider when `true`. This visualizes the slider slightly differently.
* But shows no visual sign indicating that the slider field
* is disabled or can ever become interactable.
*/
this.readonly = false;
/**
* Default value: 1.
* The factor that the properties `value`, `valuemax`, `valuemin`, and
* `step` are multiplied by. On `change` divides the value by the factor,
* so the original format stays the same.
*/
this.factor = DEFAULT_FACTOR;
/**
* Set to `true` to indicate that the slider is required.
*/
this.required = false;
/**
* Set to `true` to indicate that the current value of the slider is invalid.
*/
this.invalid = false;
/**
* Set to `true` to display percentage-based colors on the slider.
* The colors change in intervals of 10% as the value changes,
* creating a color spectrum from red (low) → orange → yellow → green → teal (high).
*/
this.displaysPercentageColors = false;
/**
* Unit to display next to the value
*/
this.unit = '';
/**
* The maximum value allowed
*/
this.valuemax = DEFAULT_MAX_VALUE;
/**
* The minimum value allowed
*/
this.valuemin = DEFAULT_MIN_VALUE;
this.renderStepDots = (min, max) => {
if (!this.step) {
return;
}
const step = this.multiplyByFactor(this.step);
const count = Math.floor((max - min) / step) + 1;
if (count > MAX_VISIBLE_STEP_DOTS) {
return;
}
return Array.from({ length: count }, () => h("span", { class: "step-dot" }));
};
this.renderHelperLine = () => {
if (!this.helperText) {
return;
}
return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
};
this.handleInput = (event) => {
event.stopPropagation();
const input = event.target;
const value = Number(input.value);
this.displayValue = value;
this.setPercentageClass(value / this.factor);
};
this.handleChange = (event) => {
event.stopPropagation();
const input = event.target;
let value = Number(input.value);
const step = this.multiplyByFactor(this.step);
if (!this.isMultipleOfStep(value, step)) {
value = this.roundToStep(value, step);
}
this.change.emit(value / this.factor);
};
this.getContainerClassList = () => {
if (!this.percentageClass) {
return {};
}
return {
[this.percentageClass]: true,
};
};
this.multiplyByFactor = (value) => {
return Math.round(value * this.factor);
};
this.getValue = () => {
let value = this.value;
if (!Number.isFinite(value)) {
value = this.valuemin;
}
return value;
};
this.getFraction = () => {
const min = this.multiplyByFactor(this.valuemin);
const max = this.multiplyByFactor(this.valuemax);
if (max === min) {
return 0;
}
return Math.max(0, Math.min(1, (this.displayValue - min) / (max - min)));
};
this.setPercentageClass = (value) => {
this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
};
this.isMultipleOfStep = (value, step) => {
if (!step) {
return true;
}
return value % step === 0;
};
this.roundToStep = (value, step) => {
return Math.round(value / step) * step;
};
this.labelId = createRandomString();
this.helperTextId = createRandomString();
}
componentWillLoad() {
this.displayValue = this.multiplyByFactor(this.getValue());
this.setPercentageClass(this.getValue());
}
render() {
const min = this.multiplyByFactor(this.valuemin);
const max = this.multiplyByFactor(this.valuemax);
const fraction = this.getFraction();
const inputProps = {};
if (this.step) {
inputProps.step = this.multiplyByFactor(this.step);
}
if (this.disabled || this.readonly) {
inputProps.disabled = true;
}
return (h(Host, { key: 'fa9695563f078bdab1707422cad3aaef2610e592', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '8b71ef15e9544a6b346248217c2c2fa8acbba6e7', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { key: '0327cf7d5295bb1d56e2e34b8dca15cfc3e15c0d', slot: "content" }, h("div", { key: '83fade77119ba9fa1d24ae8fdcd54317648918b3', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '5181430787abe75b4556923e31ebe8520df977e9', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
? this.helperTextId
: undefined, onInput: this.handleInput, onChange: this.handleChange }, inputProps)), h("div", { key: '6ee95d718f1d01e92adcf9592882ed1d32e4ba67', class: "track" }, h("div", { key: 'bba420e41501990bdeb1326e59e6eff57000848d', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '46e5a45adbda4e1a650d01408c3d228f1c6be68d', class: "thumb" }, h("div", { key: 'eeba995f52ff3291e2e7818528b05c7c1dec1b32', class: "knob" }), h("div", { key: 'd0321459ed22c6870d939da54df43fe2bfef6333', class: "indicator", "aria-hidden": "true" }, this.displayValue))), h("div", { key: 'bcc4449d7605343fd64f4b89b50c8e5d665f6937', class: "range-labels" }, h("span", { key: '301c78b1640551fe814ad3b2768bb40f9b682b39', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '7f8d741f63030b6f8e88231e5215448b815bf3ca', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderHelperLine()));
}
watchValue() {
this.displayValue = this.multiplyByFactor(this.getValue());
this.setPercentageClass(this.getValue());
}
static get watchers() { return {
"value": [{
"watchValue": 0
}]
}; }
};
Slider.style = sliderCss();
export { Slider as limel_slider };