@carbon/web-components 2.0.0-beta.0 → 2.0.0-beta.2

package/es/components/file-uploader/demo-file-uploader.js

@@ -2,7 +2,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _decorate from "@babel/runtime/helpers/esm/decorate";
 let _ = t => t,
   _t,
-  _t2;
+  _t2,
+  _t3,
+  _t4;
 /**
  * @license
  *
@@ -16,9 +18,9 @@ import { html, property, LitElement, customElement } from 'lit-element';
 import { delay } from 'bluebird';
 import { prefix } from '../../globals/settings';
 import { ifDefined } from 'lit/directives/if-defined';
-import './file-uploader';
-import './drop-container';
-import { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';
+import './index';
+import { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';
+import { BUTTON_SIZE } from '../button/button';
 /**
  * A class to manage file uploading states, like sending file contents to server.
  * DEMONSTRATION-PURPOSE ONLY.
@@ -26,15 +28,15 @@ import { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './file-upload
  * and thus abstracting everything in a library won't be a good return on investment
  * vs. letting users copy code here and implement features that fit their needs.
  */
-let BXCEDemoFileUploader = _decorate([customElement(`${prefix}-ce-demo-file-uploader`)], function (_initialize, _LitElement) {
-  class BXCEDemoFileUploader extends _LitElement {
+let CDSCEDemoFileUploader = _decorate([customElement(`${prefix}-ce-demo-file-uploader`)], function (_initialize, _LitElement) {
+  class CDSCEDemoFileUploader extends _LitElement {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXCEDemoFileUploader,
+    F: CDSCEDemoFileUploader,
     d: [{
       kind: "field",
       key: "_files",
@@ -112,10 +114,10 @@ let BXCEDemoFileUploader = _decorate([customElement(`${prefix}-ce-demo-file-uplo
         } = data;
         if (file.size > 524288) {
           this._files = this._files.map(item => id !== item.id ? item : _objectSpread(_objectSpread({}, item), {}, {
-            state: FILE_UPLOADER_ITEM_STATE.EDITING,
+            state: FILE_UPLOADER_ITEM_STATE.EDIT,
             invalid: true,
-            validityMessage: 'File size exceeds limit',
-            supplementalValidityMessage: '500kb max file size. Select a new file and try again.'
+            errorSubject: 'File size exceeds limit',
+            errorBody: '500kb max file size. Select a new file and try again.'
           }));
           this.requestUpdate();
         } else {
@@ -123,13 +125,13 @@ let BXCEDemoFileUploader = _decorate([customElement(`${prefix}-ce-demo-file-uplo
           const rand = Math.random() * 1000;
           await delay(rand);
           this._files = this._files.map(item => id !== item.id ? item : _objectSpread(_objectSpread({}, item), {}, {
-            state: FILE_UPLOADER_ITEM_STATE.UPLOADED
+            state: FILE_UPLOADER_ITEM_STATE.COMPLETE
           }));
           this.requestUpdate();
           // Shows x icon after 1 second
           await delay(1000);
           this._files = this._files.map(item => id !== item.id ? item : _objectSpread(_objectSpread({}, item), {}, {
-            state: FILE_UPLOADER_ITEM_STATE.EDITING
+            state: FILE_UPLOADER_ITEM_STATE.EDIT
           }));
           this.requestUpdate();
         }
@@ -145,6 +147,34 @@ let BXCEDemoFileUploader = _decorate([customElement(`${prefix}-ce-demo-file-uplo
       value() {
         return '';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "button",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'button-kind'
+      })],
+      key: "buttonKind",
+      value() {
+        return 'primary';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'button-label'
+      })],
+      key: "buttonLabel",
+      value() {
+        return 'Add file';
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -158,18 +188,36 @@ let BXCEDemoFileUploader = _decorate([customElement(`${prefix}-ce-demo-file-uplo
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'helper-text'
+        attribute: 'icon-description'
+      })],
+      key: "iconDescription",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'input-name'
       })],
-      key: "helperText",
+      key: "inputName",
       value() {
         return '';
       }
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'label-text'
+        attribute: 'label-description'
       })],
-      key: "labelText",
+      key: "labelDescription",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'label-title'
+      })],
+      key: "labelTitle",
       value() {
         return '';
       }
@@ -190,7 +238,17 @@ let BXCEDemoFileUploader = _decorate([customElement(`${prefix}-ce-demo-file-uplo
       })],
       key: "size",
       value() {
-        return FILE_UPLOADER_ITEM_SIZE.REGULAR;
+        return BUTTON_SIZE.MEDIUM;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true,
+        attribute: 'input-state'
+      })],
+      key: "inputState",
+      value() {
+        return '';
       }
     }, {
       kind: "method",
@@ -200,41 +258,64 @@ let BXCEDemoFileUploader = _decorate([customElement(`${prefix}-ce-demo-file-uplo
        * `true` if the drop container should be disabled.
        */
       /**
-       * The helper text.
+       * Button kind.
        */
       /**
-       * The label text.
+       * Button label.
+       */
+      /**
+       * `true` if the drop container should be disabled.
+       */
+      /**
+       * Icon description.
+       */
+      /**
+       * The input name.
+       */
+      /**
+       * The label description text.
+       */
+      /**
+       * The label title.
        */
       /**
        * `true` if the drop container should accept more than one files at once.
        * Note that even with `false` set here, user _can_ select multiple files one by one.
        */
       /**
-       * The size of the file uploader items.
+       * The size of the button item.
+       */
+      /**
+       * The state of this file uploader item.
        */
       function render() {
         const {
           accept,
+          button,
+          buttonKind,
+          buttonLabel,
           disabled,
-          helperText,
-          labelText,
+          labelDescription,
+          labelTitle,
           multiple,
           size,
+          inputState,
+          iconDescription,
           _files: files,
           _handleChange: handleChange,
           _handleDelete: handleDelete
         } = this;
-        return html(_t || (_t = _` <cds-file-uploader helper-text="${0}" label-text="${0}"> <cds-file-drop-container accept="${0}" ?disabled="${0}" ?multiple="${0}" @cds-file-drop-container-changed="${0}"> Drag and drop files here or click to upload </cds-file-drop-container> ${0} </cds-file-uploader> `), ifDefined(helperText), ifDefined(labelText), ifDefined(accept), disabled, multiple, handleChange, files.map(({
+        return html(_t || (_t = _` <cds-file-uploader label-description="${0}" label-title="${0}" ?disabled="${0}"> ${0} ${0} </cds-file-uploader> `), ifDefined(labelDescription), ifDefined(labelTitle), disabled, !button ? html(_t2 || (_t2 = _` <cds-file-uploader-drop-container accept="${0}" ?multiple="${0}" name="${0}" @cds-file-uploader-drop-container-changed="${0}"> Drag and drop files here or click to upload </cds-file-uploader-drop-container>`), ifDefined(accept), multiple, ifDefined(this.inputName), handleChange) : html(_t3 || (_t3 = _` <cds-file-uploader-button size="${0}" button-kind="${0}" accept="${0}" name="${0}" ?multiple="${0}" @cds-file-uploader-button-changed="${0}"> ${0} </cds-file-uploader-button>`), ifDefined(size), buttonKind, ifDefined(accept), ifDefined(this.inputName), multiple, handleChange, buttonLabel), files.map(({
           id,
           invalid,
           file,
           state,
-          supplementalValidityMessage,
-          validityMessage
-        }) => html(_t2 || (_t2 = _` <cds-file-uploader-item data-file-id="${0}" ?invalid="${0}" size="${0}" state="${0}" validity-message="${0}" @cds-file-uploader-item-deleted="${0}"> ${0} <span slot="validity-message-supplement">${0}</span> </cds-file-uploader-item> `), id, invalid, ifDefined(size), ifDefined(state), ifDefined(validityMessage), handleDelete, file.name, supplementalValidityMessage)));
+          errorSubject,
+          errorBody
+        }) => html(_t4 || (_t4 = _` <cds-file-uploader-item data-file-id="${0}" ?invalid="${0}" state="${0}" icon-description="${0}" error-subject="${0}" error-body="${0}" @cds-file-uploader-item-deleted="${0}"> ${0} </cds-file-uploader-item> `), id, invalid, inputState || ifDefined(state), ifDefined(iconDescription), ifDefined(errorSubject), ifDefined(errorBody), handleDelete, file.name)));
       }
     }]
   };
 }, LitElement);
