carbon-components-angular 5.31.0 → 5.33.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 (47) hide show
  1. package/combobox/combobox.component.d.ts +5 -1
  2. package/docs/documentation/components/ComboBox.html +179 -136
  3. package/docs/documentation/components/TreeNodeComponent.html +67 -36
  4. package/docs/documentation/components/TreeViewComponent.html +83 -1
  5. package/docs/documentation/coverage.html +9 -9
  6. package/docs/documentation/interfaces/Node.html +47 -1
  7. package/docs/documentation/js/search/search_index.js +2 -2
  8. package/docs/documentation/modules/TimePickerModule/dependencies.svg +26 -26
  9. package/docs/documentation/modules/TimePickerModule.html +26 -26
  10. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +4 -4
  11. package/docs/documentation/modules/TimePickerSelectModule.html +4 -4
  12. package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
  13. package/docs/documentation/modules/ToggleModule.html +4 -4
  14. package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
  15. package/docs/documentation/modules/ToggletipModule.html +4 -4
  16. package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
  17. package/docs/documentation/modules/TooltipModule.html +28 -28
  18. package/docs/documentation/modules/TreeviewModule/dependencies.svg +34 -34
  19. package/docs/documentation/modules/TreeviewModule.html +34 -34
  20. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  21. package/docs/documentation/modules/UIShellModule.html +4 -4
  22. package/docs/documentation.json +177 -148
  23. package/docs/storybook/combobox-combobox-stories.3bbada2d.iframe.bundle.js +1 -0
  24. package/docs/storybook/iframe.html +2 -2
  25. package/docs/storybook/main.f6f7b65b.iframe.bundle.js +1 -0
  26. package/docs/storybook/{patterns-forms-multi-step-form-stories.89086fc2.iframe.bundle.js → patterns-forms-multi-step-form-stories.22da53c6.iframe.bundle.js} +1 -1
  27. package/docs/storybook/project.json +1 -1
  28. package/docs/storybook/{runtime~main.d1f42191.iframe.bundle.js → runtime~main.b455b6c9.iframe.bundle.js} +1 -1
  29. package/docs/storybook/{treeview-treeview-stories.eec445b3.iframe.bundle.js → treeview-treeview-stories.85954a19.iframe.bundle.js} +1 -1
  30. package/esm2020/combobox/combobox.component.mjs +18 -8
  31. package/esm2020/treeview/tree-node.component.mjs +8 -4
  32. package/esm2020/treeview/tree-node.types.mjs +1 -1
  33. package/esm2020/treeview/treeview.component.mjs +11 -3
  34. package/fesm2015/carbon-components-angular-combobox.mjs +17 -7
  35. package/fesm2015/carbon-components-angular-combobox.mjs.map +1 -1
  36. package/fesm2015/carbon-components-angular-treeview.mjs +20 -8
  37. package/fesm2015/carbon-components-angular-treeview.mjs.map +1 -1
  38. package/fesm2020/carbon-components-angular-combobox.mjs +17 -7
  39. package/fesm2020/carbon-components-angular-combobox.mjs.map +1 -1
  40. package/fesm2020/carbon-components-angular-treeview.mjs +17 -5
  41. package/fesm2020/carbon-components-angular-treeview.mjs.map +1 -1
  42. package/package.json +1 -1
  43. package/treeview/tree-node.component.d.ts +2 -1
  44. package/treeview/tree-node.types.d.ts +1 -0
  45. package/treeview/treeview.component.d.ts +1 -0
  46. package/docs/storybook/combobox-combobox-stories.57374785.iframe.bundle.js +0 -1
  47. package/docs/storybook/main.0d9139c6.iframe.bundle.js +0 -1
@@ -197,6 +197,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
197
197
  &#x27;cds--list-box--md&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;md&#x27;,
198
198
  &#x27;cds--list-box--lg&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;lg&#x27;,
199
199
  &#x27;cds--list-box--disabled&#x27;: disabled,
200
+ &#x27;cds--combo-box--readonly&#x27;: readonly,
200
201
  &#x27;cds--combo-box--warning cds--list-box--warning&#x27;: warn
201
202
  }&quot;
202
203
  class&#x3D;&quot;cds--list-box cds--combo-box&quot;
@@ -208,7 +209,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
208
209
  &lt;div
209
210
  *ngIf&#x3D;&quot;type &#x3D;&#x3D;&#x3D; &#x27;multi&#x27; &amp;&amp; pills.length &gt; 0&quot;
210
211
  class&#x3D;&quot;cds--tag cds--tag--filter cds--tag--high-contrast&quot;
211
- [ngClass]&#x3D;&quot;{&#x27;cds--tag--disabled&#x27;: disabled}&quot;&gt;
212
+ [ngClass]&#x3D;&quot;{&#x27;cds--tag--disabled&#x27;: disabled || readonly}&quot;&gt;
212
213
  &lt;span class&#x3D;&quot;cds--tag__label&quot;&gt;{{ pills.length }}&lt;/span&gt;
213
214
  &lt;button
214
215
  type&#x3D;&quot;button&quot;
@@ -218,7 +219,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
218
219
  class&#x3D;&quot;cds--tag__close-icon&quot;
219
220
  tabindex&#x3D;&quot;0&quot;
220
221
  [title]&#x3D;&quot;clearSelectionsTitle&quot;
221
- [disabled]&#x3D;&quot;disabled&quot;
222
+ [disabled]&#x3D;&quot;disabled || readonly&quot;
222
223
  [attr.aria-label]&#x3D;&quot;clearSelectionAria&quot;&gt;
223
224
  &lt;svg
224
225
  focusable&#x3D;&quot;false&quot;
@@ -240,6 +241,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
240
241
  autocomplete&#x3D;&quot;off&quot;
241
242
  role&#x3D;&quot;combobox&quot;
242
243
  [disabled]&#x3D;&quot;disabled&quot;
244
+ [readOnly]&#x3D;&quot;readonly&quot;
243
245
  (input)&#x3D;&quot;onSearch($event.target.value)&quot;
244
246
  (blur)&#x3D;&quot;onBlur()&quot;
245
247
  (keydown.enter)&#x3D;&quot;onSubmit($event)&quot;
@@ -613,6 +615,9 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
613
615
  <li>
614
616
  <a href="#placeholder" >placeholder</a>
615
617
  </li>
618
+ <li>
619
+ <a href="#readonly" >readonly</a>
620
+ </li>
616
621
  <li>
617
622
  <a href="#selectionFeedback" >selectionFeedback</a>
618
623
  </li>
@@ -742,7 +747,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
742
747
  </tr>
743
748
  <tr>
744
749
  <td class="col-md-4">
745
- <div class="io-line">Defined in <a href="" data-line="451" class="link-to-prism">src/combobox/combobox.component.ts:451</a></div>
750
+ <div class="io-line">Defined in <a href="" data-line="457" class="link-to-prism">src/combobox/combobox.component.ts:457</a></div>
746
751
  </td>
747
752
  </tr>
748
753
 
@@ -829,7 +834,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
829
834
  </tr>
830
835
  <tr>
831
836
  <td class="col-md-2" colspan="2">
832
- <div class="io-line">Defined in <a href="" data-line="320" class="link-to-prism">src/combobox/combobox.component.ts:320</a></div>
837
+ <div class="io-line">Defined in <a href="" data-line="322" class="link-to-prism">src/combobox/combobox.component.ts:322</a></div>
833
838
  </td>
834
839
  </tr>
835
840
  <tr>
@@ -861,7 +866,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
861
866
  </tr>
862
867
  <tr>
863
868
  <td class="col-md-2" colspan="2">
864
- <div class="io-line">Defined in <a href="" data-line="356" class="link-to-prism">src/combobox/combobox.component.ts:356</a></div>
869
+ <div class="io-line">Defined in <a href="" data-line="358" class="link-to-prism">src/combobox/combobox.component.ts:358</a></div>
865
870
  </td>
866
871
  </tr>
867
872
  <tr>
@@ -889,7 +894,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
889
894
  </tr>
