@digital-realty/ix-file-uploader 1.1.15 → 1.3.1-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/IxFileUploader.js +46 -31
  2. package/dist/IxFileUploader.js.map +1 -1
  3. package/dist/ix-file-uploader.min.js +1 -61
  4. package/package.json +5 -7
package/dist/IxFileUploader.js CHANGED
@@ -182,17 +182,16 @@ export class IxFileUploader extends LitElement {
182
182
  ></ix-file-chip>`);
183
183
  const uploadedFileListClasses = {
184
184
  'uploaded-file-list': true,
185
- 'uploaded-file-list--spaced': !this.hideBody
185
+ 'uploaded-file-list--spaced': !this.hideBody,
186
186
  };
187
187
  return html `
188
- <ul class=${classMap(uploadedFileListClasses)}">
188
+ <ul class="${classMap(uploadedFileListClasses)}">
189
189
  ${chips}
190
- ${this.showTemplateFileLink ?
191
- html `<li class="ix-file-uploader__template-file">
192
- <slot name="template-file"></slot>
193
- </li>`
190
+ ${this.showTemplateFileLink
191
+ ? html `<li class="ix-file-uploader__template-file">
192
+ <slot name="template-file"></slot>
193
+ </li>`
194
194
  : nothing}
195
-
196
195
  </ul>
197
196
  ${this.renderDeleteBulkFileConfirmationDialog()}
198
197
  `;
@@ -211,14 +210,28 @@ export class IxFileUploader extends LitElement {
211
210
  id="deleteFileConfirmationDialog"
212
211
  ?open=${this.isDeleteBulkFileDialogOpen}
213
212
  preventCloseOnScrimClick="true"
214
- @closed=${() => { this.isDeleteBulkFileDialogOpen = false; }}
215
- @close=${() => { this.isDeleteBulkFileDialogOpen = false; }}
213
+ @closed=${() => {
214
+ this.isDeleteBulkFileDialogOpen = false;
215
+ }}
216
+ @close=${() => {
217
+ this.isDeleteBulkFileDialogOpen = false;
218
+ }}
216
219
  >
217
- <form slot="content" id="delete-file-id" method="dialog" class="delete-file-confirmation-dialog">
220
+ <form
221
+ slot="content"
222
+ id="delete-file-id"
223
+ method="dialog"
224
+ class="delete-file-confirmation-dialog"
225
+ >
218
226
  ${this.deleteConfirmationDialogLabel}
219
227
  </form>
220
228
  <div slot="actions">
221
- <ix-button appearance="text" @click=${() => { this.isDeleteBulkFileDialogOpen = false; }}>
229
+ <ix-button
230
+ appearance="text"
231
+ @click=${() => {
232
+ this.isDeleteBulkFileDialogOpen = false;
233
+ }}
234
+ >
222
235
  <span class="button-label">NO</span>
223
236
  </ix-button>
224
237
  <ix-button
@@ -235,7 +248,9 @@ export class IxFileUploader extends LitElement {
235
248
  if (!this.hintText) {
236
249
  return nothing;
237
250
  }
238
- return html `<div class="ix-file-uploader__hint-text">${this.hintText}</div>`;
251
+ return html `<div class="ix-file-uploader__hint-text">
252
+ ${this.hintText}
253
+ </div>`;
239
254
  }
240
255
  renderBody() {
241
256
  const accept = this.extensions.map(ext => `.${ext}`).join(', ');
@@ -243,25 +258,25 @@ export class IxFileUploader extends LitElement {
243
258
  'ix-file-uploader--hide-body': this.hideBody,
244
259
  };
245
260
  return html `<div class=${classMap(classes)}>
246
- <div
247
- class="dropzone"
248
- @click=${this.openFileUploadDialog}
249
- @keyup=${this.openFileUploadDialog}
250
- ${ref(this.dropzoneRef)}
251
- >
252
- <div class="ix-file-uploader__label">${this.headerText}</div>
253
- <div class="ix-file-uploader__help-text">${this.bodyText}</div>
254
- <input
255
- accept=${accept}
256
- class="file-input"
257
- ?multiple=${this.allowMultipleFiles}
258
- onchange=${(e) => this.onFileChange(e)}
259
- ${ref(this.fileRef)}
260
- type="file"
261
- />
262
- </div>
263
- ${this.renderHintText()}
264
- </div>`;
261
+ <div
262
+ class="dropzone"
263
+ @click=${this.openFileUploadDialog}
264
+ @keyup=${this.openFileUploadDialog}
265
+ ${ref(this.dropzoneRef)}
266
+ >
267
+ <div class="ix-file-uploader__label">${this.headerText}</div>
268
+ <div class="ix-file-uploader__help-text">${this.bodyText}</div>
269
+ <input
270
+ accept=${accept}
271
+ class="file-input"
272
+ ?multiple=${this.allowMultipleFiles}
273
+ onchange=${(e) => this.onFileChange(e)}
274
+ ${ref(this.fileRef)}
275
+ type="file"
276
+ />
277
+ </div>
278
+ ${this.renderHintText()}
279
+ </div>`;
265
280
  }
266
281
  render() {
267
282
  return html `<div
package/dist/IxFileUploader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxFileUploader.js","sourceRoot":"","sources":["../src/IxFileUploader.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport './ix-file-chip.js';\nimport DataStorageUnit from './data-storage-unit.js';\nimport FileInfo from './internal/file-info.js';\nimport FileUploadResult from './internal/file-upload-result.js';\nimport FileChangeInfo from './internal/file-change-info.js';\nimport FilesUploadedInfo from './internal/files-uploaded-info.js';\nimport getTotalBytes from './internal/get-total-bytes.js';\nimport { processFiles } from './internal/process-files.js';\nimport sortFilesAscending from './internal/sort-files-ascending.js';\nimport IxFileUploaderStyles from './styles/ix-file-uploader-styles.js';\nimport UploaderFile from './internal/uploader-file.js';\nimport '@digital-realty/ix-dialog/ix-dialog.js';\n\nexport class IxFileUploader extends LitElement {\n static readonly styles = [IxFileUploaderStyles];\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement).attachInternals();\n\n dropzoneRef: Ref<HTMLInputElement> = createRef();\n\n fileRef: Ref<HTMLInputElement> = createRef();\n\n @property({ type: Boolean }) showTemplateFileLink: boolean = false;\n\n @property({ type: Boolean }) allowMultipleFiles: boolean = false;\n\n @property({ type: Boolean }) allowDuplicates: boolean = false;\n\n @property() headerText: string = '';\n\n @property() bodyText: string = '';\n\n @property() hintText: string | undefined = undefined;\n\n @property({ type: Array }) defaultFiles: Array<UploaderFile> = [];\n\n @property({ type: Boolean }) allowDeleteDefaultFiles: boolean = false;\n\n @property({ type: Boolean }) hideBody: boolean = false;\n\n @property({ type: Array }) extensions: string[] = [];\n\n @property({ type: Number }) maxFileCount: number = 10;\n\n @property() maxFileSizeUnit: DataStorageUnit = DataStorageUnit.MB;\n\n @property({ type: Number }) maxFileSizeValue: number = 10;\n\n @property() name: string = 'ix-file-uploader';\n\n @property({ type: Boolean }) error: boolean = false;\n\n @property({ type: Boolean }) askConfirmationOnDeleteFile: boolean = false;\n\n @property() deleteConfirmationDialogLabel: string = 'Are you sure you want to delete your upload file?';\n\n @state() isDeleteBulkFileDialogOpen: boolean = false;\n\n @state() pendingFileDeletion: UploaderFile | undefined = undefined;\n\n @state() files: Array<UploaderFile> = [];\n\n private maxFileSizeInBytes: number = 0;\n\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n // called when the user drops files on the dropzone\n private onDrop(e: DragEvent): void {\n e.preventDefault();\n\n if (!e.dataTransfer) {\n return; // no files dropped\n }\n\n const filesToProcess = Array.from(e.dataTransfer.files);\n\n this.process(filesToProcess);\n }\n\n // This is called when the user selects files from the file dialog\n private onFileChange(e: Event): void {\n const fileList = (e.currentTarget as any).files as FileList;\n\n const filesToProcess = Array.from(fileList);\n\n this.process(filesToProcess);\n\n // clear the files from the file input; we are tracking state at the component level, not in the file input\n this.fileRef.value!.files = new DataTransfer().files;\n }\n\n get allowedMaxFileCount(): number {\n return this.allowMultipleFiles ? this.maxFileCount : 1;\n }\n\n // common method for processing files which are dropped or selected from file input dialog\n private process(filesToProcess: Array<File>): void {\n const results = processFiles({\n currentFiles: this.files,\n extensions: this.extensions,\n filesToProcess,\n maxFileCount: this.allowedMaxFileCount,\n maxFileSizeInBytes: this.maxFileSizeInBytes,\n allowDuplicates: this.allowDuplicates,\n });\n\n this.updateState(results);\n\n this.onFilesUploaded(results);\n }\n\n private updateState(results: Array<FileUploadResult> = []): void {\n const filesToUpload: Array<UploaderFile> = [];\n\n results.forEach(result => {\n if (result.uploaded) {\n filesToUpload.push(Object.assign(result.file, { id: result.id }));\n }\n });\n\n // handle multiple file setting\n if (this.allowMultipleFiles) {\n this.files = [...this.files, ...filesToUpload];\n return;\n }\n\n // handle single file setting\n if (filesToUpload.length) {\n const file = filesToUpload[0];\n this.files = [file];\n }\n }\n\n private onFilesUploaded(results: Array<FileUploadResult>): void {\n const event = new CustomEvent<FilesUploadedInfo>('on-files-uploaded', {\n detail: {\n allFiles: this.files,\n filesUploaded: results.filter(result => result.uploaded),\n filesNotUploaded: results.filter(result => !result.uploaded),\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onFileClick(e: CustomEvent<FileInfo>): void {\n const event = new CustomEvent<FileChangeInfo>('on-file-clicked', {\n detail: { allFiles: this.files, file: e.detail.file },\n });\n\n this.dispatchEvent(event);\n }\n\n private onFileDelete(e: CustomEvent<FileInfo>): void {\n this.pendingFileDeletion = e.detail.file;\n\n if(this.askConfirmationOnDeleteFile) {\n this.isDeleteBulkFileDialogOpen = true;\n return;\n }\n \n this.handleDeleteBulkFile();\n }\n \n handleDeleteBulkFile() {\n this.files = [...this.files].filter(file => file.id !== this.pendingFileDeletion?.id);\n\n const event = new CustomEvent<FileChangeInfo>('on-file-removed', {\n detail: { allFiles: this.files, file: this.pendingFileDeletion },\n });\n\n this.isDeleteBulkFileDialogOpen = false;\n this.dispatchEvent(event);\n }\n\n public deleteLastFileWithoutConfirmation(): void {\n if (this.files.length === 0) {\n return; // no files to delete\n }\n\n this.pendingFileDeletion = this.files[this.files.length - 1];\n\n this.handleDeleteBulkFile();\n }\n\n private openFileUploadDialog(): void {\n this.fileRef.value?.click();\n }\n\n protected override firstUpdated(): void {\n this.files = [...this.defaultFiles];\n\n // connect the dropzone\n const dropzone = this.dropzoneRef.value;\n if (dropzone) {\n dropzone.addEventListener('dragenter', e => e.preventDefault());\n dropzone.addEventListener('dragover', e => e.preventDefault());\n dropzone.addEventListener('drop', this.onDrop.bind(this));\n }\n\n // connect the file input\n const fileElem = this.fileRef.value;\n if (fileElem) {\n fileElem.addEventListener('change', this.onFileChange.bind(this));\n }\n\n // calculate the maxBytes based on props\n // Calculate the max file size in bytes to use for checking if files are too large\n const totalBytesForStorageUnit = getTotalBytes(this.maxFileSizeUnit);\n this.maxFileSizeInBytes = this.maxFileSizeValue * totalBytesForStorageUnit;\n }\n\n protected update(changedProperties: PropertyValues) {\n super.update(changedProperties);\n\n if (changedProperties.has('defaultFiles')) {\n this.files = [\n ...this.files.filter(\n file => !this.defaultFiles.some(x => x.name === file.name)\n ),\n ...this.defaultFiles,\n ];\n }\n }\n\n isFileDeletable(file: UploaderFile): boolean {\n if (this.defaultFiles.some(x => x.name === file.name)) {\n return this.allowDeleteDefaultFiles;\n }\n\n return true;\n }\n\n private renderFileList(files: Array<UploaderFile> = []): TemplateResult<1> {\n const sortedFiles = sortFilesAscending(files);\n const chips = sortedFiles.map(\n (file?: UploaderFile) => html`<ix-file-chip\n .file=${file}\n .deletable=${this.isFileDeletable(file!)}\n @on-file-click=${this.onFileClick}\n @on-file-delete=${this.onFileDelete}\n ></ix-file-chip>`\n );\n\n const uploadedFileListClasses = {\n 'uploaded-file-list': true,\n 'uploaded-file-list--spaced': !this.hideBody\n };\n\n return html`\n <ul class=${classMap(uploadedFileListClasses)}\">\n ${chips}\n ${this.showTemplateFileLink ? \n html`<li class=\"ix-file-uploader__template-file\">\n <slot name=\"template-file\"></slot>\n </li>` \n : nothing}\n\n </ul>\n ${this.renderDeleteBulkFileConfirmationDialog()}\n `;\n }\n\n protected override updated(_: PropertyValues) {\n const formData = new FormData();\n\n this.files.forEach(file => {\n formData.append(`${this.name}[]`, file);\n });\n\n this.internals.setFormValue(formData);\n }\n\n renderDeleteBulkFileConfirmationDialog() {\n if(!this.askConfirmationOnDeleteFile) return nothing;\n\n return html`<ix-dialog\n id=\"deleteFileConfirmationDialog\"\n ?open=${this.isDeleteBulkFileDialogOpen}\n preventCloseOnScrimClick=\"true\"\n @closed=${() => { this.isDeleteBulkFileDialogOpen = false; }}\n @close=${() => { this.isDeleteBulkFileDialogOpen = false; }}\n >\n <form slot=\"content\" id=\"delete-file-id\" method=\"dialog\" class=\"delete-file-confirmation-dialog\">\n ${this.deleteConfirmationDialogLabel}\n </form>\n <div slot=\"actions\">\n <ix-button appearance=\"text\" @click=${() => { this.isDeleteBulkFileDialogOpen = false; }}>\n <span class=\"button-label\">NO</span>\n </ix-button>\n <ix-button\n appearance=\"text\"\n name=\"submitBtn\"\n @click=${() => this.handleDeleteBulkFile()}\n >\n <span class=\"button-label\">YES</span>\n </ix-button>\n </div>\n </ix-dialog>`;\n }\n\n renderHintText(){\n if (!this.hintText) {\n return nothing;\n }\n\n return html`<div class=\"ix-file-uploader__hint-text\">${this.hintText}</div>`;\n }\n\n renderBody() {\n const accept = this.extensions.map(ext => `.${ext}`).join(', ');\n\n const classes = {\n 'ix-file-uploader--hide-body': this.hideBody,\n };\n\n return html`<div class=${classMap(classes)}>\n <div\n class=\"dropzone\"\n @click=${this.openFileUploadDialog}\n @keyup=${this.openFileUploadDialog}\n ${ref(this.dropzoneRef)}\n >\n <div class=\"ix-file-uploader__label\">${this.headerText}</div>\n <div class=\"ix-file-uploader__help-text\">${this.bodyText}</div>\n <input\n accept=${accept}\n class=\"file-input\"\n ?multiple=${this.allowMultipleFiles}\n onchange=${(e: Event) => this.onFileChange(e)}\n ${ref(this.fileRef)}\n type=\"file\"\n />\n </div>\n ${this.renderHintText()}\n </div>`;\n }\n\n protected render(): TemplateResult<1> {\n\n return html`<div\n class=${classMap({ 'ix-file-uploader': true, error: this.error })}\n >\n ${this.renderBody()}\n ${this.files.length ? this.renderFileList(this.files) : nothing}\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"IxFileUploader.js","sourceRoot":"","sources":["../src/IxFileUploader.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport './ix-file-chip.js';\nimport DataStorageUnit from './data-storage-unit.js';\nimport FileInfo from './internal/file-info.js';\nimport FileUploadResult from './internal/file-upload-result.js';\nimport FileChangeInfo from './internal/file-change-info.js';\nimport FilesUploadedInfo from './internal/files-uploaded-info.js';\nimport getTotalBytes from './internal/get-total-bytes.js';\nimport { processFiles } from './internal/process-files.js';\nimport sortFilesAscending from './internal/sort-files-ascending.js';\nimport IxFileUploaderStyles from './styles/ix-file-uploader-styles.js';\nimport UploaderFile from './internal/uploader-file.js';\nimport '@digital-realty/ix-dialog/ix-dialog.js';\n\nexport class IxFileUploader extends LitElement {\n static readonly styles = [IxFileUploaderStyles];\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement).attachInternals();\n\n dropzoneRef: Ref<HTMLInputElement> = createRef();\n\n fileRef: Ref<HTMLInputElement> = createRef();\n\n @property({ type: Boolean }) showTemplateFileLink: boolean = false;\n\n @property({ type: Boolean }) allowMultipleFiles: boolean = false;\n\n @property({ type: Boolean }) allowDuplicates: boolean = false;\n\n @property() headerText: string = '';\n\n @property() bodyText: string = '';\n\n @property() hintText: string | undefined = undefined;\n\n @property({ type: Array }) defaultFiles: Array<UploaderFile> = [];\n\n @property({ type: Boolean }) allowDeleteDefaultFiles: boolean = false;\n\n @property({ type: Boolean }) hideBody: boolean = false;\n\n @property({ type: Array }) extensions: string[] = [];\n\n @property({ type: Number }) maxFileCount: number = 10;\n\n @property() maxFileSizeUnit: DataStorageUnit = DataStorageUnit.MB;\n\n @property({ type: Number }) maxFileSizeValue: number = 10;\n\n @property() name: string = 'ix-file-uploader';\n\n @property({ type: Boolean }) error: boolean = false;\n\n @property({ type: Boolean }) askConfirmationOnDeleteFile: boolean = false;\n\n @property() deleteConfirmationDialogLabel: string =\n 'Are you sure you want to delete your upload file?';\n\n @state() isDeleteBulkFileDialogOpen: boolean = false;\n\n @state() pendingFileDeletion: UploaderFile | undefined = undefined;\n\n @state() files: Array<UploaderFile> = [];\n\n private maxFileSizeInBytes: number = 0;\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n // called when the user drops files on the dropzone\n private onDrop(e: DragEvent): void {\n e.preventDefault();\n\n if (!e.dataTransfer) {\n return; // no files dropped\n }\n\n const filesToProcess = Array.from(e.dataTransfer.files);\n\n this.process(filesToProcess);\n }\n\n // This is called when the user selects files from the file dialog\n private onFileChange(e: Event): void {\n const fileList = (e.currentTarget as any).files as FileList;\n\n const filesToProcess = Array.from(fileList);\n\n this.process(filesToProcess);\n\n // clear the files from the file input; we are tracking state at the component level, not in the file input\n this.fileRef.value!.files = new DataTransfer().files;\n }\n\n get allowedMaxFileCount(): number {\n return this.allowMultipleFiles ? this.maxFileCount : 1;\n }\n\n // common method for processing files which are dropped or selected from file input dialog\n private process(filesToProcess: Array<File>): void {\n const results = processFiles({\n currentFiles: this.files,\n extensions: this.extensions,\n filesToProcess,\n maxFileCount: this.allowedMaxFileCount,\n maxFileSizeInBytes: this.maxFileSizeInBytes,\n allowDuplicates: this.allowDuplicates,\n });\n\n this.updateState(results);\n\n this.onFilesUploaded(results);\n }\n\n private updateState(results: Array<FileUploadResult> = []): void {\n const filesToUpload: Array<UploaderFile> = [];\n\n results.forEach(result => {\n if (result.uploaded) {\n filesToUpload.push(Object.assign(result.file, { id: result.id }));\n }\n });\n\n // handle multiple file setting\n if (this.allowMultipleFiles) {\n this.files = [...this.files, ...filesToUpload];\n return;\n }\n\n // handle single file setting\n if (filesToUpload.length) {\n const file = filesToUpload[0];\n this.files = [file];\n }\n }\n\n private onFilesUploaded(results: Array<FileUploadResult>): void {\n const event = new CustomEvent<FilesUploadedInfo>('on-files-uploaded', {\n detail: {\n allFiles: this.files,\n filesUploaded: results.filter(result => result.uploaded),\n filesNotUploaded: results.filter(result => !result.uploaded),\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onFileClick(e: CustomEvent<FileInfo>): void {\n const event = new CustomEvent<FileChangeInfo>('on-file-clicked', {\n detail: { allFiles: this.files, file: e.detail.file },\n });\n\n this.dispatchEvent(event);\n }\n\n private onFileDelete(e: CustomEvent<FileInfo>): void {\n this.pendingFileDeletion = e.detail.file;\n\n if (this.askConfirmationOnDeleteFile) {\n this.isDeleteBulkFileDialogOpen = true;\n return;\n }\n\n this.handleDeleteBulkFile();\n }\n\n handleDeleteBulkFile() {\n this.files = [...this.files].filter(\n file => file.id !== this.pendingFileDeletion?.id\n );\n\n const event = new CustomEvent<FileChangeInfo>('on-file-removed', {\n detail: { allFiles: this.files, file: this.pendingFileDeletion },\n });\n\n this.isDeleteBulkFileDialogOpen = false;\n this.dispatchEvent(event);\n }\n\n public deleteLastFileWithoutConfirmation(): void {\n if (this.files.length === 0) {\n return; // no files to delete\n }\n\n this.pendingFileDeletion = this.files[this.files.length - 1];\n\n this.handleDeleteBulkFile();\n }\n\n private openFileUploadDialog(): void {\n this.fileRef.value?.click();\n }\n\n protected override firstUpdated(): void {\n this.files = [...this.defaultFiles];\n\n // connect the dropzone\n const dropzone = this.dropzoneRef.value;\n if (dropzone) {\n dropzone.addEventListener('dragenter', e => e.preventDefault());\n dropzone.addEventListener('dragover', e => e.preventDefault());\n dropzone.addEventListener('drop', this.onDrop.bind(this));\n }\n\n // connect the file input\n const fileElem = this.fileRef.value;\n if (fileElem) {\n fileElem.addEventListener('change', this.onFileChange.bind(this));\n }\n\n // calculate the maxBytes based on props\n // Calculate the max file size in bytes to use for checking if files are too large\n const totalBytesForStorageUnit = getTotalBytes(this.maxFileSizeUnit);\n this.maxFileSizeInBytes = this.maxFileSizeValue * totalBytesForStorageUnit;\n }\n\n protected update(changedProperties: PropertyValues) {\n super.update(changedProperties);\n\n if (changedProperties.has('defaultFiles')) {\n this.files = [\n ...this.files.filter(\n file => !this.defaultFiles.some(x => x.name === file.name)\n ),\n ...this.defaultFiles,\n ];\n }\n }\n\n isFileDeletable(file: UploaderFile): boolean {\n if (this.defaultFiles.some(x => x.name === file.name)) {\n return this.allowDeleteDefaultFiles;\n }\n\n return true;\n }\n\n private renderFileList(files: Array<UploaderFile> = []): TemplateResult<1> {\n const sortedFiles = sortFilesAscending(files);\n const chips = sortedFiles.map(\n (file?: UploaderFile) => html`<ix-file-chip\n .file=${file}\n .deletable=${this.isFileDeletable(file!)}\n @on-file-click=${this.onFileClick}\n @on-file-delete=${this.onFileDelete}\n ></ix-file-chip>`\n );\n\n const uploadedFileListClasses = {\n 'uploaded-file-list': true,\n 'uploaded-file-list--spaced': !this.hideBody,\n };\n\n return html`\n <ul class=\"${classMap(uploadedFileListClasses)}\">\n ${chips}\n ${this.showTemplateFileLink\n ? html`<li class=\"ix-file-uploader__template-file\">\n <slot name=\"template-file\"></slot>\n </li>`\n : nothing}\n </ul>\n ${this.renderDeleteBulkFileConfirmationDialog()}\n `;\n }\n\n protected override updated(_: PropertyValues) {\n const formData = new FormData();\n\n this.files.forEach(file => {\n formData.append(`${this.name}[]`, file);\n });\n\n this.internals.setFormValue(formData);\n }\n\n renderDeleteBulkFileConfirmationDialog() {\n if (!this.askConfirmationOnDeleteFile) return nothing;\n\n return html`<ix-dialog\n id=\"deleteFileConfirmationDialog\"\n ?open=${this.isDeleteBulkFileDialogOpen}\n preventCloseOnScrimClick=\"true\"\n @closed=${() => {\n this.isDeleteBulkFileDialogOpen = false;\n }}\n @close=${() => {\n this.isDeleteBulkFileDialogOpen = false;\n }}\n >\n <form\n slot=\"content\"\n id=\"delete-file-id\"\n method=\"dialog\"\n class=\"delete-file-confirmation-dialog\"\n >\n ${this.deleteConfirmationDialogLabel}\n </form>\n <div slot=\"actions\">\n <ix-button\n appearance=\"text\"\n @click=${() => {\n this.isDeleteBulkFileDialogOpen = false;\n }}\n >\n <span class=\"button-label\">NO</span>\n </ix-button>\n <ix-button\n appearance=\"text\"\n name=\"submitBtn\"\n @click=${() => this.handleDeleteBulkFile()}\n >\n <span class=\"button-label\">YES</span>\n </ix-button>\n </div>\n </ix-dialog>`;\n }\n\n renderHintText() {\n if (!this.hintText) {\n return nothing;\n }\n\n return html`<div class=\"ix-file-uploader__hint-text\">\n ${this.hintText}\n </div>`;\n }\n\n renderBody() {\n const accept = this.extensions.map(ext => `.${ext}`).join(', ');\n\n const classes = {\n 'ix-file-uploader--hide-body': this.hideBody,\n };\n\n return html`<div class=${classMap(classes)}>\n <div\n class=\"dropzone\"\n @click=${this.openFileUploadDialog}\n @keyup=${this.openFileUploadDialog}\n ${ref(this.dropzoneRef)}\n >\n <div class=\"ix-file-uploader__label\">${this.headerText}</div>\n <div class=\"ix-file-uploader__help-text\">${this.bodyText}</div>\n <input\n accept=${accept}\n class=\"file-input\"\n ?multiple=${this.allowMultipleFiles}\n onchange=${(e: Event) => this.onFileChange(e)}\n ${ref(this.fileRef)}\n type=\"file\"\n />\n </div>\n ${this.renderHintText()}\n </div>`;\n }\n\n protected render(): TemplateResult<1> {\n return html`<div\n class=${classMap({ 'ix-file-uploader': true, error: this.error })}\n >\n ${this.renderBody()}\n ${this.files.length ? this.renderFileList(this.files) : nothing}\n </div>`;\n }\n}\n"]}
package/dist/ix-file-uploader.min.js CHANGED
@@ -7,64 +7,4 @@ import{__decorate}from"tslib";import{css,svg,LitElement,nothing,html}from"lit";i
7
7
  );font-size:var(--ix-file-uploader-label-font-size,var(--text-small-size,.75rem));font-style:normal;font-weight:var(--ix-file-uploader-label-font-weight,700);line-height:var(--ix-file-uploader-label-line-height,var(--text-small-line-height,16px));letter-spacing:var(--ix-file-uploader-label-letter-spacing,var(--text-small-letter-spacing,1.25px));text-align:center;text-transform:var(--ix-file-uploader-label-text-transform,uppercase);margin:auto;width:var(--ix-file-uploader-label-width,100%)}.ix-file-uploader__help-text{color:var(--ix-file-uploader-help-color, var(--clr-on-surface, 'inherit'));font-family:var(
8
8
  --ix-file-uploader-help-font-family,
9
9
  var(--root-secondary-font, 'inherit')
10
- );font-size:var(--ix-file-uploader-help-font-size,var(--text-small-size,.75rem));line-height:var(--ix-file-uploader-help-line-height,var(--text-small-line-height,16px));letter-spacing:var(--ix-file-uploader-help-letter-spacing,var(--text-small-letter-spacing,1.25px));text-align:center}.uploaded-file-list{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0}.uploaded-file-list--spaced{margin-top:32px}.file-input{opacity:0;border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}.error .dropzone{border-color:var(--md-sys-color-error)}.ix-file-uploader__hint-text{font-family:var(--root-primary-font, 'inherit') font-weight: 400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:.5rem;color:var(--clr-on-surface, 'inherit')}.ix-file-uploader__template-file{display:flex;align-items:center}.delete-file-confirmation-dialog{max-width:560px;font-family:var(--root-secondary-font, 'Red Hat Display');font-weight:700;font-size:20px;leading-trim:NONE;line-height:24px;letter-spacing:.15px}`;class IxFileUploader extends LitElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.dropzoneRef=createRef(),this.fileRef=createRef(),this.showTemplateFileLink=!1,this.allowMultipleFiles=!1,this.allowDuplicates=!1,this.headerText="",this.bodyText="",this.hintText=void 0,this.defaultFiles=[],this.allowDeleteDefaultFiles=!1,this.hideBody=!1,this.extensions=[],this.maxFileCount=10,this.maxFileSizeUnit=DataStorageUnit$1.MB,this.maxFileSizeValue=10,this.name="ix-file-uploader",this.error=!1,this.askConfirmationOnDeleteFile=!1,this.deleteConfirmationDialogLabel="Are you sure you want to delete your upload file?",this.isDeleteBulkFileDialogOpen=!1,this.pendingFileDeletion=void 0,this.files=[],this.maxFileSizeInBytes=0}get form(){return this.internals.form}onDrop(e){e.preventDefault(),e.dataTransfer&&(e=Array.from(e.dataTransfer.files),this.process(e))}onFileChange(e){e=e.currentTarget.files,e=Array.from(e);this.process(e),this.fileRef.value.files=(new DataTransfer).files}get allowedMaxFileCount(){return this.allowMultipleFiles?this.maxFileCount:1}process(e){e=processFiles({currentFiles:this.files,extensions:this.extensions,filesToProcess:e,maxFileCount:this.allowedMaxFileCount,maxFileSizeInBytes:this.maxFileSizeInBytes,allowDuplicates:this.allowDuplicates});this.updateState(e),this.onFilesUploaded(e)}updateState(e=[]){let i=[];e.forEach(e=>{e.uploaded&&i.push(Object.assign(e.file,{id:e.id}))}),this.allowMultipleFiles?this.files=[...this.files,...i]:i.length&&(e=i[0],this.files=[e])}onFilesUploaded(e){e=new CustomEvent("on-files-uploaded",{detail:{allFiles:this.files,filesUploaded:e.filter(e=>e.uploaded),filesNotUploaded:e.filter(e=>!e.uploaded)}});this.dispatchEvent(e)}onFileClick(e){e=new CustomEvent("on-file-clicked",{detail:{allFiles:this.files,file:e.detail.file}});this.dispatchEvent(e)}onFileDelete(e){this.pendingFileDeletion=e.detail.file,this.askConfirmationOnDeleteFile?this.isDeleteBulkFileDialogOpen=!0:this.handleDeleteBulkFile()}handleDeleteBulkFile(){this.files=[...this.files].filter(e=>e.id!==(null==(e=this.pendingFileDeletion)?void 0:e.id));var e=new CustomEvent("on-file-removed",{detail:{allFiles:this.files,file:this.pendingFileDeletion}});this.isDeleteBulkFileDialogOpen=!1,this.dispatchEvent(e)}deleteLastFileWithoutConfirmation(){0!==this.files.length&&(this.pendingFileDeletion=this.files[this.files.length-1],this.handleDeleteBulkFile())}openFileUploadDialog(){var e;null!=(e=this.fileRef.value)&&e.click()}firstUpdated(){this.files=[...this.defaultFiles];var e=this.dropzoneRef.value,e=(e&&(e.addEventListener("dragenter",e=>e.preventDefault()),e.addEventListener("dragover",e=>e.preventDefault()),e.addEventListener("drop",this.onDrop.bind(this))),this.fileRef.value),e=(e&&e.addEventListener("change",this.onFileChange.bind(this)),getTotalBytes(this.maxFileSizeUnit));this.maxFileSizeInBytes=this.maxFileSizeValue*e}update(e){super.update(e),e.has("defaultFiles")&&(this.files=[...this.files.filter(i=>!this.defaultFiles.some(e=>e.name===i.name)),...this.defaultFiles])}isFileDeletable(i){return!this.defaultFiles.some(e=>e.name===i.name)||this.allowDeleteDefaultFiles}renderFileList(e=[]){var e=sortFilesAscending(e).map(e=>html`<ix-file-chip
11
- .file=${e}
12
- .deletable=${this.isFileDeletable(e)}
13
- @on-file-click=${this.onFileClick}
14
- @on-file-delete=${this.onFileDelete}
15
- ></ix-file-chip>`),i={"uploaded-file-list":!0,"uploaded-file-list--spaced":!this.hideBody};return html`
16
- <ul class=${classMap(i)}">
17
- ${e}
18
- ${this.showTemplateFileLink?html`<li class="ix-file-uploader__template-file">
19
- <slot name="template-file"></slot>
20
- </li>`:nothing}
21
-
22
- </ul>
23
- ${this.renderDeleteBulkFileConfirmationDialog()}
24
- `}updated(e){let i=new FormData;this.files.forEach(e=>{i.append(this.name+"[]",e)}),this.internals.setFormValue(i)}renderDeleteBulkFileConfirmationDialog(){return this.askConfirmationOnDeleteFile?html`<ix-dialog
25
- id="deleteFileConfirmationDialog"
26
- ?open=${this.isDeleteBulkFileDialogOpen}
27
- preventCloseOnScrimClick="true"
28
- @closed=${()=>{this.isDeleteBulkFileDialogOpen=!1}}
29
- @close=${()=>{this.isDeleteBulkFileDialogOpen=!1}}
30
- >
31
- <form slot="content" id="delete-file-id" method="dialog" class="delete-file-confirmation-dialog">
32
- ${this.deleteConfirmationDialogLabel}
33
- </form>
34
- <div slot="actions">
35
- <ix-button appearance="text" @click=${()=>{this.isDeleteBulkFileDialogOpen=!1}}>
36
- <span class="button-label">NO</span>
37
- </ix-button>
38
- <ix-button
39
- appearance="text"
40
- name="submitBtn"
41
- @click=${()=>this.handleDeleteBulkFile()}
42
- >
43
- <span class="button-label">YES</span>
44
- </ix-button>
45
- </div>
46
- </ix-dialog>`:nothing}renderHintText(){return this.hintText?html`<div class="ix-file-uploader__hint-text">${this.hintText}</div>`:nothing}renderBody(){var e=this.extensions.map(e=>"."+e).join(", "),i={"ix-file-uploader--hide-body":this.hideBody};return html`<div class=${classMap(i)}>
47
- <div
48
- class="dropzone"
49
- @click=${this.openFileUploadDialog}
50
- @keyup=${this.openFileUploadDialog}
51
- ${ref(this.dropzoneRef)}
52
- >
53
- <div class="ix-file-uploader__label">${this.headerText}</div>
54
- <div class="ix-file-uploader__help-text">${this.bodyText}</div>
55
- <input
56
- accept=${e}
57
- class="file-input"
58
- ?multiple=${this.allowMultipleFiles}
59
- onchange=${e=>this.onFileChange(e)}
60
- ${ref(this.fileRef)}
61
- type="file"
62
- />
63
- </div>
64
- ${this.renderHintText()}
65
- </div>`}render(){return html`<div
66
- class=${classMap({"ix-file-uploader":!0,error:this.error})}
67
- >
68
- ${this.renderBody()}
69
- ${this.files.length?this.renderFileList(this.files):nothing}
70
- </div>`}}IxFileUploader.styles=[IxFileUploaderStyles],IxFileUploader.formAssociated=!0,__decorate([property({type:Boolean})],IxFileUploader.prototype,"showTemplateFileLink",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowMultipleFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowDuplicates",void 0),__decorate([property()],IxFileUploader.prototype,"headerText",void 0),__decorate([property()],IxFileUploader.prototype,"bodyText",void 0),__decorate([property()],IxFileUploader.prototype,"hintText",void 0),__decorate([property({type:Array})],IxFileUploader.prototype,"defaultFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowDeleteDefaultFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"hideBody",void 0),__decorate([property({type:Array})],IxFileUploader.prototype,"extensions",void 0),__decorate([property({type:Number})],IxFileUploader.prototype,"maxFileCount",void 0),__decorate([property()],IxFileUploader.prototype,"maxFileSizeUnit",void 0),__decorate([property({type:Number})],IxFileUploader.prototype,"maxFileSizeValue",void 0),__decorate([property()],IxFileUploader.prototype,"name",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"error",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"askConfirmationOnDeleteFile",void 0),__decorate([property()],IxFileUploader.prototype,"deleteConfirmationDialogLabel",void 0),__decorate([state()],IxFileUploader.prototype,"isDeleteBulkFileDialogOpen",void 0),__decorate([state()],IxFileUploader.prototype,"pendingFileDeletion",void 0),__decorate([state()],IxFileUploader.prototype,"files",void 0),customElements.define("ix-file-uploader",IxFileUploader);
10
+ );font-size:var(--ix-file-uploader-help-font-size,var(--text-small-size,.75rem));line-height:var(--ix-file-uploader-help-line-height,var(--text-small-line-height,16px));letter-spacing:var(--ix-file-uploader-help-letter-spacing,var(--text-small-letter-spacing,1.25px));text-align:center}.uploaded-file-list{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0}.uploaded-file-list--spaced{margin-top:32px}.file-input{opacity:0;border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}.error .dropzone{border-color:var(--md-sys-color-error)}.ix-file-uploader__hint-text{font-family:var(--root-primary-font, 'inherit') font-weight: 400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:.5rem;color:var(--clr-on-surface, 'inherit')}.ix-file-uploader__template-file{display:flex;align-items:center}.delete-file-confirmation-dialog{max-width:560px;font-family:var(--root-secondary-font, 'Red Hat Display');font-weight:700;font-size:20px;leading-trim:NONE;line-height:24px;letter-spacing:.15px}`;class IxFileUploader extends LitElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.dropzoneRef=createRef(),this.fileRef=createRef(),this.showTemplateFileLink=!1,this.allowMultipleFiles=!1,this.allowDuplicates=!1,this.headerText="",this.bodyText="",this.hintText=void 0,this.defaultFiles=[],this.allowDeleteDefaultFiles=!1,this.hideBody=!1,this.extensions=[],this.maxFileCount=10,this.maxFileSizeUnit=DataStorageUnit$1.MB,this.maxFileSizeValue=10,this.name="ix-file-uploader",this.error=!1,this.askConfirmationOnDeleteFile=!1,this.deleteConfirmationDialogLabel="Are you sure you want to delete your upload file?",this.isDeleteBulkFileDialogOpen=!1,this.pendingFileDeletion=void 0,this.files=[],this.maxFileSizeInBytes=0}get form(){return this.internals.form}onDrop(e){e.preventDefault(),e.dataTransfer&&(e=Array.from(e.dataTransfer.files),this.process(e))}onFileChange(e){e=e.currentTarget.files,e=Array.from(e);this.process(e),this.fileRef.value.files=(new DataTransfer).files}get allowedMaxFileCount(){return this.allowMultipleFiles?this.maxFileCount:1}process(e){e=processFiles({currentFiles:this.files,extensions:this.extensions,filesToProcess:e,maxFileCount:this.allowedMaxFileCount,maxFileSizeInBytes:this.maxFileSizeInBytes,allowDuplicates:this.allowDuplicates});this.updateState(e),this.onFilesUploaded(e)}updateState(e=[]){let i=[];e.forEach(e=>{e.uploaded&&i.push(Object.assign(e.file,{id:e.id}))}),this.allowMultipleFiles?this.files=[...this.files,...i]:i.length&&(e=i[0],this.files=[e])}onFilesUploaded(e){e=new CustomEvent("on-files-uploaded",{detail:{allFiles:this.files,filesUploaded:e.filter(e=>e.uploaded),filesNotUploaded:e.filter(e=>!e.uploaded)}});this.dispatchEvent(e)}onFileClick(e){e=new CustomEvent("on-file-clicked",{detail:{allFiles:this.files,file:e.detail.file}});this.dispatchEvent(e)}onFileDelete(e){this.pendingFileDeletion=e.detail.file,this.askConfirmationOnDeleteFile?this.isDeleteBulkFileDialogOpen=!0:this.handleDeleteBulkFile()}handleDeleteBulkFile(){this.files=[...this.files].filter(e=>e.id!==(null==(e=this.pendingFileDeletion)?void 0:e.id));var e=new CustomEvent("on-file-removed",{detail:{allFiles:this.files,file:this.pendingFileDeletion}});this.isDeleteBulkFileDialogOpen=!1,this.dispatchEvent(e)}deleteLastFileWithoutConfirmation(){0!==this.files.length&&(this.pendingFileDeletion=this.files[this.files.length-1],this.handleDeleteBulkFile())}openFileUploadDialog(){var e;null!=(e=this.fileRef.value)&&e.click()}firstUpdated(){this.files=[...this.defaultFiles];var e=this.dropzoneRef.value,e=(e&&(e.addEventListener("dragenter",e=>e.preventDefault()),e.addEventListener("dragover",e=>e.preventDefault()),e.addEventListener("drop",this.onDrop.bind(this))),this.fileRef.value),e=(e&&e.addEventListener("change",this.onFileChange.bind(this)),getTotalBytes(this.maxFileSizeUnit));this.maxFileSizeInBytes=this.maxFileSizeValue*e}update(e){super.update(e),e.has("defaultFiles")&&(this.files=[...this.files.filter(i=>!this.defaultFiles.some(e=>e.name===i.name)),...this.defaultFiles])}isFileDeletable(i){return!this.defaultFiles.some(e=>e.name===i.name)||this.allowDeleteDefaultFiles}renderFileList(e=[]){var e=sortFilesAscending(e).map(e=>html`<ix-file-chip .file="${e}" .deletable="${this.isFileDeletable(e)}" @on-file-click="${this.onFileClick}" @on-file-delete="${this.onFileDelete}"></ix-file-chip>`),i={"uploaded-file-list":!0,"uploaded-file-list--spaced":!this.hideBody};return html`<ul class="${classMap(i)}">${e} ${this.showTemplateFileLink?html`<li class="ix-file-uploader__template-file"><slot name="template-file"></slot></li>`:nothing}</ul>${this.renderDeleteBulkFileConfirmationDialog()}`}updated(e){let i=new FormData;this.files.forEach(e=>{i.append(this.name+"[]",e)}),this.internals.setFormValue(i)}renderDeleteBulkFileConfirmationDialog(){return this.askConfirmationOnDeleteFile?html`<ix-dialog id="deleteFileConfirmationDialog" ?open="${this.isDeleteBulkFileDialogOpen}" preventCloseOnScrimClick="true" @closed="${()=>{this.isDeleteBulkFileDialogOpen=!1}}" @close="${()=>{this.isDeleteBulkFileDialogOpen=!1}}"><form slot="content" id="delete-file-id" method="dialog" class="delete-file-confirmation-dialog">${this.deleteConfirmationDialogLabel}</form><div slot="actions"><ix-button appearance="text" @click="${()=>{this.isDeleteBulkFileDialogOpen=!1}}"><span class="button-label">NO</span></ix-button><ix-button appearance="text" name="submitBtn" @click="${()=>this.handleDeleteBulkFile()}"><span class="button-label">YES</span></ix-button></div></ix-dialog>`:nothing}renderHintText(){return this.hintText?html`<div class="ix-file-uploader__hint-text">${this.hintText}</div>`:nothing}renderBody(){var e=this.extensions.map(e=>"."+e).join(", "),i={"ix-file-uploader--hide-body":this.hideBody};return html`<div class="${classMap(i)}"><div class="dropzone" @click="${this.openFileUploadDialog}" @keyup="${this.openFileUploadDialog}" ${ref(this.dropzoneRef)}><div class="ix-file-uploader__label">${this.headerText}</div><div class="ix-file-uploader__help-text">${this.bodyText}</div><input accept="${e}" class="file-input" ?multiple="${this.allowMultipleFiles}" onchange="${e=>this.onFileChange(e)}" ${ref(this.fileRef)} type="file"></div>${this.renderHintText()}</div>`}render(){return html`<div class="${classMap({"ix-file-uploader":!0,error:this.error})}">${this.renderBody()} ${this.files.length?this.renderFileList(this.files):nothing}</div>`}}IxFileUploader.styles=[IxFileUploaderStyles],IxFileUploader.formAssociated=!0,__decorate([property({type:Boolean})],IxFileUploader.prototype,"showTemplateFileLink",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowMultipleFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowDuplicates",void 0),__decorate([property()],IxFileUploader.prototype,"headerText",void 0),__decorate([property()],IxFileUploader.prototype,"bodyText",void 0),__decorate([property()],IxFileUploader.prototype,"hintText",void 0),__decorate([property({type:Array})],IxFileUploader.prototype,"defaultFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowDeleteDefaultFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"hideBody",void 0),__decorate([property({type:Array})],IxFileUploader.prototype,"extensions",void 0),__decorate([property({type:Number})],IxFileUploader.prototype,"maxFileCount",void 0),__decorate([property()],IxFileUploader.prototype,"maxFileSizeUnit",void 0),__decorate([property({type:Number})],IxFileUploader.prototype,"maxFileSizeValue",void 0),__decorate([property()],IxFileUploader.prototype,"name",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"error",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"askConfirmationOnDeleteFile",void 0),__decorate([property()],IxFileUploader.prototype,"deleteConfirmationDialogLabel",void 0),__decorate([state()],IxFileUploader.prototype,"isDeleteBulkFileDialogOpen",void 0),__decorate([state()],IxFileUploader.prototype,"pendingFileDeletion",void 0),__decorate([state()],IxFileUploader.prototype,"files",void 0),customElements.define("ix-file-uploader",IxFileUploader);
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-file-uploader following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.1.15",
6
+ "version": "1.3.1-alpha.1",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -11,7 +11,6 @@
11
11
  ".": "./dist/index.js",
