@digital-realty/ix-file-uploader 1.1.15 → 1.2.1

package/dist/IxFileUploader.js

@@ -182,17 +182,16 @@ export class IxFileUploader extends LitElement {
       ></ix-file-chip>`);
         const uploadedFileListClasses = {
             'uploaded-file-list': true,
-            'uploaded-file-list--spaced': !this.hideBody
+            'uploaded-file-list--spaced': !this.hideBody,
         };
         return html `
-      <ul class=${classMap(uploadedFileListClasses)}">
+      <ul class="${classMap(uploadedFileListClasses)}">
         ${chips}
-        ${this.showTemplateFileLink ?
-            html `<li class="ix-file-uploader__template-file">
-            <slot name="template-file"></slot>
-          </li>`
+        ${this.showTemplateFileLink
+            ? html `<li class="ix-file-uploader__template-file">
+              <slot name="template-file"></slot>
+            </li>`
             : nothing}
-
       </ul>
       ${this.renderDeleteBulkFileConfirmationDialog()}
     `;
@@ -211,14 +210,28 @@ export class IxFileUploader extends LitElement {
       id="deleteFileConfirmationDialog"
       ?open=${this.isDeleteBulkFileDialogOpen}
       preventCloseOnScrimClick="true"
-      @closed=${() => { this.isDeleteBulkFileDialogOpen = false; }}
-      @close=${() => { this.isDeleteBulkFileDialogOpen = false; }}
+      @closed=${() => {
+            this.isDeleteBulkFileDialogOpen = false;
+        }}
+      @close=${() => {
+            this.isDeleteBulkFileDialogOpen = false;
+        }}
     >
-      <form slot="content" id="delete-file-id" method="dialog" class="delete-file-confirmation-dialog">
+      <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 = false; }}>
+        <ix-button
+          appearance="text"
+          @click=${() => {
+            this.isDeleteBulkFileDialogOpen = false;
+        }}
+        >
           <span class="button-label">NO</span>
         </ix-button>
         <ix-button
@@ -235,7 +248,9 @@ export class IxFileUploader extends LitElement {
         if (!this.hintText) {
             return nothing;
         }
-        return html `<div class="ix-file-uploader__hint-text">${this.hintText}</div>`;
+        return html `<div class="ix-file-uploader__hint-text">
+      ${this.hintText}
+    </div>`;
     }
     renderBody() {
         const accept = this.extensions.map(ext => `.${ext}`).join(', ');
@@ -243,25 +258,25 @@ export class IxFileUploader extends LitElement {
             'ix-file-uploader--hide-body': this.hideBody,
         };
         return html `<div class=${classMap(classes)}>
-        <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=${accept}
-            class="file-input"
-            ?multiple=${this.allowMultipleFiles}
-            onchange=${(e) => this.onFileChange(e)}
-            ${ref(this.fileRef)}
-            type="file"
-          />
-        </div>
-        ${this.renderHintText()}
-      </div>`;
+      <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=${accept}
+          class="file-input"
+          ?multiple=${this.allowMultipleFiles}
+          onchange=${(e) => this.onFileChange(e)}
+          ${ref(this.fileRef)}
+          type="file"
+        />
+      </div>
+      ${this.renderHintText()}
+    </div>`;
     }
     render() {
         return html `<div

package/dist/IxFileUploader.js.map

@@ -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"]}
+{"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

@@ -7,64 +7,4 @@ import{__decorate}from"tslib";import{css,svg,LitElement,nothing,html}from"lit";i
     );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(
       --ix-file-uploader-help-font-family,
       var(--root-secondary-font, 'inherit')
-    );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);
+    );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

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-file-uploader following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.1.15",
+  "version": "1.2.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -29,9 +29,9 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-button": "^3.3.8",
-    "@digital-realty/ix-dialog": "^1.1.21",
-    "@digital-realty/ix-icon-button": "^1.1.8",
+    "@digital-realty/ix-button": "^3.4.1",
+    "@digital-realty/ix-dialog": "^1.2.1",
+    "@digital-realty/ix-icon-button": "^1.2.1",
     "@lit-labs/react": "^2.1.0",
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
@@ -114,5 +114,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "fce72072fc7a72d550911c6862d6ca6d783a9482"
+  "gitHead": "0a87dc6e3da94a1375ec43a7ead2bfdec4913821"
 }