carbon-components-angular 5.42.0 → 5.43.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.
- package/docs/documentation/components/Select.html +281 -76
- package/docs/documentation/components/TimePickerSelect.html +180 -27
- package/docs/documentation/coverage.html +6 -6
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TagModule.html +4 -4
- package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
- package/docs/documentation/modules/ThemeModule.html +13 -13
- package/docs/documentation/modules/TilesModule/dependencies.svg +100 -100
- package/docs/documentation/modules/TilesModule.html +100 -100
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +30 -30
- package/docs/documentation/modules/TimePickerSelectModule.html +30 -30
- package/docs/documentation/modules/ToggleModule/dependencies.svg +45 -41
- package/docs/documentation/modules/ToggleModule.html +45 -41
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggletipModule.html +4 -4
- package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TooltipModule.html +4 -4
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TreeviewModule.html +4 -4
- package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
- package/docs/documentation/modules/UIShellModule.html +4 -4
- package/docs/documentation.json +274 -137
- package/docs/storybook/{9672.7b7a4af9.iframe.bundle.js → 9672.84e90325.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/index.json +1 -1
- package/docs/storybook/{main.a2b57351.iframe.bundle.js → main.fa8e9d39.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.f3aed674.iframe.bundle.js → runtime~main.4c0184d4.iframe.bundle.js} +1 -1
- package/docs/storybook/select-select-stories.5ddb23ab.iframe.bundle.js +1 -0
- package/docs/storybook/stories.json +1 -1
- package/esm2020/select/select.component.mjs +102 -32
- package/fesm2015/carbon-components-angular-select.mjs +101 -31
- package/fesm2015/carbon-components-angular-select.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-select.mjs +101 -31
- package/fesm2020/carbon-components-angular-select.mjs.map +1 -1
- package/package.json +1 -1
- package/select/select.component.d.ts +7 -1
- package/docs/storybook/select-select-stories.c1077d92.iframe.bundle.js +0 -1
|
@@ -177,11 +177,23 @@
|
|
|
177
177
|
|
|
178
178
|
<tr>
|
|
179
179
|
<td class="col-md-3">template</td>
|
|
180
|
-
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><div
|
|
181
|
-
|
|
180
|
+
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><div
|
|
181
|
+
[ngClass]="{
|
|
182
|
+
'cds--form-item': !skeleton,
|
|
183
|
+
'cds--select--fluid': fluid && !skeleton
|
|
184
|
+
}">
|
|
185
|
+
<ng-container *ngIf="skeleton && !fluid">
|
|
182
186
|
<div *ngIf="label" class="cds--label cds--skeleton"></div>
|
|
183
187
|
<div class="cds--select cds--skeleton"></div>
|
|
184
|
-
</ng-
|
|
188
|
+
</ng-container>
|
|
189
|
+
<ng-container *ngIf="skeleton && fluid">
|
|
190
|
+
<div class="cds--list-box__wrapper--fluid">
|
|
191
|
+
<div class="cds--list-box cds--skeleton">
|
|
192
|
+
<div class="cds--list-box__label"></div>
|
|
193
|
+
<div class="cds--list-box__field"></div>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
</ng-container>
|
|
185
197
|
<div
|
|
186
198
|
*ngIf="!skeleton"
|
|
187
199
|
class="cds--select"
|
|
@@ -191,7 +203,9 @@
|
|
|
191
203
|
'cds--select--invalid': invalid,
|
|
192
204
|
'cds--select--warning': warn,
|
|
193
205
|
'cds--select--disabled': disabled,
|
|
194
|
-
'cds--select--readonly': readonly
|
|
206
|
+
'cds--select--readonly': readonly,
|
|
207
|
+
'cds--select--fluid--invalid': fluid && invalid,
|
|
208
|
+
'cds--select--fluid--focus': fluid && focused
|
|
195
209
|
}">
|
|
196
210
|
<label
|
|
197
211
|
*ngIf="label"
|
|
@@ -205,7 +219,7 @@
|
|
|
205
219
|
<ng-container *ngTemplateOutlet="noInline"></ng-container>
|
|
206
220
|
</div>
|
|
207
221
|
<div
|
|
208
|
-
*ngIf="helperText"
|
|
222
|
+
*ngIf="helperText && !invalid && !warn && !skeleton && !fluid"
|
|
209
223
|
class="cds--form__helper-text"
|
|
210
224
|
[ngClass]="{
|
|
211
225
|
'cds--form__helper-text--disabled': disabled
|
|
@@ -234,7 +248,9 @@
|
|
|
234
248
|
'cds--select-input--lg': size === 'lg'
|
|
235
249
|
}"
|
|
236
250
|
(mousedown)="onMouseDown($event)"
|
|
237
|
-
(keydown)="onKeyDown($event)"
|
|
251
|
+
(keydown)="onKeyDown($event)"
|
|
252
|
+
(focus)="fluid ? handleFocus($event) : null"
|
|
253
|
+
(blur)="fluid ? handleFocus($event) : null">
|
|
238
254
|
<ng-content></ng-content>
|
|
239
255
|
</select>
|
|
240
256
|
<svg
|
|
@@ -261,16 +277,30 @@
|
|
|
261
277
|
size="16"
|
|
262
278
|
class="cds--select__invalid-icon cds--select__invalid-icon--warning">
|
|
263
279
|
</svg>
|
|
280
|
+
<ng-container *ngIf="fluid">
|
|
281
|
+
<hr class="cds--select__divider" />
|
|
282
|
+
<div
|
|
283
|
+
*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">
|
|
284
|
+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
|
|
285
|
+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
|
|
286
|
+
</div>
|
|
287
|
+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
|
|
288
|
+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
|
|
289
|
+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
|
|
290
|
+
</div>
|
|
291
|
+
</ng-container>
|
|
264
292
|
</div>
|
|
265
|
-
<
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
<
|
|
272
|
-
|
|
273
|
-
|
|
293
|
+
<ng-container *ngIf="!fluid">
|
|
294
|
+
<div
|
|
295
|
+
*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">
|
|
296
|
+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
|
|
297
|
+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
|
|
298
|
+
</div>
|
|
299
|
+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
|
|
300
|
+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
|
|
301
|
+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
|
|
302
|
+
</div>
|
|
303
|
+
</ng-container>
|
|
274
304
|
</ng-template>
|
|
275
305
|
</code></pre></td>
|
|
276
306
|
</tr>
|
|
@@ -303,6 +333,9 @@
|
|
|
303
333
|
<span class="modifier">Protected</span>
|
|
304
334
|
<a href="#_value" >_value</a>
|
|
305
335
|
</li>
|
|
336
|
+
<li>
|
|
337
|
+
<a href="#focused" >focused</a>
|
|
338
|
+
</li>
|
|
306
339
|
<li>
|
|
307
340
|
<span class="modifier">Protected</span>
|
|
308
341
|
<a href="#onChangeHandler" >onChangeHandler</a>
|
|
@@ -335,6 +368,9 @@
|
|
|
335
368
|
<span class="modifier"></span>
|
|
336
369
|
<a href="#focusOut" >focusOut</a>
|
|
337
370
|
</li>
|
|
371
|
+
<li>
|
|
372
|
+
<a href="#handleFocus" >handleFocus</a>
|
|
373
|
+
</li>
|
|
338
374
|
<li>
|
|
339
375
|
<span class="modifier">Public</span>
|
|
340
376
|
<a href="#isTemplate" >isTemplate</a>
|
|
@@ -384,6 +420,9 @@
|
|
|
384
420
|
<li>
|
|
385
421
|
<a href="#display" >display</a>
|
|
386
422
|
</li>
|
|
423
|
+
<li>
|
|
424
|
+
<a href="#fluid" >fluid</a>
|
|
425
|
+
</li>
|
|
387
426
|
<li>
|
|
388
427
|
<a href="#helperText" >helperText</a>
|
|
389
428
|
</li>
|
|
@@ -492,7 +531,7 @@
|
|
|
492
531
|
</tr>
|
|
493
532
|
<tr>
|
|
494
533
|
<td class="col-md-2" colspan="2">
|
|
495
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
534
|
+
<div class="io-line">Defined in <a href="" data-line="240" class="link-to-prism">src/select/select.component.ts:240</a></div>
|
|
496
535
|
</td>
|
|
497
536
|
</tr>
|
|
498
537
|
</tbody>
|
|
@@ -518,7 +557,7 @@
|
|
|
518
557
|
</tr>
|
|
519
558
|
<tr>
|
|
520
559
|
<td class="col-md-2" colspan="2">
|
|
521
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
560
|
+
<div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/select/select.component.ts:221</a></div>
|
|
522
561
|
</td>
|
|
523
562
|
</tr>
|
|
524
563
|
<tr>
|
|
@@ -550,12 +589,44 @@
|
|
|
550
589
|
</tr>
|
|
551
590
|
<tr>
|
|
552
591
|
<td class="col-md-2" colspan="2">
|
|
553
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
592
|
+
<div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/select/select.component.ts:189</a></div>
|
|
554
593
|
</td>
|
|
555
594
|
</tr>
|
|
556
595
|
<tr>
|
|
557
596
|
<td class="col-md-4">
|
|
558
597
|
<div class="io-description"><p><code>inline</code> or <code>default</code> select displays</p>
|
|
598
|
+
</div>
|
|
599
|
+
</td>
|
|
600
|
+
</tr>
|
|
601
|
+
</tbody>
|
|
602
|
+
</table>
|
|
603
|
+
<table class="table table-sm table-bordered">
|
|
604
|
+
<tbody>
|
|
605
|
+
<tr>
|
|
606
|
+
<td class="col-md-4">
|
|
607
|
+
<a name="fluid"></a>
|
|
608
|
+
<b>fluid</b>
|
|
609
|
+
</td>
|
|
610
|
+
</tr>
|
|
611
|
+
<tr>
|
|
612
|
+
<td class="col-md-4">
|
|
613
|
+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
614
|
+
|
|
615
|
+
</td>
|
|
616
|
+
</tr>
|
|
617
|
+
<tr>
|
|
618
|
+
<td class="col-md-4">
|
|
619
|
+
<i>Default value : </i><code>false</code>
|
|
620
|
+
</td>
|
|
621
|
+
</tr>
|
|
622
|
+
<tr>
|
|
623
|
+
<td class="col-md-2" colspan="2">
|
|
624
|
+
<div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/select/select.component.ts:245</a></div>
|
|
625
|
+
</td>
|
|
626
|
+
</tr>
|
|
627
|
+
<tr>
|
|
628
|
+
<td class="col-md-4">
|
|
629
|
+
<div class="io-description"><p>Experimental: enable fluid state</p>
|
|
559
630
|
</div>
|
|
560
631
|
</td>
|
|
561
632
|
</tr>
|
|
@@ -577,7 +648,7 @@
|
|
|
577
648
|
</tr>
|
|
578
649
|
<tr>
|
|
579
650
|
<td class="col-md-2" colspan="2">
|
|
580
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
651
|
+
<div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/select/select.component.ts:197</a></div>
|
|
581
652
|
</td>
|
|
582
653
|
</tr>
|
|
583
654
|
<tr>
|
|
@@ -609,7 +680,7 @@
|
|
|
609
680
|
</tr>
|
|
610
681
|
<tr>
|
|
611
682
|
<td class="col-md-2" colspan="2">
|
|
612
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
683
|
+
<div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/select/select.component.ts:213</a></div>
|
|
613
684
|
</td>
|
|
614
685
|
</tr>
|
|
615
686
|
<tr>
|
|
@@ -641,7 +712,7 @@
|
|
|
641
712
|
</tr>
|
|
642
713
|
<tr>
|
|
643
714
|
<td class="col-md-2" colspan="2">
|
|
644
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
715
|
+
<div class="io-line">Defined in <a href="" data-line="229" class="link-to-prism">src/select/select.component.ts:229</a></div>
|
|
645
716
|
</td>
|
|
646
717
|
</tr>
|
|
647
718
|
<tr>
|
|
@@ -668,7 +739,7 @@
|
|
|
668
739
|
</tr>
|
|
669
740
|
<tr>
|
|
670
741
|
<td class="col-md-2" colspan="2">
|
|
671
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
742
|
+
<div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/select/select.component.ts:201</a></div>
|
|
672
743
|
</td>
|
|
673
744
|
</tr>
|
|
674
745
|
<tr>
|
|
@@ -695,7 +766,7 @@
|
|
|
695
766
|
</tr>
|
|
696
767
|
<tr>
|
|
697
768
|
<td class="col-md-2" colspan="2">
|
|
698
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
769
|
+
<div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/select/select.component.ts:193</a></div>
|
|
699
770
|
</td>
|
|
700
771
|
</tr>
|
|
701
772
|
<tr>
|
|
@@ -727,7 +798,7 @@
|
|
|
727
798
|
</tr>
|
|
728
799
|
<tr>
|
|
729
800
|
<td class="col-md-2" colspan="2">
|
|
730
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
801
|
+
<div class="io-line">Defined in <a href="" data-line="233" class="link-to-prism">src/select/select.component.ts:233</a></div>
|
|
731
802
|
</td>
|
|
732
803
|
</tr>
|
|
733
804
|
<tr>
|
|
@@ -759,7 +830,7 @@
|
|
|
759
830
|
</tr>
|
|
760
831
|
<tr>
|
|
761
832
|
<td class="col-md-2" colspan="2">
|
|
762
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
833
|
+
<div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/select/select.component.ts:217</a></div>
|
|
763
834
|
</td>
|
|
764
835
|
</tr>
|
|
765
836
|
<tr>
|
|
@@ -791,7 +862,7 @@
|
|
|
791
862
|
</tr>
|
|
792
863
|
<tr>
|
|
793
864
|
<td class="col-md-2" colspan="2">
|
|
794
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
865
|
+
<div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/select/select.component.ts:225</a></div>
|
|
795
866
|
</td>
|
|
796
867
|
</tr>
|
|
797
868
|
<tr>
|
|
@@ -823,7 +894,7 @@
|
|
|
823
894
|
</tr>
|
|
824
895
|
<tr>
|
|
825
896
|
<td class="col-md-2" colspan="2">
|
|
826
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
897
|
+
<div class="io-line">Defined in <a href="" data-line="239" class="link-to-prism">src/select/select.component.ts:239</a></div>
|
|
827
898
|
</td>
|
|
828
899
|
</tr>
|
|
829
900
|
</tbody>
|
|
@@ -844,7 +915,7 @@
|
|
|
844
915
|
</tr>
|
|
845
916
|
<tr>
|
|
846
917
|
<td class="col-md-2" colspan="2">
|
|
847
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
918
|
+
<div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/select/select.component.ts:170</a></div>
|
|
848
919
|
</td>
|
|
849
920
|
</tr>
|
|
850
921
|
</tbody>
|
|
@@ -870,7 +941,7 @@
|
|
|
870
941
|
</tr>
|
|
871
942
|
<tr>
|
|
872
943
|
<td class="col-md-2" colspan="2">
|
|
873
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
944
|
+
<div class="io-line">Defined in <a href="" data-line="205" class="link-to-prism">src/select/select.component.ts:205</a></div>
|
|
874
945
|
</td>
|
|
875
946
|
</tr>
|
|
876
947
|
<tr>
|
|
@@ -897,7 +968,7 @@
|
|
|
897
968
|
</tr>
|
|
898
969
|
<tr>
|
|
899
970
|
<td class="col-md-2" colspan="2">
|
|
900
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
971
|
+
<div class="io-line">Defined in <a href="" data-line="209" class="link-to-prism">src/select/select.component.ts:209</a></div>
|
|
901
972
|
</td>
|
|
902
973
|
</tr>
|
|
903
974
|
<tr>
|
|
@@ -927,7 +998,7 @@
|
|
|
927
998
|
</tr>
|
|
928
999
|
<tr>
|
|
929
1000
|
<td class="col-md-2" colspan="2">
|
|
930
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1001
|
+
<div class="io-line">Defined in <a href="" data-line="247" class="link-to-prism">src/select/select.component.ts:247</a></div>
|
|
931
1002
|
</td>
|
|
932
1003
|
</tr>
|
|
933
1004
|
</tbody>
|
|
@@ -955,8 +1026,8 @@
|
|
|
955
1026
|
|
|
956
1027
|
<tr>
|
|
957
1028
|
<td class="col-md-4">
|
|
958
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
959
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1029
|
+
<div class="io-line">Defined in <a href="" data-line="308"
|
|
1030
|
+
class="link-to-prism">src/select/select.component.ts:308</a></div>
|
|
960
1031
|
</td>
|
|
961
1032
|
</tr>
|
|
962
1033
|
|
|
@@ -1005,8 +1076,8 @@
|
|
|
1005
1076
|
|
|
1006
1077
|
<tr>
|
|
1007
1078
|
<td class="col-md-4">
|
|
1008
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1009
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1079
|
+
<div class="io-line">Defined in <a href="" data-line="308"
|
|
1080
|
+
class="link-to-prism">src/select/select.component.ts:308</a></div>
|
|
1010
1081
|
</td>
|
|
1011
1082
|
</tr>
|
|
1012
1083
|
|
|
@@ -1024,6 +1095,73 @@
|
|
|
1024
1095
|
</tr>
|
|
1025
1096
|
</tbody>
|
|
1026
1097
|
</table>
|
|
1098
|
+
<table class="table table-sm table-bordered">
|
|
1099
|
+
<tbody>
|
|
1100
|
+
<tr>
|
|
1101
|
+
<td class="col-md-4">
|
|
1102
|
+
<a name="handleFocus"></a>
|
|
1103
|
+
<span class="name">
|
|
1104
|
+
<span ><b>handleFocus</b></span>
|
|
1105
|
+
<a href="#handleFocus"><span class="icon ion-ios-link"></span></a>
|
|
1106
|
+
</span>
|
|
1107
|
+
</td>
|
|
1108
|
+
</tr>
|
|
1109
|
+
<tr>
|
|
1110
|
+
<td class="col-md-4">
|
|
1111
|
+
<code>handleFocus(event: FocusEvent)</code>
|
|
1112
|
+
</td>
|
|
1113
|
+
</tr>
|
|
1114
|
+
|
|
1115
|
+
|
|
1116
|
+
<tr>
|
|
1117
|
+
<td class="col-md-4">
|
|
1118
|
+
<div class="io-line">Defined in <a href="" data-line="336"
|
|
1119
|
+
class="link-to-prism">src/select/select.component.ts:336</a></div>
|
|
1120
|
+
</td>
|
|
1121
|
+
</tr>
|
|
1122
|
+
|
|
1123
|
+
|
|
1124
|
+
<tr>
|
|
1125
|
+
<td class="col-md-4">
|
|
1126
|
+
|
|
1127
|
+
<div class="io-description">
|
|
1128
|
+
<b>Parameters :</b>
|
|
1129
|
+
|
|
1130
|
+
<table class="params">
|
|
1131
|
+
<thead>
|
|
1132
|
+
<tr>
|
|
1133
|
+
<td>Name</td>
|
|
1134
|
+
<td>Type</td>
|
|
1135
|
+
<td>Optional</td>
|
|
1136
|
+
</tr>
|
|
1137
|
+
</thead>
|
|
1138
|
+
<tbody>
|
|
1139
|
+
<tr>
|
|
1140
|
+
<td>event</td>
|
|
1141
|
+
<td>
|
|
1142
|
+
<code>FocusEvent</code>
|
|
1143
|
+
</td>
|
|
1144
|
+
|
|
1145
|
+
<td>
|
|
1146
|
+
No
|
|
1147
|
+
</td>
|
|
1148
|
+
|
|
1149
|
+
|
|
1150
|
+
</tr>
|
|
1151
|
+
</tbody>
|
|
1152
|
+
</table>
|
|
1153
|
+
</div>
|
|
1154
|
+
<div class="io-description">
|
|
1155
|
+
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
|
|
1156
|
+
|
|
1157
|
+
</div>
|
|
1158
|
+
<div class="io-description">
|
|
1159
|
+
|
|
1160
|
+
</div>
|
|
1161
|
+
</td>
|
|
1162
|
+
</tr>
|
|
1163
|
+
</tbody>
|
|
1164
|
+
</table>
|
|
1027
1165
|
<table class="table table-sm table-bordered">
|
|
1028
1166
|
<tbody>
|
|
1029
1167
|
<tr>
|
|
@@ -1046,8 +1184,8 @@
|
|
|
1046
1184
|
|
|
1047
1185
|
<tr>
|
|
1048
1186
|
<td class="col-md-4">
|
|
1049
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1050
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1187
|
+
<div class="io-line">Defined in <a href="" data-line="312"
|
|
1188
|
+
class="link-to-prism">src/select/select.component.ts:312</a></div>
|
|
1051
1189
|
</td>
|
|
1052
1190
|
</tr>
|
|
1053
1191
|
|
|
@@ -1109,8 +1247,8 @@
|
|
|
1109
1247
|
|
|
1110
1248
|
<tr>
|
|
1111
1249
|
<td class="col-md-4">
|
|
1112
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1113
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1250
|
+
<div class="io-line">Defined in <a href="" data-line="255"
|
|
1251
|
+
class="link-to-prism">src/select/select.component.ts:255</a></div>
|
|
1114
1252
|
</td>
|
|
1115
1253
|
</tr>
|
|
1116
1254
|
|
|
@@ -1146,8 +1284,8 @@
|
|
|
1146
1284
|
|
|
1147
1285
|
<tr>
|
|
1148
1286
|
<td class="col-md-4">
|
|
1149
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1150
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1287
|
+
<div class="io-line">Defined in <a href="" data-line="298"
|
|
1288
|
+
class="link-to-prism">src/select/select.component.ts:298</a></div>
|
|
1151
1289
|
</td>
|
|
1152
1290
|
</tr>
|
|
1153
1291
|
|
|
@@ -1212,8 +1350,8 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1212
1350
|
|
|
1213
1351
|
<tr>
|
|
1214
1352
|
<td class="col-md-4">
|
|
1215
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1216
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1353
|
+
<div class="io-line">Defined in <a href="" data-line="326"
|
|
1354
|
+
class="link-to-prism">src/select/select.component.ts:326</a></div>
|
|
1217
1355
|
</td>
|
|
1218
1356
|
</tr>
|
|
1219
1357
|
|
|
@@ -1279,8 +1417,8 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1279
1417
|
|
|
1280
1418
|
<tr>
|
|
1281
1419
|
<td class="col-md-4">
|
|
1282
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1283
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1420
|
+
<div class="io-line">Defined in <a href="" data-line="316"
|
|
1421
|
+
class="link-to-prism">src/select/select.component.ts:316</a></div>
|
|
1284
1422
|
</td>
|
|
1285
1423
|
</tr>
|
|
1286
1424
|
|
|
@@ -1346,8 +1484,8 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1346
1484
|
|
|
1347
1485
|
<tr>
|
|
1348
1486
|
<td class="col-md-4">
|
|
1349
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1350
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1487
|
+
<div class="io-line">Defined in <a href="" data-line="276"
|
|
1488
|
+
class="link-to-prism">src/select/select.component.ts:276</a></div>
|
|
1351
1489
|
</td>
|
|
1352
1490
|
</tr>
|
|
1353
1491
|
|
|
@@ -1415,8 +1553,8 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1415
1553
|
|
|
1416
1554
|
<tr>
|
|
1417
1555
|
<td class="col-md-4">
|
|
1418
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1419
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1556
|
+
<div class="io-line">Defined in <a href="" data-line="283"
|
|
1557
|
+
class="link-to-prism">src/select/select.component.ts:283</a></div>
|
|
1420
1558
|
</td>
|
|
1421
1559
|
</tr>
|
|
1422
1560
|
|
|
@@ -1484,8 +1622,8 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1484
1622
|
|
|
1485
1623
|
<tr>
|
|
1486
1624
|
<td class="col-md-4">
|
|
1487
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1488
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1625
|
+
<div class="io-line">Defined in <a href="" data-line="290"
|
|
1626
|
+
class="link-to-prism">src/select/select.component.ts:290</a></div>
|
|
1489
1627
|
</td>
|
|
1490
1628
|
</tr>
|
|
1491
1629
|
|
|
@@ -1553,8 +1691,8 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1553
1691
|
|
|
1554
1692
|
<tr>
|
|
1555
1693
|
<td class="col-md-4">
|
|
1556
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1557
|
-
class="link-to-prism">src/select/select.component.ts:
|
|
1694
|
+
<div class="io-line">Defined in <a href="" data-line="269"
|
|
1695
|
+
class="link-to-prism">src/select/select.component.ts:269</a></div>
|
|
1558
1696
|
</td>
|
|
1559
1697
|
</tr>
|
|
1560
1698
|
|
|
@@ -1622,7 +1760,32 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1622
1760
|
</tr>
|
|
1623
1761
|
<tr>
|
|
1624
1762
|
<td class="col-md-4">
|
|
1625
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1763
|
+
<div class="io-line">Defined in <a href="" data-line="253" class="link-to-prism">src/select/select.component.ts:253</a></div>
|
|
1764
|
+
</td>
|
|
1765
|
+
</tr>
|
|
1766
|
+
|
|
1767
|
+
|
|
1768
|
+
</tbody>
|
|
1769
|
+
</table>
|
|
1770
|
+
<table class="table table-sm table-bordered">
|
|
1771
|
+
<tbody>
|
|
1772
|
+
<tr>
|
|
1773
|
+
<td class="col-md-4">
|
|
1774
|
+
<a name="focused"></a>
|
|
1775
|
+
<span class="name">
|
|
1776
|
+
<span ><b>focused</b></span>
|
|
1777
|
+
<a href="#focused"><span class="icon ion-ios-link"></span></a>
|
|
1778
|
+
</span>
|
|
1779
|
+
</td>
|
|
1780
|
+
</tr>
|
|
1781
|
+
<tr>
|
|
1782
|
+
<td class="col-md-4">
|
|
1783
|
+
<i>Default value : </i><code>false</code>
|
|
1784
|
+
</td>
|
|
1785
|
+
</tr>
|
|
1786
|
+
<tr>
|
|
1787
|
+
<td class="col-md-4">
|
|
1788
|
+
<div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/select/select.component.ts:251</a></div>
|
|
1626
1789
|
</td>
|
|
1627
1790
|
</tr>
|
|
1628
1791
|
|
|
@@ -1648,7 +1811,7 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1648
1811
|
</tr>
|
|
1649
1812
|
<tr>
|
|
1650
1813
|
<td class="col-md-4">
|
|
1651
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1814
|
+
<div class="io-line">Defined in <a href="" data-line="343" class="link-to-prism">src/select/select.component.ts:343</a></div>
|
|
1652
1815
|
</td>
|
|
1653
1816
|
</tr>
|
|
1654
1817
|
|
|
@@ -1680,7 +1843,7 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1680
1843
|
</tr>
|
|
1681
1844
|
<tr>
|
|
1682
1845
|
<td class="col-md-4">
|
|
1683
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1846
|
+
<div class="io-line">Defined in <a href="" data-line="344" class="link-to-prism">src/select/select.component.ts:344</a></div>
|
|
1684
1847
|
</td>
|
|
1685
1848
|
</tr>
|
|
1686
1849
|
|
|
@@ -1716,7 +1879,7 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1716
1879
|
</tr>
|
|
1717
1880
|
<tr>
|
|
1718
1881
|
<td class="col-md-4">
|
|
1719
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1882
|
+
<div class="io-line">Defined in <a href="" data-line="249" class="link-to-prism">src/select/select.component.ts:249</a></div>
|
|
1720
1883
|
</td>
|
|
1721
1884
|
</tr>
|
|
1722
1885
|
|
|
@@ -1748,7 +1911,7 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1748
1911
|
</tr>
|
|
1749
1912
|
<tr>
|
|
1750
1913
|
<td class="col-md-4">
|
|
1751
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1914
|
+
<div class="io-line">Defined in <a href="" data-line="184" class="link-to-prism">src/select/select.component.ts:184</a></div>
|
|
1752
1915
|
</td>
|
|
1753
1916
|
</tr>
|
|
1754
1917
|
|
|
@@ -1783,7 +1946,7 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1783
1946
|
</tr>
|
|
1784
1947
|
<tr>
|
|
1785
1948
|
<td class="col-md-4">
|
|
1786
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1949
|
+
<div class="io-line">Defined in <a href="" data-line="177" class="link-to-prism">src/select/select.component.ts:177</a></div>
|
|
1787
1950
|
</td>
|
|
1788
1951
|
</tr>
|
|
1789
1952
|
|
|
@@ -1794,7 +1957,7 @@ Sends events to the change handler and emits a <code>selected</code> event.</p>
|
|
|
1794
1957
|
</tr>
|
|
1795
1958
|
<tr>
|
|
1796
1959
|
<td class="col-md-4">
|
|
1797
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1960
|
+
<div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/select/select.component.ts:170</a></div>
|
|
1798
1961
|
</td>
|
|
1799
1962
|
</tr>
|
|
1800
1963
|
<tr>
|
|
@@ -1871,11 +2034,23 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms&quo
|
|
|
1871
2034
|
@Component({
|
|
1872
2035
|
selector: "cds-select, ibm-select",
|
|
1873
2036
|
template: `
|
|
1874
|
-
<div
|
|
1875
|
-
|
|
2037
|
+
<div
|
|
2038
|
+
[ngClass]="{
|
|
2039
|
+
'cds--form-item': !skeleton,
|
|
2040
|
+
'cds--select--fluid': fluid && !skeleton
|
|
2041
|
+
}">
|
|
2042
|
+
<ng-container *ngIf="skeleton && !fluid">
|
|
1876
2043
|
<div *ngIf="label" class="cds--label cds--skeleton"></div>
|
|
1877
2044
|
<div class="cds--select cds--skeleton"></div>
|
|
1878
|
-
</ng-
|
|
2045
|
+
</ng-container>
|
|
2046
|
+
<ng-container *ngIf="skeleton && fluid">
|
|
2047
|
+
<div class="cds--list-box__wrapper--fluid">
|
|
2048
|
+
<div class="cds--list-box cds--skeleton">
|
|
2049
|
+
<div class="cds--list-box__label"></div>
|
|
2050
|
+
<div class="cds--list-box__field"></div>
|
|
2051
|
+
</div>
|
|
2052
|
+
</div>
|
|
2053
|
+
</ng-container>
|
|
1879
2054
|
<div
|
|
1880
2055
|
*ngIf="!skeleton"
|
|
1881
2056
|
class="cds--select"
|
|
@@ -1885,7 +2060,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms&quo
|
|
|
1885
2060
|
'cds--select--invalid': invalid,
|
|
1886
2061
|
'cds--select--warning': warn,
|
|
1887
2062
|
'cds--select--disabled': disabled,
|
|
1888
|
-
'cds--select--readonly': readonly
|
|
2063
|
+
'cds--select--readonly': readonly,
|
|
2064
|
+
'cds--select--fluid--invalid': fluid && invalid,
|
|
2065
|
+
'cds--select--fluid--focus': fluid && focused
|
|
1889
2066
|
}">
|
|
1890
2067
|
<label
|
|
1891
2068
|
*ngIf="label"
|
|
@@ -1899,7 +2076,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms&quo
|
|
|
1899
2076
|
<ng-container *ngTemplateOutlet="noInline"></ng-container>
|
|
1900
2077
|
</div>
|
|
1901
2078
|
<div
|
|
1902
|
-
*ngIf="helperText"
|
|
2079
|
+
*ngIf="helperText && !invalid && !warn && !skeleton && !fluid"
|
|
1903
2080
|
class="cds--form__helper-text"
|
|
1904
2081
|
[ngClass]="{
|
|
1905
2082
|
'cds--form__helper-text--disabled': disabled
|
|
@@ -1928,7 +2105,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms&quo
|
|
|
1928
2105
|
'cds--select-input--lg': size === 'lg'
|
|
1929
2106
|
}"
|
|
1930
2107
|
(mousedown)="onMouseDown($event)"
|
|
1931
|
-
(keydown)="onKeyDown($event)"
|
|
2108
|
+
(keydown)="onKeyDown($event)"
|
|
2109
|
+
(focus)="fluid ? handleFocus($event) : null"
|
|
2110
|
+
(blur)="fluid ? handleFocus($event) : null">
|
|
1932
2111
|
<ng-content></ng-content>
|
|
1933
2112
|
</select>
|
|
1934
2113
|
<svg
|
|
@@ -1955,16 +2134,30 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms&quo
|
|
|
1955
2134
|
size="16"
|
|
1956
2135
|
class="cds--select__invalid-icon cds--select__invalid-icon--warning">
|
|
1957
2136
|
</svg>
|
|
2137
|
+
<ng-container *ngIf="fluid">
|
|
2138
|
+
<hr class="cds--select__divider" />
|
|
2139
|
+
<div
|
|
2140
|
+
*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">
|
|
2141
|
+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
|
|
2142
|
+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
|
|
2143
|
+
</div>
|
|
2144
|
+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
|
|
2145
|
+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
|
|
2146
|
+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
|
|
2147
|
+
</div>
|
|
2148
|
+
</ng-container>
|
|
1958
2149
|
</div>
|
|
1959
|
-
<
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
<
|
|
1966
|
-
|
|
1967
|
-
|
|
2150
|
+
<ng-container *ngIf="!fluid">
|
|
2151
|
+
<div
|
|
2152
|
+
*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">
|
|
2153
|
+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
|
|
2154
|
+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
|
|
2155
|
+
</div>
|
|
2156
|
+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
|
|
2157
|
+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
|
|
2158
|
+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
|
|
2159
|
+
</div>
|
|
2160
|
+
</ng-container>
|
|
1968
2161
|
</ng-template>
|
|
1969
2162
|
`,
|
|
1970
2163
|
providers: [
|
|
@@ -2048,10 +2241,17 @@ export class Select implements ControlValueAccessor, AfterViewInit {
|
|
|
2048
2241
|
@Input() theme: "light" | "dark" = "dark";
|
|
2049
2242
|
@Input() ariaLabel: string;
|
|
2050
2243
|
|
|
2244
|
+
/**
|
|
2245
|
+
* Experimental: enable fluid state
|
|
2246
|
+
*/
|
|
2247
|
+
@Input() fluid = false;
|
|
2248
|
+
|
|
2051
2249
|
@Output() valueChange = new EventEmitter();
|
|
2052
2250
|
|
|
2053
2251
|
@ViewChild("select") select: ElementRef;
|
|
2054
2252
|
|
|
2253
|
+
focused = false;
|
|
2254
|
+
|
|
2055
2255
|
protected _value;
|
|
2056
2256
|
|
|
2057
2257
|
ngAfterViewInit() {
|
|
@@ -2135,11 +2335,16 @@ export class Select implements ControlValueAccessor, AfterViewInit {
|
|
|
2135
2335
|
}
|
|
2136
2336
|
}
|
|
2137
2337
|
|
|
2338
|
+
handleFocus(event: FocusEvent) {
|
|
2339
|
+
this.focused = event.type === "focus";
|
|
2340
|
+
}
|
|
2341
|
+
|
|
2138
2342
|
/**
|
|
2139
2343
|
* placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`
|
|
2140
2344
|
*/
|
|
2141
2345
|
protected onChangeHandler = (_: any) => { };
|
|
2142
2346
|
protected onTouchedHandler = () => { };
|
|
2347
|
+
|
|
2143
2348
|
}
|
|
2144
2349
|
</code></pre>
|
|
2145
2350
|
</div>
|
|
@@ -2171,7 +2376,7 @@ export class Select implements ControlValueAccessor, AfterViewInit {
|
|
|
2171
2376
|
<script src="../js/libs/htmlparser.js"></script>
|
|
2172
2377
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
2173
2378
|
<script>
|
|
2174
|
-
var COMPONENT_TEMPLATE = '<div><div
|
|
2379
|
+
var COMPONENT_TEMPLATE = '<div><div [ngClass]="{ \'cds--form-item\': !skeleton, \'cds--select--fluid\': fluid && !skeleton }"> <ng-container *ngIf="skeleton && !fluid"> <div *ngIf="label" class="cds--label cds--skeleton"></div> <div class="cds--select cds--skeleton"></div> </ng-container> <ng-container *ngIf="skeleton && fluid"> <div class="cds--list-box__wrapper--fluid"> <div class="cds--list-box cds--skeleton"> <div class="cds--list-box__label"></div> <div class="cds--list-box__field"></div> </div> </div> </ng-container> <div *ngIf="!skeleton" class="cds--select" [ngClass]="{ \'cds--select--inline\': display === \'inline\', \'cds--select--light\': theme === \'light\', \'cds--select--invalid\': invalid, \'cds--select--warning\': warn, \'cds--select--disabled\': disabled, \'cds--select--readonly\': readonly, \'cds--select--fluid--invalid\': fluid && invalid, \'cds--select--fluid--focus\': fluid && focused }"> <label *ngIf="label" [for]="id" class="cds--label" [ngClass]="{\'cds--label--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div *ngIf="display === \'inline\'; else noInline" class="cds--select-input--inline__wrapper"> <ng-container *ngTemplateOutlet="noInline"></ng-container> </div> <div *ngIf="helperText && !invalid && !warn && !skeleton && !fluid" class="cds--form__helper-text" [ngClass]="{ \'cds--form__helper-text--disabled\': disabled }"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> </div></div><!-- select element: dynamically projected based on \'display\' variant --><ng-template #noInline> <div class="cds--select-input__wrapper" [attr.data-invalid]="(invalid ? true : null)"> <select #select [attr.id]="id" [attr.aria-label]="ariaLabel" [disabled]="disabled" (change)="onChange($event)" [attr.aria-invalid]="invalid ? \'true\' : null" [attr.aria-readonly]="readonly ? \'true\' : null" class="cds--select-input" [ngClass]="{ \'cds--select-input--sm\': size === \'sm\', \'cds--select-input--md\': size === \'md\', \'cds--select-input--lg\': size === \'lg\' }" (mousedown)="onMouseDown($event)" (keydown)="onKeyDown($event)" (focus)="fluid ? handleFocus($event) : null" (blur)="fluid ? handleFocus($event) : null"> <ng-content></ng-content> </select> <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="cds--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path> </svg> <svg *ngIf="invalid" cdsIcon="warning--filled" size="16" class="cds--select__invalid-icon"> </svg> <svg *ngIf="!invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--select__invalid-icon cds--select__invalid-icon--warning"> </svg> <ng-container *ngIf="fluid"> <hr class="cds--select__divider" /> <div *ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite"> <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> </ng-container> </div> <ng-container *ngIf="!fluid"> <div *ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite"> <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> </ng-container></ng-template> </div>'
|
|
2175
2380
|
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'}];
|
|
2176
2381
|
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]'}];
|
|
2177
2382
|
var ACTUAL_COMPONENT = {'name': 'Select'};
|