@cas-smartdesign/lit-slider 7.0.6 → 7.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/docs/basic-usages.js +9 -1
  2. package/dist/docs/doc.mjs +77 -34
  3. package/dist/slider-with-externals.js +17 -17
  4. package/dist/slider-with-externals.js.map +3 -3
  5. package/dist/slider.d.ts +5 -3
  6. package/dist/slider.mjs +25 -19
  7. package/dist/slider.mjs.map +1 -1
  8. package/package.json +4 -4
  9. package/readme.md +6 -2
package/dist/slider.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement, PropertyValues, TemplateResult } from "lit";
1
+ import { LitElement, TemplateResult } from "lit";
2
2
  import { ValidationLevel } from "@cas-smartdesign/field-validation-message";
3
3
  import "@cas-smartdesign/lit-input";
4
4
  declare global {
@@ -29,6 +29,7 @@ export default class Slider extends LitElement {
29
29
  max: number;
30
30
  step: number;
31
31
  editable: boolean;
32
+ clampValue: boolean;
32
33
  inputSuffix: string;
33
34
  disabled: boolean;
34
35
  validationMessage: string;
@@ -49,8 +50,9 @@ export default class Slider extends LitElement {
49
50
  connectedCallback(): void;
50
51
  disconnectedCallback(): void;
51
52
  private upgradeProperty;
52
- private updateInitialValue;
53
- protected shouldUpdate(_changedProperties: PropertyValues): boolean;
53
+ static get observedAttributes(): string[];
54
+ attributeChangedCallback(name: string, old: string | null, value: string | null): void;
55
+ private updateValue;
54
56
  get value(): number;
55
57
  set value(newValue: number);
56
58
  private roundToStep;
package/dist/slider.mjs CHANGED
@@ -1,9 +1,9 @@
1
- import { LitElement as p, css as g, unsafeCSS as v, html as d } from "lit";
1
+ import { LitElement as p, css as g, unsafeCSS as m, html as d } from "lit";
2
2
  import { property as o } from "lit/decorators/property.js";
3
- import f from "hex-rgb";
3
+ import v from "hex-rgb";
4
4
  import "@cas-smartdesign/lit-input";
5
- import { Big as m } from "big.js";
6
- class b {
5
+ import { Big as b } from "big.js";
6
+ class f {
7
7
  constructor() {
8
8
  this._rgbaColors = /* @__PURE__ */ new Map(), this._originalColors = /* @__PURE__ */ new Map();
9
9
  }
@@ -53,7 +53,7 @@ class b {
53
53
  });
54
54
  }
55
55
  convertFromHex(t) {
56
- const e = f(t);
56
+ const e = v(t);
57
57
  return e.alpha > 1 && (e.alpha /= 255), e;
58
58
  }
59
59
  convertFromRGBAString(t) {
@@ -80,14 +80,14 @@ var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (u, t, e
80
80
  }, l;
81
81
  const a = (l = class extends p {
82
82
  constructor() {
83
- super(), this.thumbPosition = 0, this._value = 0, this._relativeValue = 0, this.min = 0, this.max = 1, this.colorBlender = new b(), this.baseColor = l.defaultColor, this.resizeObserver = new ResizeObserver(() => {
83
+ super(), this.thumbPosition = 0, this._value = 0, this._relativeValue = 0, this.min = 0, this.max = 1, this.colorBlender = new f(), this.baseColor = l.defaultColor, this.resizeObserver = new ResizeObserver(() => {
84
84
  window.requestAnimationFrame(() => {
85
85
  this.lastKnownWidth !== this.trackContainerWidth && (this.lastKnownWidth = this.trackContainerWidth, this.doUpdateRelativeValue(this._relativeValue, !0));
86
86
  });
87
87
  });
88
88
  }
89
89
  firstUpdated(t) {
90
- super.firstUpdated(t), this.updateInitialValue(), this.addEventListener(
90
+ super.firstUpdated(t), this.updateValue(Number.parseFloat(this.getAttribute("value")) || this._value), this.addEventListener(
91
91
  this.useTouchEvents() ? "touchstart" : "pointerdown",
92
92
  (e) => {
93
93
  !this.hasAttribute("disabled") && e.composedPath().indexOf(this.inputElement) === -1 && (e.preventDefault(), e.pointerId && this.setPointerCapture(e.pointerId), this.focus(), this.listenMoveEvents(
@@ -110,12 +110,15 @@ const a = (l = class extends p {
110
110
  delete this[t], this[t] = e;
111
111
  }
112
112
  }
113
- updateInitialValue() {
114
- const t = Number.parseFloat(this.getAttribute("value")) || this._value;
115
- this.setValueInternal(t) && (this.inputElement && (this.inputElement.value = this.formattedValue()), this.fireBothValueChangeEvents());
113
+ static get observedAttributes() {
114
+ const t = super.observedAttributes;
115
+ return t.push("value"), t;
116
116
  }
117
- shouldUpdate(t) {
118
- return t.has("step") && this.setValueInternal(this._value) && this.fireBothValueChangeEvents(), super.shouldUpdate(t);
117
+ attributeChangedCallback(t, e, i) {
118
+ super.attributeChangedCallback(t, e, i), (t === "value" || t == "step") && this.hasUpdated && this.updateValue(Number.parseFloat(i));
119
+ }
120
+ updateValue(t) {
121
+ this.setValueInternal(t) && (this.inputElement && (this.inputElement.value = this.formattedValue()), this._value != t && this.fireBothValueChangeEvents());
119
122
  }
120
123
  get value() {
121
124
  return this._value;
@@ -127,17 +130,17 @@ const a = (l = class extends p {
127
130
  let e = Number.parseFloat(t);
128
131
  if (Number.isNaN(e))
129
132
  return this._value;
130
- if (this.step) {
131
- const i = m(e).div(this.step).round().mul(this.step);
133
+ if (this.step && e >= this.min && e <= this.max) {
134
+ const i = b(e).minus(this.min).div(this.step).round().mul(this.step).plus(this.min);
132
135
  e = Number.parseFloat(i.toString());
133
136
  }
134
137
  return e;
135
138
  }
136
139
  setValueInternal(t) {
137
- const e = this.roundToStep(t);
138
- if (this._value !== e) {
139
- const i = this._value;
140
- return this._value = e, this.relativeValue = (e - this.min) / (this.max - this.min), this.setAttribute("aria-valuenow", this._value.toString()), this.requestUpdate("value", i), !0;
140
+ const e = this.roundToStep(t), i = this.clampValue ? Math.max(this.min, Math.min(this.max, e)) : e;
141
+ if (this._value !== i) {
142
+ const r = this._value;
143
+ return this._value = i, this.relativeValue = (i - this.min) / (this.max - this.min), this.setAttribute("aria-valuenow", this._value.toString()), this.requestUpdate("value", r), !0;
141
144
  }
142
145
  return !1;
143
146
  }
@@ -161,7 +164,7 @@ const a = (l = class extends p {
161
164
  static get styles() {
162
165
  return [
163
166
  g`
164
- ${v(C)}
167
+ ${m(C)}
165
168
  `
166
169
  ];
167
170
  }
@@ -290,6 +293,9 @@ n([
290
293
  n([
291
294
  o({ type: Boolean, reflect: !0 })
292
295
  ], a.prototype, "editable", 2);
296
+ n([
297
+ o({ type: Boolean, reflect: !0 })
298
+ ], a.prototype, "clampValue", 2);
293
299
  n([
294
300
  o({ type: String, reflect: !0 })
295
301
  ], a.prototype, "inputSuffix", 2);
package/dist/slider.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"slider.mjs","sources":["../colorblender.ts","../slider.ts"],"sourcesContent":["import hexRgb from \"hex-rgb\";\n\nexport interface IColor {\n red: number;\n green: number;\n blue: number;\n alpha: number;\n}\n\nexport default class ColorBlender {\n private _rgbaColors: Map<number, IColor> = new Map();\n private _originalColors: Map<number, string> = new Map();\n\n public get colors(): Map<number, string> {\n return this._originalColors;\n }\n\n public set colors(newColors: Map<number, string>) {\n this._rgbaColors.clear();\n this._originalColors = newColors;\n if (newColors && newColors.size) {\n const invalidColorKey = Array.from(newColors.keys()).find((value) => {\n return value < 0 || value > 1;\n });\n if (invalidColorKey) {\n throw Error(\n \"The keys of the colors must represent the relative value where the color is fully applied.\",\n );\n }\n newColors.forEach((value, key) => {\n const color: IColor = this.convertFromRGBAString(value) || this.convertFromHex(value);\n if (Object.keys(color).length === 0 && color.constructor === Object) {\n throw Error(`Cannot convert color: ${value} to rgba-color`);\n } else {\n this._rgbaColors.set(key, color);\n }\n });\n const sortedEntries = Array.from(this._rgbaColors.entries()).sort();\n this._rgbaColors = new Map(sortedEntries);\n }\n }\n\n public blend(relativeValue: number): string {\n if (!this._rgbaColors.size) {\n throw Error(\"It is not possible to blend without a color list.\");\n }\n let leftColor: [number, IColor];\n let rightColor: [number, IColor];\n for (const entry of this._rgbaColors) {\n if (!leftColor) {\n leftColor = entry;\n }\n if (entry[0] < relativeValue) {\n leftColor = entry;\n } else if (entry[0] === relativeValue) {\n leftColor = rightColor = entry;\n break;\n } else {\n rightColor = entry;\n break;\n }\n }\n if (!rightColor) {\n rightColor = leftColor;\n }\n const diff = rightColor[0] - leftColor[0];\n if (diff) {\n return this.blendColors(leftColor[1], rightColor[1], (relativeValue - leftColor[0]) / diff);\n } else {\n return this.convertToRGBAString(leftColor[1]);\n }\n }\n\n private blendColors(colorA: IColor, colorB: IColor, relativeOffsetFromA: number): string {\n return this.convertToRGBAString({\n red: Math.round(colorA.red + (colorB.red - colorA.red) * relativeOffsetFromA),\n green: Math.round(colorA.green + (colorB.green - colorA.green) * relativeOffsetFromA),\n blue: Math.round(colorA.blue + (colorB.blue - colorA.blue) * relativeOffsetFromA),\n alpha: colorA.alpha + (colorB.alpha - colorA.alpha) * relativeOffsetFromA,\n });\n }\n\n private convertFromHex(hexColor: string): IColor {\n const color = hexRgb(hexColor);\n if (color.alpha > 1) {\n color.alpha /= 255;\n }\n return color;\n }\n\n private convertFromRGBAString(rgbaColor: string): IColor {\n const match = rgbaColor.match(/rgba?\\((\\d{1,3}), ?(\\d{1,3}), ?(\\d{1,3})\\)?(?:, ?(\\d(?:\\.\\d?))\\))?/);\n return match\n ? {\n red: parseInt(match[1], 10),\n green: parseInt(match[2], 10),\n blue: parseInt(match[3], 10),\n alpha: parseInt(match[4], 10) || 1,\n }\n : null;\n }\n\n public transparentize(color: string, alpha: number): string {\n return this.convertToRGBAString(this.convertFromRGBAString(color), alpha);\n }\n\n private convertToRGBAString(color: IColor, alpha?: number): string {\n return `rgba(${color.red},${color.green},${color.blue},${alpha || color.alpha})`;\n }\n}\n","import { LitElement, html, PropertyValues, unsafeCSS, TemplateResult, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport ColorBlender from \"./colorblender\";\nimport { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport SDInput from \"@cas-smartdesign/lit-input\";\nimport \"@cas-smartdesign/lit-input\";\nimport { Big } from \"big.js\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Slider.ID]: Slider;\n }\n}\n\nimport style from \"./style.scss?inline\";\n\ninterface IEventListenerRegistration {\n remove();\n}\n\nexport interface IValueChangeEvent {\n value: number;\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n \"immediate-value-change\": CustomEvent<IValueChangeEvent>;\n \"value-change\": CustomEvent<IValueChangeEvent>;\n}\n\nexport default interface Slider {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport default class Slider extends LitElement {\n public static readonly ID = \"sd-lit-slider\";\n\n @property({ type: Number })\n private thumbPosition = 0;\n private _value = 0;\n private _relativeValue = 0;\n\n @property({ type: Number, reflect: true })\n public min = 0;\n @property({ type: Number, reflect: true })\n public max = 1;\n @property({ type: Number, reflect: true })\n public step: number;\n @property({ type: Boolean, reflect: true })\n public editable: boolean;\n @property({ type: String, reflect: true })\n public inputSuffix: string;\n @property({ type: Boolean, reflect: true })\n public disabled: boolean;\n @property({ type: String, attribute: true })\n public validationMessage: string;\n @property({ type: String, attribute: true })\n public validationIconSrc: string;\n @property({ type: String, attribute: true })\n public validationLevel: ValidationLevel;\n @property({ type: String, attribute: true })\n public decimalSeparator: string;\n\n @property({ type: Boolean })\n private active: boolean;\n\n private colorBlender: ColorBlender = new ColorBlender();\n private static defaultColor = \"rgb(20, 103, 186)\";\n @property()\n private baseColor: string = Slider.defaultColor;\n\n private resizeObserver: ResizeObserver;\n private lastKnownWidth: number;\n private _trackContainer: HTMLElement;\n private _inputElement: SDInput;\n private updateAlreadyRequested: boolean;\n\n constructor() {\n super();\n this.resizeObserver = new ResizeObserver(() => {\n window.requestAnimationFrame(() => {\n if (this.lastKnownWidth !== this.trackContainerWidth) {\n this.lastKnownWidth = this.trackContainerWidth;\n this.doUpdateRelativeValue(this._relativeValue, true);\n }\n });\n });\n }\n\n public firstUpdated(changedProperties) {\n super.firstUpdated(changedProperties);\n\n this.updateInitialValue();\n\n this.addEventListener(\n this.useTouchEvents() ? \"touchstart\" : \"pointerdown\",\n (event: TouchEvent | PointerEvent) => {\n if (!this.hasAttribute(\"disabled\") && event.composedPath().indexOf(this.inputElement) === -1) {\n event.preventDefault();\n if ((event as PointerEvent).pointerId) {\n this.setPointerCapture((event as PointerEvent).pointerId);\n }\n this.focus();\n this.listenMoveEvents(\n (event as PointerEvent).clientX || (event as TouchEvent).changedTouches[0].clientX,\n );\n }\n },\n );\n this.addEventListener(\"keydown\", this.handleKeyDown, true);\n this.setAttribute(\"aria-valuemin\", this.min.toString());\n this.setAttribute(\"aria-valuemax\", this.max.toString());\n if (!this.hasAttribute(\"tabindex\")) {\n this.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n [\"colors\", \"min\", \"max\", \"step\", \"editable\", \"inputSuffix\", \"value\"].forEach((p) => {\n this.upgradeProperty(p);\n });\n this.resizeObserver.observe(this);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this.lastKnownWidth = undefined;\n this.resizeObserver.disconnect();\n }\n\n private upgradeProperty(propertyName: string): void {\n if (Object.prototype.hasOwnProperty.call(this, propertyName)) {\n const value = this[propertyName];\n delete this[propertyName];\n this[propertyName] = value;\n }\n }\n\n private updateInitialValue(): void {\n const initialValue = Number.parseFloat(this.getAttribute(\"value\")) || this._value;\n if (this.setValueInternal(initialValue)) {\n if (this.inputElement) {\n this.inputElement.value = this.formattedValue();\n }\n this.fireBothValueChangeEvents();\n }\n }\n\n protected shouldUpdate(_changedProperties: PropertyValues): boolean {\n if (_changedProperties.has(\"step\")) {\n // Ensure value is rounded based on step.\n if (this.setValueInternal(this._value)) {\n this.fireBothValueChangeEvents();\n }\n }\n return super.shouldUpdate(_changedProperties);\n }\n\n public get value(): number {\n return this._value;\n }\n\n public set value(newValue: number) {\n const hasChanged = this.setValueInternal(newValue);\n if (hasChanged) {\n this.fireBothValueChangeEvents();\n }\n }\n\n private roundToStep(rawValue: number): number {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let roundedValue = Number.parseFloat(rawValue as any);\n if (Number.isNaN(roundedValue)) {\n return this._value;\n }\n if (this.step) {\n const coercedBigDecimal = Big(roundedValue).div(this.step).round().mul(this.step);\n roundedValue = Number.parseFloat(coercedBigDecimal.toString());\n }\n return roundedValue;\n }\n\n private setValueInternal(newValue: number): boolean {\n const roundedValue = this.roundToStep(newValue);\n if (this._value !== roundedValue) {\n const oldValue = this._value;\n this._value = roundedValue;\n this.relativeValue = (roundedValue - this.min) / (this.max - this.min);\n this.setAttribute(\"aria-valuenow\", this._value.toString());\n this.requestUpdate(\"value\", oldValue);\n return true;\n }\n return false;\n }\n\n get relativeValue() {\n return this._relativeValue;\n }\n\n set relativeValue(newRelativeValue: number) {\n if (this._relativeValue !== newRelativeValue) {\n this.doUpdateRelativeValue(newRelativeValue);\n }\n }\n\n private doUpdateRelativeValue(newRelativeValue: number, skipColorUpdate?: boolean) {\n this._relativeValue = newRelativeValue;\n this.thumbPosition = Math.min(Math.max(0, newRelativeValue), 1) * this.trackContainerWidth;\n const newValueBasedOnRelativeValue = this.min + (this.max - this.min) * this._relativeValue;\n this.setValueInternal(newValueBasedOnRelativeValue);\n if (!skipColorUpdate && this.colors && this.colors.size) {\n this.baseColor = this.colorBlender.blend(this._relativeValue);\n }\n }\n\n public get colors(): Map<number, string> {\n return this.colorBlender.colors;\n }\n\n public set colors(newColors: Map<number, string>) {\n this.colorBlender.colors = newColors;\n if (this.colors && this.colors.size) {\n this.baseColor = this.colorBlender.blend(this._relativeValue);\n } else {\n this.baseColor = Slider.defaultColor;\n }\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n\n public render(): TemplateResult {\n const trackBackgroundColor = this.colorBlender.transparentize(this.baseColor, 0.26);\n const trackContainerStyle = `background-color:${trackBackgroundColor}; right: ${\n this.editable ? \"calc(var(--slider-suffix-width, 50px) + 8px)\" : \"0\"\n }`;\n const trackStyle = `transform: scaleX(${this.relativeValue}); background-color:${this.baseColor};`;\n const thumbStyle = `transform: translateX(${this.thumbPosition}px); background-color:${this.baseColor}; border-color:${trackBackgroundColor};`;\n return html`\n <div id=\"track-container\" style=\"${trackContainerStyle}\">\n <div id=\"track\" style=\"${trackStyle}\"></div>\n </div>\n <div id=\"thumb\" ?active=\"${this.active}\" style=\"${thumbStyle}\"></div>\n ${this.editable &&\n html`\n <sd-lit-input\n .value=\"${this.formattedValue()}\"\n @value-change=\"${this.onInputValueChange}\"\n ?disabled=\"${this.disabled}\"\n ><span slot=\"suffix\">${this.inputSuffix}</span>\n </sd-lit-input>\n `}\n ${this.validationMessage &&\n html`\n <sd-field-validation-message\n .message=\"${this.validationMessage}\"\n .icon=\"${this.validationIconSrc}\"\n .level=\"${this.validationLevel}\"\n >\n </sd-field-validation-message>\n `}\n `;\n }\n\n private listenMoveEvents(currentClientX: number) {\n this.active = true;\n this.onPointerMove(currentClientX);\n\n const eventListenersToRemove: IEventListenerRegistration[] = [];\n const pointerMoveListener = (event) => {\n event.stopPropagation();\n event.preventDefault();\n this.onPointerMove(event.clientX || (event.changedTouches && event.changedTouches[0].clientX));\n };\n const pointerUpListener = () => {\n this.active = false;\n eventListenersToRemove.forEach((reg) => reg.remove());\n this.fireValueChange();\n };\n if (this.useTouchEvents()) {\n eventListenersToRemove.push(this.addPointerEventListener(\"touchmove\", pointerMoveListener));\n eventListenersToRemove.push(this.addPointerEventListener(\"touchend\", pointerUpListener));\n eventListenersToRemove.push(this.addPointerEventListener(\"touchcancel\", pointerUpListener));\n } else {\n eventListenersToRemove.push(this.addPointerEventListener(\"pointermove\", pointerMoveListener));\n eventListenersToRemove.push(this.addPointerEventListener(\"pointerup\", pointerUpListener));\n }\n }\n\n private onPointerMove(clientX: number): void {\n if (this.updateAlreadyRequested) {\n return;\n }\n this.updateAlreadyRequested = true;\n window.requestAnimationFrame(async () => {\n this.updateAlreadyRequested = false;\n this.updateThumbPosition(clientX);\n const previousValue = this.relativeValue;\n this.relativeValue = this.thumbPosition / this.trackContainerWidth;\n if (this.relativeValue !== previousValue) {\n await this.updateComplete;\n this.fireValueChange(true);\n if (!this.active) {\n this.fireValueChange();\n }\n }\n });\n }\n\n private addPointerEventListener(type: string, listener: EventListener): IEventListenerRegistration {\n window.addEventListener(type, listener, true);\n return {\n remove: () => {\n window.removeEventListener(type, listener, true);\n },\n };\n }\n\n private updateThumbPosition(clientX: number): void {\n this.thumbPosition = Math.min(\n this.trackContainerWidth,\n Math.max(0, clientX - this.getBoundingClientRect().left),\n );\n if (this.max - this.min > 1) {\n // Enforce integer steps by pointer move events. Fixes #231868\n const thumbStepForIntegerOffset = this.trackContainerWidth / (this.max - this.min);\n const thumbPositionError = this.thumbPosition % thumbStepForIntegerOffset;\n if (thumbPositionError) {\n if (thumbPositionError < thumbStepForIntegerOffset / 2) {\n this.thumbPosition -= thumbPositionError;\n } else {\n this.thumbPosition += thumbStepForIntegerOffset - thumbPositionError;\n }\n }\n }\n }\n\n private onInputValueChange(event: CustomEvent) {\n this.value = Number(event.detail.value.replace(RegExp(this.escapedDecimalSeparator), \".\"));\n if (String(this.value) !== String(event.detail.value)) {\n (event.target as SDInput).value = String(this.value);\n }\n }\n\n private formattedValue(): string {\n return this.value.toString().replace(/\\./, this.decimalSeparatorOrDefault);\n }\n\n private get escapedDecimalSeparator(): string {\n return this.decimalSeparatorOrDefault.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, \"\\\\$&\");\n }\n\n private get decimalSeparatorOrDefault(): string {\n return this.decimalSeparator || Number(1.1).toLocaleString(this.navigatorLanguage).substring(1, 2);\n }\n\n private get navigatorLanguage(): string {\n if (navigator.languages && navigator.languages.length) {\n return navigator.languages[0];\n } else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (navigator as any).userLanguage || navigator.language || (navigator as any).browserLanguage || \"en\";\n }\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n if (!this.hasAttribute(\"disabled\") && event.composedPath().indexOf(this.inputElement) === -1) {\n let offset = this.step || (this.max - this.min) / 100;\n if (this.max - this.min > 1) {\n // Enforce integer steps by keydown events. Fixes #231868\n offset = Math.round(offset) || 1;\n }\n switch (event.keyCode) {\n case 37:\n case 40:\n this.value = Math.max(this.value - offset, this.min);\n event.preventDefault();\n break;\n case 38:\n case 39:\n this.value = Math.min(this.value + offset, this.max);\n event.preventDefault();\n break;\n }\n }\n }\n\n private get inputElement(): SDInput {\n if (!this._inputElement) {\n this._inputElement = this.shadowRoot.querySelector(\"sd-lit-input\");\n }\n return this._inputElement;\n }\n\n private get trackContainer(): HTMLElement {\n if (!this._trackContainer) {\n this._trackContainer = this.shadowRoot.querySelector(\"#track-container\");\n }\n return this._trackContainer;\n }\n\n private get trackContainerWidth(): number {\n return this.trackContainer && this.trackContainer.offsetWidth;\n }\n\n private fireBothValueChangeEvents(): void {\n this.fireValueChange(true);\n this.fireValueChange();\n }\n\n private fireValueChange(immediate?: boolean): void {\n this.dispatchEvent(\n new CustomEvent<IValueChangeEvent>(`${immediate ? \"immediate-\" : \"\"}value-change`, {\n detail: { value: this.value },\n }),\n );\n }\n\n private useTouchEvents(): boolean {\n return this.hasAttribute(\"use-touch-events\");\n }\n}\n\nif (!customElements.get(Slider.ID)) {\n customElements.define(Slider.ID, Slider);\n}\n"],"names":["ColorBlender","newColors","value","key","color","sortedEntries","relativeValue","leftColor","rightColor","entry","diff","colorA","colorB","relativeOffsetFromA","hexColor","hexRgb","rgbaColor","match","alpha","_Slider","_a","LitElement","changedProperties","event","p","propertyName","initialValue","_changedProperties","newValue","rawValue","roundedValue","coercedBigDecimal","Big","oldValue","newRelativeValue","skipColorUpdate","newValueBasedOnRelativeValue","css","unsafeCSS","style","trackBackgroundColor","trackContainerStyle","trackStyle","thumbStyle","html","currentClientX","eventListenersToRemove","pointerMoveListener","pointerUpListener","reg","clientX","previousValue","type","listener","thumbStepForIntegerOffset","thumbPositionError","offset","immediate","__decorateClass","property","Slider"],"mappings":"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"}
1
+ {"version":3,"file":"slider.mjs","sources":["../colorblender.ts","../slider.ts"],"sourcesContent":["import hexRgb from \"hex-rgb\";\n\nexport interface IColor {\n red: number;\n green: number;\n blue: number;\n alpha: number;\n}\n\nexport default class ColorBlender {\n private _rgbaColors: Map<number, IColor> = new Map();\n private _originalColors: Map<number, string> = new Map();\n\n public get colors(): Map<number, string> {\n return this._originalColors;\n }\n\n public set colors(newColors: Map<number, string>) {\n this._rgbaColors.clear();\n this._originalColors = newColors;\n if (newColors && newColors.size) {\n const invalidColorKey = Array.from(newColors.keys()).find((value) => {\n return value < 0 || value > 1;\n });\n if (invalidColorKey) {\n throw Error(\n \"The keys of the colors must represent the relative value where the color is fully applied.\",\n );\n }\n newColors.forEach((value, key) => {\n const color: IColor = this.convertFromRGBAString(value) || this.convertFromHex(value);\n if (Object.keys(color).length === 0 && color.constructor === Object) {\n throw Error(`Cannot convert color: ${value} to rgba-color`);\n } else {\n this._rgbaColors.set(key, color);\n }\n });\n const sortedEntries = Array.from(this._rgbaColors.entries()).sort();\n this._rgbaColors = new Map(sortedEntries);\n }\n }\n\n public blend(relativeValue: number): string {\n if (!this._rgbaColors.size) {\n throw Error(\"It is not possible to blend without a color list.\");\n }\n let leftColor: [number, IColor];\n let rightColor: [number, IColor];\n for (const entry of this._rgbaColors) {\n if (!leftColor) {\n leftColor = entry;\n }\n if (entry[0] < relativeValue) {\n leftColor = entry;\n } else if (entry[0] === relativeValue) {\n leftColor = rightColor = entry;\n break;\n } else {\n rightColor = entry;\n break;\n }\n }\n if (!rightColor) {\n rightColor = leftColor;\n }\n const diff = rightColor[0] - leftColor[0];\n if (diff) {\n return this.blendColors(leftColor[1], rightColor[1], (relativeValue - leftColor[0]) / diff);\n } else {\n return this.convertToRGBAString(leftColor[1]);\n }\n }\n\n private blendColors(colorA: IColor, colorB: IColor, relativeOffsetFromA: number): string {\n return this.convertToRGBAString({\n red: Math.round(colorA.red + (colorB.red - colorA.red) * relativeOffsetFromA),\n green: Math.round(colorA.green + (colorB.green - colorA.green) * relativeOffsetFromA),\n blue: Math.round(colorA.blue + (colorB.blue - colorA.blue) * relativeOffsetFromA),\n alpha: colorA.alpha + (colorB.alpha - colorA.alpha) * relativeOffsetFromA,\n });\n }\n\n private convertFromHex(hexColor: string): IColor {\n const color = hexRgb(hexColor);\n if (color.alpha > 1) {\n color.alpha /= 255;\n }\n return color;\n }\n\n private convertFromRGBAString(rgbaColor: string): IColor {\n const match = rgbaColor.match(/rgba?\\((\\d{1,3}), ?(\\d{1,3}), ?(\\d{1,3})\\)?(?:, ?(\\d(?:\\.\\d?))\\))?/);\n return match\n ? {\n red: parseInt(match[1], 10),\n green: parseInt(match[2], 10),\n blue: parseInt(match[3], 10),\n alpha: parseInt(match[4], 10) || 1,\n }\n : null;\n }\n\n public transparentize(color: string, alpha: number): string {\n return this.convertToRGBAString(this.convertFromRGBAString(color), alpha);\n }\n\n private convertToRGBAString(color: IColor, alpha?: number): string {\n return `rgba(${color.red},${color.green},${color.blue},${alpha || color.alpha})`;\n }\n}\n","import { LitElement, html, PropertyValues, unsafeCSS, TemplateResult, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport ColorBlender from \"./colorblender\";\nimport { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport SDInput from \"@cas-smartdesign/lit-input\";\nimport \"@cas-smartdesign/lit-input\";\nimport { Big } from \"big.js\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Slider.ID]: Slider;\n }\n}\n\nimport style from \"./style.scss?inline\";\n\ninterface IEventListenerRegistration {\n remove();\n}\n\nexport interface IValueChangeEvent {\n value: number;\n}\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n \"immediate-value-change\": CustomEvent<IValueChangeEvent>;\n \"value-change\": CustomEvent<IValueChangeEvent>;\n}\n\nexport default interface Slider {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport default class Slider extends LitElement {\n public static readonly ID = \"sd-lit-slider\";\n\n @property({ type: Number })\n private thumbPosition = 0;\n private _value = 0;\n private _relativeValue = 0;\n\n @property({ type: Number, reflect: true })\n public min = 0;\n @property({ type: Number, reflect: true })\n public max = 1;\n @property({ type: Number, reflect: true })\n public step: number;\n @property({ type: Boolean, reflect: true })\n public editable: boolean;\n @property({ type: Boolean, reflect: true })\n public clampValue: boolean;\n @property({ type: String, reflect: true })\n public inputSuffix: string;\n @property({ type: Boolean, reflect: true })\n public disabled: boolean;\n @property({ type: String, attribute: true })\n public validationMessage: string;\n @property({ type: String, attribute: true })\n public validationIconSrc: string;\n @property({ type: String, attribute: true })\n public validationLevel: ValidationLevel;\n @property({ type: String, attribute: true })\n public decimalSeparator: string;\n\n @property({ type: Boolean })\n private active: boolean;\n\n private colorBlender: ColorBlender = new ColorBlender();\n private static defaultColor = \"rgb(20, 103, 186)\";\n @property()\n private baseColor: string = Slider.defaultColor;\n\n private resizeObserver: ResizeObserver;\n private lastKnownWidth: number;\n private _trackContainer: HTMLElement;\n private _inputElement: SDInput;\n private updateAlreadyRequested: boolean;\n\n constructor() {\n super();\n this.resizeObserver = new ResizeObserver(() => {\n window.requestAnimationFrame(() => {\n if (this.lastKnownWidth !== this.trackContainerWidth) {\n this.lastKnownWidth = this.trackContainerWidth;\n this.doUpdateRelativeValue(this._relativeValue, true);\n }\n });\n });\n }\n\n public firstUpdated(changedProperties) {\n super.firstUpdated(changedProperties);\n\n this.updateValue(Number.parseFloat(this.getAttribute(\"value\")) || this._value);\n\n this.addEventListener(\n this.useTouchEvents() ? \"touchstart\" : \"pointerdown\",\n (event: TouchEvent | PointerEvent) => {\n if (!this.hasAttribute(\"disabled\") && event.composedPath().indexOf(this.inputElement) === -1) {\n event.preventDefault();\n if ((event as PointerEvent).pointerId) {\n this.setPointerCapture((event as PointerEvent).pointerId);\n }\n this.focus();\n this.listenMoveEvents(\n (event as PointerEvent).clientX || (event as TouchEvent).changedTouches[0].clientX,\n );\n }\n },\n );\n this.addEventListener(\"keydown\", this.handleKeyDown, true);\n this.setAttribute(\"aria-valuemin\", this.min.toString());\n this.setAttribute(\"aria-valuemax\", this.max.toString());\n if (!this.hasAttribute(\"tabindex\")) {\n this.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n [\"colors\", \"min\", \"max\", \"step\", \"editable\", \"inputSuffix\", \"value\"].forEach((p) => {\n this.upgradeProperty(p);\n });\n this.resizeObserver.observe(this);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this.lastKnownWidth = undefined;\n this.resizeObserver.disconnect();\n }\n\n private upgradeProperty(propertyName: string): void {\n if (Object.prototype.hasOwnProperty.call(this, propertyName)) {\n const value = this[propertyName];\n delete this[propertyName];\n this[propertyName] = value;\n }\n }\n\n static get observedAttributes() {\n const attributes = super.observedAttributes;\n attributes.push(\"value\");\n return attributes;\n }\n\n attributeChangedCallback(name: string, old: string | null, value: string | null): void {\n super.attributeChangedCallback(name, old, value);\n\n if ((name === \"value\" || name == \"step\") && this.hasUpdated) {\n this.updateValue(Number.parseFloat(value));\n }\n }\n\n private updateValue(newValue: number) {\n if (this.setValueInternal(newValue)) {\n if (this.inputElement) {\n this.inputElement.value = this.formattedValue();\n }\n if (this._value != newValue) {\n this.fireBothValueChangeEvents();\n }\n }\n }\n\n public get value(): number {\n return this._value;\n }\n\n public set value(newValue: number) {\n const hasChanged = this.setValueInternal(newValue);\n if (hasChanged) {\n this.fireBothValueChangeEvents();\n }\n }\n\n private roundToStep(rawValue: number): number {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let roundedValue = Number.parseFloat(rawValue as any);\n if (Number.isNaN(roundedValue)) {\n return this._value;\n }\n if (this.step && roundedValue >= this.min && roundedValue <= this.max) {\n const offsetBigDecimal = Big(roundedValue)\n .minus(this.min)\n .div(this.step)\n .round()\n .mul(this.step)\n .plus(this.min);\n roundedValue = Number.parseFloat(offsetBigDecimal.toString());\n }\n return roundedValue;\n }\n\n private setValueInternal(newValue: number): boolean {\n const roundedValue = this.roundToStep(newValue);\n const clampedValue = this.clampValue ? Math.max(this.min, Math.min(this.max, roundedValue)) : roundedValue;\n if (this._value !== clampedValue) {\n const oldValue = this._value;\n this._value = clampedValue;\n this.relativeValue = (clampedValue - this.min) / (this.max - this.min);\n this.setAttribute(\"aria-valuenow\", this._value.toString());\n this.requestUpdate(\"value\", oldValue);\n return true;\n }\n return false;\n }\n\n get relativeValue() {\n return this._relativeValue;\n }\n\n set relativeValue(newRelativeValue: number) {\n if (this._relativeValue !== newRelativeValue) {\n this.doUpdateRelativeValue(newRelativeValue);\n }\n }\n\n private doUpdateRelativeValue(newRelativeValue: number, skipColorUpdate?: boolean) {\n this._relativeValue = newRelativeValue;\n this.thumbPosition = Math.min(Math.max(0, newRelativeValue), 1) * this.trackContainerWidth;\n const newValueBasedOnRelativeValue = this.min + (this.max - this.min) * this._relativeValue;\n this.setValueInternal(newValueBasedOnRelativeValue);\n if (!skipColorUpdate && this.colors && this.colors.size) {\n this.baseColor = this.colorBlender.blend(this._relativeValue);\n }\n }\n\n public get colors(): Map<number, string> {\n return this.colorBlender.colors;\n }\n\n public set colors(newColors: Map<number, string>) {\n this.colorBlender.colors = newColors;\n if (this.colors && this.colors.size) {\n this.baseColor = this.colorBlender.blend(this._relativeValue);\n } else {\n this.baseColor = Slider.defaultColor;\n }\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n\n public render(): TemplateResult {\n const trackBackgroundColor = this.colorBlender.transparentize(this.baseColor, 0.26);\n const trackContainerStyle = `background-color:${trackBackgroundColor}; right: ${\n this.editable ? \"calc(var(--slider-suffix-width, 50px) + 8px)\" : \"0\"\n }`;\n const trackStyle = `transform: scaleX(${this.relativeValue}); background-color:${this.baseColor};`;\n const thumbStyle = `transform: translateX(${this.thumbPosition}px); background-color:${this.baseColor}; border-color:${trackBackgroundColor};`;\n return html`\n <div id=\"track-container\" style=\"${trackContainerStyle}\">\n <div id=\"track\" style=\"${trackStyle}\"></div>\n </div>\n <div id=\"thumb\" ?active=\"${this.active}\" style=\"${thumbStyle}\"></div>\n ${this.editable &&\n html`\n <sd-lit-input\n .value=\"${this.formattedValue()}\"\n @value-change=\"${this.onInputValueChange}\"\n ?disabled=\"${this.disabled}\"\n ><span slot=\"suffix\">${this.inputSuffix}</span>\n </sd-lit-input>\n `}\n ${this.validationMessage &&\n html`\n <sd-field-validation-message\n .message=\"${this.validationMessage}\"\n .icon=\"${this.validationIconSrc}\"\n .level=\"${this.validationLevel}\"\n >\n </sd-field-validation-message>\n `}\n `;\n }\n\n private listenMoveEvents(currentClientX: number) {\n this.active = true;\n this.onPointerMove(currentClientX);\n\n const eventListenersToRemove: IEventListenerRegistration[] = [];\n const pointerMoveListener = (event) => {\n event.stopPropagation();\n event.preventDefault();\n this.onPointerMove(event.clientX || (event.changedTouches && event.changedTouches[0].clientX));\n };\n const pointerUpListener = () => {\n this.active = false;\n eventListenersToRemove.forEach((reg) => reg.remove());\n this.fireValueChange();\n };\n if (this.useTouchEvents()) {\n eventListenersToRemove.push(this.addPointerEventListener(\"touchmove\", pointerMoveListener));\n eventListenersToRemove.push(this.addPointerEventListener(\"touchend\", pointerUpListener));\n eventListenersToRemove.push(this.addPointerEventListener(\"touchcancel\", pointerUpListener));\n } else {\n eventListenersToRemove.push(this.addPointerEventListener(\"pointermove\", pointerMoveListener));\n eventListenersToRemove.push(this.addPointerEventListener(\"pointerup\", pointerUpListener));\n }\n }\n\n private onPointerMove(clientX: number): void {\n if (this.updateAlreadyRequested) {\n return;\n }\n this.updateAlreadyRequested = true;\n window.requestAnimationFrame(async () => {\n this.updateAlreadyRequested = false;\n this.updateThumbPosition(clientX);\n const previousValue = this.relativeValue;\n this.relativeValue = this.thumbPosition / this.trackContainerWidth;\n if (this.relativeValue !== previousValue) {\n await this.updateComplete;\n this.fireValueChange(true);\n if (!this.active) {\n this.fireValueChange();\n }\n }\n });\n }\n\n private addPointerEventListener(type: string, listener: EventListener): IEventListenerRegistration {\n window.addEventListener(type, listener, true);\n return {\n remove: () => {\n window.removeEventListener(type, listener, true);\n },\n };\n }\n\n private updateThumbPosition(clientX: number): void {\n this.thumbPosition = Math.min(\n this.trackContainerWidth,\n Math.max(0, clientX - this.getBoundingClientRect().left),\n );\n if (this.max - this.min > 1) {\n // Enforce integer steps by pointer move events. Fixes #231868\n const thumbStepForIntegerOffset = this.trackContainerWidth / (this.max - this.min);\n const thumbPositionError = this.thumbPosition % thumbStepForIntegerOffset;\n if (thumbPositionError) {\n if (thumbPositionError < thumbStepForIntegerOffset / 2) {\n this.thumbPosition -= thumbPositionError;\n } else {\n this.thumbPosition += thumbStepForIntegerOffset - thumbPositionError;\n }\n }\n }\n }\n\n private onInputValueChange(event: CustomEvent) {\n this.value = Number(event.detail.value.replace(RegExp(this.escapedDecimalSeparator), \".\"));\n if (String(this.value) !== String(event.detail.value)) {\n (event.target as SDInput).value = String(this.value);\n }\n }\n\n private formattedValue(): string {\n return this.value.toString().replace(/\\./, this.decimalSeparatorOrDefault);\n }\n\n private get escapedDecimalSeparator(): string {\n return this.decimalSeparatorOrDefault.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, \"\\\\$&\");\n }\n\n private get decimalSeparatorOrDefault(): string {\n return this.decimalSeparator || Number(1.1).toLocaleString(this.navigatorLanguage).substring(1, 2);\n }\n\n private get navigatorLanguage(): string {\n if (navigator.languages && navigator.languages.length) {\n return navigator.languages[0];\n } else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (navigator as any).userLanguage || navigator.language || (navigator as any).browserLanguage || \"en\";\n }\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n if (!this.hasAttribute(\"disabled\") && event.composedPath().indexOf(this.inputElement) === -1) {\n let offset = this.step || (this.max - this.min) / 100;\n if (this.max - this.min > 1) {\n // Enforce integer steps by keydown events. Fixes #231868\n offset = Math.round(offset) || 1;\n }\n switch (event.keyCode) {\n case 37:\n case 40:\n this.value = Math.max(this.value - offset, this.min);\n event.preventDefault();\n break;\n case 38:\n case 39:\n this.value = Math.min(this.value + offset, this.max);\n event.preventDefault();\n break;\n }\n }\n }\n\n private get inputElement(): SDInput {\n if (!this._inputElement) {\n this._inputElement = this.shadowRoot.querySelector(\"sd-lit-input\");\n }\n return this._inputElement;\n }\n\n private get trackContainer(): HTMLElement {\n if (!this._trackContainer) {\n this._trackContainer = this.shadowRoot.querySelector(\"#track-container\");\n }\n return this._trackContainer;\n }\n\n private get trackContainerWidth(): number {\n return this.trackContainer && this.trackContainer.offsetWidth;\n }\n\n private fireBothValueChangeEvents(): void {\n this.fireValueChange(true);\n this.fireValueChange();\n }\n\n private fireValueChange(immediate?: boolean): void {\n this.dispatchEvent(\n new CustomEvent<IValueChangeEvent>(`${immediate ? \"immediate-\" : \"\"}value-change`, {\n detail: { value: this.value },\n }),\n );\n }\n\n private useTouchEvents(): boolean {\n return this.hasAttribute(\"use-touch-events\");\n }\n}\n\nif (!customElements.get(Slider.ID)) {\n customElements.define(Slider.ID, Slider);\n}\n"],"names":["ColorBlender","newColors","value","key","color","sortedEntries","relativeValue","leftColor","rightColor","entry","diff","colorA","colorB","relativeOffsetFromA","hexColor","hexRgb","rgbaColor","match","alpha","_Slider","_a","LitElement","changedProperties","event","p","propertyName","attributes","name","old","newValue","rawValue","roundedValue","offsetBigDecimal","Big","clampedValue","oldValue","newRelativeValue","skipColorUpdate","newValueBasedOnRelativeValue","css","unsafeCSS","style","trackBackgroundColor","trackContainerStyle","trackStyle","thumbStyle","html","currentClientX","eventListenersToRemove","pointerMoveListener","pointerUpListener","reg","clientX","previousValue","type","listener","thumbStepForIntegerOffset","thumbPositionError","offset","immediate","__decorateClass","property","Slider"],"mappings":";;;;;AASA,MAAqBA,EAAa;AAAA,EAAlC,cAAA;AACY,SAAA,kCAAuC,OACvC,KAAA,sCAA2C;EAAI;AAAA,EAEvD,IAAW,SAA8B;AACrC,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,OAAOC,GAAgC;AAG1C,QAFJ,KAAK,YAAY,SACjB,KAAK,kBAAkBA,GACnBA,KAAaA,EAAU,MAAM;AAI7B,UAHwB,MAAM,KAAKA,EAAU,MAAM,EAAE,KAAK,CAACC,MAChDA,IAAQ,KAAKA,IAAQ,CAC/B;AAES,cAAA;AAAA,UACF;AAAA,QAAA;AAGE,MAAAD,EAAA,QAAQ,CAACC,GAAOC,MAAQ;AAC9B,cAAMC,IAAgB,KAAK,sBAAsBF,CAAK,KAAK,KAAK,eAAeA,CAAK;AAChF,YAAA,OAAO,KAAKE,CAAK,EAAE,WAAW,KAAKA,EAAM,gBAAgB;AACnD,gBAAA,MAAM,yBAAyBF,CAAK,gBAAgB;AAErD,aAAA,YAAY,IAAIC,GAAKC,CAAK;AAAA,MACnC,CACH;AACK,YAAAC,IAAgB,MAAM,KAAK,KAAK,YAAY,QAAQ,CAAC,EAAE;AACxD,WAAA,cAAc,IAAI,IAAIA,CAAa;AAAA,IAC5C;AAAA,EACJ;AAAA,EAEO,MAAMC,GAA+B;AACpC,QAAA,CAAC,KAAK,YAAY;AAClB,YAAM,MAAM,mDAAmD;AAE/D,QAAAC,GACAC;AACO,eAAAC,KAAS,KAAK;AAIjB,UAHCF,MACWA,IAAAE,IAEZA,EAAM,CAAC,IAAIH;AACC,QAAAC,IAAAE;AAAA,eACLA,EAAM,CAAC,MAAMH,GAAe;AACnC,QAAAC,IAAYC,IAAaC;AACzB;AAAA,MAAA,OACG;AACU,QAAAD,IAAAC;AACb;AAAA,MACJ;AAEJ,IAAKD,MACYA,IAAAD;AAEjB,UAAMG,IAAOF,EAAW,CAAC,IAAID,EAAU,CAAC;AACxC,WAAIG,IACO,KAAK,YAAYH,EAAU,CAAC,GAAGC,EAAW,CAAC,IAAIF,IAAgBC,EAAU,CAAC,KAAKG,CAAI,IAEnF,KAAK,oBAAoBH,EAAU,CAAC,CAAC;AAAA,EAEpD;AAAA,EAEQ,YAAYI,GAAgBC,GAAgBC,GAAqC;AACrF,WAAO,KAAK,oBAAoB;AAAA,MAC5B,KAAK,KAAK,MAAMF,EAAO,OAAOC,EAAO,MAAMD,EAAO,OAAOE,CAAmB;AAAA,MAC5E,OAAO,KAAK,MAAMF,EAAO,SAASC,EAAO,QAAQD,EAAO,SAASE,CAAmB;AAAA,MACpF,MAAM,KAAK,MAAMF,EAAO,QAAQC,EAAO,OAAOD,EAAO,QAAQE,CAAmB;AAAA,MAChF,OAAOF,EAAO,SAASC,EAAO,QAAQD,EAAO,SAASE;AAAA,IAAA,CACzD;AAAA,EACL;AAAA,EAEQ,eAAeC,GAA0B;AACvC,UAAAV,IAAQW,EAAOD,CAAQ;AACzB,WAAAV,EAAM,QAAQ,MACdA,EAAM,SAAS,MAEZA;AAAA,EACX;AAAA,EAEQ,sBAAsBY,GAA2B;AAC/C,UAAAC,IAAQD,EAAU,MAAM,oEAAoE;AAClG,WAAOC,IACD;AAAA,MACI,KAAK,SAASA,EAAM,CAAC,GAAG,EAAE;AAAA,MAC1B,OAAO,SAASA,EAAM,CAAC,GAAG,EAAE;AAAA,MAC5B,MAAM,SAASA,EAAM,CAAC,GAAG,EAAE;AAAA,MAC3B,OAAO,SAASA,EAAM,CAAC,GAAG,EAAE,KAAK;AAAA,IAErC,IAAA;AAAA,EACV;AAAA,EAEO,eAAeb,GAAec,GAAuB;AACxD,WAAO,KAAK,oBAAoB,KAAK,sBAAsBd,CAAK,GAAGc,CAAK;AAAA,EAC5E;AAAA,EAEQ,oBAAoBd,GAAec,GAAwB;AAC/D,WAAO,QAAQd,EAAM,GAAG,IAAIA,EAAM,KAAK,IAAIA,EAAM,IAAI,IAAIc,KAASd,EAAM,KAAK;AAAA,EACjF;AACJ;;;;;;;ACxDA,MAAqBe,KAArBC,IAAA,cAAoCC,EAAW;AAAA,EA6C3C,cAAc;AACJ,aA1CV,KAAQ,gBAAgB,GACxB,KAAQ,SAAS,GACjB,KAAQ,iBAAiB,GAGzB,KAAO,MAAM,GAEb,KAAO,MAAM,GAuBL,KAAA,eAA6B,IAAIrB,KAGzC,KAAQ,YAAoBoB,EAAO,cAU1B,KAAA,iBAAiB,IAAI,eAAe,MAAM;AAC3C,aAAO,sBAAsB,MAAM;AAC3B,QAAA,KAAK,mBAAmB,KAAK,wBAC7B,KAAK,iBAAiB,KAAK,qBACtB,KAAA,sBAAsB,KAAK,gBAAgB,EAAI;AAAA,MACxD,CACH;AAAA,IAAA,CACJ;AAAA,EACL;AAAA,EAEO,aAAaE,GAAmB;AACnC,UAAM,aAAaA,CAAiB,GAE/B,KAAA,YAAY,OAAO,WAAW,KAAK,aAAa,OAAO,CAAC,KAAK,KAAK,MAAM,GAExE,KAAA;AAAA,MACD,KAAK,mBAAmB,eAAe;AAAA,MACvC,CAACC,MAAqC;AAClC,QAAI,CAAC,KAAK,aAAa,UAAU,KAAKA,EAAM,aAAa,EAAE,QAAQ,KAAK,YAAY,MAAM,OACtFA,EAAM,eAAe,GAChBA,EAAuB,aACnB,KAAA,kBAAmBA,EAAuB,SAAS,GAE5D,KAAK,MAAM,GACN,KAAA;AAAA,UACAA,EAAuB,WAAYA,EAAqB,eAAe,CAAC,EAAE;AAAA,QAAA;AAAA,MAGvF;AAAA,IAAA,GAEJ,KAAK,iBAAiB,WAAW,KAAK,eAAe,EAAI,GACzD,KAAK,aAAa,iBAAiB,KAAK,IAAI,UAAU,GACtD,KAAK,aAAa,iBAAiB,KAAK,IAAI,UAAU,GACjD,KAAK,aAAa,UAAU,KACxB,KAAA,aAAa,YAAY,GAAG;AAAA,EAEzC;AAAA,EAEO,oBAAoB;AACvB,UAAM,kBAAkB,GACvB,CAAA,UAAU,OAAO,OAAO,QAAQ,YAAY,eAAe,OAAO,EAAE,QAAQ,CAACC,MAAM;AAChF,WAAK,gBAAgBA,CAAC;AAAA,IAAA,CACzB,GACI,KAAA,eAAe,QAAQ,IAAI;AAAA,EACpC;AAAA,EAEO,uBAAuB;AAC1B,UAAM,qBAAqB,GAC3B,KAAK,iBAAiB,QACtB,KAAK,eAAe;EACxB;AAAA,EAEQ,gBAAgBC,GAA4B;AAChD,QAAI,OAAO,UAAU,eAAe,KAAK,MAAMA,CAAY,GAAG;AACpD,YAAAvB,IAAQ,KAAKuB,CAAY;AAC/B,aAAO,KAAKA,CAAY,GACxB,KAAKA,CAAY,IAAIvB;AAAA,IACzB;AAAA,EACJ;AAAA,EAEA,WAAW,qBAAqB;AAC5B,UAAMwB,IAAa,MAAM;AACzB,WAAAA,EAAW,KAAK,OAAO,GAChBA;AAAA,EACX;AAAA,EAEA,yBAAyBC,GAAcC,GAAoB1B,GAA4B;AAC7E,UAAA,yBAAyByB,GAAMC,GAAK1B,CAAK,IAE1CyB,MAAS,WAAWA,KAAQ,WAAW,KAAK,cAC7C,KAAK,YAAY,OAAO,WAAWzB,CAAK,CAAC;AAAA,EAEjD;AAAA,EAEQ,YAAY2B,GAAkB;AAC9B,IAAA,KAAK,iBAAiBA,CAAQ,MAC1B,KAAK,iBACA,KAAA,aAAa,QAAQ,KAAK,eAAe,IAE9C,KAAK,UAAUA,KACf,KAAK,0BAA0B;AAAA,EAG3C;AAAA,EAEA,IAAW,QAAgB;AACvB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,MAAMA,GAAkB;AAE/B,IADmB,KAAK,iBAAiBA,CAAQ,KAE7C,KAAK,0BAA0B;AAAA,EAEvC;AAAA,EAEQ,YAAYC,GAA0B;AAEtC,QAAAC,IAAe,OAAO,WAAWD,CAAe;AAChD,QAAA,OAAO,MAAMC,CAAY;AACzB,aAAO,KAAK;AAEhB,QAAI,KAAK,QAAQA,KAAgB,KAAK,OAAOA,KAAgB,KAAK,KAAK;AAC7D,YAAAC,IAAmBC,EAAIF,CAAY,EACpC,MAAM,KAAK,GAAG,EACd,IAAI,KAAK,IAAI,EACb,MAAA,EACA,IAAI,KAAK,IAAI,EACb,KAAK,KAAK,GAAG;AAClB,MAAAA,IAAe,OAAO,WAAWC,EAAiB,SAAU,CAAA;AAAA,IAChE;AACO,WAAAD;AAAA,EACX;AAAA,EAEQ,iBAAiBF,GAA2B;AAC1C,UAAAE,IAAe,KAAK,YAAYF,CAAQ,GACxCK,IAAe,KAAK,aAAa,KAAK,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAKH,CAAY,CAAC,IAAIA;AAC1F,QAAA,KAAK,WAAWG,GAAc;AAC9B,YAAMC,IAAW,KAAK;AACtB,kBAAK,SAASD,GACd,KAAK,iBAAiBA,IAAe,KAAK,QAAQ,KAAK,MAAM,KAAK,MAClE,KAAK,aAAa,iBAAiB,KAAK,OAAO,UAAU,GACpD,KAAA,cAAc,SAASC,CAAQ,GAC7B;AAAA,IACX;AACO,WAAA;AAAA,EACX;AAAA,EAEA,IAAI,gBAAgB;AAChB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,cAAcC,GAA0B;AACpC,IAAA,KAAK,mBAAmBA,KACxB,KAAK,sBAAsBA,CAAgB;AAAA,EAEnD;AAAA,EAEQ,sBAAsBA,GAA0BC,GAA2B;AAC/E,SAAK,iBAAiBD,GACjB,KAAA,gBAAgB,KAAK,IAAI,KAAK,IAAI,GAAGA,CAAgB,GAAG,CAAC,IAAI,KAAK;AACvE,UAAME,IAA+B,KAAK,OAAO,KAAK,MAAM,KAAK,OAAO,KAAK;AAC7E,SAAK,iBAAiBA,CAA4B,GAC9C,CAACD,KAAmB,KAAK,UAAU,KAAK,OAAO,SAC/C,KAAK,YAAY,KAAK,aAAa,MAAM,KAAK,cAAc;AAAA,EAEpE;AAAA,EAEA,IAAW,SAA8B;AACrC,WAAO,KAAK,aAAa;AAAA,EAC7B;AAAA,EAEA,IAAW,OAAOpC,GAAgC;AAC9C,SAAK,aAAa,SAASA,GACvB,KAAK,UAAU,KAAK,OAAO,OAC3B,KAAK,YAAY,KAAK,aAAa,MAAM,KAAK,cAAc,IAE5D,KAAK,YAAYmB,EAAO;AAAA,EAEhC;AAAA,EAEA,WAAW,SAAS;AACT,WAAA;AAAA,MACHmB;AAAA,kBACMC,EAAUC,CAAK,CAAC;AAAA;AAAA,IAAA;AAAA,EAG9B;AAAA,EAEO,SAAyB;AAC5B,UAAMC,IAAuB,KAAK,aAAa,eAAe,KAAK,WAAW,IAAI,GAC5EC,IAAsB,oBAAoBD,CAAoB,YAChE,KAAK,WAAW,iDAAiD,GACrE,IACME,IAAa,qBAAqB,KAAK,aAAa,uBAAuB,KAAK,SAAS,KACzFC,IAAa,yBAAyB,KAAK,aAAa,yBAAyB,KAAK,SAAS,kBAAkBH,CAAoB;AACpI,WAAAI;AAAA,+CACgCH,CAAmB;AAAA,yCACzBC,CAAU;AAAA;AAAA,uCAEZ,KAAK,MAAM,YAAYC,CAAU;AAAA,cAC1D,KAAK,YACPC;AAAA;AAAA,8BAEkB,KAAK,gBAAgB;AAAA,qCACd,KAAK,kBAAkB;AAAA,iCAC3B,KAAK,QAAQ;AAAA,2CACH,KAAK,WAAW;AAAA;AAAA,aAE9C;AAAA,cACC,KAAK,qBACPA;AAAA;AAAA,gCAEoB,KAAK,iBAAiB;AAAA,6BACzB,KAAK,iBAAiB;AAAA,8BACrB,KAAK,eAAe;AAAA;AAAA;AAAA,aAGrC;AAAA;AAAA,EAET;AAAA,EAEQ,iBAAiBC,GAAwB;AAC7C,SAAK,SAAS,IACd,KAAK,cAAcA,CAAc;AAEjC,UAAMC,IAAuD,CAAA,GACvDC,IAAsB,CAAC1B,MAAU;AACnC,MAAAA,EAAM,gBAAgB,GACtBA,EAAM,eAAe,GAChB,KAAA,cAAcA,EAAM,WAAYA,EAAM,kBAAkBA,EAAM,eAAe,CAAC,EAAE,OAAQ;AAAA,IAAA,GAE3F2B,IAAoB,MAAM;AAC5B,WAAK,SAAS,IACdF,EAAuB,QAAQ,CAACG,MAAQA,EAAI,OAAQ,CAAA,GACpD,KAAK,gBAAgB;AAAA,IAAA;AAErB,IAAA,KAAK,oBACLH,EAAuB,KAAK,KAAK,wBAAwB,aAAaC,CAAmB,CAAC,GAC1FD,EAAuB,KAAK,KAAK,wBAAwB,YAAYE,CAAiB,CAAC,GACvFF,EAAuB,KAAK,KAAK,wBAAwB,eAAeE,CAAiB,CAAC,MAE1FF,EAAuB,KAAK,KAAK,wBAAwB,eAAeC,CAAmB,CAAC,GAC5FD,EAAuB,KAAK,KAAK,wBAAwB,aAAaE,CAAiB,CAAC;AAAA,EAEhG;AAAA,EAEQ,cAAcE,GAAuB;AACzC,IAAI,KAAK,2BAGT,KAAK,yBAAyB,IAC9B,OAAO,sBAAsB,YAAY;AACrC,WAAK,yBAAyB,IAC9B,KAAK,oBAAoBA,CAAO;AAChC,YAAMC,IAAgB,KAAK;AACtB,WAAA,gBAAgB,KAAK,gBAAgB,KAAK,qBAC3C,KAAK,kBAAkBA,MACvB,MAAM,KAAK,gBACX,KAAK,gBAAgB,EAAI,GACpB,KAAK,UACN,KAAK,gBAAgB;AAAA,IAE7B,CACH;AAAA,EACL;AAAA,EAEQ,wBAAwBC,GAAcC,GAAqD;AACxF,kBAAA,iBAAiBD,GAAMC,GAAU,EAAI,GACrC;AAAA,MACH,QAAQ,MAAM;AACH,eAAA,oBAAoBD,GAAMC,GAAU,EAAI;AAAA,MACnD;AAAA,IAAA;AAAA,EAER;AAAA,EAEQ,oBAAoBH,GAAuB;AAK/C,QAJA,KAAK,gBAAgB,KAAK;AAAA,MACtB,KAAK;AAAA,MACL,KAAK,IAAI,GAAGA,IAAU,KAAK,wBAAwB,IAAI;AAAA,IAAA,GAEvD,KAAK,MAAM,KAAK,MAAM,GAAG;AAEzB,YAAMI,IAA4B,KAAK,uBAAuB,KAAK,MAAM,KAAK,MACxEC,IAAqB,KAAK,gBAAgBD;AAChD,MAAIC,MACIA,IAAqBD,IAA4B,IACjD,KAAK,iBAAiBC,IAEtB,KAAK,iBAAiBD,IAA4BC;AAAA,IAG9D;AAAA,EACJ;AAAA,EAEQ,mBAAmBlC,GAAoB;AACtC,SAAA,QAAQ,OAAOA,EAAM,OAAO,MAAM,QAAQ,OAAO,KAAK,uBAAuB,GAAG,GAAG,CAAC,GACrF,OAAO,KAAK,KAAK,MAAM,OAAOA,EAAM,OAAO,KAAK,MAC/CA,EAAM,OAAmB,QAAQ,OAAO,KAAK,KAAK;AAAA,EAE3D;AAAA,EAEQ,iBAAyB;AAC7B,WAAO,KAAK,MAAM,WAAW,QAAQ,MAAM,KAAK,yBAAyB;AAAA,EAC7E;AAAA,EAEA,IAAY,0BAAkC;AAC1C,WAAO,KAAK,0BAA0B,QAAQ,4BAA4B,MAAM;AAAA,EACpF;AAAA,EAEA,IAAY,4BAAoC;AACrC,WAAA,KAAK,oBAA2B,IAAK,eAAe,KAAK,iBAAiB,EAAE,UAAU,GAAG,CAAC;AAAA,EACrG;AAAA,EAEA,IAAY,oBAA4B;AACpC,WAAI,UAAU,aAAa,UAAU,UAAU,SACpC,UAAU,UAAU,CAAC,IAGpB,UAAkB,gBAAgB,UAAU,YAAa,UAAkB,mBAAmB;AAAA,EAE9G;AAAA,EAEQ,cAAcA,GAA4B;AAC9C,QAAI,CAAC,KAAK,aAAa,UAAU,KAAKA,EAAM,aAAa,EAAE,QAAQ,KAAK,YAAY,MAAM,IAAI;AAC1F,UAAImC,IAAS,KAAK,SAAS,KAAK,MAAM,KAAK,OAAO;AAKlD,cAJI,KAAK,MAAM,KAAK,MAAM,MAEbA,IAAA,KAAK,MAAMA,CAAM,KAAK,IAE3BnC,EAAM,SAAS;AAAA,QACnB,KAAK;AAAA,QACL,KAAK;AACD,eAAK,QAAQ,KAAK,IAAI,KAAK,QAAQmC,GAAQ,KAAK,GAAG,GACnDnC,EAAM,eAAe;AACrB;AAAA,QACJ,KAAK;AAAA,QACL,KAAK;AACD,eAAK,QAAQ,KAAK,IAAI,KAAK,QAAQmC,GAAQ,KAAK,GAAG,GACnDnC,EAAM,eAAe;AACrB;AAAA,MACR;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,IAAY,eAAwB;AAC5B,WAAC,KAAK,kBACN,KAAK,gBAAgB,KAAK,WAAW,cAAc,cAAc,IAE9D,KAAK;AAAA,EAChB;AAAA,EAEA,IAAY,iBAA8B;AAClC,WAAC,KAAK,oBACN,KAAK,kBAAkB,KAAK,WAAW,cAAc,kBAAkB,IAEpE,KAAK;AAAA,EAChB;AAAA,EAEA,IAAY,sBAA8B;AAC/B,WAAA,KAAK,kBAAkB,KAAK,eAAe;AAAA,EACtD;AAAA,EAEQ,4BAAkC;AACtC,SAAK,gBAAgB,EAAI,GACzB,KAAK,gBAAgB;AAAA,EACzB;AAAA,EAEQ,gBAAgBoC,GAA2B;AAC1C,SAAA;AAAA,MACD,IAAI,YAA+B,GAAGA,IAAY,eAAe,EAAE,gBAAgB;AAAA,QAC/E,QAAQ,EAAE,OAAO,KAAK,MAAM;AAAA,MAAA,CAC/B;AAAA,IAAA;AAAA,EAET;AAAA,EAEQ,iBAA0B;AACvB,WAAA,KAAK,aAAa,kBAAkB;AAAA,EAC/C;AACJ,GArZIvC,EAAuB,KAAK,iBAkC5BA,EAAe,eAAe,qBAnClCA;AAIYwC,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GAHT1C,EAIT,WAAA,iBAAA,CAAA;AAKDyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GARxB1C,EASV,WAAA,OAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAVxB1C,EAWV,WAAA,OAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAZxB1C,EAaV,WAAA,QAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAdzB1C,EAeV,WAAA,YAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhBzB1C,EAiBV,WAAA,cAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlBxB1C,EAmBV,WAAA,eAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApBzB1C,EAqBV,WAAA,YAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,QAAQ,WAAW,IAAM;AAAA,GAtB1B1C,EAuBV,WAAA,qBAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,QAAQ,WAAW,IAAM;AAAA,GAxB1B1C,EAyBV,WAAA,qBAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,QAAQ,WAAW,IAAM;AAAA,GA1B1B1C,EA2BV,WAAA,mBAAA,CAAA;AAEAyC,EAAA;AAAA,EADNC,EAAS,EAAE,MAAM,QAAQ,WAAW,IAAM;AAAA,GA5B1B1C,EA6BV,WAAA,oBAAA,CAAA;AAGCyC,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS;AAAA,GA/BV1C,EAgCT,WAAA,UAAA,CAAA;AAKAyC,EAAA;AAAA,EADPC,EAAS;AAAA,GApCO1C,EAqCT,WAAA,aAAA,CAAA;AArCZ,IAAqB2C,IAArB3C;AAwZK,eAAe,IAAI2C,EAAO,EAAE,KACd,eAAA,OAAOA,EAAO,IAAIA,CAAM;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/lit-slider",
3
- "version": "7.0.6",
3
+ "version": "7.1.1",
4
4
  "description": "A slider element based on LitElement & material components",
5
5
  "main": "dist/slider-with-externals.js",
6
6
  "module": "dist/slider.mjs",
@@ -11,12 +11,12 @@
11
11
  "hex-rgb": "^5.0.0",
12
12
  "lit": "^2.8.0",
13
13
  "@cas-smartdesign/field-validation-message": "^5.0.2",
14
- "@cas-smartdesign/lit-input": "^7.2.0"
14
+ "@cas-smartdesign/lit-input": "^7.2.1"
15
15
  },
16
16
  "devDependencies": {
17
17
  "@types/big.js": "^6.2.2",
18
- "@cas-smartdesign/license-generator": "^1.6.3",
19
- "@cas-smartdesign/element-preview": "^0.2.2"
18
+ "@cas-smartdesign/element-preview": "^0.2.2",
19
+ "@cas-smartdesign/license-generator": "^1.6.3"
20
20
  },
21
21
  "files": [
22
22
  "dist",
package/readme.md CHANGED
@@ -8,7 +8,7 @@ The main entry point requires ES6 & support for Custom Elements v1
8
8
 
9
9
  ## Attributes
10
10
 
11
- The following attributes are supported: `min`, `max`, `value`, `step`, `editable`, `inputSuffix`, `disabled` & `hidden`
11
+ The following attributes are supported: `min`, `max`, `value`, `step`, `editable`, `clampValue`, `inputSuffix`, `disabled` & `hidden`
12
12
 
13
13
  ## Properties
14
14
 
@@ -21,11 +21,15 @@ The following properties are available:
21
21
  - `max` **_number (default=1)_**
22
22
  - reflects the corresponding attribute
23
23
  - `step` **_number (default=undefined)_**
24
- - reflects the corresponding attribute, if undefined then the _(max-min)/100_ value is used
24
+ - Reflects the corresponding attribute, if undefined then the _(max - min) / 100_ value is used.
25
+ - Valid values are defined based on the `min` value and increments of the `step` value, up to the `max` value.
26
+ - If difference between `min` and `max` is bigger than 1, only steps larger than 1 are supported on user interactions done directly on the slider part.
25
27
  - `colors` **_Map<number, string> (default=empty)_**
26
28
  - A relative-value -> color mapping which can be used to configure a color blending mode for the slider. For further details check the examples.
27
29
  - `editable` **_boolean (default=false)_**
28
30
  - If set to true then a value `lit-input` is shown next to the track container.
31
+ - `clampValue` **_boolean (default=false)_**
32
+ - If set to true, the value is clamped according to the limits of min and max.
29
33
  - `inputSuffix` **_string (default=undefined)_**
30
34
  - A suffix text can be defined for the value field which is turned on via editable flag.
31
35
  - `disabled` **_boolean (default=false)_**