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.
Files changed (127) hide show
  1. package/bundle/carbon-angular.umd.js +2 -2
  2. package/bundle/carbon-angular.umd.js.map +1 -1
  3. package/checkbox/checkbox.component.d.ts +4 -0
  4. package/checkbox/checkbox.component.js +6 -1
  5. package/checkbox/checkbox.component.js.map +1 -1
  6. package/checkbox/checkbox.component.metadata.json +1 -1
  7. package/checkbox/checkbox.component.ngfactory.js +2 -2
  8. package/checkbox/checkbox.component.ngfactory.js.map +1 -1
  9. package/checkbox/checkbox.component.ngsummary.json +1 -1
  10. package/checkbox/checkbox.module.ngfactory.js.map +1 -1
  11. package/combobox/combobox.component.d.ts +14 -4
  12. package/combobox/combobox.component.js +12 -9
  13. package/combobox/combobox.component.js.map +1 -1
  14. package/combobox/combobox.component.metadata.json +1 -1
  15. package/combobox/combobox.component.ngfactory.js +15 -8
  16. package/combobox/combobox.component.ngfactory.js.map +1 -1
  17. package/combobox/combobox.component.ngsummary.json +1 -1
  18. package/combobox/combobox.module.ngfactory.js.map +1 -1
  19. package/content-switcher/content-switcher.component.d.ts +1 -0
  20. package/content-switcher/content-switcher.component.js +18 -5
  21. package/content-switcher/content-switcher.component.js.map +1 -1
  22. package/content-switcher/content-switcher.component.metadata.json +1 -1
  23. package/content-switcher/content-switcher.component.ngfactory.js +2 -2
  24. package/content-switcher/content-switcher.component.ngfactory.js.map +1 -1
  25. package/content-switcher/content-switcher.component.ngsummary.json +1 -1
  26. package/content-switcher/content-switcher.module.ngfactory.js.map +1 -1
  27. package/datepicker/datepicker.component.d.ts +1 -1
  28. package/datepicker/datepicker.component.js.map +1 -1
  29. package/datepicker-input/datepicker-input.component.d.ts +2 -2
  30. package/datepicker-input/datepicker-input.component.js +1 -1
  31. package/datepicker-input/datepicker-input.component.js.map +1 -1
  32. package/datepicker-input/datepicker-input.component.metadata.json +1 -1
  33. package/datepicker-input/datepicker-input.component.ngfactory.js +14 -11
  34. package/datepicker-input/datepicker-input.component.ngfactory.js.map +1 -1
  35. package/datepicker-input/datepicker-input.module.ngfactory.js.map +1 -1
  36. package/docs/documentation/classes/CheckboxChange.html +7 -1
  37. package/docs/documentation/classes/NumberChange.html +11 -7
  38. package/docs/documentation/classes/ToggleChange.html +13 -5
  39. package/docs/documentation/components/Checkbox.html +74 -41
  40. package/docs/documentation/components/ComboBox.html +366 -184
  41. package/docs/documentation/components/ContentSwitcher.html +136 -12
  42. package/docs/documentation/components/DatePicker.html +2 -2
  43. package/docs/documentation/components/DatePickerInput.html +24 -22
  44. package/docs/documentation/components/Dropdown.html +335 -62
  45. package/docs/documentation/components/File.html +10 -6
  46. package/docs/documentation/components/FileUploader.html +26 -24
  47. package/docs/documentation/components/HeaderItem.html +2 -2
  48. package/docs/documentation/components/Label.html +3 -3
  49. package/docs/documentation/components/Number.html +57 -41
  50. package/docs/documentation/components/Select.html +55 -42
  51. package/docs/documentation/components/Slider.html +254 -142
  52. package/docs/documentation/components/TimePicker.html +103 -17
  53. package/docs/documentation/components/TimePickerSelect.html +65 -37
  54. package/docs/documentation/components/Toggle.html +168 -55
  55. package/docs/documentation/coverage.html +20 -20
  56. package/docs/documentation/js/search/search_index.js +2 -2
  57. package/docs/storybook/iframe.html +3 -3
  58. package/docs/storybook/{main.56858f6c72e70f546e4c.bundle.js → main.e71ec014aa45dc1d6679.bundle.js} +194 -104
  59. package/docs/storybook/main.e71ec014aa45dc1d6679.bundle.js.map +1 -0
  60. package/docs/storybook/{runtime~main.56858f6c72e70f546e4c.bundle.js → runtime~main.e71ec014aa45dc1d6679.bundle.js} +1 -1
  61. package/docs/storybook/{runtime~main.56858f6c72e70f546e4c.bundle.js.map → runtime~main.e71ec014aa45dc1d6679.bundle.js.map} +1 -1
  62. package/docs/storybook/{vendors~main.56858f6c72e70f546e4c.bundle.js → vendors~main.e71ec014aa45dc1d6679.bundle.js} +1 -1
  63. package/docs/storybook/{vendors~main.56858f6c72e70f546e4c.bundle.js.map → vendors~main.e71ec014aa45dc1d6679.bundle.js.map} +1 -1
  64. package/dropdown/dropdown.component.d.ts +12 -0
  65. package/dropdown/dropdown.component.js +12 -2
  66. package/dropdown/dropdown.component.js.map +1 -1
  67. package/dropdown/dropdown.component.metadata.json +1 -1
  68. package/dropdown/dropdown.component.ngfactory.js +18 -11
  69. package/dropdown/dropdown.component.ngfactory.js.map +1 -1
  70. package/dropdown/dropdown.component.ngsummary.json +1 -1
  71. package/dropdown/dropdown.module.ngfactory.js.map +1 -1
  72. package/file-uploader/file-uploader.component.js +1 -1
  73. package/file-uploader/file-uploader.component.js.map +1 -1
  74. package/file-uploader/file-uploader.component.metadata.json +1 -1
  75. package/file-uploader/file-uploader.component.ngfactory.js +1 -1
  76. package/file-uploader/file-uploader.component.ngfactory.js.map +1 -1
  77. package/file-uploader/file.component.js +1 -1
  78. package/file-uploader/file.component.js.map +1 -1
  79. package/file-uploader/file.component.metadata.json +1 -1
  80. package/file-uploader/file.component.ngfactory.js +7 -1
  81. package/file-uploader/file.component.ngfactory.js.map +1 -1
  82. package/input/label.component.d.ts +1 -1
  83. package/input/label.component.js.map +1 -1
  84. package/number-input/number.component.d.ts +3 -3
  85. package/number-input/number.component.js +1 -1
  86. package/number-input/number.component.js.map +1 -1
  87. package/number-input/number.component.metadata.json +1 -1
  88. package/number-input/number.component.ngfactory.js +25 -21
  89. package/number-input/number.component.ngfactory.js.map +1 -1
  90. package/number-input/number.module.ngfactory.js.map +1 -1
  91. package/package.json +1 -1
  92. package/select/select.component.d.ts +3 -3
  93. package/select/select.component.js +4 -8
  94. package/select/select.component.js.map +1 -1
  95. package/select/select.component.metadata.json +1 -1
  96. package/select/select.component.ngfactory.js +21 -15
  97. package/select/select.component.ngfactory.js.map +1 -1
  98. package/select/select.component.ngsummary.json +1 -1
  99. package/slider/slider.component.d.ts +4 -1
  100. package/slider/slider.component.js +7 -3
  101. package/slider/slider.component.js.map +1 -1
  102. package/slider/slider.component.metadata.json +1 -1
  103. package/slider/slider.component.ngfactory.js +10 -7
  104. package/slider/slider.component.ngfactory.js.map +1 -1
  105. package/slider/slider.component.ngsummary.json +1 -1
  106. package/timepicker/timepicker.component.d.ts +3 -2
  107. package/timepicker/timepicker.component.js +5 -2
  108. package/timepicker/timepicker.component.js.map +1 -1
  109. package/timepicker/timepicker.component.metadata.json +1 -1
  110. package/timepicker/timepicker.component.ngfactory.js +4 -1
  111. package/timepicker/timepicker.component.ngfactory.js.map +1 -1
  112. package/timepicker/timepicker.component.ngsummary.json +1 -1
  113. package/timepicker-select/timepicker-select.component.d.ts +1 -0
  114. package/timepicker-select/timepicker-select.component.js +1 -0
  115. package/timepicker-select/timepicker-select.component.js.map +1 -1
  116. package/timepicker-select/timepicker-select.component.metadata.json +1 -1
  117. package/timepicker-select/timepicker-select.component.ngsummary.json +1 -1
  118. package/toggle/toggle.component.d.ts +3 -2
  119. package/toggle/toggle.component.js +5 -2
  120. package/toggle/toggle.component.js.map +1 -1
  121. package/toggle/toggle.component.metadata.json +1 -1
  122. package/toggle/toggle.component.ngfactory.js +7 -4
  123. package/toggle/toggle.component.ngfactory.js.map +1 -1
  124. package/toggle/toggle.component.ngsummary.json +1 -1
  125. package/ui-shell/header/header-item.component.js +1 -1
  126. package/ui-shell/header/header-item.component.js.map +1 -1
  127. package/docs/storybook/main.56858f6c72e70f546e4c.bundle.js.map +0 -1