890
895
  <tr>
891
896
  <td class="col-md-2" colspan="2">
892
- <div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">src/combobox/combobox.component.ts:256</a></div>
897
+ <div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">src/combobox/combobox.component.ts:258</a></div>
893
898
  </td>
894
899
  </tr>
895
900
  <tr>
@@ -916,7 +921,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
916
921
  </tr>
917
922
  <tr>
918
923
  <td class="col-md-2" colspan="2">
919
- <div class="io-line">Defined in <a href="" data-line="236" class="link-to-prism">src/combobox/combobox.component.ts:236</a></div>
924
+ <div class="io-line">Defined in <a href="" data-line="238" class="link-to-prism">src/combobox/combobox.component.ts:238</a></div>
920
925
  </td>
921
926
  </tr>
922
927
  <tr>
@@ -943,7 +948,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
943
948
  </tr>
944
949
  <tr>
945
950
  <td class="col-md-2" colspan="2">
946
- <div class="io-line">Defined in <a href="" data-line="226" class="link-to-prism">src/combobox/combobox.component.ts:226</a></div>
951
+ <div class="io-line">Defined in <a href="" data-line="228" class="link-to-prism">src/combobox/combobox.component.ts:228</a></div>
947
952
  </td>
948
953
  </tr>
949
954
  <tr>
@@ -970,7 +975,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
970
975
  </tr>
971
976
  <tr>
972
977
  <td class="col-md-2" colspan="2">
973
- <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/combobox/combobox.component.ts:246</a></div>
978
+ <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/combobox/combobox.component.ts:248</a></div>
974
979
  </td>
975
980
  </tr>
976
981
  <tr>
@@ -997,7 +1002,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
997
1002
  </tr>
998
1003
  <tr>
999
1004
  <td class="col-md-2" colspan="2">
1000
- <div class="io-line">Defined in <a href="" data-line="216" class="link-to-prism">src/combobox/combobox.component.ts:216</a></div>
1005
+ <div class="io-line">Defined in <a href="" data-line="218" class="link-to-prism">src/combobox/combobox.component.ts:218</a></div>
1001
1006
  </td>
1002
1007
  </tr>
1003
1008
  <tr>
@@ -1029,7 +1034,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1029
1034
  </tr>
1030
1035
  <tr>
1031
1036
  <td class="col-md-2" colspan="2">
1032
- <div class="io-line">Defined in <a href="" data-line="364" class="link-to-prism">src/combobox/combobox.component.ts:364</a></div>
1037
+ <div class="io-line">Defined in <a href="" data-line="366" class="link-to-prism">src/combobox/combobox.component.ts:366</a></div>
1033
1038
  </td>
1034
1039
  </tr>
1035
1040
  <tr>
@@ -1056,7 +1061,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1056
1061
  </tr>
1057
1062
  <tr>
1058
1063
  <td class="col-md-2" colspan="2">
1059
- <div class="io-line">Defined in <a href="" data-line="360" class="link-to-prism">src/combobox/combobox.component.ts:360</a></div>
1064
+ <div class="io-line">Defined in <a href="" data-line="362" class="link-to-prism">src/combobox/combobox.component.ts:362</a></div>
1060
1065
  </td>
1061
1066
  </tr>
1062
1067
  <tr>
@@ -1083,7 +1088,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1083
1088
  </tr>
1084
1089
  <tr>
1085
1090
  <td class="col-md-2" colspan="2">
1086
- <div class="io-line">Defined in <a href="" data-line="316" class="link-to-prism">src/combobox/combobox.component.ts:316</a></div>
1091
+ <div class="io-line">Defined in <a href="" data-line="318" class="link-to-prism">src/combobox/combobox.component.ts:318</a></div>
1087
1092
  </td>
1088
1093
  </tr>
1089
1094
  <tr>
@@ -1115,7 +1120,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1115
1120
  </tr>
1116
1121
  <tr>
1117
1122
  <td class="col-md-2" colspan="2">
1118
- <div class="io-line">Defined in <a href="" data-line="312" class="link-to-prism">src/combobox/combobox.component.ts:312</a></div>
1123
+ <div class="io-line">Defined in <a href="" data-line="314" class="link-to-prism">src/combobox/combobox.component.ts:314</a></div>
1119
1124
  </td>
1120
1125
  </tr>
1121
1126
  <tr>
@@ -1147,7 +1152,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1147
1152
  </tr>
1148
1153
  <tr>
1149
1154
  <td class="col-md-2" colspan="2">
1150
- <div class="io-line">Defined in <a href="" data-line="264" class="link-to-prism">src/combobox/combobox.component.ts:264</a></div>
1155
+ <div class="io-line">Defined in <a href="" data-line="266" class="link-to-prism">src/combobox/combobox.component.ts:266</a></div>
1151
1156
  </td>
1152
1157
  </tr>
1153
1158
  </tbody>
@@ -1173,7 +1178,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1173
1178
  </tr>
1174
1179
  <tr>
1175
1180
  <td class="col-md-2" colspan="2">
1176
- <div class="io-line">Defined in <a href="" data-line="324" class="link-to-prism">src/combobox/combobox.component.ts:324</a></div>
1181
+ <div class="io-line">Defined in <a href="" data-line="326" class="link-to-prism">src/combobox/combobox.component.ts:326</a></div>
1177
1182
  </td>
1178
1183
  </tr>
1179
1184
  <tr>
@@ -1200,7 +1205,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1200
1205
  </tr>
1201
1206
  <tr>
1202
1207
  <td class="col-md-2" colspan="2">
1203
- <div class="io-line">Defined in <a href="" data-line="328" class="link-to-prism">src/combobox/combobox.component.ts:328</a></div>
1208
+ <div class="io-line">Defined in <a href="" data-line="330" class="link-to-prism">src/combobox/combobox.component.ts:330</a></div>
1204
1209
  </td>
1205
1210
  </tr>
1206
1211
  <tr>
@@ -1232,7 +1237,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1232
1237
  </tr>
1233
1238
  <tr>
1234
1239
  <td class="col-md-2" colspan="2">
1235
- <div class="io-line">Defined in <a href="" data-line="292" class="link-to-prism">src/combobox/combobox.component.ts:292</a></div>
1240
+ <div class="io-line">Defined in <a href="" data-line="294" class="link-to-prism">src/combobox/combobox.component.ts:294</a></div>
1236
1241
  </td>
1237
1242
  </tr>
1238
1243
  <tr>
@@ -1277,7 +1282,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1277
1282
  </tr>
1278
1283
  <tr>
1279
1284
  <td class="col-md-2" colspan="2">
1280
- <div class="io-line">Defined in <a href="" data-line="304" class="link-to-prism">src/combobox/combobox.component.ts:304</a></div>
1285
+ <div class="io-line">Defined in <a href="" data-line="306" class="link-to-prism">src/combobox/combobox.component.ts:306</a></div>
1281
1286
  </td>
1282
1287
  </tr>
1283
1288
  <tr>
@@ -1304,7 +1309,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1304
1309
  </tr>
1305
1310
  <tr>
1306
1311
  <td class="col-md-2" colspan="2">
1307
- <div class="io-line">Defined in <a href="" data-line="308" class="link-to-prism">src/combobox/combobox.component.ts:308</a></div>
1312
+ <div class="io-line">Defined in <a href="" data-line="310" class="link-to-prism">src/combobox/combobox.component.ts:310</a></div>
1308
1313
  </td>
1309
1314
  </tr>
1310
1315
  <tr>
@@ -1336,7 +1341,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1336
1341
  </tr>
1337
1342
  <tr>
1338
1343
  <td class="col-md-2" colspan="2">
1339
- <div class="io-line">Defined in <a href="" data-line="265" class="link-to-prism">src/combobox/combobox.component.ts:265</a></div>
1344
+ <div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/combobox/combobox.component.ts:267</a></div>
1340
1345
  </td>
1341
1346
  </tr>
1342
1347
  </tbody>
@@ -1362,7 +1367,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1362
1367
  </tr>
