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

Comparing version 23.3.2 to 23.3.3

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

@@ -419,2 +419,3 @@ import { PropertyValues, LitElement, TemplateResult } from 'lit';
     private getDecimalCount;
+    private get tooltipsEnabled();
     private get tooltip();
@@ -421,0 +422,0 @@ private tooltipElement;

out-tsc/src/vcf-slider.js

@@ -67,10 +67,11 @@ var Slider_1;
         this.startDrag = (e) => {
-            const { $knobsContainer, xy } = this;
+            const { $knobsContainer, xy, tooltip } = this;
             this.knob = e.target;
             this.originalPointerXY = this.getPointerXY(e);
             this.originalKnobOffsetXY = this.getBounds(this.knob)[xy] - this.containerBounds[xy];
+            this.setActive(true);
             // Move current knob and tooltip to top
             $knobsContainer?.appendChild(this.knob);
-            $knobsContainer?.appendChild(this.tooltip);
-            this.setActive(true);
+            if (tooltip)
+                $knobsContainer?.appendChild(tooltip);
         };
@@ -171,3 +172,3 @@ this.drag = (e) => {
     static get version() {
-        return '23.3.2';
+        return '23.3.3';
     }
@@ -217,3 +218,3 @@ get xy() {
 
-      :host([tooltips][tooltips-always-visible]) {
+      :host([tooltips-always-visible]) {
         padding-top: calc(var(--vcf-slider-tooltip-font-size) + 4px + var(--lumo-space-m));
@@ -280,2 +281,3 @@ }
 
+      :host([tooltips-always-visible]) [part~='tooltip'],
       :host([tooltips]) [part~='tooltip'] {
@@ -325,3 +327,3 @@ display: flex;
 
-      :host([vertical][tooltips][tooltips-always-visible]) {
+      :host([vertical][tooltips-always-visible]) {
         padding-top: var(--vcf-slider-padding);
@@ -458,4 +460,5 @@ padding-right: calc(var(--vcf-slider-tooltip-width) + 4px + var(--lumo-space-m));
         }
-        if (props.has('tooltips') && this.tooltips) {
-            this.knobIndexes.forEach(i => this.setTooltipPosition(i, this.values));
+        if (props.has('tooltips') || props.has('tooltipsAlwaysVisible')) {
+            this.setKnobElements();
+            this.setValue();
         }
@@ -600,9 +603,11 @@ if (props.has('ranges')) {
     setTooltipValues(values = this.values) {
-        const { knobIndexes } = this;
-        knobIndexes.forEach(i => {
-            const tooltipElement = this.tooltipElement(i);
-            const tooltipElementValue = tooltipElement.firstElementChild;
-            if (tooltipElement)
-                tooltipElementValue.innerText = `${values[i].toFixed(this.decimalCount)}`;
-        });
+        const { knobIndexes, tooltipsEnabled } = this;
+        if (tooltipsEnabled) {
+            knobIndexes.forEach(i => {
+                const tooltipElement = this.tooltipElement(i);
+                const tooltipElementValue = tooltipElement.firstElementChild;
+                if (tooltipElement)
+                    tooltipElementValue.innerText = `${values[i].toFixed(this.decimalCount)}`;
+            });
+        }
     }
@@ -641,10 +646,12 @@ setAriaValues(i = 0, values = this.values) {
     setValue(values = this.values) {
-        this.setTooltipValues(values);
-        this.knobIndexes.forEach(i => {
-            this.setAriaValues(i, values);
-            this.setTooltipPosition(i, values);
-            this.setKnobPostion(i, values);
-            this.setBackgroundColors(values);
+        requestAnimationFrame(() => {
+            this.setTooltipValues(values);
+            this.knobIndexes.forEach(i => {
+                this.setAriaValues(i, values);
+                this.setTooltipPosition(i, values);
+                this.setKnobPostion(i, values);
+                this.setBackgroundColors(values);
+            });
+            this.dispatchEvent(this.valueChangedEvent);
         });
-        this.dispatchEvent(this.valueChangedEvent);
     }
@@ -743,4 +750,7 @@ setKnobPostion(i = 0, values = this.initialValue) {
     }
+    get tooltipsEnabled() {
+        return this.tooltips || this.tooltipsAlwaysVisible;
+    }
     get tooltip() {
-        return this.tooltipElement(this.knobIndex);
+        return this.tooltipsEnabled ? this.tooltipElement(this.knobIndex) : null;
     }
@@ -757,3 +767,3 @@ tooltipElement(i = 0) {
     setKnobElements() {
-        const { knobIndexes, $knobsContainer } = this;
+        const { knobIndexes, $knobsContainer, tooltipsEnabled } = this;
         if ($knobsContainer) {
@@ -763,3 +773,4 @@ $knobsContainer.innerHTML = '';
                 $knobsContainer.appendChild(this.createKnobElement(i));
-                $knobsContainer.appendChild(this.createKnobTooltipElement(i));
+                if (tooltipsEnabled)
+                    $knobsContainer.appendChild(this.createKnobTooltipElement(i));
             });
@@ -888,3 +899,3 @@ }
                 this.knob.classList.add('active');
-                this.tooltip.classList.add('active');
+                this.tooltip?.classList.add('active');
                 if (timeout) {
@@ -898,3 +909,3 @@ // Debouncer timer
                 this.knob.classList.remove('active');
-                this.tooltip.classList.remove('active');
+                this.tooltip?.classList.remove('active');
             }
@@ -901,0 +912,0 @@ }

package.json

 {
   "name": "@vaadin-component-factory/vcf-slider",
-  "version": "23.3.2",
+  "version": "23.3.3",
   "description": "Range slider web component for the Vaadin platform.",
@@ -5,0 +5,0 @@ "main": "out-tsc/vcf-slider.js",

src/vcf-slider.ts

@@ -78,3 +78,3 @@ import { html, svg, css, PropertyValues, LitElement, render, TemplateResult, nothing } from 'lit';
   protected static get version() {
-    return '23.3.2';
+    return '23.3.3';
   }
@@ -136,3 +136,3 @@
 
-      :host([tooltips][tooltips-always-visible]) {
+      :host([tooltips-always-visible]) {
         padding-top: calc(var(--vcf-slider-tooltip-font-size) + 4px + var(--lumo-space-m));
@@ -199,2 +199,3 @@ }
 
+      :host([tooltips-always-visible]) [part~='tooltip'],
       :host([tooltips]) [part~='tooltip'] {
@@ -244,3 +245,3 @@ display: flex;
 
-      :host([vertical][tooltips][tooltips-always-visible]) {
+      :host([vertical][tooltips-always-visible]) {
         padding-top: var(--vcf-slider-padding);
@@ -382,4 +383,5 @@ padding-right: calc(var(--vcf-slider-tooltip-width) + 4px + var(--lumo-space-m));
 
-    if (props.has('tooltips') && this.tooltips) {
-      this.knobIndexes.forEach(i => this.setTooltipPosition(i, this.values));
+    if (props.has('tooltips') || props.has('tooltipsAlwaysVisible')) {
+      this.setKnobElements();
+      this.setValue();
     }
@@ -537,8 +539,10 @@
   private setTooltipValues(values = this.values) {
-    const { knobIndexes } = this;
-    knobIndexes.forEach(i => {
-      const tooltipElement = this.tooltipElement(i) as HTMLElement;
-      const tooltipElementValue = tooltipElement.firstElementChild as HTMLSpanElement;
-      if (tooltipElement) tooltipElementValue.innerText = `${values[i].toFixed(this.decimalCount)}`;
-    });
+    const { knobIndexes, tooltipsEnabled } = this;
+    if (tooltipsEnabled) {
+      knobIndexes.forEach(i => {
+        const tooltipElement = this.tooltipElement(i) as HTMLElement;
+        const tooltipElementValue = tooltipElement.firstElementChild as HTMLSpanElement;
+        if (tooltipElement) tooltipElementValue.innerText = `${values[i].toFixed(this.decimalCount)}`;
+      });
+    }
   }
@@ -578,10 +582,12 @@
   private setValue(values = this.values) {
-    this.setTooltipValues(values);
-    this.knobIndexes.forEach(i => {
-      this.setAriaValues(i, values);
-      this.setTooltipPosition(i, values);
-      this.setKnobPostion(i, values);
-      this.setBackgroundColors(values);
+    requestAnimationFrame(() => {
+      this.setTooltipValues(values);
+      this.knobIndexes.forEach(i => {
+        this.setAriaValues(i, values);
+        this.setTooltipPosition(i, values);
+        this.setKnobPostion(i, values);
+        this.setBackgroundColors(values);
+      });
+      this.dispatchEvent(this.valueChangedEvent);
     });
-    this.dispatchEvent(this.valueChangedEvent);
   }
@@ -665,11 +671,11 @@
   private startDrag = (e: Event) => {
-    const { $knobsContainer, xy } = this;
+    const { $knobsContainer, xy, tooltip } = this;
     this.knob = e.target as HTMLElement;
     this.originalPointerXY = this.getPointerXY(e);
     this.originalKnobOffsetXY = this.getBounds(this.knob)[xy] - this.containerBounds[xy];
+    this.setActive(true);
 
     // Move current knob and tooltip to top
     $knobsContainer?.appendChild(this.knob);
-    $knobsContainer?.appendChild(this.tooltip);
-    this.setActive(true);
+    if (tooltip) $knobsContainer?.appendChild(tooltip);
   };
@@ -800,4 +806,8 @@
 
+  private get tooltipsEnabled() {
+    return this.tooltips || this.tooltipsAlwaysVisible;
+  }
+
   private get tooltip() {
-    return this.tooltipElement(this.knobIndex) as HTMLElement;
+    return this.tooltipsEnabled ? (this.tooltipElement(this.knobIndex) as HTMLElement) : null;
   }
@@ -818,3 +828,3 @@
   private setKnobElements() {
-    const { knobIndexes, $knobsContainer } = this;
+    const { knobIndexes, $knobsContainer, tooltipsEnabled } = this;
     if ($knobsContainer) {
@@ -824,3 +834,3 @@ $knobsContainer.innerHTML = '';
         $knobsContainer.appendChild(this.createKnobElement(i));
-        $knobsContainer.appendChild(this.createKnobTooltipElement(i));
+        if (tooltipsEnabled) $knobsContainer.appendChild(this.createKnobTooltipElement(i));
       });
@@ -956,3 +966,3 @@ }
         this.knob.classList.add('active');
-        this.tooltip.classList.add('active');
+        this.tooltip?.classList.add('active');
         if (timeout) {
@@ -965,3 +975,3 @@ // Debouncer timer
         this.knob.classList.remove('active');
-        this.tooltip.classList.remove('active');
+        this.tooltip?.classList.remove('active');
       }
@@ -968,0 +978,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

235982

increased by0.58%

Lines of code

2713

increased by0.78%

No dependency changes