rm-range-slider 3.0.4 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,36 @@
1
+ MIT License
2
+
3
+
4
+ Copyright (c) 2024 Rajat Malik
5
+
6
+ Permission is hereby granted, free of charge, to any person obtaining a copy
7
+
8
+ of this software and associated documentation files (the "Software"), to deal
9
+
10
+ in the Software without restriction, including without limitation the rights
11
+
12
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13
+
14
+ copies of the Software, and to permit persons to whom the Software is
15
+
16
+ furnished to do so, subject to the following conditions:
17
+
18
+
19
+ The above copyright notice and this permission notice shall be included in all
20
+
21
+ copies or substantial portions of the Software.
22
+
23
+
24
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
25
+
26
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
27
+
28
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
29
+
30
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
31
+
32
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
33
+
34
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
35
+
36
+ SOFTWARE.
package/README.md CHANGED
@@ -1,81 +1,83 @@
1
- # Range-slider
2
-
3
- A highly optimized and fully customizable pure angular component for value range selection.
4
-
5
- The component is not re-rendered while user moves the thumb.
6
- Even if there is a label, only the label component is re-rendered when values are changed.
7
-
8
- RangeSlider uses angular Native's Animated library to transform thumbs / label / selected rail.
9
- These optimizations help to achieve as much native look & feel as possible using only the JS layer.
10
-
11
- ## Installation
12
-
13
- Install rm-range-slider with npm or yarn
14
-
15
- ```bash
16
- npm: npm install --save rm-range-slider
17
- yarn: yarn add rn-range-slider
18
- AND
19
- npm: ng add @angular/material
20
- yarn: yarn add @angular/material
21
- ```
22
-
23
- ## Usage
24
-
25
- Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2.
26
-
27
- ```
28
-
29
- <rm-range-slider
30
- min="0"
31
- max="100"
32
- startValue="0"
33
- endValue="10"
34
- (onValueChanged)="onValueChanged($event)"
35
- ></rm-range-slider>
36
-
37
- ```
38
-
39
- 1. Add `RmRangeSliderComponent` to imports array of component decorater meta
40
- 2. Define Function onValueChanged `onValueChanged` in component like this
41
-
42
- ```
43
- import {RmRangeSliderModule} from "rm-range-slider";
44
-
45
- @Component({
46
- imports: [RmRangeSliderComponent],
47
- })
48
- public onValueChanged(currentAmount: MINMAX): void {
49
- console.log(currentAmount);
50
- }
51
-
52
- ```
53
-
54
- ### Version Mapping
55
-
56
- | Slider | Ng |
57
- | ------ | ---- |
58
- | 0.0.1 | 14.x |
59
- | 1.0.0 | 15.x |
60
- | 2.0.0 | 16.x |
61
- | 3.0.0 | 17.x |
62
-
63
- ### Properties
64
-
65
- | Name | Description | Type | Default Value |
66
- | ---------------- | -------------------------------------------------------------------------------- | ------ | :----------------------------------------------------------: |
67
- | `min` | Minimum value of slider | number | Initially `min` value will be set `0` if not provided |
68
- | `max` | Maximum value of slider | number | Initially `max` value will be set `100` if not provided |
69
- | `startValue` | deafult value for first slider | number | Initially `startValue` value will be set `0` if not provided |
70
- | `endValue` | deafult value for second slider | number | Initially `endValue` value will be set `10` if not provided |
71
- | `onValueChanged` | On change function `onValueChanged` will send both value min and max to compoent | MINMAX | It do not return any value until changes |
72
-
73
- ## Author services
74
-
75
- Are you interested in this library but lacks features? Write to the author, he can do it for you.
76
-
77
- ## Roadmap
78
-
79
- `rangeColor` - Set color for slider line between both min and max slider's thumnail.
80
- `sliderColor` - Set color for slider line.
81
- `sliderColorRight` - Set color for right side slider line
1
+ # Range-slider
2
+
3
+ A highly optimized and fully customizable pure angular component for value range selection.
4
+
5
+ The component is not re-rendered while user moves the thumb.
6
+ Even if there is a label, only the label component is re-rendered when values are changed.
7
+
8
+ RangeSlider uses angular Native's Animated library to transform thumbs / label / selected rail.
9
+ These optimizations help to achieve as much native look & feel as possible using only the JS layer.
10
+
11
+ ## Installation
12
+
13
+ Install rm-range-slider with npm or yarn
14
+
15
+ ```bash
16
+ npm: npm install --save rm-range-slider
17
+ yarn: yarn add rm-range-slider
18
+ AND
19
+ npm: ng add @angular/material
20
+ yarn: yarn add @angular/material
21
+ ```
22
+
23
+ ## Usage
24
+
25
+ Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2.
26
+
27
+ ```
28
+
29
+ <rm-range-slider
30
+ min="0"
31
+ max="100"
32
+ startValue="0"
33
+ endValue="10"
34
+ (onValueChanged)="onValueChanged($event)"
35
+ ></rm-range-slider>
36
+
37
+ ```
38
+
39
+ 1. Add `RmRangeSliderComponent` to imports array of component decorater meta
40
+ 2. Define Function onValueChanged `onValueChanged` in component like this
41
+
42
+ ```
43
+ import {RmRangeSliderModule} from "rm-range-slider";
44
+
45
+ @Component({
46
+ imports: [RmRangeSliderComponent],
47
+ })
48
+ public onValueChanged(currentAmount: MINMAX): void {
49
+ console.log(currentAmount);
50
+ }
51
+
52
+ ```
53
+
54
+ ### Version Mapping
55
+
56
+ | Slider | Ng |
57
+ |--------|------|
58
+ | 0.0.1 | 14.x |
59
+ | 1.0.0 | 15.x |
60
+ | 2.0.0 | 16.x |
61
+ | 3.0.0 | 17.x |
62
+ | 4.0.0 | 18.x |
63
+ | 5.0.0 | 19.x |
64
+
65
+ ### Properties
66
+
67
+ | Name | Description | Type | Default Value |
68
+ |------------------|----------------------------------------------------------------------------------|--------|:------------------------------------------------------------:|
69
+ | `min` | Minimum value of slider | number | Initially `min` value will be set `0` if not provided |
70
+ | `max` | Maximum value of slider | number | Initially `max` value will be set `100` if not provided |
71
+ | `startValue` | deafult value for first slider | number | Initially `startValue` value will be set `0` if not provided |
72
+ | `endValue` | deafult value for second slider | number | Initially `endValue` value will be set `10` if not provided |
73
+ | `onValueChanged` | On change function `onValueChanged` will send both value min and max to compoent | MINMAX | It do not return any value until changes |
74
+
75
+ ## Author services
76
+
77
+ Are you interested in this library but lacks features? Write to the author, he can do it for you.
78
+
79
+ ## Roadmap
80
+
81
+ `rangeColor` - Set color for slider line between both min and max slider's thumnail.
82
+ `sliderColor` - Set color for slider line.
83
+ `sliderColorRight` - Set color for right side slider line
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rm-range-slider",
3
- "version": "3.0.4",
3
+ "version": "5.0.0",
4
4
  "description": "A highly optimized and fully customizable pure angular component for value range selection.",
