@postnord/web-components
Version:
PostNord Web Components
325 lines (321 loc) • 27.5 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, F as Fragment, a as Host } from './index-CAEP792y.js';
import { uuidv4 } from './index.js';
const pnRangeCss = () => `${transformTag("pn-range")}{display:block}${transformTag("pn-range")} .pn-range{color:#2d2013;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(0.25em, 5vw, 0.75em);align-items:center;container-type:inline-size} (max-width: 24em){${transformTag("pn-range")} .pn-range .pn-range-header[data-input]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-range")} .pn-range>${transformTag("pn-input")}{flex:1 1 100%}${transformTag("pn-range")} .pn-range>${transformTag("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${transformTag("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${transformTag("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${transformTag("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${transformTag("pn-range")} .pn-range-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-label>span{font-size:0.875em}${transformTag("pn-range")} .pn-range-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left;flex:1 1 100%;width:100%}${transformTag("pn-range")} .pn-range-message[hidden],${transformTag("pn-range")} .pn-range-message>span[hidden]{display:none}${transformTag("pn-range")} .pn-range-error{color:#a70707}${transformTag("pn-range")} .pn-range-field{flex:0 0 auto}${transformTag("pn-range")} .pn-range-field .pn-input-label{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${transformTag("pn-range")} .pn-range-group[data-pressing] *,${transformTag("pn-range")} .pn-range-group[data-pressing] *:before,${transformTag("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${transformTag("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${transformTag("pn-range")} .pn-range-input{z-index:1;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent}${transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${transformTag("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${transformTag("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${transformTag("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${transformTag("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${transformTag("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${transformTag("pn-range")} .pn-range-overlay-input{z-index:5;cursor:pointer;position:absolute;appearance:none;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;outline:0;opacity:0;display:block;-webkit-tap-highlight-color:transparent}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(0%);border-bottom-right-radius:0em}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(0%);border-bottom-left-radius:0em}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${transformTag("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${transformTag("pn-range")} .pn-range-track:before,${transformTag("pn-range")} .pn-range-track:after{content:"";z-index:0;position:absolute;right:100%;pointer-events:none;height:100%;width:100%;background-color:#005d92;transform:translateX(var(--pn-range-progress));transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-track:before,${transformTag("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-track:after{display:none}${transformTag("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${transformTag("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${transformTag("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${transformTag("pn-range")} .pn-range-thumb{pointer-events:none;position:absolute;height:100%;width:calc(100% - 1em);top:0;right:calc(100% - 0.5em);transform:translateX(var(--pn-range-progress));transition-property:transform, border-radius;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${transformTag("pn-range")} .pn-range-thumb:before{content:"";position:absolute;top:0.5em;right:-0.65625em;height:1.3125em;width:1.3125em;background-color:#005d92;border-radius:5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-tooltip{position:absolute;z-index:10;top:-85%;right:0;text-align:center;line-height:1.25em;white-space:nowrap;height:1.75em;min-width:2em;padding:0.25em 0.5em;border-radius:0.5em;background-color:#0d234b;color:#ffffff;transform:translateX(50%) translateY(10%);opacity:0;transition-property:opacity, transform, border-radius, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${transformTag("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${transformTag("pn-range")} .pn-range-tooltip:before{content:"";z-index:-1;position:absolute;left:50%;bottom:-0.25em;height:0.5em;width:0.5em;background-color:inherit;transform:translateX(-50%) translateY(0%) rotate(45deg);transition-property:left, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-markers{position:absolute;top:100%;left:0.5em;min-height:1em;width:calc(100% - 1em);padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap}${transformTag("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${transformTag("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${transformTag("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${transformTag("pn-range")} .pn-range-markers-item:before{content:"";position:absolute;left:0;top:-100%;border-left:0.0625em solid #d3cecb;height:1em;z-index:-1}${transformTag("pn-range")} .pn-range-markers-label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:400;font-size:0.875em;color:#5e554a;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`;
const PnRange = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.rangeSelected = createEvent(this, "rangeSelected");
}
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}';
get hostElement() { return getElement(this); }
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 watchers() { return {
"value": [{
"handleValue": 1
}],
"valueEnd": [{
"handleValueEnd": 1
}],
"pnId": [{
"handleId": 1
}],
"helpertext": [{
"handleMessage": 1
}],
"error": [{
"handleMessage": 0
}],
"multiple": [{
"handleMultiple": 0
}]
}; }
};
PnRange.style = pnRangeCss();
export { PnRange as pn_range };