rm-range-slider - npm Package Compare versions

Comparing version 0.0.1 to 3.0.1

index.d.ts

@@ -0,0 +0,0 @@ /**

lib/rm-range-slider.component.d.ts

@@ -1,82 +0,48 @@
-import { AfterViewInit, ElementRef, EventEmitter, OnInit, Renderer2, SimpleChanges } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { MINMAX } from './rm-range-slider.component.interface';
+import { EventEmitter, OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class RmRangeSliderComponent implements OnInit, AfterViewInit {
-    #private;
-    private readonly fb;
-    private renderer;
-    slider: FormGroup;
+export interface MINMAX {
+    from: number;
+    to: number;
+}
+export declare class RmRangeSliderComponent implements OnDestroy {
+    private destroy$;
+    startValue: number;
+    endValue: number;
     min: number;
     max: number;
-    setMinValue: number;
-    disabled: boolean;
-    showToolTip: boolean;
-    setMaxValue: number;
-    showScale: boolean;
-    doubleSlider: boolean;
-    toolTipColor: string;
-    toolTipColorHover: string;
-    toolTipColorHoverShadow: string;
-    rangeColor: string;
-    sliderColor: string;
-    sliderColorRight: string;
     onValueChanged: EventEmitter<MINMAX>;
-    toSliders: ElementRef;
-    fromSlider: ElementRef;
-    toSliderToolTip: ElementRef;
-    fromSliderToolTip: ElementRef;
-    private gradient;
-    private destroyed$;
     /**
-     * The constructor function is a special function that is called when a new instance of the class is created
-     * @param {FormBuilder} fb - FormBuilder - This is the FormBuilder service that we'll use to create our form.
-     * @param {Renderer2} renderer - Renderer2 - This is the Angular Renderer2 service. It's used to manipulate the DOM.
+     * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
+     * calls the `onSliderChange` function with this value.
      */
-    constructor(fb: FormBuilder, renderer: Renderer2);
+    onSliderInput(): void;
     /**
-     * It creates a form.
+     * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
+     * hundredth and appending a 'k' if the value is greater than or equal to 1000.
+     * @param {number} value - The `value` parameter is a number that represents a numerical value which
+     * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
+     * string representation of the number. If the value is greater than or equal to 1000, it will be
+     * rounded and displayed in
+     * @returns If the `value` is greater than or equal to 1000, the function will return the value divided
+     * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
      */
-    ngOnInit(): void;
+    formatLabel(value: number): string;
     /**
-     * A lifecycle hook that is called after a component's view has been fully initialized.
+     * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
+     * throttle time of 5000 milliseconds.
+     * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
+     * value of the slider, which is of type `MINMAX`.
      */
-    ngAfterViewInit(): void;
+    onSliderChange(value: MINMAX): void;
     /**
-     * When the component is destroyed, we want to complete the observable and let any subscribers know that the observable is
-     * complete.
+     * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
+     * observables by completing a subject.
      */
     ngOnDestroy(): void;