5
5
  "keywords": [
6
6
  "",
@@ -31,15 +31,25 @@
31
31
  "type": "git",
32
32
  "url": "https://github.com/malikrajat/rm-range-slider"
33
33
  },
34
+ "bugs": {
35
+ "url": "https://github.com/malikrajat/rm-range-slider/issues"
36
+ },
37
+ "files": [
38
+ "dist",
39
+ "README.md",
40
+ "LICENSE"
41
+ ],
34
42
  "peerDependencies": {
35
- "@angular/common": "^17.2.0",
36
- "@angular/core": "^17.2.0",
37
- "@angular/material": "^17.2.1"
43
+ "@angular/common": "^19.0.0",
44
+ "@angular/core": "^19.0.0",
45
+ "@angular/material": "^19.0.0"
38
46
  },
39
47
  "dependencies": {
40
48
  "tslib": "^2.3.0"
41
49
  },
42
50
  "sideEffects": false,
51
+ "type": "module",
52
+ "license": "MIT",
43
53
  "module": "fesm2022/rm-range-slider.mjs",
44
54
  "typings": "index.d.ts",
45
55
  "exports": {
@@ -48,8 +58,6 @@
48
58
  },
49
59
  ".": {
50
60
  "types": "./index.d.ts",
51
- "esm2022": "./esm2022/rm-range-slider.mjs",
52
- "esm": "./esm2022/rm-range-slider.mjs",
53
61
  "default": "./fesm2022/rm-range-slider.mjs"
54
62
  }
55
63
  }
