carbon-components-angular 5.54.0 → 5.55.0

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 (161) hide show
  1. package/README.md +1 -1
  2. package/combobox/combobox.component.d.ts +7 -2
  3. package/docs/documentation/components/ComboBox.html +294 -211
  4. package/docs/documentation/components/TextInputLabelComponent.html +76 -30
  5. package/docs/documentation/coverage.html +6 -6
  6. package/docs/documentation/index.html +1 -1
  7. package/docs/documentation/js/search/search_index.js +2 -2
  8. package/docs/documentation/modules/CodeSnippetModule/dependencies.svg +4 -4
  9. package/docs/documentation/modules/CodeSnippetModule.html +4 -4
  10. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  11. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  12. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +4 -4
  13. package/docs/documentation/modules/DatePickerInputModule.html +4 -4
  14. package/docs/documentation/modules/DatePickerModule/dependencies.svg +4 -4
  15. package/docs/documentation/modules/DatePickerModule.html +4 -4
  16. package/docs/documentation/modules/FileUploaderModule/dependencies.svg +34 -34
  17. package/docs/documentation/modules/FileUploaderModule.html +34 -34
  18. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  19. package/docs/documentation/modules/NFormsModule.html +4 -4
  20. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  21. package/docs/documentation/modules/NumberModule.html +4 -4
  22. package/docs/documentation/modules/RadioModule/dependencies.svg +57 -61
  23. package/docs/documentation/modules/RadioModule.html +57 -61
  24. package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
  25. package/docs/documentation/modules/SearchModule.html +4 -4
  26. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  27. package/docs/documentation/modules/SliderModule.html +4 -4
  28. package/docs/documentation/modules/StructuredListModule/dependencies.svg +66 -66
  29. package/docs/documentation/modules/StructuredListModule.html +66 -66
  30. package/docs/documentation/modules/TagModule/dependencies.svg +37 -37
  31. package/docs/documentation/modules/TagModule.html +37 -37
  32. package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
  33. package/docs/documentation/modules/ThemeModule.html +4 -4
  34. package/docs/documentation/modules/TilesModule/dependencies.svg +91 -91
  35. package/docs/documentation/modules/TilesModule.html +91 -91
  36. package/docs/documentation/modules/TimePickerModule/dependencies.svg +4 -4
  37. package/docs/documentation/modules/TimePickerModule.html +4 -4
  38. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +42 -46
  39. package/docs/documentation/modules/TimePickerSelectModule.html +42 -46
  40. package/docs/documentation/modules/ToggleModule/dependencies.svg +42 -46
  41. package/docs/documentation/modules/ToggleModule.html +42 -46
  42. package/docs/documentation/modules/ToggletipModule/dependencies.svg +39 -39
  43. package/docs/documentation/modules/ToggletipModule.html +39 -39
  44. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  45. package/docs/documentation/modules/TooltipModule.html +4 -4
  46. package/docs/documentation/modules/TreeviewModule/dependencies.svg +28 -28
  47. package/docs/documentation/modules/TreeviewModule.html +28 -28
  48. package/docs/documentation.json +196 -154
  49. package/docs/storybook/{1345.4ae7e616.iframe.bundle.js → 1345.d1a47622.iframe.bundle.js} +1 -1
  50. package/docs/storybook/combobox-combobox-stories.6da5780e.iframe.bundle.js +1 -0
  51. package/docs/storybook/iframe.html +2 -2
  52. package/docs/storybook/index.json +1 -1
  53. package/docs/storybook/main.css +886 -187
  54. package/docs/storybook/main.fd9128ab.iframe.bundle.js +1 -0
  55. package/docs/storybook/project.json +1 -1
  56. package/docs/storybook/{runtime~main.5af8858a.iframe.bundle.js → runtime~main.d4ace00c.iframe.bundle.js} +1 -1
  57. package/docs/storybook/stories.json +1 -1
  58. package/esm2020/combobox/combobox.component.mjs +38 -14
  59. package/esm2020/input/text-input-label.component.mjs +4 -1
  60. package/fesm2015/carbon-components-angular-combobox.mjs +37 -13
  61. package/fesm2015/carbon-components-angular-combobox.mjs.map +1 -1
  62. package/fesm2015/carbon-components-angular-input.mjs +3 -0
  63. package/fesm2015/carbon-components-angular-input.mjs.map +1 -1
  64. package/fesm2020/carbon-components-angular-combobox.mjs +37 -13
  65. package/fesm2020/carbon-components-angular-combobox.mjs.map +1 -1
  66. package/fesm2020/carbon-components-angular-input.mjs +3 -0
  67. package/fesm2020/carbon-components-angular-input.mjs.map +1 -1
  68. package/input/text-input-label.component.d.ts +3 -2
  69. package/package.json +1 -1
  70. package/docs/storybook/IBMPlexMono-Italic-Cyrillic.woff +0 -0
  71. package/docs/storybook/IBMPlexMono-Italic-Latin1.woff +0 -0
  72. package/docs/storybook/IBMPlexMono-Italic-Latin2.woff +0 -0
  73. package/docs/storybook/IBMPlexMono-Italic-Latin3.woff +0 -0
  74. package/docs/storybook/IBMPlexMono-Italic-Pi.woff +0 -0
  75. package/docs/storybook/IBMPlexMono-Light-Cyrillic.woff +0 -0
  76. package/docs/storybook/IBMPlexMono-Light-Latin1.woff +0 -0
  77. package/docs/storybook/IBMPlexMono-Light-Latin2.woff +0 -0
  78. package/docs/storybook/IBMPlexMono-Light-Latin3.woff +0 -0
  79. package/docs/storybook/IBMPlexMono-Light-Pi.woff +0 -0
  80. package/docs/storybook/IBMPlexMono-LightItalic-Cyrillic.woff +0 -0
  81. package/docs/storybook/IBMPlexMono-LightItalic-Latin1.woff +0 -0
  82. package/docs/storybook/IBMPlexMono-LightItalic-Latin2.woff +0 -0
  83. package/docs/storybook/IBMPlexMono-LightItalic-Latin3.woff +0 -0
  84. package/docs/storybook/IBMPlexMono-LightItalic-Pi.woff +0 -0
  85. package/docs/storybook/IBMPlexMono-Regular-Cyrillic.woff +0 -0
  86. package/docs/storybook/IBMPlexMono-Regular-Latin1.woff +0 -0
  87. package/docs/storybook/IBMPlexMono-Regular-Latin2.woff +0 -0
  88. package/docs/storybook/IBMPlexMono-Regular-Latin3.woff +0 -0
  89. package/docs/storybook/IBMPlexMono-Regular-Pi.woff +0 -0
  90. package/docs/storybook/IBMPlexMono-SemiBold-Cyrillic.woff +0 -0
  91. package/docs/storybook/IBMPlexMono-SemiBold-Latin1.woff +0 -0
  92. package/docs/storybook/IBMPlexMono-SemiBold-Latin2.woff +0 -0
  93. package/docs/storybook/IBMPlexMono-SemiBold-Latin3.woff +0 -0
  94. package/docs/storybook/IBMPlexMono-SemiBold-Pi.woff +0 -0
  95. package/docs/storybook/IBMPlexMono-SemiBoldItalic-Cyrillic.woff +0 -0
  96. package/docs/storybook/IBMPlexMono-SemiBoldItalic-Latin1.woff +0 -0
  97. package/docs/storybook/IBMPlexMono-SemiBoldItalic-Latin2.woff +0 -0
  98. package/docs/storybook/IBMPlexMono-SemiBoldItalic-Latin3.woff +0 -0
  99. package/docs/storybook/IBMPlexMono-SemiBoldItalic-Pi.woff +0 -0
  100. package/docs/storybook/IBMPlexSans-Italic-Cyrillic.woff +0 -0
  101. package/docs/storybook/IBMPlexSans-Italic-Latin1.woff +0 -0
  102. package/docs/storybook/IBMPlexSans-Italic-Latin2.woff +0 -0
  103. package/docs/storybook/IBMPlexSans-Italic-Latin3.woff +0 -0
  104. package/docs/storybook/IBMPlexSans-Italic-Pi.woff +0 -0
  105. package/docs/storybook/IBMPlexSans-Light-Cyrillic.woff +0 -0
  106. package/docs/storybook/IBMPlexSans-Light-Latin1.woff +0 -0
  107. package/docs/storybook/IBMPlexSans-Light-Latin2.woff +0 -0
  108. package/docs/storybook/IBMPlexSans-Light-Latin3.woff +0 -0
  109. package/docs/storybook/IBMPlexSans-Light-Pi.woff +0 -0
  110. package/docs/storybook/IBMPlexSans-LightItalic-Cyrillic.woff +0 -0
  111. package/docs/storybook/IBMPlexSans-LightItalic-Latin1.woff +0 -0
  112. package/docs/storybook/IBMPlexSans-LightItalic-Latin2.woff +0 -0
  113. package/docs/storybook/IBMPlexSans-LightItalic-Latin3.woff +0 -0
  114. package/docs/storybook/IBMPlexSans-LightItalic-Pi.woff +0 -0
  115. package/docs/storybook/IBMPlexSans-Regular-Cyrillic.woff +0 -0
  116. package/docs/storybook/IBMPlexSans-Regular-Latin1.woff +0 -0
  117. package/docs/storybook/IBMPlexSans-Regular-Latin2.woff +0 -0
  118. package/docs/storybook/IBMPlexSans-Regular-Latin3.woff +0 -0
  119. package/docs/storybook/IBMPlexSans-Regular-Pi.woff +0 -0
  120. package/docs/storybook/IBMPlexSans-SemiBold-Cyrillic.woff +0 -0
  121. package/docs/storybook/IBMPlexSans-SemiBold-Latin1.woff +0 -0
  122. package/docs/storybook/IBMPlexSans-SemiBold-Latin2.woff +0 -0
  123. package/docs/storybook/IBMPlexSans-SemiBold-Latin3.woff +0 -0
  124. package/docs/storybook/IBMPlexSans-SemiBold-Pi.woff +0 -0
  125. package/docs/storybook/IBMPlexSans-SemiBoldItalic-Cyrillic.woff +0 -0
  126. package/docs/storybook/IBMPlexSans-SemiBoldItalic-Latin1.woff +0 -0
  127. package/docs/storybook/IBMPlexSans-SemiBoldItalic-Latin2.woff +0 -0
  128. package/docs/storybook/IBMPlexSans-SemiBoldItalic-Latin3.woff +0 -0
  129. package/docs/storybook/IBMPlexSans-SemiBoldItalic-Pi.woff +0 -0
  130. package/docs/storybook/IBMPlexSerif-Italic-Cyrillic.woff +0 -0
  131. package/docs/storybook/IBMPlexSerif-Italic-Latin1.woff +0 -0
  132. package/docs/storybook/IBMPlexSerif-Italic-Latin2.woff +0 -0
  133. package/docs/storybook/IBMPlexSerif-Italic-Latin3.woff +0 -0
  134. package/docs/storybook/IBMPlexSerif-Italic-Pi.woff +0 -0
  135. package/docs/storybook/IBMPlexSerif-Light-Cyrillic.woff +0 -0
  136. package/docs/storybook/IBMPlexSerif-Light-Latin1.woff +0 -0
  137. package/docs/storybook/IBMPlexSerif-Light-Latin2.woff +0 -0
  138. package/docs/storybook/IBMPlexSerif-Light-Latin3.woff +0 -0
  139. package/docs/storybook/IBMPlexSerif-Light-Pi.woff +0 -0
  140. package/docs/storybook/IBMPlexSerif-LightItalic-Cyrillic.woff +0 -0
  141. package/docs/storybook/IBMPlexSerif-LightItalic-Latin1.woff +0 -0
  142. package/docs/storybook/IBMPlexSerif-LightItalic-Latin2.woff +0 -0
  143. package/docs/storybook/IBMPlexSerif-LightItalic-Latin3.woff +0 -0
  144. package/docs/storybook/IBMPlexSerif-LightItalic-Pi.woff +0 -0
  145. package/docs/storybook/IBMPlexSerif-Regular-Cyrillic.woff +0 -0
  146. package/docs/storybook/IBMPlexSerif-Regular-Latin1.woff +0 -0
  147. package/docs/storybook/IBMPlexSerif-Regular-Latin2.woff +0 -0
  148. package/docs/storybook/IBMPlexSerif-Regular-Latin3.woff +0 -0
  149. package/docs/storybook/IBMPlexSerif-Regular-Pi.woff +0 -0
  150. package/docs/storybook/IBMPlexSerif-SemiBold-Cyrillic.woff +0 -0
  151. package/docs/storybook/IBMPlexSerif-SemiBold-Latin1.woff +0 -0
  152. package/docs/storybook/IBMPlexSerif-SemiBold-Latin2.woff +0 -0
  153. package/docs/storybook/IBMPlexSerif-SemiBold-Latin3.woff +0 -0
  154. package/docs/storybook/IBMPlexSerif-SemiBold-Pi.woff +0 -0
  155. package/docs/storybook/IBMPlexSerif-SemiBoldItalic-Cyrillic.woff +0 -0
  156. package/docs/storybook/IBMPlexSerif-SemiBoldItalic-Latin1.woff +0 -0
  157. package/docs/storybook/IBMPlexSerif-SemiBoldItalic-Latin2.woff +0 -0
  158. package/docs/storybook/IBMPlexSerif-SemiBoldItalic-Latin3.woff +0 -0
  159. package/docs/storybook/IBMPlexSerif-SemiBoldItalic-Pi.woff +0 -0
  160. package/docs/storybook/combobox-combobox-stories.632a96c1.iframe.bundle.js +0 -1
  161. package/docs/storybook/main.4ed7d347.iframe.bundle.js +0 -1
