@kelvininc/ui-components
Version:
Kelvin UI Components
113 lines (106 loc) • 10.2 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { i as identity } from './p-CK4jS9_E.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$1 = /*@__PURE__*/ proxyCustomElement(class KvRange extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.valueChange = 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;
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 (h(Host, { key: 'bc0270d759fec0324e408081965ab658fab0ab73' }, h("div", { key: '7524c05857b0e8b456ad797f8d3f878887680096', class: { 'range-container': true, 'has-label': !this.hideLabel } }, 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 && (h("span", { key: 'e4f3273684e78271c60dcff43aa0e96d85121b74', id: "select-value", class: { 'select-value': true, 'disabled': this.disabled } }, this.valueFormatter(this.value))), !this.hideMinMaxLabel && (h("div", { key: '222f780e29132c7b57fb8901c254821c9e914fd3', class: "range-min-max" }, h("span", { key: '15e094128b3e2e4969035c892f59375d9c50726b' }, this.displayMinLabel), h("span", { key: 'b24c47eb3f92805c79f0c276cea634f061745c31' }, this.displayMaxLabel))))));
}
get el() { return this; }
static get style() { return {
light: rangeLightCss,
night: rangeNightCss
}; }
}, [33, "kv-range", {
"min": [514],
"max": [514],
"value": [514],
"step": [514],
"hideLabel": [516, "hide-label"],
"minLabel": [513, "min-label"],
"maxLabel": [513, "max-label"],
"hideMinMaxLabel": [516, "hide-min-max-label"],
"disabled": [516],
"valueFormatter": [16, "value-formatter"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-range"];
components.forEach(tagName => { switch (tagName) {
case "kv-range":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvRange$1);
}
break;
} });
}
defineCustomElement$1();
const KvRange = KvRange$1;
const defineCustomElement = defineCustomElement$1;
export { KvRange, defineCustomElement };