@@ -119,7 +119,16 @@
119
119
 
120
120
  <tr>
121
121
  <td class="col-md-3">template</td>
122
- <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;div
122
+ <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;label [for]&#x3D;&quot;id&quot; class&#x3D;&quot;bx--label&quot;&gt;
123
+ &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(label)&quot;&gt;{{label}}&lt;/ng-container&gt;
124
+ &lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
125
+ &lt;/label&gt;
126
+ &lt;div *ngIf&#x3D;&quot;helperText&quot; class&#x3D;&quot;bx--form__helper-text&quot;&gt;
127
+ &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(helperText)&quot;&gt;{{helperText}}&lt;/ng-container&gt;
128
+ &lt;ng-template *ngIf&#x3D;&quot;isTemplate(helperText)&quot; [ngTemplateOutlet]&#x3D;&quot;helperText&quot;&gt;&lt;/ng-template&gt;
129
+ &lt;/div&gt;
130
+ &lt;div
131
+ [id]&#x3D;&quot;id&quot;
123
132
  class&#x3D;&quot;bx--dropdown bx--list-box&quot;
124
133
  [ngClass]&#x3D;&quot;{
125
134
  &#x27;bx--dropdown--light&#x27;: theme &#x3D;&#x3D;&#x3D; &#x27;light&#x27;,
@@ -207,6 +216,10 @@
207
216
  <li>
208
217
  <a href="#dropdownButton">dropdownButton</a>
209
218
  </li>
219
+ <li>
220
+ <span class="modifier">Static</span>
221
+ <a href="#dropdownCount">dropdownCount</a>
222
+ </li>
210
223
  <li>
211
224
  <a href="#dropdownMenu">dropdownMenu</a>
212
225
  </li>
@@ -295,6 +308,10 @@
295
308
  <li>
296
309
  <a href="#isRenderString">isRenderString</a>
297
310
  </li>
311
+ <li>
312
+ <span class="modifier">Public</span>
313
+ <a href="#isTemplate">isTemplate</a>
314
+ </li>
298
315
  <li>
299
316
  <a href="#isVisibleInContainer">isVisibleInContainer</a>
300
317
  </li>
@@ -358,9 +375,18 @@
358
375
  <li>
359
376
  <a href="#displayValue">displayValue</a>
360
377
  </li>
378
+ <li>
379
+ <a href="#helperText">helperText</a>
380
+ </li>
381
+ <li>
382
+ <a href="#id">id</a>
383
+ </li>
361
384
  <li>
362
385
  <a href="#inline">inline</a>
363
386
  </li>
387
+ <li>
388
+ <a href="#label">label</a>
389
+ </li>
364
390
  <li>
365
391
  <a href="#menuButtonLabel">menuButtonLabel</a>
366
392
  </li>
@@ -413,6 +439,20 @@
413
439
  </td>
414
440
  </tr>
415
441
 
442
+ <tr>
443
+ <td class="col-md-4">
444
+ <h6><b>HostBindings</b></h6>
445
+ </td>
446
+ </tr>
447
+ <tr>
448
+ <td class="col-md-4">
449
+ <ul class="index-list">
450
+ <li>
451
+ <a href="#class.bx--dropdown__wrapper">class.bx--dropdown__wrapper</a>
452
+ </li>
453
+ </ul>
454
+ </td>
455
+ </tr>
416
456
 
417
457
  <tr>
418
458
  <td class="col-md-4">
@@ -458,7 +498,7 @@
458
498
  </tr>
459
499
  <tr>
460
500
  <td class="col-md-4">
461
- <div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/dropdown/dropdown.component.ts:231</a></div>
501
+ <div class="io-line">Defined in <a href="" data-line="252" class="link-to-prism">src/dropdown/dropdown.component.ts:252</a></div>
462
502
  </td>
463
503
  </tr>
464
504
 
@@ -541,7 +581,7 @@
541
581
  </tr>
542
582
  <tr>
543
583
  <td class="col-md-2" colspan="2">
544
- <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/dropdown/dropdown.component.ts:164</a></div>
584
+ <div class="io-line">Defined in <a href="" data-line="184" class="link-to-prism">src/dropdown/dropdown.component.ts:184</a></div>
545
585
  </td>
546
586
  </tr>
547
587
  </tbody>
@@ -561,7 +601,7 @@ Set to <code>true</code> if the <code>Dropdown</code> is to be appended to the D
561
601
  </tr>
562
602
  <tr>
563
603
  <td class="col-md-2" colspan="2">
564
- <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/dropdown/dropdown.component.ts:151</a></div>
604
+ <div class="io-line">Defined in <a href="" data-line="171" class="link-to-prism">src/dropdown/dropdown.component.ts:171</a></div>
565
605
  </td>
566
606
  </tr>
567
607
  </tbody>
@@ -583,7 +623,7 @@ Set to <code>true</code> if the <code>Dropdown</code> is to be appended to the D
583
623
  </tr>
584
624
  <tr>
585
625
  <td class="col-md-2" colspan="2">
586
- <div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/dropdown/dropdown.component.ts:146</a></div>
626
+ <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/dropdown/dropdown.component.ts:166</a></div>
587
627
  </td>