1363
1368
  <tr>
1364
1369
  <td class="col-md-2" colspan="2">
1365
- <div class="io-line">Defined in <a href="" data-line="340" class="link-to-prism">src/combobox/combobox.component.ts:340</a></div>
1370
+ <div class="io-line">Defined in <a href="" data-line="342" class="link-to-prism">src/combobox/combobox.component.ts:342</a></div>
1366
1371
  </td>
1367
1372
  </tr>
1368
1373
  <tr>
@@ -1389,7 +1394,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1389
1394
  </tr>
1390
1395
  <tr>
1391
1396
  <td class="col-md-2" colspan="2">
1392
- <div class="io-line">Defined in <a href="" data-line="206" class="link-to-prism">src/combobox/combobox.component.ts:206</a></div>
1397
+ <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/combobox/combobox.component.ts:208</a></div>
1393
1398
  </td>
1394
1399
  </tr>
1395
1400
  <tr>
@@ -1416,12 +1421,44 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1416
1421
  </tr>
1417
1422
  <tr>
1418
1423
  <td class="col-md-2" colspan="2">
1419
- <div class="io-line">Defined in <a href="" data-line="196" class="link-to-prism">src/combobox/combobox.component.ts:196</a></div>
1424
+ <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/combobox/combobox.component.ts:198</a></div>
1420
1425
  </td>
1421
1426
  </tr>
1422
1427
  <tr>
1423
1428
  <td class="col-md-4">
1424
1429
  <div class="io-description"><p>Text to show when nothing is selected.</p>
1430
+ </div>
1431
+ </td>
1432
+ </tr>
1433
+ </tbody>
1434
+ </table>
1435
+ <table class="table table-sm table-bordered">
1436
+ <tbody>
1437
+ <tr>
1438
+ <td class="col-md-4">
1439
+ <a name="readonly"></a>
1440
+ <b>readonly</b>
1441
+ </td>
1442
+ </tr>
1443
+ <tr>
1444
+ <td class="col-md-4">
1445
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
1446
+
1447
+ </td>
1448
+ </tr>
1449
+ <tr>
1450
+ <td class="col-md-4">
1451
+ <i>Default value : </i><code>false</code>
1452
+ </td>
1453
+ </tr>
1454
+ <tr>
1455
+ <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>
1457
+ </td>
1458
+ </tr>
1459
+ <tr>
1460
+ <td class="col-md-4">
1461
+ <div class="io-description"><p>Set to <code>true</code> for readonly state.</p>
1425
1462
  </div>
1426
1463
  </td>
1427
1464
  </tr>
@@ -1448,7 +1485,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1448
1485
  </tr>
1449
1486
  <tr>
1450
1487
  <td class="col-md-2" colspan="2">
1451
- <div class="io-line">Defined in <a href="" data-line="351" class="link-to-prism">src/combobox/combobox.component.ts:351</a></div>
1488
+ <div class="io-line">Defined in <a href="" data-line="353" class="link-to-prism">src/combobox/combobox.component.ts:353</a></div>
1452
1489
  </td>
1453
1490
  </tr>
1454
1491
  <tr>
@@ -1483,7 +1520,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1483
1520
  </tr>
1484
1521
  <tr>
1485
1522
  <td class="col-md-2" colspan="2">
1486
- <div class="io-line">Defined in <a href="" data-line="300" class="link-to-prism">src/combobox/combobox.component.ts:300</a></div>
1523
+ <div class="io-line">Defined in <a href="" data-line="302" class="link-to-prism">src/combobox/combobox.component.ts:302</a></div>
1487
1524
  </td>
1488
1525
  </tr>
1489
1526
  <tr>
@@ -1515,7 +1552,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1515
1552
  </tr>
1516
1553
  <tr>
1517
1554
  <td class="col-md-2" colspan="2">
1518
- <div class="io-line">Defined in <a href="" data-line="344" class="link-to-prism">src/combobox/combobox.component.ts:344</a></div>
1555
+ <div class="io-line">Defined in <a href="" data-line="346" class="link-to-prism">src/combobox/combobox.component.ts:346</a></div>
1519
1556
  </td>
1520
1557
  </tr>
1521
1558
  </tbody>
@@ -1541,7 +1578,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1541
1578
  </tr>
1542
1579
  <tr>
1543
1580
  <td class="col-md-2" colspan="2">
1544
- <div class="io-line">Defined in <a href="" data-line="296" class="link-to-prism">src/combobox/combobox.component.ts:296</a></div>
1581
+ <div class="io-line">Defined in <a href="" data-line="298" class="link-to-prism">src/combobox/combobox.component.ts:298</a></div>
1545
1582
  </td>
1546
1583
  </tr>
1547
1584
  <tr>
@@ -1573,7 +1610,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1573
1610
  </tr>
1574
1611
  <tr>
1575
1612
  <td class="col-md-2" colspan="2">
1576
- <div class="io-line">Defined in <a href="" data-line="332" class="link-to-prism">src/combobox/combobox.component.ts:332</a></div>
1613
+ <div class="io-line">Defined in <a href="" data-line="334" class="link-to-prism">src/combobox/combobox.component.ts:334</a></div>
1577
1614
  </td>
1578
1615
  </tr>
1579
1616
  <tr>
@@ -1600,7 +1637,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1600
1637
  </tr>
1601
1638
  <tr>
1602
1639
  <td class="col-md-2" colspan="2">
1603
- <div class="io-line">Defined in <a href="" data-line="336" class="link-to-prism">src/combobox/combobox.component.ts:336</a></div>
1640
+ <div class="io-line">Defined in <a href="" data-line="338" class="link-to-prism">src/combobox/combobox.component.ts:338</a></div>
1604
1641
  </td>
1605
1642
  </tr>
1606
1643
  <tr>
@@ -1630,7 +1667,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1630
1667
  </tr>
1631
1668
  <tr>
1632
1669
  <td class="col-md-2" colspan="2">
1633
- <div class="io-line">Defined in <a href="" data-line="416" class="link-to-prism">src/combobox/combobox.component.ts:416</a></div>
1670
+ <div class="io-line">Defined in <a href="" data-line="422" class="link-to-prism">src/combobox/combobox.component.ts:422</a></div>
1634
1671
  </td>
1635
1672
  </tr>
1636
1673
  <tr>
@@ -1657,7 +1694,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1657
1694
  </tr>
1658
1695
  <tr>
1659
1696
  <td class="col-md-2" colspan="2">
1660
- <div class="io-line">Defined in <a href="" data-line="412" class="link-to-prism">src/combobox/combobox.component.ts:412</a></div>
1697
+ <div class="io-line">Defined in <a href="" data-line="418" class="link-to-prism">src/combobox/combobox.component.ts:418</a></div>
1661
1698
  </td>
1662
1699
  </tr>
1663
1700
  <tr>
@@ -1684,7 +1721,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1684
1721
  </tr>
1685
1722
  <tr>
1686
1723
  <td class="col-md-2" colspan="2">
1687
- <div class="io-line">Defined in <a href="" data-line="414" class="link-to-prism">src/combobox/combobox.component.ts:414</a></div>
1724
+ <div class="io-line">Defined in <a href="" data-line="420" class="link-to-prism">src/combobox/combobox.component.ts:420</a></div>
1688
1725
  </td>
1689
1726
  </tr>
1690
1727
  <tr>
@@ -1711,7 +1748,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1711
1748
  </tr>
1712
1749
  <tr>
1713
1750
  <td class="col-md-2" colspan="2">
1714
- <div class="io-line">Defined in <a href="" data-line="376" class="link-to-prism">src/combobox/combobox.component.ts:376</a></div>
1751
+ <div class="io-line">Defined in <a href="" data-line="382" class="link-to-prism">src/combobox/combobox.component.ts:382</a></div>
1715
1752
  </td>
1716
1753
  </tr>
1717
1754
  <tr>
@@ -1742,7 +1779,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1742
1779
  </tr>
1743
1780
  <tr>
1744
1781
  <td class="col-md-2" colspan="2">
