carbon-components-angular 5.14.8 → 5.14.9

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": "",

package/docs/storybook/file-uploader-file-uploader-stories.47d6a66e.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[6310],{"./src/file-uploader/file-uploader.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,DragAndDrop:()=>DragAndDrop,NgModel:()=>NgModel,ReactiveForms:()=>ReactiveForms,Skeleton:()=>Skeleton,default:()=>file_uploader_stories});var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");const noop=()=>{};let FileUploader=class FileUploader{constructor(i18n){this.i18n=i18n,this.buttonText=this.i18n.get().FILE_UPLOADER.OPEN,this.buttonType="primary",this.accept=[],this.multiple=!0,this.skeleton=!1,this.fileItemSize="lg",this.drop=!1,this.fileUploaderId=`file-uploader-${FileUploader.fileUploaderCount}`,this.files=new Set,this.disabled=!1,this.filesChange=new core.EventEmitter,this.dragOver=!1,this.onTouchedCallback=noop,this.onChangeCallback=noop,FileUploader.fileUploaderCount++}get value(){return this.files}set value(v){v!==this.files&&(this.files=v,this.onChangeCallback(v))}onBlur(){this.onTouchedCallback()}get fileList(){return Array.from(this.fileInput.nativeElement.files)}writeValue(value){value!==this.value&&(this.files=value)}createFileItem(file){return{uploaded:!1,state:"edit",invalid:!1,invalidText:"",file}}onFilesAdded(){const newFiles=new Set(this.files);this.multiple||newFiles.clear();for(let file of this.fileList){const fileItem=this.createFileItem(file);newFiles.add(fileItem)}this.value=newFiles,this.filesChange.emit(newFiles)}onDragOver(event){event.stopPropagation(),event.preventDefault(),this.disabled||(this.dragOver=!0)}onDragLeave(event){event.stopPropagation(),event.preventDefault(),this.dragOver=!1}onDrop(event){if(event.stopPropagation(),event.preventDefault(),this.disabled)return;const transferredFiles=Array.from(event.dataTransfer.files),newFiles=new Set(this.files);transferredFiles.filter((({name,type})=>{const fileExtension=name.split(".").pop().replace(/^/,".");return this.accept.includes(type)||this.accept.includes(fileExtension)||!this.accept.length})).forEach((file=>{if(!newFiles.size||this.multiple){const fileItem=this.createFileItem(file);newFiles.add(fileItem)}})),this.value=newFiles,this.filesChange.emit(newFiles),this.dragOver=!1}removeFile(fileItem){if(this.files&&this.files.has(fileItem)){const newFiles=new Set(this.files);newFiles.delete(fileItem),this.filesChange.emit(newFiles),this.value=newFiles}this.fileInput.nativeElement.value=""}isTemplate(value){return value instanceof core.TemplateRef}registerOnTouched(fn){this.onTouchedCallback=fn}registerOnChange(fn){this.onChangeCallback=fn}setDisabledState(isDisabled){this.disabled=isDisabled}};FileUploader.fileUploaderCount=0,FileUploader.ctorParameters=()=>[{type:i18n.oc}],FileUploader.propDecorators={buttonText:[{type:core.Input}],buttonType:[{type:core.Input}],title:[{type:core.Input}],description:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],skeleton:[{type:core.Input}],size:[{type:core.Input}],fileItemSize:[{type:core.Input}],drop:[{type:core.Input}],dropText:[{type:core.Input}],fileUploaderId:[{type:core.Input}],fileInput:[{type:core.ViewChild,args:["fileInput"]}],files:[{type:core.Input}],disabled:[{type:core.Input}],filesChange:[{type:core.Output}]},FileUploader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-file-uploader, ibm-file-uploader",template:'\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',providers:[{provide:fesm2020_forms.JU,useExisting:FileUploader,multi:!0}]})],FileUploader);let FileComponent=class FileComponent{constructor(i18n){this.i18n=i18n,this.translations=this.i18n.get().FILE_UPLOADER,this.size="lg",this.remove=new core.EventEmitter,this.selectedFile=!0}get isInvalidText(){return this.fileItem.invalidText}get fileSizeSmall(){return"sm"===this.size}get fileSizeMedium(){return"md"===this.size}get fileSizeLarge(){return"lg"===this.size}ngOnDestroy(){this.remove.emit()}};FileComponent.ctorParameters=()=>[{type:i18n.oc}],FileComponent.propDecorators={translations:[{type:core.Input}],fileItem:[{type:core.Input}],size:[{type:core.Input}],remove:[{type:core.Output}],selectedFile:[{type:core.HostBinding,args:["class.cds--file__selected-file"]}],isInvalidText:[{type:core.HostBinding,args:["class.cds--file__selected-file--invalid"]}],fileSizeSmall:[{type:core.HostBinding,args:["class.cds--file__selected-file--sm"]}],fileSizeMedium:[{type:core.HostBinding,args:["class.cds--file__selected-file--md"]}],fileSizeLarge:[{type:core.HostBinding,args:["class.cds--file__selected-file--lg"]}]},FileComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-file, ibm-file",template:'\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'})],FileComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),loading=__webpack_require__("./src/loading/index.ts"),icon=__webpack_require__("./src/icon/index.ts");let FileUploaderModule=class FileUploaderModule{};FileUploaderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[FileUploader,FileComponent],exports:[FileUploader,FileComponent],imports:[common.CommonModule,src_button.hJ,loading.I,icon.QX]})],FileUploaderModule);var notification=__webpack_require__("./src/notification/index.ts"),file_type=__webpack_require__("./node_modules/file-type/index.js");let DragAndDropStory=class DragAndDropStory{constructor(){this.files=new Set,this.accept=[".jpg",".png"],this.dropText="Drag and drop files here of upload",this.disabled=!1,this.fileItemSize="lg",this.maxSize=5e5}onDropped(event){const transferredFiles=Array.from(event),readFileAndCheckType=fileObj=>new Promise(((resolve,reject)=>{let fileExtension,mime,reader=new FileReader;reader.readAsArrayBuffer(fileObj.file),reader.onload=()=>{if(reader.result){const type=file_type(reader.result);type?(fileExtension=type.ext.replace(/^/,"."),mime=type.mime):(fileExtension=fileObj.file.name.split(".").pop().replace(/^/,"."),mime=fileObj.file.type)}resolve({file:fileObj,accept:this.accept.includes(fileExtension)||this.accept.includes(mime)||!this.accept.length})},reader.onerror=error=>{reject(error)}})),promises=transferredFiles.map((file=>readFileAndCheckType(file)));Promise.all(promises).then((filePromiseArray=>filePromiseArray.filter((filePromise=>filePromise.accept)).map((acceptedFile=>acceptedFile.file)))).then((acceptedFiles=>this.files=new Set(acceptedFiles))).catch((error=>console.log(error)))}onUpload(){this.files.forEach((fileItem=>{fileItem.uploaded||(fileItem.file.size<this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="complete",fileItem.uploaded=!0,console.log(fileItem)}),1500)),fileItem.file.size>this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="edit",fileItem.invalid=!0,fileItem.invalidText="File size exceeds limit"}),1500)))}))}};DragAndDropStory.propDecorators={files:[{type:core.Input}],title:[{type:core.Input}],description:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],dropText:[{type:core.Input}],disabled:[{type:core.Input}],fileItemSize:[{type:core.Input}]},DragAndDropStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-drop-file-uploader",template:'\n\t\t<cds-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[(files)]="files"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\tdrop="true"\n\t\t\t[dropText]="dropText"\n\t\t\t(filesChange)="onDropped($event)"\n\t\t\t[disabled]="disabled">\n\t\t</cds-file-uploader>\n\t\t<button\n\t\t\tcdsButton\n\t\t\t*ngIf="files && files.size > 0"\n\t\t\t(click)="onUpload()"\n\t\t\tstyle="margin-top:20px">\n\t\t\tUpload\n\t\t</button>\n\t'})],DragAndDropStory);let NgModelFileUploaderStory=class NgModelFileUploaderStory{constructor(){this.buttonType="primary",this.size="md",this.disabled=!1,this.fileItemSize="lg",this.model=new Set,this.maxSize=5e5}removeFiles(){this.model=new Set}onUpload(){this.model.forEach((fileItem=>{fileItem.uploaded||(fileItem.file.size<this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="complete",fileItem.uploaded=!0,console.log(fileItem)}),1500)),fileItem.file.size>this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="edit",fileItem.invalid=!0,fileItem.invalidTitle="File size exceeds limit",fileItem.invalidText="500kb max file size. Select a new file and try again."}),1500)))}))}};NgModelFileUploaderStory.propDecorators={title:[{type:core.Input}],description:[{type:core.Input}],buttonText:[{type:core.Input}],buttonType:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],fileItemSize:[{type:core.Input}]},NgModelFileUploaderStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-ngmodel-file-uploader",template:'\n\t\t<cds-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[(ngModel)]="model"\n\t\t\t[disabled]="disabled">\n\t\t</cds-file-uploader>\n\t\t<button\n\t\t\tcdsButton\n\t\t\t*ngIf="model && model.size > 0"\n\t\t\t(click)="onUpload()"\n\t\t\tstyle="margin-top:20px">\n\t\t\tUpload\n\t\t</button>\n\t\t<button cdsButton (click)="removeFiles()">Remove all</button>\n\t'})],NgModelFileUploaderStory);let ReactiveFormsStory=class ReactiveFormsStory{constructor(formBuilder){this.formBuilder=formBuilder,this.buttonType="primary",this.accept=[".jpg",".png"],this.skeleton=!1,this.size="md",this.disabled=!1,this.fileItemSize="lg",this.maxSize=5e5}ngOnInit(){this.formGroup=this.formBuilder.group({files:new fesm2020_forms.NI(new Set,[fesm2020_forms.kI.required])}),this.disabledFormGroup=this.formBuilder.group({files:new fesm2020_forms.NI(new Set,[fesm2020_forms.kI.required])}),this.disabledFormGroup.disable()}onUpload(){this.formGroup.get("files").value.forEach((fileItem=>{fileItem.uploaded||(fileItem.file.size<this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="complete",fileItem.uploaded=!0}),1500)),fileItem.file.size>this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="edit",fileItem.invalid=!0,fileItem.invalidTitle="File size exceeds limit",fileItem.invalidText="500kb max file size. Select a new file and try again."}),1500)))}))}};ReactiveFormsStory.ctorParameters=()=>[{type:fesm2020_forms.qu}],ReactiveFormsStory.propDecorators={title:[{type:core.Input}],description:[{type:core.Input}],buttonText:[{type:core.Input}],buttonType:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],skeleton:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],fileItemSize:[{type:core.Input}]},ReactiveFormsStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-reactive-forms",template:'\n\t\t<form [formGroup]="formGroup" (ngSubmit)="onUpload()">\n\t\t\t<cds-file-uploader\n\t\t\t\t[title]="title"\n\t\t\t\t[description]="description"\n\t\t\t\t[buttonText]="buttonText"\n\t\t\t\t[buttonType]="buttonType"\n\t\t\t\t[accept]="accept"\n\t\t\t\t[multiple]="multiple"\n\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t[size]="size"\n\t\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\tformControlName="files">\n\t\t\t</cds-file-uploader>\n\t\t\t<button\n\t\t\t\tcdsButton\n\t\t\t\t*ngIf="formGroup.get(\'files\').value && formGroup.get(\'files\').value.size > 0"\n\t\t\t\ttype="submit"\n\t\t\t\tstyle="margin-top: 20px">\n\t\t\t\tUpload\n\t\t\t</button>\n\t\t</form>\n\t\t<form [formGroup]="disabledFormGroup" (ngSubmit)="onUpload()">\n\t\t\t<cds-file-uploader\n\t\t\t\t[title]="title"\n\t\t\t\t[description]="description"\n\t\t\t\t[buttonText]="buttonText"\n\t\t\t\t[buttonType]="buttonType"\n\t\t\t\t[accept]="accept"\n\t\t\t\t[multiple]="multiple"\n\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t[size]="size"\n\t\t\t\tformControlName="files">\n\t\t\t</cds-file-uploader>\n\t\t\t<div [id]="notificationId" style="width: 300px; margin-top: 20px"></div>\n\t\t\t<button cdsButton *ngIf="disabledFormGroup.get(\'files\').value && disabledFormGroup.get(\'files\').value.size > 0" type="submit">\n\t\t\t\tUpload\n\t\t\t</button>\n\t\t</form>\n\t'})],ReactiveFormsStory);let FileUploaderStory=class FileUploaderStory{constructor(){this.files=new Set,this.buttonType="primary",this.accept=[".jpg",".png"],this.skeleton=!1,this.size="md",this.disabled=!1,this.fileItemSize="lg",this.maxSize=5e5}onUpload(){this.files.forEach((fileItem=>{fileItem.uploaded||(fileItem.file.size<this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="complete",fileItem.uploaded=!0,console.log(fileItem)}),1500)),fileItem.file.size>this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="edit",fileItem.invalid=!0,fileItem.invalidTitle="File size exceeds limit",fileItem.invalidText="500kb max file size. Select a new file and try again."}),1500)))}))}};FileUploaderStory.propDecorators={files:[{type:core.Input}],title:[{type:core.Input}],description:[{type:core.Input}],buttonText:[{type:core.Input}],buttonType:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],skeleton:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],fileItemSize:[{type:core.Input}]},FileUploaderStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-file-uploader",template:'\n\t\t<cds-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[(files)]="files"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</cds-file-uploader>\n\t\t<button cdsButton *ngIf="files && files.size > 0" (click)="onUpload()" style="margin-top:20px">\n\t\t\tUpload\n\t\t</button>\n\t'})],FileUploaderStory);const file_uploader_stories={title:"Components/File Uploader",decorators:[(0,dist.moduleMetadata)({declarations:[FileUploaderStory,NgModelFileUploaderStory,DragAndDropStory,ReactiveFormsStory],imports:[FileUploaderModule,fesm2020_forms.u5,fesm2020_forms.UX,notification.PQ,src_button.hJ]})],args:{title:"Account photo",description:"only .jpg and .png files. 500kb max file size.",buttonText:"Add files",disabled:!1,multiple:!0},argTypes:{size:{options:["sm","md","lg"],defaultValue:"md",control:"radio"},buttonType:{options:["primary","secondary","tertiary","ghost","danger"],defaultValue:"primary",control:"select"},fileItemSize:{options:["sm","md","lg"],defaultValue:"lg",control:"radio"}},component:FileUploader},Basic=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader.component.ts\n\t\t--\x3e\n\t\t<app-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</app-file-uploader>\n\t'})).bind({}),DragAndDrop=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/drag-drop.component.ts\n\t\t--\x3e\n\t\t<app-drop-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[dropText]="dropText"\n\t\t\tdrop="true"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</app-drop-file-uploader>\n\t'})).bind({});DragAndDrop.args={dropText:"Drag and drop files here or upload",accept:[".png","image/jpeg"]},DragAndDrop.argTypes={size:{control:!1},buttonType:{control:!1}};const NgModel=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader-form.component.ts\n\t\t--\x3e\n\t\t<app-ngmodel-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</app-ngmodel-file-uploader>\n\t'})).bind({});NgModel.storyName="Using NgModel",NgModel.args={accept:[".png",".jpeg"]};const ReactiveForms=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader-reactive-form.component.ts\n\t\t--\x3e\n\t\t<app-reactive-forms\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</app-reactive-forms>\n\t'})).bind({});NgModel.args={accept:[".png",".jpeg"]};const Skeleton=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader.component.ts\n\t\t--\x3e\n\t\t<app-file-uploader skeleton="true"></app-file-uploader>\n\t'})).bind({})},"./src/loading/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{g:()=>Loading,I:()=>LoadingModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let Loading=class Loading{constructor(i18n){this.i18n=i18n,this.title=this.i18n.get().LOADING.TITLE,this.isActive=!0,this.size="normal",this.overlay=!1}};Loading.ctorParameters=()=>[{type:i18n.oc}],Loading.propDecorators={title:[{type:core.Input}],isActive:[{type:core.Input}],size:[{type:core.Input}],overlay:[{type:core.Input},{type:core.HostBinding,args:["class.cds--loading-overlay"]}]},Loading=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-loading, ibm-loading",template:'\n\t\t<div\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--loading--small\': size === \'sm\',\n\t\t\t\t\'cds--loading--stop\': !isActive && !overlay,\n\t\t\t\t\'cds--loading-overlay--stop\': !isActive && overlay\n\t\t\t}"\n\t\t\tclass="cds--loading">\n\t\t\t<svg class="cds--loading__svg" viewBox="0 0 100 100">\n\t\t\t\t<title>{{title}}</title>\n\t\t\t\t<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />\n\t\t\t</svg>\n\t\t</div>\n\t'})],Loading);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LoadingModule=class LoadingModule{};LoadingModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Loading],exports:[Loading],imports:[common.CommonModule,i18n.LU]})],LoadingModule)}}]);

package/docs/storybook/iframe.html

@@ -348,8 +348,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.554114ff.iframe.bundle.js';
+      import './runtime~main.b0ccd54d.iframe.bundle.js';
       
       import './795.c2864771.iframe.bundle.js';
       
-      import './main.7ca5dc3c.iframe.bundle.js';</script></body></html>
+      import './main.a9743d36.iframe.bundle.js';</script></body></html>