@kelvininc/ui-components
Version:
Kelvin UI Components
85 lines (78 loc) • 9.23 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var identity = require('./identity-Dz5mxHaJ.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 rangeLightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--range-width:100%;--range-height:10px;--range-selector-radius:20px;--select-label-disabled-color:var(--kv-neutral-5, #707070);--slider-background-filled-disabled:var(--kv-neutral-5, #707070)}.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:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;width:100%;display:flex;justify-content:space-between;margin-top:var(--kv-spacing, 4px);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(--kv-spacing, 4px) - 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(--kv-spacing, 4px)) 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:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:24px;font-weight:600;font-stretch:normal;font-style:normal;line-height:36px;letter-spacing:normal;text-transform:none;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}:host{--slider-background-filled:var(--kv-primary, #005cc7);--slider-background-empty:var(--kv-neutral-3, #ddd);--thumb-border-color:var(--kv-primary, #005cc7);--range-label-color:var(--kv-neutral-5, #707070);--select-label-color:var(--kv-neutral-5, #707070)}";
const rangeNightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--range-width:100%;--range-height:10px;--range-selector-radius:20px;--select-label-disabled-color:var(--kv-neutral-5, #707070);--slider-background-filled-disabled:var(--kv-neutral-5, #707070)}.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:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;width:100%;display:flex;justify-content:space-between;margin-top:var(--kv-spacing, 4px);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(--kv-spacing, 4px) - 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(--kv-spacing, 4px)) 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:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:24px;font-weight:600;font-stretch:normal;font-style:normal;line-height:36px;letter-spacing:normal;text-transform:none;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}:host{--slider-background-filled:var(--kv-primary, #005cc7);--slider-background-empty:var(--kv-neutral-9, #121212);--thumb-border-color:var(--kv-neutral-0, #fff);--range-label-color:var(--kv-neutral-5, #707070);--select-label-color:var(--kv-neutral-0, #fff)}";
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: 'bc0270d759fec0324e408081965ab658fab0ab73' }, index.h("div", { key: '7524c05857b0e8b456ad797f8d3f878887680096', class: { 'range-container': true, 'has-label': !this.hideLabel } }, index.h("input", { key: '6d78bd3ed813bac35a6086fa55072bd3a24d499f', 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: 'e4f3273684e78271c60dcff43aa0e96d85121b74', id: "select-value", class: { 'select-value': true, 'disabled': this.disabled } }, this.valueFormatter(this.value))), !this.hideMinMaxLabel && (index.h("div", { key: '222f780e29132c7b57fb8901c254821c9e914fd3', class: "range-min-max" }, index.h("span", { key: '15e094128b3e2e4969035c892f59375d9c50726b' }, this.displayMinLabel), index.h("span", { key: 'b24c47eb3f92805c79f0c276cea634f061745c31' }, this.displayMaxLabel))))));
}
get el() { return index.getElement(this); }
};
KvRange.style = {
light: rangeLightCss,
night: rangeNightCss
};
exports.kv_range = KvRange;