@@ -174,7 +174,13 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
174
174
 
175
175
  <tr>
176
176
  <td class="col-md-3">template</td>
177
- <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;cds--list-box__wrapper&quot;&gt;
177
+ <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;div
178
+ class&#x3D;&quot;cds--list-box__wrapper&quot;
179
+ [ngClass]&#x3D;&quot;{
180
+ &#x27;cds--list-box__wrapper--fluid&#x27;: fluid,
181
+ &#x27;cds--list-box__wrapper--fluid--invalid&#x27;: fluid &amp;&amp; invalid,
182
+ &#x27;cds--list-box__wrapper--fluid--focus&#x27;: fluid &amp;&amp; _isFocused
183
+ }&quot;&gt;
178
184
  &lt;label
179
185
  *ngIf&#x3D;&quot;label&quot;
180
186
  [for]&#x3D;&quot;id&quot;
@@ -198,7 +204,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
198
204
  &#x27;cds--list-box--lg&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;lg&#x27;,
199
205
  &#x27;cds--list-box--disabled&#x27;: disabled,
200
206
  &#x27;cds--combo-box--readonly&#x27;: readonly,
201
- &#x27;cds--combo-box--warning cds--list-box--warning&#x27;: warn
207
+ &#x27;cds--combo-box--warning cds--list-box--warning&#x27;: warn,
208
+ &#x27;cds--list-box--invalid&#x27;: invalid
202
209
  }&quot;
203
210
  class&#x3D;&quot;cds--list-box cds--combo-box&quot;
204
211
  [attr.data-invalid]&#x3D;&quot;(invalid ? true : null)&quot;&gt;
@@ -243,7 +250,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
243
250
  [disabled]&#x3D;&quot;disabled&quot;
244
251
  [readOnly]&#x3D;&quot;readonly&quot;
245
252
  (input)&#x3D;&quot;onSearch($event.target.value)&quot;
246
- (blur)&#x3D;&quot;onBlur()&quot;
253
+ (focus)&#x3D;&quot;fluid ? handleFocus($event) : null&quot;
254
+ (blur)&#x3D;&quot;fluid ? handleFocus($event) : onBlur()&quot;
247
255
  (keydown.enter)&#x3D;&quot;onSubmit($event)&quot;
248
256
  [value]&#x3D;&quot;selectedValue&quot;
249
257
  class&#x3D;&quot;cds--text-input&quot;
@@ -300,8 +308,9 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
300
308
  &lt;ng-content *ngIf&#x3D;&quot;open&quot;&gt;&lt;/ng-content&gt;
301
309
  &lt;/div&gt;
302
310
  &lt;/div&gt;
311
+ &lt;hr *ngIf&#x3D;&quot;fluid&quot; class&#x3D;&quot;cds--list-box__divider&quot; /&gt;
303
312
  &lt;div
304
- *ngIf&#x3D;&quot;helperText &amp;&amp; !invalid &amp;&amp; !warn&quot;
313
+ *ngIf&#x3D;&quot;helperText &amp;&amp; !invalid &amp;&amp; !warn &amp;&amp; !fluid&quot;
305
314
  class&#x3D;&quot;cds--form__helper-text&quot;
306
315
  [ngClass]&#x3D;&quot;{&#x27;cds--form__helper-text--disabled&#x27;: disabled}&quot;&gt;
307
316
  &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(helperText)&quot;&gt;{{helperText}}&lt;/ng-container&gt;
@@ -366,6 +375,10 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
366
375
  <li>
367
376
  <a href="#_dropUp" >_dropUp</a>
368
377
  </li>
378
+ <li>
379
+ <span class="modifier">Protected</span>
380
+ <a href="#_isFocused" >_isFocused</a>
381
+ </li>
369
382
  <li>
370
383
  <span class="modifier">Protected</span>
371
384
  <a href="#_openMenuAria" >_openMenuAria</a>
@@ -378,10 +391,6 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
378
391
  <span class="modifier">Static</span>
379
392
  <a href="#comboBoxCount" >comboBoxCount</a>
380
393
  </li>
381
- <li>
382
- <span class="modifier"></span>
383
- <a href="#display" >display</a>
384
- </li>
385
394
  <li>
386
395
  <span class="modifier"></span>
387
396
  <a href="#dropdownMenu" >dropdownMenu</a>
@@ -481,6 +490,9 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
481
490
  <span class="modifier">Public</span>
482
491
  <a href="#closeDropdown" >closeDropdown</a>
483
492
  </li>
493
+ <li>
494
+ <a href="#handleFocus" >handleFocus</a>
495
+ </li>
484
496
  <li>
485
497
  <span class="modifier"></span>
486
498
  <a href="#hostkeys" >hostkeys</a>
@@ -579,6 +591,9 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
579
591
  <li>
580
592
  <a href="#dropUp" >dropUp</a>
581
593
  </li>
594
+ <li>
595
+ <a href="#fluid" >fluid</a>
596
+ </li>
582
597
  <li>
583
598
  <a href="#helperText" >helperText</a>
584
599
  </li>
@@ -678,9 +693,6 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
678
693
  <li>
679
694
  <a href="#class.cds--list-box__wrapper" >class.cds--list-box__wrapper</a>
680
695
  </li>
681
- <li>
682
- <a href="#style.display" >style.display</a>
683
- </li>
684
696
  </ul>
685
697
  </td>
686
698
  </tr>
@@ -747,7 +759,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
747
759
  </tr>
748
760
  <tr>
749
761
  <td class="col-md-4">
750
- <div class="io-line">Defined in <a href="" data-line="457" class="link-to-prism">src/combobox/combobox.component.ts:457</a></div>
762
+ <div class="io-line">Defined in <a href="" data-line="471" class="link-to-prism">src/combobox/combobox.component.ts:471</a></div>
751
763
  </td>
752
764
  </tr>
753
765
 
@@ -834,7 +846,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
834
846
  </tr>
835
847
  <tr>
836
848
  <td class="col-md-2" colspan="2">
837
- <div class="io-line">Defined in <a href="" data-line="322" class="link-to-prism">src/combobox/combobox.component.ts:322</a></div>
849
+ <div class="io-line">Defined in <a href="" data-line="331" class="link-to-prism">src/combobox/combobox.component.ts:331</a></div>
838
850
  </td>
839
851
  </tr>
840
852
  <tr>
@@ -866,7 +878,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
866
878
  </tr>
867
879
  <tr>
868
880
  <td class="col-md-2" colspan="2">
869
- <div class="io-line">Defined in <a href="" data-line="358" class="link-to-prism">src/combobox/combobox.component.ts:358</a></div>
881
+ <div class="io-line">Defined in <a href="" data-line="367" class="link-to-prism">src/combobox/combobox.component.ts:367</a></div>
870
882
  </td>
871
883
  </tr>
872
884
  <tr>
@@ -894,7 +906,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
894
906
  </tr>
895
907
  <tr>
896
908
  <td class="col-md-2" colspan="2">
897
- <div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">src/combobox/combobox.component.ts:258</a></div>
909
+ <div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/combobox/combobox.component.ts:267</a></div>
898
910
  </td>
899
911
  </tr>
900
912
  <tr>
@@ -921,7 +933,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
921
933
  </tr>
922
934
  <tr>
923
935
  <td class="col-md-2" colspan="2">
924
- <div class="io-line">Defined in <a href="" data-line="238" class="link-to-prism">src/combobox/combobox.component.ts:238</a></div>
936
+ <div class="io-line">Defined in <a href="" data-line="247" class="link-to-prism">src/combobox/combobox.component.ts:247</a></div>
925
937
  </td>
926
938
  </tr>
927
939
  <tr>
@@ -948,7 +960,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
948
960
  </tr>
949
961
  <tr>
950
962
  <td class="col-md-2" colspan="2">
951
- <div class="io-line">Defined in <a href="" data-line="228" class="link-to-prism">src/combobox/combobox.component.ts:228</a></div>
963
+ <div class="io-line">Defined in <a href="" data-line="237" class="link-to-prism">src/combobox/combobox.component.ts:237</a></div>
952
964
  </td>
953
965
  </tr>
954
966
  <tr>
@@ -975,7 +987,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
975
987
  </tr>
976
988
  <tr>
977
989
  <td class="col-md-2" colspan="2">
978
- <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/combobox/combobox.component.ts:248</a></div>
990
+ <div class="io-line">Defined in <a href="" data-line="257" class="link-to-prism">src/combobox/combobox.component.ts:257</a></div>
979
991
  </td>
980
992
  </tr>
981
993
  <tr>
@@ -1002,7 +1014,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1002
1014
  </tr>
1003
1015
  <tr>
1004
1016
  <td class="col-md-2" colspan="2">
1005
- <div class="io-line">Defined in <a href="" data-line="218" class="link-to-prism">src/combobox/combobox.component.ts:218</a></div>
1017
+ <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/combobox/combobox.component.ts:227</a></div>
1006
1018
  </td>
1007
1019
  </tr>
1008
1020
  <tr>
@@ -1034,7 +1046,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1034
1046
  </tr>
1035
1047
  <tr>
1036
1048
  <td class="col-md-2" colspan="2">
1037
- <div class="io-line">Defined in <a href="" data-line="366" class="link-to-prism">src/combobox/combobox.component.ts:366</a></div>
1049
+ <div class="io-line">Defined in <a href="" data-line="375" class="link-to-prism">src/combobox/combobox.component.ts:375</a></div>
1038
1050
  </td>
1039
1051
  </tr>
1040
1052
  <tr>
@@ -1061,12 +1073,44 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1061
1073
  </tr>
1062
1074
  <tr>
1063
1075
  <td class="col-md-2" colspan="2">
1064
- <div class="io-line">Defined in <a href="" data-line="362" class="link-to-prism">src/combobox/combobox.component.ts:362</a></div>
1076
+ <div class="io-line">Defined in <a href="" data-line="371" class="link-to-prism">src/combobox/combobox.component.ts:371</a></div>
1065
1077
  </td>
1066
1078
  </tr>
1067
1079
  <tr>
1068
1080
  <td class="col-md-4">
1069
1081
  <div class="io-description"><p>Overrides the automatic dropUp.</p>
1082
+ </div>
1083
+ </td>
1084
+ </tr>
1085
+ </tbody>
1086
+ </table>
1087
+ <table class="table table-sm table-bordered">
1088
+ <tbody>
1089
+ <tr>
1090
+ <td class="col-md-4">
1091
+ <a name="fluid"></a>
1092
+ <b>fluid</b>
1093
+ </td>
1094
+ </tr>
1095
+ <tr>
1096
+ <td class="col-md-4">
1097
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
1098
+
1099
+ </td>
1100
+ </tr>
1101
+ <tr>
1102
+ <td class="col-md-4">
1103
+ <i>Default value : </i><code>false</code>
1104
+ </td>
1105
+ </tr>
1106
+ <tr>
1107
+ <td class="col-md-2" colspan="2">
1108
+ <div class="io-line">Defined in <a href="" data-line="383" class="link-to-prism">src/combobox/combobox.component.ts:383</a></div>
1109
+ </td>
1110
+ </tr>
1111
+ <tr>
1112
+ <td class="col-md-4">
1113
+ <div class="io-description"><p>Experimental: enable fluid state</p>
1070
1114
  </div>
1071
1115
  </td>
1072
1116
  </tr>
@@ -1088,7 +1132,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1088
1132
  </tr>
1089
1133
  <tr>
1090
1134
  <td class="col-md-2" colspan="2">
1091
- <div class="io-line">Defined in <a href="" data-line="318" class="link-to-prism">src/combobox/combobox.component.ts:318</a></div>
1135
+ <div class="io-line">Defined in <a href="" data-line="327" class="link-to-prism">src/combobox/combobox.component.ts:327</a></div>
1092
1136
  </td>
1093
1137
  </tr>
1094
1138
  <tr>
@@ -1120,7 +1164,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1120
1164
  </tr>
1121
1165
  <tr>
1122
1166
  <td class="col-md-2" colspan="2">
1123
- <div class="io-line">Defined in <a href="" data-line="314" class="link-to-prism">src/combobox/combobox.component.ts:314</a></div>
1167
+ <div class="io-line">Defined in <a href="" data-line="323" class="link-to-prism">src/combobox/combobox.component.ts:323</a></div>
1124
1168
  </td>
1125
1169
  </tr>
1126
1170
  <tr>
@@ -1152,7 +1196,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1152
1196
  </tr>
1153
1197
  <tr>
1154
1198
  <td class="col-md-2" colspan="2">