1745
- <div class="io-line">Defined in <a href="" data-line="403" class="link-to-prism">src/combobox/combobox.component.ts:403</a></div>
1782
+ <div class="io-line">Defined in <a href="" data-line="409" class="link-to-prism">src/combobox/combobox.component.ts:409</a></div>
1746
1783
  </td>
1747
1784
  </tr>
1748
1785
  <tr>
@@ -1792,7 +1829,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1792
1829
  </tr>
1793
1830
  <tr>
1794
1831
  <td class="col-md-4">
1795
- <div class="io-line">Defined in <a href="" data-line="422" class="link-to-prism">src/combobox/combobox.component.ts:422</a></div>
1832
+ <div class="io-line">Defined in <a href="" data-line="428" class="link-to-prism">src/combobox/combobox.component.ts:428</a></div>
1796
1833
  </td>
1797
1834
  </tr>
1798
1835
 
@@ -1823,7 +1860,7 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1823
1860
  </tr>
1824
1861
  <tr>
1825
1862
  <td class="col-md-4">
1826
- <div class="io-line">Defined in <a href="" data-line="423" class="link-to-prism">src/combobox/combobox.component.ts:423</a></div>
1863
+ <div class="io-line">Defined in <a href="" data-line="429" class="link-to-prism">src/combobox/combobox.component.ts:429</a></div>
1827
1864
  </td>
1828
1865
  </tr>
1829
1866
 
@@ -1858,8 +1895,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1858
1895
 
1859
1896
  <tr>
1860
1897
  <td class="col-md-4">
1861
- <div class="io-line">Defined in <a href="" data-line="574"
1862
- class="link-to-prism">src/combobox/combobox.component.ts:574</a></div>
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>
1863
1900
  </td>
1864
1901
  </tr>
1865
1902
 
@@ -1899,8 +1936,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1899
1936
 
1900
1937
  <tr>
1901
1938
  <td class="col-md-4">
1902
- <div class="io-line">Defined in <a href="" data-line="825"
1903
- class="link-to-prism">src/combobox/combobox.component.ts:825</a></div>
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>
1904
1941
  </td>
1905
1942
  </tr>
1906
1943
 
@@ -1938,8 +1975,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1938
1975
 
1939
1976
  <tr>
1940
1977
  <td class="col-md-4">
1941
- <div class="io-line">Defined in <a href="" data-line="836"
1942
- class="link-to-prism">src/combobox/combobox.component.ts:836</a></div>
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>
1943
1980
  </td>
1944
1981
  </tr>
1945
1982
 
@@ -1977,8 +2014,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
1977
2014
 
1978
2015
  <tr>
1979
2016
  <td class="col-md-4">
1980
- <div class="io-line">Defined in <a href="" data-line="805"
1981
- class="link-to-prism">src/combobox/combobox.component.ts:805</a></div>
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>
1982
2019
  </td>
1983
2020
  </tr>
1984
2021
 
@@ -2046,8 +2083,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
2046
2083
 
2047
2084
  <tr>
2048
2085
  <td class="col-md-4">
2049
- <div class="io-line">Defined in <a href="" data-line="599"
2050
- class="link-to-prism">src/combobox/combobox.component.ts:599</a></div>
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>
2051
2088
  </td>
2052
2089
  </tr>
2053
2090
 
@@ -2083,8 +2120,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
2083
2120
 
2084
2121
  <tr>
2085
2122
  <td class="col-md-4">
2086
- <div class="io-line">Defined in <a href="" data-line="865"
2087
- class="link-to-prism">src/combobox/combobox.component.ts:865</a></div>
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>
2088
2125
  </td>
2089
2126
  </tr>
2090
2127
 
@@ -2148,8 +2185,8 @@ Multi-select comboboxes also provide &quot;pills&quot; of selected items.</p>
2148
2185
 
2149
2186
  <tr>
2150
2187
  <td class="col-md-4">
2151
- <div class="io-line">Defined in <a href="" data-line="845"
2152
- class="link-to-prism">src/combobox/combobox.component.ts:845</a></div>
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>
2153
2190
  </td>
2154
2191
  </tr>
2155
2192
 
@@ -2190,8 +2227,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2190
2227
 
2191
2228
  <tr>
2192
2229
  <td class="col-md-4">
2193
- <div class="io-line">Defined in <a href="" data-line="886"
2194
- class="link-to-prism">src/combobox/combobox.component.ts:886</a></div>
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>
2195
2232
  </td>
2196
2233
  </tr>
2197
2234
 
@@ -2227,8 +2264,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2227
2264
 
2228
2265
  <tr>
2229
2266
  <td class="col-md-4">
2230
- <div class="io-line">Defined in <a href="" data-line="777"
2231
- class="link-to-prism">src/combobox/combobox.component.ts:777</a></div>
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>
2232
2269
  </td>
2233
2270
  </tr>
2234
2271
 
@@ -2292,8 +2329,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2292
2329
 
2293
2330
  <tr>
2294
2331
  <td class="col-md-4">
2295
- <div class="io-line">Defined in <a href="" data-line="665"
2296
- class="link-to-prism">src/combobox/combobox.component.ts:665</a></div>
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>
2297
2334
  </td>
2298
2335
  </tr>
2299
2336
 
@@ -2357,8 +2394,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2357
2394
 
2358
2395
  <tr>
2359
2396
  <td class="col-md-4">
2360
- <div class="io-line">Defined in <a href="" data-line="685"
2361
- class="link-to-prism">src/combobox/combobox.component.ts:685</a></div>
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>
2362
2399
  </td>
2363
2400
  </tr>
2364
2401
 
@@ -2405,8 +2442,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2405
2442
 
2406
2443
  <tr>
2407
2444
  <td class="col-md-4">
2408
- <div class="io-line">Defined in <a href="" data-line="574"
2409
- class="link-to-prism">src/combobox/combobox.component.ts:574</a></div>
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>
2410
2447
  </td>
2411
2448
  </tr>
2412
2449
 
@@ -2476,8 +2513,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2476
2513
 
2477
2514
  <tr>
2478
2515
  <td class="col-md-4">
2479
- <div class="io-line">Defined in <a href="" data-line="798"
2480
- class="link-to-prism">src/combobox/combobox.component.ts:798</a></div>
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>
2481
2518
  </td>
2482
2519
  </tr>
2483
2520
 
@@ -2539,8 +2576,8 @@ This can be overridden by passing in a value to the <code>dropUp</code> input.</
2539
2576
 
2540
2577
  <tr>
2541
2578
  <td class="col-md-4">
2542
- <div class="io-line">Defined in <a href="" data-line="483"
2543
- class="link-to-prism">src/combobox/combobox.component.ts:483</a></div>
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>
2544
2581
  </td>
2545
2582
  </tr>
2546
2583
 
@@ -2579,8 +2616,8 @@ Subscribes to select events and handles focus/filtering/initial list updates</p>
2579
2616
 
2580
2617
  <tr>
2581
2618
  <td class="col-md-4">
2582
- <div class="io-line">Defined in <a href="" data-line="548"
2583
- class="link-to-prism">src/combobox/combobox.component.ts:548</a></div>
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>
2584
2621
  </td>
2585
2622
  </tr>
2586
2623
 
@@ -2618,8 +2655,8 @@ Subscribes to select events and handles focus/filtering/initial list updates</p>
2618
2655
 
2619
2656
  <tr>
2620
2657
  <td class="col-md-4">
2621
- <div class="io-line">Defined in <a href="" data-line="467"
2622
- class="link-to-prism">src/combobox/combobox.component.ts:467</a></div>
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>
2623
2660
  </td>
2624
2661
  </tr>
2625
2662
 
@@ -2684,8 +2721,8 @@ Updates pills if necessary.</p>
2684
2721
 
2685
2722
  <tr>
2686
2723
  <td class="col-md-4">
2687
- <div class="io-line">Defined in <a href="" data-line="564"
2688
- class="link-to-prism">src/combobox/combobox.component.ts:564</a></div>
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>
2689
2726
  </td>
