@kelvininc/ui-components
Version:
Kelvin UI Components
318 lines (317 loc) • 11.9 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: '6974ea74e9e481a674eda167059081016998cc0b' }, h("div", { key: '5754c5ad741ab693e80286977c3a8733d67d3adf', class: { 'range-container': true, 'has-label': !this.hideLabel } }, 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 && (h("span", { key: '42e2e49b642f0c3bdeb9d36849527ddd161a325e', id: "select-value", class: { 'select-value': true, 'disabled': this.disabled } }, this.valueFormatter(this.value))), !this.hideMinMaxLabel && (h("div", { key: '45978f30eadc7a8e59d80edc6acbff63259d7a06', class: "range-min-max" }, h("span", { key: '2c138cc6f4f981e734228af2a60de8a32b255bb7' }, this.displayMinLabel), h("span", { key: '618283106e2653ae33196196f30c503523252123' }, this.displayMaxLabel))))));
}
static get is() { return "kv-range"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["range.scss"]
};
}
static get styleUrls() {
return {
"$": ["range.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"; }
}