1155
- <div class="io-line">Defined in <a href="" data-line="266" class="link-to-prism">src/combobox/combobox.component.ts:266</a></div>
1199
+ <div class="io-line">Defined in <a href="" data-line="275" class="link-to-prism">src/combobox/combobox.component.ts:275</a></div>
1156
1200
  </td>
1157
1201
  </tr>
1158
1202
  </tbody>
@@ -1178,7 +1222,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1178
1222
  </tr>
1179
1223
  <tr>
1180
1224
  <td class="col-md-2" colspan="2">
1181
- <div class="io-line">Defined in <a href="" data-line="326" class="link-to-prism">src/combobox/combobox.component.ts:326</a></div>
1225
+ <div class="io-line">Defined in <a href="" data-line="335" class="link-to-prism">src/combobox/combobox.component.ts:335</a></div>
1182
1226
  </td>
1183
1227
  </tr>
1184
1228
  <tr>
@@ -1205,7 +1249,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1205
1249
  </tr>
1206
1250
  <tr>
1207
1251
  <td class="col-md-2" colspan="2">
1208
- <div class="io-line">Defined in <a href="" data-line="330" class="link-to-prism">src/combobox/combobox.component.ts:330</a></div>
1252
+ <div class="io-line">Defined in <a href="" data-line="339" class="link-to-prism">src/combobox/combobox.component.ts:339</a></div>
1209
1253
  </td>
1210
1254
  </tr>
1211
1255
  <tr>
@@ -1237,7 +1281,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1237
1281
  </tr>
1238
1282
  <tr>
1239
1283
  <td class="col-md-2" colspan="2">
1240
- <div class="io-line">Defined in <a href="" data-line="294" class="link-to-prism">src/combobox/combobox.component.ts:294</a></div>
1284
+ <div class="io-line">Defined in <a href="" data-line="303" class="link-to-prism">src/combobox/combobox.component.ts:303</a></div>
1241
1285
  </td>
1242
1286
  </tr>
1243
1287
  <tr>
@@ -1282,7 +1326,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1282
1326
  </tr>
1283
1327
  <tr>
1284
1328
  <td class="col-md-2" colspan="2">
1285
- <div class="io-line">Defined in <a href="" data-line="306" class="link-to-prism">src/combobox/combobox.component.ts:306</a></div>
1329
+ <div class="io-line">Defined in <a href="" data-line="315" class="link-to-prism">src/combobox/combobox.component.ts:315</a></div>
1286
1330
  </td>
1287
1331
  </tr>
1288
1332
  <tr>
@@ -1309,7 +1353,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1309
1353
  </tr>
1310
1354
  <tr>
1311
1355
  <td class="col-md-2" colspan="2">
1312
- <div class="io-line">Defined in <a href="" data-line="310" class="link-to-prism">src/combobox/combobox.component.ts:310</a></div>
1356
+ <div class="io-line">Defined in <a href="" data-line="319" class="link-to-prism">src/combobox/combobox.component.ts:319</a></div>
1313
1357
  </td>
1314
1358
  </tr>
1315
1359
  <tr>
@@ -1341,7 +1385,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1341
1385
  </tr>
1342
1386
  <tr>
1343
1387
  <td class="col-md-2" colspan="2">
1344
- <div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/combobox/combobox.component.ts:267</a></div>
1388
+ <div class="io-line">Defined in <a href="" data-line="276" class="link-to-prism">src/combobox/combobox.component.ts:276</a></div>
1345
1389
  </td>
1346
1390
  </tr>
1347
1391
  </tbody>
@@ -1367,7 +1411,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1367
1411
  </tr>
1368
1412
  <tr>
1369
1413
  <td class="col-md-2" colspan="2">
1370
- <div class="io-line">Defined in <a href="" data-line="342" class="link-to-prism">src/combobox/combobox.component.ts:342</a></div>
1414
+ <div class="io-line">Defined in <a href="" data-line="351" class="link-to-prism">src/combobox/combobox.component.ts:351</a></div>
1371
1415
  </td>
1372
1416
  </tr>
1373
1417
  <tr>
@@ -1394,7 +1438,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1394
1438
  </tr>
1395
1439
  <tr>
1396
1440
  <td class="col-md-2" colspan="2">
1397
- <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/combobox/combobox.component.ts:208</a></div>
1441
+ <div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/combobox/combobox.component.ts:217</a></div>
1398
1442
  </td>
1399
1443
  </tr>
1400
1444
  <tr>
@@ -1421,7 +1465,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1421
1465
  </tr>
1422
1466
  <tr>
1423
1467
  <td class="col-md-2" colspan="2">
1424
- <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/combobox/combobox.component.ts:198</a></div>
1468
+ <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/combobox/combobox.component.ts:207</a></div>
1425
1469
  </td>
1426
1470
  </tr>
1427
1471
  <tr>
@@ -1453,7 +1497,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1453
1497
  </tr>
1454
1498
  <tr>
1455
1499
  <td class="col-md-2" colspan="2">
1456
- <div class="io-line">Defined in <a href="" data-line="370" class="link-to-prism">src/combobox/combobox.component.ts:370</a></div>
1500
+ <div class="io-line">Defined in <a href="" data-line="379" class="link-to-prism">src/combobox/combobox.component.ts:379</a></div>
1457
1501
  </td>
1458
1502
  </tr>
1459
1503
  <tr>
@@ -1485,7 +1529,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1485
1529
  </tr>
1486
1530
  <tr>
1487
1531
  <td class="col-md-2" colspan="2">
1488
- <div class="io-line">Defined in <a href="" data-line="353" class="link-to-prism">src/combobox/combobox.component.ts:353</a></div>
1532
+ <div class="io-line">Defined in <a href="" data-line="362" class="link-to-prism">src/combobox/combobox.component.ts:362</a></div>
1489
1533
  </td>
1490
1534
  </tr>
1491
1535
  <tr>
@@ -1520,7 +1564,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1520
1564
  </tr>
1521
1565
  <tr>
1522
1566
  <td class="col-md-2" colspan="2">
1523
- <div class="io-line">Defined in <a href="" data-line="302" class="link-to-prism">src/combobox/combobox.component.ts:302</a></div>
1567
+ <div class="io-line">Defined in <a href="" data-line="311" class="link-to-prism">src/combobox/combobox.component.ts:311</a></div>
1524
1568
  </td>
1525
1569
  </tr>
1526
1570
  <tr>
@@ -1552,7 +1596,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1552
1596
  </tr>
1553
1597
  <tr>
1554
1598
  <td class="col-md-2" colspan="2">
1555
- <div class="io-line">Defined in <a href="" data-line="346" class="link-to-prism">src/combobox/combobox.component.ts:346</a></div>
1599
+ <div class="io-line">Defined in <a href="" data-line="355" class="link-to-prism">src/combobox/combobox.component.ts:355</a></div>
1556
1600
  </td>
1557
1601
  </tr>
1558
1602
  </tbody>
@@ -1578,7 +1622,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1578
1622
  </tr>
1579
1623
  <tr>
1580
1624
  <td class="col-md-2" colspan="2">
1581
- <div class="io-line">Defined in <a href="" data-line="298" class="link-to-prism">src/combobox/combobox.component.ts:298</a></div>
1625
+ <div class="io-line">Defined in <a href="" data-line="307" class="link-to-prism">src/combobox/combobox.component.ts:307</a></div>
1582
1626
  </td>
1583
1627
  </tr>
1584
1628
  <tr>
@@ -1610,7 +1654,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1610
1654
  </tr>
1611
1655
  <tr>
1612
1656
  <td class="col-md-2" colspan="2">
1613
- <div class="io-line">Defined in <a href="" data-line="334" class="link-to-prism">src/combobox/combobox.component.ts:334</a></div>
1657
+ <div class="io-line">Defined in <a href="" data-line="343" class="link-to-prism">src/combobox/combobox.component.ts:343</a></div>
1614
1658
  </td>
1615
1659
  </tr>
1616
1660
  <tr>
@@ -1637,7 +1681,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1637
1681
  </tr>
1638
1682
  <tr>
1639
1683
  <td class="col-md-2" colspan="2">
1640
- <div class="io-line">Defined in <a href="" data-line="338" class="link-to-prism">src/combobox/combobox.component.ts:338</a></div>
1684
+ <div class="io-line">Defined in <a href="" data-line="347" class="link-to-prism">src/combobox/combobox.component.ts:347</a></div>
1641
1685
  </td>
1642
1686
  </tr>
1643
1687
  <tr>
@@ -1667,7 +1711,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1667
1711
  </tr>
1668
1712
  <tr>
1669
1713
  <td class="col-md-2" colspan="2">
1670
- <div class="io-line">Defined in <a href="" data-line="422" class="link-to-prism">src/combobox/combobox.component.ts:422</a></div>
1714
+ <div class="io-line">Defined in <a href="" data-line="435" class="link-to-prism">src/combobox/combobox.component.ts:435</a></div>
1671
1715
  </td>
1672
1716
  </tr>
1673
1717
  <tr>
@@ -1694,7 +1738,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1694
1738
  </tr>
1695
1739
  <tr>
1696
1740
  <td class="col-md-2" colspan="2">
1697
- <div class="io-line">Defined in <a href="" data-line="418" class="link-to-prism">src/combobox/combobox.component.ts:418</a></div>
1741
+ <div class="io-line">Defined in <a href="" data-line="431" class="link-to-prism">src/combobox/combobox.component.ts:431</a></div>
1698
1742
  </td>
1699
1743
  </tr>
1700
1744
  <tr>
@@ -1721,7 +1765,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1721
1765
  </tr>
1722
1766
  <tr>
1723
1767
  <td class="col-md-2" colspan="2">
1724
- <div class="io-line">Defined in <a href="" data-line="420" class="link-to-prism">src/combobox/combobox.component.ts:420</a></div>
1768
+ <div class="io-line">Defined in <a href="" data-line="433" class="link-to-prism">src/combobox/combobox.component.ts:433</a></div>
1725
1769
  </td>
1726
1770
  </tr>
1727
1771
  <tr>
@@ -1748,7 +1792,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1748
1792
  </tr>
1749
1793
  <tr>
1750
1794
  <td class="col-md-2" colspan="2">
1751
- <div class="io-line">Defined in <a href="" data-line="382" class="link-to-prism">src/combobox/combobox.component.ts:382</a></div>
1795
+ <div class="io-line">Defined in <a href="" data-line="395" class="link-to-prism">src/combobox/combobox.component.ts:395</a></div>
1752
1796
  </td>
1753
1797
  </tr>
1754
1798
  <tr>
@@ -1779,7 +1823,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1779
1823
  </tr>
1780
1824
  <tr>
1781
1825
  <td class="col-md-2" colspan="2">
1782
- <div class="io-line">Defined in <a href="" data-line="409" class="link-to-prism">src/combobox/combobox.component.ts:409</a></div>
1826
+ <div class="io-line">Defined in <a href="" data-line="422" class="link-to-prism">src/combobox/combobox.component.ts:422</a></div>
1783
1827
  </td>
1784
1828
  </tr>
1785
1829
  <tr>
@@ -1829,38 +1873,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1829
1873
  </tr>
1830
1874
  <tr>
1831
1875
  <td class="col-md-4">
1832
- <div class="io-line">Defined in <a href="" data-line="428" class="link-to-prism">src/combobox/combobox.component.ts:428</a></div>
1833
- </td>
1834
- </tr>
1835
-
1836
-
1837
- </tbody>
1838
- </table>
1839
- <table class="table table-sm table-bordered">
1840
- <tbody>
1841
- <tr>
1842
- <td class="col-md-4">
1843
- <a name="style.display"></a>
1844
- <span class="name">
1845
- <span ><b>style.display</b></span>
1846
- <a href="#style.display"><span class="icon ion-ios-link"></span></a>
1847
- </span>
1848
- </td>
1849
- </tr>
1850
- <tr>
1851
- <td class="col-md-4">
1852
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
1853
-
1854
- </td>
1855
- </tr>
1856
- <tr>
1857
- <td class="col-md-4">
1858
- <i>Default value : </i><code>&quot;block&quot;</code>
1859
- </td>
1860
- </tr>
1861
- <tr>
1862
- <td class="col-md-4">
1863
- <div class="io-line">Defined in <a href="" data-line="429" class="link-to-prism">src/combobox/combobox.component.ts:429</a></div>
1876
+ <div class="io-line">Defined in <a href="" data-line="441" class="link-to-prism">src/combobox/combobox.component.ts:441</a></div>
1864
1877
  </td>
1865
1878
  </tr>
1866
1879
 
@@ -1895,8 +1908,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1895
1908
 
1896
1909
  <tr>
1897
1910
  <td class="col-md-4">
1898
- <div class="io-line">Defined in <a href="" data-line="580"
1899
- class="link-to-prism">src/combobox/combobox.component.ts:580</a></div>
1911
+ <div class="io-line">Defined in <a href="" data-line="594"
1912
+ class="link-to-prism">src/combobox/combobox.component.ts:594</a></div>
1900
1913
  </td>
1901
1914
  </tr>
1902
1915
 
@@ -1936,8 +1949,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1936
1949
 
1937
1950
  <tr>
1938
1951
  <td class="col-md-4">