588
628
  </tr>
589
629
  </tbody>
@@ -605,7 +645,7 @@ Set to <code>true</code> if the <code>Dropdown</code> is to be appended to the D
605
645
  </tr>
606
646
  <tr>
607
647
  <td class="col-md-2" colspan="2">
608
- <div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/dropdown/dropdown.component.ts:134</a></div>
648
+ <div class="io-line">Defined in <a href="" data-line="154" class="link-to-prism">src/dropdown/dropdown.component.ts:154</a></div>
609
649
  </td>
610
650
  </tr>
611
651
  </tbody>
@@ -631,7 +671,50 @@ Set to <code>true</code> if the <code>Dropdown</code> is to be appended to the D
631
671
  </tr>
632
672
  <tr>
633
673
  <td class="col-md-2" colspan="2">
634
- <div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/dropdown/dropdown.component.ts:117</a></div>
674
+ <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/dropdown/dropdown.component.ts:137</a></div>
675
+ </td>
676
+ </tr>
677
+ </tbody>
678
+ </table>
679
+ <table class="table table-sm table-bordered">
680
+ <tbody>
681
+ <tr>
682
+ <td class="col-md-2">
683
+ <a name="helperText"></a>
684
+ <code>helperText</code>
685
+ </td>
686
+ <td class="col-md-10">
687
+ <div><p>Sets the optional helper text.</p>
688
+ </div>
689
+ <p>
690
+ <em>Type :</em> <code>string | TemplateRef&lt;any&gt;</code>
691
+
692
+ </p>
693
+ </td>
694
+ </tr>
695
+ <tr>
696
+ <td class="col-md-2" colspan="2">
697
+ <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/dropdown/dropdown.component.ts:129</a></div>
698
+ </td>
699
+ </tr>
700
+ </tbody>
701
+ </table>
702
+ <table class="table table-sm table-bordered">
703
+ <tbody>
704
+ <tr>
705
+ <td class="col-md-2">
706
+ <a name="id"></a>
707
+ <code>id</code>
708
+ </td>
709
+ <td class="col-md-10">
710
+ <p>
711
+ <em>Default value : </em><code>&#x60;dropdown-${Dropdown.dropdownCount++}&#x60;</code>
712
+ </p>
713
+ </td>
714
+ </tr>
715
+ <tr>
716
+ <td class="col-md-2" colspan="2">
717
+ <div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/dropdown/dropdown.component.ts:121</a></div>
635
718
  </td>
636
719
  </tr>
637
720
  </tbody>
@@ -653,7 +736,30 @@ Set to <code>true</code> if the <code>Dropdown</code> is to be appended to the D
653
736
  </tr>
654
737
  <tr>
655
738
  <td class="col-md-2" colspan="2">
656
- <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/dropdown/dropdown.component.ts:142</a></div>
739
+ <div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/dropdown/dropdown.component.ts:162</a></div>
740
+ </td>
741
+ </tr>
742
+ </tbody>
743
+ </table>
744
+ <table class="table table-sm table-bordered">
745
+ <tbody>
746
+ <tr>
747
+ <td class="col-md-2">
748
+ <a name="label"></a>
749
+ <code>label</code>
750
+ </td>
751
+ <td class="col-md-10">
752
+ <div><p>Label for the dropdown.</p>
753
+ </div>
754
+ <p>
755
+ <em>Type :</em> <code>string | TemplateRef&lt;any&gt;</code>
756
+
757
+ </p>
758
+ </td>
759
+ </tr>
760
+ <tr>
761
+ <td class="col-md-2" colspan="2">
762
+ <div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/dropdown/dropdown.component.ts:125</a></div>
657
763
  </td>
658
764
  </tr>
659
765
  </tbody>
@@ -676,7 +782,7 @@ Defaults to the <code>DROPDOWN.OPEN</code> value from the i18n service.</p>
676
782
  </tr>
677
783
  <tr>
678
784
  <td class="col-md-2" colspan="2">
679
- <div class="io-line">Defined in <a href="" data-line="178" class="link-to-prism">src/dropdown/dropdown.component.ts:178</a></div>
785
+ <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/dropdown/dropdown.component.ts:198</a></div>
680
786
  </td>
681
787
  </tr>
682
788
  </tbody>
@@ -698,7 +804,7 @@ Defaults to the <code>DROPDOWN.OPEN</code> value from the i18n service.</p>
698
804
  </tr>
699
805
  <tr>
700
806
  <td class="col-md-2" colspan="2">
701
- <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/dropdown/dropdown.component.ts:113</a></div>
807
+ <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/dropdown/dropdown.component.ts:133</a></div>
702
808
  </td>
703
809
  </tr>
704
810
  </tbody>
@@ -722,7 +828,7 @@ Used to trigger closing the dropdown if it scrolls outside of the viewport of th
722
828
  </tr>
723
829
  <tr>
724
830
  <td class="col-md-2" colspan="2">
725
- <div class="io-line">Defined in <a href="" data-line="169" class="link-to-prism">src/dropdown/dropdown.component.ts:169</a></div>
831
+ <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/dropdown/dropdown.component.ts:189</a></div>
726
832
  </td>
727
833
  </tr>
728
834
  </tbody>
@@ -745,7 +851,7 @@ Defaults to the <code>DROPDOWN.SELECTED</code> value from the i18n service.</p>
745
851
  </tr>
746
852
  <tr>
747
853
  <td class="col-md-2" colspan="2">
748
- <div class="io-line">Defined in <a href="" data-line="183" class="link-to-prism">src/dropdown/dropdown.component.ts:183</a></div>
854
+ <div class="io-line">Defined in <a href="" data-line="203" class="link-to-prism">src/dropdown/dropdown.component.ts:203</a></div>
749
855
  </td>
750
856
  </tr>
751
857
  </tbody>
@@ -771,7 +877,7 @@ Defaults to the <code>DROPDOWN.SELECTED</code> value from the i18n service.</p>
771
877
  </tr>
772
878
  <tr>
773
879
  <td class="col-md-2" colspan="2">
774
- <div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/dropdown/dropdown.component.ts:121</a></div>
880
+ <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/dropdown/dropdown.component.ts:141</a></div>
775
881
  </td>
776
882
  </tr>
777
883
  </tbody>
@@ -793,7 +899,7 @@ Defaults to the <code>DROPDOWN.SELECTED</code> value from the i18n service.</p>
793
899
  </tr>
794
900
  <tr>
795
901
  <td class="col-md-2" colspan="2">
796
- <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/dropdown/dropdown.component.ts:138</a></div>
902
+ <div class="io-line">Defined in <a href="" data-line="158" class="link-to-prism">src/dropdown/dropdown.component.ts:158</a></div>
797
903
  </td>
798
904
  </tr>
799
905
  </tbody>
@@ -819,7 +925,7 @@ Defaults to the <code>DROPDOWN.SELECTED</code> value from the i18n service.</p>
819
925
  </tr>
820
926
  <tr>
821
927
  <td class="col-md-2" colspan="2">
