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

Comparing version 1.0.9 to 1.0.10

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

@@ -346,5 +346,5 @@ import { PropertyValues, LitElement, TemplateResult } from 'lit';
     step: number;
+    /** Minimum value. */
+    min: number;
     /** Maximum value. */
-    min: number;
-    /** Minimum value. */
     max: number;
@@ -369,2 +369,3 @@ private knobsContainer?;
     protected updated(props: PropertyValues): void;
+    private initResizeObserver;
     /** @private */
@@ -395,2 +396,3 @@ passive: string;
     private setTooltipPosition;
+    private resetPosition;
     private setLineColors;
@@ -397,0 +399,0 @@ private set dragging(value);

out-tsc/src/vcf-slider.js

@@ -48,6 +48,6 @@ var Slider_1;
         this.step = 1;
+        /** Minimum value. */
+        this.min = 0;
         /** Maximum value. */
-        this.min = 0;
-        /** Minimum value. */
-        this.max = 50;
+        this.max = 100;
         this.originalKnobOffsetXY = 0;
@@ -111,4 +111,5 @@ this.originalPointerXY = 0;
                         // Calculate new value
+                        let { min, max, step, values: originalValues } = this;
+                        let values = [...originalValues];
                         let multiplier = 0;
-                        let { min, max, step, values } = this;
                         let length = max - min;
@@ -151,3 +152,3 @@ const pct = (newKnobPositionXY + knobSize / 2) / lineSize;
                             values[i] = value;
-                            this.value = this.knobs === 1 ? value : [...values];
+                            this.value = this.knobs === 1 ? value : values;
                         }
@@ -163,3 +164,3 @@ }
     static get version() {
-        return '1.0.9';
+        return '1.0.10';
     }
@@ -370,3 +371,5 @@ get xy() {
     }
-    firstUpdated() { }
+    firstUpdated() {
+        this.initResizeObserver();
+    }
     updated(props) {
@@ -387,7 +390,7 @@ const { ranges, step } = this;
         }
