@kelvininc/ui-components
Version:
Kelvin UI Components
320 lines (319 loc) • 12 kB
JavaScript
import { Host, h } from "@stencil/core";
import { getInputOffset, getInputPercentageFromValue, getValueOffset } from "./range.helper";
import { identity } from "lodash-es";
export class KvRange {
constructor() {
/** @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))))));
}
static get is() { return "kv-range"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"night": ["range.night.scss"],
"light": ["range.light.scss"]
};
}
static get styleUrls() {
return {
"night": ["range.night.css"],
"light": ["range.light.css"]
};
}
static get properties() {
return {
"min": {
"type": "number",
"attribute": "min",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Range minimum value"
},
"getter": false,
"setter": false,
"reflect": true
},
"max": {
"type": "number",
"attribute": "max",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Range maximum value"
},
"getter": false,
"setter": false,
"reflect": true
},
"value": {
"type": "number",
"attribute": "value",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Range value"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "0"
},
"step": {
"type": "number",
"attribute": "step",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Range value step"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "1"
},
"hideLabel": {
"type": "boolean",
"attribute": "hide-label",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Hide value label"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"minLabel": {
"type": "string",
"attribute": "min-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Min label"
},
"getter": false,
"setter": false,
"reflect": true
},
"maxLabel": {
"type": "string",
"attribute": "max-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Max label"
},
"getter": false,
"setter": false,
"reflect": true
},
"hideMinMaxLabel": {
"type": "boolean",
"attribute": "hide-min-max-label",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Hide min and max labels"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Range input disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"valueFormatter": {
"type": "unknown",
"attribute": "value-formatter",
"mutable": false,
"complexType": {
"original": "(value: number) => string",
"resolved": "(value: number) => string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Range value formatter"
},
"getter": false,
"setter": false,
"defaultValue": "identity"
}
};
}
static get events() {
return [{
"method": "valueChange",
"name": "valueChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the value changes"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}