2690
2727
  </tr>
2691
2728
 
@@ -2723,8 +2760,8 @@ Updates pills if necessary.</p>
2723
2760
 
2724
2761
  <tr>
2725
2762
  <td class="col-md-4">
2726
- <div class="io-line">Defined in <a href="" data-line="636"
2727
- class="link-to-prism">src/combobox/combobox.component.ts:636</a></div>
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>
2728
2765
  </td>
2729
2766
  </tr>
2730
2767
 
@@ -2762,8 +2799,8 @@ Updates pills if necessary.</p>
2762
2799
 
2763
2800
  <tr>
2764
2801
  <td class="col-md-4">
2765
- <div class="io-line">Defined in <a href="" data-line="733"
2766
- class="link-to-prism">src/combobox/combobox.component.ts:733</a></div>
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>
2767
2804
  </td>
2768
2805
  </tr>
2769
2806
 
@@ -2844,8 +2881,8 @@ Updates pills if necessary.</p>
2844
2881
 
2845
2882
  <tr>
2846
2883
  <td class="col-md-4">
2847
- <div class="io-line">Defined in <a href="" data-line="766"
2848
- class="link-to-prism">src/combobox/combobox.component.ts:766</a></div>
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>
2849
2886
  </td>
2850
2887
  </tr>
2851
2888
 
@@ -2915,8 +2952,8 @@ Updates pills if necessary.</p>
2915
2952
 
2916
2953
  <tr>
2917
2954
  <td class="col-md-4">
2918
- <div class="io-line">Defined in <a href="" data-line="699"
2919
- class="link-to-prism">src/combobox/combobox.component.ts:699</a></div>
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>
2920
2957
  </td>
2921
2958
  </tr>
2922
2959
 
@@ -2954,8 +2991,8 @@ Updates pills if necessary.</p>
2954
2991
 
2955
2992
  <tr>
2956
2993
  <td class="col-md-4">
2957
- <div class="io-line">Defined in <a href="" data-line="640"
2958
- class="link-to-prism">src/combobox/combobox.component.ts:640</a></div>
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>
2959
2996
  </td>
2960
2997
  </tr>
2961
2998
 
@@ -3021,8 +3058,8 @@ Updates pills if necessary.</p>
3021
3058
 
3022
3059
  <tr>
3023
3060
  <td class="col-md-4">
3024
- <div class="io-line">Defined in <a href="" data-line="644"
3025
- class="link-to-prism">src/combobox/combobox.component.ts:644</a></div>
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>
3026
3063
  </td>
3027
3064
  </tr>
3028
3065
 
@@ -3088,8 +3125,8 @@ Updates pills if necessary.</p>
3088
3125
 
3089
3126
  <tr>
3090
3127
  <td class="col-md-4">
3091
- <div class="io-line">Defined in <a href="" data-line="653"
3092
- class="link-to-prism">src/combobox/combobox.component.ts:653</a></div>
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>
3093
3130
  </td>
3094
3131
  </tr>
3095
3132
 
@@ -3160,8 +3197,8 @@ Updates pills if necessary.</p>
3160
3197
 
3161
3198
  <tr>
3162
3199
  <td class="col-md-4">
3163
- <div class="io-line">Defined in <a href="" data-line="722"
3164
- class="link-to-prism">src/combobox/combobox.component.ts:722</a></div>
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>
3165
3202
  </td>
3166
3203
  </tr>
3167
3204
 
@@ -3201,8 +3238,8 @@ Updates pills if necessary.</p>
3201
3238
 
3202
3239
  <tr>
3203
3240
  <td class="col-md-4">
3204
- <div class="io-line">Defined in <a href="" data-line="660"
3205
- class="link-to-prism">src/combobox/combobox.component.ts:660</a></div>
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>
3206
3243
  </td>
3207
3244
  </tr>
3208
3245
 
@@ -3242,8 +3279,8 @@ Updates pills if necessary.</p>
3242
3279
 
3243
3280
  <tr>
3244
3281
  <td class="col-md-4">
3245
- <div class="io-line">Defined in <a href="" data-line="874"
3246
- class="link-to-prism">src/combobox/combobox.component.ts:874</a></div>
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>
3247
3284
  </td>
3248
3285
  </tr>
3249
3286
 
@@ -3279,8 +3316,8 @@ Updates pills if necessary.</p>
3279
3316
 
3280
3317
  <tr>
3281
3318
  <td class="col-md-4">
3282
- <div class="io-line">Defined in <a href="" data-line="604"
3283
- class="link-to-prism">src/combobox/combobox.component.ts:604</a></div>
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>
3284
3321
  </td>
3285
3322
  </tr>
3286
3323
 
@@ -3351,7 +3388,7 @@ Updates pills if necessary.</p>
3351
3388
  </tr>
3352
3389
  <tr>
3353
3390
  <td class="col-md-4">
3354
- <div class="io-line">Defined in <a href="" data-line="451" class="link-to-prism">src/combobox/combobox.component.ts:451</a></div>
3391
+ <div class="io-line">Defined in <a href="" data-line="457" class="link-to-prism">src/combobox/combobox.component.ts:457</a></div>
3355
3392
  </td>
3356
3393
  </tr>
3357
3394
 
@@ -3377,7 +3414,7 @@ Updates pills if necessary.</p>
3377
3414
  </tr>
3378
3415
  <tr>
3379
3416
  <td class="col-md-4">
3380
- <div class="io-line">Defined in <a href="" data-line="449" class="link-to-prism">src/combobox/combobox.component.ts:449</a></div>
3417
+ <div class="io-line">Defined in <a href="" data-line="455" class="link-to-prism">src/combobox/combobox.component.ts:455</a></div>
3381
3418
  </td>
3382
3419
  </tr>
3383
3420
 
@@ -3403,7 +3440,7 @@ Updates pills if necessary.</p>
3403
3440
  </tr>
3404
3441
  <tr>
3405
3442
  <td class="col-md-4">
3406
- <div class="io-line">Defined in <a href="" data-line="448" class="link-to-prism">src/combobox/combobox.component.ts:448</a></div>
3443
+ <div class="io-line">Defined in <a href="" data-line="454" class="link-to-prism">src/combobox/combobox.component.ts:454</a></div>
3407
3444
  </td>
3408
3445
  </tr>
3409
3446
 
@@ -3429,7 +3466,7 @@ Updates pills if necessary.</p>
3429
3466
  </tr>
3430
3467
  <tr>
3431
3468
  <td class="col-md-4">
3432
- <div class="io-line">Defined in <a href="" data-line="450" class="link-to-prism">src/combobox/combobox.component.ts:450</a></div>
3469
+ <div class="io-line">Defined in <a href="" data-line="456" class="link-to-prism">src/combobox/combobox.component.ts:456</a></div>
3433
3470
  </td>
3434
3471
  </tr>
3435
3472
 
@@ -3455,7 +3492,7 @@ Updates pills if necessary.</p>
3455
3492
  </tr>
3456
3493
  <tr>
3457
3494
  <td class="col-md-4">
3458
- <div class="io-line">Defined in <a href="" data-line="446" class="link-to-prism">src/combobox/combobox.component.ts:446</a></div>
3495
+ <div class="io-line">Defined in <a href="" data-line="452" class="link-to-prism">src/combobox/combobox.component.ts:452</a></div>
3459
3496
  </td>
3460
3497
  </tr>
3461
3498
 
@@ -3480,7 +3517,7 @@ Updates pills if necessary.</p>
3480
3517
  </tr>
3481
3518
  <tr>
3482
3519
  <td class="col-md-4">
3483
- <div class="io-line">Defined in <a href="" data-line="439" class="link-to-prism">src/combobox/combobox.component.ts:439</a></div>
3520
+ <div class="io-line">Defined in <a href="" data-line="445" class="link-to-prism">src/combobox/combobox.component.ts:445</a></div>
3484
3521
  </td>
3485
3522
  </tr>
3486
3523
 
@@ -3512,7 +3549,7 @@ Updates pills if necessary.</p>
3512
3549
  </tr>
