@kelvininc/ui-components
Version:
Kelvin UI Components
81 lines (75 loc) • 6.26 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var identity = require('./identity-Dz5mxHaJ.js');
require('./wizard.types-C9Yhv1tt.js');
const getInputPercentageFromValue = (inputValue, min, max) => {
return (100 * (inputValue - min)) / (max - min);
};
const getInputOffset = (percentage) => {
const offSet = -0.25;
const halfDistance = percentage - 50;
return halfDistance * offSet;
};
const getValueOffset = (percentage, value) => {
const valueLength = value.toString().length;
const offSet = -0.15 * valueLength;
const halfDistance = percentage - 50;
return halfDistance * offSet;
};
const rangeCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--range-width:100%;--range-height:10px;--range-selector-radius:20px;--select-label-disabled-color:var(--text-surface-neutral-tertiary);--slider-background-filled-disabled:var(--text-surface-neutral-tertiary);--slider-background-filled:var(--background-surface-brand-default);--slider-background-empty:var(--background-surface-neutral-strong);--thumb-border-color:var(--border-surface-slider-value-default);--range-label-color:var(--text-surface-neutral-tertiary);--select-label-color:var(--text-surface-neutral-primary)}.range-container{width:var(--range-width);margin-top:var(--range-margin-top, calc(var(--range-selector-radius) * 0.5));position:relative}.range-container.has-label{margin-top:49px}.range-min-max{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;width:100%;display:flex;justify-content:space-between;margin-top:var(--spacing-xs);user-select:none;color:var(--range-label-color)}.slider{width:calc(var(--range-width) - 2px);height:var(--range-height);outline:none;margin:0;border-radius:6px;user-select:none;background:var(--slider-background-empty);border:1px solid var(--slider-background-empty)}.slider::-webkit-slider-thumb{border:var(--range-selector-border-radius, calc(var(--spacing-xs) - 1px)) solid var(--thumb-border-color);background:var(--thumb-background-color, var(--slider-background-filled));height:calc(var(--range-selector-radius) + 5px);width:calc(var(--range-selector-radius) + 5px);border-radius:50%;cursor:pointer;appearance:none}.slider::-moz-range-thumb{border:var(--range-selector-border-radius, var(--spacing-xs)) solid var(--thumb-border-color);background:var(--thumb-background-color, var(--slider-background-filled));height:var(--range-selector-radius);width:var(--range-selector-radius);border-radius:50%;cursor:pointer;appearance:none}.slider:disabled::-webkit-slider-thumb{cursor:not-allowed;user-select:none;background:var(--slider-background-filled-disabled)}.select-value{font-family:Proxima Nova;font-weight:600;font-size:24px;line-height:32px;letter-spacing:0;top:-49px;transform:translateX(-50%);position:absolute;background-color:transparent;text-align:center;color:var(--select-label-color)}.select-value.disabled{color:var(--select-label-disabled-color)}input{appearance:none}";
const KvRange = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.valueChange = index.createEvent(this, "valueChange", 7);
/** @inheritdoc */
this.value = 0;
/** @inheritdoc */
this.step = 1;
/** @inheritdoc */
this.hideLabel = false;
/** @inheritdoc */
this.hideMinMaxLabel = false;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.valueFormatter = identity.identity;
this.getRangeElement = () => {
return this.el.shadowRoot.querySelector('input');
};
this.getInputValue = (element) => {
return parseInt(element.value);
};
this.applyCssStyles = () => {
const rangeInputValue = this.getRangeElement();
const inputValue = this.getInputValue(rangeInputValue);
const percentage = getInputPercentageFromValue(inputValue, this.min, this.max);
const inputOffSet = getInputOffset(percentage);
if (!this.hideLabel) {
const selector = this.el.shadowRoot.getElementById('select-value');
const valueOffset = getValueOffset(percentage, inputValue);
selector.style.left = percentage + '%';
selector.style.marginLeft = valueOffset + 'px';
}
rangeInputValue.style.background = `linear-gradient(90deg, var(--slider-background-filled${this.disabled ? '-disabled' : ''}) calc(${percentage}% + ${inputOffSet}px), var(--slider-background-empty) calc(${percentage}% + ${inputOffSet}px))`;
};
this.onInputChange = () => {
const inputValue = this.getInputValue(this.getRangeElement());
this.valueChange.emit(inputValue);
};
}
componentDidRender() {
this.applyCssStyles();
}
get displayMinLabel() {
return this.minLabel || `${this.min}`;
}
get displayMaxLabel() {
return this.maxLabel || `${this.max}`;
}
render() {
return (index.h(index.Host, { key: '6974ea74e9e481a674eda167059081016998cc0b' }, index.h("div", { key: '5754c5ad741ab693e80286977c3a8733d67d3adf', class: { 'range-container': true, 'has-label': !this.hideLabel } }, index.h("input", { key: '8982a2e9bcd47a3b4e5b856e0a6b9126f04588b0', id: "slider", class: "slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.onInputChange }), !this.hideLabel && (index.h("span", { key: '42e2e49b642f0c3bdeb9d36849527ddd161a325e', id: "select-value", class: { 'select-value': true, 'disabled': this.disabled } }, this.valueFormatter(this.value))), !this.hideMinMaxLabel && (index.h("div", { key: '45978f30eadc7a8e59d80edc6acbff63259d7a06', class: "range-min-max" }, index.h("span", { key: '2c138cc6f4f981e734228af2a60de8a32b255bb7' }, this.displayMinLabel), index.h("span", { key: '618283106e2653ae33196196f30c503523252123' }, this.displayMaxLabel))))));
}
get el() { return index.getElement(this); }
};
KvRange.style = rangeCss;
exports.kv_range = KvRange;