-    /**
-     * If the changes object has a property called disabled and it's not the first change and the current value is true, then
-     * call the #disabledSlider function with the current value of the disabled property
-     * @param {SimpleChanges} changes - SimpleChanges - this is the object that contains the changes that have been made to
-     * the component.
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * It's a function that takes a string as an argument and if the showToolTip property is true, it calls the
-     * fromSliderToolTipPosition() or toSliderToolTipPosition() function depending on the value of the string argument
-     * @param {string} slideType - string - This is the type of slider that is being moved. It can be either 'from' or 'to'.
-     */
-    fireEventOnInput(slideType: string): void;
-    /**
-     * We're calculating the position of the tooltip based on the value of the slider
-     */
-    fromSliderToolTipPosition(): void;
-    /**
-     * The function takes the value of the toSlider and converts it to a percentage value that is used to position the
-     * toSliderToolTip
-     */
-    /**
-     * The function takes the value of the toSlider and converts it to a percentage value that is used to position the
-     * toSliderToolTip
-     */
-    toSliderToolTipPosition(): void;
-    /**
-     * We're getting the values of the two sliders, and then emitting an event with those values
-     */
-    fireEventOnChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RmRangeSliderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RmRangeSliderComponent, "rm-range-slider", never, { "min": "SliderMinRange"; "max": "SliderMaxRange"; "setMinValue": "setMinValue"; "disabled": "disabled"; "showToolTip": "showToolTip"; "setMaxValue": "setMaxValue"; "showScale": "showScale"; "doubleSlider": "doubleSlider"; "toolTipColor": "toolTipColor"; "toolTipColorHover": "toolTipColorHover"; "toolTipColorHoverShadow": "toolTipColorHoverShadow"; "rangeColor": "rangeColor"; "sliderColor": "sliderColor"; "sliderColorRight": "sliderColorRight"; }, { "onValueChanged": "onValueChanged"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RmRangeSliderComponent, "rm-range-slider", never, { "startValue": { "alias": "startValue"; "required": true; }; "endValue": { "alias": "endValue"; "required": true; }; "min": { "alias": "min"; "required": true; }; "max": { "alias": "max"; "required": true; }; }, { "onValueChanged": "onValueChanged"; }, never, never, true, never>;
+    static ngAcceptInputType_startValue: unknown;
+    static ngAcceptInputType_endValue: unknown;
+    static ngAcceptInputType_min: unknown;
+    static ngAcceptInputType_max: unknown;
 }

package.json

 {
   "name": "rm-range-slider",
-  "version": "0.0.1",
+  "version": "3.0.1",
   "description": "A highly optimized and fully customizable pure angular component for value range selection.",
@@ -35,4 +35,4 @@ "keywords": [
   "peerDependencies": {
-    "@angular/common": "^14.2.0",
-    "@angular/core": "^14.2.0"
+    "@angular/common": "^17.2.0",
+    "@angular/core": "^17.2.0"
   },
@@ -42,7 +42,4 @@ "dependencies": {
   },
-  "module": "fesm2015/rm-range-slider.mjs",
-  "es2020": "fesm2020/rm-range-slider.mjs",
-  "esm2020": "esm2020/rm-range-slider.mjs",
-  "fesm2020": "fesm2020/rm-range-slider.mjs",
-  "fesm2015": "fesm2015/rm-range-slider.mjs",
+  "sideEffects": false,
+  "module": "fesm2022/rm-range-slider.mjs",
   "typings": "index.d.ts",
@@ -55,10 +52,7 @@ "exports": {
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/rm-range-slider.mjs",
-      "es2020": "./fesm2020/rm-range-slider.mjs",
-      "es2015": "./fesm2015/rm-range-slider.mjs",
-      "node": "./fesm2015/rm-range-slider.mjs",
-      "default": "./fesm2020/rm-range-slider.mjs"
+      "esm2022": "./esm2022/rm-range-slider.mjs",
+      "esm": "./esm2022/rm-range-slider.mjs",
+      "default": "./fesm2022/rm-range-slider.mjs"
     }
-  },
-  "sideEffects": false
+  }
 }

public-api.d.ts

 export * from './lib/rm-range-slider.component';
-export * from './lib/rm-range-slider.module';
-export * from './lib/rm-range-slider.component.interface';

README.md

@@ -1,2 +0,1 @@
-
 # Range-slider
@@ -12,3 +11,2 @@
 
-
 ## Installation
@@ -23,10 +21,6 @@
 
-
 ## Usage
 
-Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2. 
+Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2.
 