3513
3550
  <tr>
3514
3551
  <td class="col-md-4">
3515
- <div class="io-line">Defined in <a href="" data-line="447" class="link-to-prism">src/combobox/combobox.component.ts:447</a></div>
3552
+ <div class="io-line">Defined in <a href="" data-line="453" class="link-to-prism">src/combobox/combobox.component.ts:453</a></div>
3516
3553
  </td>
3517
3554
  </tr>
3518
3555
 
@@ -3538,7 +3575,7 @@ Updates pills if necessary.</p>
3538
3575
  </tr>
3539
3576
  <tr>
3540
3577
  <td class="col-md-4">
3541
- <div class="io-line">Defined in <a href="" data-line="445" class="link-to-prism">src/combobox/combobox.component.ts:445</a></div>
3578
+ <div class="io-line">Defined in <a href="" data-line="451" class="link-to-prism">src/combobox/combobox.component.ts:451</a></div>
3542
3579
  </td>
3543
3580
  </tr>
3544
3581
 
@@ -3570,7 +3607,7 @@ Updates pills if necessary.</p>
3570
3607
  </tr>
3571
3608
  <tr>
3572
3609
  <td class="col-md-4">
3573
- <div class="io-line">Defined in <a href="" data-line="263" class="link-to-prism">src/combobox/combobox.component.ts:263</a></div>
3610
+ <div class="io-line">Defined in <a href="" data-line="265" class="link-to-prism">src/combobox/combobox.component.ts:265</a></div>
3574
3611
  </td>
3575
3612
  </tr>
3576
3613
 
@@ -3611,7 +3648,7 @@ Updates pills if necessary.</p>
3611
3648
  </tr>
3612
3649
  <tr>
3613
3650
  <td class="col-md-4">
3614
- <div class="io-line">Defined in <a href="" data-line="423" class="link-to-prism">src/combobox/combobox.component.ts:423</a></div>
3651
+ <div class="io-line">Defined in <a href="" data-line="429" class="link-to-prism">src/combobox/combobox.component.ts:429</a></div>
3615
3652
  </td>
3616
3653
  </tr>
3617
3654
 
@@ -3641,7 +3678,7 @@ Updates pills if necessary.</p>
3641
3678
  </tr>
3642
3679
  <tr>
3643
3680
  <td class="col-md-4">
3644
- <div class="io-line">Defined in <a href="" data-line="419" class="link-to-prism">src/combobox/combobox.component.ts:419</a></div>
3681
+ <div class="io-line">Defined in <a href="" data-line="425" class="link-to-prism">src/combobox/combobox.component.ts:425</a></div>
3645
3682
  </td>
3646
3683
  </tr>
3647
3684
 
@@ -3676,7 +3713,7 @@ Updates pills if necessary.</p>
3676
3713
  </tr>
3677
3714
  <tr>
3678
3715
  <td class="col-md-4">
3679
- <div class="io-line">Defined in <a href="" data-line="422" class="link-to-prism">src/combobox/combobox.component.ts:422</a></div>
3716
+ <div class="io-line">Defined in <a href="" data-line="428" class="link-to-prism">src/combobox/combobox.component.ts:428</a></div>
3680
3717
  </td>
3681
3718
  </tr>
3682
3719
 
@@ -3712,7 +3749,7 @@ Updates pills if necessary.</p>
3712
3749
  </tr>
3713
3750
  <tr>
3714
3751
  <td class="col-md-4">
3715
- <div class="io-line">Defined in <a href="" data-line="420" class="link-to-prism">src/combobox/combobox.component.ts:420</a></div>
3752
+ <div class="io-line">Defined in <a href="" data-line="426" class="link-to-prism">src/combobox/combobox.component.ts:426</a></div>
3716
3753
  </td>
3717
3754
  </tr>
3718
3755
 
@@ -3737,7 +3774,7 @@ Updates pills if necessary.</p>
3737
3774
  </tr>
3738
3775
  <tr>
3739
3776
  <td class="col-md-4">
3740
- <div class="io-line">Defined in <a href="" data-line="435" class="link-to-prism">src/combobox/combobox.component.ts:435</a></div>
3777
+ <div class="io-line">Defined in <a href="" data-line="441" class="link-to-prism">src/combobox/combobox.component.ts:441</a></div>
3741
3778
  </td>
3742
3779
  </tr>
3743
3780
 
@@ -3773,7 +3810,7 @@ Updates pills if necessary.</p>
3773
3810
  </tr>
3774
3811
  <tr>
3775
3812
  <td class="col-md-4">
3776
- <div class="io-line">Defined in <a href="" data-line="421" class="link-to-prism">src/combobox/combobox.component.ts:421</a></div>
3813
+ <div class="io-line">Defined in <a href="" data-line="427" class="link-to-prism">src/combobox/combobox.component.ts:427</a></div>
3777
3814
  </td>
3778
3815
  </tr>
3779
3816
 
@@ -3799,7 +3836,7 @@ Updates pills if necessary.</p>
3799
3836
  </tr>
3800
3837
  <tr>
3801
3838
  <td class="col-md-4">
3802
- <div class="io-line">Defined in <a href="" data-line="441" class="link-to-prism">src/combobox/combobox.component.ts:441</a></div>
3839
+ <div class="io-line">Defined in <a href="" data-line="447" class="link-to-prism">src/combobox/combobox.component.ts:447</a></div>
3803
3840
  </td>
3804
3841
  </tr>
3805
3842
 
@@ -3831,7 +3868,7 @@ Updates pills if necessary.</p>
3831
3868
  </tr>
3832
3869
  <tr>
3833
3870
  <td class="col-md-4">
3834
- <div class="io-line">Defined in <a href="" data-line="442" class="link-to-prism">src/combobox/combobox.component.ts:442</a></div>
3871
+ <div class="io-line">Defined in <a href="" data-line="448" class="link-to-prism">src/combobox/combobox.component.ts:448</a></div>
3835
3872
  </td>
3836
3873
  </tr>
3837
3874
 
@@ -3857,7 +3894,7 @@ Updates pills if necessary.</p>
3857
3894
  </tr>
3858
3895
  <tr>
3859
3896
  <td class="col-md-4">
3860
- <div class="io-line">Defined in <a href="" data-line="425" class="link-to-prism">src/combobox/combobox.component.ts:425</a></div>
3897
+ <div class="io-line">Defined in <a href="" data-line="431" class="link-to-prism">src/combobox/combobox.component.ts:431</a></div>
3861
3898
  </td>
3862
3899
  </tr>
3863
3900
 
@@ -3882,7 +3919,7 @@ Updates pills if necessary.</p>
3882
3919
  </tr>
3883
3920
  <tr>
3884
3921
  <td class="col-md-4">
3885
- <div class="io-line">Defined in <a href="" data-line="434" class="link-to-prism">src/combobox/combobox.component.ts:434</a></div>
3922
+ <div class="io-line">Defined in <a href="" data-line="440" class="link-to-prism">src/combobox/combobox.component.ts:440</a></div>
3886
3923
  </td>
3887
3924
  </tr>
3888
3925
 
@@ -3914,7 +3951,7 @@ Updates pills if necessary.</p>
3914
3951
  </tr>
3915
3952
  <tr>
3916
3953
  <td class="col-md-4">
3917
- <div class="io-line">Defined in <a href="" data-line="430" class="link-to-prism">src/combobox/combobox.component.ts:430</a></div>
3954
+ <div class="io-line">Defined in <a href="" data-line="436" class="link-to-prism">src/combobox/combobox.component.ts:436</a></div>
3918
3955
  </td>
3919
3956
  </tr>
3920
3957
 
@@ -3952,7 +3989,7 @@ Updates pills if necessary.</p>
3952
3989
  </tr>
3953
3990
  <tr>
3954
3991
  <td class="col-md-4">
3955
- <div class="io-line">Defined in <a href="" data-line="443" class="link-to-prism">src/combobox/combobox.component.ts:443</a></div>
3992
+ <div class="io-line">Defined in <a href="" data-line="449" class="link-to-prism">src/combobox/combobox.component.ts:449</a></div>
3956
3993
  </td>
