carbon-components-angular 5.41.1 → 5.42.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/ComboBox.html +4 -4
- package/docs/documentation/components/TextareaLabelComponent.html +346 -128
- package/docs/documentation/coverage.html +6 -6
- package/docs/documentation/directives/TextArea.html +58 -0
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ComboBoxModule.html +4 -4
- package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
- package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +41 -37
- package/docs/documentation/modules/DatePickerInputModule.html +41 -37
- package/docs/documentation/modules/DatePickerModule/dependencies.svg +38 -38
- package/docs/documentation/modules/DatePickerModule.html +38 -38
- package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
- package/docs/documentation/modules/GridModule.html +60 -60
- package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
- package/docs/documentation/modules/LoadingModule.html +4 -4
- package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NFormsModule.html +4 -4
- package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NumberModule.html +4 -4
- package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
- package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
- package/docs/documentation/modules/RadioModule.html +4 -4
- package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
- package/docs/documentation/modules/SelectModule.html +58 -58
- package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SliderModule.html +4 -4
- package/docs/documentation/modules/TableModule/dependencies.svg +216 -216
- package/docs/documentation/modules/TableModule.html +216 -216
- package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
- package/docs/documentation/modules/TabsModule.html +69 -69
- package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TagModule.html +4 -4
- package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +102 -102
- package/docs/documentation/modules/TilesModule.html +102 -102
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +26 -26
- package/docs/documentation/modules/TimePickerModule.html +26 -26
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +41 -45
- package/docs/documentation/modules/TimePickerSelectModule.html +41 -45
- package/docs/documentation/modules/ToggleModule/dependencies.svg +42 -46
- package/docs/documentation/modules/ToggleModule.html +42 -46
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +39 -39
- package/docs/documentation/modules/ToggletipModule.html +39 -39
- package/docs/documentation/modules/TooltipModule/dependencies.svg +29 -29
- package/docs/documentation/modules/TooltipModule.html +29 -29
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +36 -36
- package/docs/documentation/modules/TreeviewModule.html +36 -36
- package/docs/documentation.json +127 -35
- package/docs/storybook/{1345.9eabf5e2.iframe.bundle.js → 1345.ec2701f8.iframe.bundle.js} +1 -1
- package/docs/storybook/{combobox-combobox-stories.3bbada2d.iframe.bundle.js → combobox-combobox-stories.84acbfa0.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/index.json +1 -1
- package/docs/storybook/input-textarea-stories.f6532f41.iframe.bundle.js +1 -0
- package/docs/storybook/main.a2b57351.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.4b19f36d.iframe.bundle.js → runtime~main.f3aed674.iframe.bundle.js} +1 -1
- package/docs/storybook/stories.json +1 -1
- package/esm2020/combobox/combobox.component.mjs +3 -3
- package/esm2020/input/label.component.mjs +1 -1
- package/esm2020/input/text-area.directive.mjs +8 -2
- package/esm2020/input/textarea-label.component.mjs +186 -106
- package/fesm2015/carbon-components-angular-combobox.mjs +2 -2
- package/fesm2015/carbon-components-angular-combobox.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-input.mjs +193 -107
- package/fesm2015/carbon-components-angular-input.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-combobox.mjs +2 -2
- package/fesm2020/carbon-components-angular-combobox.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-input.mjs +193 -107
- package/fesm2020/carbon-components-angular-input.mjs.map +1 -1
- package/input/text-area.directive.d.ts +1 -0
- package/input/textarea-label.component.d.ts +7 -1
- package/package.json +1 -1
- package/docs/storybook/input-textarea-stories.1a3b5e80.iframe.bundle.js +0 -1
- package/docs/storybook/main.0398cabf.iframe.bundle.js +0 -1
|
@@ -164,58 +164,89 @@
|
|
|
164
164
|
|
|
165
165
|
<tr>
|
|
166
166
|
<td class="col-md-3">template</td>
|
|
167
|
-
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
&
|
|
180
|
-
<
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
&
|
|
204
|
-
<
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
<
|
|
211
|
-
<
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
</
|
|
215
|
-
<
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
&
|
|
167
|
+
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><ng-container *ngIf="skeleton">
|
|
168
|
+
<span class="cds--label cds--skeleton"></span>
|
|
169
|
+
<div class="cds--text-area cds--skeleton"></div>
|
|
170
|
+
</ng-container>
|
|
171
|
+
<ng-container *ngIf="!skeleton">
|
|
172
|
+
<div class="cds--text-area__label-wrapper">
|
|
173
|
+
<label
|
|
174
|
+
[for]="labelInputID"
|
|
175
|
+
[attr.aria-label]="ariaLabel"
|
|
176
|
+
class="cds--label"
|
|
177
|
+
[ngClass]="{
|
|
178
|
+
'cds--label--disabled': disabled
|
|
179
|
+
}">
|
|
180
|
+
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
|
|
181
|
+
<ng-template #labelContent>
|
|
182
|
+
<ng-content></ng-content>
|
|
183
|
+
</ng-template>
|
|
184
|
+
</label>
|
|
185
|
+
</div>
|
|
186
|
+
<div
|
|
187
|
+
class="cds--text-area__wrapper"
|
|
188
|
+
[ngClass]="{
|
|
189
|
+
'cds--text-area__wrapper--warn': warn
|
|
190
|
+
}"
|
|
191
|
+
[attr.data-invalid]="(invalid ? true : null)"
|
|
192
|
+
#wrapper>
|
|
193
|
+
<svg
|
|
194
|
+
*ngIf="!fluid && invalid"
|
|
195
|
+
cdsIcon="warning--filled"
|
|
196
|
+
size="16"
|
|
197
|
+
class="cds--text-area__invalid-icon">
|
|
198
|
+
</svg>
|
|
199
|
+
<svg
|
|
200
|
+
*ngIf="!fluid && !invalid && warn"
|
|
201
|
+
cdsIcon="warning--alt--filled"
|
|
202
|
+
size="16"
|
|
203
|
+
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
|
|
204
|
+
</svg>
|
|
205
|
+
<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
|
|
206
|
+
<ng-template #textAreaContent>
|
|
207
|
+
<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
|
|
208
|
+
</ng-template>
|
|
209
|
+
|
|
210
|
+
<ng-container *ngIf="fluid">
|
|
211
|
+
<hr class="cds--text-area__divider" />
|
|
212
|
+
<div *ngIf="invalid" class="cds--form-requirement">
|
|
213
|
+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
|
|
214
|
+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
|
|
215
|
+
<svg
|
|
216
|
+
cdsIcon="warning--filled"
|
|
217
|
+
size="16"
|
|
218
|
+
class="cds--text-area__invalid-icon">
|
|
219
|
+
</svg>
|
|
220
|
+
</div>
|
|
221
|
+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
|
|
222
|
+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
|
|
223
|
+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
|
|
224
|
+
<svg
|
|
225
|
+
cdsIcon="warning--alt--filled"
|
|
226
|
+
size="16"
|
|
227
|
+
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
|
|
228
|
+
</svg>
|
|
229
|
+
</div>
|
|
230
|
+
</ng-container>
|
|
231
|
+
</div>
|
|
232
|
+
<ng-container *ngIf="!fluid">
|
|
233
|
+
<div
|
|
234
|
+
*ngIf="helperText && !invalid && !warn"
|
|
235
|
+
class="cds--form__helper-text"
|
|
236
|
+
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
|
|
237
|
+
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
|
|
238
|
+
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
|
|
239
|
+
</div>
|
|
240
|
+
<div *ngIf="invalid" class="cds--form-requirement">
|
|
241
|
+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
|
|
242
|
+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
|
|
243
|
+
</div>
|
|
244
|
+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
|
|
245
|
+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
|
|
246
|
+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
|
|
247
|
+
</div>
|
|
248
|
+
</ng-container>
|
|
249
|
+
</ng-container>
|
|
219
250
|
</code></pre></td>
|
|
220
251
|
</tr>
|
|
221
252
|
|
|
@@ -296,6 +327,9 @@
|
|
|
296
327
|
<li>
|
|
297
328
|
<a href="#disabled" >disabled</a>
|
|
298
329
|
</li>
|
|
330
|
+
<li>
|
|
331
|
+
<a href="#fluid" >fluid</a>
|
|
332
|
+
</li>
|
|
299
333
|
<li>
|
|
300
334
|
<a href="#helperText" >helperText</a>
|
|
301
335
|
</li>
|
|
@@ -342,6 +376,12 @@
|
|
|
342
376
|
<li>
|
|
343
377
|
<a href="#class.cds--text-area__wrapper--readonly" >class.cds--text-area__wrapper--readonly</a>
|
|
344
378
|
</li>
|
|
379
|
+
<li>
|
|
380
|
+
<a href="#class.cds--text-area--fluid" >class.cds--text-area--fluid</a>
|
|
381
|
+
</li>
|
|
382
|
+
<li>
|
|
383
|
+
<a href="#class.cds--text-area--fluid__skeleton" >class.cds--text-area--fluid__skeleton</a>
|
|
384
|
+
</li>
|
|
345
385
|
</ul>
|
|
346
386
|
</td>
|
|
347
387
|
</tr>
|
|
@@ -358,6 +398,12 @@
|
|
|
358
398
|
<li>
|
|
359
399
|
<a href="#isReadonly" >isReadonly</a>
|
|
360
400
|
</li>
|
|
401
|
+
<li>
|
|
402
|
+
<a href="#fluidClass" >fluidClass</a>
|
|
403
|
+
</li>
|
|
404
|
+
<li>
|
|
405
|
+
<a href="#fluidSkeletonClass" >fluidSkeletonClass</a>
|
|
406
|
+
</li>
|
|
361
407
|
</ul>
|
|
362
408
|
</td>
|
|
363
409
|
</tr>
|
|
@@ -376,7 +422,7 @@
|
|
|
376
422
|
</tr>
|
|
377
423
|
<tr>
|
|
378
424
|
<td class="col-md-4">
|
|
379
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
425
|
+
<div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/input/textarea-label.component.ts:193</a></div>
|
|
380
426
|
</td>
|
|
381
427
|
</tr>
|
|
382
428
|
|
|
@@ -434,7 +480,7 @@
|
|
|
434
480
|
</tr>
|
|
435
481
|
<tr>
|
|
436
482
|
<td class="col-md-2" colspan="2">
|
|
437
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
483
|
+
<div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/input/textarea-label.component.ts:168</a></div>
|
|
438
484
|
</td>
|
|
439
485
|
</tr>
|
|
440
486
|
<tr>
|
|
@@ -466,12 +512,44 @@
|
|
|
466
512
|
</tr>
|
|
467
513
|
<tr>
|
|
468
514
|
<td class="col-md-2" colspan="2">
|
|
469
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
515
|
+
<div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/input/textarea-label.component.ts:133</a></div>
|
|
470
516
|
</td>
|
|
471
517
|
</tr>
|
|
472
518
|
<tr>
|
|
473
519
|
<td class="col-md-4">
|
|
474
520
|
<div class="io-description"><p>Set to <code>true</code> for a disabled label.</p>
|
|
521
|
+
</div>
|
|
522
|
+
</td>
|
|
523
|
+
</tr>
|
|
524
|
+
</tbody>
|
|
525
|
+
</table>
|
|
526
|
+
<table class="table table-sm table-bordered">
|
|
527
|
+
<tbody>
|
|
528
|
+
<tr>
|
|
529
|
+
<td class="col-md-4">
|
|
530
|
+
<a name="fluid"></a>
|
|
531
|
+
<b>fluid</b>
|
|
532
|
+
</td>
|
|
533
|
+
</tr>
|
|
534
|
+
<tr>
|
|
535
|
+
<td class="col-md-4">
|
|
536
|
+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
537
|
+
|
|
538
|
+
</td>
|
|
539
|
+
</tr>
|
|
540
|
+
<tr>
|
|
541
|
+
<td class="col-md-4">
|
|
542
|
+
<i>Default value : </i><code>false</code>
|
|
543
|
+
</td>
|
|
544
|
+
</tr>
|
|
545
|
+
<tr>
|
|
546
|
+
<td class="col-md-2" colspan="2">
|
|
547
|
+
<div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/input/textarea-label.component.ts:173</a></div>
|
|
548
|
+
</td>
|
|
549
|
+
</tr>
|
|
550
|
+
<tr>
|
|
551
|
+
<td class="col-md-4">
|
|
552
|
+
<div class="io-description"><p>Experimental: enable fluid state</p>
|
|
475
553
|
</div>
|
|
476
554
|
</td>
|
|
477
555
|
</tr>
|
|
@@ -493,7 +571,7 @@
|
|
|
493
571
|
</tr>
|
|
494
572
|
<tr>
|
|
495
573
|
<td class="col-md-2" colspan="2">
|
|
496
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
574
|
+
<div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/input/textarea-label.component.ts:148</a></div>
|
|
497
575
|
</td>
|
|
498
576
|
</tr>
|
|
499
577
|
<tr>
|
|
@@ -525,7 +603,7 @@
|
|
|
525
603
|
</tr>
|
|
526
604
|
<tr>
|
|
527
605
|
<td class="col-md-2" colspan="2">
|
|
528
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
606
|
+
<div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/input/textarea-label.component.ts:156</a></div>
|
|
529
607
|
</td>
|
|
530
608
|
</tr>
|
|
531
609
|
<tr>
|
|
@@ -552,7 +630,7 @@
|
|
|
552
630
|
</tr>
|
|
553
631
|
<tr>
|
|
554
632
|
<td class="col-md-2" colspan="2">
|
|
555
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
633
|
+
<div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/input/textarea-label.component.ts:152</a></div>
|
|
556
634
|
</td>
|
|
557
635
|
</tr>
|
|
558
636
|
<tr>
|
|
@@ -584,7 +662,7 @@
|
|
|
584
662
|
</tr>
|
|
585
663
|
<tr>
|
|
586
664
|
<td class="col-md-2" colspan="2">
|
|
587
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
665
|
+
<div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/input/textarea-label.component.ts:128</a></div>
|
|
588
666
|
</td>
|
|
589
667
|
</tr>
|
|
590
668
|
<tr>
|
|
@@ -612,7 +690,7 @@ its input counterpart through the 'for' attribute.</p>
|
|
|
612
690
|
</tr>
|
|
613
691
|
<tr>
|
|
614
692
|
<td class="col-md-2" colspan="2">
|
|
615
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
693
|
+
<div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/input/textarea-label.component.ts:143</a></div>
|
|
616
694
|
</td>
|
|
617
695
|
</tr>
|
|
618
696
|
<tr>
|
|
@@ -645,7 +723,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
645
723
|
</tr>
|
|
646
724
|
<tr>
|
|
647
725
|
<td class="col-md-2" colspan="2">
|
|
648
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
726
|
+
<div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/input/textarea-label.component.ts:137</a></div>
|
|
649
727
|
</td>
|
|
650
728
|
</tr>
|
|
651
729
|
<tr>
|
|
@@ -672,7 +750,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
672
750
|
</tr>
|
|
673
751
|
<tr>
|
|
674
752
|
<td class="col-md-2" colspan="2">
|
|
675
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
753
|
+
<div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/input/textarea-label.component.ts:144</a></div>
|
|
676
754
|
</td>
|
|
677
755
|
</tr>
|
|
678
756
|
</tbody>
|
|
@@ -698,7 +776,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
698
776
|
</tr>
|
|
699
777
|
<tr>
|
|
700
778
|
<td class="col-md-2" colspan="2">
|
|
701
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
779
|
+
<div class="io-line">Defined in <a href="" data-line="160" class="link-to-prism">src/input/textarea-label.component.ts:160</a></div>
|
|
702
780
|
</td>
|
|
703
781
|
</tr>
|
|
704
782
|
<tr>
|
|
@@ -725,7 +803,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
725
803
|
</tr>
|
|
726
804
|
<tr>
|
|
727
805
|
<td class="col-md-2" colspan="2">
|
|
728
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
806
|
+
<div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/input/textarea-label.component.ts:164</a></div>
|
|
729
807
|
</td>
|
|
730
808
|
</tr>
|
|
731
809
|
<tr>
|
|
@@ -763,7 +841,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
763
841
|
</tr>
|
|
764
842
|
<tr>
|
|
765
843
|
<td class="col-md-4">
|
|
766
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
844
|
+
<div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/input/textarea-label.component.ts:181</a></div>
|
|
767
845
|
</td>
|
|
768
846
|
</tr>
|
|
769
847
|
|
|
@@ -789,7 +867,59 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
789
867
|
</tr>
|
|
790
868
|
<tr>
|
|
791
869
|
<td class="col-md-4">
|
|
792
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
870
|
+
<div class="io-line">Defined in <a href="" data-line="183" class="link-to-prism">src/input/textarea-label.component.ts:183</a></div>
|
|
871
|
+
</td>
|
|
872
|
+
</tr>
|
|
873
|
+
|
|
874
|
+
|
|
875
|
+
</tbody>
|
|
876
|
+
</table>
|
|
877
|
+
<table class="table table-sm table-bordered">
|
|
878
|
+
<tbody>
|
|
879
|
+
<tr>
|
|
880
|
+
<td class="col-md-4">
|
|
881
|
+
<a name="class.cds--text-area--fluid"></a>
|
|
882
|
+
<span class="name">
|
|
883
|
+
<span ><b>class.cds--text-area--fluid</b></span>
|
|
884
|
+
<a href="#class.cds--text-area--fluid"><span class="icon ion-ios-link"></span></a>
|
|
885
|
+
</span>
|
|
886
|
+
</td>
|
|
887
|
+
</tr>
|
|
888
|
+
<tr>
|
|
889
|
+
<td class="col-md-4">
|
|
890
|
+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
891
|
+
|
|
892
|
+
</td>
|
|
893
|
+
</tr>
|
|
894
|
+
<tr>
|
|
895
|
+
<td class="col-md-4">
|
|
896
|
+
<div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/input/textarea-label.component.ts:187</a></div>
|
|
897
|
+
</td>
|
|
898
|
+
</tr>
|
|
899
|
+
|
|
900
|
+
|
|
901
|
+
</tbody>
|
|
902
|
+
</table>
|
|
903
|
+
<table class="table table-sm table-bordered">
|
|
904
|
+
<tbody>
|
|
905
|
+
<tr>
|
|
906
|
+
<td class="col-md-4">
|
|
907
|
+
<a name="class.cds--text-area--fluid__skeleton"></a>
|
|
908
|
+
<span class="name">
|
|
909
|
+
<span ><b>class.cds--text-area--fluid__skeleton</b></span>
|
|
910
|
+
<a href="#class.cds--text-area--fluid__skeleton"><span class="icon ion-ios-link"></span></a>
|
|
911
|
+
</span>
|
|
912
|
+
</td>
|
|
913
|
+
</tr>
|
|
914
|
+
<tr>
|
|
915
|
+
<td class="col-md-4">
|
|
916
|
+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
917
|
+
|
|
918
|
+
</td>
|
|
919
|
+
</tr>
|
|
920
|
+
<tr>
|
|
921
|
+
<td class="col-md-4">
|
|
922
|
+
<div class="io-line">Defined in <a href="" data-line="191" class="link-to-prism">src/input/textarea-label.component.ts:191</a></div>
|
|
793
923
|
</td>
|
|
794
924
|
</tr>
|
|
795
925
|
|
|
@@ -826,8 +956,8 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
826
956
|
|
|
827
957
|
<tr>
|
|
828
958
|
<td class="col-md-4">
|
|
829
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
830
|
-
class="link-to-prism">src/input/textarea-label.component.ts:
|
|
959
|
+
<div class="io-line">Defined in <a href="" data-line="228"
|
|
960
|
+
class="link-to-prism">src/input/textarea-label.component.ts:228</a></div>
|
|
831
961
|
</td>
|
|
832
962
|
</tr>
|
|
833
963
|
|
|
@@ -889,8 +1019,8 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
889
1019
|
|
|
890
1020
|
<tr>
|
|
891
1021
|
<td class="col-md-4">
|
|
892
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
893
|
-
class="link-to-prism">src/input/textarea-label.component.ts:
|
|
1022
|
+
<div class="io-line">Defined in <a href="" data-line="203"
|
|
1023
|
+
class="link-to-prism">src/input/textarea-label.component.ts:203</a></div>
|
|
894
1024
|
</td>
|
|
895
1025
|
</tr>
|
|
896
1026
|
|
|
@@ -942,7 +1072,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
942
1072
|
</tr>
|
|
943
1073
|
<tr>
|
|
944
1074
|
<td class="col-md-4">
|
|
945
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1075
|
+
<div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/input/textarea-label.component.ts:181</a></div>
|
|
946
1076
|
</td>
|
|
947
1077
|
</tr>
|
|
948
1078
|
|
|
@@ -974,7 +1104,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
974
1104
|
</tr>
|
|
975
1105
|
<tr>
|
|
976
1106
|
<td class="col-md-4">
|
|
977
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1107
|
+
<div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/input/textarea-label.component.ts:123</a></div>
|
|
978
1108
|
</td>
|
|
979
1109
|
</tr>
|
|
980
1110
|
|
|
@@ -1016,7 +1146,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
1016
1146
|
</tr>
|
|
1017
1147
|
<tr>
|
|
1018
1148
|
<td class="col-md-4">
|
|
1019
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1149
|
+
<div class="io-line">Defined in <a href="" data-line="179" class="link-to-prism">src/input/textarea-label.component.ts:179</a></div>
|
|
1020
1150
|
</td>
|
|
1021
1151
|
</tr>
|
|
1022
1152
|
|
|
@@ -1052,7 +1182,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
1052
1182
|
</tr>
|
|
1053
1183
|
<tr>
|
|
1054
1184
|
<td class="col-md-4">
|
|
1055
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1185
|
+
<div class="io-line">Defined in <a href="" data-line="176" class="link-to-prism">src/input/textarea-label.component.ts:176</a></div>
|
|
1056
1186
|
</td>
|
|
1057
1187
|
</tr>
|
|
1058
1188
|
|
|
@@ -1081,7 +1211,51 @@ Since we cannot pass ng-content down easily from label component, we will accept
|
|
|
1081
1211
|
</tr>
|
|
1082
1212
|
<tr>
|
|
1083
1213
|
<td class="col-md-4">
|
|
1084
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1214
|
+
<div class="io-line">Defined in <a href="" data-line="183" class="link-to-prism">src/input/textarea-label.component.ts:183</a></div>
|
|
1215
|
+
</td>
|
|
1216
|
+
</tr>
|
|
1217
|
+
|
|
1218
|
+
</tbody>
|
|
1219
|
+
</table>
|
|
1220
|
+
<table class="table table-sm table-bordered">
|
|
1221
|
+
<tbody>
|
|
1222
|
+
<tr>
|
|
1223
|
+
<td class="col-md-4">
|
|
1224
|
+
<a name="fluidClass"></a>
|
|
1225
|
+
<span class="name"><b>fluidClass</b><a href="#fluidClass"><span class="icon ion-ios-link"></span></a></span>
|
|
1226
|
+
</td>
|
|
1227
|
+
</tr>
|
|
1228
|
+
|
|
1229
|
+
<tr>
|
|
1230
|
+
<td class="col-md-4">
|
|
1231
|
+
<span class="accessor"><b>get</b><code>fluidClass()</code></span>
|
|
1232
|
+
</td>
|
|
1233
|
+
</tr>
|
|
1234
|
+
<tr>
|
|
1235
|
+
<td class="col-md-4">
|
|
1236
|
+
<div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/input/textarea-label.component.ts:187</a></div>
|
|
1237
|
+
</td>
|
|
1238
|
+
</tr>
|
|
1239
|
+
|
|
1240
|
+
</tbody>
|
|
1241
|
+
</table>
|
|
1242
|
+
<table class="table table-sm table-bordered">
|
|
1243
|
+
<tbody>
|
|
1244
|
+
<tr>
|
|
1245
|
+
<td class="col-md-4">
|
|
1246
|
+
<a name="fluidSkeletonClass"></a>
|
|
1247
|
+
<span class="name"><b>fluidSkeletonClass</b><a href="#fluidSkeletonClass"><span class="icon ion-ios-link"></span></a></span>
|
|
1248
|
+
</td>
|
|
1249
|
+
</tr>
|
|
1250
|
+
|
|
1251
|
+
<tr>
|
|
1252
|
+
<td class="col-md-4">
|
|
1253
|
+
<span class="accessor"><b>get</b><code>fluidSkeletonClass()</code></span>
|
|
1254
|
+
</td>
|
|
1255
|
+
</tr>
|
|
1256
|
+
<tr>
|
|
1257
|
+
<td class="col-md-4">
|
|
1258
|
+
<div class="io-line">Defined in <a href="" data-line="191" class="link-to-prism">src/input/textarea-label.component.ts:191</a></div>
|
|
1085
1259
|
</td>
|
|
1086
1260
|
</tr>
|
|
1087
1261
|
|
|
@@ -1125,58 +1299,89 @@ import { TextArea } from "./text-area.directive";
|
|
|
1125
1299
|
@Component({
|
|
1126
1300
|
selector: "cds-textarea-label, ibm-textarea-label",
|
|
1127
1301
|
template: `
|
|
1128
|
-
<
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1302
|
+
<ng-container *ngIf="skeleton">
|
|
1303
|
+
<span class="cds--label cds--skeleton"></span>
|
|
1304
|
+
<div class="cds--text-area cds--skeleton"></div>
|
|
1305
|
+
</ng-container>
|
|
1306
|
+
<ng-container *ngIf="!skeleton">
|
|
1307
|
+
<div class="cds--text-area__label-wrapper">
|
|
1308
|
+
<label
|
|
1309
|
+
[for]="labelInputID"
|
|
1310
|
+
[attr.aria-label]="ariaLabel"
|
|
1311
|
+
class="cds--label"
|
|
1312
|
+
[ngClass]="{
|
|
1313
|
+
'cds--label--disabled': disabled
|
|
1314
|
+
}">
|
|
1315
|
+
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
|
|
1316
|
+
<ng-template #labelContent>
|
|
1317
|
+
<ng-content></ng-content>
|
|
1318
|
+
</ng-template>
|
|
1319
|
+
</label>
|
|
1320
|
+
</div>
|
|
1321
|
+
<div
|
|
1322
|
+
class="cds--text-area__wrapper"
|
|
1323
|
+
[ngClass]="{
|
|
1324
|
+
'cds--text-area__wrapper--warn': warn
|
|
1325
|
+
}"
|
|
1326
|
+
[attr.data-invalid]="(invalid ? true : null)"
|
|
1327
|
+
#wrapper>
|
|
1328
|
+
<svg
|
|
1329
|
+
*ngIf="!fluid && invalid"
|
|
1330
|
+
cdsIcon="warning--filled"
|
|
1331
|
+
size="16"
|
|
1332
|
+
class="cds--text-area__invalid-icon">
|
|
1333
|
+
</svg>
|
|
1334
|
+
<svg
|
|
1335
|
+
*ngIf="!fluid && !invalid && warn"
|
|
1336
|
+
cdsIcon="warning--alt--filled"
|
|
1337
|
+
size="16"
|
|
1338
|
+
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
|
|
1339
|
+
</svg>
|
|
1340
|
+
<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
|
|
1341
|
+
<ng-template #textAreaContent>
|
|
1342
|
+
<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
|
|
1343
|
+
</ng-template>
|
|
1344
|
+
|
|
1345
|
+
<ng-container *ngIf="fluid">
|
|
1346
|
+
<hr class="cds--text-area__divider" />
|
|
1347
|
+
<div *ngIf="invalid" class="cds--form-requirement">
|
|
1348
|
+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
|
|
1349
|
+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
|
|
1350
|
+
<svg
|
|
1351
|
+
cdsIcon="warning--filled"
|
|
1352
|
+
size="16"
|
|
1353
|
+
class="cds--text-area__invalid-icon">
|
|
1354
|
+
</svg>
|
|
1355
|
+
</div>
|
|
1356
|
+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
|
|
1357
|
+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
|
|
1358
|
+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
|
|
1359
|
+
<svg
|
|
1360
|
+
cdsIcon="warning--alt--filled"
|
|
1361
|
+
size="16"
|
|
1362
|
+
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
|
|
1363
|
+
</svg>
|
|
1364
|
+
</div>
|
|
1365
|
+
</ng-container>
|
|
1366
|
+
</div>
|
|
1367
|
+
<ng-container *ngIf="!fluid">
|
|
1368
|
+
<div
|
|
1369
|
+
*ngIf="helperText && !invalid && !warn"
|
|
1370
|
+
class="cds--form__helper-text"
|
|
1371
|
+
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
|
|
1372
|
+
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
|
|
1373
|
+
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
|
|
1374
|
+
</div>
|
|
1375
|
+
<div *ngIf="invalid" class="cds--form-requirement">
|
|
1376
|
+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
|
|
1377
|
+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
|
|
1378
|
+
</div>
|
|
1379
|
+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
|
|
1380
|
+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
|
|
1381
|
+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
|
|
1382
|
+
</div>
|
|
1383
|
+
</ng-container>
|
|
1384
|
+
</ng-container>
|
|
1180
1385
|
`
|
|
1181
1386
|
})
|
|
1182
1387
|
export class TextareaLabelComponent implements AfterViewInit {
|
|
@@ -1230,6 +1435,11 @@ export class TextareaLabelComponent implements AfterViewInit {
|
|
|
1230
1435
|
*/
|
|
1231
1436
|
@Input() ariaLabel: string;
|
|
1232
1437
|
|
|
1438
|
+
/**
|
|
1439
|
+
* Experimental: enable fluid state
|
|
1440
|
+
*/
|
|
1441
|
+
@Input() fluid = false;
|
|
1442
|
+
|
|
1233
1443
|
// @ts-ignore
|
|
1234
1444
|
@ViewChild("wrapper", { static: false }) wrapper: ElementRef<HTMLDivElement>;
|
|
1235
1445
|
|
|
@@ -1242,6 +1452,14 @@ export class TextareaLabelComponent implements AfterViewInit {
|
|
|
1242
1452
|
return this.wrapper?.nativeElement.querySelector("textarea")?.readOnly ?? false;
|
|
1243
1453
|
}
|
|
1244
1454
|
|
|
1455
|
+
@HostBinding("class.cds--text-area--fluid") get fluidClass() {
|
|
1456
|
+
return this.fluid && !this.skeleton;
|
|
1457
|
+
}
|
|
1458
|
+
|
|
1459
|
+
@HostBinding("class.cds--text-area--fluid__skeleton") get fluidSkeletonClass() {
|
|
1460
|
+
return this.fluid && this.skeleton;
|
|
1461
|
+
}
|
|
1462
|
+
|
|
1245
1463
|
/**
|
|
1246
1464
|
* Creates an instance of Label.
|
|
1247
1465
|
*/
|
|
@@ -1309,7 +1527,7 @@ export class TextareaLabelComponent implements AfterViewInit {
|
|
|
1309
1527
|
<script src="../js/libs/htmlparser.js"></script>
|
|
1310
1528
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
1311
1529
|
<script>
|
|
1312
|
-
var COMPONENT_TEMPLATE = '<div><label [for]="labelInputID"
|
|
1530
|
+
var COMPONENT_TEMPLATE = '<div><ng-container *ngIf="skeleton"> <span class="cds--label cds--skeleton"></span> <div class="cds--text-area cds--skeleton"></div></ng-container><ng-container *ngIf="!skeleton"> <div class="cds--text-area__label-wrapper"> <label [for]="labelInputID" [attr.aria-label]="ariaLabel" class="cds--label" [ngClass]="{ \'cds--label--disabled\': disabled }"> <ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template> <ng-template #labelContent> <ng-content></ng-content> </ng-template> </label> </div> <div class="cds--text-area__wrapper" [ngClass]="{ \'cds--text-area__wrapper--warn\': warn }" [attr.data-invalid]="(invalid ? true : null)" #wrapper> <svg *ngIf="!fluid && invalid" cdsIcon="warning--filled" size="16" class="cds--text-area__invalid-icon"> </svg> <svg *ngIf="!fluid && !invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning"> </svg> <ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template> <ng-template #textAreaContent> <ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content> </ng-template> <ng-container *ngIf="fluid"> <hr class="cds--text-area__divider" /> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> <svg cdsIcon="warning--filled" size="16" class="cds--text-area__invalid-icon"> </svg> </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> <svg cdsIcon="warning--alt--filled" size="16" class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning"> </svg> </div> </ng-container> </div> <ng-container *ngIf="!fluid"> <div *ngIf="helperText && !invalid && !warn" class="cds--form__helper-text" [ngClass]="{\'cds--form__helper-text--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div> </ng-container></ng-container> </div>'
|
|
1313
1531
|
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'}];
|
|
1314
1532
|
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]'}];
|
|
1315
1533
|
var ACTUAL_COMPONENT = {'name': 'TextareaLabelComponent'};
|