@spectrum-web-components/slider - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+## [0.2.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.2.1...@spectrum-web-components/slider@0.2.2) (2019-11-01)
+
+### Bug Fixes
+
+-   **slider:** ensure track widths follow dynamic Spectrum CSS values ([5ad1c1a](https://github.com/adobe/spectrum-web-components/commit/5ad1c1a))
+-   **slider:** use standard "change" and "input" events ([59cf786](https://github.com/adobe/spectrum-web-components/commit/59cf786))
+
 ## [0.2.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.2.0...@spectrum-web-components/slider@0.2.1) (2019-10-23)
@@ -8,0 +15,0 @@

lib/slider.d.ts

 import { CSSResultArray, TemplateResult, PropertyValues } from 'lit-element';
 import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';
-export declare type SliderEventDetail = number;
 export declare const variants: string[];
@@ -78,7 +77,1 @@ export declare class Slider extends Focusable {
 }
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-slider:input': CustomEvent<SliderEventDetail>;
-        'sp-slider:change': CustomEvent<SliderEventDetail>;
-    }
-}

lib/slider.js

@@ -354,6 +354,5 @@ /*
     dispatchInputEvent() {
-        const inputEvent = new CustomEvent('sp-slider:input', {
+        const inputEvent = new Event('input', {
             bubbles: true,
             composed: true,
-            detail: this.value,
         });
@@ -364,6 +363,5 @@ this.dispatchEvent(inputEvent);
         this.input.value = this.value.toString();
-        const changeEvent = new CustomEvent('sp-slider:change', {
+        const changeEvent = new Event('change', {
             bubbles: true,
             composed: true,
-            detail: this.value,
         });
@@ -384,4 +382,6 @@ this.dispatchEvent(changeEvent);
     get trackRightStyle() {
-        const width = `width: ${(1 - this.trackProgress) * 100}%; `;
-        const offset = `left: calc(${this.trackProgress * 100}% + 8px)`;
+        const width = `width: ${(1 - this.trackProgress) * 100}%;`;
+        const halfHandleWidth = `var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2`;
+        const offset = `left: calc(${this.trackProgress *
+            100}% + ${halfHandleWidth})`;
         return width + offset;
@@ -388,0 +388,0 @@ }

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.2.1",
+    "version": "0.2.2",
     "description": "",
@@ -40,6 +40,6 @@ "main": "lib/index.js",
     "dependencies": {
-        "@spectrum-web-components/shared": "^0.1.4",
+        "@spectrum-web-components/shared": "^0.2.0",
         "tslib": "^1.10.0"
     },
-    "gitHead": "5a687cabb4a3a33c9ab10f7c1545560d9c0f92fd"
+    "gitHead": "2157014e1c3f8cf184663261e4095eef59011b37"
 }

src/slider.ts

@@ -26,4 +26,2 @@ /*
 
-export type SliderEventDetail = number;
-
 export const variants = ['color', 'filled', 'ramp', 'range', 'tick'];
@@ -439,6 +437,5 @@
     private dispatchInputEvent(): void {
-        const inputEvent = new CustomEvent('sp-slider:input', {
+        const inputEvent = new Event('input', {
             bubbles: true,
             composed: true,
-            detail: this.value,
         });
@@ -452,6 +449,5 @@
 
-        const changeEvent = new CustomEvent('sp-slider:change', {
+        const changeEvent = new Event('change', {
             bubbles: true,
             composed: true,
-            detail: this.value,
         });
@@ -477,4 +473,6 @@
     private get trackRightStyle(): string {
-        const width = `width: ${(1 - this.trackProgress) * 100}%; `;
-        const offset = `left: calc(${this.trackProgress * 100}% + 8px)`;
+        const width = `width: ${(1 - this.trackProgress) * 100}%;`;
+        const halfHandleWidth = `var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2`;
+        const offset = `left: calc(${this.trackProgress *
+            100}% + ${halfHandleWidth})`;
 
@@ -488,8 +486,1 @@ return width + offset;
 }
-
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-slider:input': CustomEvent<SliderEventDetail>;
-        'sp-slider:change': CustomEvent<SliderEventDetail>;
-    }
-}

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

Worsened metrics

Total package byte prevSize

154056

decreased by-0.08%

Lines of code

2176

decreased by-0.64%

Dependency changes

• + Added@spectrum-web-components/shared@0.2.0(transitive)

• - Removed@spectrum-web-components/shared@0.1.4(transitive)

• Updated@spectrum-web-components/shared@^0.2.0