1939
- <div class="io-line">Defined in <a href="" data-line="831"
1940
- class="link-to-prism">src/combobox/combobox.component.ts:831</a></div>
1952
+ <div class="io-line">Defined in <a href="" data-line="845"
1953
+ class="link-to-prism">src/combobox/combobox.component.ts:845</a></div>
1941
1954
  </td>
1942
1955
  </tr>
1943
1956
 
@@ -1975,8 +1988,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1975
1988
 
1976
1989
  <tr>
1977
1990
  <td class="col-md-4">
1978
- <div class="io-line">Defined in <a href="" data-line="842"
1979
- class="link-to-prism">src/combobox/combobox.component.ts:842</a></div>
1991
+ <div class="io-line">Defined in <a href="" data-line="856"
1992
+ class="link-to-prism">src/combobox/combobox.component.ts:856</a></div>
1980
1993
  </td>
1981
1994
  </tr>
1982
1995
 
@@ -2014,8 +2027,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
2014
2027
 
2015
2028
  <tr>
2016
2029
  <td class="col-md-4">
2017
- <div class="io-line">Defined in <a href="" data-line="811"
2018
- class="link-to-prism">src/combobox/combobox.component.ts:811</a></div>
2030
+ <div class="io-line">Defined in <a href="" data-line="825"
2031
+ class="link-to-prism">src/combobox/combobox.component.ts:825</a></div>
2019
2032
  </td>
2020
2033
  </tr>
2021
2034
 
@@ -2083,8 +2096,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
2083
2096
 
2084
2097
  <tr>
2085
2098
  <td class="col-md-4">
2086
- <div class="io-line">Defined in <a href="" data-line="605"
2087
- class="link-to-prism">src/combobox/combobox.component.ts:605</a></div>
2099
+ <div class="io-line">Defined in <a href="" data-line="619"
2100
+ class="link-to-prism">src/combobox/combobox.component.ts:619</a></div>
2088
2101
  </td>
2089
2102
  </tr>
2090
2103
 
@@ -2120,8 +2133,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
2120
2133
 
2121
2134
  <tr>
2122
2135
  <td class="col-md-4">
2123
- <div class="io-line">Defined in <a href="" data-line="871"
2124
- class="link-to-prism">src/combobox/combobox.component.ts:871</a></div>
2136
+ <div class="io-line">Defined in <a href="" data-line="885"
2137
+ class="link-to-prism">src/combobox/combobox.component.ts:885</a></div>
2125
2138
  </td>
2126
2139
  </tr>
2127
2140
 
@@ -2185,8 +2198,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
2185
2198
 
2186
2199
  <tr>
2187
2200
  <td class="col-md-4">
2188
- <div class="io-line">Defined in <a href="" data-line="851"
2189
- class="link-to-prism">src/combobox/combobox.component.ts:851</a></div>
2201
+ <div class="io-line">Defined in <a href="" data-line="865"
2202
+ class="link-to-prism">src/combobox/combobox.component.ts:865</a></div>
2190
2203
  </td>
2191
2204
  </tr>
2192
2205
 
@@ -2227,8 +2240,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2227
2240
 
2228
2241
  <tr>
2229
2242
  <td class="col-md-4">
2230
- <div class="io-line">Defined in <a href="" data-line="892"
2231
- class="link-to-prism">src/combobox/combobox.component.ts:892</a></div>
2243
+ <div class="io-line">Defined in <a href="" data-line="910"
2244
+ class="link-to-prism">src/combobox/combobox.component.ts:910</a></div>
2232
2245
  </td>
2233
2246
  </tr>
2234
2247
 
@@ -2264,8 +2277,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2264
2277
 
2265
2278
  <tr>
2266
2279
  <td class="col-md-4">
2267
- <div class="io-line">Defined in <a href="" data-line="783"
2268
- class="link-to-prism">src/combobox/combobox.component.ts:783</a></div>
2280
+ <div class="io-line">Defined in <a href="" data-line="797"
2281
+ class="link-to-prism">src/combobox/combobox.component.ts:797</a></div>
2269
2282
  </td>
2270
2283
  </tr>
2271
2284
 
@@ -2329,8 +2342,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2329
2342
 
2330
2343
  <tr>
2331
2344
  <td class="col-md-4">
2332
- <div class="io-line">Defined in <a href="" data-line="671"
2333
- class="link-to-prism">src/combobox/combobox.component.ts:671</a></div>
2345
+ <div class="io-line">Defined in <a href="" data-line="685"
2346
+ class="link-to-prism">src/combobox/combobox.component.ts:685</a></div>
2334
2347
  </td>
2335
2348
  </tr>
2336
2349
 
@@ -2394,8 +2407,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2394
2407
 
2395
2408
  <tr>
2396
2409
  <td class="col-md-4">
2397
- <div class="io-line">Defined in <a href="" data-line="691"
2398
- class="link-to-prism">src/combobox/combobox.component.ts:691</a></div>
2410
+ <div class="io-line">Defined in <a href="" data-line="705"
2411
+ class="link-to-prism">src/combobox/combobox.component.ts:705</a></div>
2399
2412
  </td>
2400
2413
  </tr>
2401
2414
 
@@ -2413,6 +2426,73 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2413
2426
  </tr>
2414
2427
  </tbody>
2415
2428
  </table>
2429
+ <table class="table table-sm table-bordered">
2430
+ <tbody>
2431
+ <tr>
2432
+ <td class="col-md-4">
2433
+ <a name="handleFocus"></a>
2434
+ <span class="name">
2435
+ <span ><b>handleFocus</b></span>
2436
+ <a href="#handleFocus"><span class="icon ion-ios-link"></span></a>
2437
+ </span>
2438
+ </td>
2439
+ </tr>
2440
+ <tr>
2441
+ <td class="col-md-4">
2442
+ <code>handleFocus(event: FocusEvent)</code>
2443
+ </td>
2444
+ </tr>
2445
+
2446
+
2447
+ <tr>
2448
+ <td class="col-md-4">
2449
+ <div class="io-line">Defined in <a href="" data-line="894"
2450
+ class="link-to-prism">src/combobox/combobox.component.ts:894</a></div>
2451
+ </td>
2452
+ </tr>
2453
+
2454
+
2455
+ <tr>
2456
+ <td class="col-md-4">
2457
+
2458
+ <div class="io-description">
2459
+ <b>Parameters :</b>
2460
+
2461
+ <table class="params">
2462
+ <thead>
2463
+ <tr>
2464
+ <td>Name</td>
2465
+ <td>Type</td>
2466
+ <td>Optional</td>
2467
+ </tr>
2468
+ </thead>
2469
+ <tbody>
2470
+ <tr>
2471
+ <td>event</td>
2472
+ <td>
2473
+ <code>FocusEvent</code>
2474
+ </td>
2475
+
2476
+ <td>
2477
+ No
2478
+ </td>
2479
+
2480
+
2481
+ </tr>
2482
+ </tbody>
2483
+ </table>
2484
+ </div>
2485
+ <div class="io-description">
2486
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
2487
+
2488
+ </div>
2489
+ <div class="io-description">
2490
+
2491
+ </div>
2492
+ </td>
2493
+ </tr>
2494
+ </tbody>
2495
+ </table>
2416
2496
  <table class="table table-sm table-bordered">
2417
2497
  <tbody>
2418
2498
  <tr>
@@ -2442,8 +2522,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2442
2522
 
2443
2523
  <tr>
2444
2524
  <td class="col-md-4">
2445
- <div class="io-line">Defined in <a href="" data-line="580"
2446
- class="link-to-prism">src/combobox/combobox.component.ts:580</a></div>
2525
+ <div class="io-line">Defined in <a href="" data-line="594"
2526
+ class="link-to-prism">src/combobox/combobox.component.ts:594</a></div>
2447
2527
  </td>
2448
2528
  </tr>
2449
2529
 
@@ -2513,8 +2593,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2513
2593
 
2514
2594
  <tr>
2515
2595
  <td class="col-md-4">
2516
- <div class="io-line">Defined in <a href="" data-line="804"
2517
- class="link-to-prism">src/combobox/combobox.component.ts:804</a></div>
2596
+ <div class="io-line">Defined in <a href="" data-line="818"
2597
+ class="link-to-prism">src/combobox/combobox.component.ts:818</a></div>
2518
2598
  </td>
2519
2599
  </tr>
2520
2600
 
@@ -2576,8 +2656,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2576
2656
 
2577
2657
  <tr>
2578
2658
  <td class="col-md-4">
2579
- <div class="io-line">Defined in <a href="" data-line="489"
2580
- class="link-to-prism">src/combobox/combobox.component.ts:489</a></div>
2659
+ <div class="io-line">Defined in <a href="" data-line="503"
2660
+ class="link-to-prism">src/combobox/combobox.component.ts:503</a></div>
2581
2661
  </td>
2582
2662
  </tr>
2583
2663
 
@@ -2616,8 +2696,8 @@ Subscribes to select events and handles focus/filtering/initial list updates</p>
2616
2696
 
2617
2697
  <tr>
2618
2698
  <td class="col-md-4">
2619
- <div class="io-line">Defined in <a href="" data-line="554"
2620
- class="link-to-prism">src/combobox/combobox.component.ts:554</a></div>
2699
+ <div class="io-line">Defined in <a href="" data-line="568"
2700
+ class="link-to-prism">src/combobox/combobox.component.ts:568</a></div>
2621
2701
  </td>
2622
2702
  </tr>
2623
2703
 
@@ -2655,8 +2735,8 @@ Subscribes to select events and handles focus/filtering/initial list updates</p>
2655
2735
 
2656
2736
  <tr>
2657
2737
  <td class="col-md-4">
2658
- <div class="io-line">Defined in <a href="" data-line="473"
2659
- class="link-to-prism">src/combobox/combobox.component.ts:473</a></div>
2738
+ <div class="io-line">Defined in <a href="" data-line="487"
2739
+ class="link-to-prism">src/combobox/combobox.component.ts:487</a></div>
2660
2740
  </td>
2661
2741
  </tr>
2662
2742
 
@@ -2721,8 +2801,8 @@ Updates pills if necessary.</p>
2721
2801
 
2722
2802
  <tr>
2723
2803
  <td class="col-md-4">
2724
- <div class="io-line">Defined in <a href="" data-line="570"
2725
- class="link-to-prism">src/combobox/combobox.component.ts:570</a></div>
2804
+ <div class="io-line">Defined in <a href="" data-line="584"
2805
+ class="link-to-prism">src/combobox/combobox.component.ts:584</a></div>
2726
2806
  </td>
2727
2807
  </tr>
2728
2808
 
@@ -2760,8 +2840,8 @@ Updates pills if necessary.</p>
2760
2840
 
2761
2841
  <tr>
2762
2842
  <td class="col-md-4">
2763
- <div class="io-line">Defined in <a href="" data-line="642"
2764
- class="link-to-prism">src/combobox/combobox.component.ts:642</a></div>
2843
+ <div class="io-line">Defined in <a href="" data-line="656"
2844
+ class="link-to-prism">src/combobox/combobox.component.ts:656</a></div>
2765
2845
  </td>
2766
2846
  </tr>
2767
2847
 
@@ -2799,8 +2879,8 @@ Updates pills if necessary.</p>
2799
2879
 
2800
2880
  <tr>
2801
2881
  <td class="col-md-4">
2802
- <div class="io-line">Defined in <a href="" data-line="739"
2803
- class="link-to-prism">src/combobox/combobox.component.ts:739</a></div>
2882
+ <div class="io-line">Defined in <a href="" data-line="753"
2883
+ class="link-to-prism">src/combobox/combobox.component.ts:753</a></div>
2804
2884
  </td>
2805
2885
  </tr>
2806
2886
 
@@ -2881,8 +2961,8 @@ Updates pills if necessary.</p>
2881
2961
 
2882
2962
  <tr>
2883
2963
  <td class="col-md-4">
2884
- <div class="io-line">Defined in <a href="" data-line="772"
2885
- class="link-to-prism">src/combobox/combobox.component.ts:772</a></div>
2964
+ <div class="io-line">Defined in <a href="" data-line="786"
2965
+ class="link-to-prism">src/combobox/combobox.component.ts:786</a></div>
2886
2966
  </td>
2887
2967
  </tr>
2888
2968
 
@@ -2952,8 +3032,8 @@ Updates pills if necessary.</p>
2952
3032
 
2953
3033
  <tr>
2954
3034
  <td class="col-md-4">
2955
- <div class="io-line">Defined in <a href="" data-line="705"
2956
- class="link-to-prism">src/combobox/combobox.component.ts:705</a></div>
3035
+ <div class="io-line">Defined in <a href="" data-line="719"
3036
+ class="link-to-prism">src/combobox/combobox.component.ts:719</a></div>
2957
3037
  </td>
2958
3038
  </tr>
2959
3039
 
@@ -2991,8 +3071,8 @@ Updates pills if necessary.</p>
2991
3071
 
2992
3072
  <tr>
2993
3073
  <td class="col-md-4">
2994
- <div class="io-line">Defined in <a href="" data-line="646"
2995
- class="link-to-prism">src/combobox/combobox.component.ts:646</a></div>
3074
+ <div class="io-line">Defined in <a href="" data-line="660"
3075
+ class="link-to-prism">src/combobox/combobox.component.ts:660</a></div>
2996
3076
  </td>
