carbon-components-angular 5.14.8 → 5.14.10

package/docs/documentation/modules/TimePickerModule.html

@@ -46,71 +46,67 @@
 <!-- Generated by graphviz version 2.47.0 (20210316.0004)
  -->
 <!-- Title: dependencies Pages: 1 -->
-<svg width="686pt" height="396pt"
- viewBox="0.00 0.00 686.00 395.59" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="870pt" height="396pt"
+ viewBox="0.00 0.00 870.00 395.59" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 391.59)">
 <title>dependencies</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-391.59 682,-391.59 682,4 -4,4"/>
-<text text-anchor="start" x="318.01" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
-<polygon fill="#ffffb3" stroke="transparent" points="105,-10 105,-30 125,-30 125,-10 105,-10"/>
-<text text-anchor="start" x="128.63" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Declarations</text>
-<polygon fill="#8dd3c7" stroke="transparent" points="218,-10 218,-30 238,-30 238,-10 218,-10"/>
-<text text-anchor="start" x="241.73" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Module</text>
-<polygon fill="#80b1d3" stroke="transparent" points="304,-10 304,-30 324,-30 324,-10 304,-10"/>
-<text text-anchor="start" x="327.78" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Bootstrap</text>
-<polygon fill="#fdb462" stroke="transparent" points="401,-10 401,-30 421,-30 421,-10 401,-10"/>
-<text text-anchor="start" x="424.67" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Providers</text>
-<polygon fill="#fb8072" stroke="transparent" points="497,-10 497,-30 517,-30 517,-10 497,-10"/>
-<text text-anchor="start" x="520.73" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Exports</text>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-391.59 866,-391.59 866,4 -4,4"/>
+<text text-anchor="start" x="410.01" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
+<polygon fill="#ffffb3" stroke="transparent" points="197,-10 197,-30 217,-30 217,-10 197,-10"/>
+<text text-anchor="start" x="220.63" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Declarations</text>
+<polygon fill="#8dd3c7" stroke="transparent" points="310,-10 310,-30 330,-30 330,-10 310,-10"/>
+<text text-anchor="start" x="333.73" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Module</text>
+<polygon fill="#80b1d3" stroke="transparent" points="396,-10 396,-30 416,-30 416,-10 396,-10"/>
+<text text-anchor="start" x="419.78" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Bootstrap</text>
+<polygon fill="#fdb462" stroke="transparent" points="493,-10 493,-30 513,-30 513,-10 493,-10"/>
+<text text-anchor="start" x="516.67" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Providers</text>
+<polygon fill="#fb8072" stroke="transparent" points="589,-10 589,-30 609,-30 609,-10 589,-10"/>
+<text text-anchor="start" x="612.73" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Exports</text>
 <g id="clust1" class="cluster">
 <title>cluster_TimePickerModule</title>
-<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-379.59 670,-379.59 670,-70 8,-70"/>
-</g>
-<g id="clust2" class="cluster">
-<title>cluster_TimePickerModule_declarations</title>
-<polygon fill="none" stroke="black" points="290,-189.59 290,-241.59 388,-241.59 388,-189.59 290,-189.59"/>
+<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-379.59 854,-379.59 854,-70 8,-70"/>
 </g>
 <g id="clust3" class="cluster">
 <title>cluster_TimePickerModule_TimePicker_providers</title>
-<polygon fill="none" stroke="black" points="16,-78 16,-176.59 662,-176.59 662,-78 16,-78"/>
+<polygon fill="none" stroke="black" points="200,-78 200,-241.59 846,-241.59 846,-78 200,-78"/>
 </g>
 <g id="clust5" class="cluster">
 <title>cluster_TimePickerModule_exports</title>
-<polygon fill="none" stroke="black" points="216,-319.59 216,-371.59 316,-371.59 316,-319.59 216,-319.59"/>
+<polygon fill="none" stroke="black" points="195,-319.59 195,-371.59 295,-371.59 295,-319.59 195,-319.59"/>
 </g>
 <g id="clust4" class="cluster">
 <title>cluster_TimePickerModule_imports</title>
-<polygon fill="none" stroke="black" points="106,-189.59 106,-241.59 282,-241.59 282,-189.59 106,-189.59"/>
+<polygon fill="none" stroke="black" points="16,-189.59 16,-241.59 192,-241.59 192,-189.59 16,-189.59"/>
 </g>
 <!-- TimePicker -->
 <g id="node1" class="node">
 <title>TimePicker</title>
-<polygon fill="#ffffb3" stroke="black" points="379.81,-233.59 298.19,-233.59 298.19,-197.59 379.81,-197.59 379.81,-233.59"/>
-<text text-anchor="middle" x="339" y="-211.39" font-family="Times,serif" font-size="14.00">TimePicker</text>
+<polygon fill="#ffffb3" stroke="black" points="426.81,-233.59 345.19,-233.59 345.19,-197.59 426.81,-197.59 426.81,-233.59"/>
+<text text-anchor="middle" x="386" y="-211.39" font-family="Times,serif" font-size="14.00">TimePicker</text>
 </g>
 <!-- TimePickerModule -->
 <g id="node2" class="node">
 <title>TimePickerModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="328.36,-298.59 325.36,-302.59 304.36,-302.59 301.36,-298.59 203.64,-298.59 203.64,-262.59 328.36,-262.59 328.36,-298.59"/>
-<text text-anchor="middle" x="266" y="-276.39" font-family="Times,serif" font-size="14.00">TimePickerModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="307.36,-298.59 304.36,-302.59 283.36,-302.59 280.36,-298.59 182.64,-298.59 182.64,-262.59 307.36,-262.59 307.36,-298.59"/>
+<text text-anchor="middle" x="245" y="-276.39" font-family="Times,serif" font-size="14.00">TimePickerModule</text>
 </g>
 <!-- TimePicker&#45;&gt;TimePickerModule -->
 <g id="edge1" class="edge">
 <title>TimePicker&#45;&gt;TimePickerModule</title>
-<path fill="none" stroke="black" d="M313.39,-233.7C313.39,-233.7 313.39,-252.58 313.39,-252.58"/>
-<polygon fill="black" stroke="black" points="309.89,-252.58 313.39,-262.58 316.89,-252.58 309.89,-252.58"/>
+<path fill="none" stroke="black" d="M386,-233.7C386,-252.93 386,-280.59 386,-280.59 386,-280.59 317.67,-280.59 317.67,-280.59"/>
+<polygon fill="black" stroke="black" points="317.67,-277.09 307.67,-280.59 317.67,-284.09 317.67,-277.09"/>
 </g>
 <!-- TimePicker  -->
 <g id="node5" class="node">
 <title>TimePicker </title>
