@vaadin-component-factory/vcf-slider - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

out-tsc/src/vcf-slider.d.ts

 import { PropertyValues, LitElement, TemplateResult } from 'lit';
+import { ValueChangedEvent } from './mixins/CustomEventMixin';
 declare const Slider_base: {
@@ -313,2 +314,8 @@ new (...args: any[]): {
  * @csspart knob-n - Nth knob element.
+ * @csspart tooltip - Knob tooltip containers.
+ * @csspart tooltip-n - Nth knob tooltip container.
+ * @csspart tooltip-value - Knob tooltip value elements.
+ * @csspart tooltip-value-n - Nth knob tooltip value element.
+ * @csspart tooltip-triangle - Knob tooltip triangle elements.
+ * @csspart tooltip-triangle-n - Nth knob tooltip triangle element.
  *
@@ -318,3 +325,3 @@ * @cssprop [--vcf-slider-knob-alt-color=var(--lumo-error-color)] - Color of `::part(alt-knob)`.
  * @cssprop [--vcf-slider-knob-size=var(--lumo-space-m)] - Size (width, height) of `::part(knob)`.
- * @cssprop [--vcf-slider-label-font-size=var(--lumo-font-size-s)] - Font size of `::part(label)`.
+ * @cssprop [--vcf-slider-tooltip-font-size=var(--lumo-font-size-s)] - Font size of `::part(tooltip)`.
  * @cssprop [--vcf-slider-line-alt-color=var(--lumo-contrast-30pct)] - Secondary background color of `::part(line)`.
@@ -329,11 +336,17 @@ * @cssprop [--vcf-slider-line-color=var(--lumo-contrast-50pct)] - Background color of `::part(line)`.
 export declare class Slider extends Slider_base {
-    /**
-     *
-     */
-    labels: boolean;
+    /** If `true`, show tooltips that display values above slider knobs. */
+    tooltips: boolean;
+    /** If `true`, change *orientation* of the range slider from horizontal to vertical. */
     vertical: boolean;
+    /** If `true`, reverse *direction* so that low to high values go from right to left. */
+    rtl: boolean;
+    /** Current value(s) of the slider. */
     value: string | number | number[];
+    /** Number of ranges (knobs) to display on the slider. */
     ranges: number;
+    /** Specifies the granularity that the value must adhere to. */
     step: number;
+    /** Maximum value. */
     min: number;
+    /** Minimum value. */
     max: number;
@@ -355,3 +368,4 @@ private knobsContainer?;
     render(): TemplateResult<1>;
-    updated(props: PropertyValues): void;
+    protected firstUpdated(): void;
+    protected updated(props: PropertyValues): void;
     /** @private */
@@ -375,3 +389,3 @@ passive: boolean;
     private isKnobClick;
-    private setLabelValues;
+    private setTooltipValues;
     private setAriaValues;
@@ -382,3 +396,3 @@ private get initialValue();
     private setKnobPostion;
-    private setLabelPosition;
+    private setTooltipPosition;
     private setLineColors;
@@ -389,4 +403,4 @@ private set dragging(value);
     private drag;
-    private get label();
-    private labelElement;
+    private get tooltip();
+    private tooltipElement;
     private knobElement;
@@ -396,3 +410,3 @@ private get knobIndexes();
     private createKnobElement;
-    private createKnobLabelElement;
+    private createKnobTooltipElement;
     private getPrevNeighborValue;
@@ -413,2 +427,3 @@ private getNextNeighborValue;
 }
+export { ValueChangedEvent };
 declare global {
@@ -419,2 +434,1 @@ interface HTMLElementTagNameMap {
 }
-export {};

out-tsc/src/vcf-slider.js

@@ -14,2 +14,8 @@ var Slider_1;
  * @csspart knob-n - Nth knob element.
+ * @csspart tooltip - Knob tooltip containers.
+ * @csspart tooltip-n - Nth knob tooltip container.
+ * @csspart tooltip-value - Knob tooltip value elements.
+ * @csspart tooltip-value-n - Nth knob tooltip value element.
+ * @csspart tooltip-triangle - Knob tooltip triangle elements.
+ * @csspart tooltip-triangle-n - Nth knob tooltip triangle element.
  *
@@ -19,3 +25,3 @@ * @cssprop [--vcf-slider-knob-alt-color=var(--lumo-error-color)] - Color of `::part(alt-knob)`.
  * @cssprop [--vcf-slider-knob-size=var(--lumo-space-m)] - Size (width, height) of `::part(knob)`.
- * @cssprop [--vcf-slider-label-font-size=var(--lumo-font-size-s)] - Font size of `::part(label)`.
+ * @cssprop [--vcf-slider-tooltip-font-size=var(--lumo-font-size-s)] - Font size of `::part(tooltip)`.
  * @cssprop [--vcf-slider-line-alt-color=var(--lumo-contrast-30pct)] - Secondary background color of `::part(line)`.
@@ -32,11 +38,17 @@ * @cssprop [--vcf-slider-line-color=var(--lumo-contrast-50pct)] - Background color of `::part(line)`.
         super(...arguments);
-        /**
-         *
-         */
-        this.labels = false;
+        /** If `true`, show tooltips that display values above slider knobs. */
+        this.tooltips = false;
+        /** If `true`, change *orientation* of the range slider from horizontal to vertical. */
         this.vertical = false;
+        /** If `true`, reverse *direction* so that low to high values go from right to left. */
+        this.rtl = false;
+        /** Current value(s) of the slider. */
         this.value = 0;
+        /** Number of ranges (knobs) to display on the slider. */
         this.ranges = 0;
+        /** Specifies the granularity that the value must adhere to. */
         this.step = 1;
+        /** Maximum value. */
         this.min = 0;
+        /** Minimum value. */
         this.max = 100;
@@ -53,8 +65,8 @@ this.originalKnobOffsetXY = 0;
             this.originalKnobOffsetXY = this.getBounds(this.knob)[xy] - this.lineBounds[xy];
-            // Move current knob and label to top
+            // Move current knob and tooltip to top
             knobsContainer?.appendChild(this.knob);
-            knobsContainer?.appendChild(this.label);
+            knobsContainer?.appendChild(this.tooltip);
         };
         this.drag = (e) => {
-            const { knobIndex: i, vertical, knob, knobs, originalKnobOffsetXY, originalPointerXY, xy, line, lineBounds } = this;
+            const { knobIndex: i, vertical, rtl, knob, knobs, originalKnobOffsetXY, originalPointerXY, xy, line, lineBounds, } = this;
             if (knob && line) {
@@ -67,4 +79,4 @@ const knobBounds = this.getBounds(knob);
                 const part = `knob-${i}`;
-                let start = vertical ? lineEnd : lineStart;
-                let end = vertical ? lineStart : lineEnd;
+                let start = rtl ? lineEnd : lineStart;
+                let end = rtl ? lineStart : lineEnd;
                 // Set knob limits
@@ -97,4 +109,4 @@ switch (part) {
                     let newPositionXY = originalKnobOffsetXY + (pageXY - originalPointerXY);
-                    let startLimit = vertical ? newPositionXY >= start : newPositionXY <= start;
-                    let endLimit = vertical ? newPositionXY <= end : newPositionXY >= end;
+                    let startLimit = rtl ? newPositionXY >= start : newPositionXY <= start;
+                    let endLimit = rtl ? newPositionXY <= end : newPositionXY >= end;
                     newPositionXY = startLimit ? start : endLimit ? end : newPositionXY;
@@ -106,3 +118,3 @@ // Calculate new value
                     let value = Math.round(pct * length + min);
-                    if (vertical)
+                    if (rtl)
                         value = max - value;
@@ -128,3 +140,3 @@ // Step
     static get version() {
-        return '1.0.6';
+        return '1.0.7';
     }
@@ -153,3 +165,3 @@ get xy() {
         --vcf-slider-knob-size: var(--lumo-space-m);
-        --vcf-slider-label-font-size: var(--lumo-font-size-s);
+        --vcf-slider-tooltip-font-size: var(--lumo-font-size-s);
         --vcf-slider-line-alt-color: var(--lumo-contrast-30pct);
@@ -170,4 +182,4 @@ --vcf-slider-line-color: var(--lumo-contrast-50pct);
 
-      :host([labels]) {
-        padding-top: calc(var(--vcf-slider-label-font-size) + 4px + var(--lumo-space-s));
+      :host([tooltips]) {
+        padding-top: calc(var(--vcf-slider-tooltip-font-size) + 4px + var(--lumo-space-s));
       }
@@ -197,5 +209,8 @@
 
+      /* KNOBS */
+
       [part~='knob'] {
         position: absolute;
         display: flex;
+        right: 'unset';
         top: calc(-0.5 * var(--k-size) + calc(0.5 * var(--l-height)));
@@ -221,3 +236,5 @@ width: var(--k-size);
 
-      [part~='label'] {
+      /* TOOLTIPS */
+
+      [part~='tooltip'] {
         display: none;
@@ -232,3 +249,3 @@ flex-flow: column;
         padding: 2px var(--lumo-space-s);
-        font-size: var(--vcf-slider-label-font-size);
+        font-size: var(--vcf-slider-tooltip-font-size);
         pointer-events: none;
@@ -238,3 +255,3 @@ user-select: none;
 
-      [part~='label-triangle'] {
+      [part~='tooltip-triangle'] {
         position: relative;
@@ -246,3 +263,3 @@ margin: 0;
 
-      [part~='label-triangle']::after {
+      [part~='tooltip-triangle']::after {
         content: '';
@@ -261,3 +278,3 @@ position: absolute;
 
-      :host([labels]) [part~='label'] {
+      :host([tooltips]) [part~='tooltip'] {
         display: flex;
@@ -268,5 +285,5 @@ }
 
-      :host([labels][vertical]) {
+      :host([tooltips][vertical]) {
         padding-top: 0px;
-        padding-right: calc(var(--vcf-slider-label-width) + 4px + var(--lumo-space-xs));
+        padding-right: calc(var(--vcf-slider-tooltips-width) + 4px + var(--lumo-space-xs));
       }
@@ -287,6 +304,7 @@
       :host([vertical]) [part~='knob'] {
+        bottom: unset;
         left: calc(-0.5 * var(--k-size) + calc(0.5 * var(--l-height)));
       }
 
-      :host([vertical]) [part~='label'] {
+      :host([vertical]) [part~='tooltip'] {
         flex-flow: row;
@@ -299,7 +317,7 @@ left: calc(var(--k-size) * 0.5 + var(--lumo-space-s));
 
-      :host([vertical]) [part~='label-triangle']::after {
+      :host([vertical]) [part~='tooltip-triangle']::after {
         content: unset;
       }
 
-      :host([vertical]) [part~='label']::after {
+      :host([vertical]) [part~='tooltip']::after {
         content: '';
@@ -318,2 +336,12 @@ position: absolute;
       }
+
+      /* RTL */
+
+      :host([rtl]:not([vertical])) [part~='knob'] {
+        left: unset;
+      }
+
+      :host([vertical][rtl]) [part~='knob'] {
+        top: unset;
+      }
     `;
@@ -331,6 +359,7 @@ }
     }
+    firstUpdated() { }
     updated(props) {
         const { ranges, step } = this;
-        if (props.has('labels') && this.labels) {
-            this.knobIndexes.forEach(i => this.setLabelPosition(i, this.values));
+        if (props.has('tooltips') && this.tooltips) {
+            this.knobIndexes.forEach(i => this.setTooltipPosition(i, this.values));
         }
@@ -343,3 +372,3 @@ if (props.has('ranges')) {
         }
-        if (props.has('ranges') || props.has('min') || props.has('max')) {
+        if (props.has('rtl') || props.has('ranges') || props.has('min') || props.has('max')) {
             this.setKnobElements();
@@ -422,9 +451,9 @@ this.setValue((this.value = this.initialValue));
     }
-    setLabelValues(values = this.values) {
+    setTooltipValues(values = this.values) {
         const { knobIndexes } = this;
         knobIndexes.forEach(i => {
-            const labelElement = this.labelElement(i);
-            const labelElementValue = labelElement.firstElementChild;
-            if (labelElement)
-                labelElementValue.innerText = `${values[i]}`;
+            const tooltipElement = this.tooltipElement(i);
+            const tooltipElementValue = tooltipElement.firstElementChild;
+            if (tooltipElement)
+                tooltipElementValue.innerText = `${values[i]}`;
         });
@@ -465,6 +494,6 @@ }
         values = values.sort((a, b) => a - b);
-        this.setLabelValues(values);
+        this.setTooltipValues(values);
         this.knobIndexes.forEach(i => {
             this.setAriaValues(i, values);
-            this.setLabelPosition(i, values);
+            this.setTooltipPosition(i, values);
             this.setKnobPostion(i, values);
@@ -480,40 +509,44 @@ this.setLineColors(values);
             const knobBounds = this.getBounds(knob);
+            const knobSize = this.vertical ? knobBounds.height : knobBounds.width;
+            const lineSize = this.vertical ? lineBounds.height : lineBounds.width;
+            const position = ((values[i] - min) / (max - min)) * lineSize - knobSize / 2;
             if (this.vertical) {
-                const position = ((values[i] - min) / (max - min)) * lineBounds.height - knobBounds.height / 2;
-                knob.style.top = 'unset';
-                knob.style.bottom = `${position}px`;
+                knob.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
+                knob.style.removeProperty('right');
                 knob.style.removeProperty('left');
             }
             else {
-                const position = ((values[i] - min) / (max - min)) * lineBounds.width - knobBounds.width / 2;
-                knob.style.left = `${position}px`;
+                knob.style[this.rtl ? 'right' : 'left'] = `${position}px`;
+                knob.style.removeProperty('bottom');
                 knob.style.removeProperty('top');
-                knob.style.removeProperty('bottom');
             }
         }
     }
-    setLabelPosition(i = 0, values = this.values) {
+    setTooltipPosition(i = 0, values = this.values) {
         const { min, max, lineBounds } = this;
-        const label = this.labelElement(i);
-        if (label) {
-            const labelBounds = this.getBounds(label);
+        const tooltip = this.tooltipElement(i);
+        if (tooltip) {
+            const tooltipBounds = this.getBounds(tooltip);
+            const tooltipSize = this.vertical ? tooltipBounds.height : tooltipBounds.width;
+            const lineSize = this.vertical ? lineBounds.height : lineBounds.width;
+            const position = ((values[i] - min) / (max - min)) * lineSize - tooltipSize / 2;
             if (this.vertical) {
-                const position = ((values[i] - min) / (max - min)) * lineBounds.height - labelBounds.height / 2;
-                label.style.bottom = `${position}px`;
-                label.style.removeProperty('left');
+                tooltip.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
+                tooltip.style.removeProperty('right');
+                tooltip.style.removeProperty('left');
             }
             else {
-                const position = ((values[i] - min) / (max - min)) * lineBounds.width - labelBounds.width / 2;
-                label.style.left = `${position}px`;
-                label.style.removeProperty('bottom');
+                tooltip.style[this.rtl ? 'right' : 'left'] = `${position}px`;
+                tooltip.style.removeProperty('bottom');
+                tooltip.style.removeProperty('top');
             }
-            this.style.setProperty('--vcf-slider-label-width', `${labelBounds.width}px`);
+            this.style.setProperty('--vcf-slider-tooltip-width', `${tooltipBounds.width}px`);
         }
     }
     setLineColors(values = this.values) {
-        const { knobs, min, max, lineColorElement } = this;
+        const { knobs, min, max, lineColorElement, vertical, rtl } = this;
         const length = max - min;
         const lineColor = getComputedStyle(this).getPropertyValue('--vcf-slider-line-color').trim();
         const altLineColor = getComputedStyle(this).getPropertyValue('--vcf-slider-line-alt-color').trim();
-        const direction = this.vertical ? 'top' : 'right';
+        const direction = vertical ? (rtl ? 'top' : 'bottom') : rtl ? 'left' : 'right';
         let colors = '';
@@ -548,7 +581,7 @@ let prevStop = '';
     }
-    get label() {
-        return this.labelElement(this.knobIndex);
+    get tooltip() {
+        return this.tooltipElement(this.knobIndex);
     }
-    labelElement(i = 0) {
-        return this.shadowRoot?.querySelector(`[part~=label-${i}]`);
+    tooltipElement(i = 0) {
+        return this.shadowRoot?.querySelector(`[part~=tooltip-${i}]`);
     }
@@ -567,3 +600,3 @@ knobElement(i = 0) {
                 knobsContainer.appendChild(this.createKnobElement(i));
-                knobsContainer.appendChild(this.createKnobLabelElement(i));
+                knobsContainer.appendChild(this.createKnobTooltipElement(i));
             });
@@ -586,7 +619,7 @@ }
     }
-    createKnobLabelElement(knobIndex) {
+    createKnobTooltipElement(knobIndex) {
         return this.createElement(html `
-        <div part="label label-${knobIndex}">
-          <span part="label-value label-value-${knobIndex}"></span>
-          <div part="label-triangle label-triangle-${knobIndex}"></div>
+        <div part="tooltip tooltip-${knobIndex}">
+          <span part="tooltip-value tooltip-value-${knobIndex}"></span>
+          <div part="tooltip-triangle tooltip-triangle-${knobIndex}"></div>
         </div>
@@ -736,3 +769,3 @@ `);
     property({ type: Boolean, reflect: true })
-], Slider.prototype, "labels", void 0);
+], Slider.prototype, "tooltips", void 0);
 __decorate([
@@ -742,2 +775,5 @@ property({ type: Boolean, reflect: true })
 __decorate([
+    property({ type: Boolean })
+], Slider.prototype, "rtl", void 0);
+__decorate([
     property({ type: Number })
@@ -744,0 +780,0 @@ ], Slider.prototype, "value", void 0);

package.json

 {
   "name": "@vaadin-component-factory/vcf-slider",
-  "version": "1.0.6",
-  "description": "Slider web component for the Vaadin platform.",
+  "version": "1.0.7",
+  "description": "Range slider web component for the Vaadin platform.",
   "main": "out-tsc/vcf-slider.js",
@@ -53,3 +53,3 @@ "module": "out-tsc/vcf-slider.js",
   "dependencies": {
-    "@vaadin/vaadin-themable-mixin": "^23.2.10",
+    "@vaadin/vaadin-themable-mixin": "^23.3.1",
     "lit": "^2.4.1"
@@ -67,3 +67,3 @@ },
     "@vaadin-component-factory/vcf-element-util": "^0.3.5",
-    "@vaadin/vaadin-lumo-styles": "^23.2.8",
+    "@vaadin/vaadin-lumo-styles": "^23.3.1",
     "@web/dev-server": "^0.1.34",
@@ -70,0 +70,0 @@ "@web/test-runner": "^0.14.0",

README.md

@@ -5,3 +5,3 @@ # <vcf-slider>
 
-Slider web component for the Vaadin platform.
+Range slider web component for the Vaadin platform.
 
@@ -8,0 +8,0 @@ <img src="https://user-images.githubusercontent.com/3392815/121072109-746c0900-c7d9-11eb-8d4e-8bb728fa99f1.png" alt="drawing" width="420"/>

src/vcf-slider.ts

@@ -13,2 +13,8 @@ import { html, css, PropertyValues, LitElement, render, TemplateResult } from 'lit';
  * @csspart knob-n - Nth knob element.
+ * @csspart tooltip - Knob tooltip containers.
+ * @csspart tooltip-n - Nth knob tooltip container.
+ * @csspart tooltip-value - Knob tooltip value elements.
+ * @csspart tooltip-value-n - Nth knob tooltip value element.
+ * @csspart tooltip-triangle - Knob tooltip triangle elements.
+ * @csspart tooltip-triangle-n - Nth knob tooltip triangle element.
  *
@@ -18,3 +24,3 @@ * @cssprop [--vcf-slider-knob-alt-color=var(--lumo-error-color)] - Color of `::part(alt-knob)`.
  * @cssprop [--vcf-slider-knob-size=var(--lumo-space-m)] - Size (width, height) of `::part(knob)`.
- * @cssprop [--vcf-slider-label-font-size=var(--lumo-font-size-s)] - Font size of `::part(label)`.
+ * @cssprop [--vcf-slider-tooltip-font-size=var(--lumo-font-size-s)] - Font size of `::part(tooltip)`.
  * @cssprop [--vcf-slider-line-alt-color=var(--lumo-contrast-30pct)] - Secondary background color of `::part(line)`.
@@ -30,11 +36,24 @@ * @cssprop [--vcf-slider-line-color=var(--lumo-contrast-50pct)] - Background color of `::part(line)`.
 export class Slider extends CustomEventMixin(ThemableMixin(LitElement)) {
-  /**
-   *
-   */
-  @property({ type: Boolean, reflect: true }) labels = false;
+  /** If `true`, show tooltips that display values above slider knobs. */
+  @property({ type: Boolean, reflect: true }) tooltips = false;
+
+  /** If `true`, change *orientation* of the range slider from horizontal to vertical. */
   @property({ type: Boolean, reflect: true }) vertical = false;
+
+  /** If `true`, reverse *direction* so that low to high values go from right to left. */
+  @property({ type: Boolean }) rtl = false;
+
+  /** Current value(s) of the slider. */
   @property({ type: Number }) value: string | number | number[] = 0;
+
+  /** Number of ranges (knobs) to display on the slider. */
   @property({ type: Number }) ranges = 0;
+
+  /** Specifies the granularity that the value must adhere to. */
   @property({ type: Number }) step = 1;
+
+  /** Maximum value. */
   @property({ type: Number }) min = 0;
+
+  /** Minimum value. */
   @property({ type: Number }) max = 100;
@@ -51,3 +70,3 @@
   protected static get version() {
-    return '1.0.6';
+    return '1.0.7';
   }
@@ -86,3 +105,3 @@
         --vcf-slider-knob-size: var(--lumo-space-m);
-        --vcf-slider-label-font-size: var(--lumo-font-size-s);
+        --vcf-slider-tooltip-font-size: var(--lumo-font-size-s);
         --vcf-slider-line-alt-color: var(--lumo-contrast-30pct);
@@ -103,4 +122,4 @@ --vcf-slider-line-color: var(--lumo-contrast-50pct);
 
-      :host([labels]) {
-        padding-top: calc(var(--vcf-slider-label-font-size) + 4px + var(--lumo-space-s));
+      :host([tooltips]) {
+        padding-top: calc(var(--vcf-slider-tooltip-font-size) + 4px + var(--lumo-space-s));
       }
@@ -130,5 +149,8 @@
 
+      /* KNOBS */
+
       [part~='knob'] {
         position: absolute;
         display: flex;
+        right: 'unset';
         top: calc(-0.5 * var(--k-size) + calc(0.5 * var(--l-height)));
@@ -154,3 +176,5 @@ width: var(--k-size);
 
-      [part~='label'] {
+      /* TOOLTIPS */
+
+      [part~='tooltip'] {
         display: none;
@@ -165,3 +189,3 @@ flex-flow: column;
         padding: 2px var(--lumo-space-s);
-        font-size: var(--vcf-slider-label-font-size);
+        font-size: var(--vcf-slider-tooltip-font-size);
         pointer-events: none;
@@ -171,3 +195,3 @@ user-select: none;
 
-      [part~='label-triangle'] {
+      [part~='tooltip-triangle'] {
         position: relative;
@@ -179,3 +203,3 @@ margin: 0;
 
-      [part~='label-triangle']::after {
+      [part~='tooltip-triangle']::after {
         content: '';
@@ -194,3 +218,3 @@ position: absolute;
 
-      :host([labels]) [part~='label'] {
+      :host([tooltips]) [part~='tooltip'] {
         display: flex;
@@ -201,5 +225,5 @@ }
 
-      :host([labels][vertical]) {
+      :host([tooltips][vertical]) {
         padding-top: 0px;
-        padding-right: calc(var(--vcf-slider-label-width) + 4px + var(--lumo-space-xs));
+        padding-right: calc(var(--vcf-slider-tooltips-width) + 4px + var(--lumo-space-xs));
       }
@@ -220,6 +244,7 @@
       :host([vertical]) [part~='knob'] {
+        bottom: unset;
         left: calc(-0.5 * var(--k-size) + calc(0.5 * var(--l-height)));
       }
 
-      :host([vertical]) [part~='label'] {
+      :host([vertical]) [part~='tooltip'] {
         flex-flow: row;
@@ -232,7 +257,7 @@ left: calc(var(--k-size) * 0.5 + var(--lumo-space-s));
 
-      :host([vertical]) [part~='label-triangle']::after {
+      :host([vertical]) [part~='tooltip-triangle']::after {
         content: unset;
       }
 
-      :host([vertical]) [part~='label']::after {
+      :host([vertical]) [part~='tooltip']::after {
         content: '';
@@ -251,2 +276,12 @@ position: absolute;
       }
+
+      /* RTL */
+
+      :host([rtl]:not([vertical])) [part~='knob'] {
+        left: unset;
+      }
+
+      :host([vertical][rtl]) [part~='knob'] {
+        top: unset;
+      }
     `;
@@ -266,7 +301,9 @@ }
 
-  updated(props: PropertyValues) {
+  protected firstUpdated() {}
+
+  protected updated(props: PropertyValues) {
     const { ranges, step } = this;
 
-    if (props.has('labels') && this.labels) {
-      this.knobIndexes.forEach(i => this.setLabelPosition(i, this.values));
+    if (props.has('tooltips') && this.tooltips) {
+      this.knobIndexes.forEach(i => this.setTooltipPosition(i, this.values));
     }
@@ -279,3 +316,3 @@
 
-    if (props.has('ranges') || props.has('min') || props.has('max')) {
+    if (props.has('rtl') || props.has('ranges') || props.has('min') || props.has('max')) {
       this.setKnobElements();
@@ -366,8 +403,8 @@ this.setValue((this.value = this.initialValue));
 
-  private setLabelValues(values = this.values) {
+  private setTooltipValues(values = this.values) {
     const { knobIndexes } = this;
     knobIndexes.forEach(i => {
-      const labelElement = this.labelElement(i) as HTMLElement;
-      const labelElementValue = labelElement.firstElementChild as HTMLSpanElement;
-      if (labelElement) labelElementValue.innerText = `${values[i]}`;
+      const tooltipElement = this.tooltipElement(i) as HTMLElement;
+      const tooltipElementValue = tooltipElement.firstElementChild as HTMLSpanElement;
+      if (tooltipElement) tooltipElementValue.innerText = `${values[i]}`;
     });
@@ -409,6 +446,6 @@ }
     values = values.sort((a, b) => a - b);
-    this.setLabelValues(values);
+    this.setTooltipValues(values);
     this.knobIndexes.forEach(i => {
       this.setAriaValues(i, values);
-      this.setLabelPosition(i, values);
+      this.setTooltipPosition(i, values);
       this.setKnobPostion(i, values);
@@ -425,12 +462,13 @@ this.setLineColors(values);
       const knobBounds = this.getBounds(knob);
+      const knobSize = this.vertical ? knobBounds.height : knobBounds.width;
+      const lineSize = this.vertical ? lineBounds.height : lineBounds.width;
+      const position = ((values[i] - min) / (max - min)) * lineSize - knobSize / 2;
       if (this.vertical) {
-        const position = ((values[i] - min) / (max - min)) * lineBounds.height - knobBounds.height / 2;
-        knob.style.top = 'unset';
-        knob.style.bottom = `${position}px`;
+        knob.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
+        knob.style.removeProperty('right');
         knob.style.removeProperty('left');
       } else {
-        const position = ((values[i] - min) / (max - min)) * lineBounds.width - knobBounds.width / 2;
-        knob.style.left = `${position}px`;
+        knob.style[this.rtl ? 'right' : 'left'] = `${position}px`;
+        knob.style.removeProperty('bottom');
         knob.style.removeProperty('top');
-        knob.style.removeProperty('bottom');
       }
@@ -440,17 +478,20 @@ }
 
-  private setLabelPosition(i = 0, values = this.values) {
+  private setTooltipPosition(i = 0, values = this.values) {
     const { min, max, lineBounds } = this;
-    const label = this.labelElement(i) as HTMLElement;
-    if (label) {
-      const labelBounds = this.getBounds(label);
+    const tooltip = this.tooltipElement(i) as HTMLElement;
+    if (tooltip) {
+      const tooltipBounds = this.getBounds(tooltip);
+      const tooltipSize = this.vertical ? tooltipBounds.height : tooltipBounds.width;
+      const lineSize = this.vertical ? lineBounds.height : lineBounds.width;
+      const position = ((values[i] - min) / (max - min)) * lineSize - tooltipSize / 2;
       if (this.vertical) {
-        const position = ((values[i] - min) / (max - min)) * lineBounds.height - labelBounds.height / 2;
-        label.style.bottom = `${position}px`;
-        label.style.removeProperty('left');
+        tooltip.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
+        tooltip.style.removeProperty('right');
+        tooltip.style.removeProperty('left');
       } else {
-        const position = ((values[i] - min) / (max - min)) * lineBounds.width - labelBounds.width / 2;
-        label.style.left = `${position}px`;
-        label.style.removeProperty('bottom');
+        tooltip.style[this.rtl ? 'right' : 'left'] = `${position}px`;
+        tooltip.style.removeProperty('bottom');
+        tooltip.style.removeProperty('top');
       }
-      this.style.setProperty('--vcf-slider-label-width', `${labelBounds.width}px`);
+      this.style.setProperty('--vcf-slider-tooltip-width', `${tooltipBounds.width}px`);
     }
@@ -460,7 +501,7 @@ }
   private setLineColors(values = this.values) {
-    const { knobs, min, max, lineColorElement } = this;
+    const { knobs, min, max, lineColorElement, vertical, rtl } = this;
     const length = max - min;
     const lineColor = getComputedStyle(this).getPropertyValue('--vcf-slider-line-color').trim();
     const altLineColor = getComputedStyle(this).getPropertyValue('--vcf-slider-line-alt-color').trim();
-    const direction = this.vertical ? 'top' : 'right';
+    const direction = vertical ? (rtl ? 'top' : 'bottom') : rtl ? 'left' : 'right';
     let colors = '';
@@ -499,9 +540,21 @@ let prevStop = '';
 
-    // Move current knob and label to top
+    // Move current knob and tooltip to top
     knobsContainer?.appendChild(this.knob);
-    knobsContainer?.appendChild(this.label);
+    knobsContainer?.appendChild(this.tooltip);
   };
 
   private drag = (e: Event) => {
-    const { knobIndex: i, vertical, knob, knobs, originalKnobOffsetXY, originalPointerXY, xy, line, lineBounds } = this;
+    const {
+      knobIndex: i,
+      vertical,
+      rtl,
+      knob,
+      knobs,
+      originalKnobOffsetXY,
+      originalPointerXY,
+      xy,
+      line,
+      lineBounds,
+    } = this;
+
     if (knob && line) {
@@ -514,4 +567,4 @@ const knobBounds = this.getBounds(knob);
       const part = `knob-${i}`;
-      let start = vertical ? lineEnd : lineStart;
-      let end = vertical ? lineStart : lineEnd;
+      let start = rtl ? lineEnd : lineStart;
+      let end = rtl ? lineStart : lineEnd;
 
@@ -546,4 +599,4 @@ // Set knob limits
         let newPositionXY = originalKnobOffsetXY + (pageXY - originalPointerXY);
-        let startLimit = vertical ? newPositionXY >= start : newPositionXY <= start;
-        let endLimit = vertical ? newPositionXY <= end : newPositionXY >= end;
+        let startLimit = rtl ? newPositionXY >= start : newPositionXY <= start;
+        let endLimit = rtl ? newPositionXY <= end : newPositionXY >= end;
         newPositionXY = startLimit ? start : endLimit ? end : newPositionXY;
@@ -556,3 +609,3 @@
         let value = Math.round(pct * length + min);
-        if (vertical) value = max - value;
+        if (rtl) value = max - value;
 
@@ -575,8 +628,8 @@ // Step
 
-  private get label() {
-    return this.labelElement(this.knobIndex) as HTMLElement;
+  private get tooltip() {
+    return this.tooltipElement(this.knobIndex) as HTMLElement;
   }
 
-  private labelElement(i = 0) {
-    return this.shadowRoot?.querySelector(`[part~=label-${i}]`) as HTMLElement;
+  private tooltipElement(i = 0) {
+    return this.shadowRoot?.querySelector(`[part~=tooltip-${i}]`) as HTMLElement;
   }
@@ -598,3 +651,3 @@
         knobsContainer.appendChild(this.createKnobElement(i));
-        knobsContainer.appendChild(this.createKnobLabelElement(i));
+        knobsContainer.appendChild(this.createKnobTooltipElement(i));
       });
@@ -621,8 +674,8 @@ }
 
-  private createKnobLabelElement(knobIndex: number) {
+  private createKnobTooltipElement(knobIndex: number) {
     return this.createElement(
       html`
-        <div part="label label-${knobIndex}">
-          <span part="label-value label-value-${knobIndex}"></span>
-          <div part="label-triangle label-triangle-${knobIndex}"></div>
+        <div part="tooltip tooltip-${knobIndex}">
+          <span part="tooltip-value tooltip-value-${knobIndex}"></span>
+          <div part="tooltip-triangle tooltip-triangle-${knobIndex}"></div>
         </div>
@@ -777,2 +830,4 @@ `
 
+export { ValueChangedEvent };
+
 declare global {
@@ -779,0 +834,0 @@ interface HTMLElementTagNameMap {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

205481

increased by3.43%

Lines of code

2276

increased by3.88%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@vaadin/vaadin-themable-mixin@^23.3.1