-export { BXCEDemoFileUploader as default };
+export { CDSCEDemoFileUploader as default };
 //# sourceMappingURL=demo-file-uploader.js.map

package/es/components/file-uploader/demo-file-uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo-file-uploader.js","names":["html","property","LitElement","customElement","delay","prefix","ifDefined","FILE_UPLOADER_ITEM_SIZE","FILE_UPLOADER_ITEM_STATE","BXCEDemoFileUploader","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","_handleChange","event","addedFiles","detail","newFiles","map","item","id","Math","random","toString","slice","file","state","UPLOADING","multiple","_files","files","_simulateUpload","simulateUpload","concat","requestUpdate","forEach","length","_handleDelete","fileId","idToDelete","target","dataset","filter","data","size","_objectSpread","EDITING","invalid","validityMessage","supplementalValidityMessage","rand","UPLOADED","decorators","type","Boolean","reflect","attribute","REGULAR","render","accept","disabled","helperText","labelText","handleChange","handleDelete","_t","_","_t2","name","default"],"sources":["components/file-uploader/demo-file-uploader.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, LitElement, customElement } from 'lit-element';\n\nimport { delay } from 'bluebird';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined';\nimport './file-uploader';\nimport './drop-container';\nimport {\n  FILE_UPLOADER_ITEM_SIZE,\n  FILE_UPLOADER_ITEM_STATE,\n} from './file-uploader-item';\nimport { FileData } from './stories/types';\n\n/**\n * A class to manage file uploading states, like sending file contents to server.\n * DEMONSTRATION-PURPOSE ONLY.\n * Data/state handling in file uploading tends to involve lots of application-specific logics\n * and thus abstracting everything in a library won't be a good return on investment\n * vs. letting users copy code here and implement features that fit their needs.\n */\n@customElement(`${prefix}-ce-demo-file-uploader`)\nexport default class BXCEDemoFileUploader extends LitElement {\n  /**\n   * The files being uploaded.\n   */\n  private _files: FileData[] = [];\n\n  /**\n   * Handles `cds-drop-container-changed` on `<cds-file-drop-container>`.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: CustomEvent) {\n    const { addedFiles } = event.detail;\n    const newFiles: FileData[] = addedFiles.map(\n      (item) =>\n        ({\n          id: Math.random().toString(36).slice(2),\n          file: item,\n          state: FILE_UPLOADER_ITEM_STATE.UPLOADING,\n        } as FileData)\n    );\n    const { multiple, _files: files, _simulateUpload: simulateUpload } = this;\n    if (multiple) {\n      this._files = files.concat(newFiles);\n      this.requestUpdate();\n      newFiles.forEach(simulateUpload, this);\n    } else if (addedFiles.length > 0) {\n      this._files = files.concat(newFiles[0]);\n      this.requestUpdate();\n      this._simulateUpload(newFiles[0]);\n    }\n  }\n\n  /**\n   * Handles `cds-file-uploader-item-deleted` on `<cds-file-uploader-item>`.\n   *\n   * @param event The event.\n   */\n  private _handleDelete(event: CustomEvent) {\n    const { fileId: idToDelete } = (event.target as HTMLElement).dataset;\n    this._files = this._files.filter(({ id }) => idToDelete !== id);\n    this.requestUpdate();\n  }\n\n  /**\n   * Simulates updating file.\n   *\n   * @param data The data of the file being uploaded.\n   */\n  private async _simulateUpload(data: FileData) {\n    const { id, file } = data;\n    if (file.size > 524288) {\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDITING,\n              invalid: true,\n              validityMessage: 'File size exceeds limit',\n              supplementalValidityMessage:\n                '500kb max file size. Select a new file and try again.',\n            }\n      );\n      this.requestUpdate();\n    } else {\n      // Simulates network request time\n      const rand = Math.random() * 1000;\n      await delay(rand);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.UPLOADED,\n            }\n      );\n      this.requestUpdate();\n      // Shows x icon after 1 second\n      await delay(1000);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDITING,\n            }\n      );\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * `true` if the drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The size of the file uploader items.\n   */\n  @property({ reflect: true })\n  size = FILE_UPLOADER_ITEM_SIZE.REGULAR;\n\n  render() {\n    const {\n      accept,\n      disabled,\n      helperText,\n      labelText,\n      multiple,\n      size,\n      _files: files,\n      _handleChange: handleChange,\n      _handleDelete: handleDelete,\n    } = this;\n    return html`\n      <cds-file-uploader\n        helper-text=\"${ifDefined(helperText)}\"\n        label-text=\"${ifDefined(labelText)}\">\n        <cds-file-drop-container\n          accept=\"${ifDefined(accept)}\"\n          ?disabled=\"${disabled}\"\n          ?multiple=\"${multiple}\"\n          @cds-file-drop-container-changed=\"${handleChange}\">\n          Drag and drop files here or click to upload\n        </cds-file-drop-container>\n        ${files.map(\n          ({\n            id,\n            invalid,\n            file,\n            state,\n            supplementalValidityMessage,\n            validityMessage,\n          }) => html`\n            <cds-file-uploader-item\n              data-file-id=\"${id}\"\n              ?invalid=\"${invalid}\"\n              size=\"${ifDefined(size)}\"\n              state=\"${ifDefined(state)}\"\n              validity-message=\"${ifDefined(validityMessage)}\"\n              @cds-file-uploader-item-deleted=\"${handleDelete}\">\n              ${file.name}\n              <span slot=\"validity-message-supplement\"\n                >${supplementalValidityMessage}</span\n              >\n            </cds-file-uploader-item>\n          `\n        )}\n      </cds-file-uploader>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"demo-file-uploader.js","names":["html","property","LitElement","customElement","delay","prefix","ifDefined","FILE_UPLOADER_ITEM_STATE","BUTTON_SIZE","CDSCEDemoFileUploader","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","_handleChange","event","addedFiles","detail","newFiles","map","item","id","Math","random","toString","slice","file","state","UPLOADING","multiple","_files","files","_simulateUpload","simulateUpload","concat","requestUpdate","forEach","length","_handleDelete","fileId","idToDelete","target","dataset","filter","data","size","_objectSpread","EDIT","invalid","errorSubject","errorBody","rand","COMPLETE","decorators","type","Boolean","reflect","attribute","MEDIUM","render","accept","button","buttonKind","buttonLabel","disabled","labelDescription","labelTitle","inputState","iconDescription","handleChange","handleDelete","_t","_","_t2","inputName","_t3","_t4","name","default"],"sources":["components/file-uploader/demo-file-uploader.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, LitElement, customElement } from 'lit-element';\n\nimport { delay } from 'bluebird';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined';\nimport './index';\nimport { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';\nimport { BUTTON_SIZE } from '../button/button';\nimport { FileData } from './stories/types';\n\n/**\n * A class to manage file uploading states, like sending file contents to server.\n * DEMONSTRATION-PURPOSE ONLY.\n * Data/state handling in file uploading tends to involve lots of application-specific logics\n * and thus abstracting everything in a library won't be a good return on investment\n * vs. letting users copy code here and implement features that fit their needs.\n */\n@customElement(`${prefix}-ce-demo-file-uploader`)\nexport default class CDSCEDemoFileUploader extends LitElement {\n  /**\n   * The files being uploaded.\n   */\n  private _files: FileData[] = [];\n\n  /**\n   * Handles `cds-drop-container-changed` on `<cds-file-drop-container>`.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: CustomEvent) {\n    const { addedFiles } = event.detail;\n    const newFiles: FileData[] = addedFiles.map(\n      (item) =>\n        ({\n          id: Math.random().toString(36).slice(2),\n          file: item,\n          state: FILE_UPLOADER_ITEM_STATE.UPLOADING,\n        } as FileData)\n    );\n    const { multiple, _files: files, _simulateUpload: simulateUpload } = this;\n    if (multiple) {\n      this._files = files.concat(newFiles);\n      this.requestUpdate();\n      newFiles.forEach(simulateUpload, this);\n    } else if (addedFiles.length > 0) {\n      this._files = files.concat(newFiles[0]);\n      this.requestUpdate();\n      this._simulateUpload(newFiles[0]);\n    }\n  }\n\n  /**\n   * Handles `cds-file-uploader-item-deleted` on `<cds-file-uploader-item>`.\n   *\n   * @param event The event.\n   */\n  private _handleDelete(event: CustomEvent) {\n    const { fileId: idToDelete } = (event.target as HTMLElement).dataset;\n    this._files = this._files.filter(({ id }) => idToDelete !== id);\n    this.requestUpdate();\n  }\n\n  /**\n   * Simulates updating file.\n   *\n   * @param data The data of the file being uploaded.\n   */\n  private async _simulateUpload(data: FileData) {\n    const { id, file } = data;\n    if (file.size > 524288) {\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDIT,\n              invalid: true,\n              errorSubject: 'File size exceeds limit',\n              errorBody:\n                '500kb max file size. Select a new file and try again.',\n            }\n      );\n      this.requestUpdate();\n    } else {\n      // Simulates network request time\n      const rand = Math.random() * 1000;\n      await delay(rand);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.COMPLETE,\n            }\n      );\n      this.requestUpdate();\n      // Shows x icon after 1 second\n      await delay(1000);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDIT,\n            }\n      );\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  button = false;\n\n  /**\n   * Button kind.\n   */\n  @property({ attribute: 'button-kind' })\n  buttonKind = 'primary';\n\n  /**\n   * Button label.\n   */\n  @property({ attribute: 'button-label' })\n  buttonLabel = 'Add file';\n\n  /**\n   * `true` if the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Icon description.\n   */\n  @property({ attribute: 'icon-description' })\n  iconDescription = '';\n\n  /**\n   * The input name.\n   */\n  @property({ attribute: 'input-name' })\n  inputName = '';\n\n  /**\n   * The label description text.\n   */\n  @property({ attribute: 'label-description' })\n  labelDescription = '';\n\n  /**\n   * The label title.\n   */\n  @property({ attribute: 'label-title' })\n  labelTitle = '';\n\n  /**\n   * `true` if the drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The size of the button item.\n   */\n  @property({ reflect: true })\n  size = BUTTON_SIZE.MEDIUM;\n\n  /**\n   * The state of this file uploader item.\n   */\n  @property({ reflect: true, attribute: 'input-state' })\n  inputState = '';\n\n  render() {\n    const {\n      accept,\n      button,\n      buttonKind,\n      buttonLabel,\n      disabled,\n      labelDescription,\n      labelTitle,\n      multiple,\n      size,\n      inputState,\n      iconDescription,\n      _files: files,\n      _handleChange: handleChange,\n      _handleDelete: handleDelete,\n    } = this;\n    return html`\n      <cds-file-uploader\n        label-description=\"${ifDefined(labelDescription)}\"\n        label-title=\"${ifDefined(labelTitle)}\"\n        ?disabled=\"${disabled}\">\n        ${!button\n          ? html` <cds-file-uploader-drop-container\n              accept=\"${ifDefined(accept)}\"\n              ?multiple=\"${multiple}\"\n              name=\"${ifDefined(this.inputName)}\"\n              @cds-file-uploader-drop-container-changed=\"${handleChange}\">\n              Drag and drop files here or click to upload\n            </cds-file-uploader-drop-container>`\n          : html` <cds-file-uploader-button\n              size=\"${ifDefined(size)}\"\n              button-kind=\"${buttonKind}\"\n              accept=\"${ifDefined(accept)}\"\n              name=\"${ifDefined(this.inputName)}\"\n              ?multiple=\"${multiple}\"\n              @cds-file-uploader-button-changed=\"${handleChange}\">\n              ${buttonLabel}\n            </cds-file-uploader-button>`}\n        ${files.map(\n          ({ id, invalid, file, state, errorSubject, errorBody }) => html`\n            <cds-file-uploader-item\n              data-file-id=\"${id}\"\n              ?invalid=\"${invalid}\"\n              state=\"${inputState || ifDefined(state)}\"\n              icon-description=\"${ifDefined(iconDescription)}\"\n              error-subject=\"${ifDefined(errorSubject)}\"\n              error-body=\"${ifDefined(errorBody)}\"\n              @cds-file-uploader-item-deleted=\"${handleDelete}\">\n              ${file.name}\n            </cds-file-uploader-item>\n          `\n        )}\n      </cds-file-uploader>\n    `;\n  }\n}\n"],"mappings":"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"}