-<polygon fill="#fb8072" stroke="black" points="308.31,-363.59 223.69,-363.59 223.69,-327.59 308.31,-327.59 308.31,-363.59"/>
-<text text-anchor="middle" x="266" y="-341.39" font-family="Times,serif" font-size="14.00">TimePicker </text>
+<polygon fill="#fb8072" stroke="black" points="287.31,-363.59 202.69,-363.59 202.69,-327.59 287.31,-327.59 287.31,-363.59"/>
+<text text-anchor="middle" x="245" y="-341.39" font-family="Times,serif" font-size="14.00">TimePicker </text>
 </g>
 <!-- TimePickerModule&#45;&gt;TimePicker  -->
 <g id="edge4" class="edge">
 <title>TimePickerModule&#45;&gt;TimePicker </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M266,-298.7C266,-298.7 266,-317.58 266,-317.58"/>
-<polygon fill="black" stroke="black" points="262.5,-317.58 266,-327.58 269.5,-317.58 262.5,-317.58"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M245,-298.7C245,-298.7 245,-317.58 245,-317.58"/>
+<polygon fill="black" stroke="black" points="241.5,-317.58 245,-327.58 248.5,-317.58 241.5,-317.58"/>
 </g>
 <!-- {
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TimePicker, multi: true
@@ -119,10 +115,10 @@
 <title>{
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TimePicker, multi: true
 }</title>
-<ellipse fill="#fdb462" stroke="black" cx="339" cy="-127.3" rx="314.66" ry="41.09"/>
-<text text-anchor="middle" x="339" y="-139.9" font-family="Times,serif" font-size="14.00">{</text>
-<text text-anchor="middle" x="339" y="-123.1" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TimePicker, multi: true</text>
-<text text-anchor="middle" x="339" y="-106.3" font-family="Times,serif" font-size="14.00">}</text>
+<ellipse fill="#fdb462" stroke="black" cx="523" cy="-127.3" rx="314.66" ry="41.09"/>
+<text text-anchor="middle" x="523" y="-139.9" font-family="Times,serif" font-size="14.00">{</text>
+<text text-anchor="middle" x="523" y="-123.1" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TimePicker, multi: true</text>
+<text text-anchor="middle" x="523" y="-106.3" font-family="Times,serif" font-size="14.00">}</text>
 </g>
 <!-- {
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TimePicker, multi: true
@@ -131,20 +127,20 @@
 <title>{
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TimePicker, multi: true
 }&#45;&gt;TimePicker</title>
-<path fill="none" stroke="black" d="M339,-168.6C339,-168.6 339,-187.26 339,-187.26"/>
-<polygon fill="black" stroke="black" points="335.5,-187.26 339,-197.26 342.5,-187.26 335.5,-187.26"/>
+<path fill="none" stroke="black" d="M386,-164.48C386,-164.48 386,-187.22 386,-187.22"/>
+<polygon fill="black" stroke="black" points="382.5,-187.22 386,-197.22 389.5,-187.22 382.5,-187.22"/>
 </g>
 <!-- TimePickerSelectModule -->
 <g id="node4" class="node">
 <title>TimePickerSelectModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="273.57,-233.59 270.57,-237.59 249.57,-237.59 246.57,-233.59 114.43,-233.59 114.43,-197.59 273.57,-197.59 273.57,-233.59"/>
-<text text-anchor="middle" x="194" y="-211.39" font-family="Times,serif" font-size="14.00">TimePickerSelectModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="183.57,-233.59 180.57,-237.59 159.57,-237.59 156.57,-233.59 24.43,-233.59 24.43,-197.59 183.57,-197.59 183.57,-233.59"/>
+<text text-anchor="middle" x="104" y="-211.39" font-family="Times,serif" font-size="14.00">TimePickerSelectModule</text>
 </g>
 <!-- TimePickerSelectModule&#45;&gt;TimePickerModule -->
 <g id="edge3" class="edge">
 <title>TimePickerSelectModule&#45;&gt;TimePickerModule</title>
-<path fill="none" stroke="black" d="M238.55,-233.7C238.55,-233.7 238.55,-252.58 238.55,-252.58"/>
-<polygon fill="black" stroke="black" points="235.05,-252.58 238.55,-262.58 242.05,-252.58 235.05,-252.58"/>
+<path fill="none" stroke="black" d="M183.57,-215.59C191.09,-215.59 195.98,-215.59 195.98,-215.59 195.98,-215.59 195.98,-252.48 195.98,-252.48"/>
+<polygon fill="black" stroke="black" points="192.48,-252.48 195.98,-262.48 199.48,-252.48 192.48,-252.48"/>
 </g>
 </g>
 </svg>

package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg

@@ -24,10 +24,6 @@
 <title>cluster_TimePickerSelectModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-379.59 938,-379.59 938,-70 8,-70"/>
 </g>
-<g id="clust5" class="cluster">
-<title>cluster_TimePickerSelectModule_exports</title>
-<polygon fill="none" stroke="black" points="110,-319.59 110,-371.59 246,-371.59 246,-319.59 110,-319.59"/>
-</g>
 <g id="clust3" class="cluster">
 <title>cluster_TimePickerSelectModule_TimePickerSelect_providers</title>
 <polygon fill="none" stroke="black" points="236,-78 236,-241.59 930,-241.59 930,-78 236,-78"/>
@@ -36,6 +32,10 @@
 <title>cluster_TimePickerSelectModule_imports</title>
 <polygon fill="none" stroke="black" points="16,-189.59 16,-241.59 228,-241.59 228,-189.59 16,-189.59"/>
 </g>
+<g id="clust5" class="cluster">
+<title>cluster_TimePickerSelectModule_exports</title>
+<polygon fill="none" stroke="black" points="110,-319.59 110,-371.59 246,-371.59 246,-319.59 110,-319.59"/>
+</g>
 <!-- TimePickerSelect -->
 <g id="node1" class="node">
 <title>TimePickerSelect</title>

package/docs/documentation/modules/TimePickerSelectModule.html

@@ -66,10 +66,6 @@
 <title>cluster_TimePickerSelectModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-379.59 938,-379.59 938,-70 8,-70"/>
 </g>
-<g id="clust5" class="cluster">
-<title>cluster_TimePickerSelectModule_exports</title>
-<polygon fill="none" stroke="black" points="110,-319.59 110,-371.59 246,-371.59 246,-319.59 110,-319.59"/>
-</g>
 <g id="clust3" class="cluster">
 <title>cluster_TimePickerSelectModule_TimePickerSelect_providers</title>
 <polygon fill="none" stroke="black" points="236,-78 236,-241.59 930,-241.59 930,-78 236,-78"/>
@@ -78,6 +74,10 @@
 <title>cluster_TimePickerSelectModule_imports</title>
 <polygon fill="none" stroke="black" points="16,-189.59 16,-241.59 228,-241.59 228,-189.59 16,-189.59"/>
 </g>
+<g id="clust5" class="cluster">
+<title>cluster_TimePickerSelectModule_exports</title>
+<polygon fill="none" stroke="black" points="110,-319.59 110,-371.59 246,-371.59 246,-319.59 110,-319.59"/>
+</g>
 <!-- TimePickerSelect -->
 <g id="node1" class="node">
 <title>TimePickerSelect</title>

package/docs/documentation/modules/ToggleModule/dependencies.svg

@@ -28,10 +28,6 @@
 <title>cluster_ToggleModule_declarations</title>
 <polygon fill="none" stroke="black" points="284,-189.59 284,-241.59 356,-241.59 356,-189.59 284,-189.59"/>
 </g>
-<g id="clust5" class="cluster">
-<title>cluster_ToggleModule_exports</title>
-<polygon fill="none" stroke="black" points="329,-319.59 329,-371.59 405,-371.59 405,-319.59 329,-319.59"/>
-</g>
 <g id="clust4" class="cluster">
 <title>cluster_ToggleModule_imports</title>
 <polygon fill="none" stroke="black" points="364,-189.59 364,-241.59 466,-241.59 466,-189.59 364,-189.59"/>
@@ -40,6 +36,10 @@
 <title>cluster_ToggleModule_Toggle_providers</title>
 <polygon fill="none" stroke="black" points="16,-78 16,-176.59 624,-176.59 624,-78 16,-78"/>
 </g>
+<g id="clust5" class="cluster">
+<title>cluster_ToggleModule_exports</title>
+<polygon fill="none" stroke="black" points="329,-319.59 329,-371.59 405,-371.59 405,-319.59 329,-319.59"/>
+</g>
 <!-- Toggle -->
 <g id="node1" class="node">
 <title>Toggle</title>

package/docs/documentation/modules/ToggleModule.html

@@ -70,10 +70,6 @@
 <title>cluster_ToggleModule_declarations</title>
 <polygon fill="none" stroke="black" points="284,-189.59 284,-241.59 356,-241.59 356,-189.59 284,-189.59"/>
 </g>
-<g id="clust5" class="cluster">
-<title>cluster_ToggleModule_exports</title>
-<polygon fill="none" stroke="black" points="329,-319.59 329,-371.59 405,-371.59 405,-319.59 329,-319.59"/>
-</g>
 <g id="clust4" class="cluster">
 <title>cluster_ToggleModule_imports</title>
 <polygon fill="none" stroke="black" points="364,-189.59 364,-241.59 466,-241.59 466,-189.59 364,-189.59"/>
@@ -82,6 +78,10 @@
 <title>cluster_ToggleModule_Toggle_providers</title>
 <polygon fill="none" stroke="black" points="16,-78 16,-176.59 624,-176.59 624,-78 16,-78"/>
 </g>
+<g id="clust5" class="cluster">
+<title>cluster_ToggleModule_exports</title>
+<polygon fill="none" stroke="black" points="329,-319.59 329,-371.59 405,-371.59 405,-319.59 329,-319.59"/>
+</g>
 <!-- Toggle -->
 <g id="node1" class="node">
 <title>Toggle</title>

package/docs/documentation/modules/ToggletipModule/dependencies.svg

@@ -28,14 +28,14 @@
 <title>cluster_ToggletipModule_imports</title>
 <polygon fill="none" stroke="black" points="617,-78 617,-130 739,-130 739,-78 617,-78"/>
 </g>
-<g id="clust2" class="cluster">
-<title>cluster_ToggletipModule_declarations</title>
-<polygon fill="none" stroke="black" points="16,-78 16,-130 609,-130 609,-78 16,-78"/>
-</g>
 <g id="clust9" class="cluster">
 <title>cluster_ToggletipModule_exports</title>
 <polygon fill="none" stroke="black" points="72,-208 72,-260 682,-260 682,-208 72,-208"/>
 </g>
+<g id="clust2" class="cluster">
+<title>cluster_ToggletipModule_declarations</title>
+<polygon fill="none" stroke="black" points="16,-78 16,-130 609,-130 609,-78 16,-78"/>
+</g>
 <!-- Toggletip -->
 <g id="node1" class="node">
 <title>Toggletip</title>

package/docs/documentation/modules/ToggletipModule.html

@@ -70,14 +70,14 @@
 <title>cluster_ToggletipModule_imports</title>
 <polygon fill="none" stroke="black" points="617,-78 617,-130 739,-130 739,-78 617,-78"/>
 </g>
-<g id="clust2" class="cluster">
-<title>cluster_ToggletipModule_declarations</title>
-<polygon fill="none" stroke="black" points="16,-78 16,-130 609,-130 609,-78 16,-78"/>
-</g>
 <g id="clust9" class="cluster">
 <title>cluster_ToggletipModule_exports</title>
 <polygon fill="none" stroke="black" points="72,-208 72,-260 682,-260 682,-208 72,-208"/>
 </g>
+<g id="clust2" class="cluster">
+<title>cluster_ToggletipModule_declarations</title>
+<polygon fill="none" stroke="black" points="16,-78 16,-130 609,-130 609,-78 16,-78"/>
+</g>
 <!-- Toggletip -->
 <g id="node1" class="node">
 <title>Toggletip</title>

package/docs/documentation/modules/UIShellModule/dependencies.svg

@@ -24,14 +24,14 @@
 <title>cluster_UIShellModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="13,-70 13,-268 483,-268 483,-70 13,-70"/>
 </g>
-<g id="clust4" class="cluster">
-<title>cluster_UIShellModule_exports</title>
-<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
-</g>
 <g id="clust3" class="cluster">
 <title>cluster_UIShellModule_imports</title>
 <polygon fill="none" stroke="black" points="21,-78 21,-130 475,-130 475,-78 21,-78"/>
 </g>
+<g id="clust4" class="cluster">
+<title>cluster_UIShellModule_exports</title>
+<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
+</g>
 <!-- HeaderModule -->
 <g id="node1" class="node">
 <title>HeaderModule</title>

package/docs/documentation/modules/UIShellModule.html

@@ -66,14 +66,14 @@
 <title>cluster_UIShellModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="13,-70 13,-268 483,-268 483,-70 13,-70"/>
 </g>
-<g id="clust4" class="cluster">
-<title>cluster_UIShellModule_exports</title>
-<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
-</g>
 <g id="clust3" class="cluster">
 <title>cluster_UIShellModule_imports</title>
 <polygon fill="none" stroke="black" points="21,-78 21,-130 475,-130 475,-78 21,-78"/>
 </g>
+<g id="clust4" class="cluster">
+<title>cluster_UIShellModule_exports</title>
+<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
+</g>
 <!-- HeaderModule -->
 <g id="node1" class="node">
 <title>HeaderModule</title>

package/docs/documentation.json

@@ -29458,7 +29458,7 @@
         },
         {
             "name": "FileComponent",
-            "id": "component-FileComponent-14583c0551a7a5b1e831de36bdac6825e2707f59bc06c157a24a2db3217df7dba21a8778a2d1cef86e847266896c2bb0156c8ced9b9374be63307e1497ba0e0e",
+            "id": "component-FileComponent-5dd02c14d1b5b94175eb2f5541aef2631a5238d8a357cc189f01382f7b55c5556a39fd590b189d01110ab2519bcb6cfb8bc62537a01e32920509e9fea450d407",
             "file": "src/file-uploader/file.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -29468,7 +29468,7 @@
             "selector": "cds-file, ibm-file",
             "styleUrls": [],
             "styles": [],
-            "template": "<p class=\"cds--file-filename\" [title]=\"fileItem.file.name\">{{fileItem.file.name}}</p>\n<span\n\t*ngIf=\"fileItem.state === 'edit'\"\n\tclass=\"cds--file__state-container\">\n\t<svg\n\t\t*ngIf=\"isInvalidText\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tclass=\"cds--file--invalid\"\n\t\tsize=\"16\">\n\t</svg>\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"cds--file-close\"\n\t\t[attr.aria-label]=\"translations.REMOVE_BUTTON\"\n\t\ttabindex=\"0\"\n\t\t(click)=\"remove.emit()\"\n\t\t(keyup.enter)=\"remove.emit()\"\n\t\t(keyup.space)=\"remove.emit()\">\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</span>\n<span *ngIf=\"fileItem.state === 'upload'\">\n\t<div class=\"cds--inline-loading__animation\">\n\t\t<cds-loading size=\"sm\"></cds-loading>\n\t</div>\n</span>\n<span *ngIf=\"fileItem.state === 'complete'\" class=\"cds--file__state-container\">\n\t<svg\n\t\tcdsIcon=\"checkmark--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--file-complete\"\n\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t</svg>\n</span>\n<div class=\"cds--form-requirement\" *ngIf=\"fileItem.invalid\">\n\t<div class=\"cds--form-requirement__title\">{{fileItem.invalidTitle}}</div>\n\t<p class=\"cds--form-requirement__supplement\">{{fileItem.invalidText}}</p>\n</div>\n\t",
+            "template": "<p class=\"cds--file-filename\" [title]=\"fileItem.file.name\">{{fileItem.file.name}}</p>\n<span\n\t*ngIf=\"fileItem.state === 'edit'\"\n\tclass=\"cds--file__state-container\">\n\t<svg\n\t\t*ngIf=\"isInvalidText\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tclass=\"cds--file--invalid\"\n\t\tsize=\"16\">\n\t</svg>\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"cds--file-close\"\n\t\t[attr.aria-label]=\"translations.REMOVE_BUTTON\"\n\t\ttabindex=\"0\"\n\t\t(click)=\"remove.emit()\"\n\t\t(keyup.enter)=\"remove.emit()\"\n\t\t(keyup.space)=\"remove.emit()\">\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</span>\n<span *ngIf=\"fileItem.state === 'upload'\">\n\t<div class=\"cds--inline-loading__animation\">\n\t\t<cds-loading size=\"sm\"></cds-loading>\n\t</div>\n</span>\n<span *ngIf=\"fileItem.state === 'complete'\" class=\"cds--file__state-container\">\n\t<svg\n\t\tcdsIcon=\"checkmark--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--file-complete\"\n\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t</svg>\n</span>\n<div class=\"cds--form-requirement\" role=\"alert\" *ngIf=\"fileItem.invalid\">\n\t<div class=\"cds--form-requirement__title\">{{fileItem.invalidTitle}}</div>\n\t<p class=\"cds--form-requirement__supplement\">{{fileItem.invalidText}}</p>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -29587,7 +29587,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tOnDestroy\n} from \"@angular/core\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\n@Component({\n\tselector: \"cds-file, ibm-file\",\n\ttemplate: `\n\t\t<p class=\"cds--file-filename\" [title]=\"fileItem.file.name\">{{fileItem.file.name}}</p>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'edit'\"\n\t\t\tclass=\"cds--file__state-container\">\n\t\t\t<svg\n\t\t\t\t*ngIf=\"isInvalidText\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tclass=\"cds--file--invalid\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cds--file-close\"\n\t\t\t\t[attr.aria-label]=\"translations.REMOVE_BUTTON\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t(click)=\"remove.emit()\"\n\t\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t\t(keyup.space)=\"remove.emit()\">\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'upload'\">\n\t\t\t<div class=\"cds--inline-loading__animation\">\n\t\t\t\t<cds-loading size=\"sm\"></cds-loading>\n\t\t\t</div>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'complete'\" class=\"cds--file__state-container\">\n\t\t\t<svg\n\t\t\t\tcdsIcon=\"checkmark--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--file-complete\"\n\t\t\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<div class=\"cds--form-requirement\" *ngIf=\"fileItem.invalid\">\n\t\t\t<div class=\"cds--form-requirement__title\">{{fileItem.invalidTitle}}</div>\n\t\t\t<p class=\"cds--form-requirement__supplement\">{{fileItem.invalidText}}</p>\n\t\t</div>\n\t`\n})\nexport class FileComponent implements OnDestroy {\n\t/**\n\t * Accessible translations for the close and complete icons\n\t */\n\t@Input() translations = this.i18n.get().FILE_UPLOADER;\n\t/**\n\t * A single `FileItem` from the set of `FileItem`s\n\t */\n\t@Input() fileItem: FileItem;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t@Output() remove = new EventEmitter();\n\n\t@HostBinding(\"class.cds--file__selected-file\") selectedFile = true;\n\n\t@HostBinding(\"class.cds--file__selected-file--invalid\") get isInvalidText() {\n\t\treturn this.fileItem.invalidText;\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--sm\") get fileSizeSmall() {\n\t\treturn this.size === \"sm\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--md\") get fileSizeMedium() {\n\t\treturn this.size === \"md\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--lg\") get fileSizeLarge() {\n\t\treturn this.size === \"lg\";\n\t}\n\tconstructor(protected i18n: I18n) {}\n\n\tngOnDestroy() {\n\t\tthis.remove.emit();\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tOnDestroy\n} from \"@angular/core\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\n@Component({\n\tselector: \"cds-file, ibm-file\",\n\ttemplate: `\n\t\t<p class=\"cds--file-filename\" [title]=\"fileItem.file.name\">{{fileItem.file.name}}</p>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'edit'\"\n\t\t\tclass=\"cds--file__state-container\">\n\t\t\t<svg\n\t\t\t\t*ngIf=\"isInvalidText\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tclass=\"cds--file--invalid\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cds--file-close\"\n\t\t\t\t[attr.aria-label]=\"translations.REMOVE_BUTTON\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t(click)=\"remove.emit()\"\n\t\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t\t(keyup.space)=\"remove.emit()\">\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'upload'\">\n\t\t\t<div class=\"cds--inline-loading__animation\">\n\t\t\t\t<cds-loading size=\"sm\"></cds-loading>\n\t\t\t</div>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'complete'\" class=\"cds--file__state-container\">\n\t\t\t<svg\n\t\t\t\tcdsIcon=\"checkmark--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--file-complete\"\n\t\t\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<div class=\"cds--form-requirement\" role=\"alert\" *ngIf=\"fileItem.invalid\">\n\t\t\t<div class=\"cds--form-requirement__title\">{{fileItem.invalidTitle}}</div>\n\t\t\t<p class=\"cds--form-requirement__supplement\">{{fileItem.invalidText}}</p>\n\t\t</div>\n\t`\n})\nexport class FileComponent implements OnDestroy {\n\t/**\n\t * Accessible translations for the close and complete icons\n\t */\n\t@Input() translations = this.i18n.get().FILE_UPLOADER;\n\t/**\n\t * A single `FileItem` from the set of `FileItem`s\n\t */\n\t@Input() fileItem: FileItem;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t@Output() remove = new EventEmitter();\n\n\t@HostBinding(\"class.cds--file__selected-file\") selectedFile = true;\n\n\t@HostBinding(\"class.cds--file__selected-file--invalid\") get isInvalidText() {\n\t\treturn this.fileItem.invalidText;\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--sm\") get fileSizeSmall() {\n\t\treturn this.size === \"sm\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--md\") get fileSizeMedium() {\n\t\treturn this.size === \"md\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--lg\") get fileSizeLarge() {\n\t\treturn this.size === \"lg\";\n\t}\n\tconstructor(protected i18n: I18n) {}\n\n\tngOnDestroy() {\n\t\tthis.remove.emit();\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -29661,7 +29661,7 @@
         },
         {
             "name": "FileUploader",
-            "id": "component-FileUploader-c42e41aebece5a9dc08bb7f9735c415d091ad55d29c1d5bc252f029f3c302efa90e539c04a223a19f8af53e2d9a544579d1f935df8aa5b314a6f02d5349fa0a6",
+            "id": "component-FileUploader-16618b5809363fea59d72357ffa4b07e95929d21f9b6f877e0e1e0cc77571170d13a9b73a0a9c332b8e0dd05a18d728283373b0b3f7031ad19fade02045a499f",
             "file": "src/file-uploader/file-uploader.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -29675,7 +29675,7 @@
             "selector": "cds-file-uploader, ibm-file-uploader",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t<label [for]=\"fileUploaderId\" class=\"cds--file--label\">{{title}}</label>\n\t<p class=\"cds--label-description\">{{description}}</p>\n\t<div class=\"cds--file\">\n\t\t<label\n\t\t\t*ngIf=\"drop\"\n\t\t\tclass=\"cds--file-browse-btn\"\n\t\t\t(keyup.enter)=\"fileInput.click()\"\n\t\t\t(keyup.space)=\"fileInput.click()\"\n\t\t\t[ngClass]=\"{'cds--file-browse-btn--disabled': disabled}\"\n\t\t\ttabindex=\"0\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--file__drop-container\"\n\t\t\t\t[ngClass]=\"{'cds--file__drop-container--drag-over': dragOver}\"\n\t\t\t\trole=\"button\"\n\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t(dragover)=\"onDragOver($event)\"\n\t\t\t\t(dragleave)=\"onDragLeave($event)\"\n\t\t\t\t(drop)=\"onDrop($event)\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(dropText)\">{{dropText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(dropText)\" [ngTemplateOutlet]=\"dropText\"></ng-template>\n\t\t\t</div>\n\t\t</label>\n\t\t<button\n\t\t\t*ngIf=\"!drop\"\n\t\t\ttype=\"button\"\n\t\t\t[cdsButton]=\"buttonType\"\n\t\t\t(click)=\"fileInput.click()\"\n\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t[size]=\"size\"\n\t\t\t[disabled]=\"disabled\">\n\t\t\t{{buttonText}}\n\t\t</button>\n\t\t<input\n\t\t\t#fileInput\n\t\t\ttype=\"file\"\n\t\t\tclass=\"cds--file-input\"\n\t\t\t[accept]=\"accept\"\n\t\t\t[id]=\"fileUploaderId\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\ttabindex=\"-1\"\n\t\t\t(change)=\"onFilesAdded()\"\n\t\t\t[disabled]=\"disabled\"/>\n\t\t<div class=\"cds--file-container\">\n\t\t\t<ng-container *ngFor=\"let fileItem of files\">\n\t\t\t\t<cds-file\n\t\t\t\t\t[fileItem]=\"fileItem\"\n\t\t\t\t\t(remove)=\"removeFile(fileItem)\"\n\t\t\t\t\t[size]=\"fileItemSize\">\n\t\t\t\t</cds-file>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</ng-container>\n\n<ng-template #skeletonTemplate>\n\t<div class=\"cds--skeleton__text\" style=\"width: 100px\"></div>\n\t<div class=\"cds--skeleton__text\" style=\"width: 225px\"></div>\n\t<button cdsButton skeleton=\"true\"></button>\n</ng-template>\n\t",
+            "template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t<label [for]=\"fileUploaderId\" class=\"cds--file--label\">{{title}}</label>\n\t<p class=\"cds--label-description\" role=\"alert\">{{description}}</p>\n\t<div class=\"cds--file\">\n\t\t<label\n\t\t\t*ngIf=\"drop\"\n\t\t\tclass=\"cds--file-browse-btn\"\n\t\t\t(keyup.enter)=\"fileInput.click()\"\n\t\t\t(keyup.space)=\"fileInput.click()\"\n\t\t\t[ngClass]=\"{'cds--file-browse-btn--disabled': disabled}\"\n\t\t\ttabindex=\"0\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--file__drop-container\"\n\t\t\t\t[ngClass]=\"{'cds--file__drop-container--drag-over': dragOver}\"\n\t\t\t\trole=\"button\"\n\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t(dragover)=\"onDragOver($event)\"\n\t\t\t\t(dragleave)=\"onDragLeave($event)\"\n\t\t\t\t(drop)=\"onDrop($event)\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(dropText)\">{{dropText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(dropText)\" [ngTemplateOutlet]=\"dropText\"></ng-template>\n\t\t\t</div>\n\t\t</label>\n\t\t<button\n\t\t\t*ngIf=\"!drop\"\n\t\t\ttype=\"button\"\n\t\t\t[cdsButton]=\"buttonType\"\n\t\t\t(click)=\"fileInput.click()\"\n\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t[size]=\"size\"\n\t\t\t[disabled]=\"disabled\">\n\t\t\t{{buttonText}}\n\t\t</button>\n\t\t<input\n\t\t\t#fileInput\n\t\t\ttype=\"file\"\n\t\t\tclass=\"cds--file-input\"\n\t\t\t[accept]=\"accept\"\n\t\t\t[id]=\"fileUploaderId\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\ttabindex=\"-1\"\n\t\t\t(change)=\"onFilesAdded()\"\n\t\t\t[disabled]=\"disabled\"/>\n\t\t<div class=\"cds--file-container\">\n\t\t\t<ng-container *ngFor=\"let fileItem of files\">\n\t\t\t\t<cds-file\n\t\t\t\t\t[fileItem]=\"fileItem\"\n\t\t\t\t\t(remove)=\"removeFile(fileItem)\"\n\t\t\t\t\t[size]=\"fileItemSize\">\n\t\t\t\t</cds-file>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</ng-container>\n\n<ng-template #skeletonTemplate>\n\t<div class=\"cds--skeleton__text\" style=\"width: 100px\"></div>\n\t<div class=\"cds--skeleton__text\" style=\"width: 225px\"></div>\n\t<button cdsButton skeleton=\"true\"></button>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -30163,8 +30163,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7728,
-                                "end": 7738,
+                                "pos": 7741,
+                                "end": 7751,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -30175,8 +30175,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7722,
-                                "end": 7727,
+                                "pos": 7735,
+                                "end": 7740,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -30227,7 +30227,7 @@
             "description": "<p><a href=\"../../?path=/story/components-file-uploader--basic\">See demo</a></p>\n",
             "rawdescription": "\n\n[See demo](../../?path=/story/components-file-uploader--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tViewChild,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\nconst noop = () => { };\n\n/**\n * [See demo](../../?path=/story/components-file-uploader--basic)\n */\n@Component({\n\tselector: \"cds-file-uploader, ibm-file-uploader\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [for]=\"fileUploaderId\" class=\"cds--file--label\">{{title}}</label>\n\t\t\t<p class=\"cds--label-description\">{{description}}</p>\n\t\t\t<div class=\"cds--file\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"drop\"\n\t\t\t\t\tclass=\"cds--file-browse-btn\"\n\t\t\t\t\t(keyup.enter)=\"fileInput.click()\"\n\t\t\t\t\t(keyup.space)=\"fileInput.click()\"\n\t\t\t\t\t[ngClass]=\"{'cds--file-browse-btn--disabled': disabled}\"\n\t\t\t\t\ttabindex=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--file__drop-container\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--file__drop-container--drag-over': dragOver}\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t\t(dragover)=\"onDragOver($event)\"\n\t\t\t\t\t\t(dragleave)=\"onDragLeave($event)\"\n\t\t\t\t\t\t(drop)=\"onDrop($event)\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(dropText)\">{{dropText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(dropText)\" [ngTemplateOutlet]=\"dropText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</label>\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"!drop\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t[cdsButton]=\"buttonType\"\n\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclass=\"cds--file-input\"\n\t\t\t\t\t[accept]=\"accept\"\n\t\t\t\t\t[id]=\"fileUploaderId\"\n\t\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t(change)=\"onFilesAdded()\"\n\t\t\t\t\t[disabled]=\"disabled\"/>\n\t\t\t\t<div class=\"cds--file-container\">\n\t\t\t\t\t<ng-container *ngFor=\"let fileItem of files\">\n\t\t\t\t\t\t<cds-file\n\t\t\t\t\t\t\t[fileItem]=\"fileItem\"\n\t\t\t\t\t\t\t(remove)=\"removeFile(fileItem)\"\n\t\t\t\t\t\t\t[size]=\"fileItemSize\">\n\t\t\t\t\t\t</cds-file>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--skeleton__text\" style=\"width: 100px\"></div>\n\t\t\t<div class=\"cds--skeleton__text\" style=\"width: 225px\"></div>\n\t\t\t<button cdsButton skeleton=\"true\"></button>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: FileUploader,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class FileUploader implements ControlValueAccessor {\n\t/**\n\t * Counter used to create unique ids for file-uploader components\n\t */\n\tstatic fileUploaderCount = 0;\n\t/**\n\t * Accessible text for the button that opens the upload window.\n\t *\n\t * Defaults to the `FILE_UPLOADER.OPEN` value from the i18n service\n\t */\n\t@Input() buttonText = this.i18n.get().FILE_UPLOADER.OPEN;\n\t/**\n\t * Type set for button\n\t */\n\t@Input() buttonType: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" = \"primary\";\n\t/**\n\t * Text set to the title\n\t */\n\t@Input() title: string;\n\t/**\n\t * Text set to the description\n\t */\n\t@Input() description: string;\n\t/**\n\t * Specify the types of files that the input should be able to receive\n\t */\n\t@Input() accept = [];\n\t/**\n\t * Set to `false` to tell the component to only accept a single file on upload.\n\t *\n\t * Defaults to `true`. Accepts multiple files.\n\t */\n\t@Input() multiple = true;\n\t/**\n\t * Set to `true` for a loading file uploader.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Sets the size of the button.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Sets the size of the file items\n\t */\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t/**\n\t * Set to `true` to enable drag and drop.\n\t */\n\t@Input() drop = false;\n\t/**\n\t * Sets the text shown in drag and drop box.\n\t */\n\t@Input() dropText: string | TemplateRef<any>;\n\t/**\n\t * Provides a unique id for the underlying `<input>` node\n\t */\n\t@Input() fileUploaderId = `file-uploader-${FileUploader.fileUploaderCount}`;\n\t/**\n\t * Maintains a reference to the view DOM element of the underlying <input> node\n\t */\n\t@ViewChild(\"fileInput\") fileInput;\n\t/**\n\t * The list of files that have been submitted to be uploaded\n\t */\n\t@Input() files = new Set<FileItem>();\n\t/**\n\t * Set to `true` to disable upload button\n\t */\n\t@Input() disabled = false;\n\n\t@Output() filesChange = new EventEmitter<any>();\n\n\t/**\n\t * Controls the state of the drag and drop file container\n\t */\n\tpublic dragOver = false;\n\n\tprotected onTouchedCallback: () => void = noop;\n\tprotected onChangeCallback: (_: Set<FileItem>) => void = noop;\n\n\tconstructor(protected i18n: I18n) {\n\t\tFileUploader.fileUploaderCount++;\n\t}\n\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel` and reactive forms.\n\t * Updates `this.files`.\n\t */\n\tget value(): Set<FileItem> {\n\t\treturn this.files;\n\t}\n\tset value(v: Set<FileItem>) {\n\t\tif (v !== this.files) {\n\t\t\tthis.files = v;\n\t\t\tthis.onChangeCallback(v);\n\t\t}\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tget fileList() {\n\t\treturn Array.from(this.fileInput.nativeElement.files);\n\t}\n\n\t/**\n\t * Propagates the injected `value`.\n\t */\n\twriteValue(value: Set<FileItem>) {\n\t\tif (value !== this.value) {\n\t\t\tthis.files = value;\n\t\t}\n\t}\n\n\tcreateFileItem(file): FileItem {\n\t\treturn {\n\t\t\tuploaded: false,\n\t\t\tstate: \"edit\",\n\t\t\tinvalid: false,\n\t\t\tinvalidText: \"\",\n\t\t\tfile: file\n\t\t};\n\t}\n\n\tonFilesAdded() {\n\t\tconst newFiles = new Set<FileItem>(this.files);\n\t\tif (!this.multiple) {\n\t\t\tnewFiles.clear();\n\t\t}\n\t\tfor (let file of this.fileList) {\n\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\tnewFiles.add(fileItem);\n\t\t}\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t}\n\n\tonDragOver(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tthis.dragOver = true;\n\t}\n\n\tonDragLeave(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tthis.dragOver = false;\n\t}\n\n\tonDrop(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst transferredFiles: Array<File> = Array.from(event.dataTransfer.files);\n\t\tconst newFiles = new Set<FileItem>(this.files);\n\n\t\ttransferredFiles.filter(({ name, type }) => {\n\t\t\t// Get the file extension and add a \".\" to the beginning.\n\t\t\tconst fileExtension = name.split(\".\").pop().replace(/^/, \".\");\n\t\t\t// Check if the accept array contains the mime type or extension of the file.\n\t\t\treturn this.accept.includes(type) || this.accept.includes(fileExtension) || !this.accept.length;\n\t\t}).forEach(file => {\n\t\t\tif (!newFiles.size || this.multiple) {\n\t\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\t\tnewFiles.add(fileItem);\n\t\t\t}\n\t\t});\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t\tthis.dragOver = false;\n\t}\n\n\tremoveFile(fileItem) {\n\t\t// Deleting an item from this.files removes the <ibm-file> component,\n\t\t// which triggers its ngOnDestroy(), which fires the (remove) event again.\n\t\t// So, (remove) may double-fire and we need to handle it here.\n\t\tif (this.files && this.files.has(fileItem)) {\n\t\t\tconst newFiles = new Set<FileItem>(this.files);\n\t\t\tnewFiles.delete(fileItem);\n\t\t\tthis.filesChange.emit(newFiles);\n\t\t\tthis.value = newFiles;\n\t\t}\n\t\tthis.fileInput.nativeElement.value = \"\";\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Registers the injected function to control the touch use of the `FileUploader`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the checkbox.\n\t *\n\t * ex: `this.formGroup.get(\"myFileUploader\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the file uploader\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tViewChild,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\nconst noop = () => { };\n\n/**\n * [See demo](../../?path=/story/components-file-uploader--basic)\n */\n@Component({\n\tselector: \"cds-file-uploader, ibm-file-uploader\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [for]=\"fileUploaderId\" class=\"cds--file--label\">{{title}}</label>\n\t\t\t<p class=\"cds--label-description\" role=\"alert\">{{description}}</p>\n\t\t\t<div class=\"cds--file\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"drop\"\n\t\t\t\t\tclass=\"cds--file-browse-btn\"\n\t\t\t\t\t(keyup.enter)=\"fileInput.click()\"\n\t\t\t\t\t(keyup.space)=\"fileInput.click()\"\n\t\t\t\t\t[ngClass]=\"{'cds--file-browse-btn--disabled': disabled}\"\n\t\t\t\t\ttabindex=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--file__drop-container\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--file__drop-container--drag-over': dragOver}\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t\t(dragover)=\"onDragOver($event)\"\n\t\t\t\t\t\t(dragleave)=\"onDragLeave($event)\"\n\t\t\t\t\t\t(drop)=\"onDrop($event)\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(dropText)\">{{dropText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(dropText)\" [ngTemplateOutlet]=\"dropText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</label>\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"!drop\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t[cdsButton]=\"buttonType\"\n\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclass=\"cds--file-input\"\n\t\t\t\t\t[accept]=\"accept\"\n\t\t\t\t\t[id]=\"fileUploaderId\"\n\t\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t(change)=\"onFilesAdded()\"\n\t\t\t\t\t[disabled]=\"disabled\"/>\n\t\t\t\t<div class=\"cds--file-container\">\n\t\t\t\t\t<ng-container *ngFor=\"let fileItem of files\">\n\t\t\t\t\t\t<cds-file\n\t\t\t\t\t\t\t[fileItem]=\"fileItem\"\n\t\t\t\t\t\t\t(remove)=\"removeFile(fileItem)\"\n\t\t\t\t\t\t\t[size]=\"fileItemSize\">\n\t\t\t\t\t\t</cds-file>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--skeleton__text\" style=\"width: 100px\"></div>\n\t\t\t<div class=\"cds--skeleton__text\" style=\"width: 225px\"></div>\n\t\t\t<button cdsButton skeleton=\"true\"></button>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: FileUploader,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class FileUploader implements ControlValueAccessor {\n\t/**\n\t * Counter used to create unique ids for file-uploader components\n\t */\n\tstatic fileUploaderCount = 0;\n\t/**\n\t * Accessible text for the button that opens the upload window.\n\t *\n\t * Defaults to the `FILE_UPLOADER.OPEN` value from the i18n service\n\t */\n\t@Input() buttonText = this.i18n.get().FILE_UPLOADER.OPEN;\n\t/**\n\t * Type set for button\n\t */\n\t@Input() buttonType: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" = \"primary\";\n\t/**\n\t * Text set to the title\n\t */\n\t@Input() title: string;\n\t/**\n\t * Text set to the description\n\t */\n\t@Input() description: string;\n\t/**\n\t * Specify the types of files that the input should be able to receive\n\t */\n\t@Input() accept = [];\n\t/**\n\t * Set to `false` to tell the component to only accept a single file on upload.\n\t *\n\t * Defaults to `true`. Accepts multiple files.\n\t */\n\t@Input() multiple = true;\n\t/**\n\t * Set to `true` for a loading file uploader.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Sets the size of the button.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Sets the size of the file items\n\t */\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t/**\n\t * Set to `true` to enable drag and drop.\n\t */\n\t@Input() drop = false;\n\t/**\n\t * Sets the text shown in drag and drop box.\n\t */\n\t@Input() dropText: string | TemplateRef<any>;\n\t/**\n\t * Provides a unique id for the underlying `<input>` node\n\t */\n\t@Input() fileUploaderId = `file-uploader-${FileUploader.fileUploaderCount}`;\n\t/**\n\t * Maintains a reference to the view DOM element of the underlying <input> node\n\t */\n\t@ViewChild(\"fileInput\") fileInput;\n\t/**\n\t * The list of files that have been submitted to be uploaded\n\t */\n\t@Input() files = new Set<FileItem>();\n\t/**\n\t * Set to `true` to disable upload button\n\t */\n\t@Input() disabled = false;\n\n\t@Output() filesChange = new EventEmitter<any>();\n\n\t/**\n\t * Controls the state of the drag and drop file container\n\t */\n\tpublic dragOver = false;\n\n\tprotected onTouchedCallback: () => void = noop;\n\tprotected onChangeCallback: (_: Set<FileItem>) => void = noop;\n\n\tconstructor(protected i18n: I18n) {\n\t\tFileUploader.fileUploaderCount++;\n\t}\n\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel` and reactive forms.\n\t * Updates `this.files`.\n\t */\n\tget value(): Set<FileItem> {\n\t\treturn this.files;\n\t}\n\tset value(v: Set<FileItem>) {\n\t\tif (v !== this.files) {\n\t\t\tthis.files = v;\n\t\t\tthis.onChangeCallback(v);\n\t\t}\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tget fileList() {\n\t\treturn Array.from(this.fileInput.nativeElement.files);\n\t}\n\n\t/**\n\t * Propagates the injected `value`.\n\t */\n\twriteValue(value: Set<FileItem>) {\n\t\tif (value !== this.value) {\n\t\t\tthis.files = value;\n\t\t}\n\t}\n\n\tcreateFileItem(file): FileItem {\n\t\treturn {\n\t\t\tuploaded: false,\n\t\t\tstate: \"edit\",\n\t\t\tinvalid: false,\n\t\t\tinvalidText: \"\",\n\t\t\tfile: file\n\t\t};\n\t}\n\n\tonFilesAdded() {\n\t\tconst newFiles = new Set<FileItem>(this.files);\n\t\tif (!this.multiple) {\n\t\t\tnewFiles.clear();\n\t\t}\n\t\tfor (let file of this.fileList) {\n\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\tnewFiles.add(fileItem);\n\t\t}\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t}\n\n\tonDragOver(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tthis.dragOver = true;\n\t}\n\n\tonDragLeave(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tthis.dragOver = false;\n\t}\n\n\tonDrop(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst transferredFiles: Array<File> = Array.from(event.dataTransfer.files);\n\t\tconst newFiles = new Set<FileItem>(this.files);\n\n\t\ttransferredFiles.filter(({ name, type }) => {\n\t\t\t// Get the file extension and add a \".\" to the beginning.\n\t\t\tconst fileExtension = name.split(\".\").pop().replace(/^/, \".\");\n\t\t\t// Check if the accept array contains the mime type or extension of the file.\n\t\t\treturn this.accept.includes(type) || this.accept.includes(fileExtension) || !this.accept.length;\n\t\t}).forEach(file => {\n\t\t\tif (!newFiles.size || this.multiple) {\n\t\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\t\tnewFiles.add(fileItem);\n\t\t\t}\n\t\t});\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t\tthis.dragOver = false;\n\t}\n\n\tremoveFile(fileItem) {\n\t\t// Deleting an item from this.files removes the <ibm-file> component,\n\t\t// which triggers its ngOnDestroy(), which fires the (remove) event again.\n\t\t// So, (remove) may double-fire and we need to handle it here.\n\t\tif (this.files && this.files.has(fileItem)) {\n\t\t\tconst newFiles = new Set<FileItem>(this.files);\n\t\t\tnewFiles.delete(fileItem);\n\t\t\tthis.filesChange.emit(newFiles);\n\t\t\tthis.value = newFiles;\n\t\t}\n\t\tthis.fileInput.nativeElement.value = \"\";\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Registers the injected function to control the touch use of the `FileUploader`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the checkbox.\n\t *\n\t * ex: `this.formGroup.get(\"myFileUploader\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the file uploader\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -40670,7 +40670,7 @@
         },
         {
             "name": "Panel",
-            "id": "component-Panel-c65d74e949ddda2efe53b82f1dbfc38f6c72f46afd130bb18ba101ea956a8a3f6ec193208a54cabf703c56346908a2aa8df35214a47cab7d98401e8a4c509643",
+            "id": "component-Panel-2ebb497352d8b5e724a48a5dbe4e559c148a551fe1555e8055f412750fe28413df088da970c326c542c87aec05b419931083dec3b7b82b3addad058073842504",
             "file": "src/ui-shell/panel/panel.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -40687,11 +40687,10 @@
             "inputsClass": [
                 {
                     "name": "ariaLabel",
-                    "defaultValue": "\"Header panel\"",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "line": 26,
-                    "type": "string",
+                    "type": "any",
                     "decorators": []
                 },
                 {
@@ -40718,7 +40717,7 @@
             "description": "<p><code>Panel</code> is a component that can be used to display content on the right side of the screen.\n<code>Panel</code>s are generally activated by and linked to a <code>HeaderAction</code> component.</p>\n",
             "rawdescription": "\n\n`Panel` is a component that can be used to display content on the right side of the screen.\n`Panel`s are generally activated by and linked to a `HeaderAction` component.\n",
             "type": "component",
-            "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n/**\n * `Panel` is a component that can be used to display content on the right side of the screen.\n * `Panel`s are generally activated by and linked to a `HeaderAction` component.\n */\n@Component({\n\tselector: \"cds-panel, ibm-panel\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--header-panel\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--header-panel--expanded': expanded\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`\n})\nexport class Panel {\n\t/**\n\t * Controls the visibility of the panel\n\t */\n\t@Input() expanded = false;\n\n\t@Input() ariaLabel = \"Header panel\";\n}\n",
+            "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n/**\n * `Panel` is a component that can be used to display content on the right side of the screen.\n * `Panel`s are generally activated by and linked to a `HeaderAction` component.\n */\n@Component({\n\tselector: \"cds-panel, ibm-panel\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--header-panel\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--header-panel--expanded': expanded\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`\n})\nexport class Panel {\n\t/**\n\t * Controls the visibility of the panel\n\t */\n\t@Input() expanded = false;\n\n\t@Input() ariaLabel;\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": ""