= (value: T) => void;
214 | type OnTouchedFn = () => void;
215 |
--------------------------------------------------------------------------------
/projects/ngx-bar-rating-demo/public/custom/003-bellsprout.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
10 |
11 |
14 |
21 |
24 |
25 |
27 |
35 |
36 |
39 |
40 |
44 |
45 |
46 |
47 |
50 |
51 |
54 |
55 |
58 |
59 |
62 |
63 |
67 |
68 |
69 |
72 |
73 |
75 |
82 |
85 |
86 |
88 |
95 |
98 |
99 |
102 |
103 |
107 |
108 |
109 |
112 |
113 |
116 |
117 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
--------------------------------------------------------------------------------
/projects/ngx-bar-rating-demo/public/custom/004-squirtle.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
13 |
14 |
19 |
34 |
35 |
36 |
37 |
38 |
41 |
42 |
45 |
46 |
49 |
50 |
53 |
54 |
59 |
60 |
61 |
64 |
65 |
67 |
73 |
76 |
77 |
79 |
85 |
92 |
93 |
97 |
98 |
102 |
103 |
104 |
105 |
109 |
110 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
--------------------------------------------------------------------------------
/projects/ngx-bar-rating-demo/public/custom/007-pikachu.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
11 |
12 |
15 |
16 |
24 |
25 |
26 |
27 |
30 |
31 |
34 |
35 |
38 |
39 |
42 |
43 |
47 |
48 |
49 |
50 |
51 |
52 |
55 |
56 |
59 |
66 |
67 |
68 |
69 |
70 |
74 |
75 |
78 |
85 |
86 |
87 |
88 |
89 |
91 |
92 |
94 |
95 |
97 |
98 |
100 |
101 |
108 |
111 |
112 |
114 |
121 |
124 |
125 |
127 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
Angular Bar Rating
4 | Minimal, light-weight Angular ratings.
5 |
6 |
7 | [](https://ngx-bar-rating.netlify.app/)
8 | [](https://stackblitz.com/edit/ngx-bar-rating)
9 | [](https://www.npmjs.com/package/ngx-bar-rating)
10 | [](https://github.com/MurhafSousli/ngx-bar-rating/actions/workflows/integrate.yml)[](https://codecov.io/gh/MurhafSousli/ngx-bar-rating)
11 | [](https://www.npmjs.com/package/ngx-bar-rating)
12 | [](https://www.npmjs.com/package/ngx-bar-rating)
13 | [](https://bundlephobia.com/result?p=ngx-bar-rating)
14 | [](/LICENSE)
15 |
16 | ___
17 |
18 | If you like this plugin, please give it a star ⭐.
19 |
20 | ## Table of Contents
21 |
22 | - [Live Demo](https://ngx-bar-rating.netlify.app/)
23 | - [Installation](#installation)
24 | - [Usage](#usage)
25 | - [Options](#options)
26 | - [Click Effect](#click-effect)
27 | - [CSS Variables](#css-variables)
28 | - [Themes](#themes)
29 | - [Issues](#issues)
30 | - [Author](#author)
31 |
32 |
100 |
103 | ```
104 |
105 | #### FontAwesome rating example
106 |
107 | ```html
108 |
109 |
113 | ```
114 |
115 | #### Movie rating example
116 |
117 | ```html
118 | form is valid: {{ form.valid ? 'true' : 'false' }}
129 | {{ formRating }}
130 | ```
131 |
132 | And reactive forms:
133 |
134 | ```html
135 |
138 | form is valid: {{ form.valid ? 'true' : 'false' }}
139 | {{ formRating }}
140 | ```
141 |
142 | ` component:
147 |
148 | ```html
149 |
2 |
Angular Bar Rating
4 | Minimal, light-weight Angular ratings.
5 |
6 |
7 | [](https://ngx-bar-rating.netlify.app/)
8 | [](https://stackblitz.com/edit/ngx-bar-rating)
9 | [](https://www.npmjs.com/package/ngx-bar-rating)
10 | [](https://github.com/MurhafSousli/ngx-bar-rating/actions/workflows/integrate.yml)[](https://codecov.io/gh/MurhafSousli/ngx-bar-rating)
11 | [](https://www.npmjs.com/package/ngx-bar-rating)
12 | [](https://www.npmjs.com/package/ngx-bar-rating)
13 | [](https://bundlephobia.com/result?p=ngx-bar-rating)
14 | [](/LICENSE)
15 |
16 | ___
17 |
18 | If you like this plugin, please give it a star ⭐.
19 |
20 | ## Table of Contents
21 |
22 | - [Live Demo](https://ngx-bar-rating.netlify.app/)
23 | - [Installation](#installation)
24 | - [Usage](#usage)
25 | - [Options](#options)
26 | - [Click Effect](#click-effect)
27 | - [CSS Variables](#css-variables)
28 | - [Themes](#themes)
29 | - [Issues](#issues)
30 | - [Author](#author)
31 |
32 |
100 |
103 | ```
104 |
105 | #### FontAwesome rating example
106 |
107 | ```html
108 |
109 |
113 | ```
114 |
115 | #### Movie rating example
116 |
117 | ```html
118 | form is valid: {{ form.valid ? 'true' : 'false' }}
129 | {{ formRating }}
130 | ```
131 |
132 | And reactive forms:
133 |
134 | ```html
135 |
138 | form is valid: {{ form.valid ? 'true' : 'false' }}
139 | {{ formRating }}
140 | ```
141 |
142 | ` component:
147 |
148 | ```html
149 |
5 |
6 |
7 |
10 |
11 |
14 |
15 |
18 |
19 |
22 |
23 |
26 |
27 |
30 |
31 |
34 |
35 |
38 |
50 |
52 |
58 |
61 |
62 |
64 |
70 |
74 |
75 |
79 |
91 |
92 |
95 |
96 |
99 |
100 |
103 |
104 |
107 |
108 |
113 |
114 |
115 |
116 |
119 |
120 |
123 |
124 |
127 |
128 |
131 |
132 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
--------------------------------------------------------------------------------
/projects/ngx-bar-rating/src/lib/bar-rating.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 | import { By } from '@angular/platform-browser';
3 | import {
4 | FormsModule,
5 | ReactiveFormsModule,
6 | ControlValueAccessor,
7 | NG_VALIDATORS,
8 | NG_VALUE_ACCESSOR,
9 | UntypedFormControl
10 | } from '@angular/forms';
11 | import { BarRating } from 'ngx-bar-rating';
12 |
13 | describe('BarRating Component', () => {
14 | let component: BarRating;
15 | let fixture: ComponentFixture;
16 |
17 | beforeEach(async () => {
18 | await TestBed.configureTestingModule({
19 | imports: [FormsModule, ReactiveFormsModule, BarRating],
20 | }).compileComponents();
21 |
22 | fixture = TestBed.createComponent(BarRating);
23 | component = fixture.componentInstance;
24 | fixture.detectChanges();
25 | });
26 |
27 | it('should create the component', () => {
28 | expect(component).toBeTruthy();
29 | });
30 |
31 | it('should register BarRating as a provider for NG_VALUE_ACCESSOR', () => {
32 | const injector = fixture.debugElement.injector;
33 |
34 | const valueAccessorProviders = injector.get(NG_VALUE_ACCESSOR);
35 | expect(valueAccessorProviders.some(provider => provider instanceof BarRating)).toBeTrue();
36 | });
37 |
38 | it('should register BarRating as a provider for NG_VALIDATORS', () => {
39 | const injector = fixture.debugElement.injector;
40 |
41 | const valueAccessorProviders = injector.get(NG_VALIDATORS);
42 | expect(valueAccessorProviders.some(provider => provider instanceof BarRating)).toBeTrue();
43 | });
44 |
45 | it('should call writeValue, registerOnChange, and registerOnTouched', () => {
46 | const onChangeSpy = jasmine.createSpy('onChange');
47 | const onTouchedSpy = jasmine.createSpy('onTouched');
48 |
49 | // Register onChange and onTouched
50 | component.registerOnChange(onChangeSpy);
51 | component.registerOnTouched(onTouchedSpy);
52 |
53 | // Call writeValue and verify value propagation
54 | component.writeValue(3);
55 | expect(component.rate()).toBe(3);
56 |
57 | // Simulate interaction
58 | component.updateRating(4);
59 | expect(onChangeSpy).toHaveBeenCalledWith(4);
60 |
61 | // Simulate touch
62 | component.onTouched();
63 | expect(onTouchedSpy).toHaveBeenCalled();
64 | });
65 |
66 | it('should initialize with default options', () => {
67 | expect(component.rate()).toBeUndefined();
68 | expect(component.max()).toBe(component.defaultOptions.maxValue);
69 | expect(component.readonly()).toBe(component.defaultOptions.readonly);
70 | });
71 |
72 | it('should update rating and emit onChange', () => {
73 | const spy = spyOn(component, 'onChange');
74 | component.updateRating(4);
75 | expect(component.rate()).toBe(4);
76 | expect(spy).toHaveBeenCalledWith(4);
77 | });
78 |
79 | it('should validate required input', () => {
80 | fixture.componentRef.setInput('required', true);
81 | const control = new UntypedFormControl('');
82 | const validationResult = component.validate(control);
83 | expect(validationResult).toEqual({ required: true });
84 |
85 | control.setValue(3);
86 | expect(component.validate(control)).toBeNull();
87 | });
88 |
89 | it('should handle writeValue correctly', () => {
90 | component.writeValue(5);
91 | expect(component.rate()).toBe(5);
92 | });
93 |
94 | it('should set disabled state', () => {
95 | component.setDisabledState(true);
96 | expect(component.disabled).toBeTrue();
97 | });
98 |
99 | it('should compute correct contexts for units', () => {
100 | fixture.componentRef.setInput('max', 5);
101 | component.updateRating(3.5);
102 | fixture.detectChanges();
103 |
104 | const contexts = component.contexts();
105 | expect(contexts).toEqual([
106 | 'selected',
107 | 'selected',
108 | 'selected',
109 | 'fraction',
110 | 'inactive'
111 | ]);
112 | });
113 |
114 | it('should compute correct rating text', () => {
115 | fixture.componentRef.setInput('titles', ['Poor', 'Fair', 'Good', 'Very Good', 'Excellent']);
116 | component.updateRating(3);
117 | fixture.detectChanges();
118 |
119 | expect(component.ratingText()).toBe('Very Good');
120 | });
121 |
122 | it('should display rating value if titles input is not provided', () => {
123 | component.updateRating(2);
124 | fixture.detectChanges();
125 |
126 | expect(component.ratingText()).toBe(2);
127 | });
128 |
129 | it('should compute correct contexts for units when hovered', () => {
130 | component.hoveredIndex.set(3);
131 | fixture.detectChanges();
132 |
133 | expect(component.contexts()).toEqual([
134 | 'active',
135 | 'active',
136 | 'active',
137 | 'inactive',
138 | 'inactive'
139 | ]);
140 | });
141 |
142 | describe('handleKeydown', () => {
143 | it('should increase rating with ArrowRight', () => {
144 | component.rate.set(3);
145 | const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
146 | component.handleKeydown(event);
147 | expect(component.rate()).toBe(4); // Increased from 3 to 4
148 | });
149 |
150 | it('should decrease rating with ArrowLeft', () => {
151 | component.rate.set(3);
152 | const event = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
153 | component.handleKeydown(event);
154 | expect(component.rate()).toBe(2); // Decreased from 3 to 2
155 | });
156 |
157 | it('should not increase rating above max', () => {
158 | component.rate.set(5); // Set to max
159 | const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
160 | component.handleKeydown(event);
161 | expect(component.rate()).toBe(5); // Remains at max
162 | });
163 |
164 | it('should not decrease rating below 1', () => {
165 | component.rate.set(1); // Set to min
166 | const event = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
167 | component.handleKeydown(event);
168 | expect(component.rate()).toBe(1); // Remains at min
169 | });
170 |
171 | it('should emit barClick event when rating changes', () => {
172 | component.rate.set(3);
173 | spyOn(component.barClick, 'emit');
174 | const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
175 | component.handleKeydown(event);
176 | expect(component.barClick.emit).toHaveBeenCalledWith(4); // Emit new rating
177 | });
178 |
179 | it('should do nothing for unsupported keys', () => {
180 | component.rate.set(3);
181 | const event = new KeyboardEvent('keydown', { key: 'a' });
182 | component.handleKeydown(event);
183 | expect(component.rate()).toBe(3); // Unchanged
184 | });
185 |
186 | it('should not process keydown if readonly or disabled', () => {
187 | component.rate.set(3);
188 | fixture.componentRef.setInput('readonly', true);
189 | const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
190 | component.handleKeydown(event);
191 | expect(component.rate()).toBe(3); // Unchanged
192 |
193 | fixture.componentRef.setInput('readonly', false);
194 | component.disabled = true;
195 | component.handleKeydown(event);
196 | expect(component.rate()).toBe(3); // Unchanged
197 | });
198 |
199 | it('should handle Enter key without modifying the rate', () => {
200 | spyOn(component, 'updateRating'); // Spy on updateRating method
201 | spyOn(component.barClick, 'emit'); // Spy on barClick emitter
202 |
203 | // Set initial rate
204 | component.rate.set(3);
205 |
206 | // Simulate keydown for Enter key
207 | const event = new KeyboardEvent('keydown', { key: 'Enter' });
208 | component.handleKeydown(event);
209 |
210 | // Assert that updateRating was not called
211 | expect(component.updateRating).not.toHaveBeenCalled();
212 |
213 | // Assert that barClick was not emitted
214 | expect(component.barClick.emit).not.toHaveBeenCalled();
215 |
216 | // Assert that rate remains unchanged
217 | expect(component.rate()).toBe(3);
218 | });
219 |
220 | it('should handle Space key without modifying the rate', () => {
221 | spyOn(component, 'updateRating'); // Spy on updateRating method
222 | spyOn(component.barClick, 'emit'); // Spy on barClick emitter
223 |
224 | // Set initial rate
225 | component.rate.set(3);
226 |
227 | // Simulate keydown for Space key
228 | const event = new KeyboardEvent('keydown', { key: ' ' });
229 | component.handleKeydown(event);
230 |
231 | // Assert that updateRating was not called
232 | expect(component.updateRating).not.toHaveBeenCalled();
233 |
234 | // Assert that barClick was not emitted
235 | expect(component.barClick.emit).not.toHaveBeenCalled();
236 |
237 | // Assert that rate remains unchanged
238 | expect(component.rate()).toBe(3);
239 | });
240 | });
241 |
242 | describe('handleClick', () => {
243 | it('should update rating when clicking on a bar', () => {
244 | const target = fixture.debugElement.query(By.css('.br-unit[data-value="4"]'));
245 | const event = new MouseEvent('click', { bubbles: true });
246 | spyOn(component.barClick, 'emit');
247 |
248 | target.nativeElement.dispatchEvent(event);
249 | component.handleClick(event);
250 |
251 | expect(component.rate()).toBe(4); // Updated to clicked value
252 | expect(component.barClick.emit).toHaveBeenCalledWith(4); // Emit clicked rating
253 | });
254 |
255 | it('should not process click if readonly or disabled', () => {
256 | component.rate.set(3);
257 | fixture.componentRef.setInput('readonly', true);
258 |
259 | const target = fixture.debugElement.query(By.css('.br-unit[data-value="4"]'));
260 | const event = new MouseEvent('click', { bubbles: true });
261 |
262 | target.nativeElement.dispatchEvent(event);
263 | component.handleClick(event);
264 |
265 | expect(component.rate()).toBe(3); // Unchanged
266 |
267 | fixture.componentRef.setInput('readonly', false);
268 | component.disabled = true;
269 |
270 | component.handleClick(event);
271 | expect(component.rate()).toBe(3); // Unchanged
272 | });
273 |
274 | it('should do nothing if clicking outside a bar', () => {
275 | component.rate.set(3);
276 | const event = new MouseEvent('click', { bubbles: true });
277 | const outsideTarget = fixture.debugElement.query(By.css('.br')).nativeElement;
278 |
279 | outsideTarget.dispatchEvent(event);
280 | component.handleClick(event);
281 |
282 | expect(component.rate()).toBe(3); // Unchanged
283 | });
284 | });
285 | });
286 |
--------------------------------------------------------------------------------
/projects/ngx-bar-rating-demo/public/custom/006-bullbasaur.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
11 |
12 |
16 |
17 |
21 |
22 |
30 |
31 |
32 |
33 |
36 |
37 |
41 |
42 |
49 |
50 |
51 |
54 |
55 |
58 |
59 |
62 |
63 |
66 |
67 |
69 |
70 |
74 |
75 |
78 |
79 |
81 |
87 |
90 |
91 |
93 |
100 |
101 |
105 |
106 |
110 |
111 |
112 |
113 |
114 |
118 |
119 |
123 |
124 |
130 |
131 |
132 |
133 |
137 |
138 |
142 |
143 |
149 |
150 |
151 |
152 |
155 |
156 |
158 |
159 |
161 |
162 |
164 |
165 |
167 |
168 |
170 |
171 |
173 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
--------------------------------------------------------------------------------
/projects/ngx-bar-rating-demo/public/custom/002-venonat.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
9 |
12 |
13 |
16 |
17 |
20 |
21 |
26 |
27 |
28 |
31 |
32 |
33 |
34 |
35 |
38 |
39 |
47 |
48 |
49 |
50 |
51 |
52 |
55 |
56 |
64 |
65 |
66 |
67 |
68 |
69 |
71 |
72 |
75 |
76 |
77 |
80 |
81 |
84 |
85 |
92 |
93 |
94 |
95 |
96 |
99 |
100 |
103 |
104 |
112 |
113 |
114 |
115 |
118 |
119 |
122 |
123 |
130 |
131 |
132 |
133 |
136 |
137 |
139 |
146 |
149 |
150 |
152 |
159 |
160 |
161 |
163 |
164 |
166 |
167 |
172 |
173 |
174 |
175 |
177 |
178 |
180 |
181 |
186 |
187 |
188 |
189 |
198 |
199 |
201 |
202 |
204 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
--------------------------------------------------------------------------------
/projects/ngx-bar-rating-demo/public/custom/008-charmander.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
9 |
12 |
13 |
15 |
16 |
19 |
20 |
22 |
23 |
29 |
30 |
31 |
32 |
35 |
36 |
38 |
39 |
42 |
43 |
45 |
46 |
52 |
53 |
54 |
55 |
56 |
60 |
61 |
65 |
66 |
74 |
75 |
76 |
77 |
80 |
81 |
84 |
85 |
88 |
89 |
92 |
93 |
98 |
99 |
100 |
103 |
104 |
106 |
112 |
115 |
116 |
118 |
126 |
127 |
131 |
132 |
136 |
137 |
138 |
140 |
141 |
143 |
155 |
156 |
159 |
160 |
162 |
163 |
166 |
167 |
169 |
170 |
176 |
177 |
178 |
179 |
182 |
183 |
185 |
186 |
189 |
190 |
192 |
193 |
199 |
200 |
201 |
202 |
205 |
206 |
208 |
209 |
212 |
213 |
215 |
216 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
--------------------------------------------------------------------------------
/projects/ngx-bar-rating-demo/public/custom/005-jigglypuff.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
9 |
12 |
13 |
16 |
17 |
22 |
23 |
24 |
25 |
28 |
29 |
32 |
33 |
38 |
39 |
40 |
41 |
42 |
43 |
45 |
46 |
49 |
50 |
54 |
55 |
56 |
57 |
59 |
60 |
63 |
64 |
68 |
69 |
70 |
71 |
74 |
75 |
78 |
79 |
82 |
105 |
108 |
109 |
112 |
113 |
116 |
134 |
135 |
138 |
139 |
142 |
143 |
146 |
147 |
152 |
153 |
154 |
157 |
158 |
160 |
167 |
170 |
171 |
173 |
180 |
183 |
184 |
186 |
187 |
191 |
192 |
194 |
195 |
197 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
--------------------------------------------------------------------------------
6 | 
3 |