2997
3077
  </tr>
2998
3078
 
@@ -3058,8 +3138,8 @@ Updates pills if necessary.</p>
3058
3138
 
3059
3139
  <tr>
3060
3140
  <td class="col-md-4">
3061
- <div class="io-line">Defined in <a href="" data-line="650"
3062
- class="link-to-prism">src/combobox/combobox.component.ts:650</a></div>
3141
+ <div class="io-line">Defined in <a href="" data-line="664"
3142
+ class="link-to-prism">src/combobox/combobox.component.ts:664</a></div>
3063
3143
  </td>
3064
3144
  </tr>
3065
3145
 
@@ -3125,8 +3205,8 @@ Updates pills if necessary.</p>
3125
3205
 
3126
3206
  <tr>
3127
3207
  <td class="col-md-4">
3128
- <div class="io-line">Defined in <a href="" data-line="659"
3129
- class="link-to-prism">src/combobox/combobox.component.ts:659</a></div>
3208
+ <div class="io-line">Defined in <a href="" data-line="673"
3209
+ class="link-to-prism">src/combobox/combobox.component.ts:673</a></div>
3130
3210
  </td>
3131
3211
  </tr>
3132
3212
 
@@ -3197,8 +3277,8 @@ Updates pills if necessary.</p>
3197
3277
 
3198
3278
  <tr>
3199
3279
  <td class="col-md-4">
3200
- <div class="io-line">Defined in <a href="" data-line="728"
3201
- class="link-to-prism">src/combobox/combobox.component.ts:728</a></div>
3280
+ <div class="io-line">Defined in <a href="" data-line="742"
3281
+ class="link-to-prism">src/combobox/combobox.component.ts:742</a></div>
3202
3282
  </td>
3203
3283
  </tr>
3204
3284
 
@@ -3238,8 +3318,8 @@ Updates pills if necessary.</p>
3238
3318
 
3239
3319
  <tr>
3240
3320
  <td class="col-md-4">
3241
- <div class="io-line">Defined in <a href="" data-line="666"
3242
- class="link-to-prism">src/combobox/combobox.component.ts:666</a></div>
3321
+ <div class="io-line">Defined in <a href="" data-line="680"
3322
+ class="link-to-prism">src/combobox/combobox.component.ts:680</a></div>
3243
3323
  </td>
3244
3324
  </tr>
3245
3325
 
@@ -3279,8 +3359,8 @@ Updates pills if necessary.</p>
3279
3359
 
3280
3360
  <tr>
3281
3361
  <td class="col-md-4">
3282
- <div class="io-line">Defined in <a href="" data-line="880"
3283
- class="link-to-prism">src/combobox/combobox.component.ts:880</a></div>
3362
+ <div class="io-line">Defined in <a href="" data-line="898"
3363
+ class="link-to-prism">src/combobox/combobox.component.ts:898</a></div>
3284
3364
  </td>
3285
3365
  </tr>
3286
3366
 
@@ -3316,8 +3396,8 @@ Updates pills if necessary.</p>
3316
3396
 
3317
3397
  <tr>
3318
3398
  <td class="col-md-4">
3319
- <div class="io-line">Defined in <a href="" data-line="610"
3320
- class="link-to-prism">src/combobox/combobox.component.ts:610</a></div>
3399
+ <div class="io-line">Defined in <a href="" data-line="624"
3400
+ class="link-to-prism">src/combobox/combobox.component.ts:624</a></div>
3321
3401
  </td>
3322
3402
  </tr>
3323
3403
 
@@ -3388,7 +3468,7 @@ Updates pills if necessary.</p>
3388
3468
  </tr>
3389
3469
  <tr>
3390
3470
  <td class="col-md-4">
3391
- <div class="io-line">Defined in <a href="" data-line="457" class="link-to-prism">src/combobox/combobox.component.ts:457</a></div>
3471
+ <div class="io-line">Defined in <a href="" data-line="469" class="link-to-prism">src/combobox/combobox.component.ts:469</a></div>
3392
3472
  </td>
3393
3473
  </tr>
3394
3474
 
@@ -3414,7 +3494,7 @@ Updates pills if necessary.</p>
3414
3494
  </tr>
3415
3495
  <tr>
3416
3496
  <td class="col-md-4">
3417
- <div class="io-line">Defined in <a href="" data-line="455" class="link-to-prism">src/combobox/combobox.component.ts:455</a></div>
3497
+ <div class="io-line">Defined in <a href="" data-line="467" class="link-to-prism">src/combobox/combobox.component.ts:467</a></div>
3418
3498
  </td>
3419
3499
  </tr>
3420
3500
 
@@ -3440,7 +3520,7 @@ Updates pills if necessary.</p>
3440
3520
  </tr>
3441
3521
  <tr>
3442
3522
  <td class="col-md-4">
3443
- <div class="io-line">Defined in <a href="" data-line="454" class="link-to-prism">src/combobox/combobox.component.ts:454</a></div>
3523
+ <div class="io-line">Defined in <a href="" data-line="466" class="link-to-prism">src/combobox/combobox.component.ts:466</a></div>
3444
3524
  </td>
3445
3525
  </tr>
3446
3526
 
@@ -3466,7 +3546,7 @@ Updates pills if necessary.</p>
3466
3546
  </tr>
3467
3547
  <tr>
3468
3548
  <td class="col-md-4">
3469
- <div class="io-line">Defined in <a href="" data-line="456" class="link-to-prism">src/combobox/combobox.component.ts:456</a></div>
3549
+ <div class="io-line">Defined in <a href="" data-line="468" class="link-to-prism">src/combobox/combobox.component.ts:468</a></div>
3470
3550
  </td>
3471
3551
  </tr>
3472
3552
 
@@ -3492,7 +3572,7 @@ Updates pills if necessary.</p>
3492
3572
  </tr>
3493
3573
  <tr>
3494
3574
  <td class="col-md-4">
3495
- <div class="io-line">Defined in <a href="" data-line="452" class="link-to-prism">src/combobox/combobox.component.ts:452</a></div>
3575
+ <div class="io-line">Defined in <a href="" data-line="464" class="link-to-prism">src/combobox/combobox.component.ts:464</a></div>
3496
3576
  </td>
3497
3577
  </tr>
3498
3578
 
@@ -3517,7 +3597,7 @@ Updates pills if necessary.</p>
3517
3597
  </tr>
3518
3598
  <tr>
3519
3599
  <td class="col-md-4">
3520
- <div class="io-line">Defined in <a href="" data-line="445" class="link-to-prism">src/combobox/combobox.component.ts:445</a></div>
3600
+ <div class="io-line">Defined in <a href="" data-line="457" class="link-to-prism">src/combobox/combobox.component.ts:457</a></div>
3521
3601
  </td>
3522
3602
  </tr>
3523
3603
 
@@ -3534,22 +3614,22 @@ Updates pills if necessary.</p>
3534
3614
  <tbody>
3535
3615
  <tr>
3536
3616
  <td class="col-md-4">
3537
- <a name="_openMenuAria"></a>
3617
+ <a name="_isFocused"></a>
3538
3618
  <span class="name">
3539
3619
  <span class="modifier">Protected</span>
3540
- <span ><b>_openMenuAria</b></span>
3541
- <a href="#_openMenuAria"><span class="icon ion-ios-link"></span></a>
3620
+ <span ><b>_isFocused</b></span>
3621
+ <a href="#_isFocused"><span class="icon ion-ios-link"></span></a>
3542
3622
  </span>
3543
3623
  </td>
3544
3624
  </tr>
3545
3625
  <tr>
3546
3626
  <td class="col-md-4">
3547
- <i>Default value : </i><code>this.i18n.getOverridable(&quot;COMBOBOX.A11Y.OPEN_MENU&quot;)</code>
3627
+ <i>Default value : </i><code>false</code>
3548
3628
  </td>
3549
3629
  </tr>
3550
3630
  <tr>
3551
3631
  <td class="col-md-4">
3552
- <div class="io-line">Defined in <a href="" data-line="453" class="link-to-prism">src/combobox/combobox.component.ts:453</a></div>
3632
+ <div class="io-line">Defined in <a href="" data-line="471" class="link-to-prism">src/combobox/combobox.component.ts:471</a></div>
3553
3633
  </td>
3554
3634
  </tr>
3555
3635
 
@@ -3560,22 +3640,22 @@ Updates pills if necessary.</p>
3560
3640
  <tbody>
3561
3641
  <tr>
3562
3642
  <td class="col-md-4">
3563
- <a name="_placeholder"></a>
3643
+ <a name="_openMenuAria"></a>
3564
3644
  <span class="name">
3565
3645
  <span class="modifier">Protected</span>
3566
- <span ><b>_placeholder</b></span>
3567
- <a href="#_placeholder"><span class="icon ion-ios-link"></span></a>
3646
+ <span ><b>_openMenuAria</b></span>
3647
+ <a href="#_openMenuAria"><span class="icon ion-ios-link"></span></a>
3568
3648
  </span>
3569
3649
  </td>
3570
3650
  </tr>
3571
3651
  <tr>
3572
3652
  <td class="col-md-4">
3573
- <i>Default value : </i><code>this.i18n.getOverridable(&quot;COMBOBOX.PLACEHOLDER&quot;)</code>
3653
+ <i>Default value : </i><code>this.i18n.getOverridable(&quot;COMBOBOX.A11Y.OPEN_MENU&quot;)</code>
3574
3654
  </td>
3575
3655
  </tr>
3576
3656
  <tr>
3577
3657
  <td class="col-md-4">
3578
- <div class="io-line">Defined in <a href="" data-line="451" class="link-to-prism">src/combobox/combobox.component.ts:451</a></div>
3658
+ <div class="io-line">Defined in <a href="" data-line="465" class="link-to-prism">src/combobox/combobox.component.ts:465</a></div>
3579
3659
  </td>
3580
3660
  </tr>
3581
3661
 
@@ -3586,28 +3666,22 @@ Updates pills if necessary.</p>
3586
3666
  <tbody>
3587
3667
  <tr>
3588
3668
  <td class="col-md-4">
3589
- <a name="comboBoxCount"></a>
3669
+ <a name="_placeholder"></a>
3590
3670
  <span class="name">
3591
- <span class="modifier">Static</span>
3592
- <span ><b>comboBoxCount</b></span>
3593
- <a href="#comboBoxCount"><span class="icon ion-ios-link"></span></a>
3671
+ <span class="modifier">Protected</span>
3672
+ <span ><b>_placeholder</b></span>
3673
+ <a href="#_placeholder"><span class="icon ion-ios-link"></span></a>
3594
3674
  </span>
3595
3675
  </td>
3596
3676
  </tr>
3597
3677
  <tr>
3598
3678
  <td class="col-md-4">
3599
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
3600
-
3601
- </td>
3602
- </tr>
3603
- <tr>
3604
- <td class="col-md-4">
3605
- <i>Default value : </i><code>0</code>
3679
+ <i>Default value : </i><code>this.i18n.getOverridable(&quot;COMBOBOX.PLACEHOLDER&quot;)</code>
3606
3680
  </td>
3607
3681
  </tr>
3608
3682
  <tr>
3609
3683
  <td class="col-md-4">
3610
- <div class="io-line">Defined in <a href="" data-line="265" class="link-to-prism">src/combobox/combobox.component.ts:265</a></div>
3684
+ <div class="io-line">Defined in <a href="" data-line="463" class="link-to-prism">src/combobox/combobox.component.ts:463</a></div>
3611
3685
  </td>
3612
3686
  </tr>
3613
3687
 
@@ -3618,37 +3692,28 @@ Updates pills if necessary.</p>
3618
3692
  <tbody>
3619
3693
  <tr>
3620
3694
  <td class="col-md-4">
3621
- <a name="display"></a>
3695
+ <a name="comboBoxCount"></a>
3622
3696
  <span class="name">
3623
- <span class="modifier"></span>
3624
- <span ><b>display</b></span>
3625
- <a href="#display"><span class="icon ion-ios-link"></span></a>
3697
+ <span class="modifier">Static</span>
3698
+ <span ><b>comboBoxCount</b></span>
3699
+ <a href="#comboBoxCount"><span class="icon ion-ios-link"></span></a>
3626
3700
  </span>
3627
3701
  </td>
3628
3702
  </tr>
3629
3703
  <tr>
3630
3704
  <td class="col-md-4">
3631
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
3705
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
3632
3706
 
3633
3707
  </td>
3634
3708
  </tr>
3635
3709
  <tr>
3636
3710
  <td class="col-md-4">