822
- <div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/dropdown/dropdown.component.ts:130</a></div>
928
+ <div class="io-line">Defined in <a href="" data-line="150" class="link-to-prism">src/dropdown/dropdown.component.ts:150</a></div>
823
929
  </td>
824
930
  </tr>
825
931
  </tbody>
@@ -846,7 +952,7 @@ item selection.</p>
846
952
  </tr>
847
953
  <tr>
848
954
  <td class="col-md-2" colspan="2">
849
- <div class="io-line">Defined in <a href="" data-line="126" class="link-to-prism">src/dropdown/dropdown.component.ts:126</a></div>
955
+ <div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/dropdown/dropdown.component.ts:146</a></div>
850
956
  </td>
851
957
  </tr>
852
958
  </tbody>
@@ -869,7 +975,7 @@ item selection.</p>
869
975
  </tr>
870
976
  <tr>
871
977
  <td class="col-md-2" colspan="2">
872
- <div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/dropdown/dropdown.component.ts:173</a></div>
978
+ <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/dropdown/dropdown.component.ts:193</a></div>
873
979
  </td>
874
980
  </tr>
875
981
  </tbody>
@@ -893,7 +999,7 @@ item selection.</p>
893
999
  </tr>
894
1000
  <tr>
895
1001
  <td class="col-md-2" colspan="2">
896
- <div class="io-line">Defined in <a href="" data-line="195" class="link-to-prism">src/dropdown/dropdown.component.ts:195</a></div>
1002
+ <div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/dropdown/dropdown.component.ts:215</a></div>
897
1003
  </td>
898
1004
  </tr>
899
1005
  </tbody>
@@ -914,7 +1020,7 @@ item selection.</p>
914
1020
  </tr>
915
1021
  <tr>
916
1022
  <td class="col-md-2" colspan="2">
917
- <div class="io-line">Defined in <a href="" data-line="191" class="link-to-prism">src/dropdown/dropdown.component.ts:191</a></div>
1023
+ <div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/dropdown/dropdown.component.ts:211</a></div>
918
1024
  </td>
919
1025
  </tr>
920
1026
  </tbody>
@@ -935,12 +1041,47 @@ item selection.</p>
935
1041
  </tr>
936
1042
  <tr>
937
1043
  <td class="col-md-2" colspan="2">
938
- <div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/dropdown/dropdown.component.ts:187</a></div>
1044
+ <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/dropdown/dropdown.component.ts:207</a></div>
939
1045
  </td>
940
1046
  </tr>
941
1047
  </tbody>
942
1048
  </table>
943
1049
  </section>
1050
+ <section>
1051
+ <h3>HostBindings</h3> <table class="table table-sm table-bordered">
1052
+ <tbody>
1053
+ <tr>
1054
+ <td class="col-md-4">
1055
+ <a name="class.bx--dropdown__wrapper"></a>
1056
+ <span class="name">
1057
+ <b>
1058
+ class.bx--dropdown__wrapper
1059
+ </b>
1060
+ <a href="#class.bx--dropdown__wrapper"><span class="icon ion-ios-link"></span></a>
1061
+ </span>
1062
+ </td>
1063
+ </tr>
1064
+ <tr>
1065
+ <td class="col-md-4">
1066
+ <code>class.bx--dropdown__wrapper: <code></code>
1067
+ </code>
1068
+ </td>
1069
+ </tr>
1070
+ <tr>
1071
+ <td class="col-md-4">
1072
+ <i>Default value : </i><code>true</code>
1073
+ </td>
1074
+ </tr>
1075
+ <tr>
1076
+ <td class="col-md-4">
1077
+ <div class="io-line">Defined in <a href="" data-line="230" class="link-to-prism">src/dropdown/dropdown.component.ts:230</a></div>
1078
+ </td>
1079
+ </tr>
1080
+
1081
+
1082
+ </tbody>
1083
+ </table>
1084
+ </section>
944
1085
 
945
1086
  <section>
946
1087
  <h3>HostListeners</h3> <table class="table table-sm table-bordered">
@@ -970,7 +1111,7 @@ item selection.</p>
970
1111
 
971
1112
  <tr>
972
1113
  <td class="col-md-4">
973
- <div class="io-line">Defined in <a href="" data-line="324" class="link-to-prism">src/dropdown/dropdown.component.ts:324</a></div>
1114
+ <div class="io-line">Defined in <a href="" data-line="345" class="link-to-prism">src/dropdown/dropdown.component.ts:345</a></div>
974
1115
  </td>
975
1116
  </tr>
976
1117
 
@@ -1013,7 +1154,7 @@ item selection.</p>
1013
1154
 
1014
1155
  <tr>
1015
1156
  <td class="col-md-4">
1016
- <div class="io-line">Defined in <a href="" data-line="480" class="link-to-prism">src/dropdown/dropdown.component.ts:480</a></div>
1157
+ <div class="io-line">Defined in <a href="" data-line="501" class="link-to-prism">src/dropdown/dropdown.component.ts:501</a></div>
1017
1158
  </td>
1018
1159
  </tr>
1019
1160
 
@@ -1053,7 +1194,7 @@ item selection.</p>
1053
1194
 
1054
1195
  <tr>
1055
1196
  <td class="col-md-4">
1056
- <div class="io-line">Defined in <a href="" data-line="472" class="link-to-prism">src/dropdown/dropdown.component.ts:472</a></div>
1197
+ <div class="io-line">Defined in <a href="" data-line="493" class="link-to-prism">src/dropdown/dropdown.component.ts:493</a></div>
1057
1198
  </td>
1058
1199
  </tr>
1059
1200
 
@@ -1093,7 +1234,7 @@ item selection.</p>
1093
1234
 
1094
1235
  <tr>
1095
1236
  <td class="col-md-4">
1096
- <div class="io-line">Defined in <a href="" data-line="451" class="link-to-prism">src/dropdown/dropdown.component.ts:451</a></div>
1237
+ <div class="io-line">Defined in <a href="" data-line="472" class="link-to-prism">src/dropdown/dropdown.component.ts:472</a></div>
1097
1238
  </td>
1098
1239
  </tr>
1099
1240
 
@@ -1164,7 +1305,7 @@ item selection.</p>
1164
1305
 
1165
1306
  <tr>
1166
1307
  <td class="col-md-4">
1167
- <div class="io-line">Defined in <a href="" data-line="431" class="link-to-prism">src/dropdown/dropdown.component.ts:431</a></div>
1308
+ <div class="io-line">Defined in <a href="" data-line="452" class="link-to-prism">src/dropdown/dropdown.component.ts:452</a></div>
1168
1309
  </td>
1169
1310
  </tr>
1170
1311
 
@@ -1202,7 +1343,7 @@ item selection.</p>
1202
1343
 
1203
1344
  <tr>
1204
1345
  <td class="col-md-4">
1205
- <div class="io-line">Defined in <a href="" data-line="435" class="link-to-prism">src/dropdown/dropdown.component.ts:435</a></div>
1346
+ <div class="io-line">Defined in <a href="" data-line="456" class="link-to-prism">src/dropdown/dropdown.component.ts:456</a></div>
1206
1347
  </td>
1207
1348
  </tr>
1208
1349
 
@@ -1269,7 +1410,7 @@ item selection.</p>
1269
1410
 
