@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
720 lines (709 loc) • 26.6 kB
JavaScript
import {
SynTooltip
} from "./chunk.LK6UOSII.js";
import {
range_styles_default
} from "./chunk.UFNQFJO6.js";
import {
arraysDiffer,
getNormalizedValueFromClientX,
numericSort
} from "./chunk.236RSW67.js";
import {
defaultValue
} from "./chunk.3NXKLKWH.js";
import {
form_control_custom_styles_default,
form_control_styles_default
} from "./chunk.G4URZQCL.js";
import {
FormControlController,
customErrorValidityState,
validValidityState
} from "./chunk.HP2LEQRU.js";
import {
LocalizeController
} from "./chunk.OAQRCZOO.js";
import {
HasSlotController
} from "./chunk.WVVQK5TE.js";
import {
enableDefaultSettings
} from "./chunk.E5UUNP6E.js";
import {
component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
SynergyElement
} from "./chunk.3AZFEB6D.js";
import {
__decorateClass,
__privateAdd,
__privateGet,
__privateMethod,
__privateSet
} from "./chunk.Z4XV3SMG.js";
// src/components/range/range.component.ts
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { property, query, queryAll } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
var _value, _rangeValues, _hasFocus, _validationError, _validationTimeout, _lastChangeValue, _SynRange_instances, rtl_get, onClickTrack_fn, onClickTrackItem_fn, movementBoundariesForThumb_fn, onClickThumb_fn, onDragThumb_fn, onReleaseThumb_fn, moveThumb_fn, updateActiveTrack_fn, onKeyPress_fn, onBlur_fn, updateTooltip_fn, onFocusThumb_fn, handleInvalid_fn, updatePrefixSuffixPosition_fn;
var SynRange = class extends SynergyElement {
constructor() {
super();
__privateAdd(this, _SynRange_instances);
this.name = "";
this.label = "";
this.helpText = "";
this.disabled = false;
this.min = 0;
this.max = 100;
this.step = 1;
this.size = "medium";
this.tooltipPlacement = "top";
this.restrictMovement = false;
this.defaultValue = "0";
this.form = "";
this.hasSlotController = new HasSlotController(this, "help-text", "label", "prefix", "suffix", "ticks");
this.formControlController = new FormControlController(this, { assumeInteractionOn: ["syn-change"] });
this.localize = new LocalizeController(this);
__privateAdd(this, _value, [0]);
__privateAdd(this, _rangeValues, /* @__PURE__ */ new Map());
__privateAdd(this, _hasFocus, false);
__privateAdd(this, _validationError, "");
__privateAdd(this, _validationTimeout);
__privateAdd(this, _lastChangeValue, []);
this.tooltipFormatter = this.localize.number.bind(this.localize);
}
set value(value) {
__privateSet(this, _value, value ? value.split(" ").map(Number).sort(numericSort) : []);
}
get value() {
return __privateGet(this, _value).slice().sort(numericSort).join(" ");
}
/** Gets or sets the current values of the range as an array of numbers */
set valueAsArray(value) {
const oldValue = __privateGet(this, _value);
__privateSet(this, _value, Array.isArray(value) ? value.slice().sort(numericSort) : value || []);
if (arraysDiffer(oldValue, __privateGet(this, _value))) {
this.requestUpdate("value", oldValue.join(" "));
}
}
get valueAsArray() {
return [...__privateGet(this, _value)].sort(numericSort);
}
disconnectedCallback() {
var _a;
super.disconnectedCallback();
(_a = this == null ? void 0 : this.visibilityObserver) == null ? void 0 : _a.disconnect();
}
firstUpdated() {
this.visibilityObserver = new IntersectionObserver((entries) => {
const entry = entries.at(0);
if (entry && entry.isIntersecting && entry.target.checkVisibility()) {
__privateMethod(this, _SynRange_instances, updatePrefixSuffixPosition_fn).call(this, entry.boundingClientRect.height);
}
}, {
// We bind the root to the parent element of the ticks to make sure we are only called
// when the ticks are visible, not when the ticks are scrolled out of the viewport.
root: this.ticks.parentElement
});
this.visibilityObserver.observe(this.ticks);
this.formControlController.updateValidity();
__privateSet(this, _lastChangeValue, Array.from(__privateGet(this, _value)));
this.thumbs.forEach((thumb) => {
const tooltip = thumb.parentElement;
tooltip.updateComplete.then(() => {
const tooltipBody = tooltip.shadowRoot.querySelector(".tooltip__body");
tooltipBody == null ? void 0 : tooltipBody.setAttribute("aria-hidden", "true");
});
});
}
willUpdate(changedProperties) {
super.willUpdate(changedProperties);
if (this.min > this.max) {
[this.min, this.max] = [this.max, this.min];
}
if (this.step > this.max - this.min) {
this.step = this.max - this.min;
}
if (this.step <= 0) {
this.step = 1;
}
const adjustedValue = __privateGet(this, _value).map((value) => {
if (value <= this.min) return this.min;
if (value >= this.max) return this.max;
const nextValue = this.min + this.step * Math.round((value - this.min) / this.step);
if (nextValue > this.max) return this.max;
return nextValue;
});
if (arraysDiffer(__privateGet(this, _value), adjustedValue)) {
__privateSet(this, _value, adjustedValue);
}
}
updated(changedProperties) {
super.updated(changedProperties);
for (const thumb of this.thumbs) {
const rangeId = +thumb.dataset.rangeId;
if (!__privateGet(this, _rangeValues).has(rangeId)) continue;
__privateMethod(this, _SynRange_instances, moveThumb_fn).call(this, thumb, __privateGet(this, _rangeValues).get(rangeId));
}
__privateMethod(this, _SynRange_instances, updateActiveTrack_fn).call(this);
}
focus(options) {
const firstThumb = this.thumbs.item(0);
if (firstThumb) {
firstThumb.focus(options);
} else {
super.focus(options);
}
}
/**
* Checks for validity but does not show a validation message.
* Returns `true` when valid and `false` when invalid.
*/
checkValidity() {
if (this.disabled) return true;
const isValid = !__privateGet(this, _validationError);
if (!isValid) {
this.formControlController.emitInvalidEvent();
}
return isValid;
}
/** Checks for validity and shows the browser's validation message if the control is invalid. */
reportValidity() {
if (this.disabled) return true;
const isValid = this.validity.valid;
this.formControlController.setValidity(isValid);
this.validationInput.hidden = true;
clearTimeout(__privateGet(this, _validationTimeout));
if (!isValid) {
this.validationInput.hidden = false;
this.validationInput.reportValidity();
__privateSet(this, _validationTimeout, setTimeout(() => {
this.validationInput.hidden = true;
}, 1e4));
}
return isValid;
}
/** Sets a custom validation message. Pass an empty string to restore validity. */
setCustomValidity(message) {
__privateSet(this, _validationError, message);
this.validationInput.setCustomValidity(message);
this.formControlController.updateValidity();
}
/** Gets the associated form, if one exists. */
getForm() {
return this.formControlController.getForm();
}
/** Gets the validity state object */
get validity() {
if (__privateGet(this, _validationError)) return customErrorValidityState;
return validValidityState;
}
/** Gets the validation message */
get validationMessage() {
return __privateGet(this, _validationError);
}
/* eslint-disable @typescript-eslint/unbound-method */
renderThumbs(hasLabel) {
const isMultiple = __privateGet(this, _value).length > 1;
__privateGet(this, _rangeValues).clear();
return __privateGet(this, _value).map((value, index) => {
const rangeId = index + 1;
__privateGet(this, _rangeValues).set(rangeId, value);
const id = `thumb-${rangeId}`;
let ariaLabel = "";
let ariaLabeledBy = "";
if (!isMultiple) {
ariaLabeledBy = hasLabel ? "label aria-label-hidden" : "";
} else {
ariaLabeledBy = hasLabel ? `label aria-label-hidden ${id}` : `aria-label-hidden ${id}`;
if (index === 0) {
ariaLabel = `${this.localize.term("rangeMin")} (${this.tooltipFormatter(value)})`;
} else if (index === __privateGet(this, _value).length - 1) {
ariaLabel = `${this.localize.term("rangeMax")} (${this.tooltipFormatter(value)})`;
} else {
ariaLabel = this.tooltipFormatter(value);
}
}
return html`
<syn-tooltip
exportparts="base:tooltip__base, base__arrow:tooltip__arrow, base__popup:tooltip__popup, body:tooltip__body"
hoist
.disabled=${this.tooltipPlacement === "none" || this.disabled}
.placement=${this.tooltipPlacement}
trigger="focus"
>
<div
aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
aria-labelledby=${ariaLabeledBy}
aria-label=${ariaLabel}
aria-valuemax="${this.max}"
aria-valuemin="${this.min}"
aria-valuenow="${value}"
aria-valuetext="${this.tooltipFormatter(value)}"
class="thumb"
data-range-id="${rangeId}"
id=${id}
part="thumb"
role="slider"
tabindex="${this.disabled ? -1 : 0}"
=${__privateMethod(this, _SynRange_instances, onClickThumb_fn)}
=${__privateMethod(this, _SynRange_instances, onDragThumb_fn)}
=${__privateMethod(this, _SynRange_instances, onReleaseThumb_fn)}
=${__privateMethod(this, _SynRange_instances, onReleaseThumb_fn)}
=${__privateMethod(this, _SynRange_instances, onReleaseThumb_fn)}
=${__privateMethod(this, _SynRange_instances, onKeyPress_fn)}
=${__privateMethod(this, _SynRange_instances, onFocusThumb_fn)}
></div>
</syn-tooltip>
`;
});
}
/* eslint-enable @typescript-eslint/unbound-method */
/* eslint-disable @typescript-eslint/unbound-method */
render() {
const hasLabelSlot = this.hasSlotController.test("label");
const hasHelpTextSlot = this.hasSlotController.test("help-text");
const hasPrefixSlot = this.hasSlotController.test("prefix");
const hasSuffixSlot = this.hasSlotController.test("suffix");
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
return html`
<div
part="form-control"
class=${classMap({
"form-control": true,
"form-control--has-help-text": hasHelpText,
"form-control--has-label": hasLabel,
"form-control--has-prefix": hasPrefixSlot,
"form-control--has-suffix": hasSuffixSlot,
"form-control--is-disabled": this.disabled,
"form-control--large": this.size === "large",
"form-control--medium": this.size === "medium",
"form-control--small": this.size === "small"
})}
=${__privateMethod(this, _SynRange_instances, onBlur_fn)}
>
<label
id="label"
part="form-control-label"
class="form-control__label"
aria-hidden=${hasLabel ? "false" : "true"}
=${this.focus}
>
<slot name="label">${this.label}</slot>
</label>
<label id="aria-label-hidden" class="visually-hidden">
(${__privateGet(this, _value).map(this.tooltipFormatter).join(" - ")})
</label>
<div class="base input__control" part="base">
<span part="prefix" class="input__prefix">
<slot name="prefix"></slot>
</span>
<div class="input__wrapper" part="input-wrapper">
<input
class="range__validation-input visually-hidden"
tabindex="-1"
hidden
=${__privateMethod(this, _SynRange_instances, handleInvalid_fn)}
/>
<div
class="track__wrapper"
=${__privateMethod(this, _SynRange_instances, onClickTrack_fn)}
part="track-wrapper"
role="presentation"
>
<div class="track__click-helper"></div>
<div class="track" part="track"></div>
<div class="active-track" part="active-track"></div>
</div>
${this.renderThumbs(hasLabel)}
<div
class="ticks"
part="ticks"
=${__privateMethod(this, _SynRange_instances, onClickTrackItem_fn)}
role="presentation"
>
<slot name="ticks"></slot>
</div>
</div>
<span part="suffix" class="input__suffix">
<slot name="suffix"></slot>
</span>
</div>
<div
part="form-control-help-text"
class="form-control__help-text"
aria-hidden=${hasHelpText ? "false" : "true"}
>
<slot name="help-text">${this.helpText}</slot>
</div>
</div>
`;
}
/* eslint-enable @typescript-eslint/unbound-method */
};
_value = new WeakMap();
_rangeValues = new WeakMap();
_hasFocus = new WeakMap();
_validationError = new WeakMap();
_validationTimeout = new WeakMap();
_lastChangeValue = new WeakMap();
_SynRange_instances = new WeakSet();
rtl_get = function() {
return this.localize.dir() === "rtl";
};
onClickTrack_fn = function(event, focusThumb = true) {
if (this.disabled) return;
const { clientX } = event;
const thumbs = Array.from(this.thumbs);
const pos = getNormalizedValueFromClientX(this.baseDiv, clientX, __privateGet(this, _SynRange_instances, rtl_get));
const unit = this.step / (this.max - this.min);
const nextValue = this.min + this.step * Math.round(pos / unit);
const thumb = thumbs.reduce((prev, curr) => {
const currValue = __privateGet(this, _rangeValues).get(+curr.dataset.rangeId);
const prevValue2 = __privateGet(this, _rangeValues).get(+prev.dataset.rangeId);
const currDiff = Math.abs(currValue - nextValue);
const prevDiff = Math.abs(prevValue2 - nextValue);
if (currDiff === prevDiff) {
return currValue < nextValue ? curr : prev;
}
return currDiff < prevDiff ? curr : prev;
});
const rangeId = +thumb.dataset.rangeId;
if (!rangeId) return;
__privateGet(this, _rangeValues).set(rangeId, nextValue);
__privateMethod(this, _SynRange_instances, moveThumb_fn).call(this, thumb, nextValue);
const prevValue = __privateGet(this, _value);
__privateSet(this, _value, Array.from(__privateGet(this, _rangeValues).values()));
__privateMethod(this, _SynRange_instances, updateActiveTrack_fn).call(this);
if (arraysDiffer(prevValue, __privateGet(this, _value))) {
__privateSet(this, _lastChangeValue, Array.from(__privateGet(this, _value)));
this.emit("syn-input");
this.emit("syn-change");
}
const newEvt = new PointerEvent("pointerdown", event);
if (focusThumb) {
if (thumb.dispatchEvent(newEvt)) {
__privateMethod(this, _SynRange_instances, updateTooltip_fn).call(this, thumb);
}
}
};
/**
* Special method for handling clicks on track items
* When clicking track items, we do not want the thumb to have focus
*/
onClickTrackItem_fn = function(event) {
__privateMethod(this, _SynRange_instances, onClickTrack_fn).call(this, event, false);
};
/**
* Get the boundaries of a given thumb
* @param thumb The thumb element that was moved
* @param value The current value of a thumb
* @returns An object containing information about the current boundaries
*/
movementBoundariesForThumb_fn = function(thumb, value) {
const values = this.valueAsArray;
const thumbs = Array.from(this.thumbs);
const thumbIndex = thumbs.indexOf(thumb);
const prevValue = values[thumbIndex - 1] || this.min;
const nextValue = values[thumbIndex + 1] || this.max;
const isRestricted = value < prevValue || value > nextValue;
const finalValue = Math.max(prevValue, Math.min(nextValue, value));
return {
finalValue,
isRestricted,
nextValue,
prevValue
};
};
onClickThumb_fn = async function(event) {
if (this.disabled) return;
const thumb = event.target;
__privateMethod(this, _SynRange_instances, updateTooltip_fn).call(this, thumb);
if (thumb.dataset.pointerId) {
thumb.releasePointerCapture(+thumb.dataset.pointerId);
}
thumb.dataset.pointerId = event.pointerId.toString();
thumb.setPointerCapture(event.pointerId);
thumb.classList.add("grabbed");
await thumb.parentElement.show();
};
onDragThumb_fn = function(event) {
if (this.disabled) return;
const thumb = event.target;
const rangeId = +thumb.dataset.rangeId;
if (!__privateGet(this, _rangeValues).has(rangeId)) return;
const pointerId = thumb.dataset.pointerId ? +thumb.dataset.pointerId : null;
if (pointerId !== event.pointerId) return;
const pos = getNormalizedValueFromClientX(this.baseDiv, event.clientX, __privateGet(this, _SynRange_instances, rtl_get));
const unit = this.step / (this.max - this.min);
let value = this.min + this.step * Math.round(pos / unit);
const synMove = this.emit("syn-move", {
cancelable: true,
detail: {
element: thumb,
value
}
});
if (synMove.defaultPrevented) {
return;
}
if (this.restrictMovement) {
const movementData = __privateMethod(this, _SynRange_instances, movementBoundariesForThumb_fn).call(this, thumb, value);
if (movementData.isRestricted) {
value = movementData.finalValue;
thumb.style.zIndex = (3 + this.thumbs.length).toFixed(0);
} else {
thumb.style.zIndex = "3";
}
}
__privateGet(this, _rangeValues).set(rangeId, value);
__privateMethod(this, _SynRange_instances, moveThumb_fn).call(this, thumb, value);
const prevValue = __privateGet(this, _value);
__privateSet(this, _value, Array.from(__privateGet(this, _rangeValues).values()));
__privateMethod(this, _SynRange_instances, updateActiveTrack_fn).call(this);
if (arraysDiffer(prevValue, __privateGet(this, _value))) {
this.emit("syn-input");
}
};
onReleaseThumb_fn = async function(event) {
const thumb = event.target;
if (!thumb.dataset.pointerId || event.pointerId !== +thumb.dataset.pointerId) return;
thumb.classList.remove("grabbed");
thumb.releasePointerCapture(event.pointerId);
delete thumb.dataset.pointerId;
if (arraysDiffer(__privateGet(this, _lastChangeValue), __privateGet(this, _value))) {
__privateSet(this, _lastChangeValue, Array.from(__privateGet(this, _value)));
this.emit("syn-change");
}
await thumb.parentElement.hide();
};
moveThumb_fn = function(thumb, value) {
thumb.setAttribute("aria-valuenow", value.toString());
thumb.setAttribute("aria-valuetext", this.tooltipFormatter(value));
const pos = (value - this.min) / (this.max - this.min);
thumb.style.insetInlineStart = `calc(${100 * pos}% - var(--half-thumb-size))`;
__privateMethod(this, _SynRange_instances, updateTooltip_fn).call(this, thumb);
};
updateActiveTrack_fn = function() {
const { activeTrack } = this;
if (!activeTrack) return;
if (this.min === this.max) {
activeTrack.style.insetInlineStart = "0%";
activeTrack.style.insetInlineEnd = "0%";
return;
}
if (__privateGet(this, _value).length === 1) {
const start2 = getComputedStyle(this).getPropertyValue("--track-active-offset") || "0%";
const end2 = 100 * (__privateGet(this, _value)[0] - this.min) / (this.max - this.min);
activeTrack.style.insetInlineStart = `min(${start2}, ${end2}%)`;
activeTrack.style.insetInlineEnd = `min(calc(100% - ${start2}), calc(100% - ${end2}%))`;
return;
}
const sortedValues = __privateGet(this, _value).slice().sort(numericSort);
const start = 100 * (sortedValues[0] - this.min) / (this.max - this.min);
const end = 100 * (sortedValues[sortedValues.length - 1] - this.min) / (this.max - this.min);
activeTrack.style.insetInlineStart = `${start}%`;
activeTrack.style.insetInlineEnd = `calc(100% - ${end}%)`;
};
onKeyPress_fn = function(event) {
const thumb = event.target;
const rangeId = +thumb.dataset.rangeId;
const currentValue = __privateGet(this, _rangeValues).get(rangeId);
if (currentValue === void 0) return;
let value = currentValue;
switch (event.key) {
case "ArrowUp":
case "Up":
value = Math.min(currentValue + this.step, this.max);
break;
case "ArrowDown":
case "Down":
value = Math.max(currentValue - this.step, this.min);
break;
case "ArrowLeft":
case "Left":
value = __privateGet(this, _SynRange_instances, rtl_get) ? Math.min(currentValue + this.step, this.max) : Math.max(currentValue - this.step, this.min);
break;
case "ArrowRight":
case "Right":
value = __privateGet(this, _SynRange_instances, rtl_get) ? Math.max(currentValue - this.step, this.min) : Math.min(currentValue + this.step, this.max);
break;
case "PageUp":
value = Math.min(
currentValue + (this.max - this.min) / 5,
this.max
);
break;
case "PageDown":
value = Math.max(
currentValue - (this.max - this.min) / 5,
this.min
);
break;
case "Home":
value = this.min;
break;
case "End":
value = this.max;
break;
default:
return;
}
if (value !== currentValue) {
const synMove = this.emit("syn-move", {
cancelable: true,
detail: {
element: thumb,
value
}
});
if (synMove.defaultPrevented) {
return;
}
if (this.restrictMovement) {
const movementData = __privateMethod(this, _SynRange_instances, movementBoundariesForThumb_fn).call(this, thumb, value);
if (movementData.isRestricted) {
value = movementData.finalValue;
}
}
__privateMethod(this, _SynRange_instances, moveThumb_fn).call(this, thumb, value);
__privateGet(this, _rangeValues).set(rangeId, value);
__privateSet(this, _value, Array.from(__privateGet(this, _rangeValues).values()));
__privateMethod(this, _SynRange_instances, updateActiveTrack_fn).call(this);
__privateMethod(this, _SynRange_instances, updateTooltip_fn).call(this, thumb);
__privateSet(this, _lastChangeValue, Array.from(__privateGet(this, _value)));
this.emit("syn-input");
this.emit("syn-change");
}
event.stopPropagation();
event.preventDefault();
};
onBlur_fn = function(event) {
var _a;
if (event.relatedTarget && ((_a = this.shadowRoot) == null ? void 0 : _a.contains(event.relatedTarget))) return;
this.emit("syn-blur");
__privateSet(this, _hasFocus, false);
};
updateTooltip_fn = function(thumb) {
if (this.tooltipPlacement === "none") return;
const rangeId = +thumb.dataset.rangeId;
if (!__privateGet(this, _rangeValues).has(rangeId)) return;
const value = __privateGet(this, _rangeValues).get(rangeId);
const tooltip = thumb.parentElement;
tooltip.content = this.tooltipFormatter(value);
};
onFocusThumb_fn = function(event) {
var _a;
if (this.disabled) return;
if (!__privateGet(this, _hasFocus)) {
__privateSet(this, _hasFocus, true);
this.emit("syn-focus");
}
const thumb = event.target;
if (!((_a = thumb == null ? void 0 : thumb.dataset) == null ? void 0 : _a.rangeId)) return;
__privateMethod(this, _SynRange_instances, updateTooltip_fn).call(this, thumb);
};
handleInvalid_fn = function(event) {
this.formControlController.setValidity(false);
this.formControlController.emitInvalidEvent(event);
};
updatePrefixSuffixPosition_fn = function(height) {
var _a, _b, _c, _d;
const hasTicksSlot = this.hasSlotController.test("ticks");
const hasPrefixSlot = this.hasSlotController.test("prefix");
const hasSuffixSlot = this.hasSlotController.test("suffix");
if (!hasTicksSlot) {
return;
}
let ticksHeight = height || ((_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".ticks")) == null ? void 0 : _b.clientHeight);
if (ticksHeight) {
ticksHeight += 2;
ticksHeight /= 2;
if (hasPrefixSlot) {
const prefix = (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(".input__prefix");
prefix.style.transform = `translateY(-${ticksHeight}px)`;
}
if (hasSuffixSlot) {
const suffix = (_d = this.shadowRoot) == null ? void 0 : _d.querySelector(".input__suffix");
suffix.style.transform = `translateY(-${ticksHeight}px)`;
}
}
};
SynRange.styles = [
component_styles_default,
form_control_styles_default,
form_control_custom_styles_default,
range_styles_default
];
SynRange.dependencies = {
"syn-tooltip": SynTooltip
};
__decorateClass([
property()
], SynRange.prototype, "name", 2);
__decorateClass([
property()
], SynRange.prototype, "label", 2);
__decorateClass([
property({ attribute: "help-text" })
], SynRange.prototype, "helpText", 2);
__decorateClass([
property({ reflect: true, type: Boolean })
], SynRange.prototype, "disabled", 2);
__decorateClass([
property({ type: Number })
], SynRange.prototype, "min", 2);
__decorateClass([
property({ type: Number })
], SynRange.prototype, "max", 2);
__decorateClass([
property({ type: Number })
], SynRange.prototype, "step", 2);
__decorateClass([
property({ reflect: true })
], SynRange.prototype, "size", 2);
__decorateClass([
property({ attribute: "tooltip-placement", type: String })
], SynRange.prototype, "tooltipPlacement", 2);
__decorateClass([
property({ type: String })
], SynRange.prototype, "value", 1);
__decorateClass([
property({ attribute: "restrict-movement", type: Boolean })
], SynRange.prototype, "restrictMovement", 2);
__decorateClass([
defaultValue()
], SynRange.prototype, "defaultValue", 2);
__decorateClass([
property({ reflect: true })
], SynRange.prototype, "form", 2);
__decorateClass([
property({ attribute: false })
], SynRange.prototype, "tooltipFormatter", 2);
__decorateClass([
query(".input__wrapper")
], SynRange.prototype, "baseDiv", 2);
__decorateClass([
query(".active-track")
], SynRange.prototype, "activeTrack", 2);
__decorateClass([
query(".ticks")
], SynRange.prototype, "ticks", 2);
__decorateClass([
queryAll(".thumb")
], SynRange.prototype, "thumbs", 2);
__decorateClass([
query(".range__validation-input")
], SynRange.prototype, "validationInput", 2);
SynRange = __decorateClass([
enableDefaultSettings("SynRange")
], SynRange);
export {
SynRange
};
//# sourceMappingURL=chunk.PENIVZQL.js.map