3637
- <i>Default value : </i><code>&quot;block&quot;</code>
3638
- </td>
3639
- </tr>
3640
- <tr>
3641
- <td class="col-md-4">
3642
- <b>Decorators : </b>
3643
- <br />
3644
- <code>
3645
- @HostBinding(&#x27;style.display&#x27;)<br />
3646
- </code>
3711
+ <i>Default value : </i><code>0</code>
3647
3712
  </td>
3648
3713
  </tr>
3649
3714
  <tr>
3650
3715
  <td class="col-md-4">
3651
- <div class="io-line">Defined in <a href="" data-line="429" class="link-to-prism">src/combobox/combobox.component.ts:429</a></div>
3716
+ <div class="io-line">Defined in <a href="" data-line="274" class="link-to-prism">src/combobox/combobox.component.ts:274</a></div>
3652
3717
  </td>
3653
3718
  </tr>
3654
3719
 
@@ -3678,7 +3743,7 @@ Updates pills if necessary.</p>
3678
3743
  </tr>
3679
3744
  <tr>
3680
3745
  <td class="col-md-4">
3681
- <div class="io-line">Defined in <a href="" data-line="425" class="link-to-prism">src/combobox/combobox.component.ts:425</a></div>
3746
+ <div class="io-line">Defined in <a href="" data-line="438" class="link-to-prism">src/combobox/combobox.component.ts:438</a></div>
3682
3747
  </td>
3683
3748
  </tr>
3684
3749
 
@@ -3713,7 +3778,7 @@ Updates pills if necessary.</p>
3713
3778
  </tr>
3714
3779
  <tr>
3715
3780
  <td class="col-md-4">
3716
- <div class="io-line">Defined in <a href="" data-line="428" class="link-to-prism">src/combobox/combobox.component.ts:428</a></div>
3781
+ <div class="io-line">Defined in <a href="" data-line="441" class="link-to-prism">src/combobox/combobox.component.ts:441</a></div>
3717
3782
  </td>
3718
3783
  </tr>
3719
3784
 
@@ -3749,7 +3814,7 @@ Updates pills if necessary.</p>
3749
3814
  </tr>
3750
3815
  <tr>
3751
3816
  <td class="col-md-4">
3752
- <div class="io-line">Defined in <a href="" data-line="426" class="link-to-prism">src/combobox/combobox.component.ts:426</a></div>
3817
+ <div class="io-line">Defined in <a href="" data-line="439" class="link-to-prism">src/combobox/combobox.component.ts:439</a></div>
3753
3818
  </td>
3754
3819
  </tr>
3755
3820
 
@@ -3774,7 +3839,7 @@ Updates pills if necessary.</p>
3774
3839
  </tr>
3775
3840
  <tr>
3776
3841
  <td class="col-md-4">
3777
- <div class="io-line">Defined in <a href="" data-line="441" class="link-to-prism">src/combobox/combobox.component.ts:441</a></div>
3842
+ <div class="io-line">Defined in <a href="" data-line="453" class="link-to-prism">src/combobox/combobox.component.ts:453</a></div>
3778
3843
  </td>
3779
3844
  </tr>
3780
3845
 
@@ -3810,7 +3875,7 @@ Updates pills if necessary.</p>
3810
3875
  </tr>
3811
3876
  <tr>
3812
3877
  <td class="col-md-4">
3813
- <div class="io-line">Defined in <a href="" data-line="427" class="link-to-prism">src/combobox/combobox.component.ts:427</a></div>
3878
+ <div class="io-line">Defined in <a href="" data-line="440" class="link-to-prism">src/combobox/combobox.component.ts:440</a></div>
3814
3879
  </td>
3815
3880
  </tr>
3816
3881
 
@@ -3836,7 +3901,7 @@ Updates pills if necessary.</p>
3836
3901
  </tr>
3837
3902
  <tr>
3838
3903
  <td class="col-md-4">
3839
- <div class="io-line">Defined in <a href="" data-line="447" class="link-to-prism">src/combobox/combobox.component.ts:447</a></div>
3904
+ <div class="io-line">Defined in <a href="" data-line="459" class="link-to-prism">src/combobox/combobox.component.ts:459</a></div>
3840
3905
  </td>
3841
3906
  </tr>
3842
3907
 
@@ -3868,7 +3933,7 @@ Updates pills if necessary.</p>
3868
3933
  </tr>
3869
3934
  <tr>
3870
3935
  <td class="col-md-4">
3871
- <div class="io-line">Defined in <a href="" data-line="448" class="link-to-prism">src/combobox/combobox.component.ts:448</a></div>
3936
+ <div class="io-line">Defined in <a href="" data-line="460" class="link-to-prism">src/combobox/combobox.component.ts:460</a></div>
3872
3937
  </td>
3873
3938
  </tr>
3874
3939
 
@@ -3894,7 +3959,7 @@ Updates pills if necessary.</p>
3894
3959
  </tr>
3895
3960
  <tr>
3896
3961
  <td class="col-md-4">
3897
- <div class="io-line">Defined in <a href="" data-line="431" class="link-to-prism">src/combobox/combobox.component.ts:431</a></div>
3962
+ <div class="io-line">Defined in <a href="" data-line="443" class="link-to-prism">src/combobox/combobox.component.ts:443</a></div>
3898
3963
  </td>
3899
3964
  </tr>
3900
3965
 
@@ -3919,7 +3984,7 @@ Updates pills if necessary.</p>
3919
3984
  </tr>
3920
3985
  <tr>
3921
3986
  <td class="col-md-4">
3922
- <div class="io-line">Defined in <a href="" data-line="440" class="link-to-prism">src/combobox/combobox.component.ts:440</a></div>
3987
+ <div class="io-line">Defined in <a href="" data-line="452" class="link-to-prism">src/combobox/combobox.component.ts:452</a></div>
3923
3988
  </td>
3924
3989
  </tr>
3925
3990
 
@@ -3951,7 +4016,7 @@ Updates pills if necessary.</p>
3951
4016
  </tr>
3952
4017
  <tr>
3953
4018
  <td class="col-md-4">
3954
- <div class="io-line">Defined in <a href="" data-line="436" class="link-to-prism">src/combobox/combobox.component.ts:436</a></div>
4019
+ <div class="io-line">Defined in <a href="" data-line="448" class="link-to-prism">src/combobox/combobox.component.ts:448</a></div>
3955
4020
  </td>
3956
4021
  </tr>
3957
4022
 
@@ -3989,7 +4054,7 @@ Updates pills if necessary.</p>
3989
4054
  </tr>
3990
4055
  <tr>
3991
4056
  <td class="col-md-4">
3992
- <div class="io-line">Defined in <a href="" data-line="449" class="link-to-prism">src/combobox/combobox.component.ts:449</a></div>
4057
+ <div class="io-line">Defined in <a href="" data-line="461" class="link-to-prism">src/combobox/combobox.component.ts:461</a></div>
3993
4058
  </td>
3994
4059
  </tr>
3995
4060
 
@@ -4021,7 +4086,7 @@ Updates pills if necessary.</p>
4021
4086
  </tr>
4022
4087
  <tr>
4023
4088
  <td class="col-md-4">
4024
- <div class="io-line">Defined in <a href="" data-line="438" class="link-to-prism">src/combobox/combobox.component.ts:438</a></div>
4089
+ <div class="io-line">Defined in <a href="" data-line="450" class="link-to-prism">src/combobox/combobox.component.ts:450</a></div>
4025
4090
  </td>
4026
4091
  </tr>
4027
4092
 
@@ -4053,7 +4118,7 @@ Updates pills if necessary.</p>
4053
4118
  </tr>
4054
4119
  <tr>
4055
4120
  <td class="col-md-4">
4056
- <div class="io-line">Defined in <a href="" data-line="433" class="link-to-prism">src/combobox/combobox.component.ts:433</a></div>
4121
+ <div class="io-line">Defined in <a href="" data-line="445" class="link-to-prism">src/combobox/combobox.component.ts:445</a></div>
4057
4122
  </td>
4058
4123
  </tr>
4059
4124
 
@@ -4089,7 +4154,7 @@ Updates pills if necessary.</p>
4089
4154
  </tr>
4090
4155
  <tr>
4091
4156
  <td class="col-md-4">
4092
- <div class="io-line">Defined in <a href="" data-line="424" class="link-to-prism">src/combobox/combobox.component.ts:424</a></div>
4157
+ <div class="io-line">Defined in <a href="" data-line="437" class="link-to-prism">src/combobox/combobox.component.ts:437</a></div>
4093
4158
  </td>
4094
4159
  </tr>
4095
4160
 
@@ -4124,7 +4189,7 @@ Updates pills if necessary.</p>
4124
4189
  </tr>
4125
4190
  <tr>
4126
4191
  <td class="col-md-4">
4127
- <div class="io-line">Defined in <a href="" data-line="202" class="link-to-prism">src/combobox/combobox.component.ts:202</a></div>
4192
+ <div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/combobox/combobox.component.ts:211</a></div>
4128
4193
  </td>
4129
4194
  </tr>
4130
4195
 
@@ -4135,7 +4200,7 @@ Updates pills if necessary.</p>
4135
4200
  </tr>
4136
4201
  <tr>
4137
4202
  <td class="col-md-4">
4138
- <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/combobox/combobox.component.ts:198</a></div>
4203
+ <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/combobox/combobox.component.ts:207</a></div>
4139
4204
  </td>
4140
4205
  </tr>
4141
4206
  <tr>
@@ -4195,7 +4260,7 @@ Updates pills if necessary.</p>
4195
4260
  </tr>
4196
4261
  <tr>
4197
4262
  <td class="col-md-4">
4198
- <div class="io-line">Defined in <a href="" data-line="212" class="link-to-prism">src/combobox/combobox.component.ts:212</a></div>
4263
+ <div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/combobox/combobox.component.ts:221</a></div>
4199
4264
  </td>
4200
4265
  </tr>
4201
4266
 
@@ -4206,7 +4271,7 @@ Updates pills if necessary.</p>
4206
4271
  </tr>
4207
4272
  <tr>
4208
4273
  <td class="col-md-4">
4209
- <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/combobox/combobox.component.ts:208</a></div>
4274
+ <div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/combobox/combobox.component.ts:217</a></div>
4210
4275
  </td>
4211
4276
  </tr>
4212
4277
  <tr>
@@ -4266,7 +4331,7 @@ Updates pills if necessary.</p>
4266
4331
  </tr>
4267
4332
  <tr>
4268
4333
  <td class="col-md-4">
4269
- <div class="io-line">Defined in <a href="" data-line="222" class="link-to-prism">src/combobox/combobox.component.ts:222</a></div>
4334
+ <div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/combobox/combobox.component.ts:231</a></div>
4270
4335
  </td>
4271
4336
  </tr>
4272
4337
 
@@ -4277,7 +4342,7 @@ Updates pills if necessary.</p>
4277
4342
  </tr>
4278
4343
  <tr>
4279
4344
  <td class="col-md-4">
4280
- <div class="io-line">Defined in <a href="" data-line="218" class="link-to-prism">src/combobox/combobox.component.ts:218</a></div>
4345
+ <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/combobox/combobox.component.ts:227</a></div>
4281
4346
  </td>
4282
4347
  </tr>
4283
4348
  <tr>
@@ -4337,7 +4402,7 @@ Updates pills if necessary.</p>
4337
4402
  </tr>
4338
4403
  <tr>
4339
4404
  <td class="col-md-4">
4340
- <div class="io-line">Defined in <a href="" data-line="232" class="link-to-prism">src/combobox/combobox.component.ts:232</a></div>
4405
+ <div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/combobox/combobox.component.ts:241</a></div>
4341
4406
  </td>
4342
4407
  </tr>
4343
4408
 
@@ -4348,7 +4413,7 @@ Updates pills if necessary.</p>
4348
4413
  </tr>
4349
4414
  <tr>
4350
4415
  <td class="col-md-4">
4351
- <div class="io-line">Defined in <a href="" data-line="228" class="link-to-prism">src/combobox/combobox.component.ts:228</a></div>
4416
+ <div class="io-line">Defined in <a href="" data-line="237" class="link-to-prism">src/combobox/combobox.component.ts:237</a></div>
4352
4417
  </td>
4353
4418
  </tr>
4354
4419
  <tr>
@@ -4408,7 +4473,7 @@ Updates pills if necessary.</p>
4408
4473
  </tr>
4409
4474
  <tr>
4410
4475
  <td class="col-md-4">
4411
- <div class="io-line">Defined in <a href="" data-line="242" class="link-to-prism">src/combobox/combobox.component.ts:242</a></div>
4476
+ <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/combobox/combobox.component.ts:251</a></div>
4412
4477
  </td>
4413
4478
  </tr>
4414
4479
 
@@ -4419,7 +4484,7 @@ Updates pills if necessary.</p>
4419
4484
  </tr>
4420
4485
  <tr>
4421
4486
  <td class="col-md-4">
4422
- <div class="io-line">Defined in <a href="" data-line="238" class="link-to-prism">src/combobox/combobox.component.ts:238</a></div>
4487
+ <div class="io-line">Defined in <a href="" data-line="247" class="link-to-prism">src/combobox/combobox.component.ts:247</a></div>
4423
4488
  </td>
4424
4489
  </tr>
4425
4490
  <tr>
@@ -4479,7 +4544,7 @@ Updates pills if necessary.</p>
4479
4544
  </tr>
4480
4545
  <tr>
4481
4546
  <td class="col-md-4">
4482
- <div class="io-line">Defined in <a href="" data-line="252" class="link-to-prism">src/combobox/combobox.component.ts:252</a></div>
4547
+ <div class="io-line">Defined in <a href="" data-line="261" class="link-to-prism">src/combobox/combobox.component.ts:261</a></div>
4483
4548
  </td>
4484
4549
  </tr>
4485
4550
 
@@ -4490,7 +4555,7 @@ Updates pills if necessary.</p>
4490
4555
  </tr>
4491
4556
  <tr>
4492
4557
  <td class="col-md-4">
4493
- <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/combobox/combobox.component.ts:248</a></div>
4558
+ <div class="io-line">Defined in <a href="" data-line="257" class="link-to-prism">src/combobox/combobox.component.ts:257</a></div>
4494
4559
  </td>
4495
4560
  </tr>
4496
4561
  <tr>
@@ -4550,7 +4615,7 @@ Updates pills if necessary.</p>
4550
4615
  </tr>
4551
4616
  <tr>
4552
4617
  <td class="col-md-4">
4553
- <div class="io-line">Defined in <a href="" data-line="262" class="link-to-prism">src/combobox/combobox.component.ts:262</a></div>
4618
+ <div class="io-line">Defined in <a href="" data-line="271" class="link-to-prism">src/combobox/combobox.component.ts:271</a></div>
4554
4619
  </td>
4555
4620
  </tr>
4556
4621
 
@@ -4561,7 +4626,7 @@ Updates pills if necessary.</p>
4561
4626
  </tr>
4562
4627
  <tr>
4563
4628
  <td class="col-md-4">
4564
- <div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">src/combobox/combobox.component.ts:258</a></div>
4629
+ <div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/combobox/combobox.component.ts:267</a></div>
4565
4630
  </td>
4566
4631
  </tr>
4567
4632
  <tr>
@@ -4652,7 +4717,13 @@ import { Observable } from &quot;rxjs&quot;;
4652
4717
  @Component({
4653
4718
  selector: &quot;cds-combo-box, ibm-combo-box&quot;,
4654
4719
  template: &#x60;
4655
- &lt;div class&#x3D;&quot;cds--list-box__wrapper&quot;&gt;
4720
+ &lt;div
4721
+ class&#x3D;&quot;cds--list-box__wrapper&quot;
4722
+ [ngClass]&#x3D;&quot;{
4723
+ &#x27;cds--list-box__wrapper--fluid&#x27;: fluid,
4724
+ &#x27;cds--list-box__wrapper--fluid--invalid&#x27;: fluid &amp;&amp; invalid,
4725
+ &#x27;cds--list-box__wrapper--fluid--focus&#x27;: fluid &amp;&amp; _isFocused
4726
+ }&quot;&gt;
4656
4727
  &lt;label
4657
4728
  *ngIf&#x3D;&quot;label&quot;
4658
4729
  [for]&#x3D;&quot;id&quot;
@@ -4676,7 +4747,8 @@ import { Observable } from &quot;rxjs&quot;;
4676
4747
  &#x27;cds--list-box--lg&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;lg&#x27;,
4677
4748
  &#x27;cds--list-box--disabled&#x27;: disabled,
4678
4749
  &#x27;cds--combo-box--readonly&#x27;: readonly,
4679
- &#x27;cds--combo-box--warning cds--list-box--warning&#x27;: warn
4750
+ &#x27;cds--combo-box--warning cds--list-box--warning&#x27;: warn,
4751
+ &#x27;cds--list-box--invalid&#x27;: invalid
4680
4752
  }&quot;
4681
4753
  class&#x3D;&quot;cds--list-box cds--combo-box&quot;
4682
4754
  [attr.data-invalid]&#x3D;&quot;(invalid ? true : null)&quot;&gt;
@@ -4721,7 +4793,8 @@ import { Observable } from &quot;rxjs&quot;;
4721
4793
  [disabled]&#x3D;&quot;disabled&quot;
4722
4794
  [readOnly]&#x3D;&quot;readonly&quot;
4723
4795
  (input)&#x3D;&quot;onSearch($event.target.value)&quot;
4724
- (blur)&#x3D;&quot;onBlur()&quot;
4796
+ (focus)&#x3D;&quot;fluid ? handleFocus($event) : null&quot;
4797
+ (blur)&#x3D;&quot;fluid ? handleFocus($event) : onBlur()&quot;
4725
4798
  (keydown.enter)&#x3D;&quot;onSubmit($event)&quot;
4726
4799
  [value]&#x3D;&quot;selectedValue&quot;
4727
4800
  class&#x3D;&quot;cds--text-input&quot;
@@ -4778,8 +4851,9 @@ import { Observable } from &quot;rxjs&quot;;
4778
4851
  &lt;ng-content *ngIf&#x3D;&quot;open&quot;&gt;&lt;/ng-content&gt;
4779
4852
  &lt;/div&gt;
4780
4853
  &lt;/div&gt;
4854
+ &lt;hr *ngIf&#x3D;&quot;fluid&quot; class&#x3D;&quot;cds--list-box__divider&quot; /&gt;
4781
4855
  &lt;div
4782
- *ngIf&#x3D;&quot;helperText &amp;&amp; !invalid &amp;&amp; !warn&quot;
4856
+ *ngIf&#x3D;&quot;helperText &amp;&amp; !invalid &amp;&amp; !warn &amp;&amp; !fluid&quot;
4783
4857
  class&#x3D;&quot;cds--form__helper-text&quot;
4784
4858
  [ngClass]&#x3D;&quot;{&#x27;cds--form__helper-text--disabled&#x27;: disabled}&quot;&gt;
4785
4859
  &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(helperText)&quot;&gt;{{helperText}}&lt;/ng-container&gt;
@@ -4980,6 +5054,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
4980
5054
  * Set to &#x60;true&#x60; for readonly state.
4981
5055
  */
4982
5056
  @Input() readonly &#x3D; false;
5057
+ /**
5058
+ * Experimental: enable fluid state
5059
+ */
5060
+ @Input() fluid &#x3D; false;
4983
5061
  /**
4984
5062
  * Emits a ListItem
4985
5063
  *
@@ -5038,7 +5116,6 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
5038
5116
  @ViewChild(&quot;input&quot;, { static: true }) input: ElementRef;
5039
5117
  @ViewChild(&quot;listbox&quot;, { static: true }) listbox: ElementRef;
5040
5118
  @HostBinding(&quot;class.cds--list-box__wrapper&quot;) hostClass &#x3D; true;
5041
- @HostBinding(&quot;style.display&quot;) display &#x3D; &quot;block&quot;;
5042
5119
 
5043
5120
  public open &#x3D; false;
5044
5121
 
@@ -5068,6 +5145,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
5068
5145
  protected _clearSelectionTitle &#x3D; this.i18n.getOverridable(&quot;COMBOBOX.CLEAR_SELECTED&quot;);
5069
5146
  protected _clearSelectionAria &#x3D; this.i18n.getOverridable(&quot;COMBOBOX.A11Y.CLEAR_SELECTED&quot;);
5070
5147
 
5148
+ protected _isFocused &#x3D; false;
5149
+
5071
5150
  /**
5072
5151
  * Creates an instance of ComboBox.
5073
5152
  */
@@ -5489,6 +5568,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
5489
5568
  }