1270
1411
  <tr>
1271
1412
  <td class="col-md-4">
1272
- <div class="io-line">Defined in <a href="" data-line="443" class="link-to-prism">src/dropdown/dropdown.component.ts:443</a></div>
1413
+ <div class="io-line">Defined in <a href="" data-line="464" class="link-to-prism">src/dropdown/dropdown.component.ts:464</a></div>
1273
1414
  </td>
1274
1415
  </tr>
1275
1416
 
@@ -1334,7 +1475,7 @@ item selection.</p>
1334
1475
 
1335
1476
  <tr>
1336
1477
  <td class="col-md-4">
1337
- <div class="io-line">Defined in <a href="" data-line="563" class="link-to-prism">src/dropdown/dropdown.component.ts:563</a></div>
1478
+ <div class="io-line">Defined in <a href="" data-line="584" class="link-to-prism">src/dropdown/dropdown.component.ts:584</a></div>
1338
1479
  </td>
1339
1480
  </tr>
1340
1481
 
@@ -1374,7 +1515,7 @@ item selection.</p>
1374
1515
 
1375
1516
  <tr>
1376
1517
  <td class="col-md-4">
1377
- <div class="io-line">Defined in <a href="" data-line="417" class="link-to-prism">src/dropdown/dropdown.component.ts:417</a></div>
1518
+ <div class="io-line">Defined in <a href="" data-line="438" class="link-to-prism">src/dropdown/dropdown.component.ts:438</a></div>
1378
1519
  </td>
1379
1520
  </tr>
1380
1521
 
@@ -1412,7 +1553,7 @@ item selection.</p>
1412
1553
 
1413
1554
  <tr>
1414
1555
  <td class="col-md-4">
1415
- <div class="io-line">Defined in <a href="" data-line="356" class="link-to-prism">src/dropdown/dropdown.component.ts:356</a></div>
1556
+ <div class="io-line">Defined in <a href="" data-line="377" class="link-to-prism">src/dropdown/dropdown.component.ts:377</a></div>
1416
1557
  </td>
1417
1558
  </tr>
1418
1559
 
@@ -1477,7 +1618,7 @@ item selection.</p>
1477
1618
 
1478
1619
  <tr>
1479
1620
  <td class="col-md-4">
1480
- <div class="io-line">Defined in <a href="" data-line="534" class="link-to-prism">src/dropdown/dropdown.component.ts:534</a></div>
1621
+ <div class="io-line">Defined in <a href="" data-line="555" class="link-to-prism">src/dropdown/dropdown.component.ts:555</a></div>
1481
1622
  </td>
1482
1623
  </tr>
1483
1624
 
@@ -1517,7 +1658,7 @@ item selection.</p>
1517
1658
 
1518
1659
  <tr>
1519
1660
  <td class="col-md-4">
1520
- <div class="io-line">Defined in <a href="" data-line="376" class="link-to-prism">src/dropdown/dropdown.component.ts:376</a></div>
1661
+ <div class="io-line">Defined in <a href="" data-line="397" class="link-to-prism">src/dropdown/dropdown.component.ts:397</a></div>
1521
1662
  </td>
1522
1663
  </tr>
1523
1664
 
@@ -1559,7 +1700,7 @@ otherwise the placeholder will be returned.</p>
1559
1700
 
1560
1701
  <tr>
1561
1702
  <td class="col-md-4">
1562
- <div class="io-line">Defined in <a href="" data-line="397" class="link-to-prism">src/dropdown/dropdown.component.ts:397</a></div>
1703
+ <div class="io-line">Defined in <a href="" data-line="418" class="link-to-prism">src/dropdown/dropdown.component.ts:418</a></div>
1563
1704
  </td>
1564
1705
  </tr>
1565
1706
 
@@ -1597,7 +1738,7 @@ otherwise the placeholder will be returned.</p>
1597
1738
 
1598
1739
  <tr>
1599
1740
  <td class="col-md-4">
1600
- <div class="io-line">Defined in <a href="" data-line="411" class="link-to-prism">src/dropdown/dropdown.component.ts:411</a></div>
1741
+ <div class="io-line">Defined in <a href="" data-line="432" class="link-to-prism">src/dropdown/dropdown.component.ts:432</a></div>
1601
1742
  </td>
1602
1743
  </tr>
1603
1744
 
@@ -1635,7 +1776,7 @@ otherwise the placeholder will be returned.</p>
1635
1776
 
1636
1777
  <tr>
1637
1778
  <td class="col-md-4">
1638
- <div class="io-line">Defined in <a href="" data-line="393" class="link-to-prism">src/dropdown/dropdown.component.ts:393</a></div>
1779
+ <div class="io-line">Defined in <a href="" data-line="414" class="link-to-prism">src/dropdown/dropdown.component.ts:414</a></div>
1639
1780
  </td>
1640
1781
  </tr>
1641
1782
 
@@ -1651,6 +1792,73 @@ otherwise the placeholder will be returned.</p>
1651
1792
  </tr>
1652
1793
  </tbody>
1653
1794
  </table>
1795
+ <table class="table table-sm table-bordered">
1796
+ <tbody>
1797
+ <tr>
1798
+ <td class="col-md-4">
1799
+ <a name="isTemplate"></a>
1800
+ <span class="name">
1801
+ <b>
1802
+ <span class="modifier">Public</span>
1803
+ isTemplate
1804
+ </b>
1805
+ <a href="#isTemplate"><span class="icon ion-ios-link"></span></a>
1806
+ </span>
1807
+ </td>
1808
+ </tr>
1809
+ <tr>
1810
+ <td class="col-md-4">
1811
+ <span class="modifier-icon icon ion-ios-reset"></span>
1812
+ <code>isTemplate(value)</code>
1813
+ </td>
1814
+ </tr>
1815
+
1816
+
1817
+ <tr>
1818
+ <td class="col-md-4">
1819
+ <div class="io-line">Defined in <a href="" data-line="637" class="link-to-prism">src/dropdown/dropdown.component.ts:637</a></div>
1820
+ </td>
1821
+ </tr>
1822
+
1823
+
1824
+ <tr>
1825
+ <td class="col-md-4">
1826
+
1827
+ <div class="io-description">
1828
+ <b>Parameters :</b>
1829
+ <table class="params">
1830
+ <thead>
1831
+ <tr>
1832
+ <td>Name</td>
1833
+ <td>Optional</td>
1834
+ </tr>
1835
+ </thead>
1836
+ <tbody>
1837
+ <tr>
1838
+ <td>value</td>
1839
+
1840
+ <td>
1841
+ No
1842
+ </td>
1843
+
1844
+
1845
+ </tr>
1846
+ </tbody>
1847
+ </table>
1848
+ </div>
1849
+ <div>
1850
+ </div>
1851
+ <div class="io-description">
1852
+ <b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
1853
+
1854
+ </div>
1855
+ <div class="io-description">
1856
+
1857
+ </div>
1858
+ </td>
1859
+ </tr>
1860
+ </tbody>
1861
+ </table>
1654
1862
  <table class="table table-sm table-bordered">
1655
1863
  <tbody>
1656
1864
  <tr>
