@postnord/web-components
Version:
PostNord Web Components
906 lines (905 loc) • 36.5 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { uuidv4 } from "../../../globals/helpers";
import { Fragment, Host, forceUpdate, h, } from "@stencil/core";
/**
* Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and
* has support for most attributes.
*
* @slot helpertext - Set the helpertext via a slot instead of prop. Wrap the content like this: `<span slot="helpertext">`.
* @slot error - Set the error message via a slot instead of prop. Wrap the content like this: `<span slot="error">`.
*
* @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value.
* @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input).
*
* @since v7.20.0
*/
export class PnRange {
id = `pn-range-${uuidv4()}`;
idEnd = `${this.id}-end`;
idInput = `${this.id}-input`;
idInputEnd = `${this.idEnd}-input`;
idInputHidden = `${this.id}-hidden`;
idHelpertext = `${this.id}-helpertext`;
idError = `${this.id}-error`;
idDatalist = `${this.id}-data`;
mo;
rangeTimeout;
tooltipDefault = '{value}';
hostElement;
showHelperSlot = false;
showErrorSlot = false;
/** If true, remove transition times. */
isPressing = false;
/** When using `multiple`, decide which control is being pressed. */
pressControl = null;
/** Label for the range input. */
label;
/** Label for the range end input. */
labelEnd;
/** Set a helpertext for the range input. */
helpertext = null;
/**
* Add markers. This will also render a `datalist` element with `options`.
* Omitting the `label` for a marker will use the `value` as label instead.
* Set `label` to `null` or `''` to hide it completely.
*/
markers = [];
/** Set a prefix for the range/input field. */
textPrefix = null;
/** Set a suffix for the range/input field. */
textSuffix = null;
/** Set an icon for the range/input field. */
icon = null;
/** Set an icon at the end of the range or for the second input field when using `multiple`. */
iconEnd = null;
/** Set a custom HTML id. */
pnId = this.id;
/** Set a custom HTML id. */
pnIdEnd = this.idEnd;
/** The range input name. @category HTML Attributes */
name;
/** The range input name. @category HTML Attributes */
nameEnd;
/** The range input min value. @category HTML Attributes */
min = 0;
/** The range input max value. @category HTML Attributes */
max = 100;
/** The range input value. @category HTML Attributes */
value = 0;
/** The range end input value. @category HTML Attributes */
valueEnd = 0;
/** Set a step value for the range input. @category HTML Attributes */
step = '';
/**
* Allow multiple values to be selected
* @category Features
*/
multiple = false;
/**
* Display an input for the range value.
* Allowing the user to type or use the slider to set the value.
* @category Features
*/
input = false;
/** Hide the tooltip. @category Features */
tooltipHide = false;
/**
* Range tooltip label template. Default is simply the value of the range input.
* @example
* // Show a suffixed '%' in the tooltip with '{value} %'.
* <pn-range tooltip-template="{value} %" value="25" />
* @category Features
*/
tooltipTemplate = this.tooltipDefault;
/** Disable the range input. @category State */
disabled = false;
/** Set an error message for the range input. @category State */
error = null;
/** Set the error visual for the range input, same as `error`, but without a message. @category State */
invalid = false;
handleValue() {
if (this.multiple && this.value > this.valueEnd) {
this.valueEnd = this.value;
}
const percentage = this.calcPercentage(this.value);
requestAnimationFrame(() => this.hostElement.style.setProperty('--pn-range-progress', `${percentage}%`));
}
handleValueEnd() {
if (!this.multiple)
return;
if (this.value > this.valueEnd) {
this.value = this.valueEnd;
}
const percentage = this.calcPercentage(this.valueEnd);
requestAnimationFrame(() => this.hostElement.style.setProperty('--pn-range-progress-end', `${percentage}%`));
}
handleId() {
this.idHelpertext = `${this.pnId}-helpertext`;
this.idError = `${this.pnId}-error`;
this.idDatalist = `${this.pnId}-data`;
}
handleMessage() {
this.checkSlottedHelper();
this.checkSlottedError();
}
handleMultiple() {
this.isPressing = true;
requestAnimationFrame(() => (this.isPressing = false));
}
/** Emitted as the user makes any changes to the range/input value. */
rangeSelected;
connectedCallback() {
this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
this.mo.observe(this.hostElement, { childList: true, subtree: true });
}
disconnectedCallback() {
if (this.mo)
this.mo.disconnect();
}
tooltipDirection(isEnd = false) {
if (this.multiple) {
const isSmall = this.hostElement.offsetWidth < 384;
const percentageStart = this.calcPercentage(this.value);
const percentageEnd = this.calcPercentage(this.valueEnd);
const isClose = Math.abs(percentageEnd - percentageStart) < (isSmall ? 30 : 20);
if (isClose)
return isEnd ? 'left' : 'right';
if (!isEnd && this.value <= this.min + (this.max - this.min) * (isSmall ? 0.3 : 0.2))
return 'left';
if (isEnd && this.valueEnd > this.max * (isSmall ? 0.75 : 0.8))
return 'right';
}
return 'center';
}
isActiveMarker(value) {
const isActive = this.value === value;
if (this.multiple)
return isActive || this.valueEnd === value;
return isActive;
}
hasHelperText() {
return this.helpertext?.length > 0 || this.showHelperSlot;
}
/** If any `error` text is present, either via prop/slot. */
hasErrorMessage() {
return this.error?.length > 0 || this.showErrorSlot;
}
/** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
hasError() {
return this.hasErrorMessage() || this.invalid || this.showErrorSlot;
}
checkSlottedHelper() {
const slottedHelper = this.hostElement.querySelector('[slot=helpertext]')?.textContent;
this.showHelperSlot = !!slottedHelper?.length;
}
checkSlottedError() {
const slottedError = this.hostElement.querySelector('[slot=error]')?.textContent;
this.showErrorSlot = !!slottedError?.length;
}
calcPercentage(value) {
return ((value - this.min) / (this.max - this.min)) * 100;
}
setValue(value, isEnd = false) {
const isWithinMinMax = value >= this.min && value <= this.max;
if (!isWithinMinMax)
return;
if (isEnd)
this.valueEnd = value;
else
this.value = value;
const range = Number((this.valueEnd - this.value).toPrecision(4));
const percentageStart = this.calcPercentage(this.value);
const percentageEnd = this.calcPercentage(this.valueEnd);
const percentage = Number((this.multiple ? percentageEnd - percentageStart : percentageStart).toPrecision(4));
const rangeDetail = this.multiple
? {
valueEnd: this.valueEnd,
difference: range,
}
: {};
this.rangeSelected.emit({
value: this.value,
percentage,
...rangeDetail,
});
}
getTooltipLabel(isEnd = false) {
return this.tooltipTemplate?.replace(this.tooltipDefault, (isEnd ? this.valueEnd : this.value)?.toString());
}
getMarkerLabel({ value, label }) {
if (label === null || label === '')
return '';
return (label || value).toString();
}
ariaDescribedby() {
const list = [];
if (this.hasErrorMessage())
list.push(this.idError);
else if (this.hasHelperText())
list.push(this.idHelpertext);
return list.length ? list.join(' ') : null;
}
handleChange(event) {
const target = event.target;
const { id, valueAsNumber, type } = target;
const numberValue = isNaN(valueAsNumber) ? 0 : valueAsNumber;
const isEnd = type === 'range' ? id === this.pnIdEnd : id === this.idInputEnd;
this.setValue(numberValue, isEnd);
}
setListeners(isOverlay = false) {
const inputEvent = (event) => (isOverlay ? this.handleOverlayInput(event) : this.handleChange(event));
return {
onInput: inputEvent,
onTouchStart: (e) => this.handlePress(e),
onTouchEnd: () => this.handleRelease(),
onMouseDown: (e) => this.handlePress(e),
onMouseUp: () => this.handleRelease(),
};
}
handlePress(event) {
this.rangeTimeout = setTimeout(() => {
this.isPressing = true;
}, event.type === 'touchstart' ? 200 : 100);
}
handleRelease() {
clearTimeout(this.rangeTimeout);
this.isPressing = false;
this.pressControl = null;
}
commonAttrs() {
return {
step: this.step,
min: this.min,
max: this.max,
list: this.markers?.length ? this.idDatalist : null,
disabled: this.disabled,
};
}
renderPrefix() {
if (this.input)
return this.renderNumberInput();
if (this.icon)
return h("pn-icon", { class: "pn-range-icon", icon: this.icon });
if (this.textPrefix && !this.input)
return h("span", { class: "pn-range-text" }, this.textPrefix);
return null;
}
renderSuffix() {
if (this.input && this.multiple)
return this.renderNumberInput(true);
if (this.iconEnd)
return h("pn-icon", { class: "pn-range-icon", icon: this.iconEnd });
if (this.textSuffix && !this.input)
return h("span", { class: "pn-range-text" }, this.textSuffix);
return null;
}
renderNumberInput(isEnd = false) {
const label = isEnd ? this.labelEnd : this.label;
const value = isEnd ? this.valueEnd : this.value;
const idInput = isEnd ? this.idInputEnd : this.idInput;
return (h("pn-input", { class: "pn-range-field", label: label, type: "number", name: `${isEnd ? this.nameEnd : this.name}-input`, ...this.commonAttrs(), icon: isEnd ? this.iconEnd : this.icon, textPrefix: this.textPrefix, textSuffix: this.textSuffix, value: value?.toString(), inputid: idInput, invalid: this.hasError(), "data-single": !this.multiple, ...this.setListeners() }));
}
renderRangeInput(isEnd = false) {
const id = isEnd ? this.pnIdEnd : this.pnId;
const value = isEnd ? this.valueEnd : this.value;
const customTooltip = this.tooltipDefault !== this.tooltipTemplate;
return (h("input", { id: id, class: "pn-range-input", type: "range", name: isEnd ? this.nameEnd : this.name, ...this.commonAttrs(), value: value, "aria-valuetext": customTooltip ? this.getTooltipLabel(isEnd) : null, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError().toString(), "data-start": isEnd ? null : true, "data-end": isEnd ? true : null, ...this.setListeners() }));
}
renderTooltip(isEnd = false) {
return (h("div", { class: "pn-range-thumb", "data-start": isEnd ? null : true, "data-end": isEnd ? true : null, "data-align": this.tooltipDirection(isEnd), "aria-hidden": "true" }, !this.tooltipHide && (h("div", { class: "pn-range-tooltip" }, h("span", { class: "pn-range-tooltip-label" }, this.getTooltipLabel(isEnd))))));
}
handleOverlayInput(event) {
const target = event.target;
const { valueAsNumber } = target;
const numberValue = isNaN(valueAsNumber) ? 0 : valueAsNumber;
if (!this.pressControl) {
this.pressControl = Math.abs(numberValue - this.value) <= Math.abs(numberValue - this.valueEnd) ? 'start' : 'end';
}
this.setValue(numberValue, this.pressControl === 'end');
}
render() {
return (h(Host, { key: '0a79e6606d509d701b83da4a2c3d3636c7d73979' }, h("div", { key: 'f56834025691e3c67544e4ddb2b54630bfa46095', class: "pn-range", "data-markers": !!this.markers?.length, "data-input": this.input }, h("div", { key: 'e39b5994468fc6f50ad479c5b3875732a29a4761', class: "pn-range-header", "data-input": this.input }, h("label", { key: '724a16a534343838e392480163517afc7bd15b6f', htmlFor: this.pnId, class: "pn-range-label" }, h("span", { key: 'ebd27275aeb63e79df5f2f0f5f4d1f5d118cd137' }, this.label)), this.multiple && (h("label", { key: 'aebe4d8b124cc5a905b61624566dc4db52f1f4a0', htmlFor: this.pnIdEnd, class: "pn-range-label" }, h("span", { key: '7a90745fadc39d81bac3083d562c9d7fe47c1d00' }, this.labelEnd)))), this.renderPrefix(), h("div", { key: '28fcae728841f246bfac7ae488710459d468e4f2', class: "pn-range-group", "data-pressing": this.isPressing }, this.renderRangeInput(), this.multiple && (h(Fragment, { key: '87dae83eea2f5e4eb5318759767dfabc74a0f128' }, this.renderRangeInput(true), h("input", { key: 'aa461034dfe94c78310409f87c1efaa0a4fb0a4d', id: this.idInputHidden, type: "range", class: "pn-range-overlay-input", ...this.commonAttrs(), "aria-invalid": this.hasError().toString(), hidden: true, tabIndex: -1, ...this.setListeners(true) }))), h("div", { key: '3282ce9652ff135db9e5bfa533af1c7fd1d29adb', class: "pn-range-track", "data-multiple": this.multiple, "aria-hidden": "true" }), this.renderTooltip(), this.multiple && this.renderTooltip(true), !!this.markers?.length && (h("ul", { key: '1692843e137439b5bdedb5728104a3312d26ffc2', "aria-hidden": "true", class: "pn-range-markers" }, this.markers.map(({ label, value }) => (h("li", { class: "pn-range-markers-item", "data-min": this.calcPercentage(value) === this.min, "data-max": this.calcPercentage(value) === this.max, style: { '--pn-range-marker-position': `${this.calcPercentage(value)}%` } }, h("span", { class: "pn-range-markers-label", "data-active": this.isActiveMarker(value) }, this.getMarkerLabel({ value, label })))))))), this.renderSuffix(), !!this.markers?.length && (h("datalist", { key: 'ed0ea3e4e284366f3e4eaf94245a1a71ccf20a17', id: this.idDatalist }, this.markers.map(({ label, value }) => (h("option", { value: value, label: label === null ? null : label }))))), h("p", { key: '3dd6afe5a2f142b1df60fdd87c0c23f942d83a71', id: this.idHelpertext, class: "pn-range-message", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: '048797709bcb778a9c1f2d71ae1ee1b1eef665f0' }, this.helpertext), h("slot", { key: '2fabbbc425b643917415653f831126e9d7319efd', name: "helpertext" })), h("p", { key: '65061b23a86338d7490bbfc2759308c1326f5d4e', id: this.idError, class: "pn-range-message pn-range-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: 'a0be85a1e70ac6b07bb1447b6c8e9a04c72aade0' }, this.error), h("slot", { key: 'c13f70e99ec137373be96fa9d5a06b0266808fcf', name: "error" })))));
}
static get is() { return "pn-range"; }
static get originalStyleUrls() {
return {
"$": ["pn-range.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-range.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Label for the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"labelEnd": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label for the range end input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label-end"
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a helpertext for the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "helpertext",
"defaultValue": "null"
},
"markers": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{ value: number; label?: string }[]",
"resolved": "{ value: number; label?: string; }[]",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Add markers. This will also render a `datalist` element with `options`.\nOmitting the `label` for a marker will use the `value` as label instead.\nSet `label` to `null` or `''` to hide it completely."
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"textPrefix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a prefix for the range/input field."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "text-prefix",
"defaultValue": "null"
},
"textSuffix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a suffix for the range/input field."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "text-suffix",
"defaultValue": "null"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set an icon for the range/input field."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon",
"defaultValue": "null"
},
"iconEnd": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set an icon at the end of the range or for the second input field when using `multiple`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon-end",
"defaultValue": "null"
},
"pnId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a custom HTML id."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id",
"defaultValue": "this.id"
},
"pnIdEnd": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a custom HTML id."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id-end",
"defaultValue": "this.idEnd"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Attributes"
}],
"text": "The range input name."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"nameEnd": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Attributes"
}],
"text": "The range input name."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name-end"
},
"min": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Attributes"
}],
"text": "The range input min value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "min",
"defaultValue": "0"
},
"max": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Attributes"
}],
"text": "The range input max value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "max",
"defaultValue": "100"
},
"value": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Attributes"
}],
"text": "The range input value."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value",
"defaultValue": "0"
},
"valueEnd": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Attributes"
}],
"text": "The range end input value."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value-end",
"defaultValue": "0"
},
"step": {
"type": "string",
"mutable": false,
"complexType": {
"original": "HTMLInputElement['step']",
"resolved": "string",
"references": {
"HTMLInputElement": {
"location": "global",
"id": "global::HTMLInputElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Attributes"
}],
"text": "Set a step value for the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "step",
"defaultValue": "''"
},
"multiple": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Allow multiple values to be selected"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "multiple",
"defaultValue": "false"
},
"input": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Display an input for the range value.\nAllowing the user to type or use the slider to set the value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "input",
"defaultValue": "false"
},
"tooltipHide": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Hide the tooltip."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tooltip-hide",
"defaultValue": "false"
},
"tooltipTemplate": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "example",
"text": "// Show a suffixed '%' in the tooltip with '{value} %'.\n<pn-range tooltip-template=\"{value} %\" value=\"25\" />"
}, {
"name": "category",
"text": "Features"
}],
"text": "Range tooltip label template. Default is simply the value of the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tooltip-template",
"defaultValue": "this.tooltipDefault"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Disable the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"error": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set an error message for the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "error",
"defaultValue": "null"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the error visual for the range input, same as `error`, but without a message."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "invalid",
"defaultValue": "false"
}
};
}
static get states() {
return {
"showHelperSlot": {},
"showErrorSlot": {},
"isPressing": {},
"pressControl": {}
};
}
static get events() {
return [{
"method": "rangeSelected",
"name": "rangeSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted as the user makes any changes to the range/input value."
},
"complexType": {
"original": "{\n value: number;\n /* The end value when using `multiple`. */\n valueEnd?: number;\n /* The selected percentage of the range input. */\n percentage: number;\n /* The difference between `value` and `valueEnd`. */\n difference?: number;\n }",
"resolved": "{ value: number; valueEnd?: number; percentage: number; difference?: number; }",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "handleValue",
"handlerOptions": {
"immediate": true
}
}, {
"propName": "valueEnd",
"methodName": "handleValueEnd",
"handlerOptions": {
"immediate": true
}
}, {
"propName": "pnId",
"methodName": "handleId",
"handlerOptions": {
"immediate": true
}
}, {
"propName": "helpertext",
"methodName": "handleMessage",
"handlerOptions": {
"immediate": true
}
}, {
"propName": "error",
"methodName": "handleMessage"
}, {
"propName": "multiple",
"methodName": "handleMultiple"
}];
}
}