carbon-components-angular 5.20.2 → 5.20.3
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/docs/documentation/components/Slider.html +157 -135
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TimePickerModule.html +4 -4
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +44 -40
- package/docs/documentation/modules/TimePickerSelectModule.html +44 -40
- package/docs/documentation/modules/ToggleModule/dependencies.svg +41 -37
- package/docs/documentation/modules/ToggleModule.html +41 -37
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
- package/docs/documentation/modules/ToggletipModule.html +37 -37
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +38 -38
- package/docs/documentation/modules/TreeviewModule.html +38 -38
- package/docs/documentation.json +65 -65
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{main.053e39e2.iframe.bundle.js → main.939e2f87.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.4d2d3399.iframe.bundle.js → runtime~main.a91352e8.iframe.bundle.js} +1 -1
- package/docs/storybook/{slider-slider-stories.476668e9.iframe.bundle.js → slider-slider-stories.f608c3ca.iframe.bundle.js} +1 -1
- package/esm2020/slider/slider.component.mjs +71 -49
- package/fesm2015/carbon-components-angular-slider.mjs +70 -48
- package/fesm2015/carbon-components-angular-slider.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-slider.mjs +70 -48
- package/fesm2020/carbon-components-angular-slider.mjs.map +1 -1
- package/package.json +1 -1
- package/slider/slider.component.d.ts +4 -1
|
@@ -157,38 +157,42 @@ for use as an alternative value field.</p>
|
|
|
157
157
|
</label>
|
|
158
158
|
<div
|
|
159
159
|
class="cds--slider"
|
|
160
|
+
(click)="onClick($event)"
|
|
160
161
|
[ngClass]="{'cds--slider--disabled': disabled}">
|
|
161
162
|
<ng-container *ngIf="!isRange()">
|
|
162
|
-
<div
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
163
|
+
<div class="cds--slider__thumb-wrapper"
|
|
164
|
+
[ngStyle]="{insetInlineStart: getFractionComplete(value) * 100 + '%'}">
|
|
165
|
+
<div
|
|
166
|
+
#thumbs
|
|
167
|
+
role="slider"
|
|
168
|
+
[id]="id"
|
|
169
|
+
[attr.aria-labelledby]="labelId"
|
|
170
|
+
class="cds--slider__thumb"
|
|
171
|
+
tabindex="0"
|
|
172
|
+
(mousedown)="onMouseDown($event)"
|
|
173
|
+
(keydown)="onKeyDown($event)">
|
|
174
|
+
</div>
|
|
172
175
|
</div>
|
|
173
176
|
</ng-container>
|
|
174
177
|
<ng-container *ngIf="isRange()">
|
|
175
|
-
<div
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
178
|
+
<div class="cds--slider__thumb-wrapper"
|
|
179
|
+
[ngStyle]="{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}"
|
|
180
|
+
*ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy">
|
|
181
|
+
<div
|
|
182
|
+
#thumbs
|
|
183
|
+
role="slider"
|
|
184
|
+
[id]="id + (i > 0 ? '-' + i : '')"
|
|
185
|
+
[attr.aria-labelledby]="labelId"
|
|
186
|
+
class="cds--slider__thumb"
|
|
187
|
+
tabindex="0"
|
|
188
|
+
(mousedown)="onMouseDown($event, i)"
|
|
189
|
+
(keydown)="onKeyDown($event, i)">
|
|
190
|
+
</div>
|
|
186
191
|
</div>
|
|
187
192
|
</ng-container>
|
|
188
193
|
<div
|
|
189
194
|
#track
|
|
190
|
-
class="cds--slider__track"
|
|
191
|
-
(click)="onClick($event)">
|
|
195
|
+
class="cds--slider__track">
|
|
192
196
|
</div>
|
|
193
197
|
<div
|
|
194
198
|
#filledTrack
|
|
@@ -524,7 +528,7 @@ for use as an alternative value field.</p>
|
|
|
524
528
|
</tr>
|
|
525
529
|
<tr>
|
|
526
530
|
<td class="col-md-4">
|
|
527
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
531
|
+
<div class="io-line">Defined in <a href="" data-line="300" class="link-to-prism">src/slider/slider.component.ts:300</a></div>
|
|
528
532
|
</td>
|
|
529
533
|
</tr>
|
|
530
534
|
|
|
@@ -609,7 +613,7 @@ for use as an alternative value field.</p>
|
|
|
609
613
|
</tr>
|
|
610
614
|
<tr>
|
|
611
615
|
<td class="col-md-2" colspan="2">
|
|
612
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
616
|
+
<div class="io-line">Defined in <a href="" data-line="265" class="link-to-prism">src/slider/slider.component.ts:265</a></div>
|
|
613
617
|
</td>
|
|
614
618
|
</tr>
|
|
615
619
|
<tr>
|
|
@@ -636,7 +640,7 @@ for use as an alternative value field.</p>
|
|
|
636
640
|
</tr>
|
|
637
641
|
<tr>
|
|
638
642
|
<td class="col-md-2" colspan="2">
|
|
639
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
643
|
+
<div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/slider/slider.component.ts:267</a></div>
|
|
640
644
|
</td>
|
|
641
645
|
</tr>
|
|
642
646
|
<tr>
|
|
@@ -668,7 +672,7 @@ for use as an alternative value field.</p>
|
|
|
668
672
|
</tr>
|
|
669
673
|
<tr>
|
|
670
674
|
<td class="col-md-2" colspan="2">
|
|
671
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
675
|
+
<div class="io-line">Defined in <a href="" data-line="257" class="link-to-prism">src/slider/slider.component.ts:257</a></div>
|
|
672
676
|
</td>
|
|
673
677
|
</tr>
|
|
674
678
|
<tr>
|
|
@@ -695,7 +699,7 @@ for use as an alternative value field.</p>
|
|
|
695
699
|
</tr>
|
|
696
700
|
<tr>
|
|
697
701
|
<td class="col-md-2" colspan="2">
|
|
698
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
702
|
+
<div class="io-line">Defined in <a href="" data-line="263" class="link-to-prism">src/slider/slider.component.ts:263</a></div>
|
|
699
703
|
</td>
|
|
700
704
|
</tr>
|
|
701
705
|
<tr>
|
|
@@ -722,7 +726,7 @@ for use as an alternative value field.</p>
|
|
|
722
726
|
</tr>
|
|
723
727
|
<tr>
|
|
724
728
|
<td class="col-md-2" colspan="2">
|
|
725
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
729
|
+
<div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/slider/slider.component.ts:175</a></div>
|
|
726
730
|
</td>
|
|
727
731
|
</tr>
|
|
728
732
|
<tr>
|
|
@@ -749,7 +753,7 @@ for use as an alternative value field.</p>
|
|
|
749
753
|
</tr>
|
|
750
754
|
<tr>
|
|
751
755
|
<td class="col-md-2" colspan="2">
|
|
752
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
756
|
+
<div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/slider/slider.component.ts:165</a></div>
|
|
753
757
|
</td>
|
|
754
758
|
</tr>
|
|
755
759
|
<tr>
|
|
@@ -781,7 +785,7 @@ for use as an alternative value field.</p>
|
|
|
781
785
|
</tr>
|
|
782
786
|
<tr>
|
|
783
787
|
<td class="col-md-2" colspan="2">
|
|
784
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
788
|
+
<div class="io-line">Defined in <a href="" data-line="259" class="link-to-prism">src/slider/slider.component.ts:259</a></div>
|
|
785
789
|
</td>
|
|
786
790
|
</tr>
|
|
787
791
|
<tr>
|
|
@@ -813,7 +817,7 @@ for use as an alternative value field.</p>
|
|
|
813
817
|
</tr>
|
|
814
818
|
<tr>
|
|
815
819
|
<td class="col-md-2" colspan="2">
|
|
816
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
820
|
+
<div class="io-line">Defined in <a href="" data-line="261" class="link-to-prism">src/slider/slider.component.ts:261</a></div>
|
|
817
821
|
</td>
|
|
818
822
|
</tr>
|
|
819
823
|
<tr>
|
|
@@ -845,7 +849,7 @@ for use as an alternative value field.</p>
|
|
|
845
849
|
</tr>
|
|
846
850
|
<tr>
|
|
847
851
|
<td class="col-md-2" colspan="2">
|
|
848
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
852
|
+
<div class="io-line">Defined in <a href="" data-line="186" class="link-to-prism">src/slider/slider.component.ts:186</a></div>
|
|
849
853
|
</td>
|
|
850
854
|
</tr>
|
|
851
855
|
<tr>
|
|
@@ -872,7 +876,7 @@ for use as an alternative value field.</p>
|
|
|
872
876
|
</tr>
|
|
873
877
|
<tr>
|
|
874
878
|
<td class="col-md-2" colspan="2">
|
|
875
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
879
|
+
<div class="io-line">Defined in <a href="" data-line="188" class="link-to-prism">src/slider/slider.component.ts:188</a></div>
|
|
876
880
|
</td>
|
|
877
881
|
</tr>
|
|
878
882
|
<tr>
|
|
@@ -902,7 +906,7 @@ for use as an alternative value field.</p>
|
|
|
902
906
|
</tr>
|
|
903
907
|
<tr>
|
|
904
908
|
<td class="col-md-2" colspan="2">
|
|
905
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
909
|
+
<div class="io-line">Defined in <a href="" data-line="280" class="link-to-prism">src/slider/slider.component.ts:280</a></div>
|
|
906
910
|
</td>
|
|
907
911
|
</tr>
|
|
908
912
|
<tr>
|
|
@@ -939,7 +943,7 @@ for use as an alternative value field.</p>
|
|
|
939
943
|
</tr>
|
|
940
944
|
<tr>
|
|
941
945
|
<td class="col-md-4">
|
|
942
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
946
|
+
<div class="io-line">Defined in <a href="" data-line="281" class="link-to-prism">src/slider/slider.component.ts:281</a></div>
|
|
943
947
|
</td>
|
|
944
948
|
</tr>
|
|
945
949
|
|
|
@@ -974,8 +978,8 @@ for use as an alternative value field.</p>
|
|
|
974
978
|
|
|
975
979
|
<tr>
|
|
976
980
|
<td class="col-md-4">
|
|
977
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
978
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
981
|
+
<div class="io-line">Defined in <a href="" data-line="392"
|
|
982
|
+
class="link-to-prism">src/slider/slider.component.ts:392</a></div>
|
|
979
983
|
</td>
|
|
980
984
|
</tr>
|
|
981
985
|
|
|
@@ -1041,8 +1045,8 @@ for use as an alternative value field.</p>
|
|
|
1041
1045
|
|
|
1042
1046
|
<tr>
|
|
1043
1047
|
<td class="col-md-4">
|
|
1044
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1045
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1048
|
+
<div class="io-line">Defined in <a href="" data-line="381"
|
|
1049
|
+
class="link-to-prism">src/slider/slider.component.ts:381</a></div>
|
|
1046
1050
|
</td>
|
|
1047
1051
|
</tr>
|
|
1048
1052
|
|
|
@@ -1108,8 +1112,8 @@ for use as an alternative value field.</p>
|
|
|
1108
1112
|
|
|
1109
1113
|
<tr>
|
|
1110
1114
|
<td class="col-md-4">
|
|
1111
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1112
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1115
|
+
<div class="io-line">Defined in <a href="" data-line="425"
|
|
1116
|
+
class="link-to-prism">src/slider/slider.component.ts:425</a></div>
|
|
1113
1117
|
</td>
|
|
1114
1118
|
</tr>
|
|
1115
1119
|
|
|
@@ -1183,8 +1187,8 @@ for use as an alternative value field.</p>
|
|
|
1183
1187
|
|
|
1184
1188
|
<tr>
|
|
1185
1189
|
<td class="col-md-4">
|
|
1186
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1187
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1190
|
+
<div class="io-line">Defined in <a href="" data-line="366"
|
|
1191
|
+
class="link-to-prism">src/slider/slider.component.ts:366</a></div>
|
|
1188
1192
|
</td>
|
|
1189
1193
|
</tr>
|
|
1190
1194
|
|
|
@@ -1256,8 +1260,8 @@ for use as an alternative value field.</p>
|
|
|
1256
1260
|
|
|
1257
1261
|
<tr>
|
|
1258
1262
|
<td class="col-md-4">
|
|
1259
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1260
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1263
|
+
<div class="io-line">Defined in <a href="" data-line="553"
|
|
1264
|
+
class="link-to-prism">src/slider/slider.component.ts:553</a></div>
|
|
1261
1265
|
</td>
|
|
1262
1266
|
</tr>
|
|
1263
1267
|
|
|
@@ -1295,8 +1299,8 @@ for use as an alternative value field.</p>
|
|
|
1295
1299
|
|
|
1296
1300
|
<tr>
|
|
1297
1301
|
<td class="col-md-4">
|
|
1298
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1299
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1302
|
+
<div class="io-line">Defined in <a href="" data-line="415"
|
|
1303
|
+
class="link-to-prism">src/slider/slider.component.ts:415</a></div>
|
|
1300
1304
|
</td>
|
|
1301
1305
|
</tr>
|
|
1302
1306
|
|
|
@@ -1370,8 +1374,8 @@ for use as an alternative value field.</p>
|
|
|
1370
1374
|
|
|
1371
1375
|
<tr>
|
|
1372
1376
|
<td class="col-md-4">
|
|
1373
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1374
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1377
|
+
<div class="io-line">Defined in <a href="" data-line="433"
|
|
1378
|
+
class="link-to-prism">src/slider/slider.component.ts:433</a></div>
|
|
1375
1379
|
</td>
|
|
1376
1380
|
</tr>
|
|
1377
1381
|
|
|
@@ -1411,8 +1415,8 @@ for use as an alternative value field.</p>
|
|
|
1411
1415
|
|
|
1412
1416
|
<tr>
|
|
1413
1417
|
<td class="col-md-4">
|
|
1414
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1415
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1418
|
+
<div class="io-line">Defined in <a href="" data-line="548"
|
|
1419
|
+
class="link-to-prism">src/slider/slider.component.ts:548</a></div>
|
|
1416
1420
|
</td>
|
|
1417
1421
|
</tr>
|
|
1418
1422
|
|
|
@@ -1476,8 +1480,8 @@ for use as an alternative value field.</p>
|
|
|
1476
1480
|
|
|
1477
1481
|
<tr>
|
|
1478
1482
|
<td class="col-md-4">
|
|
1479
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1480
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1483
|
+
<div class="io-line">Defined in <a href="" data-line="308"
|
|
1484
|
+
class="link-to-prism">src/slider/slider.component.ts:308</a></div>
|
|
1481
1485
|
</td>
|
|
1482
1486
|
</tr>
|
|
1483
1487
|
|
|
@@ -1513,8 +1517,8 @@ for use as an alternative value field.</p>
|
|
|
1513
1517
|
|
|
1514
1518
|
<tr>
|
|
1515
1519
|
<td class="col-md-4">
|
|
1516
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1517
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1520
|
+
<div class="io-line">Defined in <a href="" data-line="448"
|
|
1521
|
+
class="link-to-prism">src/slider/slider.component.ts:448</a></div>
|
|
1518
1522
|
</td>
|
|
1519
1523
|
</tr>
|
|
1520
1524
|
|
|
@@ -1589,15 +1593,16 @@ for use as an alternative value field.</p>
|
|
|
1589
1593
|
|
|
1590
1594
|
<tr>
|
|
1591
1595
|
<td class="col-md-4">
|
|
1592
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1593
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1596
|
+
<div class="io-line">Defined in <a href="" data-line="457"
|
|
1597
|
+
class="link-to-prism">src/slider/slider.component.ts:457</a></div>
|
|
1594
1598
|
</td>
|
|
1595
1599
|
</tr>
|
|
1596
1600
|
|
|
1597
1601
|
|
|
1598
1602
|
<tr>
|
|
1599
1603
|
<td class="col-md-4">
|
|
1600
|
-
<div class="io-description"><p>Handles clicks on the
|
|
1604
|
+
<div class="io-description"><p>Handles clicks on the slider, and setting the value to it's "real" equivalent.
|
|
1605
|
+
Will assign the value to the closest thumb if in range mode.</p>
|
|
1601
1606
|
</div>
|
|
1602
1607
|
|
|
1603
1608
|
<div class="io-description">
|
|
@@ -1656,8 +1661,8 @@ for use as an alternative value field.</p>
|
|
|
1656
1661
|
|
|
1657
1662
|
<tr>
|
|
1658
1663
|
<td class="col-md-4">
|
|
1659
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1660
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1664
|
+
<div class="io-line">Defined in <a href="" data-line="475"
|
|
1665
|
+
class="link-to-prism">src/slider/slider.component.ts:475</a></div>
|
|
1661
1666
|
</td>
|
|
1662
1667
|
</tr>
|
|
1663
1668
|
|
|
@@ -1722,8 +1727,8 @@ for use as an alternative value field.</p>
|
|
|
1722
1727
|
|
|
1723
1728
|
<tr>
|
|
1724
1729
|
<td class="col-md-4">
|
|
1725
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1726
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1730
|
+
<div class="io-line">Defined in <a href="" data-line="532"
|
|
1731
|
+
class="link-to-prism">src/slider/slider.component.ts:532</a></div>
|
|
1727
1732
|
</td>
|
|
1728
1733
|
</tr>
|
|
1729
1734
|
|
|
@@ -1811,8 +1816,8 @@ for use as an alternative value field.</p>
|
|
|
1811
1816
|
|
|
1812
1817
|
<tr>
|
|
1813
1818
|
<td class="col-md-4">
|
|
1814
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1815
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1819
|
+
<div class="io-line">Defined in <a href="" data-line="514"
|
|
1820
|
+
class="link-to-prism">src/slider/slider.component.ts:514</a></div>
|
|
1816
1821
|
</td>
|
|
1817
1822
|
</tr>
|
|
1818
1823
|
|
|
@@ -1899,8 +1904,8 @@ for use as an alternative value field.</p>
|
|
|
1899
1904
|
|
|
1900
1905
|
<tr>
|
|
1901
1906
|
<td class="col-md-4">
|
|
1902
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1903
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1907
|
+
<div class="io-line">Defined in <a href="" data-line="480"
|
|
1908
|
+
class="link-to-prism">src/slider/slider.component.ts:480</a></div>
|
|
1904
1909
|
</td>
|
|
1905
1910
|
</tr>
|
|
1906
1911
|
|
|
@@ -1966,8 +1971,8 @@ for use as an alternative value field.</p>
|
|
|
1966
1971
|
|
|
1967
1972
|
<tr>
|
|
1968
1973
|
<td class="col-md-4">
|
|
1969
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1970
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
1974
|
+
<div class="io-line">Defined in <a href="" data-line="523"
|
|
1975
|
+
class="link-to-prism">src/slider/slider.component.ts:523</a></div>
|
|
1971
1976
|
</td>
|
|
1972
1977
|
</tr>
|
|
1973
1978
|
|
|
@@ -2005,8 +2010,8 @@ for use as an alternative value field.</p>
|
|
|
2005
2010
|
|
|
2006
2011
|
<tr>
|
|
2007
2012
|
<td class="col-md-4">
|
|
2008
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2009
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
2013
|
+
<div class="io-line">Defined in <a href="" data-line="346"
|
|
2014
|
+
class="link-to-prism">src/slider/slider.component.ts:346</a></div>
|
|
2010
2015
|
</td>
|
|
2011
2016
|
</tr>
|
|
2012
2017
|
|
|
@@ -2076,8 +2081,8 @@ for use as an alternative value field.</p>
|
|
|
2076
2081
|
|
|
2077
2082
|
<tr>
|
|
2078
2083
|
<td class="col-md-4">
|
|
2079
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2080
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
2084
|
+
<div class="io-line">Defined in <a href="" data-line="354"
|
|
2085
|
+
class="link-to-prism">src/slider/slider.component.ts:354</a></div>
|
|
2081
2086
|
</td>
|
|
2082
2087
|
</tr>
|
|
2083
2088
|
|
|
@@ -2147,8 +2152,8 @@ for use as an alternative value field.</p>
|
|
|
2147
2152
|
|
|
2148
2153
|
<tr>
|
|
2149
2154
|
<td class="col-md-4">
|
|
2150
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2151
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
2155
|
+
<div class="io-line">Defined in <a href="" data-line="376"
|
|
2156
|
+
class="link-to-prism">src/slider/slider.component.ts:376</a></div>
|
|
2152
2157
|
</td>
|
|
2153
2158
|
</tr>
|
|
2154
2159
|
|
|
@@ -2214,8 +2219,8 @@ for use as an alternative value field.</p>
|
|
|
2214
2219
|
|
|
2215
2220
|
<tr>
|
|
2216
2221
|
<td class="col-md-4">
|
|
2217
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2218
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
2222
|
+
<div class="io-line">Defined in <a href="" data-line="338"
|
|
2223
|
+
class="link-to-prism">src/slider/slider.component.ts:338</a></div>
|
|
2219
2224
|
</td>
|
|
2220
2225
|
</tr>
|
|
2221
2226
|
|
|
@@ -2295,8 +2300,8 @@ for use as an alternative value field.</p>
|
|
|
2295
2300
|
|
|
2296
2301
|
<tr>
|
|
2297
2302
|
<td class="col-md-4">
|
|
2298
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2299
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
2303
|
+
<div class="io-line">Defined in <a href="" data-line="441"
|
|
2304
|
+
class="link-to-prism">src/slider/slider.component.ts:441</a></div>
|
|
2300
2305
|
</td>
|
|
2301
2306
|
</tr>
|
|
2302
2307
|
|
|
@@ -2335,8 +2340,8 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2335
2340
|
|
|
2336
2341
|
<tr>
|
|
2337
2342
|
<td class="col-md-4">
|
|
2338
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2339
|
-
class="link-to-prism">src/slider/slider.component.ts:
|
|
2343
|
+
<div class="io-line">Defined in <a href="" data-line="359"
|
|
2344
|
+
class="link-to-prism">src/slider/slider.component.ts:359</a></div>
|
|
2340
2345
|
</td>
|
|
2341
2346
|
</tr>
|
|
2342
2347
|
|
|
@@ -2411,7 +2416,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2411
2416
|
</tr>
|
|
2412
2417
|
<tr>
|
|
2413
2418
|
<td class="col-md-4">
|
|
2414
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2419
|
+
<div class="io-line">Defined in <a href="" data-line="299" class="link-to-prism">src/slider/slider.component.ts:299</a></div>
|
|
2415
2420
|
</td>
|
|
2416
2421
|
</tr>
|
|
2417
2422
|
|
|
@@ -2443,7 +2448,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2443
2448
|
</tr>
|
|
2444
2449
|
<tr>
|
|
2445
2450
|
<td class="col-md-4">
|
|
2446
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2451
|
+
<div class="io-line">Defined in <a href="" data-line="300" class="link-to-prism">src/slider/slider.component.ts:300</a></div>
|
|
2447
2452
|
</td>
|
|
2448
2453
|
</tr>
|
|
2449
2454
|
|
|
@@ -2475,7 +2480,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2475
2480
|
</tr>
|
|
2476
2481
|
<tr>
|
|
2477
2482
|
<td class="col-md-4">
|
|
2478
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2483
|
+
<div class="io-line">Defined in <a href="" data-line="296" class="link-to-prism">src/slider/slider.component.ts:296</a></div>
|
|
2479
2484
|
</td>
|
|
2480
2485
|
</tr>
|
|
2481
2486
|
|
|
@@ -2507,7 +2512,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2507
2512
|
</tr>
|
|
2508
2513
|
<tr>
|
|
2509
2514
|
<td class="col-md-4">
|
|
2510
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2515
|
+
<div class="io-line">Defined in <a href="" data-line="295" class="link-to-prism">src/slider/slider.component.ts:295</a></div>
|
|
2511
2516
|
</td>
|
|
2512
2517
|
</tr>
|
|
2513
2518
|
|
|
@@ -2539,7 +2544,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2539
2544
|
</tr>
|
|
2540
2545
|
<tr>
|
|
2541
2546
|
<td class="col-md-4">
|
|
2542
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2547
|
+
<div class="io-line">Defined in <a href="" data-line="298" class="link-to-prism">src/slider/slider.component.ts:298</a></div>
|
|
2543
2548
|
</td>
|
|
2544
2549
|
</tr>
|
|
2545
2550
|
|
|
@@ -2571,7 +2576,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2571
2576
|
</tr>
|
|
2572
2577
|
<tr>
|
|
2573
2578
|
<td class="col-md-4">
|
|
2574
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2579
|
+
<div class="io-line">Defined in <a href="" data-line="297" class="link-to-prism">src/slider/slider.component.ts:297</a></div>
|
|
2575
2580
|
</td>
|
|
2576
2581
|
</tr>
|
|
2577
2582
|
|
|
@@ -2597,7 +2602,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2597
2602
|
</tr>
|
|
2598
2603
|
<tr>
|
|
2599
2604
|
<td class="col-md-4">
|
|
2600
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2605
|
+
<div class="io-line">Defined in <a href="" data-line="289" class="link-to-prism">src/slider/slider.component.ts:289</a></div>
|
|
2601
2606
|
</td>
|
|
2602
2607
|
</tr>
|
|
2603
2608
|
|
|
@@ -2630,7 +2635,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2630
2635
|
</tr>
|
|
2631
2636
|
<tr>
|
|
2632
2637
|
<td class="col-md-4">
|
|
2633
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2638
|
+
<div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/slider/slider.component.ts:162</a></div>
|
|
2634
2639
|
</td>
|
|
2635
2640
|
</tr>
|
|
2636
2641
|
|
|
@@ -2672,7 +2677,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2672
2677
|
</tr>
|
|
2673
2678
|
<tr>
|
|
2674
2679
|
<td class="col-md-4">
|
|
2675
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2680
|
+
<div class="io-line">Defined in <a href="" data-line="285" class="link-to-prism">src/slider/slider.component.ts:285</a></div>
|
|
2676
2681
|
</td>
|
|
2677
2682
|
</tr>
|
|
2678
2683
|
|
|
@@ -2704,7 +2709,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2704
2709
|
</tr>
|
|
2705
2710
|
<tr>
|
|
2706
2711
|
<td class="col-md-4">
|
|
2707
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2712
|
+
<div class="io-line">Defined in <a href="" data-line="291" class="link-to-prism">src/slider/slider.component.ts:291</a></div>
|
|
2708
2713
|
</td>
|
|
2709
2714
|
</tr>
|
|
2710
2715
|
|
|
@@ -2739,7 +2744,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2739
2744
|
</tr>
|
|
2740
2745
|
<tr>
|
|
2741
2746
|
<td class="col-md-4">
|
|
2742
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2747
|
+
<div class="io-line">Defined in <a href="" data-line="281" class="link-to-prism">src/slider/slider.component.ts:281</a></div>
|
|
2743
2748
|
</td>
|
|
2744
2749
|
</tr>
|
|
2745
2750
|
|
|
@@ -2766,7 +2771,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2766
2771
|
</tr>
|
|
2767
2772
|
<tr>
|
|
2768
2773
|
<td class="col-md-4">
|
|
2769
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2774
|
+
<div class="io-line">Defined in <a href="" data-line="294" class="link-to-prism">src/slider/slider.component.ts:294</a></div>
|
|
2770
2775
|
</td>
|
|
2771
2776
|
</tr>
|
|
2772
2777
|
|
|
@@ -2792,7 +2797,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2792
2797
|
</tr>
|
|
2793
2798
|
<tr>
|
|
2794
2799
|
<td class="col-md-4">
|
|
2795
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2800
|
+
<div class="io-line">Defined in <a href="" data-line="293" class="link-to-prism">src/slider/slider.component.ts:293</a></div>
|
|
2796
2801
|
</td>
|
|
2797
2802
|
</tr>
|
|
2798
2803
|
|
|
@@ -2818,7 +2823,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2818
2823
|
</tr>
|
|
2819
2824
|
<tr>
|
|
2820
2825
|
<td class="col-md-4">
|
|
2821
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2826
|
+
<div class="io-line">Defined in <a href="" data-line="288" class="link-to-prism">src/slider/slider.component.ts:288</a></div>
|
|
2822
2827
|
</td>
|
|
2823
2828
|
</tr>
|
|
2824
2829
|
|
|
@@ -2849,7 +2854,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2849
2854
|
</tr>
|
|
2850
2855
|
<tr>
|
|
2851
2856
|
<td class="col-md-4">
|
|
2852
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2857
|
+
<div class="io-line">Defined in <a href="" data-line="351" class="link-to-prism">src/slider/slider.component.ts:351</a></div>
|
|
2853
2858
|
</td>
|
|
2854
2859
|
</tr>
|
|
2855
2860
|
|
|
@@ -2880,7 +2885,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2880
2885
|
</tr>
|
|
2881
2886
|
<tr>
|
|
2882
2887
|
<td class="col-md-4">
|
|
2883
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2888
|
+
<div class="io-line">Defined in <a href="" data-line="343" class="link-to-prism">src/slider/slider.component.ts:343</a></div>
|
|
2884
2889
|
</td>
|
|
2885
2890
|
</tr>
|
|
2886
2891
|
|
|
@@ -2922,7 +2927,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2922
2927
|
</tr>
|
|
2923
2928
|
<tr>
|
|
2924
2929
|
<td class="col-md-4">
|
|
2925
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2930
|
+
<div class="io-line">Defined in <a href="" data-line="286" class="link-to-prism">src/slider/slider.component.ts:286</a></div>
|
|
2926
2931
|
</td>
|
|
2927
2932
|
</tr>
|
|
2928
2933
|
|
|
@@ -2958,7 +2963,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2958
2963
|
</tr>
|
|
2959
2964
|
<tr>
|
|
2960
2965
|
<td class="col-md-4">
|
|
2961
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2966
|
+
<div class="io-line">Defined in <a href="" data-line="282" class="link-to-prism">src/slider/slider.component.ts:282</a></div>
|
|
2962
2967
|
</td>
|
|
2963
2968
|
</tr>
|
|
2964
2969
|
|
|
@@ -2984,7 +2989,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
2984
2989
|
</tr>
|
|
2985
2990
|
<tr>
|
|
2986
2991
|
<td class="col-md-4">
|
|
2987
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2992
|
+
<div class="io-line">Defined in <a href="" data-line="290" class="link-to-prism">src/slider/slider.component.ts:290</a></div>
|
|
2988
2993
|
</td>
|
|
2989
2994
|
</tr>
|
|
2990
2995
|
|
|
@@ -3020,7 +3025,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3020
3025
|
</tr>
|
|
3021
3026
|
<tr>
|
|
3022
3027
|
<td class="col-md-4">
|
|
3023
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3028
|
+
<div class="io-line">Defined in <a href="" data-line="284" class="link-to-prism">src/slider/slider.component.ts:284</a></div>
|
|
3024
3029
|
</td>
|
|
3025
3030
|
</tr>
|
|
3026
3031
|
|
|
@@ -3049,7 +3054,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3049
3054
|
</tr>
|
|
3050
3055
|
<tr>
|
|
3051
3056
|
<td class="col-md-4">
|
|
3052
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3057
|
+
<div class="io-line">Defined in <a href="" data-line="171" class="link-to-prism">src/slider/slider.component.ts:171</a></div>
|
|
3053
3058
|
</td>
|
|
3054
3059
|
</tr>
|
|
3055
3060
|
|
|
@@ -3060,7 +3065,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3060
3065
|
</tr>
|
|
3061
3066
|
<tr>
|
|
3062
3067
|
<td class="col-md-4">
|
|
3063
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3068
|
+
<div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/slider/slider.component.ts:165</a></div>
|
|
3064
3069
|
</td>
|
|
3065
3070
|
</tr>
|
|
3066
3071
|
<tr>
|
|
@@ -3116,7 +3121,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3116
3121
|
</tr>
|
|
3117
3122
|
<tr>
|
|
3118
3123
|
<td class="col-md-4">
|
|
3119
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3124
|
+
<div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/slider/slider.component.ts:182</a></div>
|
|
3120
3125
|
</td>
|
|
3121
3126
|
</tr>
|
|
3122
3127
|
|
|
@@ -3127,7 +3132,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3127
3132
|
</tr>
|
|
3128
3133
|
<tr>
|
|
3129
3134
|
<td class="col-md-4">
|
|
3130
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3135
|
+
<div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/slider/slider.component.ts:175</a></div>
|
|
3131
3136
|
</td>
|
|
3132
3137
|
</tr>
|
|
3133
3138
|
<tr>
|
|
@@ -3183,7 +3188,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3183
3188
|
</tr>
|
|
3184
3189
|
<tr>
|
|
3185
3190
|
<td class="col-md-4">
|
|
3186
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3191
|
+
<div class="io-line">Defined in <a href="" data-line="249" class="link-to-prism">src/slider/slider.component.ts:249</a></div>
|
|
3187
3192
|
</td>
|
|
3188
3193
|
</tr>
|
|
3189
3194
|
|
|
@@ -3194,7 +3199,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3194
3199
|
</tr>
|
|
3195
3200
|
<tr>
|
|
3196
3201
|
<td class="col-md-4">
|
|
3197
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3202
|
+
<div class="io-line">Defined in <a href="" data-line="188" class="link-to-prism">src/slider/slider.component.ts:188</a></div>
|
|
3198
3203
|
</td>
|
|
3199
3204
|
</tr>
|
|
3200
3205
|
<tr>
|
|
@@ -3250,7 +3255,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3250
3255
|
</tr>
|
|
3251
3256
|
<tr>
|
|
3252
3257
|
<td class="col-md-4">
|
|
3253
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3258
|
+
<div class="io-line">Defined in <a href="" data-line="276" class="link-to-prism">src/slider/slider.component.ts:276</a></div>
|
|
3254
3259
|
</td>
|
|
3255
3260
|
</tr>
|
|
3256
3261
|
|
|
@@ -3261,7 +3266,7 @@ Updates the track width to span from the low thumb to the high thumb</p>
|
|
|
3261
3266
|
</tr>
|
|
3262
3267
|
<tr>
|
|
3263
3268
|
<td class="col-md-4">
|
|
3264
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
3269
|
+
<div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/slider/slider.component.ts:267</a></div>
|
|
3265
3270
|
</td>
|
|
3266
3271
|
</tr>
|
|
3267
3272
|
<tr>
|
|
@@ -3386,38 +3391,42 @@ import { EventService } from "carbon-components-angular/utils";
|
|
|
3386
3391
|
</label>
|
|
3387
3392
|
<div
|
|
3388
3393
|
class="cds--slider"
|
|
3394
|
+
(click)="onClick($event)"
|
|
3389
3395
|
[ngClass]="{'cds--slider--disabled': disabled}">
|
|
3390
3396
|
<ng-container *ngIf="!isRange()">
|
|
3391
|
-
<div
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3397
|
+
<div class="cds--slider__thumb-wrapper"
|
|
3398
|
+
[ngStyle]="{insetInlineStart: getFractionComplete(value) * 100 + '%'}">
|
|
3399
|
+
<div
|
|
3400
|
+
#thumbs
|
|
3401
|
+
role="slider"
|
|
3402
|
+
[id]="id"
|
|
3403
|
+
[attr.aria-labelledby]="labelId"
|
|
3404
|
+
class="cds--slider__thumb"
|
|
3405
|
+
tabindex="0"
|
|
3406
|
+
(mousedown)="onMouseDown($event)"
|
|
3407
|
+
(keydown)="onKeyDown($event)">
|
|
3408
|
+
</div>
|
|
3401
3409
|
</div>
|
|
3402
3410
|
</ng-container>
|
|
3403
3411
|
<ng-container *ngIf="isRange()">
|
|
3404
|
-
<div
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3412
|
+
<div class="cds--slider__thumb-wrapper"
|
|
3413
|
+
[ngStyle]="{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}"
|
|
3414
|
+
*ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy">
|
|
3415
|
+
<div
|
|
3416
|
+
#thumbs
|
|
3417
|
+
role="slider"
|
|
3418
|
+
[id]="id + (i > 0 ? '-' + i : '')"
|
|
3419
|
+
[attr.aria-labelledby]="labelId"
|
|
3420
|
+
class="cds--slider__thumb"
|
|
3421
|
+
tabindex="0"
|
|
3422
|
+
(mousedown)="onMouseDown($event, i)"
|
|
3423
|
+
(keydown)="onKeyDown($event, i)">
|
|
3424
|
+
</div>
|
|
3415
3425
|
</div>
|
|
3416
3426
|
</ng-container>
|
|
3417
3427
|
<div
|
|
3418
3428
|
#track
|
|
3419
|
-
class="cds--slider__track"
|
|
3420
|
-
(click)="onClick($event)">
|
|
3429
|
+
class="cds--slider__track">
|
|
3421
3430
|
</div>
|
|
3422
3431
|
<div
|
|
3423
3432
|
#filledTrack
|
|
@@ -3754,11 +3763,24 @@ export class Slider implements AfterViewInit, ControlValueAccessor {
|
|
|
3754
3763
|
this.value = this.value;
|
|
3755
3764
|
}
|
|
3756
3765
|
|
|
3757
|
-
/**
|
|
3766
|
+
/**
|
|
3767
|
+
* Handles clicks on the slider, and setting the value to it's "real" equivalent.
|
|
3768
|
+
* Will assign the value to the closest thumb if in range mode.
|
|
3769
|
+
* */
|
|
3758
3770
|
onClick(event) {
|
|
3759
3771
|
if (this.disabled) { return; }
|
|
3760
3772
|
const trackLeft = this.track.nativeElement.getBoundingClientRect().left;
|
|
3761
|
-
|
|
3773
|
+
const trackValue = this.convertToValue(event.clientX - trackLeft);
|
|
3774
|
+
if (this.isRange()) {
|
|
3775
|
+
if (Math.abs(this._value[0] - trackValue) < Math.abs(this._value[1] - trackValue)) {
|
|
3776
|
+
this._value[0] = trackValue;
|
|
3777
|
+
} else {
|
|
3778
|
+
this._value[1] = trackValue;
|
|
3779
|
+
}
|
|
3780
|
+
} else {
|
|
3781
|
+
this._value[0] = trackValue;
|
|
3782
|
+
}
|
|
3783
|
+
|
|
3762
3784
|
this.value = this.value;
|
|
3763
3785
|
}
|
|
3764
3786
|
|
|
@@ -3875,7 +3897,7 @@ export class Slider implements AfterViewInit, ControlValueAccessor {
|
|
|
3875
3897
|
<script src="../js/libs/htmlparser.js"></script>
|
|
3876
3898
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
3877
3899
|
<script>
|
|
3878
|
-
var COMPONENT_TEMPLATE = '<div><ng-container *ngIf="!skeleton; else skeletonTemplate"> <label *ngIf="label" [for]="id" [id]="labelId" class="cds--label" [ngClass]="{\'cds--label--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div class="cds--slider-container"> <label [id]="bottomRangeId" class="cds--slider__range-label"> <ng-content select="[minLabel]"></ng-content> </label> <div class="cds--slider" [ngClass]="{\'cds--slider--disabled\': disabled}"> <ng-container *ngIf="!isRange()"> <div
|
|
3900
|
+
var COMPONENT_TEMPLATE = '<div><ng-container *ngIf="!skeleton; else skeletonTemplate"> <label *ngIf="label" [for]="id" [id]="labelId" class="cds--label" [ngClass]="{\'cds--label--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div class="cds--slider-container"> <label [id]="bottomRangeId" class="cds--slider__range-label"> <ng-content select="[minLabel]"></ng-content> </label> <div class="cds--slider" (click)="onClick($event)" [ngClass]="{\'cds--slider--disabled\': disabled}"> <ng-container *ngIf="!isRange()"> <div class="cds--slider__thumb-wrapper" [ngStyle]="{insetInlineStart: getFractionComplete(value) * 100 + \'%\'}"> <div #thumbs role="slider" [id]="id" [attr.aria-labelledby]="labelId" class="cds--slider__thumb" tabindex="0" (mousedown)="onMouseDown($event)" (keydown)="onKeyDown($event)"> </div> </div> </ng-container> <ng-container *ngIf="isRange()"> <div class="cds--slider__thumb-wrapper" [ngStyle]="{insetInlineStart: getFractionComplete(thumb) * 100 + \'%\'}" *ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy"> <div #thumbs role="slider" [id]="id + (i > 0 ? \'-\' + i : \'\')" [attr.aria-labelledby]="labelId" class="cds--slider__thumb" tabindex="0" (mousedown)="onMouseDown($event, i)" (keydown)="onKeyDown($event, i)"> </div> </div> </ng-container> <div #track class="cds--slider__track"> </div> <div #filledTrack class="cds--slider__filled-track"> </div> <input #range aria-label="slider" class="cds--slider__input" type="range" [step]="step" [min]="min" [max]="max" [value]="value.toString()"> </div> <label [id]="topRangeId" class="cds--slider__range-label"> <ng-content select="[maxLabel]"></ng-content> </label> <ng-content select="input"></ng-content> </div></ng-container><ng-template #skeletonTemplate> <label *ngIf="label" class="cds--label cds--skeleton"></label> <div class="cds--slider-container cds--skeleton"> <span class="cds--slider__range-label"></span> <div class="cds--slider"> <div class="cds--slider__thumb"></div> <div class="cds--slider__track"></div> <div class="cds--slider__filled-track"></div> </div> <span class="cds--slider__range-label"></span> </div></ng-template> </div>'
|
|
3879
3901
|
var COMPONENTS = [{'name': 'Accordion', 'selector': 'cds-accordion, ibm-accordion'},{'name': 'AccordionItem', 'selector': 'cds-accordion-item, ibm-accordion-item'},{'name': 'ActionableNotification', 'selector': 'cds-actionable-notification, ibm-actionable-notification'},{'name': 'AlertModal', 'selector': 'cds-alert-modal, ibm-alert-modal'},{'name': 'BaseIconButton', 'selector': ''},{'name': 'BaseNotification', 'selector': ''},{'name': 'BaseTabHeader', 'selector': ''},{'name': 'Breadcrumb', 'selector': 'cds-breadcrumb, ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'cds-breadcrumb-item, ibm-breadcrumb-item'},{'name': 'ButtonSet', 'selector': 'cds-button-set, ibm-button-set'},{'name': 'Checkbox', 'selector': 'cds-checkbox, ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'cds-clickable-tile, ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'cds-code-snippet, ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'cds-combo-box, ibm-combo-box'},{'name': 'ContainedList', 'selector': 'cds-contained-list, ibm-contained-list'},{'name': 'ContainedListItem', 'selector': 'cds-contained-list-item, ibm-contained-list-item'},{'name': 'ContentSwitcher', 'selector': 'cds-content-switcher, ibm-content-switcher'},{'name': 'ContextMenuComponent', 'selector': 'cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-context-menu-item, ibm-context-menu-item'},{'name': 'DatePicker', 'selector': 'cds-date-picker, ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'cds-date-picker-input, ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'cds-dialog, ibm-dialog'},{'name': 'Documentation', 'selector': 'cds-documentation'},{'name': 'Dropdown', 'selector': 'cds-dropdown, ibm-dropdown'},{'name': 'DropdownList', 'selector': 'cds-dropdown-list, ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'cds-expandable-tile, ibm-expandable-tile'},{'name': 'FileComponent', 'selector': 'cds-file, ibm-file'},{'name': 'FileUploader', 'selector': 'cds-file-uploader, ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'cds-hamburger, ibm-hamburger'},{'name': 'Header', 'selector': 'cds-header, ibm-header'},{'name': 'HeaderAction', 'selector': 'cds-header-action, ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'cds-header-global, ibm-header-global'},{'name': 'HeaderItem', 'selector': 'cds-header-item, ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'cds-header-menu, ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'cds-header-navigation, ibm-header-navigation'},{'name': 'IconButton', 'selector': 'cds-icon-button, ibm-icon-button'},{'name': 'InlineLoading', 'selector': 'cds-inline-loading, ibm-inline-loading'},{'name': 'Label', 'selector': 'cds-label, ibm-label'},{'name': 'ListColumn', 'selector': 'cds-list-column, ibm-list-column'},{'name': 'ListHeader', 'selector': 'cds-list-header, ibm-list-header'},{'name': 'ListRow', 'selector': 'cds-list-row, ibm-list-row'},{'name': 'Loading', 'selector': 'cds-loading, ibm-loading'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndicator', 'selector': 'cds-progress-indicator, ibm-progress-indicator'},{'name': 'Radio', 'selector': 'cds-radio, ibm-radio'},{'name': 'RadioGroup', 'selector': 'cds-radio-group, ibm-radio-group'},{'name': 'Search', 'selector': 'cds-search, ibm-search'},{'name': 'Select', 'selector': 'cds-select, ibm-select'},{'name': 'SelectionTile', 'selector': 'cds-selection-tile, ibm-selection-tile'},{'name': 'SideNav', 'selector': 'cds-sidenav, ibm-sidenav'},{'name': 'SideNavItem', 'selector': 'cds-sidenav-item, ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'cds-sidenav-menu, ibm-sidenav-menu'},{'name': 'SkeletonPlaceholder', 'selector': 'cds-skeleton-placeholder, ibm-skeleton-placeholder'},{'name': 'SkeletonText', 'selector': 'cds-skeleton-text, ibm-skeleton-text'},{'name': 'Slider', 'selector': 'cds-slider, ibm-slider'},{'name': 'StructuredList', 'selector': 'cds-structured-list, ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'cds-switcher-list, ibm-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'cds-switcher-list-item, ibm-switcher-list-item'},{'name': 'Tab', 'selector': 'cds-tab, ibm-tab'},{'name': 'TabHeaderGroup', 'selector': 'cds-tab-header-group, ibm-tab-header-group'},{'name': 'TabHeaders', 'selector': 'cds-tab-headers, ibm-tab-headers'},{'name': 'Table', 'selector': 'cds-table, ibm-table'},{'name': 'TableBody', 'selector': '[cdsTableBody], [ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[cdsTableCheckbox], [ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'cds-table-container, ibm-table-container'},{'name': 'TableData', 'selector': '[cdsTableData], [ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[cdsTableExpandButton], [ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[cdsTableExpandedRow], [ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[cdsTableHead], [ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[cdsTableHeadCell], [ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'cds-table-header, ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[cdsTableHeadExpand], [ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[cdsTableRadio], [ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[cdsTableRow], [ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'cds-table-toolbar, ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'cds-table-toolbar-actions, ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'cds-table-toolbar-content, ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'cds-table-toolbar-search, ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'cds-tabs, ibm-tabs'},{'name': 'TabSkeleton', 'selector': 'cds-tabs-skeleton, ibm-tabs-skeleton'},{'name': 'Tag', 'selector': 'cds-tag, ibm-tag'},{'name': 'TagFilter', 'selector': 'cds-tag-filter, ibm-tag-filter'},{'name': 'TextareaLabelComponent', 'selector': 'cds-textarea-label, ibm-textarea-label'},{'name': 'TextInputLabelComponent', 'selector': 'cds-text-label, ibm-text-label'},{'name': 'Tile', 'selector': 'cds-tile, ibm-tile'},{'name': 'TileGroup', 'selector': 'cds-tile-group, ibm-tile-group'},{'name': 'TimePicker', 'selector': 'cds-timepicker, ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'cds-timepicker-select, ibm-timepicker-select'},{'name': 'Toast', 'selector': 'cds-toast, ibm-toast'},{'name': 'Toggle', 'selector': 'cds-toggle, ibm-toggle'},{'name': 'Toggletip', 'selector': 'cds-toggletip, ibm-toggletip'},{'name': 'Tooltip', 'selector': 'cds-tooltip, ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'cds-tooltip-definition, ibm-tooltip-definition'},{'name': 'TreeNodeComponent', 'selector': 'cds-tree-node'},{'name': 'TreeViewComponent', 'selector': 'cds-tree-view'}];
|
|
3880
3902
|
var DIRECTIVES = [{'name': 'AbstractDropdownView', 'selector': '[cdsAbstractDropdownView], [ibmAbstractDropdownView]'},{'name': 'ActionableButton', 'selector': '[cdsActionableButton], [ibmActionableButton]'},{'name': 'ActionableSubtitle', 'selector': '[cdsActionableSubtitle], [ibmActionableSubtitle]'},{'name': 'ActionableTitle', 'selector': '[cdsActionableTitle], [ibmActionableTitle]'},{'name': 'BaseModal', 'selector': '[cdsBaseModal], [ibmBaseModal]'},{'name': 'Button', 'selector': '[cdsButton], [ibmButton]'},{'name': 'ColumnDirective', 'selector': '[cdsCol], [ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[cdsContentOption], [ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[cdsDialog], [ibmDialog]'},{'name': 'ExpandableTileAboveFoldDirective', 'selector': '[cdsAboveFold], [ibmAboveFold]'},{'name': 'ExpandableTileBelowFoldDirective', 'selector': '[cdsBelowFold], [ibmBelowFold]'},{'name': 'ExpandedRowHover', 'selector': '[cdsExpandedRowHover], [ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[cdsGrid], [ibmGrid]'},{'name': 'IconDirective', 'selector': '[cdsIcon], [ibmIcon]'},{'name': 'LayerDirective', 'selector': '[cdsLayer], [ibmLayer]'},{'name': 'Link', 'selector': '[cdsLink], [ibmLink]'},{'name': 'List', 'selector': '[cdsList], [ibmList]'},{'name': 'ListItemDirective', 'selector': '[cdsListItem], [ibmListItem]'},{'name': 'ModalContent', 'selector': '[cdsModalContent], [ibmModalContent]'},{'name': 'ModalContentText', 'selector': '[cdsModalContentText], [ibmModalContentText]'},{'name': 'ModalHeaderHeading', 'selector': '[cdsModalHeaderHeading], [ibmModalHeaderHeading]'},{'name': 'ModalHeaderLabel', 'selector': '[cdsModalHeaderLabel], [ibmModalHeaderLabel]'},{'name': 'NotificationSubtitle', 'selector': '[cdsNotificationSubtitle], [ibmNotificationSubtitle]'},{'name': 'NotificationTitle', 'selector': '[cdsNotificationTitle], [ibmNotificationTitle]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[cdsOverflowMenu], [ibmOverflowMenu]'},{'name': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'name': 'RowDirective', 'selector': '[cdsRow], [ibmRow]'},{'name': 'ScrollableList', 'selector': '[cdsScrollableList], [ibmScrollableList]'},{'name': 'StackDirective', 'selector': '[cdsStack], [ibmStack]'},{'name': 'TabHeader', 'selector': '[cdsTabHeader], [ibmTabHeader]'},{'name': 'TableDirective', 'selector': '[cdsTable], [ibmTable]'},{'name': 'TableHeadCellLabel', 'selector': '[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]'},{'name': 'TableHeaderDescription', 'selector': '[cdsTableHeaderDescription], [ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[cdsTableHeaderTitle], [ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[cdsTextArea], [ibmTextArea]'},{'name': 'TextInput', 'selector': '[cdsText], [ibmText]'},{'name': 'ThemeDirective', 'selector': '[cdsTheme], [ibmTheme]'},{'name': 'ToastCaption', 'selector': '[cdsToastCaption], [ibmToastCaption]'},{'name': 'ToastSubtitle', 'selector': '[cdsToastSubtitle], [ibmToastSubtitle]'},{'name': 'ToastTitle', 'selector': '[cdsToastTitle], [ibmToastTitle]'},{'name': 'ToggletipAction', 'selector': '[cdsToggletipAction], [ibmToggletipAction]'},{'name': 'ToggletipButton', 'selector': '[cdsToggletipButton], [ibmToggletipButton]'},{'name': 'ToggletipContent', 'selector': '[cdsToggletipContent], [ibmToggletipContent]'},{'name': 'ToggletipLabel', 'selector': '[cdsToggletipLabel], [ibmToggletipLabel]'}];
|
|
3881
3903
|
var ACTUAL_COMPONENT = {'name': 'Slider'};
|