@@ -1,140 +0,0 @@
1
- import { Component, EventEmitter, Input, Output, numberAttribute, } from '@angular/core';
2
- import { FormsModule } from '@angular/forms';
3
- import { MatSliderModule } from '@angular/material/slider';
4
- import { Subject, takeUntil, throttleTime } from 'rxjs';
5
- import * as i0 from "@angular/core";
6
- import * as i1 from "@angular/material/slider";
7
- import * as i2 from "@angular/forms";
8
- export class RmRangeSliderComponent {
9
- constructor() {
10
- this.destroy$ = new Subject();
11
- /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
12
- `RmRangeSliderComponent` component in Angular. In this specific case: */
13
- this.startValue = 0;
14
- /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
15
- `RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is
16
- being defined as an input property with the following configuration: */
17
- this.endValue = 10;
18
- /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
19
- `RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being
20
- defined as an input property with the following configuration: */
21
- this.min = 0;
22
- /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
23
- `RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being
24
- defined as an input property with the following configuration: */
25
- this.max = 100;
26
- /* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for
27
- the `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property
28
- is being defined as an output property with the type of `EventEmitter<MINMAX>`. */
29
- this.onValueChanged = new EventEmitter();
30
- }
31
- /**
32
- * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
33
- * calls the `onSliderChange` function with this value.
34
- */
35
- onSliderInput() {
36
- const value = {
37
- from: this.startValue,
38
- to: this.endValue,
39
- };
40
- this.onSliderChange(value);
41
- }
42
- /**
43
- * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
44
- * hundredth and appending a 'k' if the value is greater than or equal to 1000.
45
- * @param {number} value - The `value` parameter is a number that represents a numerical value which
46
- * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
47
- * string representation of the number. If the value is greater than or equal to 1000, it will be
48
- * rounded and displayed in
49
- * @returns If the `value` is greater than or equal to 1000, the function will return the value divided
50
- * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
51
- */
52
- formatLabel(value) {
53
- if (value >= 1000) {
54
- return Math.round(value / 100) + 'k';
55
- }
56
- return `${value}`;
57
- }
58
- /**
59
- * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
60
- * throttle time of 5000 milliseconds.
61
- * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
62
- * value of the slider, which is of type `MINMAX`.
63
- */
64
- onSliderChange(value) {
65
- this.destroy$.next();
66
- this.destroy$.complete();
67
- const sliderValueChanges$ = new Subject();
68
- sliderValueChanges$
69
- .pipe(throttleTime(5000), takeUntil(this.destroy$))
70
- .subscribe((newValue) => {
71
- this.onValueChanged.emit(newValue);
72
- });
73
- sliderValueChanges$.next(value);
74
- }
75
- /**
76
- * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
77
- * observables by completing a subject.
78
- */
79
- ngOnDestroy() {
80
- this.destroy$.next();
81
- this.destroy$.complete();
82
- }
83
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RmRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
84
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.2", type: RmRangeSliderComponent, isStandalone: true, selector: "rm-range-slider", inputs: { startValue: ["startValue", "startValue", numberAttribute], endValue: ["endValue", "endValue", numberAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute] }, outputs: { onValueChanged: "onValueChanged" }, ngImport: i0, template: `
85
- <mat-slider
86
- [min]="this.min"
87
- [max]="this.max"
88
- showTickMarks
89
- discrete
90
- [displayWith]="formatLabel"
91
- (change)="onSliderInput()"
92
- >
93
- <input matSliderStartThumb [(ngModel)]="startValue" />
94
- <input matSliderEndThumb [(ngModel)]="endValue" />
95
- </mat-slider>
96
- `, isInline: true, styles: ["mat-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
97
- }
98
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RmRangeSliderComponent, decorators: [{
99
- type: Component,
100
- args: [{ selector: 'rm-range-slider', standalone: true, imports: [MatSliderModule, FormsModule], template: `
101
- <mat-slider
102
- [min]="this.min"
103
- [max]="this.max"
104
- showTickMarks
105
- discrete
106
- [displayWith]="formatLabel"
107
- (change)="onSliderInput()"
108
- >
109
- <input matSliderStartThumb [(ngModel)]="startValue" />
110
- <input matSliderEndThumb [(ngModel)]="endValue" />
111
- </mat-slider>
112
- `, styles: ["mat-slider{width:100%}\n"] }]
113
- }], propDecorators: { startValue: [{
114
- type: Input,
115
- args: [{
116
- required: true,
117
- transform: numberAttribute,
118
- }]
119
- }], endValue: [{
120
- type: Input,
121
- args: [{
122
- required: true,
123
- transform: numberAttribute,
124
- }]
125
- }], min: [{
126
- type: Input,
127
- args: [{
128
- required: true,
129
- transform: numberAttribute,
130
- }]
131
- }], max: [{
132
- type: Input,
133
- args: [{
134
- required: true,
135
- transform: numberAttribute,
136
- }]
137
- }], onValueChanged: [{
138
- type: Output
139
- }] } });
140
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm0tcmFuZ2Utc2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3JtLXJhbmdlLXNsaWRlci9zcmMvbGliL3JtLXJhbmdlLXNsaWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFDTixlQUFlLEdBQ2hCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7O0FBNkJ4RCxNQUFNLE9BQU8sc0JBQXNCO0lBdkJuQztRQXdCVSxhQUFRLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUV2Qzs4RUFDc0U7UUFLdEUsZUFBVSxHQUFXLENBQUMsQ0FBQztRQUV2Qjs7NkVBRXFFO1FBS3JFLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFFdEI7O3VFQUUrRDtRQUsvRCxRQUFHLEdBQVcsQ0FBQyxDQUFDO1FBRWhCOzt1RUFFK0Q7UUFLL0QsUUFBRyxHQUFXLEdBQUcsQ0FBQztRQUVsQjs7d0ZBRWdGO1FBRXpFLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQTBEcEQ7SUF4REM7OztPQUdHO0lBQ0gsYUFBYTtRQUNYLE1BQU0sS0FBSyxHQUFXO1lBQ3BCLElBQUksRUFBRSxJQUFJLENBQUMsVUFBVTtZQUNyQixFQUFFLEVBQUUsSUFBSSxDQUFDLFFBQVE7U0FDbEIsQ0FBQztRQUNGLElBQUksQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVEOzs7Ozs7Ozs7T0FTRztJQUVILFdBQVcsQ0FBQyxLQUFhO1FBQ3ZCLElBQUksS0FBSyxJQUFJLElBQUksRUFBRSxDQUFDO1lBQ2xCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxDQUFDO1FBQ3ZDLENBQUM7UUFDRCxPQUFPLEdBQUcsS0FBSyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVEOzs7OztPQUtHO0lBQ0gsY0FBYyxDQUFDLEtBQWE7UUFDMUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ3pCLE1BQU0sbUJBQW1CLEdBQUcsSUFBSSxPQUFPLEVBQVUsQ0FBQztRQUNsRCxtQkFBbUI7YUFDaEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2FBQ2xELFNBQVMsQ0FBQyxDQUFDLFFBQWdCLEVBQUUsRUFBRTtZQUM5QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNyQyxDQUFDLENBQUMsQ0FBQztRQUNMLG1CQUFtQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMzQixDQUFDOzhHQW5HVSxzQkFBc0I7a0dBQXRCLHNCQUFzQixzR0FPcEIsZUFBZSxzQ0FTZixlQUFlLHVCQVNmLGVBQWUsdUJBU2YsZUFBZSw0RUFyRGxCOzs7Ozs7Ozs7Ozs7R0FZVCxpR0FiUyxlQUFlLHNZQUFFLFdBQVc7OzJGQW9CM0Isc0JBQXNCO2tCQXZCbEMsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsV0FBVyxDQUFDLFlBQzdCOzs7Ozs7Ozs7Ozs7R0FZVDs4QkFnQkQsVUFBVTtzQkFKVCxLQUFLO3VCQUFDO3dCQUNMLFFBQVEsRUFBRSxJQUFJO3dCQUNkLFNBQVMsRUFBRSxlQUFlO3FCQUMzQjtnQkFVRCxRQUFRO3NCQUpQLEtBQUs7dUJBQUM7d0JBQ0wsUUFBUSxFQUFFLElBQUk7d0JBQ2QsU0FBUyxFQUFFLGVBQWU7cUJBQzNCO2dCQVVELEdBQUc7c0JBSkYsS0FBSzt1QkFBQzt3QkFDTCxRQUFRLEVBQUUsSUFBSTt3QkFDZCxTQUFTLEVBQUUsZUFBZTtxQkFDM0I7Z0JBVUQsR0FBRztzQkFKRixLQUFLO3VCQUFDO3dCQUNMLFFBQVEsRUFBRSxJQUFJO3dCQUNkLFNBQVMsRUFBRSxlQUFlO3FCQUMzQjtnQkFPTSxjQUFjO3NCQURwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIElucHV0LFxyXG4gIE9uRGVzdHJveSxcclxuICBPdXRwdXQsXHJcbiAgbnVtYmVyQXR0cmlidXRlLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgTWF0U2xpZGVyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2xpZGVyJztcclxuaW1wb3J0IHsgU3ViamVjdCwgdGFrZVVudGlsLCB0aHJvdHRsZVRpbWUgfSBmcm9tICdyeGpzJztcclxuZXhwb3J0IGludGVyZmFjZSBNSU5NQVgge1xyXG4gIGZyb206IG51bWJlcjtcclxuICB0bzogbnVtYmVyO1xyXG59XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3JtLXJhbmdlLXNsaWRlcicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbTWF0U2xpZGVyTW9kdWxlLCBGb3Jtc01vZHVsZV0sXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxtYXQtc2xpZGVyXHJcbiAgICAgIFttaW5dPVwidGhpcy5taW5cIlxyXG4gICAgICBbbWF4XT1cInRoaXMubWF4XCJcclxuICAgICAgc2hvd1RpY2tNYXJrc1xyXG4gICAgICBkaXNjcmV0ZVxyXG4gICAgICBbZGlzcGxheVdpdGhdPVwiZm9ybWF0TGFiZWxcIlxyXG4gICAgICAoY2hhbmdlKT1cIm9uU2xpZGVySW5wdXQoKVwiXHJcbiAgICA+XHJcbiAgICAgIDxpbnB1dCBtYXRTbGlkZXJTdGFydFRodW1iIFsobmdNb2RlbCldPVwic3RhcnRWYWx1ZVwiIC8+XHJcbiAgICAgIDxpbnB1dCBtYXRTbGlkZXJFbmRUaHVtYiBbKG5nTW9kZWwpXT1cImVuZFZhbHVlXCIgLz5cclxuICAgIDwvbWF0LXNsaWRlcj5cclxuICBgLFxyXG4gIHN0eWxlczogYFxyXG4gICAgbWF0LXNsaWRlciB7XHJcbiAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgfVxyXG4gIGAsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBSbVJhbmdlU2xpZGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcclxuICBwcml2YXRlIGRlc3Ryb3kkID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcclxuXHJcbiAgLyogVGhlIGBASW5wdXRgIGRlY29yYXRvciBpbiB0aGUgVHlwZVNjcmlwdCBjb2RlIHNuaXBwZXQgaXMgdXNlZCB0byBkZWZpbmUgYW4gaW5wdXQgcHJvcGVydHkgZm9yIHRoZVxyXG5gUm1SYW5nZVNsaWRlckNvbXBvbmVudGAgY29tcG9uZW50IGluIEFuZ3VsYXIuIEluIHRoaXMgc3BlY2lmaWMgY2FzZTogKi9cclxuICBASW5wdXQoe1xyXG4gICAgcmVxdWlyZWQ6IHRydWUsXHJcbiAgICB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSxcclxuICB9KVxyXG4gIHN0YXJ0VmFsdWU6IG51bWJlciA9IDA7XHJcblxyXG4gIC8qIFRoZSBgQElucHV0YCBkZWNvcmF0b3IgaW4gdGhlIFR5cGVTY3JpcHQgY29kZSBzbmlwcGV0IGlzIHVzZWQgdG8gZGVmaW5lIGFuIGlucHV0IHByb3BlcnR5IGZvciB0aGVcclxuYFJtUmFuZ2VTbGlkZXJDb21wb25lbnRgIGNvbXBvbmVudCBpbiBBbmd1bGFyLiBJbiB0aGlzIHNwZWNpZmljIGNhc2UsIHRoZSBgZW5kVmFsdWVgIHByb3BlcnR5IGlzXHJcbmJlaW5nIGRlZmluZWQgYXMgYW4gaW5wdXQgcHJvcGVydHkgd2l0aCB0aGUgZm9sbG93aW5nIGNvbmZpZ3VyYXRpb246ICovXHJcbiAgQElucHV0KHtcclxuICAgIHJlcXVpcmVkOiB0cnVlLFxyXG4gICAgdHJhbnNmb3JtOiBudW1iZXJBdHRyaWJ1dGUsXHJcbiAgfSlcclxuICBlbmRWYWx1ZTogbnVtYmVyID0gMTA7XHJcblxyXG4gIC8qIFRoZSBgQElucHV0YCBkZWNvcmF0b3IgaW4gdGhlIFR5cGVTY3JpcHQgY29kZSBzbmlwcGV0IGlzIHVzZWQgdG8gZGVmaW5lIGFuIGlucHV0IHByb3BlcnR5IGZvciB0aGVcclxuYFJtUmFuZ2VTbGlkZXJDb21wb25lbnRgIGNvbXBvbmVudCBpbiBBbmd1bGFyLiBJbiB0aGlzIHNwZWNpZmljIGNhc2UsIHRoZSBgbWluYCBwcm9wZXJ0eSBpcyBiZWluZ1xyXG5kZWZpbmVkIGFzIGFuIGlucHV0IHByb3BlcnR5IHdpdGggdGhlIGZvbGxvd2luZyBjb25maWd1cmF0aW9uOiAqL1xyXG4gIEBJbnB1dCh7XHJcbiAgICByZXF1aXJlZDogdHJ1ZSxcclxuICAgIHRyYW5zZm9ybTogbnVtYmVyQXR0cmlidXRlLFxyXG4gIH0pXHJcbiAgbWluOiBudW1iZXIgPSAwO1xyXG5cclxuICAvKiBUaGUgYEBJbnB1dGAgZGVjb3JhdG9yIGluIHRoZSBUeXBlU2NyaXB0IGNvZGUgc25pcHBldCBpcyB1c2VkIHRvIGRlZmluZSBhbiBpbnB1dCBwcm9wZXJ0eSBmb3IgdGhlXHJcbmBSbVJhbmdlU2xpZGVyQ29tcG9uZW50YCBjb21wb25lbnQgaW4gQW5ndWxhci4gSW4gdGhpcyBzcGVjaWZpYyBjYXNlLCB0aGUgYG1heGAgcHJvcGVydHkgaXMgYmVpbmdcclxuZGVmaW5lZCBhcyBhbiBpbnB1dCBwcm9wZXJ0eSB3aXRoIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhdGlvbjogKi9cclxuICBASW5wdXQoe1xyXG4gICAgcmVxdWlyZWQ6IHRydWUsXHJcbiAgICB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSxcclxuICB9KVxyXG4gIG1heDogbnVtYmVyID0gMTAwO1xyXG5cclxuICAvKiBUaGUgYEBPdXRwdXQoKWAgZGVjb3JhdG9yIGluIHRoZSBUeXBlU2NyaXB0IGNvZGUgc25pcHBldCBpcyB1c2VkIHRvIGRlZmluZSBhbiBvdXRwdXQgcHJvcGVydHkgZm9yXHJcbnRoZSBgUm1SYW5nZVNsaWRlckNvbXBvbmVudGAgY29tcG9uZW50IGluIEFuZ3VsYXIuIEluIHRoaXMgc3BlY2lmaWMgY2FzZSwgdGhlIGBnZXRNaW5NYXhgIHByb3BlcnR5XHJcbmlzIGJlaW5nIGRlZmluZWQgYXMgYW4gb3V0cHV0IHByb3BlcnR5IHdpdGggdGhlIHR5cGUgb2YgYEV2ZW50RW1pdHRlcjxNSU5NQVg+YC4gKi9cclxuICBAT3V0cHV0KClcclxuICBwdWJsaWMgb25WYWx1ZUNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPE1JTk1BWD4oKTtcclxuXHJcbiAgLyoqXHJcbiAgICogVGhlIGBvblNsaWRlcklucHV0YCBmdW5jdGlvbiBzZXRzIHRoZSBgdmFsdWVgIG9iamVjdCB3aXRoIGBzdGFydFZhbHVlYCBhbmQgYGVuZFZhbHVlYCBwcm9wZXJ0aWVzIGFuZFxyXG4gICAqIGNhbGxzIHRoZSBgb25TbGlkZXJDaGFuZ2VgIGZ1bmN0aW9uIHdpdGggdGhpcyB2YWx1ZS5cclxuICAgKi9cclxuICBvblNsaWRlcklucHV0KCk6IHZvaWQge1xyXG4gICAgY29uc3QgdmFsdWU6IE1JTk1BWCA9IHtcclxuICAgICAgZnJvbTogdGhpcy5zdGFydFZhbHVlLFxyXG4gICAgICB0bzogdGhpcy5lbmRWYWx1ZSxcclxuICAgIH07XHJcbiAgICB0aGlzLm9uU2xpZGVyQ2hhbmdlKHZhbHVlKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFRoZSBgZm9ybWF0TGFiZWxgIGZ1bmN0aW9uIGluIFR5cGVTY3JpcHQgZm9ybWF0cyBhIG51bWJlciB2YWx1ZSBieSByb3VuZGluZyBpdCB0byB0aGUgbmVhcmVzdFxyXG4gICAqIGh1bmRyZWR0aCBhbmQgYXBwZW5kaW5nIGEgJ2snIGlmIHRoZSB2YWx1ZSBpcyBncmVhdGVyIHRoYW4gb3IgZXF1YWwgdG8gMTAwMC5cclxuICAgKiBAcGFyYW0ge251bWJlcn0gdmFsdWUgLSBUaGUgYHZhbHVlYCBwYXJhbWV0ZXIgaXMgYSBudW1iZXIgdGhhdCByZXByZXNlbnRzIGEgbnVtZXJpY2FsIHZhbHVlIHdoaWNoXHJcbiAgICogbmVlZHMgdG8gYmUgZm9ybWF0dGVkLiBUaGUgYGZvcm1hdExhYmVsYCBmdW5jdGlvbiB0YWtlcyB0aGlzIG51bWJlciBhcyBpbnB1dCBhbmQgcmV0dXJucyBhIGZvcm1hdHRlZFxyXG4gICAqIHN0cmluZyByZXByZXNlbnRhdGlvbiBvZiB0aGUgbnVtYmVyLiBJZiB0aGUgdmFsdWUgaXMgZ3JlYXRlciB0aGFuIG9yIGVxdWFsIHRvIDEwMDAsIGl0IHdpbGwgYmVcclxuICAgKiByb3VuZGVkIGFuZCBkaXNwbGF5ZWQgaW5cclxuICAgKiBAcmV0dXJucyBJZiB0aGUgYHZhbHVlYCBpcyBncmVhdGVyIHRoYW4gb3IgZXF1YWwgdG8gMTAwMCwgdGhlIGZ1bmN0aW9uIHdpbGwgcmV0dXJuIHRoZSB2YWx1ZSBkaXZpZGVkXHJcbiAgICogYnkgMTAwIGFuZCByb3VuZGVkLCBmb2xsb3dlZCBieSB0aGUgbGV0dGVyICdrJy4gT3RoZXJ3aXNlLCBpdCB3aWxsIHJldHVybiB0aGUgdmFsdWUgYXMgYSBzdHJpbmcuXHJcbiAgICovXHJcblxyXG4gIGZvcm1hdExhYmVsKHZhbHVlOiBudW1iZXIpOiBzdHJpbmcge1xyXG4gICAgaWYgKHZhbHVlID49IDEwMDApIHtcclxuICAgICAgcmV0dXJuIE1hdGgucm91bmQodmFsdWUgLyAxMDApICsgJ2snO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIGAke3ZhbHVlfWA7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBUaGUgYG9uU2xpZGVyQ2hhbmdlYCBmdW5jdGlvbiBpbiBUeXBlU2NyaXB0IHNldHMgdXAgYSBTdWJqZWN0IHRvIGVtaXQgc2xpZGVyIHZhbHVlIGNoYW5nZXMgd2l0aCBhXHJcbiAgICogdGhyb3R0bGUgdGltZSBvZiA1MDAwIG1pbGxpc2Vjb25kcy5cclxuICAgKiBAcGFyYW0ge01JTk1BWH0gdmFsdWUgLSBUaGUgYHZhbHVlYCBwYXJhbWV0ZXIgaW4gdGhlIGBvblNsaWRlckNoYW5nZWAgbWV0aG9kIHJlcHJlc2VudHMgdGhlIGN1cnJlbnRcclxuICAgKiB2YWx1ZSBvZiB0aGUgc2xpZGVyLCB3aGljaCBpcyBvZiB0eXBlIGBNSU5NQVhgLlxyXG4gICAqL1xyXG4gIG9uU2xpZGVyQ2hhbmdlKHZhbHVlOiBNSU5NQVgpOiB2b2lkIHtcclxuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xyXG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpO1xyXG4gICAgY29uc3Qgc2xpZGVyVmFsdWVDaGFuZ2VzJCA9IG5ldyBTdWJqZWN0PE1JTk1BWD4oKTtcclxuICAgIHNsaWRlclZhbHVlQ2hhbmdlcyRcclxuICAgICAgLnBpcGUodGhyb3R0bGVUaW1lKDUwMDApLCB0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpXHJcbiAgICAgIC5zdWJzY3JpYmUoKG5ld1ZhbHVlOiBNSU5NQVgpID0+IHtcclxuICAgICAgICB0aGlzLm9uVmFsdWVDaGFuZ2VkLmVtaXQobmV3VmFsdWUpO1xyXG4gICAgICB9KTtcclxuICAgIHNsaWRlclZhbHVlQ2hhbmdlcyQubmV4dCh2YWx1ZSk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBUaGUgbmdPbkRlc3Ryb3kgZnVuY3Rpb24gaW4gVHlwZVNjcmlwdCBpcyB1c2VkIHRvIGNsZWFuIHVwIHJlc291cmNlcyBhbmQgdW5zdWJzY3JpYmUgZnJvbVxyXG4gICAqIG9ic2VydmFibGVzIGJ5IGNvbXBsZXRpbmcgYSBzdWJqZWN0LlxyXG4gICAqL1xyXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgdGhpcy5kZXN0cm95JC5uZXh0KCk7XHJcbiAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XHJcbiAgfVxyXG59XHJcbiJdfQ==
@@ -1,5 +0,0 @@
1
- /*
2
- * Public API Surface of rm-range-slider
3
- */
4
- export * from './lib/rm-range-slider.component';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3JtLXJhbmdlLXNsaWRlci9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsaUNBQWlDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxyXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygcm0tcmFuZ2Utc2xpZGVyXHJcbiAqL1xyXG5cclxuZXhwb3J0ICogZnJvbSAnLi9saWIvcm0tcmFuZ2Utc2xpZGVyLmNvbXBvbmVudCc7XHJcbiJdfQ==
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './public-api';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm0tcmFuZ2Utc2xpZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvcm0tcmFuZ2Utc2xpZGVyL3NyYy9ybS1yYW5nZS1zbGlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
@@ -1,151 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { EventEmitter, numberAttribute, Component, Input, Output } from '@angular/core';
3
- import * as i2 from '@angular/forms';
4
- import { FormsModule } from '@angular/forms';
5
- import * as i1 from '@angular/material/slider';
6
- import { MatSliderModule } from '@angular/material/slider';
7
- import { Subject, throttleTime, takeUntil } from 'rxjs';
8
-
9
- class RmRangeSliderComponent {
10
- constructor() {
11
- this.destroy$ = new Subject();
12
- /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
13
- `RmRangeSliderComponent` component in Angular. In this specific case: */
14
- this.startValue = 0;
15
- /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
16
- `RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is
17
- being defined as an input property with the following configuration: */
18
- this.endValue = 10;
19
- /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
20
- `RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being
21
- defined as an input property with the following configuration: */
22
- this.min = 0;
23
- /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
24
- `RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being
25
- defined as an input property with the following configuration: */
26
- this.max = 100;
27
- /* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for
28
- the `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property
29
- is being defined as an output property with the type of `EventEmitter<MINMAX>`. */
30
- this.onValueChanged = new EventEmitter();
31
- }
32
- /**
33
- * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
34
- * calls the `onSliderChange` function with this value.
35
- */
36
- onSliderInput() {
37
- const value = {
38
- from: this.startValue,
39
- to: this.endValue,
40
- };
41
- this.onSliderChange(value);
42
- }
43
- /**
44
- * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
45
- * hundredth and appending a 'k' if the value is greater than or equal to 1000.
46
- * @param {number} value - The `value` parameter is a number that represents a numerical value which
47
- * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
48
- * string representation of the number. If the value is greater than or equal to 1000, it will be
49
- * rounded and displayed in
50
- * @returns If the `value` is greater than or equal to 1000, the function will return the value divided
51
- * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
52
- */
53
- formatLabel(value) {
54
- if (value >= 1000) {
55
- return Math.round(value / 100) + 'k';
56
- }
57
- return `${value}`;
58
- }
59
- /**
60
- * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
61
- * throttle time of 5000 milliseconds.
62
- * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
63
- * value of the slider, which is of type `MINMAX`.
64
- */
65
- onSliderChange(value) {
66
- this.destroy$.next();
67
- this.destroy$.complete();
68
- const sliderValueChanges$ = new Subject();
69
- sliderValueChanges$
70
- .pipe(throttleTime(5000), takeUntil(this.destroy$))
71
- .subscribe((newValue) => {
72
- this.onValueChanged.emit(newValue);
73
- });
74
- sliderValueChanges$.next(value);
75
- }
76
- /**
77
- * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
78
- * observables by completing a subject.
79
- */
80
- ngOnDestroy() {
81
- this.destroy$.next();
82
- this.destroy$.complete();
83
- }
84
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RmRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
85
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.2", type: RmRangeSliderComponent, isStandalone: true, selector: "rm-range-slider", inputs: { startValue: ["startValue", "startValue", numberAttribute], endValue: ["endValue", "endValue", numberAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute] }, outputs: { onValueChanged: "onValueChanged" }, ngImport: i0, template: `
86
- <mat-slider
87
- [min]="this.min"
88
- [max]="this.max"
89
- showTickMarks
90
- discrete
91
- [displayWith]="formatLabel"
92
- (change)="onSliderInput()"
93
- >
94
- <input matSliderStartThumb [(ngModel)]="startValue" />
95
- <input matSliderEndThumb [(ngModel)]="endValue" />
96
- </mat-slider>
97
- `, isInline: true, styles: ["mat-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
98
- }
99
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RmRangeSliderComponent, decorators: [{
100
- type: Component,
101
- args: [{ selector: 'rm-range-slider', standalone: true, imports: [MatSliderModule, FormsModule], template: `
102
- <mat-slider
103
- [min]="this.min"
104
- [max]="this.max"
105
- showTickMarks
106
- discrete
107
- [displayWith]="formatLabel"
108
- (change)="onSliderInput()"
109
- >
110
- <input matSliderStartThumb [(ngModel)]="startValue" />
111
- <input matSliderEndThumb [(ngModel)]="endValue" />
112
- </mat-slider>
113
- `, styles: ["mat-slider{width:100%}\n"] }]
114
- }], propDecorators: { startValue: [{
115
- type: Input,
116
- args: [{
117
- required: true,
118
- transform: numberAttribute,
119
- }]
120
- }], endValue: [{
121
- type: Input,
122
- args: [{
123
- required: true,
124
- transform: numberAttribute,
125
- }]
126
- }], min: [{
127
- type: Input,
128
- args: [{
129
- required: true,
130
- transform: numberAttribute,
131
- }]
132
- }], max: [{
133
- type: Input,
134
- args: [{
135
- required: true,
136
- transform: numberAttribute,
137
- }]
138
- }], onValueChanged: [{
139
- type: Output
140
- }] } });
141
-
142
- /*
143
- * Public API Surface of rm-range-slider
144
- */
145
-
146
- /**
147
- * Generated bundle index. Do not edit.
148
- */
149
-
150
- export { RmRangeSliderComponent };
151
- //# sourceMappingURL=rm-range-slider.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"rm-range-slider.mjs","sources":["../../../projects/rm-range-slider/src/lib/rm-range-slider.component.ts","../../../projects/rm-range-slider/src/public-api.ts","../../../projects/rm-range-slider/src/rm-range-slider.ts"],"sourcesContent":["import {\r\n Component,\r\n EventEmitter,\r\n Input,\r\n OnDestroy,\r\n Output,\r\n numberAttribute,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatSliderModule } from '@angular/material/slider';\r\nimport { Subject, takeUntil, throttleTime } from 'rxjs';\r\nexport interface MINMAX {\r\n from: number;\r\n to: number;\r\n}\r\n\r\n@Component({\r\n selector: 'rm-range-slider',\r\n standalone: true,\r\n imports: [MatSliderModule, FormsModule],\r\n template: `\r\n <mat-slider\r\n [min]=\"this.min\"\r\n [max]=\"this.max\"\r\n showTickMarks\r\n discrete\r\n [displayWith]=\"formatLabel\"\r\n (change)=\"onSliderInput()\"\r\n >\r\n <input matSliderStartThumb [(ngModel)]=\"startValue\" />\r\n <input matSliderEndThumb [(ngModel)]=\"endValue\" />\r\n </mat-slider>\r\n `,\r\n styles: `\r\n mat-slider {\r\n width: 100%;\r\n }\r\n `,\r\n})\r\nexport class RmRangeSliderComponent implements OnDestroy {\r\n private destroy$ = new Subject<void>();\r\n\r\n /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\r\n`RmRangeSliderComponent` component in Angular. In this specific case: */\r\n @Input({\r\n required: true,\r\n transform: numberAttribute,\r\n })\r\n startValue: number = 0;\r\n\r\n /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\r\n`RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is\r\nbeing defined as an input property with the following configuration: */\r\n @Input({\r\n required: true,\r\n transform: numberAttribute,\r\n })\r\n endValue: number = 10;\r\n\r\n /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\r\n`RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being\r\ndefined as an input property with the following configuration: */\r\n @Input({\r\n required: true,\r\n transform: numberAttribute,\r\n })\r\n min: number = 0;\r\n\r\n /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\r\n`RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being\r\ndefined as an input property with the following configuration: */\r\n @Input({\r\n required: true,\r\n transform: numberAttribute,\r\n })\r\n max: number = 100;\r\n\r\n /* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for\r\nthe `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property\r\nis being defined as an output property with the type of `EventEmitter<MINMAX>`. */\r\n @Output()\r\n public onValueChanged = new EventEmitter<MINMAX>();\r\n\r\n /**\r\n * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and\r\n * calls the `onSliderChange` function with this value.\r\n */\r\n onSliderInput(): void {\r\n const value: MINMAX = {\r\n from: this.startValue,\r\n to: this.endValue,\r\n };\r\n this.onSliderChange(value);\r\n }\r\n\r\n /**\r\n * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest\r\n * hundredth and appending a 'k' if the value is greater than or equal to 1000.\r\n * @param {number} value - The `value` parameter is a number that represents a numerical value which\r\n * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted\r\n * string representation of the number. If the value is greater than or equal to 1000, it will be\r\n * rounded and displayed in\r\n * @returns If the `value` is greater than or equal to 1000, the function will return the value divided\r\n * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.\r\n */\r\n\r\n formatLabel(value: number): string {\r\n if (value >= 1000) {\r\n return Math.round(value / 100) + 'k';\r\n }\r\n return `${value}`;\r\n }\r\n\r\n /**\r\n * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a\r\n * throttle time of 5000 milliseconds.\r\n * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current\r\n * value of the slider, which is of type `MINMAX`.\r\n */\r\n onSliderChange(value: MINMAX): void {\r\n this.destroy$.next();\r\n this.destroy$.complete();\r\n const sliderValueChanges$ = new Subject<MINMAX>();\r\n sliderValueChanges$\r\n .pipe(throttleTime(5000), takeUntil(this.destroy$))\r\n .subscribe((newValue: MINMAX) => {\r\n this.onValueChanged.emit(newValue);\r\n });\r\n sliderValueChanges$.next(value);\r\n }\r\n\r\n /**\r\n * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from\r\n * observables by completing a subject.\r\n */\r\n ngOnDestroy(): void {\r\n this.destroy$.next();\r\n this.destroy$.complete();\r\n }\r\n}\r\n","/*\r\n * Public API Surface of rm-range-slider\r\n */\r\n\r\nexport * from './lib/rm-range-slider.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="rm-range-slider" />
5
- export * from './public-api';
@@ -1,48 +0,0 @@
1
- import { EventEmitter, OnDestroy } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export interface MINMAX {
4
- from: number;
5
- to: number;
6
- }
7
- export declare class RmRangeSliderComponent implements OnDestroy {
8
- private destroy$;
9
- startValue: number;
10
- endValue: number;
11
- min: number;
12
- max: number;
13
- onValueChanged: EventEmitter<MINMAX>;
14
- /**
15
- * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
16
- * calls the `onSliderChange` function with this value.
17
- */
18
- onSliderInput(): void;
19
- /**
20
- * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
21
- * hundredth and appending a 'k' if the value is greater than or equal to 1000.
22
- * @param {number} value - The `value` parameter is a number that represents a numerical value which
23
- * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
24
- * string representation of the number. If the value is greater than or equal to 1000, it will be
25
- * rounded and displayed in
26
- * @returns If the `value` is greater than or equal to 1000, the function will return the value divided
27
- * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
28
- */
29
- formatLabel(value: number): string;
30
- /**
31
- * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
32
- * throttle time of 5000 milliseconds.
33
- * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
34
- * value of the slider, which is of type `MINMAX`.
35
- */
36
- onSliderChange(value: MINMAX): void;
37
- /**
38
- * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
39
- * observables by completing a subject.
40
- */
41
- ngOnDestroy(): void;
42
- static ɵfac: i0.ɵɵFactoryDeclaration<RmRangeSliderComponent, never>;
43
- 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>;
44
- static ngAcceptInputType_startValue: unknown;
45
- static ngAcceptInputType_endValue: unknown;
46
- static ngAcceptInputType_min: unknown;
47
- static ngAcceptInputType_max: unknown;
48
- }
package/public-api.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './lib/rm-range-slider.component';