@postnord/web-components
Version:
PostNord Web Components
1,072 lines (1,071 loc) • 43.3 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;
/** The range input value. @category Native attributes */
value = 0;
/** The range end input value. @category Native attributes */
valueEnd = 0;
/** The range input name. @category Native attributes */
name;
/** The range input name. @category Native attributes */
nameEnd;
/** The range input min value. @category Native attributes */
min = 0;
/** The range input max value. @category Native attributes */
max = 100;
/** Set a step value for the range input. @category Native attributes */
step = '';
/** Disable the range input. @category Native attributes */
disabled = false;
/**
* 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.
* @category Features
*/
markers = [];
/**
* Display an input for the range value.
* Allowing the user to type or use the slider to set the value.
* @category Features
*/
input = 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;
/** Hide the tooltip. @category Features */
tooltipHide = false;
/** Set a prefix for the range/input field. @category Features */
textPrefix = null;
/** Set a suffix for the range/input field. @category Features */
textSuffix = null;
/** Set an icon for the range/input field. @category Features */
icon = null;
/** Set an icon at the end of the range or for the second input field when using `multiple`. @category Features */
iconEnd = null;
/**
* Allow multiple values to be selected
* @category Features
*/
multiple = false;
/** Set the error visual for the range input, same as `error`, but without a message. @category Features */
invalid = false;
/** Set an error message for the range input. @category Features */
error = null;
/** Set a custom ID for the input. @category HTML attributes */
pnId = this.id;
/** Set a custom ID for the end input. @category HTML attributes */
pnIdEnd = this.idEnd;
/**
* Provide the label via an aria attribute.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabel;
/**
* Provide the label for the end input via an aria attribute.
* We strongly recommend you use the `label-end` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabelEnd;
/**
* Provide the label from another element via its ID.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabelledby;
/**
* Provide the label for the end input from another element via its ID.
* We strongly recommend you use the `label-end` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabelledbyEnd;
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.idInput = `${this.pnId}-input`;
this.idInputEnd = `${this.pnIdEnd}-input`;
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();
}
getAriaLabel(end) {
if (end)
return !this.labelEnd && !this.pnAriaLabelledbyEnd ? this.pnAriaLabelEnd : null;
return !this.label && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
}
getAriaLabelledby(end) {
if (end)
return !this.labelEnd && !this.pnAriaLabelEnd ? this.pnAriaLabelledbyEnd : null;
return !this.label && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
}
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;
}
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;
const name = isEnd ? (this.nameEnd ? `${this.nameEnd}-input` : null) : this.name ? `${this.name}-input` : null;
return (h("pn-input", { class: "pn-range-field", label: label, type: "number", name: name, ...this.commonAttrs(), icon: isEnd ? this.iconEnd : this.icon, textPrefix: this.textPrefix, textSuffix: this.textSuffix, value: value?.toString(), inputid: idInput, invalid: this.hasError(), "pn-aria-label": this.getAriaLabel(isEnd), "pn-aria-labelledby": this.getAriaLabelledby(isEnd), "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-label": this.getAriaLabel(isEnd), "aria-labelledby": this.getAriaLabelledby(isEnd), "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: '9945b3c7f372134797de134a550106602a88a864' }, h("div", { key: 'd940ec70592f62a4a22f30fbee67ec9736b06560', class: "pn-range", "data-markers": !!this.markers?.length, "data-input": this.input }, h("div", { key: '9bcc2d50329ff1d77b6e60e32de8e6c7ff355271', class: "pn-range-header", "data-input": this.input }, this.label && (h("label", { key: '5888cd96c03e60f5311f877bf84e6aa62d47e97f', htmlFor: this.pnId, class: "pn-range-label" }, h("span", { key: '2072db6913d555fac653694a9e0d07c7d76fc695' }, this.label))), this.multiple && this.labelEnd && (h("label", { key: 'ae8dd61026a936c210c73ba6efe811e93760e60f', htmlFor: this.pnIdEnd, class: "pn-range-label" }, h("span", { key: '28bccee780ec10bd2b13b46f7e71ee0bcd68d559' }, this.labelEnd)))), this.renderPrefix(), h("div", { key: '278a597274b88d050ca240367e89677b5e302b97', class: "pn-range-group", "data-pressing": this.isPressing }, this.renderRangeInput(), this.multiple && (h(Fragment, { key: '840c4fc833463c6844157a3211707224777157ed' }, this.renderRangeInput(true), h("input", { key: '8eb75af8c97670d7cadb0fe91fd9f3314802953d', 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: 'e2132f04eb0feca32916042bf0f3cd59f721dc8f', class: "pn-range-track", "data-multiple": this.multiple, "aria-hidden": "true" }), this.renderTooltip(), this.multiple && this.renderTooltip(true), !!this.markers?.length && (h("ul", { key: '9e49ca3fd348c9994b72129d6c10236935f14197', "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: '1de13cbec1006384d3ff3a00b1b04542f7202c41', id: this.idDatalist }, this.markers.map(({ label, value }) => (h("option", { value: value, label: label === null ? null : label }))))), h("p", { key: '2a188f9aedf5a406f61b76124a1d50439fff9113', id: this.idHelpertext, class: "pn-range-message", hidden: !this.hasHelperText() || this.hasErrorMessage() }, h("span", { key: '487bc4892db02156d88b683e96bb576897926b6a' }, this.helpertext), h("slot", { key: '5145e5f591e33da198650034c8d4dcf0e47d30a9', name: "helpertext" })), h("p", { key: '969947b6672fcd16c7b0947a2d2dc2faf58a9334', id: this.idError, class: "pn-range-message pn-range-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '5a0d01b2a9ca80f17cdf45329f3b900e1e1eabf7' }, this.error), h("slot", { key: '375f36337b860afd1d8b4c2b7bc8001d8653745f', 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": false,
"optional": true,
"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": true,
"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"
},
"value": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native 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": "Native attributes"
}],
"text": "The range end input value."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value-end",
"defaultValue": "0"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native 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": "Native 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": "Native 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": "Native attributes"
}],
"text": "The range input max value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "max",
"defaultValue": "100"
},
"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": "Native attributes"
}],
"text": "Set a step value for the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "step",
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Disable the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"markers": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{ value: number; label?: string }[]",
"resolved": "{ value: number; label?: string; }[]",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"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": "[]"
},
"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"
},
"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"
},
"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"
},
"textPrefix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"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": [{
"name": "category",
"text": "Features"
}],
"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": [{
"name": "category",
"text": "Features"
}],
"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": [{
"name": "category",
"text": "Features"
}],
"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"
},
"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"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"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"
},
"error": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Set an error message for the range input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "error",
"defaultValue": "null"
},
"pnId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "Set a custom ID for the input."
},
"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": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "Set a custom ID for the end input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id-end",
"defaultValue": "this.idEnd"
},
"pnAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-aria-label"
},
"pnAriaLabelEnd": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Provide the label for the end input via an aria attribute.\nWe strongly recommend you use the `label-end` prop instead."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-aria-label-end"
},
"pnAriaLabelledby": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-aria-labelledby"
},
"pnAriaLabelledbyEnd": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Provide the label for the end input from another element via its ID.\nWe strongly recommend you use the `label-end` prop instead."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-aria-labelledby-end"
}
};
}
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"
}, {
"propName": "pnIdEnd",
"methodName": "handleId",
"handlerOptions": {
"immediate": true
}
}, {
"propName": "helpertext",
"methodName": "handleMessage",
"handlerOptions": {
"immediate": true
}
}, {
"propName": "error",
"methodName": "handleMessage"
}, {
"propName": "multiple",
"methodName": "handleMultiple"
}];
}
}