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

Comparing version 23.3.1 to 23.3.2

out-tsc/src/vcf-slider.js

@@ -170,3 +170,3 @@ var Slider_1;
     static get version() {
-        return '23.3.1';
+        return '23.3.2';
     }
@@ -404,2 +404,6 @@ get xy() {
 
+      #ticks text {
+        text-anchor: middle;
+      }
+
       /* VERTICAL TICKS */
@@ -422,2 +426,6 @@
       }
+
+      :host([vertical]) #ticks text {
+        text-anchor: end;
+      }
     `;
@@ -467,3 +475,3 @@ }
         }
-        if (props.has('ticks') || props.has('rtl')) {
+        if (props.has('ticks') || props.has('vertical') || props.has('rtl')) {
             this.setTicks();
@@ -487,9 +495,12 @@ }
         if (this.ticks) {
-            this.createTicks();
-            // Set ticks padding
-            const maxTickBounds = this.maxTickElement.getBoundingClientRect();
-            const ticksPadding = maxTickBounds.width / 2;
-            this.style.setProperty('--vcf-slider-ticks-padding', `${ticksPadding}px`);
-            // Reset ticks with new padding
-            this.createTicks();
+            this.$ticks.innerHTML = '';
+            requestAnimationFrame(() => {
+                this.createTicks();
+                // Set ticks padding
+                const maxTickBounds = this.maxTickElement.getBoundingClientRect();
+                const ticksPadding = maxTickBounds.width / 2;
+                this.style.setProperty('--vcf-slider-ticks-padding', `${ticksPadding}px`);
+                // Reset ticks with new padding
+                this.createTicks();
+            });
         }
@@ -496,0 +507,0 @@ }

package.json

 {
   "name": "@vaadin-component-factory/vcf-slider",
-  "version": "23.3.1",
+  "version": "23.3.2",
   "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.1';
+    return '23.3.2';
   }
@@ -324,2 +324,6 @@
 
+      #ticks text {
+        text-anchor: middle;
+      }
+
       /* VERTICAL TICKS */
@@ -342,2 +346,6 @@
       }
+
+      :host([vertical]) #ticks text {
+        text-anchor: end;
+      }
     `;
@@ -392,3 +400,3 @@ }
 
-    if (props.has('ticks') || props.has('rtl')) {
+    if (props.has('ticks') || props.has('vertical') || props.has('rtl')) {
       this.setTicks();
@@ -418,9 +426,12 @@ }
     if (this.ticks) {
-      this.createTicks();
-      // Set ticks padding
-      const maxTickBounds = this.maxTickElement.getBoundingClientRect();
-      const ticksPadding = maxTickBounds.width / 2;
-      this.style.setProperty('--vcf-slider-ticks-padding', `${ticksPadding}px`);
-      // Reset ticks with new padding
-      this.createTicks();
+      this.$ticks.innerHTML = '';
+      requestAnimationFrame(() => {
+        this.createTicks();
+        // Set ticks padding
+        const maxTickBounds = this.maxTickElement.getBoundingClientRect();
+        const ticksPadding = maxTickBounds.width / 2;
+        this.style.setProperty('--vcf-slider-ticks-padding', `${ticksPadding}px`);
+        // Reset ticks with new padding
+        this.createTicks();
+      });
     }
@@ -427,0 +438,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

234620

increased by0.4%

Lines of code

2692

increased by0.67%

No dependency changes