carbon-components-angular 5.59.2 → 5.60.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/FileComponent.html +244 -57
- package/docs/documentation/components/FileUploader.html +125 -53
- package/docs/documentation/coverage.html +6 -6
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +107 -107
- package/docs/documentation/modules/TilesModule.html +107 -107
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +38 -42
- package/docs/documentation/modules/TimePickerModule.html +38 -42
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +46 -42
- package/docs/documentation/modules/TimePickerSelectModule.html +46 -42
- package/docs/documentation/modules/ToggleModule/dependencies.svg +38 -42
- package/docs/documentation/modules/ToggleModule.html +38 -42
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TreeviewModule.html +4 -4
- package/docs/documentation.json +693 -118
- package/docs/storybook/1335.04cb3625.iframe.bundle.js +1 -0
- package/docs/storybook/file-uploader-file-stories.28293d0d.iframe.bundle.js +1 -0
- package/docs/storybook/file-uploader-file-uploader-stories.fa3bd098.iframe.bundle.js +1 -0
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/index.json +1 -1
- package/docs/storybook/main.eff7657a.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/runtime~main.4bbe449f.iframe.bundle.js +1 -0
- package/docs/storybook/stories.json +1 -1
- package/esm2020/file-uploader/file-uploader.component.mjs +15 -7
- package/esm2020/file-uploader/file.component.mjs +92 -42
- package/fesm2015/carbon-components-angular-file-uploader.mjs +105 -48
- package/fesm2015/carbon-components-angular-file-uploader.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-file-uploader.mjs +105 -48
- package/fesm2020/carbon-components-angular-file-uploader.mjs.map +1 -1
- package/file-uploader/file-uploader.component.d.ts +9 -1
- package/file-uploader/file.component.d.ts +11 -2
- package/package.json +1 -1
- package/docs/storybook/file-uploader-file-uploader-stories.7cbeda49.iframe.bundle.js +0 -1
- package/docs/storybook/main.762d7fb4.iframe.bundle.js +0 -1
- package/docs/storybook/runtime~main.771b0b54.iframe.bundle.js +0 -1
|
@@ -169,33 +169,47 @@
|
|
|
169
169
|
|
|
170
170
|
<tr>
|
|
171
171
|
<td class="col-md-3">template</td>
|
|
172
|
-
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><p class="cds--file-filename" [title]="fileItem.file.name">
|
|
173
|
-
<
|
|
174
|
-
|
|
175
|
-
|
|
172
|
+
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><p class="cds--file-filename" [title]="fileItem.file.name">
|
|
173
|
+
<ng-template
|
|
174
|
+
*ngIf="isTemplate(nameTpl); else defaultName"
|
|
175
|
+
[ngTemplateOutlet]="nameTpl"
|
|
176
|
+
[ngTemplateOutletContext]="{ $implicit: fileItem }">
|
|
177
|
+
</ng-template>
|
|
178
|
+
<ng-template #defaultName>{{ fileItem.file.name }}</ng-template>
|
|
179
|
+
</p>
|
|
180
|
+
<span *ngIf="fileItem.state === 'edit'" class="cds--file__state-container">
|
|
176
181
|
<svg
|
|
177
182
|
*ngIf="isInvalidText"
|
|
178
183
|
cdsIcon="warning--filled"
|
|
179
184
|
class="cds--file--invalid"
|
|
180
185
|
size="16">
|
|
181
186
|
</svg>
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
187
|
+
<ng-template
|
|
188
|
+
*ngIf="isTemplate(actionsTpl); else defaultActions"
|
|
189
|
+
[ngTemplateOutlet]="actionsTpl">
|
|
190
|
+
</ng-template>
|
|
191
|
+
<ng-template #defaultActions>
|
|
192
|
+
<button
|
|
193
|
+
type="button"
|
|
194
|
+
cdsButton="ghost"
|
|
195
|
+
iconOnly="true"
|
|
196
|
+
[size]="size"
|
|
197
|
+
[attr.aria-label]="translations.REMOVE_BUTTON"
|
|
198
|
+
(click)="remove.emit()"
|
|
199
|
+
(keyup.enter)="remove.emit()"
|
|
200
|
+
(keyup.space)="remove.emit()">
|
|
201
|
+
<svg cdsIcon="trash-can" size="16"></svg>
|
|
202
|
+
</button>
|
|
203
|
+
</ng-template>
|
|
192
204
|
</span>
|
|
193
205
|
<span *ngIf="fileItem.state === 'upload'">
|
|
194
206
|
<div class="cds--inline-loading__animation">
|
|
195
207
|
<cds-loading size="sm"></cds-loading>
|
|
196
208
|
</div>
|
|
197
209
|
</span>
|
|
198
|
-
<span
|
|
210
|
+
<span
|
|
211
|
+
*ngIf="fileItem.state === 'complete'"
|
|
212
|
+
class="cds--file__state-container">
|
|
199
213
|
<svg
|
|
200
214
|
cdsIcon="checkmark--filled"
|
|
201
215
|
size="16"
|
|
@@ -203,9 +217,16 @@
|
|
|
203
217
|
[ariaLabel]="translations.CHECKMARK">
|
|
204
218
|
</svg>
|
|
205
219
|
</span>
|
|
206
|
-
<div
|
|
207
|
-
|
|
208
|
-
|
|
220
|
+
<div
|
|
221
|
+
class="cds--form-requirement"
|
|
222
|
+
role="alert"
|
|
223
|
+
*ngIf="fileItem.invalid">
|
|
224
|
+
<div class="cds--form-requirement__title">
|
|
225
|
+
{{ fileItem.invalidTitle }}
|
|
226
|
+
</div>
|
|
227
|
+
<p class="cds--form-requirement__supplement">
|
|
228
|
+
{{ fileItem.invalidText }}
|
|
229
|
+
</p>
|
|
209
230
|
</div>
|
|
210
231
|
</code></pre></td>
|
|
211
232
|
</tr>
|
|
@@ -250,6 +271,10 @@
|
|
|
250
271
|
<tr>
|
|
251
272
|
<td class="col-md-4">
|
|
252
273
|
<ul class="index-list">
|
|
274
|
+
<li>
|
|
275
|
+
<span class="modifier">Public</span>
|
|
276
|
+
<a href="#isTemplate" >isTemplate</a>
|
|
277
|
+
</li>
|
|
253
278
|
<li>
|
|
254
279
|
<a href="#ngOnDestroy" >ngOnDestroy</a>
|
|
255
280
|
</li>
|
|
@@ -265,9 +290,15 @@
|
|
|
265
290
|
<tr>
|
|
266
291
|
<td class="col-md-4">
|
|
267
292
|
<ul class="index-list">
|
|
293
|
+
<li>
|
|
294
|
+
<a href="#actionsTpl" >actionsTpl</a>
|
|
295
|
+
</li>
|
|
268
296
|
<li>
|
|
269
297
|
<a href="#fileItem" >fileItem</a>
|
|
270
298
|
</li>
|
|
299
|
+
<li>
|
|
300
|
+
<a href="#nameTpl" >nameTpl</a>
|
|
301
|
+
</li>
|
|
271
302
|
<li>
|
|
272
303
|
<a href="#size" >size</a>
|
|
273
304
|
</li>
|
|
@@ -359,7 +390,7 @@
|
|
|
359
390
|
</tr>
|
|
360
391
|
<tr>
|
|
361
392
|
<td class="col-md-4">
|
|
362
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
393
|
+
<div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/file-uploader/file.component.ts:118</a></div>
|
|
363
394
|
</td>
|
|
364
395
|
</tr>
|
|
365
396
|
|
|
@@ -399,6 +430,33 @@
|
|
|
399
430
|
|
|
400
431
|
<section data-compodoc="block-inputs">
|
|
401
432
|
<h3 id="inputs">Inputs</h3>
|
|
433
|
+
<table class="table table-sm table-bordered">
|
|
434
|
+
<tbody>
|
|
435
|
+
<tr>
|
|
436
|
+
<td class="col-md-4">
|
|
437
|
+
<a name="actionsTpl"></a>
|
|
438
|
+
<b>actionsTpl</b>
|
|
439
|
+
</td>
|
|
440
|
+
</tr>
|
|
441
|
+
<tr>
|
|
442
|
+
<td class="col-md-4">
|
|
443
|
+
<i>Type : </i> <code>TemplateRef<></code>
|
|
444
|
+
|
|
445
|
+
</td>
|
|
446
|
+
</tr>
|
|
447
|
+
<tr>
|
|
448
|
+
<td class="col-md-2" colspan="2">
|
|
449
|
+
<div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/file-uploader/file.component.ts:98</a></div>
|
|
450
|
+
</td>
|
|
451
|
+
</tr>
|
|
452
|
+
<tr>
|
|
453
|
+
<td class="col-md-4">
|
|
454
|
+
<div class="io-description"><p>A custom template for the available file actions</p>
|
|
455
|
+
</div>
|
|
456
|
+
</td>
|
|
457
|
+
</tr>
|
|
458
|
+
</tbody>
|
|
459
|
+
</table>
|
|
402
460
|
<table class="table table-sm table-bordered">
|
|
403
461
|
<tbody>
|
|
404
462
|
<tr>
|
|
@@ -415,12 +473,39 @@
|
|
|
415
473
|
</tr>
|
|
416
474
|
<tr>
|
|
417
475
|
<td class="col-md-2" colspan="2">
|
|
418
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
476
|
+
<div class="io-line">Defined in <a href="" data-line="86" class="link-to-prism">src/file-uploader/file.component.ts:86</a></div>
|
|
419
477
|
</td>
|
|
420
478
|
</tr>
|
|
421
479
|
<tr>
|
|
422
480
|
<td class="col-md-4">
|
|
423
481
|
<div class="io-description"><p>A single <code>FileItem</code> from the set of <code>FileItem</code>s</p>
|
|
482
|
+
</div>
|
|
483
|
+
</td>
|
|
484
|
+
</tr>
|
|
485
|
+
</tbody>
|
|
486
|
+
</table>
|
|
487
|
+
<table class="table table-sm table-bordered">
|
|
488
|
+
<tbody>
|
|
489
|
+
<tr>
|
|
490
|
+
<td class="col-md-4">
|
|
491
|
+
<a name="nameTpl"></a>
|
|
492
|
+
<b>nameTpl</b>
|
|
493
|
+
</td>
|
|
494
|
+
</tr>
|
|
495
|
+
<tr>
|
|
496
|
+
<td class="col-md-4">
|
|
497
|
+
<i>Type : </i> <code>TemplateRef<></code>
|
|
498
|
+
|
|
499
|
+
</td>
|
|
500
|
+
</tr>
|
|
501
|
+
<tr>
|
|
502
|
+
<td class="col-md-2" colspan="2">
|
|
503
|
+
<div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/file-uploader/file.component.ts:93</a></div>
|
|
504
|
+
</td>
|
|
505
|
+
</tr>
|
|
506
|
+
<tr>
|
|
507
|
+
<td class="col-md-4">
|
|
508
|
+
<div class="io-description"><p>A custom template for the file name</p>
|
|
424
509
|
</div>
|
|
425
510
|
</td>
|
|
426
511
|
</tr>
|
|
@@ -447,7 +532,7 @@
|
|
|
447
532
|
</tr>
|
|
448
533
|
<tr>
|
|
449
534
|
<td class="col-md-2" colspan="2">
|
|
450
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
535
|
+
<div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/file-uploader/file.component.ts:88</a></div>
|
|
451
536
|
</td>
|
|
452
537
|
</tr>
|
|
453
538
|
</tbody>
|
|
@@ -473,7 +558,7 @@
|
|
|
473
558
|
</tr>
|
|
474
559
|
<tr>
|
|
475
560
|
<td class="col-md-2" colspan="2">
|
|
476
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
561
|
+
<div class="io-line">Defined in <a href="" data-line="82" class="link-to-prism">src/file-uploader/file.component.ts:82</a></div>
|
|
477
562
|
</td>
|
|
478
563
|
</tr>
|
|
479
564
|
<tr>
|
|
@@ -503,7 +588,7 @@
|
|
|
503
588
|
</tr>
|
|
504
589
|
<tr>
|
|
505
590
|
<td class="col-md-2" colspan="2">
|
|
506
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
591
|
+
<div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/file-uploader/file.component.ts:100</a></div>
|
|
507
592
|
</td>
|
|
508
593
|
</tr>
|
|
509
594
|
</tbody>
|
|
@@ -534,7 +619,7 @@
|
|
|
534
619
|
</tr>
|
|
535
620
|
<tr>
|
|
536
621
|
<td class="col-md-4">
|
|
537
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
622
|
+
<div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/file-uploader/file.component.ts:102</a></div>
|
|
538
623
|
</td>
|
|
539
624
|
</tr>
|
|
540
625
|
|
|
@@ -560,7 +645,7 @@
|
|
|
560
645
|
</tr>
|
|
561
646
|
<tr>
|
|
562
647
|
<td class="col-md-4">
|
|
563
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
648
|
+
<div class="io-line">Defined in <a href="" data-line="104" class="link-to-prism">src/file-uploader/file.component.ts:104</a></div>
|
|
564
649
|
</td>
|
|
565
650
|
</tr>
|
|
566
651
|
|
|
@@ -586,7 +671,7 @@
|
|
|
586
671
|
</tr>
|
|
587
672
|
<tr>
|
|
588
673
|
<td class="col-md-4">
|
|
589
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
674
|
+
<div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/file-uploader/file.component.ts:116</a></div>
|
|
590
675
|
</td>
|
|
591
676
|
</tr>
|
|
592
677
|
|
|
@@ -612,7 +697,7 @@
|
|
|
612
697
|
</tr>
|
|
613
698
|
<tr>
|
|
614
699
|
<td class="col-md-4">
|
|
615
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
700
|
+
<div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/file-uploader/file.component.ts:112</a></div>
|
|
616
701
|
</td>
|
|
617
702
|
</tr>
|
|
618
703
|
|
|
@@ -638,7 +723,7 @@
|
|
|
638
723
|
</tr>
|
|
639
724
|
<tr>
|
|
640
725
|
<td class="col-md-4">
|
|
641
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
726
|
+
<div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/file-uploader/file.component.ts:108</a></div>
|
|
642
727
|
</td>
|
|
643
728
|
</tr>
|
|
644
729
|
|
|
@@ -653,6 +738,71 @@
|
|
|
653
738
|
<h3 id="methods">
|
|
654
739
|
Methods
|
|
655
740
|
</h3>
|
|
741
|
+
<table class="table table-sm table-bordered">
|
|
742
|
+
<tbody>
|
|
743
|
+
<tr>
|
|
744
|
+
<td class="col-md-4">
|
|
745
|
+
<a name="isTemplate"></a>
|
|
746
|
+
<span class="name">
|
|
747
|
+
<span class="modifier">Public</span>
|
|
748
|
+
<span ><b>isTemplate</b></span>
|
|
749
|
+
<a href="#isTemplate"><span class="icon ion-ios-link"></span></a>
|
|
750
|
+
</span>
|
|
751
|
+
</td>
|
|
752
|
+
</tr>
|
|
753
|
+
<tr>
|
|
754
|
+
<td class="col-md-4">
|
|
755
|
+
<span class="modifier-icon icon ion-ios-reset"></span>
|
|
756
|
+
<code>isTemplate(value)</code>
|
|
757
|
+
</td>
|
|
758
|
+
</tr>
|
|
759
|
+
|
|
760
|
+
|
|
761
|
+
<tr>
|
|
762
|
+
<td class="col-md-4">
|
|
763
|
+
<div class="io-line">Defined in <a href="" data-line="122"
|
|
764
|
+
class="link-to-prism">src/file-uploader/file.component.ts:122</a></div>
|
|
765
|
+
</td>
|
|
766
|
+
</tr>
|
|
767
|
+
|
|
768
|
+
|
|
769
|
+
<tr>
|
|
770
|
+
<td class="col-md-4">
|
|
771
|
+
|
|
772
|
+
<div class="io-description">
|
|
773
|
+
<b>Parameters :</b>
|
|
774
|
+
|
|
775
|
+
<table class="params">
|
|
776
|
+
<thead>
|
|
777
|
+
<tr>
|
|
778
|
+
<td>Name</td>
|
|
779
|
+
<td>Optional</td>
|
|
780
|
+
</tr>
|
|
781
|
+
</thead>
|
|
782
|
+
<tbody>
|
|
783
|
+
<tr>
|
|
784
|
+
<td>value</td>
|
|
785
|
+
|
|
786
|
+
<td>
|
|
787
|
+
No
|
|
788
|
+
</td>
|
|
789
|
+
|
|
790
|
+
|
|
791
|
+
</tr>
|
|
792
|
+
</tbody>
|
|
793
|
+
</table>
|
|
794
|
+
</div>
|
|
795
|
+
<div class="io-description">
|
|
796
|
+
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
797
|
+
|
|
798
|
+
</div>
|
|
799
|
+
<div class="io-description">
|
|
800
|
+
|
|
801
|
+
</div>
|
|
802
|
+
</td>
|
|
803
|
+
</tr>
|
|
804
|
+
</tbody>
|
|
805
|
+
</table>
|
|
656
806
|
<table class="table table-sm table-bordered">
|
|
657
807
|
<tbody>
|
|
658
808
|
<tr>
|
|
@@ -673,8 +823,8 @@
|
|
|
673
823
|
|
|
674
824
|
<tr>
|
|
675
825
|
<td class="col-md-4">
|
|
676
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
677
|
-
class="link-to-prism">src/file-uploader/file.component.ts:
|
|
826
|
+
<div class="io-line">Defined in <a href="" data-line="126"
|
|
827
|
+
class="link-to-prism">src/file-uploader/file.component.ts:126</a></div>
|
|
678
828
|
</td>
|
|
679
829
|
</tr>
|
|
680
830
|
|
|
@@ -724,7 +874,7 @@
|
|
|
724
874
|
</tr>
|
|
725
875
|
<tr>
|
|
726
876
|
<td class="col-md-4">
|
|
727
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
877
|
+
<div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/file-uploader/file.component.ts:102</a></div>
|
|
728
878
|
</td>
|
|
729
879
|
</tr>
|
|
730
880
|
|
|
@@ -753,7 +903,7 @@
|
|
|
753
903
|
</tr>
|
|
754
904
|
<tr>
|
|
755
905
|
<td class="col-md-4">
|
|
756
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
906
|
+
<div class="io-line">Defined in <a href="" data-line="104" class="link-to-prism">src/file-uploader/file.component.ts:104</a></div>
|
|
757
907
|
</td>
|
|
758
908
|
</tr>
|
|
759
909
|
|
|
@@ -775,7 +925,7 @@
|
|
|
775
925
|
</tr>
|
|
776
926
|
<tr>
|
|
777
927
|
<td class="col-md-4">
|
|
778
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
928
|
+
<div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/file-uploader/file.component.ts:108</a></div>
|
|
779
929
|
</td>
|
|
780
930
|
</tr>
|
|
781
931
|
|
|
@@ -797,7 +947,7 @@
|
|
|
797
947
|
</tr>
|
|
798
948
|
<tr>
|
|
799
949
|
<td class="col-md-4">
|
|
800
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
950
|
+
<div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/file-uploader/file.component.ts:112</a></div>
|
|
801
951
|
</td>
|
|
802
952
|
</tr>
|
|
803
953
|
|
|
@@ -819,7 +969,7 @@
|
|
|
819
969
|
</tr>
|
|
820
970
|
<tr>
|
|
821
971
|
<td class="col-md-4">
|
|
822
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
972
|
+
<div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/file-uploader/file.component.ts:116</a></div>
|
|
823
973
|
</td>
|
|
824
974
|
</tr>
|
|
825
975
|
|
|
@@ -832,11 +982,12 @@
|
|
|
832
982
|
<div class="tab-pane fade tab-source-code" id="source">
|
|
833
983
|
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
|
|
834
984
|
Component,
|
|
835
|
-
Input,
|
|
836
|
-
Output,
|
|
837
985
|
EventEmitter,
|
|
838
986
|
HostBinding,
|
|
839
|
-
|
|
987
|
+
Input,
|
|
988
|
+
OnDestroy,
|
|
989
|
+
Output,
|
|
990
|
+
TemplateRef
|
|
840
991
|
} from "@angular/core";
|
|
841
992
|
|
|
842
993
|
import { I18n } from "carbon-components-angular/i18n";
|
|
@@ -845,33 +996,47 @@ import { FileItem } from "./file-item.interface";
|
|
|
845
996
|
@Component({
|
|
846
997
|
selector: "cds-file, ibm-file",
|
|
847
998
|
template: `
|
|
848
|
-
<p class="cds--file-filename" [title]="fileItem.file.name">
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
999
|
+
<p class="cds--file-filename" [title]="fileItem.file.name">
|
|
1000
|
+
<ng-template
|
|
1001
|
+
*ngIf="isTemplate(nameTpl); else defaultName"
|
|
1002
|
+
[ngTemplateOutlet]="nameTpl"
|
|
1003
|
+
[ngTemplateOutletContext]="{ $implicit: fileItem }">
|
|
1004
|
+
</ng-template>
|
|
1005
|
+
<ng-template #defaultName>{{ fileItem.file.name }}</ng-template>
|
|
1006
|
+
</p>
|
|
1007
|
+
<span *ngIf="fileItem.state === 'edit'" class="cds--file__state-container">
|
|
852
1008
|
<svg
|
|
853
1009
|
*ngIf="isInvalidText"
|
|
854
1010
|
cdsIcon="warning--filled"
|
|
855
1011
|
class="cds--file--invalid"
|
|
856
1012
|
size="16">
|
|
857
1013
|
</svg>
|
|
858
|
-
<
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
1014
|
+
<ng-template
|
|
1015
|
+
*ngIf="isTemplate(actionsTpl); else defaultActions"
|
|
1016
|
+
[ngTemplateOutlet]="actionsTpl">
|
|
1017
|
+
</ng-template>
|
|
1018
|
+
<ng-template #defaultActions>
|
|
1019
|
+
<button
|
|
1020
|
+
type="button"
|
|
1021
|
+
cdsButton="ghost"
|
|
1022
|
+
iconOnly="true"
|
|
1023
|
+
[size]="size"
|
|
1024
|
+
[attr.aria-label]="translations.REMOVE_BUTTON"
|
|
1025
|
+
(click)="remove.emit()"
|
|
1026
|
+
(keyup.enter)="remove.emit()"
|
|
1027
|
+
(keyup.space)="remove.emit()">
|
|
1028
|
+
<svg cdsIcon="trash-can" size="16"></svg>
|
|
1029
|
+
</button>
|
|
1030
|
+
</ng-template>
|
|
868
1031
|
</span>
|
|
869
1032
|
<span *ngIf="fileItem.state === 'upload'">
|
|
870
1033
|
<div class="cds--inline-loading__animation">
|
|
871
1034
|
<cds-loading size="sm"></cds-loading>
|
|
872
1035
|
</div>
|
|
873
1036
|
</span>
|
|
874
|
-
<span
|
|
1037
|
+
<span
|
|
1038
|
+
*ngIf="fileItem.state === 'complete'"
|
|
1039
|
+
class="cds--file__state-container">
|
|
875
1040
|
<svg
|
|
876
1041
|
cdsIcon="checkmark--filled"
|
|
877
1042
|
size="16"
|
|
@@ -879,9 +1044,16 @@ import { FileItem } from "./file-item.interface";
|
|
|
879
1044
|
[ariaLabel]="translations.CHECKMARK">
|
|
880
1045
|
</svg>
|
|
881
1046
|
</span>
|
|
882
|
-
<div
|
|
883
|
-
|
|
884
|
-
|
|
1047
|
+
<div
|
|
1048
|
+
class="cds--form-requirement"
|
|
1049
|
+
role="alert"
|
|
1050
|
+
*ngIf="fileItem.invalid">
|
|
1051
|
+
<div class="cds--form-requirement__title">
|
|
1052
|
+
{{ fileItem.invalidTitle }}
|
|
1053
|
+
</div>
|
|
1054
|
+
<p class="cds--form-requirement__supplement">
|
|
1055
|
+
{{ fileItem.invalidText }}
|
|
1056
|
+
</p>
|
|
885
1057
|
</div>
|
|
886
1058
|
`
|
|
887
1059
|
})
|
|
@@ -897,6 +1069,16 @@ export class FileComponent implements OnDestroy {
|
|
|
897
1069
|
|
|
898
1070
|
@Input() size: "sm" | "md" | "lg" = "lg";
|
|
899
1071
|
|
|
1072
|
+
/**
|
|
1073
|
+
* A custom template for the file name
|
|
1074
|
+
*/
|
|
1075
|
+
@Input() nameTpl: TemplateRef<unknown>;
|
|
1076
|
+
|
|
1077
|
+
/**
|
|
1078
|
+
* A custom template for the available file actions
|
|
1079
|
+
*/
|
|
1080
|
+
@Input() actionsTpl: TemplateRef<unknown>;
|
|
1081
|
+
|
|
900
1082
|
@Output() remove = new EventEmitter();
|
|
901
1083
|
|
|
902
1084
|
@HostBinding("class.cds--file__selected-file") selectedFile = true;
|
|
@@ -916,8 +1098,13 @@ export class FileComponent implements OnDestroy {
|
|
|
916
1098
|
@HostBinding("class.cds--file__selected-file--lg") get fileSizeLarge() {
|
|
917
1099
|
return this.size === "lg";
|
|
918
1100
|
}
|
|
1101
|
+
|
|
919
1102
|
constructor(protected i18n: I18n) {}
|
|
920
1103
|
|
|
1104
|
+
public isTemplate(value: unknown): boolean {
|
|
1105
|
+
return value instanceof TemplateRef;
|
|
1106
|
+
}
|
|
1107
|
+
|
|
921
1108
|
ngOnDestroy() {
|
|
922
1109
|
this.remove.emit();
|
|
923
1110
|
}
|
|
@@ -952,7 +1139,7 @@ export class FileComponent implements OnDestroy {
|
|
|
952
1139
|
<script src="../js/libs/htmlparser.js"></script>
|
|
953
1140
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
954
1141
|
<script>
|
|
955
|
-
var COMPONENT_TEMPLATE = '<div><p class="cds--file-filename" [title]="fileItem.file.name">{{fileItem.file.name}}</p><span
|
|
1142
|
+
var COMPONENT_TEMPLATE = '<div><p class="cds--file-filename" [title]="fileItem.file.name"> <ng-template *ngIf="isTemplate(nameTpl); else defaultName" [ngTemplateOutlet]="nameTpl" [ngTemplateOutletContext]="{ $implicit: fileItem }"> </ng-template> <ng-template #defaultName>{{ fileItem.file.name }}</ng-template></p><span *ngIf="fileItem.state === \'edit\'" class="cds--file__state-container"> <svg *ngIf="isInvalidText" cdsIcon="warning--filled" class="cds--file--invalid" size="16"> </svg> <ng-template *ngIf="isTemplate(actionsTpl); else defaultActions" [ngTemplateOutlet]="actionsTpl"> </ng-template> <ng-template #defaultActions> <button type="button" cdsButton="ghost" iconOnly="true" [size]="size" [attr.aria-label]="translations.REMOVE_BUTTON" (click)="remove.emit()" (keyup.enter)="remove.emit()" (keyup.space)="remove.emit()"> <svg cdsIcon="trash-can" size="16"></svg> </button> </ng-template></span><span *ngIf="fileItem.state === \'upload\'"> <div class="cds--inline-loading__animation"> <cds-loading size="sm"></cds-loading> </div></span><span *ngIf="fileItem.state === \'complete\'" class="cds--file__state-container"> <svg cdsIcon="checkmark--filled" size="16" class="cds--file-complete" [ariaLabel]="translations.CHECKMARK"> </svg></span><div class="cds--form-requirement" role="alert" *ngIf="fileItem.invalid"> <div class="cds--form-requirement__title"> {{ fileItem.invalidTitle }} </div> <p class="cds--form-requirement__supplement"> {{ fileItem.invalidText }} </p></div> </div>'
|
|
956
1143
|
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': 'ComboButtonComponent', 'selector': 'cds-combo-button'},{'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-menu, cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-menu-group, cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-menu-item, 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': 'MenuButtonComponent', 'selector': 'cds-menu-button'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'PasswordInputLabelComponent', 'selector': 'cds-password-label, ibm-password-label'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndicator', 'selector': 'cds-progress-indicator, ibm-progress-indicator'},{'name': 'Radio', 'selector': 'cds-radio, ibm-radio'},{'name': 'RadioGroup', 'selector': 'cds-radio-group, ibm-radio-group'},{'name': 'Search', 'selector': 'cds-search, ibm-search'},{'name': 'Select', 'selector': 'cds-select, ibm-select'},{'name': 'SelectionTile', 'selector': 'cds-selection-tile, ibm-selection-tile'},{'name': 'SideNav', 'selector': 'cds-sidenav, ibm-sidenav'},{'name': 'SideNavItem', 'selector': 'cds-sidenav-item, ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'cds-sidenav-menu, ibm-sidenav-menu'},{'name': 'SkeletonPlaceholder', 'selector': 'cds-skeleton-placeholder, ibm-skeleton-placeholder'},{'name': 'SkeletonText', 'selector': 'cds-skeleton-text, ibm-skeleton-text'},{'name': 'Slider', 'selector': 'cds-slider, ibm-slider'},{'name': 'StructuredList', 'selector': 'cds-structured-list, ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'cds-switcher-list, ibm-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'cds-switcher-list-item, ibm-switcher-list-item'},{'name': 'Tab', 'selector': 'cds-tab, ibm-tab'},{'name': 'TabHeaderGroup', 'selector': 'cds-tab-header-group, ibm-tab-header-group'},{'name': 'TabHeaders', 'selector': 'cds-tab-headers, ibm-tab-headers'},{'name': 'Table', 'selector': 'cds-table, ibm-table'},{'name': 'TableBody', 'selector': '[cdsTableBody], [ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[cdsTableCheckbox], [ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'cds-table-container, ibm-table-container'},{'name': 'TableData', 'selector': '[cdsTableData], [ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[cdsTableExpandButton], [ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[cdsTableExpandedRow], [ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[cdsTableHead], [ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[cdsTableHeadCell], [ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'cds-table-header, ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[cdsTableHeadExpand], [ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[cdsTableRadio], [ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[cdsTableRow], [ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'cds-table-toolbar, ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'cds-table-toolbar-actions, ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'cds-table-toolbar-content, ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'cds-table-toolbar-search, ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'cds-tabs, ibm-tabs'},{'name': 'TabSkeleton', 'selector': 'cds-tabs-skeleton, ibm-tabs-skeleton'},{'name': 'Tag', 'selector': 'cds-tag, ibm-tag'},{'name': 'TagFilter', 'selector': 'cds-tag-filter, ibm-tag-filter'},{'name': 'TagOperationalComponent', 'selector': 'cds-tag-operational, ibm-tag-operational'},{'name': 'TagSelectableComponent', 'selector': 'cds-tag-selectable, ibm-tag-selectable'},{'name': 'TextareaLabelComponent', 'selector': 'cds-textarea-label, ibm-textarea-label'},{'name': 'TextInputLabelComponent', 'selector': 'cds-text-label, ibm-text-label'},{'name': 'Tile', 'selector': 'cds-tile, ibm-tile'},{'name': 'TileGroup', 'selector': 'cds-tile-group, ibm-tile-group'},{'name': 'TimePicker', 'selector': 'cds-timepicker, ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'cds-timepicker-select, ibm-timepicker-select'},{'name': 'Toast', 'selector': 'cds-toast, ibm-toast'},{'name': 'Toggle', 'selector': 'cds-toggle, ibm-toggle'},{'name': 'Toggletip', 'selector': 'cds-toggletip, ibm-toggletip'},{'name': 'Tooltip', 'selector': 'cds-tooltip, ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'cds-tooltip-definition, ibm-tooltip-definition'},{'name': 'TreeNodeComponent', 'selector': 'cds-tree-node'},{'name': 'TreeViewComponent', 'selector': 'cds-tree-view'}];
|
|
957
1144
|
var DIRECTIVES = [{'name': 'AbstractDropdownView', 'selector': '[cdsAbstractDropdownView], [ibmAbstractDropdownView]'},{'name': 'ActionableButton', 'selector': '[cdsActionableButton], [ibmActionableButton]'},{'name': 'ActionableSubtitle', 'selector': '[cdsActionableSubtitle], [ibmActionableSubtitle]'},{'name': 'ActionableTitle', 'selector': '[cdsActionableTitle], [ibmActionableTitle]'},{'name': 'BaseModal', 'selector': '[cdsBaseModal], [ibmBaseModal]'},{'name': 'Button', 'selector': '[cdsButton], [ibmButton]'},{'name': 'ClickableTileIconDirective', 'selector': '[cdsClickableTileIcon], [ibmClickableTileIcon]'},{'name': 'ColumnDirective', 'selector': '[cdsCol], [ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[cdsContentOption], [ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[cdsDialog], [ibmDialog]'},{'name': 'ExpandableTileAboveFoldDirective', 'selector': '[cdsAboveFold], [ibmAboveFold]'},{'name': 'ExpandableTileBelowFoldDirective', 'selector': '[cdsBelowFold], [ibmBelowFold]'},{'name': 'ExpandedRowHover', 'selector': '[cdsExpandedRowHover], [ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[cdsGrid], [ibmGrid]'},{'name': 'IconDirective', 'selector': '[cdsIcon], [ibmIcon]'},{'name': 'LayerDirective', 'selector': '[cdsLayer], [ibmLayer]'},{'name': 'Link', 'selector': '[cdsLink], [ibmLink]'},{'name': 'LinkIconDirective', 'selector': '[ibmLinkIcon], [cdsLinkIcon]'},{'name': 'List', 'selector': '[cdsList], [ibmList]'},{'name': 'ListItemDirective', 'selector': '[cdsListItem], [ibmListItem]'},{'name': 'ModalContent', 'selector': '[cdsModalContent], [ibmModalContent]'},{'name': 'ModalContentText', 'selector': '[cdsModalContentText], [ibmModalContentText]'},{'name': 'ModalHeaderHeading', 'selector': '[cdsModalHeaderHeading], [ibmModalHeaderHeading]'},{'name': 'ModalHeaderLabel', 'selector': '[cdsModalHeaderLabel], [ibmModalHeaderLabel]'},{'name': 'NotificationSubtitle', 'selector': '[cdsNotificationSubtitle], [ibmNotificationSubtitle]'},{'name': 'NotificationTitle', 'selector': '[cdsNotificationTitle], [ibmNotificationTitle]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[cdsOverflowMenu], [ibmOverflowMenu]'},{'name': 'PasswordInput', 'selector': '[cdsPassword], [ibmPassword]'},{'name': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'name': 'RouterLinkExtendedDirective', 'selector': '[routerLink]'},{'name': 'RowDirective', 'selector': '[cdsRow], [ibmRow]'},{'name': 'ScrollableList', 'selector': '[cdsScrollableList], [ibmScrollableList]'},{'name': 'StackDirective', 'selector': '[cdsStack], [ibmStack]'},{'name': 'TabHeader', 'selector': '[cdsTabHeader], [ibmTabHeader]'},{'name': 'TableDirective', 'selector': '[cdsTable], [ibmTable]'},{'name': 'TableHeadCellLabel', 'selector': '[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]'},{'name': 'TableHeaderDescription', 'selector': '[cdsTableHeaderDescription], [ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[cdsTableHeaderTitle], [ibmTableHeaderTitle]'},{'name': 'TagIconDirective', 'selector': '[cdsTagIcon], [ibmTagIcon]'},{'name': 'TextArea', 'selector': '[cdsTextArea], [ibmTextArea]'},{'name': 'TextInput', 'selector': '[cdsText], [ibmText]'},{'name': 'ThemeDirective', 'selector': '[cdsTheme], [ibmTheme]'},{'name': 'ToastCaption', 'selector': '[cdsToastCaption], [ibmToastCaption]'},{'name': 'ToastSubtitle', 'selector': '[cdsToastSubtitle], [ibmToastSubtitle]'},{'name': 'ToastTitle', 'selector': '[cdsToastTitle], [ibmToastTitle]'},{'name': 'ToggletipAction', 'selector': '[cdsToggletipAction], [ibmToggletipAction]'},{'name': 'ToggletipButton', 'selector': '[cdsToggletipButton], [ibmToggletipButton]'},{'name': 'ToggletipContent', 'selector': '[cdsToggletipContent], [ibmToggletipContent]'},{'name': 'ToggletipLabel', 'selector': '[cdsToggletipLabel], [ibmToggletipLabel]'}];
|
|
958
1145
|
var ACTUAL_COMPONENT = {'name': 'FileComponent'};
|