-        if (props.has('rtl') || props.has('ranges') || props.has('min') || props.has('max')) {
+        if (props.has('ranges') || props.has('min') || props.has('max')) {
             this.setKnobElements();
             this.setValue((this.value = this.initialValue));
         }
-        if (props.has('value') || props.has('vertical')) {
+        if (props.has('value') || props.has('vertical') || props.has('rtl')) {
             if (!this.isSorted())
@@ -399,2 +402,6 @@ this.sort();
     }
+    initResizeObserver() {
+        const observer = new ResizeObserver(() => requestAnimationFrame(() => this.setValue()));
+        observer.observe(this);
+    }
     /** @private */
@@ -502,3 +509,2 @@ handleEvent(e) {
     setValue(values = this.values) {
-        values = values.sort((a, b) => a - b);
         this.setTooltipValues(values);
@@ -521,12 +527,7 @@ this.knobIndexes.forEach(i => {
             const position = ((values[i] - min) / (max - min)) * lineSize - knobSize / 2;
-            if (this.vertical) {
+            this.resetPosition(knob);
+            if (this.vertical)
                 knob.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
-                knob.style.removeProperty('right');
-                knob.style.removeProperty('left');
-            }
-            else {
+            else
                 knob.style[this.rtl ? 'right' : 'left'] = `${position}px`;
-                knob.style.removeProperty('bottom');
-                knob.style.removeProperty('top');
-            }
         }
@@ -542,15 +543,16 @@ }
             const position = ((values[i] - min) / (max - min)) * lineSize - tooltipSize / 2;
-            if (this.vertical) {
+            this.resetPosition(tooltip);
+            if (this.vertical)
                 tooltip.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
-                tooltip.style.removeProperty('right');
-                tooltip.style.removeProperty('left');
-            }
-            else {
+            else
                 tooltip.style[this.rtl ? 'right' : 'left'] = `${position}px`;
-                tooltip.style.removeProperty('bottom');
-                tooltip.style.removeProperty('top');
-            }
             this.style.setProperty('--vcf-slider-tooltip-width', `${tooltipBounds.width}px`);
         }
     }
+    resetPosition(element) {
+        element.style.removeProperty('left');
+        element.style.removeProperty('top');
+        element.style.removeProperty('right');
+        element.style.removeProperty('bottom');
+    }
     setLineColors(values = this.values) {
@@ -795,3 +797,3 @@ const { knobs, min, max, lineColorElement, vertical, rtl } = this;
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], Slider.prototype, "rtl", void 0);
@@ -798,0 +800,0 @@ __decorate([

package.json

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

src/vcf-slider.ts

@@ -41,3 +41,3 @@ import { html, css, PropertyValues, LitElement, render, TemplateResult } from 'lit';
   /** If `true`, reverse *direction* so that low to high values go from right to left. */
-  @property({ type: Boolean }) rtl = false;
+  @property({ type: Boolean, reflect: true }) rtl = false;
 
@@ -53,7 +53,7 @@ /** Current value(s) of the slider. */
 
-  /** Maximum value. */
+  /** Minimum value. */
   @property({ type: Number }) min = 0;
 
-  /** Minimum value. */
-  @property({ type: Number }) max = 50;
+  /** Maximum value. */
+  @property({ type: Number }) max = 100;
 
@@ -69,3 +69,3 @@ @query('#knobs') private knobsContainer?: HTMLElement;
   protected static get version() {
-    return '1.0.9';
+    return '1.0.10';
   }
@@ -289,3 +289,5 @@
 
-  protected firstUpdated() {}
+  protected firstUpdated() {
+    this.initResizeObserver();
+  }
 
@@ -309,3 +311,3 @@ protected updated(props: PropertyValues) {
 
-    if (props.has('rtl') || props.has('ranges') || props.has('min') || props.has('max')) {
+    if (props.has('ranges') || props.has('min') || props.has('max')) {
       this.setKnobElements();
@@ -315,3 +317,3 @@ this.setValue((this.value = this.initialValue));
 
-    if (props.has('value') || props.has('vertical')) {
+    if (props.has('value') || props.has('vertical') || props.has('rtl')) {
       if (!this.isSorted()) this.sort();
@@ -322,2 +324,7 @@ else this.setValue();
 
+  private initResizeObserver() {
+    const observer = new ResizeObserver(() => requestAnimationFrame(() => this.setValue()));
+    observer.observe(this);
+  }
+
   /** @private */
@@ -434,3 +441,2 @@ passive = 'true';
   private setValue(values = this.values) {
-    values = values.sort((a, b) => a - b);
     this.setTooltipValues(values);
@@ -454,11 +460,5 @@ this.knobIndexes.forEach(i => {
       const position = ((values[i] - min) / (max - min)) * lineSize - knobSize / 2;
-      if (this.vertical) {
-        knob.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
-        knob.style.removeProperty('right');
-        knob.style.removeProperty('left');
-      } else {
-        knob.style[this.rtl ? 'right' : 'left'] = `${position}px`;
-        knob.style.removeProperty('bottom');
-        knob.style.removeProperty('top');
-      }
+      this.resetPosition(knob);
+      if (this.vertical) knob.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
+      else knob.style[this.rtl ? 'right' : 'left'] = `${position}px`;
     }
@@ -475,11 +475,5 @@ }
       const position = ((values[i] - min) / (max - min)) * lineSize - tooltipSize / 2;
-      if (this.vertical) {
-        tooltip.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
-        tooltip.style.removeProperty('right');
-        tooltip.style.removeProperty('left');
-      } else {
-        tooltip.style[this.rtl ? 'right' : 'left'] = `${position}px`;
-        tooltip.style.removeProperty('bottom');
-        tooltip.style.removeProperty('top');
-      }
+      this.resetPosition(tooltip);
+      if (this.vertical) tooltip.style[this.rtl ? 'bottom' : 'top'] = `${position}px`;
+      else tooltip.style[this.rtl ? 'right' : 'left'] = `${position}px`;
       this.style.setProperty('--vcf-slider-tooltip-width', `${tooltipBounds.width}px`);
@@ -489,2 +483,9 @@ }
 
+  private resetPosition(element: HTMLElement) {
+    element.style.removeProperty('left');
+    element.style.removeProperty('top');
+    element.style.removeProperty('right');
+    element.style.removeProperty('bottom');
+  }
+
   private setLineColors(values = this.values) {
@@ -592,4 +593,5 @@ const { knobs, min, max, lineColorElement, vertical, rtl } = this;
           // Calculate new value
+          let { min, max, step, values: originalValues } = this;
+          let values = [...originalValues];
           let multiplier = 0;
-          let { min, max, step, values } = this;
           let length = max - min;
@@ -634,3 +636,3 @@ const pct = (newKnobPositionXY + knobSize / 2) / lineSize;
             values[i] = value;
-            this.value = this.knobs === 1 ? value : [...values];
+            this.value = this.knobs === 1 ? value : values;
           }
@@ -637,0 +639,0 @@ }

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

Improved metrics

Total package byte prevSize

211996

increased by0.16%

Lines of code

2360

increased by0.17%

No dependency changes