@@ -1673,7 +1881,7 @@ otherwise the placeholder will be returned.</p>
1673
1881
 
1674
1882
  <tr>
1675
1883
  <td class="col-md-4">
1676
- <div class="io-line">Defined in <a href="" data-line="603" class="link-to-prism">src/dropdown/dropdown.component.ts:603</a></div>
1884
+ <div class="io-line">Defined in <a href="" data-line="624" class="link-to-prism">src/dropdown/dropdown.component.ts:624</a></div>
1677
1885
  </td>
1678
1886
  </tr>
1679
1887
 
@@ -1756,7 +1964,7 @@ otherwise the placeholder will be returned.</p>
1756
1964
 
1757
1965
  <tr>
1758
1966
  <td class="col-md-4">
1759
- <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/dropdown/dropdown.component.ts:251</a></div>
1967
+ <div class="io-line">Defined in <a href="" data-line="272" class="link-to-prism">src/dropdown/dropdown.component.ts:272</a></div>
1760
1968
  </td>
1761
1969
  </tr>
1762
1970
 
@@ -1796,7 +2004,7 @@ otherwise the placeholder will be returned.</p>
1796
2004
 
1797
2005
  <tr>
1798
2006
  <td class="col-md-4">
1799
- <div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/dropdown/dropdown.component.ts:279</a></div>
2007
+ <div class="io-line">Defined in <a href="" data-line="300" class="link-to-prism">src/dropdown/dropdown.component.ts:300</a></div>
1800
2008
  </td>
1801
2009
  </tr>
1802
2010
 
@@ -1836,7 +2044,7 @@ otherwise the placeholder will be returned.</p>
1836
2044
 
1837
2045
  <tr>
1838
2046
  <td class="col-md-4">
1839
- <div class="io-line">Defined in <a href="" data-line="242" class="link-to-prism">src/dropdown/dropdown.component.ts:242</a></div>
2047
+ <div class="io-line">Defined in <a href="" data-line="263" class="link-to-prism">src/dropdown/dropdown.component.ts:263</a></div>
1840
2048
  </td>
1841
2049
  </tr>
1842
2050
 
@@ -1877,7 +2085,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
1877
2085
 
1878
2086
  <tr>
1879
2087
  <td class="col-md-4">
1880
- <div class="io-line">Defined in <a href="" data-line="302" class="link-to-prism">src/dropdown/dropdown.component.ts:302</a></div>
2088
+ <div class="io-line">Defined in <a href="" data-line="323" class="link-to-prism">src/dropdown/dropdown.component.ts:323</a></div>
1881
2089
  </td>
1882
2090
  </tr>
1883
2091
 
@@ -1915,7 +2123,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
1915
2123
 
1916
2124
  <tr>
1917
2125
  <td class="col-md-4">
1918
- <div class="io-line">Defined in <a href="" data-line="491" class="link-to-prism">src/dropdown/dropdown.component.ts:491</a></div>
2126
+ <div class="io-line">Defined in <a href="" data-line="512" class="link-to-prism">src/dropdown/dropdown.component.ts:512</a></div>
1919
2127
  </td>
1920
2128
  </tr>
1921
2129
 
@@ -1955,7 +2163,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
1955
2163
 
1956
2164
  <tr>
1957
2165
  <td class="col-md-4">
1958
- <div class="io-line">Defined in <a href="" data-line="306" class="link-to-prism">src/dropdown/dropdown.component.ts:306</a></div>
2166
+ <div class="io-line">Defined in <a href="" data-line="327" class="link-to-prism">src/dropdown/dropdown.component.ts:327</a></div>
1959
2167
  </td>
1960
2168
  </tr>
1961
2169
 
@@ -2024,7 +2232,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2024
2232
 
2025
2233
  <tr>
2026
2234
  <td class="col-md-4">
2027
- <div class="io-line">Defined in <a href="" data-line="313" class="link-to-prism">src/dropdown/dropdown.component.ts:313</a></div>
2235
+ <div class="io-line">Defined in <a href="" data-line="334" class="link-to-prism">src/dropdown/dropdown.component.ts:334</a></div>
2028
2236
  </td>
2029
2237
  </tr>
2030
2238
 
@@ -2095,7 +2303,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2095
2303
 
2096
2304
  <tr>
2097
2305
  <td class="col-md-4">
2098
- <div class="io-line">Defined in <a href="" data-line="583" class="link-to-prism">src/dropdown/dropdown.component.ts:583</a></div>
2306
+ <div class="io-line">Defined in <a href="" data-line="604" class="link-to-prism">src/dropdown/dropdown.component.ts:604</a></div>
2099
2307
  </td>
2100
2308
  </tr>
2101
2309
 
@@ -2135,7 +2343,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2135
2343
 
2136
2344
  <tr>
2137
2345
  <td class="col-md-4">
2138
- <div class="io-line">Defined in <a href="" data-line="592" class="link-to-prism">src/dropdown/dropdown.component.ts:592</a></div>
2346
+ <div class="io-line">Defined in <a href="" data-line="613" class="link-to-prism">src/dropdown/dropdown.component.ts:613</a></div>
2139
2347
  </td>
2140
2348
  </tr>
2141
2349
 
@@ -2175,7 +2383,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2175
2383
 
2176
2384
  <tr>
2177
2385
  <td class="col-md-4">
2178
- <div class="io-line">Defined in <a href="" data-line="426" class="link-to-prism">src/dropdown/dropdown.component.ts:426</a></div>
2386
+ <div class="io-line">Defined in <a href="" data-line="447" class="link-to-prism">src/dropdown/dropdown.component.ts:447</a></div>
2179
2387
  </td>
2180
2388
  </tr>
2181
2389
 
@@ -2215,7 +2423,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2215
2423
 
2216
2424
  <tr>
2217
2425
  <td class="col-md-4">
2218
- <div class="io-line">Defined in <a href="" data-line="288" class="link-to-prism">src/dropdown/dropdown.component.ts:288</a></div>
2426
+ <div class="io-line">Defined in <a href="" data-line="309" class="link-to-prism">src/dropdown/dropdown.component.ts:309</a></div>
2219
2427
  </td>
2220
2428
  </tr>
2221
2429
 
@@ -2301,7 +2509,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2301
2509
  </tr>
2302
2510
  <tr>
2303
2511
  <td class="col-md-4">
2304
- <div class="io-line">Defined in <a href="" data-line="204" class="link-to-prism">src/dropdown/dropdown.component.ts:204</a></div>
2512
+ <div class="io-line">Defined in <a href="" data-line="224" class="link-to-prism">src/dropdown/dropdown.component.ts:224</a></div>
2305
2513
  </td>
2306
2514
  </tr>
2307
2515
 
@@ -2314,6 +2522,46 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2314
2522
 
2315
2523
  </tbody>
2316
2524
  </table>