-
-
-
 ```
@@ -38,51 +32,29 @@ ...
 ...
+ <rm-range-slider
+    min="0"
+    max="100"
+    startValue="0"
+    endValue="10"
+    (onValueChanged)="onValueChanged($event)"
+    ></rm-range-slider>
 
-<rm-range-slider
-	[SliderMinRange]="0"
-	[showToolTip]="true"
-	[doubleSlider]="true"
-	[SliderMaxRange]="100"
-	[disabled]="false"
-	[setMinValue]="10"
-	[setMaxValue]="60"
-	[toolTipColor]="'#8a00e5'"
-	[rangeColor]="'#8a00e5'"
-	[sliderColor]="'#C6C6C6'"
-	[toolTipColorHover]="'#b200e5ff'"
-	[toolTipColorHoverShadow]="'rgba(108, 0, 119, 0.3)'"
-	[sliderColorRight]="'rgba(239,7,65,0.98)'"
-	(onValueChanged)="onValueChanged($event)"
-></rm-range-slider>
-... 
-
-add root lavel style file
-:root {
-	--tooltip-arrow: red;
-	--slider-thumb-color: blue;
-	--slider-thumb-color-hover: blue;
-	--slider-thumb-color-hover-shadow:  rgba(108, 0, 119, 0.3);
-}
-... 
 ```
 
-### Properties
+### Version Mapping
 
-| Name                      | Description                                                          | Type    |                            Default Value                             |
-|---------------------------|----------------------------------------------------------------------|---------|:--------------------------------------------------------------------:|
-| `SliderMinRange`          | Minimum value of slider                                              | number  |        Initially `min` value will be set `0` if not provided         |
-| `SliderMaxRange`          | Maximum value of slider                                              | number  |       Initially `max` value will be set `100` if not provided        |
-| `showToolTip`             | Show or hide tool tip                                                | boolean |         Initially value will be set `false` if not provided          |
-| `doubleSlider`            | Use like SIngle Slider or double slider                              | boolean |          Initially value will be set `true` if not provided          |
-| `disabled`                | Disable or enable the slider moment                                  | boolean |         Initially value will be set `false` if not provided          |
-| `setMinValue`             | Min value for slider's thumbnail to set on                           | number  |        Initially `min` value will be set `0` if not provided         |
-| `setMaxValue`             | Max value for slider's thumbnail to set on                           | boolean |       Initially `max` value will be set `100` if not provided        |
-| `toolTipColor`            | set color for tool tip                                               | string  |        Initially set default color for tool tip is `#8a00e5`         |
-| `rangeColor`              | Set color for slider line between both min and max slider's thumnail | string  | Initially set default color for tool tip is `rgba(255,255,255,0.99)` |
-| `sliderColor`             | Set color for slider line                                            | string  | Initially set default color for tool tip is `rgba(255,255,255,0.47)` |
-| `toolTipColorHover`       | set color for tool tip on hover                                      | string  |        Initially set default color for tool tip is `#8a00e5'`        |
-| `toolTipColorHoverShadow` | set shadow color for tool tip on hover                               | string  |        Initially set default color for tool tip is `#8a00e5'`        |
-| `sliderColorRight`        | Set color for right side slider line                                 | string  |   Initially set default color for tool tip is `rgb(198, 198, 198)`   |
-| `onValueChanged`          | Emit both value object of min and max                                | object  |              It do not return any value until changes                |
+| Slider | Ng   |
+| ------ | ---- |
+| 0.0.1  | 14.x |
+| 1.0.0  | 15.x |
+| 2.0.0  | 16.x |
+| 3.0.0  | 17.x |
 
-All the other props (e.g. style) will be passed to root container component.
+### Properties
 
+| Name             | Description                           | Type   |                      Default Value                      |
+| ---------------- | ------------------------------------- | ------ | :-----------------------------------------------------: |
+| `min`            | Minimum value of slider               | number |  Initially `min` value will be set `0` if not provided  |
+| `max`            | Maximum value of slider               | number | Initially `max` value will be set `100` if not provided |
+| `startValue`     | Maximum value of slider               | number |  Initially `min` value will be set `0` if not provided  |
+| `endValue`       | Maximum value of slider               | number | Initially `max` value will be set `100` if not provided |
+| `onValueChanged` | Emit both value object of min and max | MINMAX |        It do not return any value until changes         |

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

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

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

40698

decreased by-78.47%

Number of package files

10

decreased by-37.5%

Lines of code

359

decreased by-70.81%

Number of lines in readme file

58

decreased by-32.56%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes