@progress/kendo-themes-html 5.6.1-dev.1 → 5.6.1-dev.2

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.
Files changed (4) hide show
  1. package/dist/rating/tests/rating.js +270 -53
  2. package/dist/rating/tests/rating.js.map +2 -2
  3. package/package.json +2 -2
  4. package/src/rating/tests/rating.tsx +205 -57
package/dist/rating/tests/rating.js CHANGED
@@ -75,24 +75,30 @@
75
75
  root.render(
76
76
  /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", {
77
77
  id: "test-area",
78
- className: "k-d-grid k-grid-cols-2"
79
- }, /* @__PURE__ */ import_react.default.createElement("span", null, "Continuous"), /* @__PURE__ */ import_react.default.createElement("span", null, "Single"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
78
+ className: "k-d-grid",
79
+ style: { gridTemplateColumns: "120px repeat(2, 1fr)", alignItems: "center" }
80
+ }, /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement("span", null, "Continuous Selection"), /* @__PURE__ */ import_react.default.createElement("span", null, "Single Selection"), /* @__PURE__ */ import_react.default.createElement("span", null, "Hover:"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
80
81
  className: "k-rating k-widget"
81
82
  }, /* @__PURE__ */ import_react.default.createElement("span", {
82
83
  className: "k-rating-container"
83
84
  }, /* @__PURE__ */ import_react.default.createElement("span", {
84
- className: "k-rating-item k-state-selected"
85
+ className: "k-rating-item k-hover"
85
86
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
86
87
  name: "star"
87
88
  })), /* @__PURE__ */ import_react.default.createElement("span", {
88
- className: "k-rating-item k-state-selected"
89
+ className: "k-rating-item k-hover"
89
90
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
90
91
  name: "star"
91
92
  })), /* @__PURE__ */ import_react.default.createElement("span", {
92
- className: "k-rating-item k-state-selected"
93
+ className: "k-rating-item k-hover"
93
94
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
94
95
  name: "star"
95
- })), /* @__PURE__ */ import_react.default.createElement("span", {
96
+ }), /* @__PURE__ */ import_react.default.createElement("span", {
97
+ className: "k-rating-precision-part",
98
+ style: { width: `calc( --var() )` }
99
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
100
+ name: "star"
101
+ }))), /* @__PURE__ */ import_react.default.createElement("span", {
96
102
  className: "k-rating-item"
97
103
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
98
104
  name: "star-outline"
@@ -100,9 +106,7 @@
100
106
  className: "k-rating-item"
101
107
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
102
108
  name: "star-outline"
103
- }))), /* @__PURE__ */ import_react.default.createElement("span", {
104
- className: "k-rating-label"
105
- }, /* @__PURE__ */ import_react.default.createElement("span", null, "3 / 5")))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
109
+ }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
106
110
  className: "k-rating k-widget"
107
111
  }, /* @__PURE__ */ import_react.default.createElement("span", {
108
112
  className: "k-rating-container"
@@ -115,7 +119,7 @@
115
119
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
116
120
  name: "star-outline"
117
121
  })), /* @__PURE__ */ import_react.default.createElement("span", {
118
- className: "k-rating-item k-state-selected"
122
+ className: "k-rating-item k-hover"
119
123
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
120
124
  name: "star"
121
125
  })), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -126,30 +130,47 @@
126
130
  className: "k-rating-item"
127
131
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
128
132
  name: "star-outline"
129
- }))), /* @__PURE__ */ import_react.default.createElement("span", {
130
- className: "k-rating-label"
131
- }, /* @__PURE__ */ import_react.default.createElement("span", null, "3 / 5")))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
132
- className: "k-rating k-widget"
133
+ }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Focus:"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
134
+ className: "k-rating k-widget k-focus"
133
135
  }, /* @__PURE__ */ import_react.default.createElement("span", {
134
136
  className: "k-rating-container"
135
137
  }, /* @__PURE__ */ import_react.default.createElement("span", {
136
- className: "k-rating-item k-state-selected"
138
+ className: "k-rating-item k-selected"
139
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
140
+ name: "star"
141
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
142
+ className: "k-rating-item k-selected"
137
143
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
138
144
  name: "star"
139
145
  })), /* @__PURE__ */ import_react.default.createElement("span", {
140
- className: "k-rating-item k-state-selected"
146
+ className: "k-rating-item k-selected k-focus"
141
147
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
142
148
  name: "star"
143
149
  })), /* @__PURE__ */ import_react.default.createElement("span", {
144
- className: "k-rating-item k-state-selected"
150
+ className: "k-rating-item"
145
151
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
146
152
  name: "star-outline"
147
- }), /* @__PURE__ */ import_react.default.createElement("span", {
148
- className: "k-rating-precision-part",
149
- style: { width: "12px" }
153
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
154
+ className: "k-rating-item"
155
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
156
+ name: "star-outline"
157
+ }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
158
+ className: "k-rating k-widget k-focus"
159
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
160
+ className: "k-rating-container"
161
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
162
+ className: "k-rating-item"
163
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
164
+ name: "star-outline"
165
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
166
+ className: "k-rating-item"
167
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
168
+ name: "star-outline"
169
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
170
+ className: "k-rating-item k-selected k-focus"
150
171
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
151
172
  name: "star"
152
- }))), /* @__PURE__ */ import_react.default.createElement("span", {
173
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
153
174
  className: "k-rating-item"
154
175
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
155
176
  name: "star-outline"
@@ -157,13 +178,23 @@
157
178
  className: "k-rating-item"
158
179
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
159
180
  name: "star-outline"
160
- }))), /* @__PURE__ */ import_react.default.createElement("span", {
161
- className: "k-rating-label"
162
- }, /* @__PURE__ */ import_react.default.createElement("span", null, "2.5 / 5")))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
181
+ }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Selected:"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
163
182
  className: "k-rating k-widget"
