carbon-components-angular 3.8.0 → 3.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/carbon-angular.umd.js +2 -2
- package/bundle/carbon-angular.umd.js.map +1 -1
- package/checkbox/checkbox.component.d.ts +4 -0
- package/checkbox/checkbox.component.js +6 -1
- package/checkbox/checkbox.component.js.map +1 -1
- package/checkbox/checkbox.component.metadata.json +1 -1
- package/checkbox/checkbox.component.ngfactory.js +2 -2
- package/checkbox/checkbox.component.ngfactory.js.map +1 -1
- package/checkbox/checkbox.component.ngsummary.json +1 -1
- package/checkbox/checkbox.module.ngfactory.js.map +1 -1
- package/combobox/combobox.component.d.ts +14 -4
- package/combobox/combobox.component.js +12 -9
- package/combobox/combobox.component.js.map +1 -1
- package/combobox/combobox.component.metadata.json +1 -1
- package/combobox/combobox.component.ngfactory.js +15 -8
- package/combobox/combobox.component.ngfactory.js.map +1 -1
- package/combobox/combobox.component.ngsummary.json +1 -1
- package/combobox/combobox.module.ngfactory.js.map +1 -1
- package/content-switcher/content-switcher.component.d.ts +1 -0
- package/content-switcher/content-switcher.component.js +18 -5
- package/content-switcher/content-switcher.component.js.map +1 -1
- package/content-switcher/content-switcher.component.metadata.json +1 -1
- package/content-switcher/content-switcher.component.ngfactory.js +2 -2
- package/content-switcher/content-switcher.component.ngfactory.js.map +1 -1
- package/content-switcher/content-switcher.component.ngsummary.json +1 -1
- package/content-switcher/content-switcher.module.ngfactory.js.map +1 -1
- package/datepicker/datepicker.component.d.ts +1 -1
- package/datepicker/datepicker.component.js.map +1 -1
- package/datepicker-input/datepicker-input.component.d.ts +2 -2
- package/datepicker-input/datepicker-input.component.js +1 -1
- package/datepicker-input/datepicker-input.component.js.map +1 -1
- package/datepicker-input/datepicker-input.component.metadata.json +1 -1
- package/datepicker-input/datepicker-input.component.ngfactory.js +14 -11
- package/datepicker-input/datepicker-input.component.ngfactory.js.map +1 -1
- package/datepicker-input/datepicker-input.module.ngfactory.js.map +1 -1
- package/docs/documentation/classes/CheckboxChange.html +7 -1
- package/docs/documentation/classes/NumberChange.html +11 -7
- package/docs/documentation/classes/ToggleChange.html +13 -5
- package/docs/documentation/components/Checkbox.html +74 -41
- package/docs/documentation/components/ComboBox.html +366 -184
- package/docs/documentation/components/ContentSwitcher.html +136 -12
- package/docs/documentation/components/DatePicker.html +2 -2
- package/docs/documentation/components/DatePickerInput.html +24 -22
- package/docs/documentation/components/Dropdown.html +335 -62
- package/docs/documentation/components/File.html +10 -6
- package/docs/documentation/components/FileUploader.html +26 -24
- package/docs/documentation/components/HeaderItem.html +2 -2
- package/docs/documentation/components/Label.html +3 -3
- package/docs/documentation/components/Number.html +57 -41
- package/docs/documentation/components/Select.html +55 -42
- package/docs/documentation/components/Slider.html +254 -142
- package/docs/documentation/components/TimePicker.html +103 -17
- package/docs/documentation/components/TimePickerSelect.html +65 -37
- package/docs/documentation/components/Toggle.html +168 -55
- package/docs/documentation/coverage.html +20 -20
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/storybook/iframe.html +3 -3
- package/docs/storybook/{main.56858f6c72e70f546e4c.bundle.js → main.e71ec014aa45dc1d6679.bundle.js} +194 -104
- package/docs/storybook/main.e71ec014aa45dc1d6679.bundle.js.map +1 -0
- package/docs/storybook/{runtime~main.56858f6c72e70f546e4c.bundle.js → runtime~main.e71ec014aa45dc1d6679.bundle.js} +1 -1
- package/docs/storybook/{runtime~main.56858f6c72e70f546e4c.bundle.js.map → runtime~main.e71ec014aa45dc1d6679.bundle.js.map} +1 -1
- package/docs/storybook/{vendors~main.56858f6c72e70f546e4c.bundle.js → vendors~main.e71ec014aa45dc1d6679.bundle.js} +1 -1
- package/docs/storybook/{vendors~main.56858f6c72e70f546e4c.bundle.js.map → vendors~main.e71ec014aa45dc1d6679.bundle.js.map} +1 -1
- package/dropdown/dropdown.component.d.ts +12 -0
- package/dropdown/dropdown.component.js +12 -2
- package/dropdown/dropdown.component.js.map +1 -1
- package/dropdown/dropdown.component.metadata.json +1 -1
- package/dropdown/dropdown.component.ngfactory.js +18 -11
- package/dropdown/dropdown.component.ngfactory.js.map +1 -1
- package/dropdown/dropdown.component.ngsummary.json +1 -1
- package/dropdown/dropdown.module.ngfactory.js.map +1 -1
- package/file-uploader/file-uploader.component.js +1 -1
- package/file-uploader/file-uploader.component.js.map +1 -1
- package/file-uploader/file-uploader.component.metadata.json +1 -1
- package/file-uploader/file-uploader.component.ngfactory.js +1 -1
- package/file-uploader/file-uploader.component.ngfactory.js.map +1 -1
- package/file-uploader/file.component.js +1 -1
- package/file-uploader/file.component.js.map +1 -1
- package/file-uploader/file.component.metadata.json +1 -1
- package/file-uploader/file.component.ngfactory.js +7 -1
- package/file-uploader/file.component.ngfactory.js.map +1 -1
- package/input/label.component.d.ts +1 -1
- package/input/label.component.js.map +1 -1
- package/number-input/number.component.d.ts +3 -3
- package/number-input/number.component.js +1 -1
- package/number-input/number.component.js.map +1 -1
- package/number-input/number.component.metadata.json +1 -1
- package/number-input/number.component.ngfactory.js +25 -21
- package/number-input/number.component.ngfactory.js.map +1 -1
- package/number-input/number.module.ngfactory.js.map +1 -1
- package/package.json +1 -1
- package/select/select.component.d.ts +3 -3
- package/select/select.component.js +4 -8
- package/select/select.component.js.map +1 -1
- package/select/select.component.metadata.json +1 -1
- package/select/select.component.ngfactory.js +21 -15
- package/select/select.component.ngfactory.js.map +1 -1
- package/select/select.component.ngsummary.json +1 -1
- package/slider/slider.component.d.ts +4 -1
- package/slider/slider.component.js +7 -3
- package/slider/slider.component.js.map +1 -1
- package/slider/slider.component.metadata.json +1 -1
- package/slider/slider.component.ngfactory.js +10 -7
- package/slider/slider.component.ngfactory.js.map +1 -1
- package/slider/slider.component.ngsummary.json +1 -1
- package/timepicker/timepicker.component.d.ts +3 -2
- package/timepicker/timepicker.component.js +5 -2
- package/timepicker/timepicker.component.js.map +1 -1
- package/timepicker/timepicker.component.metadata.json +1 -1
- package/timepicker/timepicker.component.ngfactory.js +4 -1
- package/timepicker/timepicker.component.ngfactory.js.map +1 -1
- package/timepicker/timepicker.component.ngsummary.json +1 -1
- package/timepicker-select/timepicker-select.component.d.ts +1 -0
- package/timepicker-select/timepicker-select.component.js +1 -0
- package/timepicker-select/timepicker-select.component.js.map +1 -1
- package/timepicker-select/timepicker-select.component.metadata.json +1 -1
- package/timepicker-select/timepicker-select.component.ngsummary.json +1 -1
- package/toggle/toggle.component.d.ts +3 -2
- package/toggle/toggle.component.js +5 -2
- package/toggle/toggle.component.js.map +1 -1
- package/toggle/toggle.component.metadata.json +1 -1
- package/toggle/toggle.component.ngfactory.js +7 -4
- package/toggle/toggle.component.ngfactory.js.map +1 -1
- package/toggle/toggle.component.ngsummary.json +1 -1
- package/ui-shell/header/header-item.component.js +1 -1
- package/ui-shell/header/header-item.component.js.map +1 -1
- package/docs/storybook/main.56858f6c72e70f546e4c.bundle.js.map +0 -1
|
@@ -78,7 +78,6 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
78
78
|
</p>
|
|
79
79
|
<p class="comment">
|
|
80
80
|
<code><a href="https://angular.io/api/core/OnChanges" target="_blank" >OnChanges</a></code>
|
|
81
|
-
<code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
|
|
82
81
|
<code><a href="https://angular.io/api/core/AfterViewInit" target="_blank" >AfterViewInit</a></code>
|
|
83
82
|
<code><a href="https://angular.io/api/core/AfterContentInit" target="_blank" >AfterContentInit</a></code>
|
|
84
83
|
</p>
|
|
@@ -121,55 +120,68 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
121
120
|
|
|
122
121
|
<tr>
|
|
123
122
|
<td class="col-md-3">template</td>
|
|
124
|
-
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
123
|
+
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><label [for]="id" class="bx--label">
|
|
124
|
+
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
|
|
125
|
+
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
|
|
126
|
+
</label>
|
|
127
|
+
<div *ngIf="helperText" class="bx--form__helper-text">
|
|
128
|
+
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
|
|
129
|
+
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
|
|
130
|
+
</div>
|
|
131
|
+
<div
|
|
132
|
+
class="bx--combo-box bx--list-box"
|
|
133
|
+
[ngClass]="{'bx--multi-select' : type === 'multi'}">
|
|
133
134
|
<div
|
|
134
|
-
|
|
135
|
-
(click)="clearSelected()"
|
|
135
|
+
[attr.aria-expanded]="open"
|
|
136
136
|
role="button"
|
|
137
|
-
class="bx--list-
|
|
137
|
+
class="bx--list-box__field"
|
|
138
138
|
tabindex="0"
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
&
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<
|
|
152
|
-
|
|
139
|
+
type="button"
|
|
140
|
+
aria-label="close menu"
|
|
141
|
+
aria-haspopup="true"
|
|
142
|
+
(click)="toggleDropdown()">
|
|
143
|
+
<div
|
|
144
|
+
*ngIf="type === 'multi' && pills.length > 0"
|
|
145
|
+
(click)="clearSelected()"
|
|
146
|
+
role="button"
|
|
147
|
+
class="bx--list-box__selection bx--list-box__selection--multi"
|
|
148
|
+
tabindex="0"
|
|
149
|
+
title="Clear all selected items">
|
|
150
|
+
{{ pills.length }}
|
|
151
|
+
<svg
|
|
152
|
+
focusable="false"
|
|
153
|
+
preserveAspectRatio="xMidYMid meet"
|
|
154
|
+
style="will-change: transform;"
|
|
155
|
+
role="img"
|
|
156
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
157
|
+
width="16"
|
|
158
|
+
height="16"
|
|
159
|
+
viewBox="0 0 16 16"
|
|
160
|
+
aria-hidden="true">
|
|
161
|
+
<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>
|
|
162
|
+
</svg>
|
|
163
|
+
</div>
|
|
164
|
+
<input
|
|
165
|
+
[id]="id"
|
|
166
|
+
[disabled]="disabled"
|
|
167
|
+
(keyup)="onSearch($event.target.value)"
|
|
168
|
+
[value]="selectedValue"
|
|
169
|
+
class="bx--text-input"
|
|
170
|
+
role="combobox"
|
|
171
|
+
aria-label="ListBox input field"
|
|
172
|
+
autocomplete="off"
|
|
173
|
+
[placeholder]="placeholder"/>
|
|
174
|
+
<ibm-icon-chevron-down16
|
|
175
|
+
[ngClass]="{'bx--list-box__menu-icon--open': open}"
|
|
176
|
+
class="bx--list-box__menu-icon"
|
|
177
|
+
ariaLabel="Close menu">
|
|
178
|
+
</ibm-icon-chevron-down16>
|
|
179
|
+
</div>
|
|
180
|
+
<div
|
|
181
|
+
#dropdownMenu
|
|
182
|
+
*ngIf="open">
|
|
183
|
+
<ng-content></ng-content>
|
|
153
184
|
</div>
|
|
154
|
-
<input
|
|
155
|
-
[disabled]="disabled"
|
|
156
|
-
(keyup)="onSearch($event.target.value)"
|
|
157
|
-
[value]="selectedValue"
|
|
158
|
-
class="bx--text-input"
|
|
159
|
-
role="combobox"
|
|
160
|
-
aria-label="ListBox input field"
|
|
161
|
-
autocomplete="off"
|
|
162
|
-
[placeholder]="placeholder"/>
|
|
163
|
-
<ibm-icon-chevron-down16
|
|
164
|
-
[ngClass]="{'bx--list-box__menu-icon--open': open}"
|
|
165
|
-
class="bx--list-box__menu-icon"
|
|
166
|
-
ariaLabel="Close menu">
|
|
167
|
-
</ibm-icon-chevron-down16>
|
|
168
|
-
</div>
|
|
169
|
-
<div
|
|
170
|
-
#dropdownMenu
|
|
171
|
-
*ngIf="open">
|
|
172
|
-
<ng-content></ng-content>
|
|
173
185
|
</div>
|
|
174
186
|
</code></pre></td>
|
|
175
187
|
</tr>
|
|
@@ -198,6 +210,10 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
198
210
|
<tr>
|
|
199
211
|
<td class="col-md-4">
|
|
200
212
|
<ul class="index-list">
|
|
213
|
+
<li>
|
|
214
|
+
<span class="modifier">Static</span>
|
|
215
|
+
<a href="#comboBoxCount">comboBoxCount</a>
|
|
216
|
+
</li>
|
|
201
217
|
<li>
|
|
202
218
|
<a href="#dropdownMenu">dropdownMenu</a>
|
|
203
219
|
</li>
|
|
@@ -251,6 +267,10 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
251
267
|
<span class="modifier">Public</span>
|
|
252
268
|
<a href="#closeDropdown">closeDropdown</a>
|
|
253
269
|
</li>
|
|
270
|
+
<li>
|
|
271
|
+
<span class="modifier">Public</span>
|
|
272
|
+
<a href="#isTemplate">isTemplate</a>
|
|
273
|
+
</li>
|
|
254
274
|
<li>
|
|
255
275
|
<a href="#ngAfterContentInit">ngAfterContentInit</a>
|
|
256
276
|
</li>
|
|
@@ -260,9 +280,6 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
260
280
|
<li>
|
|
261
281
|
<a href="#ngOnChanges">ngOnChanges</a>
|
|
262
282
|
</li>
|
|
263
|
-
<li>
|
|
264
|
-
<a href="#ngOnInit">ngOnInit</a>
|
|
265
|
-
</li>
|
|
266
283
|
<li>
|
|
267
284
|
<a href="#onBlur">onBlur</a>
|
|
268
285
|
</li>
|
|
@@ -314,9 +331,18 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
314
331
|
<li>
|
|
315
332
|
<a href="#disabled">disabled</a>
|
|
316
333
|
</li>
|
|
334
|
+
<li>
|
|
335
|
+
<a href="#helperText">helperText</a>
|
|
336
|
+
</li>
|
|
337
|
+
<li>
|
|
338
|
+
<a href="#id">id</a>
|
|
339
|
+
</li>
|
|
317
340
|
<li>
|
|
318
341
|
<a href="#items">items</a>
|
|
319
342
|
</li>
|
|
343
|
+
<li>
|
|
344
|
+
<a href="#label">label</a>
|
|
345
|
+
</li>
|
|
320
346
|
<li>
|
|
321
347
|
<a href="#placeholder">placeholder</a>
|
|
322
348
|
</li>
|
|
@@ -363,7 +389,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
363
389
|
<a href="#attr.role">attr.role</a>
|
|
364
390
|
</li>
|
|
365
391
|
<li>
|
|
366
|
-
<a href="#class">class</a>
|
|
392
|
+
<a href="#class.bx--list-box__wrapper">class.bx--list-box__wrapper</a>
|
|
367
393
|
</li>
|
|
368
394
|
<li>
|
|
369
395
|
<a href="#style.display">style.display</a>
|
|
@@ -402,7 +428,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
402
428
|
</tr>
|
|
403
429
|
<tr>
|
|
404
430
|
<td class="col-md-4">
|
|
405
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
431
|
+
<div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/combobox/combobox.component.ts:221</a></div>
|
|
406
432
|
</td>
|
|
407
433
|
</tr>
|
|
408
434
|
|
|
@@ -461,7 +487,50 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
461
487
|
</tr>
|
|
462
488
|
<tr>
|
|
463
489
|
<td class="col-md-2" colspan="2">
|
|
464
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
490
|
+
<div class="io-line">Defined in <a href="" data-line="163" class="link-to-prism">src/combobox/combobox.component.ts:163</a></div>
|
|
491
|
+
</td>
|
|
492
|
+
</tr>
|
|
493
|
+
</tbody>
|
|
494
|
+
</table>
|
|
495
|
+
<table class="table table-sm table-bordered">
|
|
496
|
+
<tbody>
|
|
497
|
+
<tr>
|
|
498
|
+
<td class="col-md-2">
|
|
499
|
+
<a name="helperText"></a>
|
|
500
|
+
<code>helperText</code>
|
|
501
|
+
</td>
|
|
502
|
+
<td class="col-md-10">
|
|
503
|
+
<div><p>Sets the optional helper text.</p>
|
|
504
|
+
</div>
|
|
505
|
+
<p>
|
|
506
|
+
<em>Type :</em> <code>string | TemplateRef<any></code>
|
|
507
|
+
|
|
508
|
+
</p>
|
|
509
|
+
</td>
|
|
510
|
+
</tr>
|
|
511
|
+
<tr>
|
|
512
|
+
<td class="col-md-2" colspan="2">
|
|
513
|
+
<div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/combobox/combobox.component.ts:159</a></div>
|
|
514
|
+
</td>
|
|
515
|
+
</tr>
|
|
516
|
+
</tbody>
|
|
517
|
+
</table>
|
|
518
|
+
<table class="table table-sm table-bordered">
|
|
519
|
+
<tbody>
|
|
520
|
+
<tr>
|
|
521
|
+
<td class="col-md-2">
|
|
522
|
+
<a name="id"></a>
|
|
523
|
+
<code>id</code>
|
|
524
|
+
</td>
|
|
525
|
+
<td class="col-md-10">
|
|
526
|
+
<p>
|
|
527
|
+
<em>Default value : </em><code>`dropdown-${ComboBox.comboBoxCount++}`</code>
|
|
528
|
+
</p>
|
|
529
|
+
</td>
|
|
530
|
+
</tr>
|
|
531
|
+
<tr>
|
|
532
|
+
<td class="col-md-2" colspan="2">
|
|
533
|
+
<div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/combobox/combobox.component.ts:112</a></div>
|
|
465
534
|
</td>
|
|
466
535
|
</tr>
|
|
467
536
|
</tbody>
|
|
@@ -506,7 +575,30 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
506
575
|
</tr>
|
|
507
576
|
<tr>
|
|
508
577
|
<td class="col-md-2" colspan="2">
|
|
509
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
578
|
+
<div class="io-line">Defined in <a href="" data-line="139" class="link-to-prism">src/combobox/combobox.component.ts:139</a></div>
|
|
579
|
+
</td>
|
|
580
|
+
</tr>
|
|
581
|
+
</tbody>
|
|
582
|
+
</table>
|
|
583
|
+
<table class="table table-sm table-bordered">
|
|
584
|
+
<tbody>
|
|
585
|
+
<tr>
|
|
586
|
+
<td class="col-md-2">
|
|
587
|
+
<a name="label"></a>
|
|
588
|
+
<code>label</code>
|
|
589
|
+
</td>
|
|
590
|
+
<td class="col-md-10">
|
|
591
|
+
<div><p>Label for the combobox.</p>
|
|
592
|
+
</div>
|
|
593
|
+
<p>
|
|
594
|
+
<em>Type :</em> <code>string | TemplateRef<any></code>
|
|
595
|
+
|
|
596
|
+
</p>
|
|
597
|
+
</td>
|
|
598
|
+
</tr>
|
|
599
|
+
<tr>
|
|
600
|
+
<td class="col-md-2" colspan="2">
|
|
601
|
+
<div class="io-line">Defined in <a href="" data-line="155" class="link-to-prism">src/combobox/combobox.component.ts:155</a></div>
|
|
510
602
|
</td>
|
|
511
603
|
</tr>
|
|
512
604
|
</tbody>
|
|
@@ -528,7 +620,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
528
620
|
</tr>
|
|
529
621
|
<tr>
|
|
530
622
|
<td class="col-md-2" colspan="2">
|
|
531
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
623
|
+
<div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/combobox/combobox.component.ts:143</a></div>
|
|
532
624
|
</td>
|
|
533
625
|
</tr>
|
|
534
626
|
</tbody>
|
|
@@ -554,7 +646,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
554
646
|
</tr>
|
|
555
647
|
<tr>
|
|
556
648
|
<td class="col-md-2" colspan="2">
|
|
557
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
649
|
+
<div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/combobox/combobox.component.ts:151</a></div>
|
|
558
650
|
</td>
|
|
559
651
|
</tr>
|
|
560
652
|
</tbody>
|
|
@@ -580,7 +672,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
580
672
|
</tr>
|
|
581
673
|
<tr>
|
|
582
674
|
<td class="col-md-2" colspan="2">
|
|
583
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
675
|
+
<div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/combobox/combobox.component.ts:147</a></div>
|
|
584
676
|
</td>
|
|
585
677
|
</tr>
|
|
586
678
|
</tbody>
|
|
@@ -604,7 +696,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
604
696
|
</tr>
|
|
605
697
|
<tr>
|
|
606
698
|
<td class="col-md-2" colspan="2">
|
|
607
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
699
|
+
<div class="io-line">Defined in <a href="" data-line="204" class="link-to-prism">src/combobox/combobox.component.ts:204</a></div>
|
|
608
700
|
</td>
|
|
609
701
|
</tr>
|
|
610
702
|
</tbody>
|
|
@@ -630,7 +722,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
630
722
|
</tr>
|
|
631
723
|
<tr>
|
|
632
724
|
<td class="col-md-2" colspan="2">
|
|
633
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
725
|
+
<div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/combobox/combobox.component.ts:175</a></div>
|
|
634
726
|
</td>
|
|
635
727
|
</tr>
|
|
636
728
|
</tbody>
|
|
@@ -666,7 +758,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
666
758
|
</tr>
|
|
667
759
|
<tr>
|
|
668
760
|
<td class="col-md-2" colspan="2">
|
|
669
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
761
|
+
<div class="io-line">Defined in <a href="" data-line="202" class="link-to-prism">src/combobox/combobox.component.ts:202</a></div>
|
|
670
762
|
</td>
|
|
671
763
|
</tr>
|
|
672
764
|
</tbody>
|
|
@@ -699,7 +791,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
699
791
|
</tr>
|
|
700
792
|
<tr>
|
|
701
793
|
<td class="col-md-4">
|
|
702
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
794
|
+
<div class="io-line">Defined in <a href="" data-line="209" class="link-to-prism">src/combobox/combobox.component.ts:209</a></div>
|
|
703
795
|
</td>
|
|
704
796
|
</tr>
|
|
705
797
|
|
|
@@ -710,29 +802,29 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
710
802
|
<tbody>
|
|
711
803
|
<tr>
|
|
712
804
|
<td class="col-md-4">
|
|
713
|
-
<a name="class"></a>
|
|
805
|
+
<a name="class.bx--list-box__wrapper"></a>
|
|
714
806
|
<span class="name">
|
|
715
807
|
<b>
|
|
716
|
-
class
|
|
808
|
+
class.bx--list-box__wrapper
|
|
717
809
|
</b>
|
|
718
|
-
<a href="#class"><span class="icon ion-ios-link"></span></a>
|
|
810
|
+
<a href="#class.bx--list-box__wrapper"><span class="icon ion-ios-link"></span></a>
|
|
719
811
|
</span>
|
|
720
812
|
</td>
|
|
721
813
|
</tr>
|
|
722
814
|
<tr>
|
|
723
815
|
<td class="col-md-4">
|
|
724
|
-
<code>class: <code></code>
|
|
816
|
+
<code>class.bx--list-box__wrapper: <code></code>
|
|
725
817
|
</code>
|
|
726
818
|
</td>
|
|
727
819
|
</tr>
|
|
728
820
|
<tr>
|
|
729
821
|
<td class="col-md-4">
|
|
730
|
-
<i>Default value : </i><code
|
|
822
|
+
<i>Default value : </i><code>true</code>
|
|
731
823
|
</td>
|
|
732
824
|
</tr>
|
|
733
825
|
<tr>
|
|
734
826
|
<td class="col-md-4">
|
|
735
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
827
|
+
<div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/combobox/combobox.component.ts:208</a></div>
|
|
736
828
|
</td>
|
|
737
829
|
</tr>
|
|
738
830
|
|
|
@@ -765,7 +857,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
765
857
|
</tr>
|
|
766
858
|
<tr>
|
|
767
859
|
<td class="col-md-4">
|
|
768
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
860
|
+
<div class="io-line">Defined in <a href="" data-line="210" class="link-to-prism">src/combobox/combobox.component.ts:210</a></div>
|
|
769
861
|
</td>
|
|
770
862
|
</tr>
|
|
771
863
|
|
|
@@ -802,7 +894,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
802
894
|
|
|
803
895
|
<tr>
|
|
804
896
|
<td class="col-md-4">
|
|
805
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
897
|
+
<div class="io-line">Defined in <a href="" data-line="297" class="link-to-prism">src/combobox/combobox.component.ts:297</a></div>
|
|
806
898
|
</td>
|
|
807
899
|
</tr>
|
|
808
900
|
|
|
@@ -845,7 +937,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
845
937
|
|
|
846
938
|
<tr>
|
|
847
939
|
<td class="col-md-4">
|
|
848
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
940
|
+
<div class="io-line">Defined in <a href="" data-line="311" class="link-to-prism">src/combobox/combobox.component.ts:311</a></div>
|
|
849
941
|
</td>
|
|
850
942
|
</tr>
|
|
851
943
|
|
|
@@ -885,7 +977,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
885
977
|
|
|
886
978
|
<tr>
|
|
887
979
|
<td class="col-md-4">
|
|
888
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
980
|
+
<div class="io-line">Defined in <a href="" data-line="346" class="link-to-prism">src/combobox/combobox.component.ts:346</a></div>
|
|
889
981
|
</td>
|
|
890
982
|
</tr>
|
|
891
983
|
|
|
@@ -925,7 +1017,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
925
1017
|
|
|
926
1018
|
<tr>
|
|
927
1019
|
<td class="col-md-4">
|
|
928
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1020
|
+
<div class="io-line">Defined in <a href="" data-line="363" class="link-to-prism">src/combobox/combobox.component.ts:363</a></div>
|
|
929
1021
|
</td>
|
|
930
1022
|
</tr>
|
|
931
1023
|
|
|
@@ -943,6 +1035,73 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
943
1035
|
</tr>
|
|
944
1036
|
</tbody>
|
|
945
1037
|
</table>
|
|
1038
|
+
<table class="table table-sm table-bordered">
|
|
1039
|
+
<tbody>
|
|
1040
|
+
<tr>
|
|
1041
|
+
<td class="col-md-4">
|
|
1042
|
+
<a name="isTemplate"></a>
|
|
1043
|
+
<span class="name">
|
|
1044
|
+
<b>
|
|
1045
|
+
<span class="modifier">Public</span>
|
|
1046
|
+
isTemplate
|
|
1047
|
+
</b>
|
|
1048
|
+
<a href="#isTemplate"><span class="icon ion-ios-link"></span></a>
|
|
1049
|
+
</span>
|
|
1050
|
+
</td>
|
|
1051
|
+
</tr>
|
|
1052
|
+
<tr>
|
|
1053
|
+
<td class="col-md-4">
|
|
1054
|
+
<span class="modifier-icon icon ion-ios-reset"></span>
|
|
1055
|
+
<code>isTemplate(value)</code>
|
|
1056
|
+
</td>
|
|
1057
|
+
</tr>
|
|
1058
|
+
|
|
1059
|
+
|
|
1060
|
+
<tr>
|
|
1061
|
+
<td class="col-md-4">
|
|
1062
|
+
<div class="io-line">Defined in <a href="" data-line="442" class="link-to-prism">src/combobox/combobox.component.ts:442</a></div>
|
|
1063
|
+
</td>
|
|
1064
|
+
</tr>
|
|
1065
|
+
|
|
1066
|
+
|
|
1067
|
+
<tr>
|
|
1068
|
+
<td class="col-md-4">
|
|
1069
|
+
|
|
1070
|
+
<div class="io-description">
|
|
1071
|
+
<b>Parameters :</b>
|
|
1072
|
+
<table class="params">
|
|
1073
|
+
<thead>
|
|
1074
|
+
<tr>
|
|
1075
|
+
<td>Name</td>
|
|
1076
|
+
<td>Optional</td>
|
|
1077
|
+
</tr>
|
|
1078
|
+
</thead>
|
|
1079
|
+
<tbody>
|
|
1080
|
+
<tr>
|
|
1081
|
+
<td>value</td>
|
|
1082
|
+
|
|
1083
|
+
<td>
|
|
1084
|
+
No
|
|
1085
|
+
</td>
|
|
1086
|
+
|
|
1087
|
+
|
|
1088
|
+
</tr>
|
|
1089
|
+
</tbody>
|
|
1090
|
+
</table>
|
|
1091
|
+
</div>
|
|
1092
|
+
<div>
|
|
1093
|
+
</div>
|
|
1094
|
+
<div class="io-description">
|
|
1095
|
+
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
1096
|
+
|
|
1097
|
+
</div>
|
|
1098
|
+
<div class="io-description">
|
|
1099
|
+
|
|
1100
|
+
</div>
|
|
1101
|
+
</td>
|
|
1102
|
+
</tr>
|
|
1103
|
+
</tbody>
|
|
1104
|
+
</table>
|
|
946
1105
|
<table class="table table-sm table-bordered">
|
|
947
1106
|
<tbody>
|
|
948
1107
|
<tr>
|
|
@@ -965,7 +1124,7 @@ Multi-select comboboxes also provide "pills" of selected items.</p>
|
|
|
965
1124
|
|
|
966
1125
|
<tr>
|
|
967
1126
|
<td class="col-md-4">
|
|
968
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1127
|
+
<div class="io-line">Defined in <a href="" data-line="244" class="link-to-prism">src/combobox/combobox.component.ts:244</a></div>
|
|
969
1128
|
</td>
|
|
970
1129
|
</tr>
|
|
971
1130
|
|
|
@@ -1006,7 +1165,7 @@ Subscribes to select events and handles focus/filtering/initial list updates</p>
|
|
|
1006
1165
|
|
|
1007
1166
|
<tr>
|
|
1008
1167
|
<td class="col-md-4">
|
|
1009
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1168
|
+
<div class="io-line">Defined in <a href="" data-line="283" class="link-to-prism">src/combobox/combobox.component.ts:283</a></div>
|
|
1010
1169
|
</td>
|
|
1011
1170
|
</tr>
|
|
1012
1171
|
|
|
@@ -1046,7 +1205,7 @@ Subscribes to select events and handles focus/filtering/initial list updates</p>
|
|
|
1046
1205
|
|
|
1047
1206
|
<tr>
|
|
1048
1207
|
<td class="col-md-4">
|
|
1049
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1208
|
+
<div class="io-line">Defined in <a href="" data-line="233" class="link-to-prism">src/combobox/combobox.component.ts:233</a></div>
|
|
1050
1209
|
</td>
|
|
1051
1210
|
</tr>
|
|
1052
1211
|
|
|
@@ -1092,44 +1251,6 @@ Updates pills if necessary.</p>
|
|
|
1092
1251
|
</tr>
|
|
1093
1252
|
</tbody>
|
|
1094
1253
|
</table>
|
|
1095
|
-
<table class="table table-sm table-bordered">
|
|
1096
|
-
<tbody>
|
|
1097
|
-
<tr>
|
|
1098
|
-
<td class="col-md-4">
|
|
1099
|
-
<a name="ngOnInit"></a>
|
|
1100
|
-
<span class="name">
|
|
1101
|
-
<b>
|
|
1102
|
-
ngOnInit
|
|
1103
|
-
</b>
|
|
1104
|
-
<a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
|
|
1105
|
-
</span>
|
|
1106
|
-
</td>
|
|
1107
|
-
</tr>
|
|
1108
|
-
<tr>
|
|
1109
|
-
<td class="col-md-4">
|
|
1110
|
-
<code>ngOnInit()</code>
|
|
1111
|
-
</td>
|
|
1112
|
-
</tr>
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
<tr>
|
|
1116
|
-
<td class="col-md-4">
|
|
1117
|
-
<div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/combobox/combobox.component.ts:217</a></div>
|
|
1118
|
-
</td>
|
|
1119
|
-
</tr>
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
<tr>
|
|
1123
|
-
<td class="col-md-4">
|
|
1124
|
-
|
|
1125
|
-
<div class="io-description">
|
|
1126
|
-
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
|
|
1127
|
-
|
|
1128
|
-
</div>
|
|
1129
|
-
</td>
|
|
1130
|
-
</tr>
|
|
1131
|
-
</tbody>
|
|
1132
|
-
</table>
|
|
1133
1254
|
<table class="table table-sm table-bordered">
|
|
1134
1255
|
<tbody>
|
|
1135
1256
|
<tr>
|
|
@@ -1152,7 +1273,7 @@ Updates pills if necessary.</p>
|
|
|
1152
1273
|
|
|
1153
1274
|
<tr>
|
|
1154
1275
|
<td class="col-md-4">
|
|
1155
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1276
|
+
<div class="io-line">Defined in <a href="" data-line="326" class="link-to-prism">src/combobox/combobox.component.ts:326</a></div>
|
|
1156
1277
|
</td>
|
|
1157
1278
|
</tr>
|
|
1158
1279
|
|
|
@@ -1192,7 +1313,7 @@ Updates pills if necessary.</p>
|
|
|
1192
1313
|
|
|
1193
1314
|
<tr>
|
|
1194
1315
|
<td class="col-md-4">
|
|
1195
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1316
|
+
<div class="io-line">Defined in <a href="" data-line="389" class="link-to-prism">src/combobox/combobox.component.ts:389</a></div>
|
|
1196
1317
|
</td>
|
|
1197
1318
|
</tr>
|
|
1198
1319
|
|
|
@@ -1261,7 +1382,7 @@ Updates pills if necessary.</p>
|
|
|
1261
1382
|
|
|
1262
1383
|
<tr>
|
|
1263
1384
|
<td class="col-md-4">
|
|
1264
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1385
|
+
<div class="io-line">Defined in <a href="" data-line="427" class="link-to-prism">src/combobox/combobox.component.ts:427</a></div>
|
|
1265
1386
|
</td>
|
|
1266
1387
|
</tr>
|
|
1267
1388
|
|
|
@@ -1340,7 +1461,7 @@ Updates pills if necessary.</p>
|
|
|
1340
1461
|
|
|
1341
1462
|
<tr>
|
|
1342
1463
|
<td class="col-md-4">
|
|
1343
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1464
|
+
<div class="io-line">Defined in <a href="" data-line="371" class="link-to-prism">src/combobox/combobox.component.ts:371</a></div>
|
|
1344
1465
|
</td>
|
|
1345
1466
|
</tr>
|
|
1346
1467
|
|
|
@@ -1380,7 +1501,7 @@ Updates pills if necessary.</p>
|
|
|
1380
1501
|
|
|
1381
1502
|
<tr>
|
|
1382
1503
|
<td class="col-md-4">
|
|
1383
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1504
|
+
<div class="io-line">Defined in <a href="" data-line="330" class="link-to-prism">src/combobox/combobox.component.ts:330</a></div>
|
|
1384
1505
|
</td>
|
|
1385
1506
|
</tr>
|
|
1386
1507
|
|
|
@@ -1449,7 +1570,7 @@ Updates pills if necessary.</p>
|
|
|
1449
1570
|
|
|
1450
1571
|
<tr>
|
|
1451
1572
|
<td class="col-md-4">
|
|
1452
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1573
|
+
<div class="io-line">Defined in <a href="" data-line="334" class="link-to-prism">src/combobox/combobox.component.ts:334</a></div>
|
|
1453
1574
|
</td>
|
|
1454
1575
|
</tr>
|
|
1455
1576
|
|
|
@@ -1520,7 +1641,7 @@ Updates pills if necessary.</p>
|
|
|
1520
1641
|
|
|
1521
1642
|
<tr>
|
|
1522
1643
|
<td class="col-md-4">
|
|
1523
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1644
|
+
<div class="io-line">Defined in <a href="" data-line="378" class="link-to-prism">src/combobox/combobox.component.ts:378</a></div>
|
|
1524
1645
|
</td>
|
|
1525
1646
|
</tr>
|
|
1526
1647
|
|
|
@@ -1562,7 +1683,7 @@ Updates pills if necessary.</p>
|
|
|
1562
1683
|
|
|
1563
1684
|
<tr>
|
|
1564
1685
|
<td class="col-md-4">
|
|
1565
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1686
|
+
<div class="io-line">Defined in <a href="" data-line="341" class="link-to-prism">src/combobox/combobox.component.ts:341</a></div>
|
|
1566
1687
|
</td>
|
|
1567
1688
|
</tr>
|
|
1568
1689
|
|
|
@@ -1604,7 +1725,7 @@ Updates pills if necessary.</p>
|
|
|
1604
1725
|
|
|
1605
1726
|
<tr>
|
|
1606
1727
|
<td class="col-md-4">
|
|
1607
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1728
|
+
<div class="io-line">Defined in <a href="" data-line="446" class="link-to-prism">src/combobox/combobox.component.ts:446</a></div>
|
|
1608
1729
|
</td>
|
|
1609
1730
|
</tr>
|
|
1610
1731
|
|
|
@@ -1642,7 +1763,7 @@ Updates pills if necessary.</p>
|
|
|
1642
1763
|
|
|
1643
1764
|
<tr>
|
|
1644
1765
|
<td class="col-md-4">
|
|
1645
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1766
|
+
<div class="io-line">Defined in <a href="" data-line="316" class="link-to-prism">src/combobox/combobox.component.ts:316</a></div>
|
|
1646
1767
|
</td>
|
|
1647
1768
|
</tr>
|
|
1648
1769
|
|
|
@@ -1696,6 +1817,46 @@ Updates pills if necessary.</p>
|
|
|
1696
1817
|
<h3 id="inputs">
|
|
1697
1818
|
Properties
|
|
1698
1819
|
</h3>
|
|
1820
|
+
<table class="table table-sm table-bordered">
|
|
1821
|
+
<tbody>
|
|
1822
|
+
<tr>
|
|
1823
|
+
<td class="col-md-4">
|
|
1824
|
+
<a name="comboBoxCount"></a>
|
|
1825
|
+
<span class="name">
|
|
1826
|
+
<b>
|
|
1827
|
+
<span class="modifier">Static</span>
|
|
1828
|
+
comboBoxCount
|
|
1829
|
+
</b>
|
|
1830
|
+
<a href="#comboBoxCount"><span class="icon ion-ios-link"></span></a>
|
|
1831
|
+
</span>
|
|
1832
|
+
</td>
|
|
1833
|
+
</tr>
|
|
1834
|
+
<tr>
|
|
1835
|
+
<td class="col-md-4">
|
|
1836
|
+
<span class="modifier-icon icon ion-ios-reset"></span><code>comboBoxCount: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
|
|
1837
|
+
</code>
|
|
1838
|
+
</td>
|
|
1839
|
+
</tr>
|
|
1840
|
+
<tr>
|
|
1841
|
+
<td class="col-md-4">
|
|
1842
|
+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
|
|
1843
|
+
|
|
1844
|
+
</td>
|
|
1845
|
+
</tr>
|
|
1846
|
+
<tr>
|
|
1847
|
+
<td class="col-md-4">
|
|
1848
|
+
<i>Default value : </i><code>0</code>
|
|
1849
|
+
</td>
|
|
1850
|
+
</tr>
|
|
1851
|
+
<tr>
|
|
1852
|
+
<td class="col-md-4">
|
|
1853
|
+
<div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/combobox/combobox.component.ts:111</a></div>
|
|
1854
|
+
</td>
|
|
1855
|
+
</tr>
|
|
1856
|
+
|
|
1857
|
+
|
|
1858
|
+
</tbody>
|
|
1859
|
+
</table>
|
|
1699
1860
|
<table class="table table-sm table-bordered">
|
|
1700
1861
|
<tbody>
|
|
1701
1862
|
<tr>
|
|
@@ -1726,7 +1887,7 @@ Updates pills if necessary.</p>
|
|
|
1726
1887
|
</tr>
|
|
1727
1888
|
<tr>
|
|
1728
1889
|
<td class="col-md-4">
|
|
1729
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1890
|
+
<div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/combobox/combobox.component.ts:207</a></div>
|
|
1730
1891
|
</td>
|
|
1731
1892
|
</tr>
|
|
1732
1893
|
|
|
@@ -1760,7 +1921,7 @@ Updates pills if necessary.</p>
|
|
|
1760
1921
|
</tr>
|
|
1761
1922
|
<tr>
|
|
1762
1923
|
<td class="col-md-4">
|
|
1763
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1924
|
+
<div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/combobox/combobox.component.ts:219</a></div>
|
|
1764
1925
|
</td>
|
|
1765
1926
|
</tr>
|
|
1766
1927
|
|
|
@@ -1800,7 +1961,7 @@ Updates pills if necessary.</p>
|
|
|
1800
1961
|
</tr>
|
|
1801
1962
|
<tr>
|
|
1802
1963
|
<td class="col-md-4">
|
|
1803
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1964
|
+
<div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/combobox/combobox.component.ts:220</a></div>
|
|
1804
1965
|
</td>
|
|
1805
1966
|
</tr>
|
|
1806
1967
|
|
|
@@ -1834,7 +1995,7 @@ Updates pills if necessary.</p>
|
|
|
1834
1995
|
</tr>
|
|
1835
1996
|
<tr>
|
|
1836
1997
|
<td class="col-md-4">
|
|
1837
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1998
|
+
<div class="io-line">Defined in <a href="" data-line="212" class="link-to-prism">src/combobox/combobox.component.ts:212</a></div>
|
|
1838
1999
|
</td>
|
|
1839
2000
|
</tr>
|
|
1840
2001
|
|
|
@@ -1874,7 +2035,7 @@ Updates pills if necessary.</p>
|
|
|
1874
2035
|
</tr>
|
|
1875
2036
|
<tr>
|
|
1876
2037
|
<td class="col-md-4">
|
|
1877
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2038
|
+
<div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/combobox/combobox.component.ts:215</a></div>
|
|
1878
2039
|
</td>
|
|
1879
2040
|
</tr>
|
|
1880
2041
|
|
|
@@ -1920,7 +2081,7 @@ Updates pills if necessary.</p>
|
|
|
1920
2081
|
</tr>
|
|
1921
2082
|
<tr>
|
|
1922
2083
|
<td class="col-md-4">
|
|
1923
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2084
|
+
<div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/combobox/combobox.component.ts:221</a></div>
|
|
1924
2085
|
</td>
|
|
1925
2086
|
</tr>
|
|
1926
2087
|
|
|
@@ -1960,7 +2121,7 @@ Updates pills if necessary.</p>
|
|
|
1960
2121
|
</tr>
|
|
1961
2122
|
<tr>
|
|
1962
2123
|
<td class="col-md-4">
|
|
1963
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2124
|
+
<div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/combobox/combobox.component.ts:217</a></div>
|
|
1964
2125
|
</td>
|
|
1965
2126
|
</tr>
|
|
1966
2127
|
|
|
@@ -2009,7 +2170,7 @@ Updates pills if necessary.</p>
|
|
|
2009
2170
|
</tr>
|
|
2010
2171
|
<tr>
|
|
2011
2172
|
<td class="col-md-4">
|
|
2012
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2173
|
+
<div class="io-line">Defined in <a href="" data-line="206" class="link-to-prism">src/combobox/combobox.component.ts:206</a></div>
|
|
2013
2174
|
</td>
|
|
2014
2175
|
</tr>
|
|
2015
2176
|
|
|
@@ -2041,7 +2202,7 @@ Updates pills if necessary.</p>
|
|
|
2041
2202
|
AfterViewInit,
|
|
2042
2203
|
AfterContentInit,
|
|
2043
2204
|
HostBinding,
|
|
2044
|
-
|
|
2205
|
+
TemplateRef
|
|
2045
2206
|
} from "@angular/core";
|
|
2046
2207
|
import { AbstractDropdownView } from "./../dropdown/abstract-dropdown-view.class";
|
|
2047
2208
|
import { ListItem } from "./../dropdown/list-item.interface";
|
|
@@ -2065,55 +2226,68 @@ import { filter } from "rxjs/operators";
|
|
|
2065
2226
|
@Component({
|
|
2066
2227
|
selector: "ibm-combo-box",
|
|
2067
2228
|
template: `
|
|
2229
|
+
<label [for]="id" class="bx--label">
|
|
2230
|
+
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
|
|
2231
|
+
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
|
|
2232
|
+
</label>
|
|
2233
|
+
<div *ngIf="helperText" class="bx--form__helper-text">
|
|
2234
|
+
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
|
|
2235
|
+
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
|
|
2236
|
+
</div>
|
|
2068
2237
|
<div
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
class="bx--list-box__field"
|
|
2072
|
-
tabindex="0"
|
|
2073
|
-
type="button"
|
|
2074
|
-
aria-label="close menu"
|
|
2075
|
-
aria-haspopup="true"
|
|
2076
|
-
(click)="toggleDropdown()">
|
|
2238
|
+
class="bx--combo-box bx--list-box"
|
|
2239
|
+
[ngClass]="{'bx--multi-select' : type === 'multi'}">
|
|
2077
2240
|
<div
|
|
2078
|
-
|
|
2079
|
-
(click)="clearSelected()"
|
|
2241
|
+
[attr.aria-expanded]="open"
|
|
2080
2242
|
role="button"
|
|
2081
|
-
class="bx--list-
|
|
2243
|
+
class="bx--list-box__field"
|
|
2082
2244
|
tabindex="0"
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
&
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
<
|
|
2096
|
-
|
|
2245
|
+
type="button"
|
|
2246
|
+
aria-label="close menu"
|
|
2247
|
+
aria-haspopup="true"
|
|
2248
|
+
(click)="toggleDropdown()">
|
|
2249
|
+
<div
|
|
2250
|
+
*ngIf="type === 'multi' && pills.length > 0"
|
|
2251
|
+
(click)="clearSelected()"
|
|
2252
|
+
role="button"
|
|
2253
|
+
class="bx--list-box__selection bx--list-box__selection--multi"
|
|
2254
|
+
tabindex="0"
|
|
2255
|
+
title="Clear all selected items">
|
|
2256
|
+
{{ pills.length }}
|
|
2257
|
+
<svg
|
|
2258
|
+
focusable="false"
|
|
2259
|
+
preserveAspectRatio="xMidYMid meet"
|
|
2260
|
+
style="will-change: transform;"
|
|
2261
|
+
role="img"
|
|
2262
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2263
|
+
width="16"
|
|
2264
|
+
height="16"
|
|
2265
|
+
viewBox="0 0 16 16"
|
|
2266
|
+
aria-hidden="true">
|
|
2267
|
+
<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>
|
|
2268
|
+
</svg>
|
|
2269
|
+
</div>
|
|
2270
|
+
<input
|
|
2271
|
+
[id]="id"
|
|
2272
|
+
[disabled]="disabled"
|
|
2273
|
+
(keyup)="onSearch($event.target.value)"
|
|
2274
|
+
[value]="selectedValue"
|
|
2275
|
+
class="bx--text-input"
|
|
2276
|
+
role="combobox"
|
|
2277
|
+
aria-label="ListBox input field"
|
|
2278
|
+
autocomplete="off"
|
|
2279
|
+
[placeholder]="placeholder"/>
|
|
2280
|
+
<ibm-icon-chevron-down16
|
|
2281
|
+
[ngClass]="{'bx--list-box__menu-icon--open': open}"
|
|
2282
|
+
class="bx--list-box__menu-icon"
|
|
2283
|
+
ariaLabel="Close menu">
|
|
2284
|
+
</ibm-icon-chevron-down16>
|
|
2285
|
+
</div>
|
|
2286
|
+
<div
|
|
2287
|
+
#dropdownMenu
|
|
2288
|
+
*ngIf="open">
|
|
2289
|
+
<ng-content></ng-content>
|
|
2097
2290
|
</div>
|
|
2098
|
-
<input
|
|
2099
|
-
[disabled]="disabled"
|
|
2100
|
-
(keyup)="onSearch($event.target.value)"
|
|
2101
|
-
[value]="selectedValue"
|
|
2102
|
-
class="bx--text-input"
|
|
2103
|
-
role="combobox"
|
|
2104
|
-
aria-label="ListBox input field"
|
|
2105
|
-
autocomplete="off"
|
|
2106
|
-
[placeholder]="placeholder"/>
|
|
2107
|
-
<ibm-icon-chevron-down16
|
|
2108
|
-
[ngClass]="{'bx--list-box__menu-icon--open': open}"
|
|
2109
|
-
class="bx--list-box__menu-icon"
|
|
2110
|
-
ariaLabel="Close menu">
|
|
2111
|
-
</ibm-icon-chevron-down16>
|
|
2112
|
-
</div>
|
|
2113
|
-
<div
|
|
2114
|
-
#dropdownMenu
|
|
2115
|
-
*ngIf="open">
|
|
2116
|
-
<ng-content></ng-content>
|
|
2117
2291
|
</div>
|
|
2118
2292
|
`,
|
|
2119
2293
|
providers: [
|
|
@@ -2124,7 +2298,9 @@ import { filter } from "rxjs/operators";
|
|
|
2124
2298
|
}
|
|
2125
2299
|
]
|
|
2126
2300
|
})
|
|
2127
|
-
export class ComboBox implements OnChanges,
|
|
2301
|
+
export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit {
|
|
2302
|
+
static comboBoxCount = 0;
|
|
2303
|
+
@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;
|
|
2128
2304
|
/**
|
|
2129
2305
|
* List of items to fill the content with.
|
|
2130
2306
|
*
|
|
@@ -2164,6 +2340,14 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
|
|
|
2164
2340
|
* Combo box render size.
|
|
2165
2341
|
*/
|
|
2166
2342
|
@Input() size: "sm" | "md" | "lg" = "md";
|
|
2343
|
+
/**
|
|
2344
|
+
* Label for the combobox.
|
|
2345
|
+
*/
|
|
2346
|
+
@Input() label: string | TemplateRef<any>;
|
|
2347
|
+
/**
|
|
2348
|
+
* Sets the optional helper text.
|
|
2349
|
+
*/
|
|
2350
|
+
@Input() helperText: string | TemplateRef<any>;
|
|
2167
2351
|
/**
|
|
2168
2352
|
* Set to `true` to disable combobox.
|
|
2169
2353
|
*/
|
|
@@ -2212,7 +2396,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
|
|
|
2212
2396
|
/** ContentChild reference to the instantiated dropdown list */
|
|
2213
2397
|
@ContentChild(AbstractDropdownView) view: AbstractDropdownView;
|
|
2214
2398
|
@ViewChild("dropdownMenu") dropdownMenu;
|
|
2215
|
-
@HostBinding("class")
|
|
2399
|
+
@HostBinding("class.bx--list-box__wrapper") hostClass = true;
|
|
2216
2400
|
@HostBinding("attr.role") role = "combobox";
|
|
2217
2401
|
@HostBinding("style.display") display = "block";
|
|
2218
2402
|
|
|
@@ -2244,12 +2428,6 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
|
|
|
2244
2428
|
}
|
|
2245
2429
|
}
|
|
2246
2430
|
|
|
2247
|
-
ngOnInit() {
|
|
2248
|
-
if (this.type === "multi") {
|
|
2249
|
-
this.class = "bx--multi-select bx--combo-box bx--list-box";
|
|
2250
|
-
}
|
|
2251
|
-
}
|
|
2252
|
-
|
|
2253
2431
|
/**
|
|
2254
2432
|
* Sets initial state that depends on child components
|
|
2255
2433
|
* Subscribes to select events and handles focus/filtering/initial list updates
|
|
@@ -2452,6 +2630,10 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
|
|
|
2452
2630
|
});
|
|
2453
2631
|
}
|
|
2454
2632
|
|
|
2633
|
+
public isTemplate(value) {
|
|
2634
|
+
return value instanceof TemplateRef;
|
|
2635
|
+
}
|
|
2636
|
+
|
|
2455
2637
|
protected updateSelected() {
|
|
2456
2638
|
const selected = this.view.getSelected();
|
|
2457
2639
|
if (selected) {
|
|
@@ -2499,7 +2681,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
|
|
|
2499
2681
|
<script src="../js/libs/htmlparser.js"></script>
|
|
2500
2682
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
2501
2683
|
<script>
|
|
2502
|
-
var COMPONENT_TEMPLATE = '<div><div [attr.aria-expanded]="open"
|
|
2684
|
+
var COMPONENT_TEMPLATE = '<div><label [for]="id" class="bx--label"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template></label><div *ngIf="helperText" class="bx--form__helper-text"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template></div><div class="bx--combo-box bx--list-box" [ngClass]="{\'bx--multi-select\' : type === \'multi\'}"> <div [attr.aria-expanded]="open" role="button" class="bx--list-box__field" tabindex="0" type="button" aria-label="close menu" aria-haspopup="true" (click)="toggleDropdown()"> <div *ngIf="type === \'multi\' && pills.length > 0" (click)="clearSelected()" role="button" class="bx--list-box__selection bx--list-box__selection--multi" tabindex="0" title="Clear all selected items"> {{ pills.length }} <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path> </svg> </div> <input [id]="id" [disabled]="disabled" (keyup)="onSearch($event.target.value)" [value]="selectedValue" class="bx--text-input" role="combobox" aria-label="ListBox input field" autocomplete="off" [placeholder]="placeholder"/> <ibm-icon-chevron-down16 [ngClass]="{\'bx--list-box__menu-icon--open\': open}" class="bx--list-box__menu-icon" ariaLabel="Close menu"> </ibm-icon-chevron-down16> </div> <div #dropdownMenu *ngIf="open"> <ng-content></ng-content> </div></div> </div>'
|
|
2503
2685
|
var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Documentation', 'selector': 'ibm-documentation'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'Number', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Panel', 'selector': 'ibm-panel'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProductSwitcher', 'selector': 'ibm-product-switcher'},{'name': 'ProductSwitcherItem', 'selector': 'ibm-product-switcher-item'},{'name': 'ProductSwitcherList', 'selector': 'ibm-product-switcher-list'},{'name': 'ProductSwitcherListItem', 'selector': 'ibm-product-switcher-list-item'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableContainer', 'selector': 'ibm-table-container'},{'name': 'TableHeader', 'selector': 'ibm-table-header'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
|
|
2504
2686
|
var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TableHeaderDescription', 'selector': '[ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
|
|
2505
2687
|
var ACTUAL_COMPONENT = {'name': 'ComboBox'};
|