carbon-components-angular 3.8.0 → 3.9.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/bundle/carbon-angular.umd.js +2 -2
- package/bundle/carbon-angular.umd.js.map +1 -1
- package/checkbox/checkbox.component.d.ts +4 -0
- package/checkbox/checkbox.component.js +6 -1
- package/checkbox/checkbox.component.js.map +1 -1
- package/checkbox/checkbox.component.metadata.json +1 -1
- package/checkbox/checkbox.component.ngfactory.js +2 -2
- package/checkbox/checkbox.component.ngfactory.js.map +1 -1
- package/checkbox/checkbox.component.ngsummary.json +1 -1
- package/checkbox/checkbox.module.ngfactory.js.map +1 -1
- package/combobox/combobox.component.d.ts +14 -4
- package/combobox/combobox.component.js +12 -9
- package/combobox/combobox.component.js.map +1 -1
- package/combobox/combobox.component.metadata.json +1 -1
- package/combobox/combobox.component.ngfactory.js +15 -8
- package/combobox/combobox.component.ngfactory.js.map +1 -1
- package/combobox/combobox.component.ngsummary.json +1 -1
- package/combobox/combobox.module.ngfactory.js.map +1 -1
- package/content-switcher/content-switcher.component.d.ts +1 -0
- package/content-switcher/content-switcher.component.js +18 -5
- package/content-switcher/content-switcher.component.js.map +1 -1
- package/content-switcher/content-switcher.component.metadata.json +1 -1
- package/content-switcher/content-switcher.component.ngfactory.js +2 -2
- package/content-switcher/content-switcher.component.ngfactory.js.map +1 -1
- package/content-switcher/content-switcher.component.ngsummary.json +1 -1
- package/content-switcher/content-switcher.module.ngfactory.js.map +1 -1
- package/datepicker/datepicker.component.d.ts +1 -1
- package/datepicker/datepicker.component.js.map +1 -1
- package/datepicker-input/datepicker-input.component.d.ts +2 -2
- package/datepicker-input/datepicker-input.component.js +1 -1
- package/datepicker-input/datepicker-input.component.js.map +1 -1
- package/datepicker-input/datepicker-input.component.metadata.json +1 -1
- package/datepicker-input/datepicker-input.component.ngfactory.js +14 -11
- package/datepicker-input/datepicker-input.component.ngfactory.js.map +1 -1
- package/datepicker-input/datepicker-input.module.ngfactory.js.map +1 -1
- package/docs/documentation/classes/CheckboxChange.html +7 -1
- package/docs/documentation/classes/NumberChange.html +11 -7
- package/docs/documentation/classes/ToggleChange.html +13 -5
- package/docs/documentation/components/Checkbox.html +74 -41
- package/docs/documentation/components/ComboBox.html +366 -184
- package/docs/documentation/components/ContentSwitcher.html +136 -12
- package/docs/documentation/components/DatePicker.html +2 -2
- package/docs/documentation/components/DatePickerInput.html +24 -22
- package/docs/documentation/components/Dropdown.html +335 -62
- package/docs/documentation/components/File.html +10 -6
- package/docs/documentation/components/FileUploader.html +26 -24
- package/docs/documentation/components/HeaderItem.html +2 -2
- package/docs/documentation/components/Label.html +3 -3
- package/docs/documentation/components/Number.html +57 -41
- package/docs/documentation/components/Select.html +55 -42
- package/docs/documentation/components/Slider.html +254 -142
- package/docs/documentation/components/TimePicker.html +103 -17
- package/docs/documentation/components/TimePickerSelect.html +65 -37
- package/docs/documentation/components/Toggle.html +168 -55
- package/docs/documentation/coverage.html +20 -20
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/storybook/iframe.html +3 -3
- package/docs/storybook/{main.56858f6c72e70f546e4c.bundle.js → main.e71ec014aa45dc1d6679.bundle.js} +194 -104
- package/docs/storybook/main.e71ec014aa45dc1d6679.bundle.js.map +1 -0
- package/docs/storybook/{runtime~main.56858f6c72e70f546e4c.bundle.js → runtime~main.e71ec014aa45dc1d6679.bundle.js} +1 -1
- package/docs/storybook/{runtime~main.56858f6c72e70f546e4c.bundle.js.map → runtime~main.e71ec014aa45dc1d6679.bundle.js.map} +1 -1
- package/docs/storybook/{vendors~main.56858f6c72e70f546e4c.bundle.js → vendors~main.e71ec014aa45dc1d6679.bundle.js} +1 -1
- package/docs/storybook/{vendors~main.56858f6c72e70f546e4c.bundle.js.map → vendors~main.e71ec014aa45dc1d6679.bundle.js.map} +1 -1
- package/dropdown/dropdown.component.d.ts +12 -0
- package/dropdown/dropdown.component.js +12 -2
- package/dropdown/dropdown.component.js.map +1 -1
- package/dropdown/dropdown.component.metadata.json +1 -1
- package/dropdown/dropdown.component.ngfactory.js +18 -11
- package/dropdown/dropdown.component.ngfactory.js.map +1 -1
- package/dropdown/dropdown.component.ngsummary.json +1 -1
- package/dropdown/dropdown.module.ngfactory.js.map +1 -1
- package/file-uploader/file-uploader.component.js +1 -1
- package/file-uploader/file-uploader.component.js.map +1 -1
- package/file-uploader/file-uploader.component.metadata.json +1 -1
- package/file-uploader/file-uploader.component.ngfactory.js +1 -1
- package/file-uploader/file-uploader.component.ngfactory.js.map +1 -1
- package/file-uploader/file.component.js +1 -1
- package/file-uploader/file.component.js.map +1 -1
- package/file-uploader/file.component.metadata.json +1 -1
- package/file-uploader/file.component.ngfactory.js +7 -1
- package/file-uploader/file.component.ngfactory.js.map +1 -1
- package/input/label.component.d.ts +1 -1
- package/input/label.component.js.map +1 -1
- package/number-input/number.component.d.ts +3 -3
- package/number-input/number.component.js +1 -1
- package/number-input/number.component.js.map +1 -1
- package/number-input/number.component.metadata.json +1 -1
- package/number-input/number.component.ngfactory.js +25 -21
- package/number-input/number.component.ngfactory.js.map +1 -1
- package/number-input/number.module.ngfactory.js.map +1 -1
- package/package.json +1 -1
- package/select/select.component.d.ts +3 -3
- package/select/select.component.js +4 -8
- package/select/select.component.js.map +1 -1
- package/select/select.component.metadata.json +1 -1
- package/select/select.component.ngfactory.js +21 -15
- package/select/select.component.ngfactory.js.map +1 -1
- package/select/select.component.ngsummary.json +1 -1
- package/slider/slider.component.d.ts +4 -1
- package/slider/slider.component.js +7 -3
- package/slider/slider.component.js.map +1 -1
- package/slider/slider.component.metadata.json +1 -1
- package/slider/slider.component.ngfactory.js +10 -7
- package/slider/slider.component.ngfactory.js.map +1 -1
- package/slider/slider.component.ngsummary.json +1 -1
- package/timepicker/timepicker.component.d.ts +3 -2
- package/timepicker/timepicker.component.js +5 -2
- package/timepicker/timepicker.component.js.map +1 -1
- package/timepicker/timepicker.component.metadata.json +1 -1
- package/timepicker/timepicker.component.ngfactory.js +4 -1
- package/timepicker/timepicker.component.ngfactory.js.map +1 -1
- package/timepicker/timepicker.component.ngsummary.json +1 -1
- package/timepicker-select/timepicker-select.component.d.ts +1 -0
- package/timepicker-select/timepicker-select.component.js +1 -0
- package/timepicker-select/timepicker-select.component.js.map +1 -1
- package/timepicker-select/timepicker-select.component.metadata.json +1 -1
- package/timepicker-select/timepicker-select.component.ngsummary.json +1 -1
- package/toggle/toggle.component.d.ts +3 -2
- package/toggle/toggle.component.js +5 -2
- package/toggle/toggle.component.js.map +1 -1
- package/toggle/toggle.component.metadata.json +1 -1
- package/toggle/toggle.component.ngfactory.js +7 -4
- package/toggle/toggle.component.ngfactory.js.map +1 -1
- package/toggle/toggle.component.ngsummary.json +1 -1
- package/ui-shell/header/header-item.component.js +1 -1
- package/ui-shell/header/header-item.component.js.map +1 -1
- package/docs/storybook/main.56858f6c72e70f546e4c.bundle.js.map +0 -1
|
@@ -141,57 +141,61 @@ for use as an alternative value field.</p>
|
|
|
141
141
|
<tr>
|
|
142
142
|
<td class="col-md-3">template</td>
|
|
143
143
|
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><ng-container *ngIf="!skeleton; else skeletonTemplate">
|
|
144
|
-
<label
|
|
145
|
-
<ng-
|
|
144
|
+
<label for="slider" class="bx--label">
|
|
145
|
+
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
|
|
146
|
+
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
|
|
146
147
|
</label>
|
|
147
|
-
<div
|
|
148
|
-
class="bx--
|
|
149
|
-
|
|
148
|
+
<div class="bx--slider-container">
|
|
149
|
+
<label [id]="bottomRangeId" class="bx--slider__range-label">
|
|
150
|
+
<ng-content select="[minLabel]"></ng-content>
|
|
151
|
+
</label>
|
|
150
152
|
<div
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
153
|
+
class="bx--slider"
|
|
154
|
+
[ngClass]="{'bx--slider--disabled': disabled}">
|
|
155
|
+
<div
|
|
156
|
+
#thumb
|
|
157
|
+
class="bx--slider__thumb"
|
|
158
|
+
tabindex="0"
|
|
159
|
+
[ngStyle]="{'left.%': getFractionComplete() * 100}"
|
|
160
|
+
(mousedown)="onMouseDown($event)"
|
|
161
|
+
(keydown)="onKeyDown($event)">
|
|
162
|
+
</div>
|
|
163
|
+
<div
|
|
164
|
+
#track
|
|
165
|
+
class="bx--slider__track"
|
|
166
|
+
(click)="onClick($event)">
|
|
167
|
+
</div>
|
|
168
|
+
<div
|
|
169
|
+
class="bx--slider__filled-track"
|
|
170
|
+
[ngStyle]="{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}">
|
|
171
|
+
</div>
|
|
172
|
+
<input
|
|
173
|
+
#range
|
|
174
|
+
aria-label="slider"
|
|
175
|
+
class="bx--slider__input"
|
|
176
|
+
type="range"
|
|
177
|
+
[step]="step"
|
|
178
|
+
[min]="min"
|
|
179
|
+
[max]="max"
|
|
180
|
+
[value]="value.toString()">
|
|
166
181
|
</div>
|
|
167
|
-
<
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
type="range"
|
|
172
|
-
[step]="step"
|
|
173
|
-
[min]="min"
|
|
174
|
-
[max]="max"
|
|
175
|
-
[value]="value.toString()">
|
|
182
|
+
<label [id]="topRangeId" class="bx--slider__range-label">
|
|
183
|
+
<ng-content select="[maxLabel]"></ng-content>
|
|
184
|
+
</label>
|
|
185
|
+
<ng-content select="input"></ng-content>
|
|
176
186
|
</div>
|
|
177
|
-
<label [id]="topRangeId" class="bx--slider__range-label">
|
|
178
|
-
<ng-content select="[maxLabel]"></ng-content>
|
|
179
|
-
</label>
|
|
180
|
-
<ng-content select="input"></ng-content>
|
|
181
187
|
</ng-container>
|
|
182
188
|
|
|
183
189
|
<ng-template #skeletonTemplate>
|
|
184
|
-
<
|
|
185
|
-
|
|
186
|
-
<
|
|
187
|
-
|
|
188
|
-
<div class="bx--
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
<div class="bx--slider__filled-track"></div>
|
|
192
|
-
</div>
|
|
193
|
-
<span class="bx--slider__range-label"></span>
|
|
190
|
+
<label class="bx--label bx--skeleton"></label>
|
|
191
|
+
<div class="bx--slider-container bx--skeleton">
|
|
192
|
+
<span class="bx--slider__range-label"></span>
|
|
193
|
+
<div class="bx--slider">
|
|
194
|
+
<div class="bx--slider__thumb"></div>
|
|
195
|
+
<div class="bx--slider__track"></div>
|
|
196
|
+
<div class="bx--slider__filled-track"></div>
|
|
194
197
|
</div>
|
|
198
|
+
<span class="bx--slider__range-label"></span>
|
|
195
199
|
</div>
|
|
196
200
|
</ng-template>
|
|
197
201
|
</code></pre></td>
|
|
@@ -300,6 +304,10 @@ for use as an alternative value field.</p>
|
|
|
300
304
|
<li>
|
|
301
305
|
<a href="#incrementValue">incrementValue</a>
|
|
302
306
|
</li>
|
|
307
|
+
<li>
|
|
308
|
+
<span class="modifier">Public</span>
|
|
309
|
+
<a href="#isTemplate">isTemplate</a>
|
|
310
|
+
</li>
|
|
303
311
|
<li>
|
|
304
312
|
<a href="#ngAfterViewInit">ngAfterViewInit</a>
|
|
305
313
|
</li>
|
|
@@ -360,6 +368,9 @@ for use as an alternative value field.</p>
|
|
|
360
368
|
<li>
|
|
361
369
|
<a href="#id">id</a>
|
|
362
370
|
</li>
|
|
371
|
+
<li>
|
|
372
|
+
<a href="#label">label</a>
|
|
373
|
+
</li>
|
|
363
374
|
<li>
|
|
364
375
|
<a href="#max">max</a>
|
|
365
376
|
</li>
|
|
@@ -406,7 +417,7 @@ for use as an alternative value field.</p>
|
|
|
406
417
|
<td class="col-md-4">
|
|
407
418
|
<ul class="index-list">
|
|
408
419
|
<li>
|
|
409
|
-
<a href="#class.bx--
|
|
420
|
+
<a href="#class.bx--form-item">class.bx--form-item</a>
|
|
410
421
|
</li>
|
|
411
422
|
</ul>
|
|
412
423
|
</td>
|
|
@@ -445,7 +456,7 @@ for use as an alternative value field.</p>
|
|
|
445
456
|
</tr>
|
|
446
457
|
<tr>
|
|
447
458
|
<td class="col-md-4">
|
|
448
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
459
|
+
<div class="io-line">Defined in <a href="" data-line="200" class="link-to-prism">src/slider/slider.component.ts:200</a></div>
|
|
449
460
|
</td>
|
|
450
461
|
</tr>
|
|
451
462
|
|
|
@@ -502,7 +513,7 @@ for use as an alternative value field.</p>
|
|
|
502
513
|
</tr>
|
|
503
514
|
<tr>
|
|
504
515
|
<td class="col-md-2" colspan="2">
|
|
505
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
516
|
+
<div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/slider/slider.component.ts:170</a></div>
|
|
506
517
|
</td>
|
|
507
518
|
</tr>
|
|
508
519
|
</tbody>
|
|
@@ -521,7 +532,7 @@ for use as an alternative value field.</p>
|
|
|
521
532
|
</tr>
|
|
522
533
|
<tr>
|
|
523
534
|
<td class="col-md-2" colspan="2">
|
|
524
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
535
|
+
<div class="io-line">Defined in <a href="" data-line="172" class="link-to-prism">src/slider/slider.component.ts:172</a></div>
|
|
525
536
|
</td>
|
|
526
537
|
</tr>
|
|
527
538
|
</tbody>
|
|
@@ -543,7 +554,30 @@ for use as an alternative value field.</p>
|
|
|
543
554
|
</tr>
|
|
544
555
|
<tr>
|
|
545
556
|
<td class="col-md-2" colspan="2">
|
|
546
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
557
|
+
<div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/slider/slider.component.ts:162</a></div>
|
|
558
|
+
</td>
|
|
559
|
+
</tr>
|
|
560
|
+
</tbody>
|
|
561
|
+
</table>
|
|
562
|
+
<table class="table table-sm table-bordered">
|
|
563
|
+
<tbody>
|
|
564
|
+
<tr>
|
|
565
|
+
<td class="col-md-2">
|
|
566
|
+
<a name="label"></a>
|
|
567
|
+
<code>label</code>
|
|
568
|
+
</td>
|
|
569
|
+
<td class="col-md-10">
|
|
570
|
+
<div><p>Sets the text inside the <code>label</code> tag </p>
|
|
571
|
+
</div>
|
|
572
|
+
<p>
|
|
573
|
+
<em>Type :</em> <code>string | TemplateRef<any></code>
|
|
574
|
+
|
|
575
|
+
</p>
|
|
576
|
+
</td>
|
|
577
|
+
</tr>
|
|
578
|
+
<tr>
|
|
579
|
+
<td class="col-md-2" colspan="2">
|
|
580
|
+
<div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/slider/slider.component.ts:168</a></div>
|
|
547
581
|
</td>
|
|
548
582
|
</tr>
|
|
549
583
|
</tbody>
|
|
@@ -565,7 +599,7 @@ for use as an alternative value field.</p>
|
|
|
565
599
|
</tr>
|
|
566
600
|
<tr>
|
|
567
601
|
<td class="col-md-2" colspan="2">
|
|
568
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
602
|
+
<div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/slider/slider.component.ts:134</a></div>
|
|
569
603
|
</td>
|
|
570
604
|
</tr>
|
|
571
605
|
</tbody>
|
|
@@ -587,7 +621,7 @@ for use as an alternative value field.</p>
|
|
|
587
621
|
</tr>
|
|
588
622
|
<tr>
|
|
589
623
|
<td class="col-md-2" colspan="2">
|
|
590
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
624
|
+
<div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/slider/slider.component.ts:132</a></div>
|
|
591
625
|
</td>
|
|
592
626
|
</tr>
|
|
593
627
|
</tbody>
|
|
@@ -609,7 +643,7 @@ for use as an alternative value field.</p>
|
|
|
609
643
|
</tr>
|
|
610
644
|
<tr>
|
|
611
645
|
<td class="col-md-2" colspan="2">
|
|
612
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
646
|
+
<div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/slider/slider.component.ts:164</a></div>
|
|
613
647
|
</td>
|
|
614
648
|
</tr>
|
|
615
649
|
</tbody>
|
|
@@ -631,7 +665,7 @@ for use as an alternative value field.</p>
|
|
|
631
665
|
</tr>
|
|
632
666
|
<tr>
|
|
633
667
|
<td class="col-md-2" colspan="2">
|
|
634
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
668
|
+
<div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/slider/slider.component.ts:166</a></div>
|
|
635
669
|
</td>
|
|
636
670
|
</tr>
|
|
637
671
|
</tbody>
|
|
@@ -653,7 +687,7 @@ for use as an alternative value field.</p>
|
|
|
653
687
|
</tr>
|
|
654
688
|
<tr>
|
|
655
689
|
<td class="col-md-2" colspan="2">
|
|
656
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
690
|
+
<div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/slider/slider.component.ts:136</a></div>
|
|
657
691
|
</td>
|
|
658
692
|
</tr>
|
|
659
693
|
</tbody>
|
|
@@ -672,7 +706,7 @@ for use as an alternative value field.</p>
|
|
|
672
706
|
</tr>
|
|
673
707
|
<tr>
|
|
674
708
|
<td class="col-md-2" colspan="2">
|
|
675
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
709
|
+
<div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/slider/slider.component.ts:138</a></div>
|
|
676
710
|
</td>
|
|
677
711
|
</tr>
|
|
678
712
|
</tbody>
|
|
@@ -696,7 +730,7 @@ for use as an alternative value field.</p>
|
|
|
696
730
|
</tr>
|
|
697
731
|
<tr>
|
|
698
732
|
<td class="col-md-2" colspan="2">
|
|
699
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
733
|
+
<div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/slider/slider.component.ts:185</a></div>
|
|
700
734
|
</td>
|
|
701
735
|
</tr>
|
|
702
736
|
</tbody>
|
|
@@ -707,18 +741,18 @@ for use as an alternative value field.</p>
|
|
|
707
741
|
<tbody>
|
|
708
742
|
<tr>
|
|
709
743
|
<td class="col-md-4">
|
|
710
|
-
<a name="class.bx--
|
|
744
|
+
<a name="class.bx--form-item"></a>
|
|
711
745
|
<span class="name">
|
|
712
746
|
<b>
|
|
713
|
-
class.bx--
|
|
747
|
+
class.bx--form-item
|
|
714
748
|
</b>
|
|
715
|
-
<a href="#class.bx--
|
|
749
|
+
<a href="#class.bx--form-item"><span class="icon ion-ios-link"></span></a>
|
|
716
750
|
</span>
|
|
717
751
|
</td>
|
|
718
752
|
</tr>
|
|
719
753
|
<tr>
|
|
720
754
|
<td class="col-md-4">
|
|
721
|
-
<code>class.bx--
|
|
755
|
+
<code>class.bx--form-item: <code></code>
|
|
722
756
|
</code>
|
|
723
757
|
</td>
|
|
724
758
|
</tr>
|
|
@@ -729,7 +763,7 @@ for use as an alternative value field.</p>
|
|
|
729
763
|
</tr>
|
|
730
764
|
<tr>
|
|
731
765
|
<td class="col-md-4">
|
|
732
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
766
|
+
<div class="io-line">Defined in <a href="" data-line="186" class="link-to-prism">src/slider/slider.component.ts:186</a></div>
|
|
733
767
|
</td>
|
|
734
768
|
</tr>
|
|
735
769
|
|
|
@@ -766,7 +800,7 @@ for use as an alternative value field.</p>
|
|
|
766
800
|
|
|
767
801
|
<tr>
|
|
768
802
|
<td class="col-md-4">
|
|
769
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
803
|
+
<div class="io-line">Defined in <a href="" data-line="283" class="link-to-prism">src/slider/slider.component.ts:283</a></div>
|
|
770
804
|
</td>
|
|
771
805
|
</tr>
|
|
772
806
|
|
|
@@ -833,7 +867,7 @@ for use as an alternative value field.</p>
|
|
|
833
867
|
|
|
834
868
|
<tr>
|
|
835
869
|
<td class="col-md-4">
|
|
836
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
870
|
+
<div class="io-line">Defined in <a href="" data-line="272" class="link-to-prism">src/slider/slider.component.ts:272</a></div>
|
|
837
871
|
</td>
|
|
838
872
|
</tr>
|
|
839
873
|
|
|
@@ -900,7 +934,7 @@ for use as an alternative value field.</p>
|
|
|
900
934
|
|
|
901
935
|
<tr>
|
|
902
936
|
<td class="col-md-4">
|
|
903
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
937
|
+
<div class="io-line">Defined in <a href="" data-line="314" class="link-to-prism">src/slider/slider.component.ts:314</a></div>
|
|
904
938
|
</td>
|
|
905
939
|
</tr>
|
|
906
940
|
|
|
@@ -945,7 +979,7 @@ for use as an alternative value field.</p>
|
|
|
945
979
|
|
|
946
980
|
<tr>
|
|
947
981
|
<td class="col-md-4">
|
|
948
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
982
|
+
<div class="io-line">Defined in <a href="" data-line="257" class="link-to-prism">src/slider/slider.component.ts:257</a></div>
|
|
949
983
|
</td>
|
|
950
984
|
</tr>
|
|
951
985
|
|
|
@@ -985,7 +1019,7 @@ for use as an alternative value field.</p>
|
|
|
985
1019
|
|
|
986
1020
|
<tr>
|
|
987
1021
|
<td class="col-md-4">
|
|
988
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1022
|
+
<div class="io-line">Defined in <a href="" data-line="305" class="link-to-prism">src/slider/slider.component.ts:305</a></div>
|
|
989
1023
|
</td>
|
|
990
1024
|
</tr>
|
|
991
1025
|
|
|
@@ -1008,6 +1042,73 @@ for use as an alternative value field.</p>
|
|
|
1008
1042
|
</tr>
|
|
1009
1043
|
</tbody>
|
|
1010
1044
|
</table>
|
|
1045
|
+
<table class="table table-sm table-bordered">
|
|
1046
|
+
<tbody>
|
|
1047
|
+
<tr>
|
|
1048
|
+
<td class="col-md-4">
|
|
1049
|
+
<a name="isTemplate"></a>
|
|
1050
|
+
<span class="name">
|
|
1051
|
+
<b>
|
|
1052
|
+
<span class="modifier">Public</span>
|
|
1053
|
+
isTemplate
|
|
1054
|
+
</b>
|
|
1055
|
+
<a href="#isTemplate"><span class="icon ion-ios-link"></span></a>
|
|
1056
|
+
</span>
|
|
1057
|
+
</td>
|
|
1058
|
+
</tr>
|
|
1059
|
+
<tr>
|
|
1060
|
+
<td class="col-md-4">
|
|
1061
|
+
<span class="modifier-icon icon ion-ios-reset"></span>
|
|
1062
|
+
<code>isTemplate(value)</code>
|
|
1063
|
+
</td>
|
|
1064
|
+
</tr>
|
|
1065
|
+
|
|
1066
|
+
|
|
1067
|
+
<tr>
|
|
1068
|
+
<td class="col-md-4">
|
|
1069
|
+
<div class="io-line">Defined in <a href="" data-line="377" class="link-to-prism">src/slider/slider.component.ts:377</a></div>
|
|
1070
|
+
</td>
|
|
1071
|
+
</tr>
|
|
1072
|
+
|
|
1073
|
+
|
|
1074
|
+
<tr>
|
|
1075
|
+
<td class="col-md-4">
|
|
1076
|
+
|
|
1077
|
+
<div class="io-description">
|
|
1078
|
+
<b>Parameters :</b>
|
|
1079
|
+
<table class="params">
|
|
1080
|
+
<thead>
|
|
1081
|
+
<tr>
|
|
1082
|
+
<td>Name</td>
|
|
1083
|
+
<td>Optional</td>
|
|
1084
|
+
</tr>
|
|
1085
|
+
</thead>
|
|
1086
|
+
<tbody>
|
|
1087
|
+
<tr>
|
|
1088
|
+
<td>value</td>
|
|
1089
|
+
|
|
1090
|
+
<td>
|
|
1091
|
+
No
|
|
1092
|
+
</td>
|
|
1093
|
+
|
|
1094
|
+
|
|
1095
|
+
</tr>
|
|
1096
|
+
</tbody>
|
|
1097
|
+
</table>
|
|
1098
|
+
</div>
|
|
1099
|
+
<div>
|
|
1100
|
+
</div>
|
|
1101
|
+
<div class="io-description">
|
|
1102
|
+
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
1103
|
+
|
|
1104
|
+
</div>
|
|
1105
|
+
<div class="io-description">
|
|
1106
|
+
|
|
1107
|
+
</div>
|
|
1108
|
+
</td>
|
|
1109
|
+
</tr>
|
|
1110
|
+
</tbody>
|
|
1111
|
+
</table>
|
|
1011
1112
|
<table class="table table-sm table-bordered">
|
|
1012
1113
|
<tbody>
|
|
1013
1114
|
<tr>
|
|
@@ -1030,7 +1131,7 @@ for use as an alternative value field.</p>
|
|
|
1030
1131
|
|
|
1031
1132
|
<tr>
|
|
1032
1133
|
<td class="col-md-4">
|
|
1033
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1134
|
+
<div class="io-line">Defined in <a href="" data-line="204" class="link-to-prism">src/slider/slider.component.ts:204</a></div>
|
|
1034
1135
|
</td>
|
|
1035
1136
|
</tr>
|
|
1036
1137
|
|
|
@@ -1068,7 +1169,7 @@ for use as an alternative value field.</p>
|
|
|
1068
1169
|
|
|
1069
1170
|
<tr>
|
|
1070
1171
|
<td class="col-md-4">
|
|
1071
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1172
|
+
<div class="io-line">Defined in <a href="" data-line="229" class="link-to-prism">src/slider/slider.component.ts:229</a></div>
|
|
1072
1173
|
</td>
|
|
1073
1174
|
</tr>
|
|
1074
1175
|
|
|
@@ -1108,7 +1209,7 @@ for use as an alternative value field.</p>
|
|
|
1108
1209
|
|
|
1109
1210
|
<tr>
|
|
1110
1211
|
<td class="col-md-4">
|
|
1111
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1212
|
+
<div class="io-line">Defined in <a href="" data-line="319" class="link-to-prism">src/slider/slider.component.ts:319</a></div>
|
|
1112
1213
|
</td>
|
|
1113
1214
|
</tr>
|
|
1114
1215
|
|
|
@@ -1175,7 +1276,7 @@ for use as an alternative value field.</p>
|
|
|
1175
1276
|
|
|
1176
1277
|
<tr>
|
|
1177
1278
|
<td class="col-md-4">
|
|
1178
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1279
|
+
<div class="io-line">Defined in <a href="" data-line="324" class="link-to-prism">src/slider/slider.component.ts:324</a></div>
|
|
1179
1280
|
</td>
|
|
1180
1281
|
</tr>
|
|
1181
1282
|
|
|
@@ -1242,7 +1343,7 @@ for use as an alternative value field.</p>
|
|
|
1242
1343
|
|
|
1243
1344
|
<tr>
|
|
1244
1345
|
<td class="col-md-4">
|
|
1245
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1346
|
+
<div class="io-line">Defined in <a href="" data-line="331" class="link-to-prism">src/slider/slider.component.ts:331</a></div>
|
|
1246
1347
|
</td>
|
|
1247
1348
|
</tr>
|
|
1248
1349
|
|
|
@@ -1308,7 +1409,7 @@ for use as an alternative value field.</p>
|
|
|
1308
1409
|
|
|
1309
1410
|
<tr>
|
|
1310
1411
|
<td class="col-md-4">
|
|
1311
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1412
|
+
<div class="io-line">Defined in <a href="" data-line="362" class="link-to-prism">src/slider/slider.component.ts:362</a></div>
|
|
1312
1413
|
</td>
|
|
1313
1414
|
</tr>
|
|
1314
1415
|
|
|
@@ -1379,7 +1480,7 @@ for use as an alternative value field.</p>
|
|
|
1379
1480
|
|
|
1380
1481
|
<tr>
|
|
1381
1482
|
<td class="col-md-4">
|
|
1382
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1483
|
+
<div class="io-line">Defined in <a href="" data-line="349" class="link-to-prism">src/slider/slider.component.ts:349</a></div>
|
|
1383
1484
|
</td>
|
|
1384
1485
|
</tr>
|
|
1385
1486
|
|
|
@@ -1446,7 +1547,7 @@ for use as an alternative value field.</p>
|
|
|
1446
1547
|
|
|
1447
1548
|
<tr>
|
|
1448
1549
|
<td class="col-md-4">
|
|
1449
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1550
|
+
<div class="io-line">Defined in <a href="" data-line="336" class="link-to-prism">src/slider/slider.component.ts:336</a></div>
|
|
1450
1551
|
</td>
|
|
1451
1552
|
</tr>
|
|
1452
1553
|
|
|
@@ -1513,7 +1614,7 @@ for use as an alternative value field.</p>
|
|
|
1513
1614
|
|
|
1514
1615
|
<tr>
|
|
1515
1616
|
<td class="col-md-4">
|
|
1516
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1617
|
+
<div class="io-line">Defined in <a href="" data-line="357" class="link-to-prism">src/slider/slider.component.ts:357</a></div>
|
|
1517
1618
|
</td>
|
|
1518
1619
|
</tr>
|
|
1519
1620
|
|
|
@@ -1553,7 +1654,7 @@ for use as an alternative value field.</p>
|
|
|
1553
1654
|
|
|
1554
1655
|
<tr>
|
|
1555
1656
|
<td class="col-md-4">
|
|
1556
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1657
|
+
<div class="io-line">Defined in <a href="" data-line="239" class="link-to-prism">src/slider/slider.component.ts:239</a></div>
|
|
1557
1658
|
</td>
|
|
1558
1659
|
</tr>
|
|
1559
1660
|
|
|
@@ -1624,7 +1725,7 @@ for use as an alternative value field.</p>
|
|
|
1624
1725
|
|
|
1625
1726
|
<tr>
|
|
1626
1727
|
<td class="col-md-4">
|
|
1627
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1728
|
+
<div class="io-line">Defined in <a href="" data-line="247" class="link-to-prism">src/slider/slider.component.ts:247</a></div>
|
|
1628
1729
|
</td>
|
|
1629
1730
|
</tr>
|
|
1630
1731
|
|
|
@@ -1695,7 +1796,7 @@ for use as an alternative value field.</p>
|
|
|
1695
1796
|
|
|
1696
1797
|
<tr>
|
|
1697
1798
|
<td class="col-md-4">
|
|
1698
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1799
|
+
<div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/slider/slider.component.ts:267</a></div>
|
|
1699
1800
|
</td>
|
|
1700
1801
|
</tr>
|
|
1701
1802
|
|
|
@@ -1762,7 +1863,7 @@ for use as an alternative value field.</p>
|
|
|
1762
1863
|
|
|
1763
1864
|
<tr>
|
|
1764
1865
|
<td class="col-md-4">
|
|
1765
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1866
|
+
<div class="io-line">Defined in <a href="" data-line="252" class="link-to-prism">src/slider/slider.component.ts:252</a></div>
|
|
1766
1867
|
</td>
|
|
1767
1868
|
</tr>
|
|
1768
1869
|
|
|
@@ -1845,7 +1946,7 @@ for use as an alternative value field.</p>
|
|
|
1845
1946
|
</tr>
|
|
1846
1947
|
<tr>
|
|
1847
1948
|
<td class="col-md-4">
|
|
1848
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1949
|
+
<div class="io-line">Defined in <a href="" data-line="200" class="link-to-prism">src/slider/slider.component.ts:200</a></div>
|
|
1849
1950
|
</td>
|
|
1850
1951
|
</tr>
|
|
1851
1952
|
|
|
@@ -1879,7 +1980,7 @@ for use as an alternative value field.</p>
|
|
|
1879
1980
|
</tr>
|
|
1880
1981
|
<tr>
|
|
1881
1982
|
<td class="col-md-4">
|
|
1882
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1983
|
+
<div class="io-line">Defined in <a href="" data-line="199" class="link-to-prism">src/slider/slider.component.ts:199</a></div>
|
|
1883
1984
|
</td>
|
|
1884
1985
|
</tr>
|
|
1885
1986
|
|
|
@@ -1913,7 +2014,7 @@ for use as an alternative value field.</p>
|
|
|
1913
2014
|
</tr>
|
|
1914
2015
|
<tr>
|
|
1915
2016
|
<td class="col-md-4">
|
|
1916
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2017
|
+
<div class="io-line">Defined in <a href="" data-line="191" class="link-to-prism">src/slider/slider.component.ts:191</a></div>
|
|
1917
2018
|
</td>
|
|
1918
2019
|
</tr>
|
|
1919
2020
|
|
|
@@ -1954,7 +2055,7 @@ for use as an alternative value field.</p>
|
|
|
1954
2055
|
</tr>
|
|
1955
2056
|
<tr>
|
|
1956
2057
|
<td class="col-md-4">
|
|
1957
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2058
|
+
<div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/slider/slider.component.ts:130</a></div>
|
|
1958
2059
|
</td>
|
|
1959
2060
|
</tr>
|
|
1960
2061
|
|
|
@@ -2000,7 +2101,7 @@ for use as an alternative value field.</p>
|
|
|
2000
2101
|
</tr>
|
|
2001
2102
|
<tr>
|
|
2002
2103
|
<td class="col-md-4">
|
|
2003
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2104
|
+
<div class="io-line">Defined in <a href="" data-line="196" class="link-to-prism">src/slider/slider.component.ts:196</a></div>
|
|
2004
2105
|
</td>
|
|
2005
2106
|
</tr>
|
|
2006
2107
|
|
|
@@ -2041,7 +2142,7 @@ for use as an alternative value field.</p>
|
|
|
2041
2142
|
</tr>
|
|
2042
2143
|
<tr>
|
|
2043
2144
|
<td class="col-md-4">
|
|
2044
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2145
|
+
<div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/slider/slider.component.ts:198</a></div>
|
|
2045
2146
|
</td>
|
|
2046
2147
|
</tr>
|
|
2047
2148
|
|
|
@@ -2075,7 +2176,7 @@ for use as an alternative value field.</p>
|
|
|
2075
2176
|
</tr>
|
|
2076
2177
|
<tr>
|
|
2077
2178
|
<td class="col-md-4">
|
|
2078
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2179
|
+
<div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/slider/slider.component.ts:194</a></div>
|
|
2079
2180
|
</td>
|
|
2080
2181
|
</tr>
|
|
2081
2182
|
|
|
@@ -2114,7 +2215,7 @@ for use as an alternative value field.</p>
|
|
|
2114
2215
|
</tr>
|
|
2115
2216
|
<tr>
|
|
2116
2217
|
<td class="col-md-4">
|
|
2117
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2218
|
+
<div class="io-line">Defined in <a href="" data-line="244" class="link-to-prism">src/slider/slider.component.ts:244</a></div>
|
|
2118
2219
|
</td>
|
|
2119
2220
|
</tr>
|
|
2120
2221
|
|
|
@@ -2153,7 +2254,7 @@ for use as an alternative value field.</p>
|
|
|
2153
2254
|
</tr>
|
|
2154
2255
|
<tr>
|
|
2155
2256
|
<td class="col-md-4">
|
|
2156
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2257
|
+
<div class="io-line">Defined in <a href="" data-line="236" class="link-to-prism">src/slider/slider.component.ts:236</a></div>
|
|
2157
2258
|
</td>
|
|
2158
2259
|
</tr>
|
|
2159
2260
|
|
|
@@ -2202,7 +2303,7 @@ for use as an alternative value field.</p>
|
|
|
2202
2303
|
</tr>
|
|
2203
2304
|
<tr>
|
|
2204
2305
|
<td class="col-md-4">
|
|
2205
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2306
|
+
<div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/slider/slider.component.ts:189</a></div>
|
|
2206
2307
|
</td>
|
|
2207
2308
|
</tr>
|
|
2208
2309
|
|
|
@@ -2242,7 +2343,7 @@ for use as an alternative value field.</p>
|
|
|
2242
2343
|
</tr>
|
|
2243
2344
|
<tr>
|
|
2244
2345
|
<td class="col-md-4">
|
|
2245
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2346
|
+
<div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/slider/slider.component.ts:197</a></div>
|
|
2246
2347
|
</td>
|
|
2247
2348
|
</tr>
|
|
2248
2349
|
|
|
@@ -2285,7 +2386,7 @@ for use as an alternative value field.</p>
|
|
|
2285
2386
|
</tr>
|
|
2286
2387
|
<tr>
|
|
2287
2388
|
<td class="col-md-4">
|
|
2288
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2389
|
+
<div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/slider/slider.component.ts:187</a></div>
|
|
2289
2390
|
</td>
|
|
2290
2391
|
</tr>
|
|
2291
2392
|
|
|
@@ -2319,7 +2420,7 @@ for use as an alternative value field.</p>
|
|
|
2319
2420
|
</tr>
|
|
2320
2421
|
<tr>
|
|
2321
2422
|
<td class="col-md-4">
|
|
2322
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2423
|
+
<div class="io-line">Defined in <a href="" data-line="192" class="link-to-prism">src/slider/slider.component.ts:192</a></div>
|
|
2323
2424
|
</td>
|
|
2324
2425
|
</tr>
|
|
2325
2426
|
|
|
@@ -2362,7 +2463,7 @@ for use as an alternative value field.</p>
|
|
|
2362
2463
|
</tr>
|
|
2363
2464
|
<tr>
|
|
2364
2465
|
<td class="col-md-4">
|
|
2365
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2466
|
+
<div class="io-line">Defined in <a href="" data-line="188" class="link-to-prism">src/slider/slider.component.ts:188</a></div>
|
|
2366
2467
|
</td>
|
|
2367
2468
|
</tr>
|
|
2368
2469
|
|
|
@@ -2391,7 +2492,7 @@ for use as an alternative value field.</p>
|
|
|
2391
2492
|
</tr>
|
|
2392
2493
|
<tr>
|
|
2393
2494
|
<td class="col-md-4">
|
|
2394
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2495
|
+
<div class="io-line">Defined in <a href="" data-line="158" class="link-to-prism">src/slider/slider.component.ts:158</a></div>
|
|
2395
2496
|
</td>
|
|
2396
2497
|
</tr>
|
|
2397
2498
|
|
|
@@ -2402,7 +2503,7 @@ for use as an alternative value field.</p>
|
|
|
2402
2503
|
</tr>
|
|
2403
2504
|
<tr>
|
|
2404
2505
|
<td class="col-md-4">
|
|
2405
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2506
|
+
<div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/slider/slider.component.ts:138</a></div>
|
|
2406
2507
|
</td>
|
|
2407
2508
|
</tr>
|
|
2408
2509
|
<tr>
|
|
@@ -2458,7 +2559,7 @@ for use as an alternative value field.</p>
|
|
|
2458
2559
|
</tr>
|
|
2459
2560
|
<tr>
|
|
2460
2561
|
<td class="col-md-4">
|
|
2461
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2562
|
+
<div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/slider/slider.component.ts:181</a></div>
|
|
2462
2563
|
</td>
|
|
2463
2564
|
</tr>
|
|
2464
2565
|
|
|
@@ -2469,7 +2570,7 @@ for use as an alternative value field.</p>
|
|
|
2469
2570
|
</tr>
|
|
2470
2571
|
<tr>
|
|
2471
2572
|
<td class="col-md-4">
|
|
2472
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2573
|
+
<div class="io-line">Defined in <a href="" data-line="172" class="link-to-prism">src/slider/slider.component.ts:172</a></div>
|
|
2473
2574
|
</td>
|
|
2474
2575
|
</tr>
|
|
2475
2576
|
<tr>
|
|
@@ -2523,7 +2624,8 @@ for use as an alternative value field.</p>
|
|
|
2523
2624
|
AfterViewInit,
|
|
2524
2625
|
OnDestroy,
|
|
2525
2626
|
ViewChild,
|
|
2526
|
-
ElementRef
|
|
2627
|
+
ElementRef,
|
|
2628
|
+
TemplateRef
|
|
2527
2629
|
} from "@angular/core";
|
|
2528
2630
|
import { fromEvent, Subscription } from "rxjs";
|
|
2529
2631
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
|
|
@@ -2574,57 +2676,61 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms&quo
|
|
|
2574
2676
|
selector: "ibm-slider",
|
|
2575
2677
|
template: `
|
|
2576
2678
|
<ng-container *ngIf="!skeleton; else skeletonTemplate">
|
|
2577
|
-
<label
|
|
2578
|
-
<ng-
|
|
2679
|
+
<label for="slider" class="bx--label">
|
|
2680
|
+
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
|
|
2681
|
+
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
|
|
2579
2682
|
</label>
|
|
2580
|
-
<div
|
|
2581
|
-
class="bx--
|
|
2582
|
-
|
|
2583
|
-
<
|
|
2584
|
-
#thumb
|
|
2585
|
-
class="bx--slider__thumb"
|
|
2586
|
-
tabindex="0"
|
|
2587
|
-
[ngStyle]="{'left.%': getFractionComplete() * 100}"
|
|
2588
|
-
(mousedown)="onMouseDown($event)"
|
|
2589
|
-
(keydown)="onKeyDown($event)">
|
|
2590
|
-
</div>
|
|
2591
|
-
<div
|
|
2592
|
-
#track
|
|
2593
|
-
class="bx--slider__track"
|
|
2594
|
-
(click)="onClick($event)">
|
|
2595
|
-
</div>
|
|
2683
|
+
<div class="bx--slider-container">
|
|
2684
|
+
<label [id]="bottomRangeId" class="bx--slider__range-label">
|
|
2685
|
+
<ng-content select="[minLabel]"></ng-content>
|
|
2686
|
+
</label>
|
|
2596
2687
|
<div
|
|
2597
|
-
class="bx--
|
|
2598
|
-
[
|
|
2688
|
+
class="bx--slider"
|
|
2689
|
+
[ngClass]="{'bx--slider--disabled': disabled}">
|
|
2690
|
+
<div
|
|
2691
|
+
#thumb
|
|
2692
|
+
class="bx--slider__thumb"
|
|
2693
|
+
tabindex="0"
|
|
2694
|
+
[ngStyle]="{'left.%': getFractionComplete() * 100}"
|
|
2695
|
+
(mousedown)="onMouseDown($event)"
|
|
2696
|
+
(keydown)="onKeyDown($event)">
|
|
2697
|
+
</div>
|
|
2698
|
+
<div
|
|
2699
|
+
#track
|
|
2700
|
+
class="bx--slider__track"
|
|
2701
|
+
(click)="onClick($event)">
|
|
2702
|
+
</div>
|
|
2703
|
+
<div
|
|
2704
|
+
class="bx--slider__filled-track"
|
|
2705
|
+
[ngStyle]="{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}">
|
|
2706
|
+
</div>
|
|
2707
|
+
<input
|
|
2708
|
+
#range
|
|
2709
|
+
aria-label="slider"
|
|
2710
|
+
class="bx--slider__input"
|
|
2711
|
+
type="range"
|
|
2712
|
+
[step]="step"
|
|
2713
|
+
[min]="min"
|
|
2714
|
+
[max]="max"
|
|
2715
|
+
[value]="value.toString()">
|
|
2599
2716
|
</div>
|
|
2600
|
-
<
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
type="range"
|
|
2605
|
-
[step]="step"
|
|
2606
|
-
[min]="min"
|
|
2607
|
-
[max]="max"
|
|
2608
|
-
[value]="value.toString()">
|
|
2717
|
+
<label [id]="topRangeId" class="bx--slider__range-label">
|
|
2718
|
+
<ng-content select="[maxLabel]"></ng-content>
|
|
2719
|
+
</label>
|
|
2720
|
+
<ng-content select="input"></ng-content>
|
|
2609
2721
|
</div>
|
|
2610
|
-
<label [id]="topRangeId" class="bx--slider__range-label">
|
|
2611
|
-
<ng-content select="[maxLabel]"></ng-content>
|
|
2612
|
-
</label>
|
|
2613
|
-
<ng-content select="input"></ng-content>
|
|
2614
2722
|
</ng-container>
|
|
2615
2723
|
|
|
2616
2724
|
<ng-template #skeletonTemplate>
|
|
2617
|
-
<
|
|
2618
|
-
|
|
2619
|
-
<
|
|
2620
|
-
|
|
2621
|
-
<div class="bx--
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
<div class="bx--slider__filled-track"></div>
|
|
2625
|
-
</div>
|
|
2626
|
-
<span class="bx--slider__range-label"></span>
|
|
2725
|
+
<label class="bx--label bx--skeleton"></label>
|
|
2726
|
+
<div class="bx--slider-container bx--skeleton">
|
|
2727
|
+
<span class="bx--slider__range-label"></span>
|
|
2728
|
+
<div class="bx--slider">
|
|
2729
|
+
<div class="bx--slider__thumb"></div>
|
|
2730
|
+
<div class="bx--slider__track"></div>
|
|
2731
|
+
<div class="bx--slider__filled-track"></div>
|
|
2627
2732
|
</div>
|
|
2733
|
+
<span class="bx--slider__range-label"></span>
|
|
2628
2734
|
</div>
|
|
2629
2735
|
</ng-template>
|
|
2630
2736
|
`,
|
|
@@ -2675,6 +2781,8 @@ export class Slider implements AfterViewInit, OnDestroy, ControlValueAccessor {
|
|
|
2675
2781
|
@Input() shiftMultiplier = 4;
|
|
2676
2782
|
/** Set to `true` for a loading slider */
|
|
2677
2783
|
@Input() skeleton = false;
|
|
2784
|
+
/** Sets the text inside the `label` tag */
|
|
2785
|
+
@Input() label: string | TemplateRef<any>;
|
|
2678
2786
|
/** Set to `true` for a slider without arrow key interactions. */
|
|
2679
2787
|
@Input() disableArrowKeys = false;
|
|
2680
2788
|
/** Disables the range visually and functionally */
|
|
@@ -2692,7 +2800,7 @@ export class Slider implements AfterViewInit, OnDestroy, ControlValueAccessor {
|
|
|
2692
2800
|
}
|
|
2693
2801
|
/** Emits every time a new value is selected */
|
|
2694
2802
|
@Output() valueChange: EventEmitter<number> = new EventEmitter();
|
|
2695
|
-
@HostBinding("class.bx--
|
|
2803
|
+
@HostBinding("class.bx--form-item") hostClass = true;
|
|
2696
2804
|
@ViewChild("thumb") thumb: ElementRef;
|
|
2697
2805
|
@ViewChild("track") track: ElementRef;
|
|
2698
2806
|
@ViewChild("range") range: ElementRef;
|
|
@@ -2882,6 +2990,10 @@ export class Slider implements AfterViewInit, OnDestroy, ControlValueAccessor {
|
|
|
2882
2990
|
this.incrementValue(multiplier);
|
|
2883
2991
|
}
|
|
2884
2992
|
}
|
|
2993
|
+
|
|
2994
|
+
public isTemplate(value) {
|
|
2995
|
+
return value instanceof TemplateRef;
|
|
2996
|
+
}
|
|
2885
2997
|
}
|
|
2886
2998
|
</code></pre>
|
|
2887
2999
|
</div>
|
|
@@ -2918,7 +3030,7 @@ export class Slider implements AfterViewInit, OnDestroy, ControlValueAccessor {
|
|
|
2918
3030
|
<script src="../js/libs/htmlparser.js"></script>
|
|
2919
3031
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
2920
3032
|
<script>
|
|
2921
|
-
var COMPONENT_TEMPLATE = '<div><ng-container *ngIf="!skeleton; else skeletonTemplate"> <label [id]="bottomRangeId" class="bx--slider__range-label">
|
|
3033
|
+
var COMPONENT_TEMPLATE = '<div><ng-container *ngIf="!skeleton; else skeletonTemplate"> <label for="slider" class="bx--label"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div class="bx--slider-container"> <label [id]="bottomRangeId" class="bx--slider__range-label"> <ng-content select="[minLabel]"></ng-content> </label> <div class="bx--slider" [ngClass]="{\'bx--slider--disabled\': disabled}"> <div #thumb class="bx--slider__thumb" tabindex="0" [ngStyle]="{\'left.%\': getFractionComplete() * 100}" (mousedown)="onMouseDown($event)" (keydown)="onKeyDown($event)"> </div> <div #track class="bx--slider__track" (click)="onClick($event)"> </div> <div class="bx--slider__filled-track" [ngStyle]="{transform: \'translate(0%, -50%)\' + scaleX(getFractionComplete())}"> </div> <input #range aria-label="slider" class="bx--slider__input" type="range" [step]="step" [min]="min" [max]="max" [value]="value.toString()"> </div> <label [id]="topRangeId" class="bx--slider__range-label"> <ng-content select="[maxLabel]"></ng-content> </label> <ng-content select="input"></ng-content> </div></ng-container><ng-template #skeletonTemplate> <label class="bx--label bx--skeleton"></label> <div class="bx--slider-container bx--skeleton"> <span class="bx--slider__range-label"></span> <div class="bx--slider"> <div class="bx--slider__thumb"></div> <div class="bx--slider__track"></div> <div class="bx--slider__filled-track"></div> </div> <span class="bx--slider__range-label"></span> </div></ng-template> </div>'
|
|
2922
3034
|
var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Documentation', 'selector': 'ibm-documentation'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'Number', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Panel', 'selector': 'ibm-panel'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProductSwitcher', 'selector': 'ibm-product-switcher'},{'name': 'ProductSwitcherItem', 'selector': 'ibm-product-switcher-item'},{'name': 'ProductSwitcherList', 'selector': 'ibm-product-switcher-list'},{'name': 'ProductSwitcherListItem', 'selector': 'ibm-product-switcher-list-item'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableContainer', 'selector': 'ibm-table-container'},{'name': 'TableHeader', 'selector': 'ibm-table-header'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
|
|
2923
3035
|
var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TableHeaderDescription', 'selector': '[ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
|
|
2924
3036
|
var ACTUAL_COMPONENT = {'name': 'Slider'};
|