3957
3994
  </tr>
3958
3995
 
@@ -3984,7 +4021,7 @@ Updates pills if necessary.</p>
3984
4021
  </tr>
3985
4022
  <tr>
3986
4023
  <td class="col-md-4">
3987
- <div class="io-line">Defined in <a href="" data-line="432" class="link-to-prism">src/combobox/combobox.component.ts:432</a></div>
4024
+ <div class="io-line">Defined in <a href="" data-line="438" class="link-to-prism">src/combobox/combobox.component.ts:438</a></div>
3988
4025
  </td>
3989
4026
  </tr>
3990
4027
 
@@ -4016,7 +4053,7 @@ Updates pills if necessary.</p>
4016
4053
  </tr>
4017
4054
  <tr>
4018
4055
  <td class="col-md-4">
4019
- <div class="io-line">Defined in <a href="" data-line="427" class="link-to-prism">src/combobox/combobox.component.ts:427</a></div>
4056
+ <div class="io-line">Defined in <a href="" data-line="433" class="link-to-prism">src/combobox/combobox.component.ts:433</a></div>
4020
4057
  </td>
4021
4058
  </tr>
4022
4059
 
@@ -4052,7 +4089,7 @@ Updates pills if necessary.</p>
4052
4089
  </tr>
4053
4090
  <tr>
4054
4091
  <td class="col-md-4">
4055
- <div class="io-line">Defined in <a href="" data-line="418" class="link-to-prism">src/combobox/combobox.component.ts:418</a></div>
4092
+ <div class="io-line">Defined in <a href="" data-line="424" class="link-to-prism">src/combobox/combobox.component.ts:424</a></div>
4056
4093
  </td>
4057
4094
  </tr>
4058
4095
 
@@ -4087,7 +4124,7 @@ Updates pills if necessary.</p>
4087
4124
  </tr>
4088
4125
  <tr>
4089
4126
  <td class="col-md-4">
4090
- <div class="io-line">Defined in <a href="" data-line="200" class="link-to-prism">src/combobox/combobox.component.ts:200</a></div>
4127
+ <div class="io-line">Defined in <a href="" data-line="202" class="link-to-prism">src/combobox/combobox.component.ts:202</a></div>
4091
4128
  </td>
4092
4129
  </tr>
4093
4130
 
@@ -4098,7 +4135,7 @@ Updates pills if necessary.</p>
4098
4135
  </tr>
4099
4136
  <tr>
4100
4137
  <td class="col-md-4">
4101
- <div class="io-line">Defined in <a href="" data-line="196" class="link-to-prism">src/combobox/combobox.component.ts:196</a></div>
4138
+ <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/combobox/combobox.component.ts:198</a></div>
4102
4139
  </td>
4103
4140
  </tr>
4104
4141
  <tr>
@@ -4158,7 +4195,7 @@ Updates pills if necessary.</p>
4158
4195
  </tr>
4159
4196
  <tr>
4160
4197
  <td class="col-md-4">
4161
- <div class="io-line">Defined in <a href="" data-line="210" class="link-to-prism">src/combobox/combobox.component.ts:210</a></div>
4198
+ <div class="io-line">Defined in <a href="" data-line="212" class="link-to-prism">src/combobox/combobox.component.ts:212</a></div>
4162
4199
  </td>
4163
4200
  </tr>
4164
4201
 
@@ -4169,7 +4206,7 @@ Updates pills if necessary.</p>
4169
4206
  </tr>
4170
4207
  <tr>
4171
4208
  <td class="col-md-4">
4172
- <div class="io-line">Defined in <a href="" data-line="206" class="link-to-prism">src/combobox/combobox.component.ts:206</a></div>
4209
+ <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/combobox/combobox.component.ts:208</a></div>
4173
4210
  </td>
4174
4211
  </tr>
4175
4212
  <tr>
@@ -4229,7 +4266,7 @@ Updates pills if necessary.</p>
4229
4266
  </tr>
4230
4267
  <tr>
4231
4268
  <td class="col-md-4">
4232
- <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/combobox/combobox.component.ts:220</a></div>
4269
+ <div class="io-line">Defined in <a href="" data-line="222" class="link-to-prism">src/combobox/combobox.component.ts:222</a></div>
4233
4270
  </td>
4234
4271
  </tr>
4235
4272
 
@@ -4240,7 +4277,7 @@ Updates pills if necessary.</p>
4240
4277
  </tr>
4241
4278
  <tr>
4242
4279
  <td class="col-md-4">
4243
- <div class="io-line">Defined in <a href="" data-line="216" class="link-to-prism">src/combobox/combobox.component.ts:216</a></div>
4280
+ <div class="io-line">Defined in <a href="" data-line="218" class="link-to-prism">src/combobox/combobox.component.ts:218</a></div>
4244
4281
  </td>
4245
4282
  </tr>
4246
4283
  <tr>
@@ -4300,7 +4337,7 @@ Updates pills if necessary.</p>
4300
4337
  </tr>
4301
4338
  <tr>
4302
4339
  <td class="col-md-4">
4303
- <div class="io-line">Defined in <a href="" data-line="230" class="link-to-prism">src/combobox/combobox.component.ts:230</a></div>
4340
+ <div class="io-line">Defined in <a href="" data-line="232" class="link-to-prism">src/combobox/combobox.component.ts:232</a></div>
4304
4341
  </td>
4305
4342
  </tr>
4306
4343
 
@@ -4311,7 +4348,7 @@ Updates pills if necessary.</p>
4311
4348
  </tr>
4312
4349
  <tr>
4313
4350
  <td class="col-md-4">
4314
- <div class="io-line">Defined in <a href="" data-line="226" class="link-to-prism">src/combobox/combobox.component.ts:226</a></div>
4351
+ <div class="io-line">Defined in <a href="" data-line="228" class="link-to-prism">src/combobox/combobox.component.ts:228</a></div>
4315
4352
  </td>
4316
4353
  </tr>
4317
4354
  <tr>
@@ -4371,7 +4408,7 @@ Updates pills if necessary.</p>
4371
4408
  </tr>
4372
4409
  <tr>
4373
4410
  <td class="col-md-4">
4374
- <div class="io-line">Defined in <a href="" data-line="240" class="link-to-prism">src/combobox/combobox.component.ts:240</a></div>
4411
+ <div class="io-line">Defined in <a href="" data-line="242" class="link-to-prism">src/combobox/combobox.component.ts:242</a></div>
4375
4412
  </td>
4376
4413
  </tr>
4377
4414
 
@@ -4382,7 +4419,7 @@ Updates pills if necessary.</p>
4382
4419
  </tr>
4383
4420
  <tr>
4384
4421
  <td class="col-md-4">
4385
- <div class="io-line">Defined in <a href="" data-line="236" class="link-to-prism">src/combobox/combobox.component.ts:236</a></div>
4422
+ <div class="io-line">Defined in <a href="" data-line="238" class="link-to-prism">src/combobox/combobox.component.ts:238</a></div>
4386
4423
  </td>
4387
4424
  </tr>
4388
4425
  <tr>
@@ -4442,7 +4479,7 @@ Updates pills if necessary.</p>
4442
4479
  </tr>
4443
4480
  <tr>
4444
4481
  <td class="col-md-4">
4445
- <div class="io-line">Defined in <a href="" data-line="250" class="link-to-prism">src/combobox/combobox.component.ts:250</a></div>
4482
+ <div class="io-line">Defined in <a href="" data-line="252" class="link-to-prism">src/combobox/combobox.component.ts:252</a></div>
4446
4483
  </td>
4447
4484
  </tr>
4448
4485
 
@@ -4453,7 +4490,7 @@ Updates pills if necessary.</p>
4453
4490
  </tr>
4454
4491
  <tr>
4455
4492
  <td class="col-md-4">
4456
- <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/combobox/combobox.component.ts:246</a></div>
4493
+ <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/combobox/combobox.component.ts:248</a></div>
4457
4494
  </td>