5490
5569
  }
5491
5570
 
5571
+ handleFocus(event: FocusEvent) {
5572
+ this._isFocused &#x3D; event.type &#x3D;&#x3D;&#x3D; &quot;focus&quot;;
5573
+ }
5574
+
5492
5575
  protected updateSelected() {
5493
5576
  const selected &#x3D; this.view.getSelected();
5494
5577
  if (this.type &#x3D;&#x3D;&#x3D; &quot;multi&quot;) {
@@ -5538,7 +5621,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
5538
5621
  <script src="../js/libs/htmlparser.js"></script>
5539
5622
  <script src="../js/libs/deep-iterator.js"></script>
5540
5623
  <script>
5541
- var COMPONENT_TEMPLATE = '<div><div class="cds--list-box__wrapper"> <label *ngIf="label" [for]="id" [id]="labelId" class="cds--label" [ngClass]="{ \'cds--label--disabled\': disabled, \'cds--visually-hidden\': hideLabel }"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div #listbox [ngClass]="{ \'cds--multi-select cds--multi-select--filterable\': type === \'multi\', \'cds--list-box--light\': theme === \'light\', \'cds--list-box--expanded\': open, \'cds--list-box--sm\': size === \'sm\', \'cds--list-box--md\': size === \'md\', \'cds--list-box--lg\': size === \'lg\', \'cds--list-box--disabled\': disabled, \'cds--combo-box--readonly\': readonly, \'cds--combo-box--warning cds--list-box--warning\': warn }" class="cds--list-box cds--combo-box" [attr.data-invalid]="(invalid ? true : null)"> <div class="cds--list-box__field" (click)="toggleDropdown()" (blur)="onBlur()"> <div *ngIf="type === \'multi\' && pills.length > 0" class="cds--tag cds--tag--filter cds--tag--high-contrast" [ngClass]="{\'cds--tag--disabled\': disabled || readonly}"> <span class="cds--tag__label">{{ pills.length }}</span> <button type="button" (click)="clearSelected($event)" (blur)="onBlur()" (keydown.enter)="clearSelected($event)" class="cds--tag__close-icon" tabindex="0" [title]="clearSelectionsTitle" [disabled]="disabled || readonly" [attr.aria-label]="clearSelectionAria"> <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> </button> </div> <input #input type="text" autocomplete="off" role="combobox" [disabled]="disabled" [readOnly]="readonly" (input)="onSearch($event.target.value)" (blur)="onBlur()" (keydown.enter)="onSubmit($event)" [value]="selectedValue" class="cds--text-input" [ngClass]="{\'cds--text-input--empty\': !showClearButton}" tabindex="0" [id]="id" [attr.aria-labelledby]="labelId" [attr.aria-expanded]="open" aria-haspopup="listbox" [attr.maxlength]="maxLength" [attr.aria-controls]="open ? view?.listId : null" [attr.aria-autocomplete]="autocomplete" [placeholder]="placeholder"/> <svg *ngIf="invalid" cdsIcon="warning--filled" size="16" class="cds--list-box__invalid-icon"> </svg> <svg *ngIf="!invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"> </svg> <div *ngIf="showClearButton" role="button" class="cds--list-box__selection" tabindex="0" [attr.aria-label]="clearSelectionAria" [title]="clearSelectionTitle" (keyup.enter)="clearInput($event)" (click)="clearInput($event)" (blur)="onBlur()"> <svg cdsIcon="close" size="16"></svg> </div> <button type="button" role="button" class="cds--list-box__menu-icon" tabindex="-1" [title]="open ? closeMenuAria : openMenuAria" [attr.aria-label]="open ? closeMenuAria : openMenuAria" [ngClass]="{\'cds--list-box__menu-icon--open\': open}"> <svg cdsIcon="chevron--down" size="16"></svg> </button> </div> <div #dropdownMenu [ngClass]="{ \'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp }"> <ng-content *ngIf="open"></ng-content> </div> </div> <div *ngIf="helperText && !invalid && !warn" class="cds--form__helper-text" [ngClass]="{\'cds--form__helper-text--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div></div> </div>'
5624
+ var COMPONENT_TEMPLATE = '<div><div class="cds--list-box__wrapper" [ngClass]="{ \'cds--list-box__wrapper--fluid\': fluid, \'cds--list-box__wrapper--fluid--invalid\': fluid && invalid, \'cds--list-box__wrapper--fluid--focus\': fluid && _isFocused }"> <label *ngIf="label" [for]="id" [id]="labelId" class="cds--label" [ngClass]="{ \'cds--label--disabled\': disabled, \'cds--visually-hidden\': hideLabel }"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div #listbox [ngClass]="{ \'cds--multi-select cds--multi-select--filterable\': type === \'multi\', \'cds--list-box--light\': theme === \'light\', \'cds--list-box--expanded\': open, \'cds--list-box--sm\': size === \'sm\', \'cds--list-box--md\': size === \'md\', \'cds--list-box--lg\': size === \'lg\', \'cds--list-box--disabled\': disabled, \'cds--combo-box--readonly\': readonly, \'cds--combo-box--warning cds--list-box--warning\': warn, \'cds--list-box--invalid\': invalid }" class="cds--list-box cds--combo-box" [attr.data-invalid]="(invalid ? true : null)"> <div class="cds--list-box__field" (click)="toggleDropdown()" (blur)="onBlur()"> <div *ngIf="type === \'multi\' && pills.length > 0" class="cds--tag cds--tag--filter cds--tag--high-contrast" [ngClass]="{\'cds--tag--disabled\': disabled || readonly}"> <span class="cds--tag__label">{{ pills.length }}</span> <button type="button" (click)="clearSelected($event)" (blur)="onBlur()" (keydown.enter)="clearSelected($event)" class="cds--tag__close-icon" tabindex="0" [title]="clearSelectionsTitle" [disabled]="disabled || readonly" [attr.aria-label]="clearSelectionAria"> <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> </button> </div> <input #input type="text" autocomplete="off" role="combobox" [disabled]="disabled" [readOnly]="readonly" (input)="onSearch($event.target.value)" (focus)="fluid ? handleFocus($event) : null" (blur)="fluid ? handleFocus($event) : onBlur()" (keydown.enter)="onSubmit($event)" [value]="selectedValue" class="cds--text-input" [ngClass]="{\'cds--text-input--empty\': !showClearButton}" tabindex="0" [id]="id" [attr.aria-labelledby]="labelId" [attr.aria-expanded]="open" aria-haspopup="listbox" [attr.maxlength]="maxLength" [attr.aria-controls]="open ? view?.listId : null" [attr.aria-autocomplete]="autocomplete" [placeholder]="placeholder"/> <svg *ngIf="invalid" cdsIcon="warning--filled" size="16" class="cds--list-box__invalid-icon"> </svg> <svg *ngIf="!invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"> </svg> <div *ngIf="showClearButton" role="button" class="cds--list-box__selection" tabindex="0" [attr.aria-label]="clearSelectionAria" [title]="clearSelectionTitle" (keyup.enter)="clearInput($event)" (click)="clearInput($event)" (blur)="onBlur()"> <svg cdsIcon="close" size="16"></svg> </div> <button type="button" role="button" class="cds--list-box__menu-icon" tabindex="-1" [title]="open ? closeMenuAria : openMenuAria" [attr.aria-label]="open ? closeMenuAria : openMenuAria" [ngClass]="{\'cds--list-box__menu-icon--open\': open}"> <svg cdsIcon="chevron--down" size="16"></svg> </button> </div> <div #dropdownMenu [ngClass]="{ \'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp }"> <ng-content *ngIf="open"></ng-content> </div> </div> <hr *ngIf="fluid" class="cds--list-box__divider" /> <div *ngIf="helperText && !invalid && !warn && !fluid" class="cds--form__helper-text" [ngClass]="{\'cds--form__helper-text--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div></div> </div>'
5542
5625
  var COMPONENTS = [{'name': 'Accordion', 'selector': 'cds-accordion, ibm-accordion'},{'name': 'AccordionItem', 'selector': 'cds-accordion-item, ibm-accordion-item'},{'name': 'ActionableNotification', 'selector': 'cds-actionable-notification, ibm-actionable-notification'},{'name': 'AlertModal', 'selector': 'cds-alert-modal, ibm-alert-modal'},{'name': 'BaseIconButton', 'selector': ''},{'name': 'BaseNotification', 'selector': ''},{'name': 'BaseTabHeader', 'selector': ''},{'name': 'Breadcrumb', 'selector': 'cds-breadcrumb, ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'cds-breadcrumb-item, ibm-breadcrumb-item'},{'name': 'ButtonSet', 'selector': 'cds-button-set, ibm-button-set'},{'name': 'Checkbox', 'selector': 'cds-checkbox, ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'cds-clickable-tile, ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'cds-code-snippet, ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'cds-combo-box, ibm-combo-box'},{'name': 'ContainedList', 'selector': 'cds-contained-list, ibm-contained-list'},{'name': 'ContainedListItem', 'selector': 'cds-contained-list-item, ibm-contained-list-item'},{'name': 'ContentSwitcher', 'selector': 'cds-content-switcher, ibm-content-switcher'},{'name': 'ContextMenuComponent', 'selector': 'cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-context-menu-item, ibm-context-menu-item'},{'name': 'DatePicker', 'selector': 'cds-date-picker, ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'cds-date-picker-input, ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'cds-dialog, ibm-dialog'},{'name': 'Documentation', 'selector': 'cds-documentation'},{'name': 'Dropdown', 'selector': 'cds-dropdown, ibm-dropdown'},{'name': 'DropdownList', 'selector': 'cds-dropdown-list, ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'cds-expandable-tile, ibm-expandable-tile'},{'name': 'FileComponent', 'selector': 'cds-file, ibm-file'},{'name': 'FileUploader', 'selector': 'cds-file-uploader, ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'cds-hamburger, ibm-hamburger'},{'name': 'Header', 'selector': 'cds-header, ibm-header'},{'name': 'HeaderAction', 'selector': 'cds-header-action, ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'cds-header-global, ibm-header-global'},{'name': 'HeaderItem', 'selector': 'cds-header-item, ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'cds-header-menu, ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'cds-header-navigation, ibm-header-navigation'},{'name': 'IconButton', 'selector': 'cds-icon-button, ibm-icon-button'},{'name': 'InlineLoading', 'selector': 'cds-inline-loading, ibm-inline-loading'},{'name': 'Label', 'selector': 'cds-label, ibm-label'},{'name': 'ListColumn', 'selector': 'cds-list-column, ibm-list-column'},{'name': 'ListHeader', 'selector': 'cds-list-header, ibm-list-header'},{'name': 'ListRow', 'selector': 'cds-list-row, ibm-list-row'},{'name': 'Loading', 'selector': 'cds-loading, ibm-loading'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'PasswordInputLabelComponent', 'selector': 'cds-password-label, ibm-password-label'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndicator', 'selector': 'cds-progress-indicator, ibm-progress-indicator'},{'name': 'Radio', 'selector': 'cds-radio, ibm-radio'},{'name': 'RadioGroup', 'selector': 'cds-radio-group, ibm-radio-group'},{'name': 'Search', 'selector': 'cds-search, ibm-search'},{'name': 'Select', 'selector': 'cds-select, ibm-select'},{'name': 'SelectionTile', 'selector': 'cds-selection-tile, ibm-selection-tile'},{'name': 'SideNav', 'selector': 'cds-sidenav, ibm-sidenav'},{'name': 'SideNavItem', 'selector': 'cds-sidenav-item, ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'cds-sidenav-menu, ibm-sidenav-menu'},{'name': 'SkeletonPlaceholder', 'selector': 'cds-skeleton-placeholder, ibm-skeleton-placeholder'},{'name': 'SkeletonText', 'selector': 'cds-skeleton-text, ibm-skeleton-text'},{'name': 'Slider', 'selector': 'cds-slider, ibm-slider'},{'name': 'StructuredList', 'selector': 'cds-structured-list, ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'cds-switcher-list, ibm-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'cds-switcher-list-item, ibm-switcher-list-item'},{'name': 'Tab', 'selector': 'cds-tab, ibm-tab'},{'name': 'TabHeaderGroup', 'selector': 'cds-tab-header-group, ibm-tab-header-group'},{'name': 'TabHeaders', 'selector': 'cds-tab-headers, ibm-tab-headers'},{'name': 'Table', 'selector': 'cds-table, ibm-table'},{'name': 'TableBody', 'selector': '[cdsTableBody], [ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[cdsTableCheckbox], [ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'cds-table-container, ibm-table-container'},{'name': 'TableData', 'selector': '[cdsTableData], [ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[cdsTableExpandButton], [ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[cdsTableExpandedRow], [ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[cdsTableHead], [ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[cdsTableHeadCell], [ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'cds-table-header, ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[cdsTableHeadExpand], [ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[cdsTableRadio], [ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[cdsTableRow], [ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'cds-table-toolbar, ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'cds-table-toolbar-actions, ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'cds-table-toolbar-content, ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'cds-table-toolbar-search, ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'cds-tabs, ibm-tabs'},{'name': 'TabSkeleton', 'selector': 'cds-tabs-skeleton, ibm-tabs-skeleton'},{'name': 'Tag', 'selector': 'cds-tag, ibm-tag'},{'name': 'TagFilter', 'selector': 'cds-tag-filter, ibm-tag-filter'},{'name': 'TagOperationalComponent', 'selector': 'cds-tag-operational, ibm-tag-operational'},{'name': 'TagSelectableComponent', 'selector': 'cds-tag-selectable, ibm-tag-selectable'},{'name': 'TextareaLabelComponent', 'selector': 'cds-textarea-label, ibm-textarea-label'},{'name': 'TextInputLabelComponent', 'selector': 'cds-text-label, ibm-text-label'},{'name': 'Tile', 'selector': 'cds-tile, ibm-tile'},{'name': 'TileGroup', 'selector': 'cds-tile-group, ibm-tile-group'},{'name': 'TimePicker', 'selector': 'cds-timepicker, ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'cds-timepicker-select, ibm-timepicker-select'},{'name': 'Toast', 'selector': 'cds-toast, ibm-toast'},{'name': 'Toggle', 'selector': 'cds-toggle, ibm-toggle'},{'name': 'Toggletip', 'selector': 'cds-toggletip, ibm-toggletip'},{'name': 'Tooltip', 'selector': 'cds-tooltip, ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'cds-tooltip-definition, ibm-tooltip-definition'},{'name': 'TreeNodeComponent', 'selector': 'cds-tree-node'},{'name': 'TreeViewComponent', 'selector': 'cds-tree-view'}];
5543
5626
  var DIRECTIVES = [{'name': 'AbstractDropdownView', 'selector': '[cdsAbstractDropdownView], [ibmAbstractDropdownView]'},{'name': 'ActionableButton', 'selector': '[cdsActionableButton], [ibmActionableButton]'},{'name': 'ActionableSubtitle', 'selector': '[cdsActionableSubtitle], [ibmActionableSubtitle]'},{'name': 'ActionableTitle', 'selector': '[cdsActionableTitle], [ibmActionableTitle]'},{'name': 'BaseModal', 'selector': '[cdsBaseModal], [ibmBaseModal]'},{'name': 'Button', 'selector': '[cdsButton], [ibmButton]'},{'name': 'ClickableTileIconDirective', 'selector': '[cdsClickableTileIcon], [ibmClickableTileIcon]'},{'name': 'ColumnDirective', 'selector': '[cdsCol], [ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[cdsContentOption], [ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[cdsDialog], [ibmDialog]'},{'name': 'ExpandableTileAboveFoldDirective', 'selector': '[cdsAboveFold], [ibmAboveFold]'},{'name': 'ExpandableTileBelowFoldDirective', 'selector': '[cdsBelowFold], [ibmBelowFold]'},{'name': 'ExpandedRowHover', 'selector': '[cdsExpandedRowHover], [ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[cdsGrid], [ibmGrid]'},{'name': 'IconDirective', 'selector': '[cdsIcon], [ibmIcon]'},{'name': 'LayerDirective', 'selector': '[cdsLayer], [ibmLayer]'},{'name': 'Link', 'selector': '[cdsLink], [ibmLink]'},{'name': 'LinkIconDirective', 'selector': '[ibmLinkIcon], [cdsLinkIcon]'},{'name': 'List', 'selector': '[cdsList], [ibmList]'},{'name': 'ListItemDirective', 'selector': '[cdsListItem], [ibmListItem]'},{'name': 'ModalContent', 'selector': '[cdsModalContent], [ibmModalContent]'},{'name': 'ModalContentText', 'selector': '[cdsModalContentText], [ibmModalContentText]'},{'name': 'ModalHeaderHeading', 'selector': '[cdsModalHeaderHeading], [ibmModalHeaderHeading]'},{'name': 'ModalHeaderLabel', 'selector': '[cdsModalHeaderLabel], [ibmModalHeaderLabel]'},{'name': 'NotificationSubtitle', 'selector': '[cdsNotificationSubtitle], [ibmNotificationSubtitle]'},{'name': 'NotificationTitle', 'selector': '[cdsNotificationTitle], [ibmNotificationTitle]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[cdsOverflowMenu], [ibmOverflowMenu]'},{'name': 'PasswordInput', 'selector': '[cdsPassword], [ibmPassword]'},{'name': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'name': 'RouterLinkExtendedDirective', 'selector': '[routerLink]'},{'name': 'RowDirective', 'selector': '[cdsRow], [ibmRow]'},{'name': 'ScrollableList', 'selector': '[cdsScrollableList], [ibmScrollableList]'},{'name': 'StackDirective', 'selector': '[cdsStack], [ibmStack]'},{'name': 'TabHeader', 'selector': '[cdsTabHeader], [ibmTabHeader]'},{'name': 'TableDirective', 'selector': '[cdsTable], [ibmTable]'},{'name': 'TableHeadCellLabel', 'selector': '[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]'},{'name': 'TableHeaderDescription', 'selector': '[cdsTableHeaderDescription], [ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[cdsTableHeaderTitle], [ibmTableHeaderTitle]'},{'name': 'TagIconDirective', 'selector': '[cdsTagIcon], [ibmTagIcon]'},{'name': 'TextArea', 'selector': '[cdsTextArea], [ibmTextArea]'},{'name': 'TextInput', 'selector': '[cdsText], [ibmText]'},{'name': 'ThemeDirective', 'selector': '[cdsTheme], [ibmTheme]'},{'name': 'ToastCaption', 'selector': '[cdsToastCaption], [ibmToastCaption]'},{'name': 'ToastSubtitle', 'selector': '[cdsToastSubtitle], [ibmToastSubtitle]'},{'name': 'ToastTitle', 'selector': '[cdsToastTitle], [ibmToastTitle]'},{'name': 'ToggletipAction', 'selector': '[cdsToggletipAction], [ibmToggletipAction]'},{'name': 'ToggletipButton', 'selector': '[cdsToggletipButton], [ibmToggletipButton]'},{'name': 'ToggletipContent', 'selector': '[cdsToggletipContent], [ibmToggletipContent]'},{'name': 'ToggletipLabel', 'selector': '[cdsToggletipLabel], [ibmToggletipLabel]'}];
5544
5627
  var ACTUAL_COMPONENT = {'name': 'ComboBox'};