2525
+ <table class="table table-sm table-bordered">
2526
+ <tbody>
2527
+ <tr>
2528
+ <td class="col-md-4">
2529
+ <a name="dropdownCount"></a>
2530
+ <span class="name">
2531
+ <b>
2532
+ <span class="modifier">Static</span>
2533
+ dropdownCount
2534
+ </b>
2535
+ <a href="#dropdownCount"><span class="icon ion-ios-link"></span></a>
2536
+ </span>
2537
+ </td>
2538
+ </tr>
2539
+ <tr>
2540
+ <td class="col-md-4">
2541
+ <span class="modifier-icon icon ion-ios-reset"></span><code>dropdownCount: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
2542
+ </code>
2543
+ </td>
2544
+ </tr>
2545
+ <tr>
2546
+ <td class="col-md-4">
2547
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
2548
+
2549
+ </td>
2550
+ </tr>
2551
+ <tr>
2552
+ <td class="col-md-4">
2553
+ <i>Default value : </i><code>0</code>
2554
+ </td>
2555
+ </tr>
2556
+ <tr>
2557
+ <td class="col-md-4">
2558
+ <div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/dropdown/dropdown.component.ts:120</a></div>
2559
+ </td>
2560
+ </tr>
2561
+
2562
+
2563
+ </tbody>
2564
+ </table>
2317
2565
  <table class="table table-sm table-bordered">
2318
2566
  <tbody>
2319
2567
  <tr>
@@ -2344,7 +2592,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2344
2592
  </tr>
2345
2593
  <tr>
2346
2594
  <td class="col-md-4">
2347
- <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/dropdown/dropdown.component.ts:208</a></div>
2595
+ <div class="io-line">Defined in <a href="" data-line="228" class="link-to-prism">src/dropdown/dropdown.component.ts:228</a></div>
2348
2596
  </td>
2349
2597
  </tr>
2350
2598
 
@@ -2383,7 +2631,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2383
2631
  </tr>
2384
2632
  <tr>
2385
2633
  <td class="col-md-4">
2386
- <div class="io-line">Defined in <a href="" data-line="218" class="link-to-prism">src/dropdown/dropdown.component.ts:218</a></div>
2634
+ <div class="io-line">Defined in <a href="" data-line="239" class="link-to-prism">src/dropdown/dropdown.component.ts:239</a></div>
2387
2635
  </td>
2388
2636
  </tr>
2389
2637
 
@@ -2422,7 +2670,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2422
2670
  </tr>
2423
2671
  <tr>
2424
2672
  <td class="col-md-4">
2425
- <div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/dropdown/dropdown.component.ts:225</a></div>
2673
+ <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/dropdown/dropdown.component.ts:246</a></div>
2426
2674
  </td>
2427
2675
  </tr>
2428
2676
 
@@ -2455,7 +2703,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2455
2703
  </tr>
2456
2704
  <tr>
2457
2705
  <td class="col-md-4">
2458
- <div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/dropdown/dropdown.component.ts:213</a></div>
2706
+ <div class="io-line">Defined in <a href="" data-line="234" class="link-to-prism">src/dropdown/dropdown.component.ts:234</a></div>
2459
2707
  </td>
2460
2708
  </tr>
2461
2709
 
@@ -2494,7 +2742,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2494
2742
  </tr>
2495
2743
  <tr>
2496
2744
  <td class="col-md-4">
2497
- <div class="io-line">Defined in <a href="" data-line="222" class="link-to-prism">src/dropdown/dropdown.component.ts:222</a></div>
2745
+ <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/dropdown/dropdown.component.ts:243</a></div>
2498
2746
  </td>
2499
2747
  </tr>
2500
2748
 
@@ -2534,7 +2782,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2534
2782
  </tr>
2535
2783
  <tr>
2536
2784
  <td class="col-md-4">
2537
- <div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/dropdown/dropdown.component.ts:231</a></div>
2785
+ <div class="io-line">Defined in <a href="" data-line="252" class="link-to-prism">src/dropdown/dropdown.component.ts:252</a></div>
2538
2786
  </td>
2539
2787
  </tr>
2540
2788
 
@@ -2567,7 +2815,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2567
2815
  </tr>
2568
2816
  <tr>
2569
2817
  <td class="col-md-4">
2570
- <div class="io-line">Defined in <a href="" data-line="223" class="link-to-prism">src/dropdown/dropdown.component.ts:223</a></div>
2818
+ <div class="io-line">Defined in <a href="" data-line="244" class="link-to-prism">src/dropdown/dropdown.component.ts:244</a></div>
2571
2819
  </td>
2572
2820
  </tr>
2573
2821
 
@@ -2600,7 +2848,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2600
2848
  </tr>
2601
2849
  <tr>
2602
2850
  <td class="col-md-4">
2603
- <div class="io-line">Defined in <a href="" data-line="224" class="link-to-prism">src/dropdown/dropdown.component.ts:224</a></div>
2851
+ <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/dropdown/dropdown.component.ts:245</a></div>
2604
2852
  </td>
2605
2853
  </tr>
2606
2854
 
@@ -2633,7 +2881,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2633
2881
  </tr>
2634
2882
  <tr>
2635
2883
  <td class="col-md-4">
2636
- <div class="io-line">Defined in <a href="" data-line="317" class="link-to-prism">src/dropdown/dropdown.component.ts:317</a></div>
2884
+ <div class="io-line">Defined in <a href="" data-line="338" class="link-to-prism">src/dropdown/dropdown.component.ts:338</a></div>
2637
2885
  </td>
2638
2886
  </tr>
2639
2887
 
@@ -2667,7 +2915,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2667
2915
  </tr>
2668
2916
  <tr>
2669
2917
  <td class="col-md-4">
2670
- <div class="io-line">Defined in <a href="" data-line="229" class="link-to-prism">src/dropdown/dropdown.component.ts:229</a></div>
2918
+ <div class="io-line">Defined in <a href="" data-line="250" class="link-to-prism">src/dropdown/dropdown.component.ts:250</a></div>
2671
2919
  </td>
2672
2920
  </tr>
2673
2921
 
@@ -2716,7 +2964,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2716
2964
  </tr>
2717
2965
  <tr>
2718
2966
  <td class="col-md-4">
2719
- <div class="io-line">Defined in <a href="" data-line="200" class="link-to-prism">src/dropdown/dropdown.component.ts:200</a></div>
2967
+ <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/dropdown/dropdown.component.ts:220</a></div>
2720
2968
  </td>
2721
2969
  </tr>
2722
2970
 
@@ -2751,7 +2999,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2751
2999
  </tr>
2752
3000
  <tr>
2753
3001
  <td class="col-md-4">
2754
- <div class="io-line">Defined in <a href="" data-line="158" class="link-to-prism">src/dropdown/dropdown.component.ts:158</a></div>
3002
+ <div class="io-line">Defined in <a href="" data-line="178" class="link-to-prism">src/dropdown/dropdown.component.ts:178</a></div>
2755
3003
  </td>
2756
3004
  </tr>
2757
3005
 
@@ -2762,7 +3010,7 @@ The <code>type</code> property specifies whether the <code>Dropdown</code> allow
2762
3010
  </tr>
2763
3011
  <tr>
2764
3012
  <td class="col-md-4">
2765
- <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/dropdown/dropdown.component.ts:151</a></div>
3013
+ <div class="io-line">Defined in <a href="" data-line="171" class="link-to-prism">src/dropdown/dropdown.component.ts:171</a></div>
2766
3014
  </td>
