@postnord/web-components
Version:
PostNord Web Components
372 lines (367 loc) • 30.2 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DWu-2oJc.js');
var index$1 = require('./index.cjs.js');
const pnRangeCss = () => `${index.transformTag("pn-range")}{display:block}${index.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){${index.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}${index.transformTag("pn-range")} .pn-range>${index.transformTag("pn-input")}{flex:1 1 100%}${index.transformTag("pn-range")} .pn-range>${index.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}}${index.transformTag("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${index.transformTag("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${index.transformTag("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${index.transformTag("pn-range")} .pn-range-header:empty{display:none}${index.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){${index.transformTag("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-range")} .pn-range-label>span{font-size:0.875em}${index.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%}${index.transformTag("pn-range")} .pn-range-message[hidden],${index.transformTag("pn-range")} .pn-range-message>span[hidden]{display:none}${index.transformTag("pn-range")} .pn-range-error{color:#a70707}${index.transformTag("pn-range")} .pn-range-field{flex:0 0 auto}${index.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}${index.transformTag("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${index.transformTag("pn-range")} .pn-range-group[data-pressing] *,${index.transformTag("pn-range")} .pn-range-group[data-pressing] *:before,${index.transformTag("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${index.transformTag("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${index.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}${index.transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${index.transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${index.transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${index.transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${index.transformTag("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${index.transformTag("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${index.transformTag("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${index.transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${index.transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${index.transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${index.transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${index.transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${index.transformTag("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${index.transformTag("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${index.transformTag("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${index.transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${index.transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${index.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}${index.transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${index.transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${index.transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${index.transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${index.transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${index.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}${index.transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${index.transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${index.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}${index.transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${index.transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${index.transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${index.transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${index.transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${index.transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${index.transformTag("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${index.transformTag("pn-range")} .pn-range-track:before,${index.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){${index.transformTag("pn-range")} .pn-range-track:before,${index.transformTag("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-range")} .pn-range-track:after{display:none}${index.transformTag("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${index.transformTag("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${index.transformTag("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${index.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){${index.transformTag("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${index.transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${index.transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${index.transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${index.transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${index.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){${index.transformTag("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${index.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){${index.transformTag("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${index.transformTag("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${index.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){${index.transformTag("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${index.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}${index.transformTag("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${index.transformTag("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${index.transformTag("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${index.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}${index.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){${index.transformTag("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`;
const PnRange = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.rangeSelected = index.createEvent(this, "rangeSelected", 7);
}
id = `pn-range-${index$1.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 index.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;
/** 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(() => index.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 index.h("pn-icon", { class: "pn-range-icon", icon: this.icon });
if (this.textPrefix && !this.input)
return index.h("span", { class: "pn-range-text" }, this.textPrefix);
return null;
}
renderSuffix() {
if (this.input && this.multiple)
return this.renderNumberInput(true);
if (this.iconEnd)
return index.h("pn-icon", { class: "pn-range-icon", icon: this.iconEnd });
if (this.textSuffix && !this.input)
return index.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 (index.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 (index.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 (index.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 && (index.h("div", { class: "pn-range-tooltip" }, index.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 (index.h(index.Host, { key: '9945b3c7f372134797de134a550106602a88a864' }, index.h("div", { key: 'd940ec70592f62a4a22f30fbee67ec9736b06560', class: "pn-range", "data-markers": !!this.markers?.length, "data-input": this.input }, index.h("div", { key: '9bcc2d50329ff1d77b6e60e32de8e6c7ff355271', class: "pn-range-header", "data-input": this.input }, this.label && (index.h("label", { key: '5888cd96c03e60f5311f877bf84e6aa62d47e97f', htmlFor: this.pnId, class: "pn-range-label" }, index.h("span", { key: '2072db6913d555fac653694a9e0d07c7d76fc695' }, this.label))), this.multiple && this.labelEnd && (index.h("label", { key: 'ae8dd61026a936c210c73ba6efe811e93760e60f', htmlFor: this.pnIdEnd, class: "pn-range-label" }, index.h("span", { key: '28bccee780ec10bd2b13b46f7e71ee0bcd68d559' }, this.labelEnd)))), this.renderPrefix(), index.h("div", { key: '278a597274b88d050ca240367e89677b5e302b97', class: "pn-range-group", "data-pressing": this.isPressing }, this.renderRangeInput(), this.multiple && (index.h(index.Fragment, { key: '840c4fc833463c6844157a3211707224777157ed' }, this.renderRangeInput(true), index.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) }))), index.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 && (index.h("ul", { key: '9e49ca3fd348c9994b72129d6c10236935f14197', "aria-hidden": "true", class: "pn-range-markers" }, this.markers.map(({ label, value }) => (index.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)}%` } }, index.h("span", { class: "pn-range-markers-label", "data-active": this.isActiveMarker(value) }, this.getMarkerLabel({ value, label })))))))), this.renderSuffix(), !!this.markers?.length && (index.h("datalist", { key: '1de13cbec1006384d3ff3a00b1b04542f7202c41', id: this.idDatalist }, this.markers.map(({ label, value }) => (index.h("option", { value: value, label: label === null ? null : label }))))), index.h("p", { key: '2a188f9aedf5a406f61b76124a1d50439fff9113', id: this.idHelpertext, class: "pn-range-message", hidden: !this.hasHelperText() || this.hasErrorMessage() }, index.h("span", { key: '487bc4892db02156d88b683e96bb576897926b6a' }, this.helpertext), index.h("slot", { key: '5145e5f591e33da198650034c8d4dcf0e47d30a9', name: "helpertext" })), index.h("p", { key: '969947b6672fcd16c7b0947a2d2dc2faf58a9334', id: this.idError, class: "pn-range-message pn-range-error", role: "alert", hidden: !this.hasErrorMessage() }, index.h("span", { key: '5a0d01b2a9ca80f17cdf45329f3b900e1e1eabf7' }, this.error), index.h("slot", { key: '375f36337b860afd1d8b4c2b7bc8001d8653745f', name: "error" })))));
}
static get watchers() { return {
"value": [{
"handleValue": 1
}],
"valueEnd": [{
"handleValueEnd": 1
}],
"pnId": [{
"handleId": 0
}],
"pnIdEnd": [{
"handleId": 1
}],
"helpertext": [{
"handleMessage": 1
}],
"error": [{
"handleMessage": 0
}],
"multiple": [{
"handleMultiple": 0
}]
}; }
};
PnRange.style = pnRangeCss();
exports.pn_range = PnRange;