12
12
  "./ix-file-uploader.js": "./dist/ix-file-uploader.js",
13
13
  "./ix-file-uploader.min.js": "./dist/ix-file-uploader.min.js",
14
- "./FileUploadResult": "./dist/file-upload-result.js",
15
14
  "./IxFileUploader": "./dist/react/IxFileUploader.js",
16
15
  "./DataStorageUnit": "./dist/data-storage-unit.js"
17
16
  },
@@ -29,9 +28,9 @@
29
28
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
30
29
  },
31
30
  "dependencies": {
32
- "@digital-realty/ix-button": "^3.3.8",
33
- "@digital-realty/ix-dialog": "^1.1.21",
34
- "@digital-realty/ix-icon-button": "^1.1.8",
31
+ "@digital-realty/ix-button": "^3.4.1",
32
+ "@digital-realty/ix-dialog": "^1.2.1",
33
+ "@digital-realty/ix-icon-button": "^1.2.1",
35
34
  "@lit-labs/react": "^2.1.0",
36
35
  "@lit/react": "^1.0.2",
37
36
  "@material/web": "1.2.0",
@@ -113,6 +112,5 @@
113
112
  "package.json",
114
113
  "README.md",
115
114
  "LICENSE"
116
- ],
117
- "gitHead": "fce72072fc7a72d550911c6862d6ca6d783a9482"
115
+ ]
118
116
  }