2767
3015
  </tr>
2768
3016
  <tr>
@@ -2820,6 +3068,7 @@ Set to <code>true</code> if the <code>Dropdown</code> is to be appended to the D
2820
3068
  AfterContentInit,
2821
3069
  HostListener,
2822
3070
  OnDestroy,
3071
+ HostBinding,
2823
3072
  TemplateRef
2824
3073
  } from &quot;@angular/core&quot;;
2825
3074
  import { NG_VALUE_ACCESSOR } from &quot;@angular/forms&quot;;
@@ -2849,7 +3098,16 @@ import { DropdownService } from &quot;./dropdown.service&quot;;
2849
3098
  @Component({
2850
3099
  selector: &quot;ibm-dropdown&quot;,
2851
3100
  template: &#x60;
3101
+ &lt;label [for]&#x3D;&quot;id&quot; class&#x3D;&quot;bx--label&quot;&gt;
3102
+ &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(label)&quot;&gt;{{label}}&lt;/ng-container&gt;
3103
+ &lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
3104
+ &lt;/label&gt;
3105
+ &lt;div *ngIf&#x3D;&quot;helperText&quot; class&#x3D;&quot;bx--form__helper-text&quot;&gt;
3106
+ &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(helperText)&quot;&gt;{{helperText}}&lt;/ng-container&gt;
3107
+ &lt;ng-template *ngIf&#x3D;&quot;isTemplate(helperText)&quot; [ngTemplateOutlet]&#x3D;&quot;helperText&quot;&gt;&lt;/ng-template&gt;
3108
+ &lt;/div&gt;
2852
3109
  &lt;div
3110
+ [id]&#x3D;&quot;id&quot;
2853
3111
  class&#x3D;&quot;bx--dropdown bx--list-box&quot;
2854
3112
  [ngClass]&#x3D;&quot;{
2855
3113
  &#x27;bx--dropdown--light&#x27;: theme &#x3D;&#x3D;&#x3D; &#x27;light&#x27;,
@@ -2917,6 +3175,16 @@ import { DropdownService } from &quot;./dropdown.service&quot;;
2917
3175
  ]
2918
3176
  })
2919
3177
  export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
3178
+ static dropdownCount &#x3D; 0;
3179
+ @Input() id &#x3D; &#x60;dropdown-${Dropdown.dropdownCount++}&#x60;;
3180
+ /**
3181
+ * Label for the dropdown.
3182
+ */
3183
+ @Input() label: string | TemplateRef&lt;any&gt;;
3184
+ /**
3185
+ * Sets the optional helper text.
3186
+ */
3187
+ @Input() helperText: string | TemplateRef&lt;any&gt;;
2920
3188
  /**
2921
3189
  * Value displayed if no item is selected.
2922
3190
  */
@@ -3017,6 +3285,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
3017
3285
  */
3018
3286
  @ViewChild(&quot;dropdownMenu&quot;) dropdownMenu;
3019
3287
 
3288
+ @HostBinding(&quot;class.bx--dropdown__wrapper&quot;) hostClass &#x3D; true;
3020
3289
  /**
3021
3290
  * Set to &#x60;true&#x60; if the dropdown is closed (not expanded).
3022
3291
  */
@@ -3422,6 +3691,10 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
3422
3691
 
3423
3692
  return false;
3424
3693
  }
3694
+
3695
+ public isTemplate(value) {
3696
+ return value instanceof TemplateRef;
3697
+ }
3425
3698
  }
3426
3699
  </code></pre>
3427
3700
  </div>
@@ -3458,7 +3731,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
3458
3731
  <script src="../js/libs/htmlparser.js"></script>
3459
3732
  <script src="../js/libs/deep-iterator.js"></script>
3460
3733
  <script>
3461
- var COMPONENT_TEMPLATE = '<div><div class="bx--dropdown bx--list-box" [ngClass]="{ \'bx--dropdown--light\': theme === \'light\', \'bx--list-box--inline\': inline, \'bx--skeleton\': skeleton, \'bx--dropdown--disabled bx--list-box--disabled\': disabled }"> <button type="button" #dropdownButton class="bx--list-box__field" [ngClass]="{\'a\': !menuIsClosed}" [attr.aria-expanded]="!menuIsClosed" [attr.aria-disabled]="disabled" (click)="toggleMenu()" (blur)="onBlur()" [disabled]="disabled"> <div (click)="clearSelected()" *ngIf="type === \'multi\' && getSelectedCount() > 0" class="bx--list-box__selection--multi" title="Clear all selected items"> {{getSelectedCount()}} <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path> </svg> </div> <span *ngIf="isRenderString()" class="bx--list-box__label">{{getDisplayStringValue() | async}}</span> <ng-template *ngIf="!isRenderString()" [ngTemplateOutletContext]="getRenderTemplateContext()" [ngTemplateOutlet]="displayValue"> </ng-template> <ibm-icon-chevron-down16 *ngIf="!skeleton" class="bx--list-box__menu-icon" [attr.aria-label]="menuButtonLabel" [ngClass]="{\'bx--list-box__menu-icon--open\': !menuIsClosed }"> </ibm-icon-chevron-down16> </button> <div #dropdownMenu [ngClass]="{ \'drop-up\': dropUp }"> <ng-content *ngIf="!menuIsClosed"></ng-content> </div></div></div>'
3734
+ var COMPONENT_TEMPLATE = '<div><label [for]="id" class="bx--label"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template></label><div *ngIf="helperText" class="bx--form__helper-text"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template></div><div [id]="id" class="bx--dropdown bx--list-box" [ngClass]="{ \'bx--dropdown--light\': theme === \'light\', \'bx--list-box--inline\': inline, \'bx--skeleton\': skeleton, \'bx--dropdown--disabled bx--list-box--disabled\': disabled }"> <button type="button" #dropdownButton class="bx--list-box__field" [ngClass]="{\'a\': !menuIsClosed}" [attr.aria-expanded]="!menuIsClosed" [attr.aria-disabled]="disabled" (click)="toggleMenu()" (blur)="onBlur()" [disabled]="disabled"> <div (click)="clearSelected()" *ngIf="type === \'multi\' && getSelectedCount() > 0" class="bx--list-box__selection--multi" title="Clear all selected items"> {{getSelectedCount()}} <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path> </svg> </div> <span *ngIf="isRenderString()" class="bx--list-box__label">{{getDisplayStringValue() | async}}</span> <ng-template *ngIf="!isRenderString()" [ngTemplateOutletContext]="getRenderTemplateContext()" [ngTemplateOutlet]="displayValue"> </ng-template> <ibm-icon-chevron-down16 *ngIf="!skeleton" class="bx--list-box__menu-icon" [attr.aria-label]="menuButtonLabel" [ngClass]="{\'bx--list-box__menu-icon--open\': !menuIsClosed }"> </ibm-icon-chevron-down16> </button> <div #dropdownMenu [ngClass]="{ \'drop-up\': dropUp }"> <ng-content *ngIf="!menuIsClosed"></ng-content> </div></div></div>'
3462
3735
  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'}];
3463
3736
  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]'}];
3464
3737
  var ACTUAL_COMPONENT = {'name': 'Dropdown'};