4458
4495
  </tr>
4459
4496
  <tr>
@@ -4513,7 +4550,7 @@ Updates pills if necessary.</p>
4513
4550
  </tr>
4514
4551
  <tr>
4515
4552
  <td class="col-md-4">
4516
- <div class="io-line">Defined in <a href="" data-line="260" class="link-to-prism">src/combobox/combobox.component.ts:260</a></div>
4553
+ <div class="io-line">Defined in <a href="" data-line="262" class="link-to-prism">src/combobox/combobox.component.ts:262</a></div>
4517
4554
  </td>
4518
4555
  </tr>
4519
4556
 
@@ -4524,7 +4561,7 @@ Updates pills if necessary.</p>
4524
4561
  </tr>
4525
4562
  <tr>
4526
4563
  <td class="col-md-4">
4527
- <div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">src/combobox/combobox.component.ts:256</a></div>
4564
+ <div class="io-line">Defined in <a href="" data-line="258" class="link-to-prism">src/combobox/combobox.component.ts:258</a></div>
4528
4565
  </td>
4529
4566
  </tr>
4530
4567
  <tr>
@@ -4638,6 +4675,7 @@ import { Observable } from &quot;rxjs&quot;;
4638
4675
  &#x27;cds--list-box--md&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;md&#x27;,
4639
4676
  &#x27;cds--list-box--lg&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;lg&#x27;,
4640
4677
  &#x27;cds--list-box--disabled&#x27;: disabled,
4678
+ &#x27;cds--combo-box--readonly&#x27;: readonly,
4641
4679
  &#x27;cds--combo-box--warning cds--list-box--warning&#x27;: warn
4642
4680
  }&quot;
4643
4681
  class&#x3D;&quot;cds--list-box cds--combo-box&quot;
@@ -4649,7 +4687,7 @@ import { Observable } from &quot;rxjs&quot;;
4649
4687
  &lt;div
4650
4688
  *ngIf&#x3D;&quot;type &#x3D;&#x3D;&#x3D; &#x27;multi&#x27; &amp;&amp; pills.length &gt; 0&quot;
4651
4689
  class&#x3D;&quot;cds--tag cds--tag--filter cds--tag--high-contrast&quot;
4652
- [ngClass]&#x3D;&quot;{&#x27;cds--tag--disabled&#x27;: disabled}&quot;&gt;
4690
+ [ngClass]&#x3D;&quot;{&#x27;cds--tag--disabled&#x27;: disabled || readonly}&quot;&gt;
4653
4691
  &lt;span class&#x3D;&quot;cds--tag__label&quot;&gt;{{ pills.length }}&lt;/span&gt;
4654
4692
  &lt;button
4655
4693
  type&#x3D;&quot;button&quot;
@@ -4659,7 +4697,7 @@ import { Observable } from &quot;rxjs&quot;;
4659
4697
  class&#x3D;&quot;cds--tag__close-icon&quot;
4660
4698
  tabindex&#x3D;&quot;0&quot;
4661
4699
  [title]&#x3D;&quot;clearSelectionsTitle&quot;
4662
- [disabled]&#x3D;&quot;disabled&quot;
4700
+ [disabled]&#x3D;&quot;disabled || readonly&quot;
4663
4701
  [attr.aria-label]&#x3D;&quot;clearSelectionAria&quot;&gt;
4664
4702
  &lt;svg
4665
4703
  focusable&#x3D;&quot;false&quot;
@@ -4681,6 +4719,7 @@ import { Observable } from &quot;rxjs&quot;;
4681
4719
  autocomplete&#x3D;&quot;off&quot;
4682
4720
  role&#x3D;&quot;combobox&quot;
4683
4721
  [disabled]&#x3D;&quot;disabled&quot;
4722
+ [readOnly]&#x3D;&quot;readonly&quot;
4684
4723
  (input)&#x3D;&quot;onSearch($event.target.value)&quot;
4685
4724
  (blur)&#x3D;&quot;onBlur()&quot;
4686
4725
  (keydown.enter)&#x3D;&quot;onSubmit($event)&quot;
@@ -4937,6 +4976,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
4937
4976
  * Set to &#x60;true&#x60; to disable combobox.
4938
4977
  */
4939
4978
  @Input() disabled &#x3D; false;
4979
+ /**
4980
+ * Set to &#x60;true&#x60; for readonly state.
4981
+ */
4982
+ @Input() readonly &#x3D; false;
4940
4983
  /**
4941
4984
  * Emits a ListItem
4942
4985
  *
@@ -5272,7 +5315,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
5272
5315
  * Opens the dropdown.
5273
5316
  */
5274
5317
  public openDropdown() {
5275
- if (this.disabled) { return; }
5318
+ if (this.disabled || this.readonly) { return; }
5276
5319
  this.open &#x3D; true;
5277
5320
  this._dropUp &#x3D; false;
5278
5321
 
@@ -5353,7 +5396,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
5353
5396
  event.stopPropagation();
5354
5397
  event.preventDefault();
5355
5398
 
5356
- if (this.disabled) {
5399
+ if (this.disabled || this.readonly) {
5357
5400
  return;
5358
5401
  }
5359
5402
 
@@ -5495,7 +5538,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
5495
5538
  <script src="../js/libs/htmlparser.js"></script>
5496
5539
  <script src="../js/libs/deep-iterator.js"></script>
5497
5540
  <script>
5498
- 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--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}"> <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" [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" (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>'
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>'
5499
5542
  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': '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'}];
5500
5543
  var DIRECTIVES = [{'name': 'AbstractDropdownView', 'selector': '[cdsAbstractDropdownView], [ibmAbstractDropdownView]'},{'name': 'ActionableButton', 'selector': '[cdsActionableButton], [ibmActionableButton]'},{'name': 'ActionableSubtitle', 'selector': '[cdsActionableSubtitle], [ibmActionableSubtitle]'},{'name': 'ActionableTitle', 'selector': '[cdsActionableTitle], [ibmActionableTitle]'},{'name': 'BaseModal', 'selector': '[cdsBaseModal], [ibmBaseModal]'},{'name': 'Button', 'selector': '[cdsButton], [ibmButton]'},{'name': 'ColumnDirective', 'selector': '[cdsCol], [ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[cdsContentOption], [ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[cdsDialog], [ibmDialog]'},{'name': 'ExpandableTileAboveFoldDirective', 'selector': '[cdsAboveFold], [ibmAboveFold]'},{'name': 'ExpandableTileBelowFoldDirective', 'selector': '[cdsBelowFold], [ibmBelowFold]'},{'name': 'ExpandedRowHover', 'selector': '[cdsExpandedRowHover], [ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[cdsGrid], [ibmGrid]'},{'name': 'IconDirective', 'selector': '[cdsIcon], [ibmIcon]'},{'name': 'LayerDirective', 'selector': '[cdsLayer], [ibmLayer]'},{'name': 'Link', 'selector': '[cdsLink], [ibmLink]'},{'name': 'List', 'selector': '[cdsList], [ibmList]'},{'name': 'ListItemDirective', 'selector': '[cdsListItem], [ibmListItem]'},{'name': 'ModalContent', 'selector': '[cdsModalContent], [ibmModalContent]'},{'name': 'ModalContentText', 'selector': '[cdsModalContentText], [ibmModalContentText]'},{'name': 'ModalHeaderHeading', 'selector': '[cdsModalHeaderHeading], [ibmModalHeaderHeading]'},{'name': 'ModalHeaderLabel', 'selector': '[cdsModalHeaderLabel], [ibmModalHeaderLabel]'},{'name': 'NotificationSubtitle', 'selector': '[cdsNotificationSubtitle], [ibmNotificationSubtitle]'},{'name': 'NotificationTitle', 'selector': '[cdsNotificationTitle], [ibmNotificationTitle]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[cdsOverflowMenu], [ibmOverflowMenu]'},{'name': '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': '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]'}];
5501
5544
  var ACTUAL_COMPONENT = {'name': 'ComboBox'};