164
183
  }, /* @__PURE__ */ import_react.default.createElement("span", {
165
184
  className: "k-rating-container"
166
185
  }, /* @__PURE__ */ import_react.default.createElement("span", {
186
+ className: "k-rating-item k-selected"
187
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
188
+ name: "star"
189
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
190
+ className: "k-rating-item k-selected"
191
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
192
+ name: "star"
193
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
194
+ className: "k-rating-item k-selected"
195
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
196
+ name: "star"
197
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
167
198
  className: "k-rating-item"
168
199
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
169
200
  name: "star-outline"
@@ -171,16 +202,23 @@
171
202
  className: "k-rating-item"
172
203
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
173
204
  name: "star-outline"
205
+ }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
206
+ className: "k-rating k-widget"
207
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
208
+ className: "k-rating-container"
209
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
210
+ className: "k-rating-item"
211
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
212
+ name: "star-outline"
174
213
  })), /* @__PURE__ */ import_react.default.createElement("span", {
175
- className: "k-rating-item k-state-selected"
214
+ className: "k-rating-item"
176
215
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
177
216
  name: "star-outline"
178
- }), /* @__PURE__ */ import_react.default.createElement("span", {
179
- className: "k-rating-precision-part",
180
- style: { width: "12px" }
217
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
218
+ className: "k-rating-item k-selected"
181
219
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
182
220
  name: "star"
183
- }))), /* @__PURE__ */ import_react.default.createElement("span", {
221
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
184
222
  className: "k-rating-item"
185
223
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
186
224
  name: "star-outline"
@@ -188,13 +226,23 @@
188
226
  className: "k-rating-item"
189
227
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
190
228
  name: "star-outline"
191
- }))), /* @__PURE__ */ import_react.default.createElement("span", {
192
- className: "k-rating-label"
193
- }, /* @__PURE__ */ import_react.default.createElement("span", null, "2.5 / 5")))), /* @__PURE__ */ import_react.default.createElement("span", null, "Normal"), /* @__PURE__ */ import_react.default.createElement("span", null, "Focus"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
229
+ }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Selected Hover:"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
194
230
  className: "k-rating k-widget"
195
231
  }, /* @__PURE__ */ import_react.default.createElement("span", {
196
232
  className: "k-rating-container"
197
233
  }, /* @__PURE__ */ import_react.default.createElement("span", {
234
+ className: "k-rating-item k-selected k-hover"
235
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
236
+ name: "star"
237
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
238
+ className: "k-rating-item k-selected k-hover"
239
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
240
+ name: "star"
241
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
242
+ className: "k-rating-item k-selected k-hover"
243
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
244
+ name: "star"
245
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
198
246
  className: "k-rating-item"
199
247
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
200
248
  name: "star-outline"
@@ -202,10 +250,22 @@
202
250
  className: "k-rating-item"
203
251
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
204
252
  name: "star-outline"
253
+ }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
254
+ className: "k-rating k-widget"
255
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
256
+ className: "k-rating-container"
257
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
258
+ className: "k-rating-item"
259
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
260
+ name: "star-outline"
205
261
  })), /* @__PURE__ */ import_react.default.createElement("span", {
206
262
  className: "k-rating-item"
207
263
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
208
264
  name: "star-outline"
265
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
266
+ className: "k-rating-item k-selected k-hover"
267
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
268
+ name: "star"
209
269
  })), /* @__PURE__ */ import_react.default.createElement("span", {
210
270
  className: "k-rating-item"
211
271
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
@@ -214,22 +274,53 @@
214
274
  className: "k-rating-item"
215
275
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
216
276
  name: "star-outline"
217
- }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
218
- className: "k-rating k-widget k-state-focused"
277
+ }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Label"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
278
+ className: "k-rating k-widget"
219
279
  }, /* @__PURE__ */ import_react.default.createElement("span", {
220
280
  className: "k-rating-container"
221
281
  }, /* @__PURE__ */ import_react.default.createElement("span", {
222
- className: "k-rating-item k-state-selected"
282
+ className: "k-rating-item k-selected"
223
283
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
224
284
  name: "star"
225
285
  })), /* @__PURE__ */ import_react.default.createElement("span", {
226
- className: "k-rating-item k-state-selected"
286
+ className: "k-rating-item"
287
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
288
+ name: "star-outline"
289
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
290
+ className: "k-rating-item"
291
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
292
+ name: "star-outline"
293
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
294
+ className: "k-rating-item"
295
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
296
+ name: "star-outline"
297
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
298
+ className: "k-rating-item"
299
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
300
+ name: "star-outline"
301
+ }))), /* @__PURE__ */ import_react.default.createElement("span", {
302
+ className: "k-rating-label"
303
+ }, /* @__PURE__ */ import_react.default.createElement("span", null, "1 / 5")))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
304
+ className: "k-rating k-widget"
305
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
306
+ className: "k-rating-container"
307
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
308
+ className: "k-rating-item k-selected"
227
309
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
228
310
  name: "star"
229
311
  })), /* @__PURE__ */ import_react.default.createElement("span", {
230
- className: "k-rating-item k-state-selected k-state-focused"
312
+ className: "k-rating-item k-selected"
313
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
314
+ name: "star-outline"
315
+ }), /* @__PURE__ */ import_react.default.createElement("span", {
316
+ className: "k-rating-precision-part",
317
+ style: { width: "12px" }
231
318
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
232
319
  name: "star"
320
+ }))), /* @__PURE__ */ import_react.default.createElement("span", {
321
+ className: "k-rating-item"
322
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
323
+ name: "star-outline"
233
324
  })), /* @__PURE__ */ import_react.default.createElement("span", {
234
325
  className: "k-rating-item"
235
326
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
@@ -240,22 +331,22 @@
240
331
  name: "star-outline"
241
332
  }))), /* @__PURE__ */ import_react.default.createElement("span", {
242
333
  className: "k-rating-label"
243
- }, /* @__PURE__ */ import_react.default.createElement("span", null, "3 / 5")))), /* @__PURE__ */ import_react.default.createElement("span", null, "Nested"), /* @__PURE__ */ import_react.default.createElement("span", null, "SVG"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
244
- style: { backgroundColor: "#656565" }
334
+ }, /* @__PURE__ */ import_react.default.createElement("span", null, "1.5 / 5")))), /* @__PURE__ */ import_react.default.createElement("span", null, "Nested"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
335
+ style: { backgroundColor: "silver" }
245
336
  }, /* @__PURE__ */ import_react.default.createElement("span", {
246
- className: "k-rating k-widget k-state-focused"
337
+ className: "k-rating k-widget k-focus"
247
338
  }, /* @__PURE__ */ import_react.default.createElement("span", {
248
339
  className: "k-rating-container"
249
340
  }, /* @__PURE__ */ import_react.default.createElement("span", {
250
- className: "k-rating-item k-state-selected"
341
+ className: "k-rating-item k-selected"
251
342
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
252
343
  name: "star"
253
344
  })), /* @__PURE__ */ import_react.default.createElement("span", {
254
- className: "k-rating-item k-state-selected"
345
+ className: "k-rating-item k-selected"
255
346
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
256
347
  name: "star"
257
348
  })), /* @__PURE__ */ import_react.default.createElement("span", {
258
- className: "k-rating-item k-state-selected k-state-focused"
349
+ className: "k-rating-item k-selected k-focus"
259
350
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
260
351
  name: "star"
261
352
  })), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -266,14 +357,38 @@
266
357
  className: "k-rating-item"
267
358
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
268
359
  name: "star-outline"
269
- }))), /* @__PURE__ */ import_react.default.createElement("span", {
270
- className: "k-rating-label"
271
- }, /* @__PURE__ */ import_react.default.createElement("span", null, "3 / 5"))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
360
+ })))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
361
+ style: { backgroundColor: "silver" }
362
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
363
+ className: "k-rating k-widget k-focus"
364
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
365
+ className: "k-rating-container"
366
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
367
+ className: "k-rating-item"
368
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
369
+ name: "star-outline"
370
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
371
+ className: "k-rating-item k-selected k-focus"
372
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
373
+ name: "star"
374
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
375
+ className: "k-rating-item"
376
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
377
+ name: "star-outline"
378
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
379
+ className: "k-rating-item"
380
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
381
+ name: "star-outline"
382
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
383
+ className: "k-rating-item"
384
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
385
+ name: "star-outline"
386
+ })))))), /* @__PURE__ */ import_react.default.createElement("span", null, "SVG"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
272
387
  className: "k-rating k-widget"
273
388
  }, /* @__PURE__ */ import_react.default.createElement("span", {
274
389
  className: "k-rating-container"
275
390
  }, /* @__PURE__ */ import_react.default.createElement("span", {
276
- className: "k-rating-item k-state-selected"
391
+ className: "k-rating-item k-selected"
277
392
  }, /* @__PURE__ */ import_react.default.createElement("svg", {
278
393
  width: "50",
279
394
  height: "30",
@@ -288,7 +403,7 @@
288
403
  width: "50",
289
404
  height: "30"
290
405
  }))), /* @__PURE__ */ import_react.default.createElement("span", {
291
- className: "k-rating-item k-state-selected"
406
+ className: "k-rating-item k-selected"
292
407
  }, /* @__PURE__ */ import_react.default.createElement("span", {
293
408
  className: "k-rating-precision-complement",
294
409
  style: { width: "50px" }
@@ -326,7 +441,7 @@
326
441
  }))), /* @__PURE__ */ import_react.default.createElement("span", {
327
442
  style: { width: "50px", height: "30px", display: "block" }
328
443
  })), /* @__PURE__ */ import_react.default.createElement("span", {
329
- className: "k-rating-item k-state-selected k-state-focused"
444
+ className: "k-rating-item k-selected k-focus"
330
445
  }, /* @__PURE__ */ import_react.default.createElement("svg", {
331
446
  width: "50",
332
447
  height: "30",
@@ -344,16 +459,118 @@
344
459
  strokeWidth: "2"
345
460
  })))), /* @__PURE__ */ import_react.default.createElement("span", {
346
461
  className: "k-rating-label"
347
- }, /* @__PURE__ */ import_react.default.createElement("span", null, "2 / 5")))), /* @__PURE__ */ import_react.default.createElement("span", null, "Readonly"), /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
462
+ }, /* @__PURE__ */ import_react.default.createElement("span", null, "1.5 / 3")))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
463
+ className: "k-rating k-widget"
464
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
465
+ className: "k-rating-container"
466
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
467
+ className: "k-rating-item k-selected"
468
+ }, /* @__PURE__ */ import_react.default.createElement("svg", {
469
+ width: "50",
470
+ height: "30",
471
+ version: "1.1",
472
+ xmlns: "http://www.w3.org/2000/svg"
473
+ }, /* @__PURE__ */ import_react.default.createElement("rect", {
474
+ x: "0",
475
+ y: "0",
476
+ rx: "5",
477
+ ry: "5",
478
+ width: "50",
479
+ height: "30",
480
+ fillOpacity: "0",
481
+ stroke: "#e9e9e9",
482
+ strokeWidth: "2"
483
+ }))), /* @__PURE__ */ import_react.default.createElement("span", {
484
+ className: "k-rating-item k-selected"
485
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
486
+ className: "k-rating-precision-complement",
487
+ style: { width: "50px" }
488
+ }, /* @__PURE__ */ import_react.default.createElement("svg", {
489
+ width: "50",
490
+ height: "30",
491
+ version: "1.1",
492
+ xmlns: "http://www.w3.org/2000/svg"
493
+ }, /* @__PURE__ */ import_react.default.createElement("rect", {
494
+ x: "0",
495
+ y: "0",
496
+ rx: "5",
497
+ ry: "5",
498
+ width: "50",
499
+ height: "30",
500
+ fillOpacity: "0",
501
+ stroke: "#e9e9e9",
502
+ strokeWidth: "2"
503
+ }))), /* @__PURE__ */ import_react.default.createElement("span", {
504
+ className: "k-rating-precision-part",
505
+ style: { width: "25px" }
506
+ }, /* @__PURE__ */ import_react.default.createElement("svg", {
507
+ width: "50",
508
+ height: "30",
509
+ version: "1.1",
510
+ xmlns: "http://www.w3.org/2000/svg"
511
+ }, /* @__PURE__ */ import_react.default.createElement("rect", {
512
+ className: "k-i-rect",
513
+ x: "0",
514
+ y: "0",
515
+ rx: "5",
516
+ ry: "5",
517
+ width: "50",
518
+ height: "30"
519
+ }))), /* @__PURE__ */ import_react.default.createElement("span", {
520
+ style: { width: "50px", height: "30px", display: "block" }
521
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
522
+ className: "k-rating-item k-selected k-focus"
523
+ }, /* @__PURE__ */ import_react.default.createElement("svg", {
524
+ width: "50",
525
+ height: "30",
526
+ version: "1.1",
527
+ xmlns: "http://www.w3.org/2000/svg"
528
+ }, /* @__PURE__ */ import_react.default.createElement("rect", {
529
+ x: "0",
530
+ y: "0",
531
+ rx: "5",
532
+ ry: "5",
533
+ width: "50",
534
+ height: "30",
535
+ fillOpacity: "0",
536
+ stroke: "#e9e9e9",
537
+ strokeWidth: "2"
538
+ })))), /* @__PURE__ */ import_react.default.createElement("span", {
539
+ className: "k-rating-label"
540
+ }, /* @__PURE__ */ import_react.default.createElement("span", null, "1.5 / 3")))), /* @__PURE__ */ import_react.default.createElement("span", null, "Readonly"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
348
541
  className: "k-rating k-widget k-state-readonly"
349
542
  }, /* @__PURE__ */ import_react.default.createElement("span", {
350
543
  className: "k-rating-container"
351
544
  }, /* @__PURE__ */ import_react.default.createElement("span", {
352
- className: "k-rating-item k-state-selected"
545
+ className: "k-rating-item k-selected"
353
546
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
354
547
  name: "star"
355
548
  })), /* @__PURE__ */ import_react.default.createElement("span", {
356
- className: "k-rating-item k-state-selected"
549
+ className: "k-rating-item k-selected"
550
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
551
+ name: "star"
552
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
553
+ className: "k-rating-item"
554
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
555
+ name: "star-outline"
556
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
557
+ className: "k-rating-item"
558
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
559
+ name: "star-outline"
560
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
561
+ className: "k-rating-item"
562
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
563
+ name: "star-outline"
564
+ }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
565
+ className: "k-rating k-widget k-state-readonly"
566
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
567
+ className: "k-rating-container"
568
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
569
+ className: "k-rating-item"
570
+ }, /* @__PURE__ */ import_react.default.createElement(Icon, {
571
+ name: "star-outline"
572
+ })), /* @__PURE__ */ import_react.default.createElement("span", {
573
+ className: "k-rating-item k-selected"
357
574
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
358
575
  name: "star"
359
576
  })), /* @__PURE__ */ import_react.default.createElement("span", {
@@ -368,7 +585,7 @@
368
585
  className: "k-rating-item"
369
586
  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
370
587
  name: "star-outline"
371
- }))))), /* @__PURE__ */ import_react.default.createElement("section", null)))
588
+ })))))))
372
589
  );
373
590
  })();
374
591
  //# sourceMappingURL=rating.js.map
package/dist/rating/tests/rating.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/rating/tests/rating.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
4
- "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n <>\n <div id=\"test-area\" className=\"k-d-grid k-grid-cols-2\">\n\n <span>Continuous</span>\n <span>Single</span>\n\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>3 / 5</span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>3 / 5</span>\n </span>\n </span>\n </section>\n\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star-outline\"></Icon>\n <span className=\"k-rating-precision-part\" style={{ width: \"12px\" }}>\n <Icon name=\"star\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>2.5 / 5</span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star-outline\"></Icon>\n <span className=\"k-rating-precision-part\" style={{ width: \"12px\" }}>\n <Icon name=\"star\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>2.5 / 5</span>\n </span>\n </span>\n </section>\n\n <span>Normal</span>\n <span>Focus</span>\n\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n\n <section>\n <span className=\"k-rating k-widget k-state-focused\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected k-state-focused\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>3 / 5</span>\n </span>\n </span>\n </section>\n\n <span>Nested</span>\n <span>SVG</span>\n\n <section>\n <div style={{ backgroundColor: \"#656565\" }}>\n <span className=\"k-rating k-widget k-state-focused\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected k-state-focused\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>3 / 5</span>\n </span>\n </span>\n </div>\n </section>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-state-selected\">\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect className=\"k-i-rect\" x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\"></rect>\n </svg>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <span className=\"k-rating-precision-complement\" style={{ width: '50px' }} >\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\" fillOpacity=\"0\" stroke=\"#e9e9e9\" strokeWidth=\"2\"></rect>\n </svg>\n </span>\n <span className=\"k-rating-precision-part\" style={{ width: \"25px\" }} >\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect className=\"k-i-rect\" x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\"></rect>\n </svg>\n </span>\n <span style={{ width: '50px', height: \"30px\", display: \"block\" }} ></span>\n </span>\n <span className=\"k-rating-item k-state-selected k-state-focused\">\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\" fillOpacity=\"0\" stroke=\"#e9e9e9\" strokeWidth=\"2\"></rect>\n </svg>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>2 / 5</span>\n </span>\n </span>\n </section>\n\n <span>Readonly</span>\n <span></span>\n\n <section>\n <span className=\"k-rating k-widget k-state-readonly\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-state-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n\n <section>\n </section>\n </div>\n </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n className?: string;\n style?: React.CSSProperties;\n name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n render() {\n const {\n className,\n style,\n name\n } = this.props;\n\n return (\n <>\n { name &&\n <span\n className={classNames(\n className,\n 'k-icon',\n {\n [`k-i-${name}`]: name\n }\n )}\n style={style}>\n </span>\n }\n </>\n );\n }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n const result = {};\n\n const addLeafKeys = (arg) => {\n (typeof arg === 'object'\n ? Object.keys(arg).forEach((key) => {\n result[key] = arg[key];\n })\n : (result[arg] = true)\n );\n };\n\n const addKeys = (list) =>\n list\n .filter((arg) => arg !== true && Boolean(arg))\n .map((arg: any) =>\n (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n );\n\n addKeys(args);\n\n return Object.keys(result)\n .map((key) => (result[key] && key) || null)\n .filter((el) => el !== null)\n .join(' ');\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n <>\n <div id=\"test-area\" className=\"k-d-grid\" style={{ gridTemplateColumns: \"120px repeat(2, 1fr)\", alignItems: \"center\" }}>\n\n <span></span>\n <span>Continuous Selection</span>\n <span>Single Selection</span>\n\n <span>Hover:</span>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-hover\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-hover\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-hover\">\n <Icon name=\"star\"></Icon>\n <span className=\"k-rating-precision-part\" style={{ width: `calc( --var() )` }}>\n <Icon name=\"star\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item k-hover\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n\n <span>Focus:</span>\n <section>\n <span className=\"k-rating k-widget k-focus\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected k-focus\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget k-focus\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected k-focus\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n\n <span>Selected:</span>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n\n <span>Selected Hover:</span>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected k-hover\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected k-hover\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected k-hover\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected k-hover\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n\n <span>Label</span>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>1 / 5</span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star-outline\"></Icon>\n <span className=\"k-rating-precision-part\" style={{ width: \"12px\" }}>\n <Icon name=\"star\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>1.5 / 5</span>\n </span>\n </span>\n </section>\n\n <span>Nested</span>\n <section>\n <div style={{ backgroundColor: \"silver\" }}>\n <span className=\"k-rating k-widget k-focus\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected k-focus\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </div>\n </section>\n <section>\n <div style={{ backgroundColor: \"silver\" }}>\n <span className=\"k-rating k-widget k-focus\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected k-focus\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </div>\n </section>\n\n <span>SVG</span>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected\">\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect className=\"k-i-rect\" x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\"></rect>\n </svg>\n </span>\n <span className=\"k-rating-item k-selected\">\n <span className=\"k-rating-precision-complement\" style={{ width: '50px' }} >\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\" fillOpacity=\"0\" stroke=\"#e9e9e9\" strokeWidth=\"2\"></rect>\n </svg>\n </span>\n <span className=\"k-rating-precision-part\" style={{ width: \"25px\" }} >\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect className=\"k-i-rect\" x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\"></rect>\n </svg>\n </span>\n <span style={{ width: '50px', height: \"30px\", display: \"block\" }} ></span>\n </span>\n <span className=\"k-rating-item k-selected k-focus\">\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\" fillOpacity=\"0\" stroke=\"#e9e9e9\" strokeWidth=\"2\"></rect>\n </svg>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>1.5 / 3</span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected\">\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\" fillOpacity=\"0\" stroke=\"#e9e9e9\" strokeWidth=\"2\"></rect>\n </svg>\n </span>\n <span className=\"k-rating-item k-selected\">\n <span className=\"k-rating-precision-complement\" style={{ width: '50px' }} >\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\" fillOpacity=\"0\" stroke=\"#e9e9e9\" strokeWidth=\"2\"></rect>\n </svg>\n </span>\n <span className=\"k-rating-precision-part\" style={{ width: \"25px\" }} >\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect className=\"k-i-rect\" x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\"></rect>\n </svg>\n </span>\n <span style={{ width: '50px', height: \"30px\", display: \"block\" }} ></span>\n </span>\n <span className=\"k-rating-item k-selected k-focus\">\n <svg width=\"50\" height=\"30\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"50\" height=\"30\" fillOpacity=\"0\" stroke=\"#e9e9e9\" strokeWidth=\"2\"></rect>\n </svg>\n </span>\n </span>\n <span className=\"k-rating-label\">\n <span>1.5 / 3</span>\n </span>\n </span>\n </section>\n\n\n <span>Readonly</span>\n <section>\n <span className=\"k-rating k-widget k-state-readonly\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n <section>\n <span className=\"k-rating k-widget k-state-readonly\">\n <span className=\"k-rating-container\">\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item k-selected\">\n <Icon name=\"star\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n <span className=\"k-rating-item\">\n <Icon name=\"star-outline\"></Icon>\n </span>\n </span>\n </span>\n </section>\n </div>\n </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n className?: string;\n style?: React.CSSProperties;\n name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n render() {\n const {\n className,\n style,\n name\n } = this.props;\n\n return (\n <>\n { name &&\n <span\n className={classNames(\n className,\n 'k-icon',\n {\n [`k-i-${name}`]: name\n }\n )}\n style={style}>\n </span>\n }\n </>\n );\n }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n const result = {};\n\n const addLeafKeys = (arg) => {\n (typeof arg === 'object'\n ? Object.keys(arg).forEach((key) => {\n result[key] = arg[key];\n })\n : (result[arg] = true)\n );\n };\n\n const addKeys = (list) =>\n list\n .filter((arg) => arg !== true && Boolean(arg))\n .map((arg: any) =>\n (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n );\n\n addKeys(args);\n\n return Object.keys(result)\n .map((key) => (result[key] && key) || null)\n .filter((el) => el !== null)\n .join(' ');\n};\n"],
5
+ "mappings": "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",
6
6
  "names": ["ReactDOM", "React"]
7
7
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-themes-html",
3
3
  "description": "A collection of HTML helpers used for developing Kendo UI themes",
4
- "version": "5.6.1-dev.1",
4
+ "version": "5.6.1-dev.2",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -46,5 +46,5 @@
46
46
  "glob": "^8.0.3",
47
47
  "typescript": "^4.7.2"
48
48
  },
49
- "gitHead": "1e15150e791e446461760b05b93bfda5abafc2ec"
49
+ "gitHead": "2bc7c2f0b6f8edd33c5a5c616cf937f2385e769f"
50
50
  }
package/src/rating/tests/rating.tsx CHANGED
@@ -8,22 +8,27 @@ const root = ReactDOM.createRoot(
8
8
 
9
9
  root.render(
10
10
  <>
11
- <div id="test-area" className="k-d-grid k-grid-cols-2">
11
+ <div id="test-area" className="k-d-grid" style={{ gridTemplateColumns: "120px repeat(2, 1fr)", alignItems: "center" }}>
12
12
 
13
- <span>Continuous</span>
14
- <span>Single</span>
13
+ <span></span>
14
+ <span>Continuous Selection</span>
15
+ <span>Single Selection</span>
15
16
 
17
+ <span>Hover:</span>
16
18
  <section>
17
19
  <span className="k-rating k-widget">
18
20
  <span className="k-rating-container">
19
- <span className="k-rating-item k-state-selected">
21
+ <span className="k-rating-item k-hover">
20
22
  <Icon name="star"></Icon>
21
23
  </span>
22
- <span className="k-rating-item k-state-selected">
24
+ <span className="k-rating-item k-hover">
23
25
  <Icon name="star"></Icon>
24
26
  </span>
25
- <span className="k-rating-item k-state-selected">
27
+ <span className="k-rating-item k-hover">
26
28
  <Icon name="star"></Icon>
29
+ <span className="k-rating-precision-part" style={{ width: `calc( --var() )` }}>
30
+ <Icon name="star"></Icon>
31
+ </span>
27
32
  </span>
28
33
  <span className="k-rating-item">
29
34
  <Icon name="star-outline"></Icon>
@@ -32,9 +37,6 @@ root.render(
32
37
  <Icon name="star-outline"></Icon>
33
38
  </span>
34
39
  </span>
35
- <span className="k-rating-label">
36
- <span>3 / 5</span>
37
- </span>
38
40
  </span>
39
41
  </section>
40
42
  <section>
@@ -46,7 +48,7 @@ root.render(
46
48
  <span className="k-rating-item">
47
49
  <Icon name="star-outline"></Icon>
48
50
  </span>
49
- <span className="k-rating-item k-state-selected">
51
+ <span className="k-rating-item k-hover">
50
52
  <Icon name="star"></Icon>
51
53
  </span>
52
54
  <span className="k-rating-item">
@@ -56,26 +58,21 @@ root.render(
56
58
  <Icon name="star-outline"></Icon>
57
59
  </span>
58
60
  </span>
59
- <span className="k-rating-label">
60
- <span>3 / 5</span>
61
- </span>
62
61
  </span>
63
62
  </section>
64
63
 
64
+ <span>Focus:</span>
65
65
  <section>
66
- <span className="k-rating k-widget">
66
+ <span className="k-rating k-widget k-focus">
67
67
  <span className="k-rating-container">
68
- <span className="k-rating-item k-state-selected">
68
+ <span className="k-rating-item k-selected">
69
69
  <Icon name="star"></Icon>
70
70
  </span>
71
- <span className="k-rating-item k-state-selected">
71
+ <span className="k-rating-item k-selected">
72
72
  <Icon name="star"></Icon>
73
73
  </span>
74
- <span className="k-rating-item k-state-selected">
75
- <Icon name="star-outline"></Icon>
76
- <span className="k-rating-precision-part" style={{ width: "12px" }}>
77
- <Icon name="star"></Icon>
78
- </span>
74
+ <span className="k-rating-item k-selected k-focus">
75
+ <Icon name="star"></Icon>
79
76
  </span>
80
77
  <span className="k-rating-item">
81
78
  <Icon name="star-outline"></Icon>
@@ -84,25 +81,63 @@ root.render(
84
81
  <Icon name="star-outline"></Icon>
85
82
  </span>
86
83
  </span>
87
- <span className="k-rating-label">
88
- <span>2.5 / 5</span>
84
+ </span>
85
+ </section>
86
+ <section>
87
+ <span className="k-rating k-widget k-focus">
88
+ <span className="k-rating-container">
89
+ <span className="k-rating-item">
90
+ <Icon name="star-outline"></Icon>
91
+ </span>
92
+ <span className="k-rating-item">
93
+ <Icon name="star-outline"></Icon>
94
+ </span>
95
+ <span className="k-rating-item k-selected k-focus">
96
+ <Icon name="star"></Icon>
97
+ </span>
98
+ <span className="k-rating-item">
99
+ <Icon name="star-outline"></Icon>
100
+ </span>
101
+ <span className="k-rating-item">
102
+ <Icon name="star-outline"></Icon>
103
+ </span>
89
104
  </span>
90
105
  </span>
91
106
  </section>
107
+
108
+ <span>Selected:</span>
92
109
  <section>
93
110
  <span className="k-rating k-widget">
94
111
  <span className="k-rating-container">
112
+ <span className="k-rating-item k-selected">
113
+ <Icon name="star"></Icon>
114
+ </span>
115
+ <span className="k-rating-item k-selected">
116
+ <Icon name="star"></Icon>
117
+ </span>
118
+ <span className="k-rating-item k-selected">
119
+ <Icon name="star"></Icon>
120
+ </span>
95
121
  <span className="k-rating-item">
96
122
  <Icon name="star-outline"></Icon>
97
123
  </span>
98
124
  <span className="k-rating-item">
99
125
  <Icon name="star-outline"></Icon>
100
126
  </span>
101
- <span className="k-rating-item k-state-selected">
127
+ </span>
128
+ </span>
129
+ </section>
130
+ <section>
131
+ <span className="k-rating k-widget">
132
+ <span className="k-rating-container">
133
+ <span className="k-rating-item">
134
+ <Icon name="star-outline"></Icon>
135
+ </span>
136
+ <span className="k-rating-item">
102
137
  <Icon name="star-outline"></Icon>
103
- <span className="k-rating-precision-part" style={{ width: "12px" }}>
104
- <Icon name="star"></Icon>
105
- </span>
138
+ </span>
139
+ <span className="k-rating-item k-selected">
140
+ <Icon name="star"></Icon>
106
141
  </span>
107
142
  <span className="k-rating-item">
108
143
  <Icon name="star-outline"></Icon>
@@ -111,27 +146,43 @@ root.render(
111
146
  <Icon name="star-outline"></Icon>
112
147
  </span>
113
148
  </span>
114
- <span className="k-rating-label">
115
- <span>2.5 / 5</span>
116
- </span>
117
149
  </span>
118
150
  </section>
119
151
 
120
- <span>Normal</span>
121
- <span>Focus</span>
122
-
152
+ <span>Selected Hover:</span>
123
153
  <section>
124
154
  <span className="k-rating k-widget">
125
155
  <span className="k-rating-container">
156
+ <span className="k-rating-item k-selected k-hover">
157
+ <Icon name="star"></Icon>
158
+ </span>
159
+ <span className="k-rating-item k-selected k-hover">
160
+ <Icon name="star"></Icon>
161
+ </span>
162
+ <span className="k-rating-item k-selected k-hover">
163
+ <Icon name="star"></Icon>
164
+ </span>
165
+ <span className="k-rating-item">
166
+ <Icon name="star-outline"></Icon>
167
+ </span>
126
168
  <span className="k-rating-item">
127
169
  <Icon name="star-outline"></Icon>
128
170
  </span>
171
+ </span>
172
+ </span>
173
+ </section>
174
+ <section>
175
+ <span className="k-rating k-widget">
176
+ <span className="k-rating-container">
129
177
  <span className="k-rating-item">
130
178
  <Icon name="star-outline"></Icon>
131
179
  </span>
132
180
  <span className="k-rating-item">
133
181
  <Icon name="star-outline"></Icon>
134
182
  </span>
183
+ <span className="k-rating-item k-selected k-hover">
184
+ <Icon name="star"></Icon>
185
+ </span>
135
186
  <span className="k-rating-item">
136
187
  <Icon name="star-outline"></Icon>
137
188
  </span>
@@ -142,18 +193,46 @@ root.render(
142
193
  </span>
143
194
  </section>
144
195
 
196
+ <span>Label</span>
145
197
  <section>
146
- <span className="k-rating k-widget k-state-focused">
198
+ <span className="k-rating k-widget">
147
199
  <span className="k-rating-container">
148
- <span className="k-rating-item k-state-selected">
200
+ <span className="k-rating-item k-selected">
149
201
  <Icon name="star"></Icon>
150
202
  </span>
151
- <span className="k-rating-item k-state-selected">
152
- <Icon name="star"></Icon>
203
+ <span className="k-rating-item">
204
+ <Icon name="star-outline"></Icon>
205
+ </span>
206
+ <span className="k-rating-item">
207
+ <Icon name="star-outline"></Icon>
153
208
  </span>
154
- <span className="k-rating-item k-state-selected k-state-focused">
209
+ <span className="k-rating-item">
210
+ <Icon name="star-outline"></Icon>
211
+ </span>
212
+ <span className="k-rating-item">
213
+ <Icon name="star-outline"></Icon>
214
+ </span>
215
+ </span>
216
+ <span className="k-rating-label">
217
+ <span>1 / 5</span>
218
+ </span>
219
+ </span>
220
+ </section>
221
+ <section>
222
+ <span className="k-rating k-widget">
223
+ <span className="k-rating-container">
224
+ <span className="k-rating-item k-selected">
155
225
  <Icon name="star"></Icon>
156
226
  </span>
227
+ <span className="k-rating-item k-selected">
228
+ <Icon name="star-outline"></Icon>
229
+ <span className="k-rating-precision-part" style={{ width: "12px" }}>
230
+ <Icon name="star"></Icon>
231
+ </span>
232
+ </span>
233
+ <span className="k-rating-item">
234
+ <Icon name="star-outline"></Icon>
235
+ </span>
157
236
  <span className="k-rating-item">
158
237
  <Icon name="star-outline"></Icon>
159
238
  </span>
@@ -162,25 +241,23 @@ root.render(
162
241
  </span>
163
242
  </span>
164
243
  <span className="k-rating-label">
165
- <span>3 / 5</span>
244
+ <span>1.5 / 5</span>
166
245
  </span>
167
246
  </span>
168
247
  </section>
169
248
 
170
249
  <span>Nested</span>
171
- <span>SVG</span>
172
-
173
250
  <section>
174
- <div style={{ backgroundColor: "#656565" }}>
175
- <span className="k-rating k-widget k-state-focused">
251
+ <div style={{ backgroundColor: "silver" }}>
252
+ <span className="k-rating k-widget k-focus">
176
253
  <span className="k-rating-container">
177
- <span className="k-rating-item k-state-selected">
254
+ <span className="k-rating-item k-selected">
178
255
  <Icon name="star"></Icon>
179
256
  </span>
180
- <span className="k-rating-item k-state-selected">
257
+ <span className="k-rating-item k-selected">
181
258
  <Icon name="star"></Icon>
182
259
  </span>
183
- <span className="k-rating-item k-state-selected k-state-focused">
260
+ <span className="k-rating-item k-selected k-focus">
184
261
  <Icon name="star"></Icon>
185
262
  </span>
186
263
  <span className="k-rating-item">
@@ -190,21 +267,75 @@ root.render(
190
267
  <Icon name="star-outline"></Icon>
191
268
  </span>
192
269
  </span>
193
- <span className="k-rating-label">
194
- <span>3 / 5</span>
270
+ </span>
271
+ </div>
272
+ </section>
273
+ <section>
274
+ <div style={{ backgroundColor: "silver" }}>
275
+ <span className="k-rating k-widget k-focus">
276
+ <span className="k-rating-container">
277
+ <span className="k-rating-item">
278
+ <Icon name="star-outline"></Icon>
279
+ </span>
280
+ <span className="k-rating-item k-selected k-focus">
281
+ <Icon name="star"></Icon>
282
+ </span>
283
+ <span className="k-rating-item">
284
+ <Icon name="star-outline"></Icon>
285
+ </span>
286
+ <span className="k-rating-item">
287
+ <Icon name="star-outline"></Icon>
288
+ </span>
289
+ <span className="k-rating-item">
290
+ <Icon name="star-outline"></Icon>
291
+ </span>
195
292
  </span>
196
293
  </span>
197
294
  </div>
198
295
  </section>
296
+
297
+ <span>SVG</span>
199
298
  <section>
200
299
  <span className="k-rating k-widget">
201
300
  <span className="k-rating-container">
202
- <span className="k-rating-item k-state-selected">
301
+ <span className="k-rating-item k-selected">
203
302
  <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
204
303
  <rect className="k-i-rect" x="0" y="0" rx="5" ry="5" width="50" height="30"></rect>
205
304
  </svg>
206
305
  </span>
207
- <span className="k-rating-item k-state-selected">
306
+ <span className="k-rating-item k-selected">
307
+ <span className="k-rating-precision-complement" style={{ width: '50px' }} >
308
+ <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
309
+ <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
310
+ </svg>
311
+ </span>
312
+ <span className="k-rating-precision-part" style={{ width: "25px" }} >
313
+ <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
314
+ <rect className="k-i-rect" x="0" y="0" rx="5" ry="5" width="50" height="30"></rect>
315
+ </svg>
316
+ </span>
317
+ <span style={{ width: '50px', height: "30px", display: "block" }} ></span>
318
+ </span>
319
+ <span className="k-rating-item k-selected k-focus">
320
+ <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
321
+ <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
322
+ </svg>
323
+ </span>
324
+ </span>
325
+ <span className="k-rating-label">
326
+ <span>1.5 / 3</span>
327
+ </span>
328
+ </span>
329
+ </section>
330
+ <section>
331
+ <span className="k-rating k-widget">
332
+ <span className="k-rating-container">
333
+ <span className="k-rating-item k-selected">
334
+ <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
335
+ <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
336
+ </svg>
337
+ </span>
338
+ <span className="k-rating-item k-selected">
208
339
  <span className="k-rating-precision-complement" style={{ width: '50px' }} >
209
340
  <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
210
341
  <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
@@ -217,28 +348,27 @@ root.render(
217
348
  </span>
218
349
  <span style={{ width: '50px', height: "30px", display: "block" }} ></span>
219
350
  </span>
220
- <span className="k-rating-item k-state-selected k-state-focused">
351
+ <span className="k-rating-item k-selected k-focus">
221
352
  <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
222
353
  <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
223
354
  </svg>
224
355
  </span>
225
356
  </span>
226
357
  <span className="k-rating-label">
227
- <span>2 / 5</span>
358
+ <span>1.5 / 3</span>
228
359
  </span>
229
360
  </span>
230
361
  </section>
231
362
 
232
- <span>Readonly</span>
233
- <span></span>
234
363
 
364
+ <span>Readonly</span>
235
365
  <section>
236
366
  <span className="k-rating k-widget k-state-readonly">
237
367
  <span className="k-rating-container">
238
- <span className="k-rating-item k-state-selected">
368
+ <span className="k-rating-item k-selected">
239
369
  <Icon name="star"></Icon>
240
370
  </span>
241
- <span className="k-rating-item k-state-selected">
371
+ <span className="k-rating-item k-selected">
242
372
  <Icon name="star"></Icon>
243
373
  </span>
244
374
  <span className="k-rating-item">
@@ -253,8 +383,26 @@ root.render(
253
383
  </span>
254
384
  </span>
255
385
  </section>
256
-
257
386
  <section>
387
+ <span className="k-rating k-widget k-state-readonly">
388
+ <span className="k-rating-container">
389
+ <span className="k-rating-item">
390
+ <Icon name="star-outline"></Icon>
391
+ </span>
392
+ <span className="k-rating-item k-selected">
393
+ <Icon name="star"></Icon>
394
+ </span>
395
+ <span className="k-rating-item">
396
+ <Icon name="star-outline"></Icon>
397
+ </span>
398
+ <span className="k-rating-item">
399
+ <Icon name="star-outline"></Icon>
400
+ </span>
401
+ <span className="k-rating-item">
402
+ <Icon name="star-outline"></Icon>
403
+ </span>
404
+ </span>
405
+ </span>
258
406
  </section>
259
407
  </div>
260
408
  </>