@digital-realty/ix-file-uploader 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ix-file-uploader
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# <ix-file-uploader>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-file-uploader
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-file-uploader/ix-file-uploader.js';
+</script>
+
+<ix-file-uploader></ix-file-uploader>
+```
+
+### In React
+
+```html
+import { IxFileUploaderReact } from '@digital-realty/ix-file-uploader'
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/IxFileChip.d.ts

@@ -0,0 +1,10 @@
+import '@digital-realty/theme';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import { LitElement, TemplateResult } from 'lit';
+export declare class IxFileChip extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    file?: File;
+    private onClick;
+    private onDelete;
+    protected render(): TemplateResult<1>;
+}

package/dist/IxFileChip.js

@@ -0,0 +1,48 @@
+import { __decorate } from "tslib";
+import '@digital-realty/theme';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import IxFileChipStyles from './styles/ix-file-chip-styles.js';
+export class IxFileChip extends LitElement {
+    onClick() {
+        const event = new CustomEvent('on-file-click', {
+            detail: {
+                file: this.file,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    onDelete() {
+        const event = new CustomEvent('on-file-delete', {
+            detail: {
+                file: this.file,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    render() {
+        var _a;
+        return html `<li class="file-chip">
+      <ix-button
+        @click=${this.onClick}
+        appearance="text"
+        name="file-button"
+        type="button"
+      >
+        ${(_a = this.file) === null || _a === void 0 ? void 0 : _a.name}
+      </ix-button>
+      <ix-icon-button
+        @click=${this.onDelete}
+        icon="delete"
+        name="delete-button"
+        type="button"
+      ></ix-icon-button>
+    </li>`;
+    }
+}
+IxFileChip.styles = [IxFileChipStyles];
+__decorate([
+    property({ type: Object })
+], IxFileChip.prototype, "file", void 0);
+//# sourceMappingURL=IxFileChip.js.map

package/dist/IxFileChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxFileChip.js","sourceRoot":"","sources":["../src/IxFileChip.ts"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAE/D,MAAM,OAAO,UAAW,SAAQ,UAAU;IAKhC,OAAO;QACb,MAAM,KAAK,GAAG,IAAI,WAAW,CAAW,eAAe,EAAE;YACvD,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,QAAQ;QACd,MAAM,KAAK,GAAG,IAAI,WAAW,CAAW,gBAAgB,EAAE;YACxD,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAES,MAAM;;QACd,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,OAAO;;;;;UAKnB,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI;;;iBAGR,IAAI,CAAC,QAAQ;;;;;UAKpB,CAAC;IACT,CAAC;;AAzCe,iBAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAa","sourcesContent":["import '@digital-realty/theme';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { html, LitElement, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport FileInfo from './internal/file-info.js';\nimport IxFileChipStyles from './styles/ix-file-chip-styles.js';\n\nexport class IxFileChip extends LitElement {\n  static readonly styles = [IxFileChipStyles];\n\n  @property({ type: Object }) file?: File;\n\n  private onClick(): void {\n    const event = new CustomEvent<FileInfo>('on-file-click', {\n      detail: {\n        file: this.file,\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private onDelete(): void {\n    const event = new CustomEvent<FileInfo>('on-file-delete', {\n      detail: {\n        file: this.file,\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  protected render(): TemplateResult<1> {\n    return html`<li class=\"file-chip\">\n      <ix-button\n        @click=${this.onClick}\n        appearance=\"text\"\n        name=\"file-button\"\n        type=\"button\"\n      >\n        ${this.file?.name}\n      </ix-button>\n      <ix-icon-button\n        @click=${this.onDelete}\n        icon=\"delete\"\n        name=\"delete-button\"\n        type=\"button\"\n      ></ix-icon-button>\n    </li>`;\n  }\n}\n"]}

package/dist/IxFileUploader.d.ts

@@ -0,0 +1,39 @@
+import '@digital-realty/theme';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import './ix-file-chip.js';
+import DataStorageUnit from './data-storage-unit.js';
+export declare class IxFileUploader extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    /** @nocollapse  */
+    static readonly formAssociated = true;
+    private readonly internals;
+    dropzoneRef: Ref<HTMLInputElement>;
+    fileRef: Ref<HTMLInputElement>;
+    allowMultipleFiles: boolean;
+    bodyText: string;
+    extensions: string[];
+    headerText: string;
+    maxFileCount: number;
+    maxFileSizeUnit: DataStorageUnit;
+    maxFileSizeValue: number;
+    name: string;
+    files: Array<File>;
+    private maxFileSizeInBytes;
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form(): HTMLFormElement | null;
+    private onDrop;
+    private onFileChange;
+    private process;
+    private updateState;
+    private onFilesUploaded;
+    private onFileClick;
+    private onFileDelete;
+    private openFileUploadDialog;
+    protected firstUpdated(): void;
+    private renderFileList;
+    protected updated(_: PropertyValues): void;
+    protected render(): TemplateResult<1>;
+}

package/dist/IxFileUploader.js

@@ -0,0 +1,203 @@
+import { __decorate } from "tslib";
+import '@digital-realty/theme';
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import './ix-file-chip.js';
+import DataStorageUnit from './data-storage-unit.js';
+import getTotalBytes from './internal/get-total-bytes.js';
+import { processFiles } from './internal/process-files.js';
+import sortFilesAscending from './internal/sort-files-ascending.js';
+import IxFileUploaderStyles from './styles/ix-file-uploader-styles.js';
+export class IxFileUploader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        this.dropzoneRef = createRef();
+        this.fileRef = createRef();
+        this.allowMultipleFiles = false;
+        this.bodyText = '';
+        this.extensions = [];
+        this.headerText = '';
+        this.maxFileCount = 10;
+        this.maxFileSizeUnit = DataStorageUnit.MB;
+        this.maxFileSizeValue = 10;
+        this.name = 'ix-file-uploader';
+        this.files = [];
+        this.maxFileSizeInBytes = 0;
+    }
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this.internals.form;
+    }
+    // called when the user drops files on the dropzone
+    onDrop(e) {
+        e.preventDefault();
+        if (!e.dataTransfer) {
+            return; // no files dropped
+        }
+        const filesToProcess = Array.from(e.dataTransfer.files);
+        this.process(filesToProcess);
+    }
+    // This is called when the user selects files from the file dialog
+    onFileChange(e) {
+        const fileList = e.currentTarget.files;
+        const filesToProcess = Array.from(fileList);
+        this.process(filesToProcess);
+        // clear the files from the file input; we are tracking state at the component level, not in the file input
+        this.fileRef.value.files = new DataTransfer().files;
+    }
+    // common method for processing files which are dropped or selected from file input dialog
+    process(filesToProcess) {
+        const results = processFiles({
+            currentFiles: this.files,
+            extensions: this.extensions,
+            filesToProcess,
+            maxFileCount: this.allowMultipleFiles ? this.maxFileCount : 1,
+            maxFileSizeInBytes: this.maxFileSizeInBytes,
+        });
+        this.updateState(results);
+        this.onFilesUploaded(results);
+    }
+    updateState(results = []) {
+        const filesToUpload = [];
+        results.forEach(result => {
+            if (result.uploaded) {
+                filesToUpload.push(result.file);
+            }
+        });
+        // handle multiple file setting
+        if (this.allowMultipleFiles) {
+            this.files = [...this.files, ...filesToUpload];
+            return;
+        }
+        // handle single file setting
+        if (filesToUpload.length) {
+            const file = filesToUpload[0];
+            this.files = [file];
+        }
+    }
+    onFilesUploaded(results) {
+        const event = new CustomEvent('on-files-uploaded', {
+            detail: {
+                allFiles: this.files,
+                filesUploaded: results.filter(result => result.uploaded),
+                filesNotUploaded: results.filter(result => !result.uploaded),
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    onFileClick(e) {
+        const event = new CustomEvent('on-file-clicked', {
+            detail: { allFiles: this.files, file: e.detail.file },
+        });
+        this.dispatchEvent(event);
+    }
+    onFileDelete(e) {
+        var _a;
+        const fileNameToDelete = (_a = e.detail.file) === null || _a === void 0 ? void 0 : _a.name;
+        this.files = [...this.files].filter(file => file.name !== fileNameToDelete);
+        const event = new CustomEvent('on-file-removed', {
+            detail: { allFiles: this.files, file: e.detail.file },
+        });
+        this.dispatchEvent(event);
+    }
+    openFileUploadDialog() {
+        var _a;
+        (_a = this.fileRef.value) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    firstUpdated() {
+        // connect the dropzone
+        const dropzone = this.dropzoneRef.value;
+        if (dropzone) {
+            dropzone.addEventListener('dragenter', e => e.preventDefault());
+            dropzone.addEventListener('dragover', e => e.preventDefault());
+            dropzone.addEventListener('drop', this.onDrop.bind(this));
+        }
+        // connect the file input
+        const fileElem = this.fileRef.value;
+        if (fileElem) {
+            fileElem.addEventListener('change', this.onFileChange.bind(this));
+        }
+        // calculate the maxBytes based on props
+        // Calculate the max file size in bytes to use for checking if files are too large
+        const totalBytesForStorageUnit = getTotalBytes(this.maxFileSizeUnit);
+        this.maxFileSizeInBytes = this.maxFileSizeValue * totalBytesForStorageUnit;
+    }
+    renderFileList(files = []) {
+        const sortedFiles = sortFilesAscending(files);
+        const chips = sortedFiles.map((file) => html `<ix-file-chip
+        .file=${file}
+        @on-file-click=${this.onFileClick}
+        @on-file-delete=${this.onFileDelete}
+      ></ix-file-chip>`);
+        return html `
+      <ul class="uploaded-file-list">
+        ${chips}
+      </ul>
+    `;
+    }
+    updated(_) {
+        const formData = new FormData();
+        this.files.forEach(file => {
+            formData.append(`${this.name}[]`, file);
+        });
+        this.internals.setFormValue(formData);
+    }
+    render() {
+        const accept = this.extensions.map(ext => `.${ext}`).join(', ');
+        return html `<div class="ix-file-uploader">
+      <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=${this.onFileChange}
+          ${ref(this.fileRef)}
+          type="file"
+        />
+      </div>
+      ${this.files.length ? this.renderFileList(this.files) : nothing}
+    </div>`;
+    }
+}
+IxFileUploader.styles = [IxFileUploaderStyles];
+/** @nocollapse  */
+IxFileUploader.formAssociated = true;
+__decorate([
+    property({ type: Boolean })
+], IxFileUploader.prototype, "allowMultipleFiles", void 0);
+__decorate([
+    property()
+], IxFileUploader.prototype, "bodyText", void 0);
+__decorate([
+    property({ type: Array })
+], IxFileUploader.prototype, "extensions", void 0);
+__decorate([
+    property()
+], IxFileUploader.prototype, "headerText", 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([
+    state()
+], IxFileUploader.prototype, "files", void 0);
+//# sourceMappingURL=IxFileUploader.js.map

package/dist/IxFileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxFileUploader.js","sourceRoot":"","sources":["../src/IxFileUploader.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/theme';\nimport { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.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';\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 }) allowMultipleFiles: boolean = false;\n\n  @property() bodyText: string = '';\n\n  @property({ type: Array }) extensions: string[] = [];\n\n  @property() headerText: 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  @state() files: Array<File> = [];\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  // 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.allowMultipleFiles ? this.maxFileCount : 1,\n      maxFileSizeInBytes: this.maxFileSizeInBytes,\n    });\n\n    this.updateState(results);\n\n    this.onFilesUploaded(results);\n  }\n\n  private updateState(results: Array<FileUploadResult> = []): void {\n    const filesToUpload: Array<File> = [];\n\n    results.forEach(result => {\n      if (result.uploaded) {\n        filesToUpload.push(result.file);\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    const fileNameToDelete = e.detail.file?.name;\n\n    this.files = [...this.files].filter(file => file.name !== fileNameToDelete);\n\n    const event = new CustomEvent<FileChangeInfo>('on-file-removed', {\n      detail: { allFiles: this.files, file: e.detail.file },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private openFileUploadDialog(): void {\n    this.fileRef.value?.click();\n  }\n\n  protected override firstUpdated(): void {\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  private renderFileList(files: Array<File> = []): TemplateResult<1> {\n    const sortedFiles = sortFilesAscending(files);\n\n    const chips = sortedFiles.map(\n      (file: File) => html`<ix-file-chip\n        .file=${file}\n        @on-file-click=${this.onFileClick}\n        @on-file-delete=${this.onFileDelete}\n      ></ix-file-chip>`\n    );\n\n    return html`\n      <ul class=\"uploaded-file-list\">\n        ${chips}\n      </ul>\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  protected render(): TemplateResult<1> {\n    const accept = this.extensions.map(ext => `.${ext}`).join(', ');\n\n    return html`<div class=\"ix-file-uploader\">\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=${this.onFileChange}\n          ${ref(this.fileRef)}\n          type=\"file\"\n        />\n      </div>\n      ${this.files.length ? this.renderFileList(this.files) : nothing}\n    </div>`;\n  }\n}\n"]}

package/dist/data-storage-unit.d.ts

@@ -0,0 +1,12 @@
+declare enum DataStorageUnit {
+    B = "B",
+    KB = "KB",
+    MB = "MB",
+    GB = "GB",
+    TB = "TB",
+    PB = "PB",
+    EB = "EB",
+    ZB = "ZB",
+    YB = "YB"
+}
+export default DataStorageUnit;

package/dist/data-storage-unit.js

@@ -0,0 +1,15 @@
+/* eslint-disable no-shadow */
+var DataStorageUnit;
+(function (DataStorageUnit) {
+    DataStorageUnit["B"] = "B";
+    DataStorageUnit["KB"] = "KB";
+    DataStorageUnit["MB"] = "MB";
+    DataStorageUnit["GB"] = "GB";
+    DataStorageUnit["TB"] = "TB";
+    DataStorageUnit["PB"] = "PB";
+    DataStorageUnit["EB"] = "EB";
+    DataStorageUnit["ZB"] = "ZB";
+    DataStorageUnit["YB"] = "YB";
+})(DataStorageUnit || (DataStorageUnit = {}));
+export default DataStorageUnit;
+//# sourceMappingURL=data-storage-unit.js.map

package/dist/data-storage-unit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-storage-unit.js","sourceRoot":"","sources":["../src/data-storage-unit.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,IAAK,eAUJ;AAVD,WAAK,eAAe;IAClB,0BAAO,CAAA;IACP,4BAAS,CAAA;IACT,4BAAS,CAAA;IACT,4BAAS,CAAA;IACT,4BAAS,CAAA;IACT,4BAAS,CAAA;IACT,4BAAS,CAAA;IACT,4BAAS,CAAA;IACT,4BAAS,CAAA;AACX,CAAC,EAVI,eAAe,KAAf,eAAe,QAUnB;AAED,eAAe,eAAe,CAAC","sourcesContent":["/* eslint-disable no-shadow */\nenum DataStorageUnit {\n  B = 'B', // Bytes\n  KB = 'KB', // Kilobytes\n  MB = 'MB', // Megabytes\n  GB = 'GB', // Gigabytes\n  TB = 'TB', // Terabytes\n  PB = 'PB', // Petabytes\n  EB = 'EB', // Exabytes\n  ZB = 'ZB', // Zettabytes\n  YB = 'YB', // Yottabytes\n}\n\nexport default DataStorageUnit;\n"]}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DataStorageUnit } from './data-storage-unit.js';
+export { IxFileUploader } from './IxFileUploader.js';
+export { IxFileUploader as IxFileUploaderReact } from './react/IxFileUploader.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as DataStorageUnit } from './data-storage-unit.js';
+export { IxFileUploader } from './IxFileUploader.js';
+export { IxFileUploader as IxFileUploaderReact } from './react/IxFileUploader.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { default as DataStorageUnit } from './data-storage-unit.js';\nexport { IxFileUploader } from './IxFileUploader.js';\nexport { IxFileUploader as IxFileUploaderReact } from './react/IxFileUploader.js';\n"]}

package/dist/internal/file-change-info.d.ts

@@ -0,0 +1,5 @@
+import FileInfo from './file-info.js';
+interface FileChangeInfo extends FileInfo {
+    allFiles: Array<File>;
+}
+export default FileChangeInfo;

package/dist/internal/file-change-info.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=file-change-info.js.map

package/dist/internal/file-change-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-change-info.js","sourceRoot":"","sources":["../../src/internal/file-change-info.ts"],"names":[],"mappings":"","sourcesContent":["import FileInfo from './file-info.js';\n\ninterface FileChangeInfo extends FileInfo {\n  allFiles: Array<File>;\n}\n\nexport default FileChangeInfo;\n"]}

package/dist/internal/file-info.d.ts

@@ -0,0 +1,4 @@
+interface FileInfo {
+    file?: File;
+}
+export default FileInfo;

package/dist/internal/file-info.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=file-info.js.map

package/dist/internal/file-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-info.js","sourceRoot":"","sources":["../../src/internal/file-info.ts"],"names":[],"mappings":"","sourcesContent":["interface FileInfo {\n  file?: File;\n}\n\nexport default FileInfo;\n"]}

package/dist/internal/file-upload-result.d.ts

@@ -0,0 +1,6 @@
+interface FileUploadResult {
+    file: File;
+    message: string;
+    uploaded: boolean;
+}
+export default FileUploadResult;

package/dist/internal/file-upload-result.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=file-upload-result.js.map

package/dist/internal/file-upload-result.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-result.js","sourceRoot":"","sources":["../../src/internal/file-upload-result.ts"],"names":[],"mappings":"","sourcesContent":["interface FileUploadResult {\n  file: File;\n  message: string;\n  uploaded: boolean;\n}\n\nexport default FileUploadResult;\n"]}

package/dist/internal/files-uploaded-info.d.ts

@@ -0,0 +1,7 @@
+import FileUploadResult from './file-upload-result.js';
+interface FilesUploadedInfo {
+    allFiles: Array<File>;
+    filesUploaded: Array<FileUploadResult>;
+    filesNotUploaded: Array<FileUploadResult>;
+}
+export default FilesUploadedInfo;

package/dist/internal/files-uploaded-info.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=files-uploaded-info.js.map

package/dist/internal/files-uploaded-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"files-uploaded-info.js","sourceRoot":"","sources":["../../src/internal/files-uploaded-info.ts"],"names":[],"mappings":"","sourcesContent":["import FileUploadResult from './file-upload-result.js';\n\ninterface FilesUploadedInfo {\n  allFiles: Array<File>;\n  filesUploaded: Array<FileUploadResult>;\n  filesNotUploaded: Array<FileUploadResult>;\n}\n\nexport default FilesUploadedInfo;\n"]}

package/dist/internal/get-total-bytes.d.ts

@@ -0,0 +1,11 @@
+import DataStorageUnit from '../data-storage-unit.js';
+export declare const KB = 1024;
+export declare const MB: number;
+export declare const GB: number;
+export declare const TB: number;
+export declare const PB: number;
+export declare const EB: number;
+export declare const ZB: number;
+export declare const YB: number;
+declare const getTotalBytes: (unit: DataStorageUnit) => number;
+export default getTotalBytes;

package/dist/internal/get-total-bytes.js

@@ -0,0 +1,33 @@
+import DataStorageUnit from '../data-storage-unit.js';
+export const KB = 1024;
+export const MB = 1024 * KB;
+export const GB = 1024 * MB;
+export const TB = 1024 * GB;
+export const PB = 1024 * TB;
+export const EB = 1024 * PB;
+export const ZB = 1024 * EB;
+export const YB = 1024 * ZB;
+const getTotalBytes = (unit) => {
+    switch (unit) {
+        case DataStorageUnit.KB:
+            return KB;
+        case DataStorageUnit.MB:
+            return MB;
+        case DataStorageUnit.GB:
+            return GB;
+        case DataStorageUnit.TB:
+            return TB;
+        case DataStorageUnit.PB:
+            return PB;
+        case DataStorageUnit.EB:
+            return EB;
+        case DataStorageUnit.ZB:
+            return ZB;
+        case DataStorageUnit.YB:
+            return YB;
+        default:
+            return 0;
+    }
+};
+export default getTotalBytes;
+//# sourceMappingURL=get-total-bytes.js.map

package/dist/internal/get-total-bytes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-total-bytes.js","sourceRoot":"","sources":["../../src/internal/get-total-bytes.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,yBAAyB,CAAC;AAEtD,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC;AACvB,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AAE5B,MAAM,aAAa,GAAG,CAAC,IAAqB,EAAU,EAAE;IACtD,QAAQ,IAAI,EAAE;QACZ,KAAK,eAAe,CAAC,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ,KAAK,eAAe,CAAC,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ,KAAK,eAAe,CAAC,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ,KAAK,eAAe,CAAC,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ,KAAK,eAAe,CAAC,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ,KAAK,eAAe,CAAC,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ,KAAK,eAAe,CAAC,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ,KAAK,eAAe,CAAC,EAAE;YACrB,OAAO,EAAE,CAAC;QACZ;YACE,OAAO,CAAC,CAAC;KACZ;AACH,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import DataStorageUnit from '../data-storage-unit.js';\n\nexport const KB = 1024;\nexport const MB = 1024 * KB;\nexport const GB = 1024 * MB;\nexport const TB = 1024 * GB;\nexport const PB = 1024 * TB;\nexport const EB = 1024 * PB;\nexport const ZB = 1024 * EB;\nexport const YB = 1024 * ZB;\n\nconst getTotalBytes = (unit: DataStorageUnit): number => {\n  switch (unit) {\n    case DataStorageUnit.KB:\n      return KB;\n    case DataStorageUnit.MB:\n      return MB;\n    case DataStorageUnit.GB:\n      return GB;\n    case DataStorageUnit.TB:\n      return TB;\n    case DataStorageUnit.PB:\n      return PB;\n    case DataStorageUnit.EB:\n      return EB;\n    case DataStorageUnit.ZB:\n      return ZB;\n    case DataStorageUnit.YB:\n      return YB;\n    default:\n      return 0;\n  }\n};\n\nexport default getTotalBytes;\n"]}

package/dist/internal/process-files.d.ts

@@ -0,0 +1,9 @@
+import FileUploadResult from './file-upload-result.js';
+export interface Config {
+    currentFiles: Array<File>;
+    extensions: Array<string>;
+    filesToProcess: Array<File>;
+    maxFileCount: number;
+    maxFileSizeInBytes: number;
+}
+export declare const processFiles: (config: Config) => Array<FileUploadResult>;

package/dist/internal/process-files.js

@@ -0,0 +1,40 @@
+export const processFiles = (config) => {
+    const { currentFiles, extensions, filesToProcess, maxFileCount, maxFileSizeInBytes, } = config;
+    const results = [];
+    let filesToUploadCount = 0; // counter for how many files we add in the "for" loop below; used to know when we reach the maximum number of files allowed
+    for (const file of filesToProcess) {
+        // check file extension
+        const fileExtension = file.name.split('.').pop() || '';
+        const isAllowedExtension = extensions.includes(fileExtension);
+        if (!isAllowedExtension) {
+            const message = `File extension for "${file.name}" is not allowed`;
+            results.push({ file, message, uploaded: false });
+            continue;
+        }
+        // check for max file size
+        if (file.size > maxFileSizeInBytes) {
+            const message = `File size ${file.size} bytes is too large; maximum allowed size is ${maxFileSizeInBytes} bytes`;
+            results.push({ file, message, uploaded: false });
+            continue;
+        }
+        // check for max file count
+        const noMoreFilesAllowed = currentFiles.length + filesToUploadCount >= maxFileCount;
+        if (noMoreFilesAllowed) {
+            const message = `File not uploaded; it would exceed the maximum number of files (${maxFileCount})`;
+            results.push({ file, message, uploaded: false });
+            continue;
+        }
+        // check for duplicate file names
+        const isDuplicate = currentFiles.some((f) => f.name === file.name);
+        if (isDuplicate) {
+            const message = `File not uploaded; there is already a file named ${file.name}`;
+            results.push({ file, message, uploaded: false });
+            continue;
+        }
+        // The file passes all validation and can be added
+        results.push({ file, message: 'File uploaded', uploaded: true });
+        filesToUploadCount += 1;
+    }
+    return results;
+};
+//# sourceMappingURL=process-files.js.map

package/dist/internal/process-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-files.js","sourceRoot":"","sources":["../../src/internal/process-files.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAc,EAA2B,EAAE;IACtE,MAAM,EACJ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,GAAG,MAAM,CAAC;IAEX,MAAM,OAAO,GAA4B,EAAE,CAAC;IAE5C,IAAI,kBAAkB,GAAG,CAAC,CAAC,CAAC,4HAA4H;IAExJ,KAAK,MAAM,IAAI,IAAI,cAAc,EAAE;QACjC,uBAAuB;QACvB,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC;QACvD,MAAM,kBAAkB,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC9D,IAAI,CAAC,kBAAkB,EAAE;YACvB,MAAM,OAAO,GAAG,uBAAuB,IAAI,CAAC,IAAI,kBAAkB,CAAC;YACnE,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;YACjD,SAAS;SACV;QAED,0BAA0B;QAC1B,IAAI,IAAI,CAAC,IAAI,GAAG,kBAAkB,EAAE;YAClC,MAAM,OAAO,GAAG,aAAa,IAAI,CAAC,IAAI,gDAAgD,kBAAkB,QAAQ,CAAC;YACjH,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;YACjD,SAAS;SACV;QAED,2BAA2B;QAC3B,MAAM,kBAAkB,GACtB,YAAY,CAAC,MAAM,GAAG,kBAAkB,IAAI,YAAY,CAAC;QAC3D,IAAI,kBAAkB,EAAE;YACtB,MAAM,OAAO,GAAG,mEAAmE,YAAY,GAAG,CAAC;YACnG,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;YACjD,SAAS;SACV;QAED,iCAAiC;QACjC,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAO,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;QACzE,IAAI,WAAW,EAAE;YACf,MAAM,OAAO,GAAG,oDAAoD,IAAI,CAAC,IAAI,EAAE,CAAC;YAChF,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;YACjD,SAAS;SACV;QAED,kDAAkD;QAClD,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACjE,kBAAkB,IAAI,CAAC,CAAC;KACzB;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import FileUploadResult from './file-upload-result.js';\n\nexport interface Config {\n  currentFiles: Array<File>;\n  extensions: Array<string>;\n  filesToProcess: Array<File>;\n  maxFileCount: number;\n  maxFileSizeInBytes: number;\n}\n\nexport const processFiles = (config: Config): Array<FileUploadResult> => {\n  const {\n    currentFiles,\n    extensions,\n    filesToProcess,\n    maxFileCount,\n    maxFileSizeInBytes,\n  } = config;\n\n  const results: Array<FileUploadResult> = [];\n\n  let filesToUploadCount = 0; // counter for how many files we add in the \"for\" loop below; used to know when we reach the maximum number of files allowed\n\n  for (const file of filesToProcess) {\n    // check file extension\n    const fileExtension = file.name.split('.').pop() || '';\n    const isAllowedExtension = extensions.includes(fileExtension);\n    if (!isAllowedExtension) {\n      const message = `File extension for \"${file.name}\" is not allowed`;\n      results.push({ file, message, uploaded: false });\n      continue;\n    }\n\n    // check for max file size\n    if (file.size > maxFileSizeInBytes) {\n      const message = `File size ${file.size} bytes is too large; maximum allowed size is ${maxFileSizeInBytes} bytes`;\n      results.push({ file, message, uploaded: false });\n      continue;\n    }\n\n    // check for max file count\n    const noMoreFilesAllowed =\n      currentFiles.length + filesToUploadCount >= maxFileCount;\n    if (noMoreFilesAllowed) {\n      const message = `File not uploaded; it would exceed the maximum number of files (${maxFileCount})`;\n      results.push({ file, message, uploaded: false });\n      continue;\n    }\n\n    // check for duplicate file names\n    const isDuplicate = currentFiles.some((f: File) => f.name === file.name);\n    if (isDuplicate) {\n      const message = `File not uploaded; there is already a file named ${file.name}`;\n      results.push({ file, message, uploaded: false });\n      continue;\n    }\n\n    // The file passes all validation and can be added\n    results.push({ file, message: 'File uploaded', uploaded: true });\n    filesToUploadCount += 1;\n  }\n\n  return results;\n};\n"]}

package/dist/internal/sort-files-ascending.d.ts

@@ -0,0 +1,2 @@
+declare const sortFilesAscending: (filesToSort?: Array<File>) => Array<File>;
+export default sortFilesAscending;

package/dist/internal/sort-files-ascending.js

@@ -0,0 +1,13 @@
+const sortFilesAscending = (filesToSort = []) => filesToSort.sort((file1, file2) => {
+    const file1Name = file1.name.toLocaleLowerCase();
+    const file2Name = file2.name.toLocaleLowerCase();
+    if (file1Name < file2Name) {
+        return -1;
+    }
+    if (file2Name > file1Name) {
+        return 1;
+    }
+    return 0;
+});
+export default sortFilesAscending;
+//# sourceMappingURL=sort-files-ascending.js.map

package/dist/internal/sort-files-ascending.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-files-ascending.js","sourceRoot":"","sources":["../../src/internal/sort-files-ascending.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,CAAC,cAA2B,EAAE,EAAe,EAAE,CACxE,WAAW,CAAC,IAAI,CAAC,CAAC,KAAW,EAAE,KAAW,EAAE,EAAE;IAC5C,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACjD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAEjD,IAAI,SAAS,GAAG,SAAS,EAAE;QACzB,OAAO,CAAC,CAAC,CAAC;KACX;IACD,IAAI,SAAS,GAAG,SAAS,EAAE;QACzB,OAAO,CAAC,CAAC;KACV;IAED,OAAO,CAAC,CAAC;AACX,CAAC,CAAC,CAAC;AAEL,eAAe,kBAAkB,CAAC","sourcesContent":["const sortFilesAscending = (filesToSort: Array<File> = []): Array<File> =>\n  filesToSort.sort((file1: File, file2: File) => {\n    const file1Name = file1.name.toLocaleLowerCase();\n    const file2Name = file2.name.toLocaleLowerCase();\n\n    if (file1Name < file2Name) {\n      return -1;\n    }\n    if (file2Name > file1Name) {\n      return 1;\n    }\n\n    return 0;\n  });\n\nexport default sortFilesAscending;\n"]}

package/dist/ix-file-chip.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ix-file-chip.js

@@ -0,0 +1,3 @@
+import { IxFileChip } from './IxFileChip.js';
+customElements.define('ix-file-chip', IxFileChip);
+//# sourceMappingURL=ix-file-chip.js.map

package/dist/ix-file-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-file-chip.js","sourceRoot":"","sources":["../src/ix-file-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC","sourcesContent":["import { IxFileChip } from './IxFileChip.js';\n\ncustomElements.define('ix-file-chip', IxFileChip);\n"]}

package/dist/ix-file-uploader.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ix-file-uploader.js

@@ -0,0 +1,3 @@
+import { IxFileUploader } from './IxFileUploader.js';
+customElements.define('ix-file-uploader', IxFileUploader);
+//# sourceMappingURL=ix-file-uploader.js.map

package/dist/ix-file-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-file-uploader.js","sourceRoot":"","sources":["../src/ix-file-uploader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { IxFileUploader } from './IxFileUploader.js';\n\ncustomElements.define('ix-file-uploader', IxFileUploader);\n"]}

package/dist/react/IxFileUploader.d.ts

@@ -0,0 +1,2 @@
+import { IxFileUploader as IxFileUploaderLit } from '../IxFileUploader.js';
+export declare const IxFileUploader: import("@lit/react").ReactWebComponent<IxFileUploaderLit, {}>;

package/dist/react/IxFileUploader.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { IxFileUploader as IxFileUploaderLit } from '../IxFileUploader.js';
+customElements.define('ix-file-uploader', IxFileUploaderLit);
+export const IxFileUploader = createComponent({
+    tagName: 'ix-file-uploader',
+    elementClass: IxFileUploaderLit,
+    react: React,
+});
+//# sourceMappingURL=IxFileUploader.js.map

package/dist/react/IxFileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxFileUploader.js","sourceRoot":"","sources":["../../src/react/IxFileUploader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE3E,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,OAAO,EAAE,kBAAkB;IAC3B,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\n\nimport { IxFileUploader as IxFileUploaderLit } from '../IxFileUploader.js';\n\ncustomElements.define('ix-file-uploader', IxFileUploaderLit);\n\nexport const IxFileUploader = createComponent({\n  tagName: 'ix-file-uploader',\n  elementClass: IxFileUploaderLit,\n  react: React,\n});\n"]}

package/dist/styles/ix-file-chip-styles.d.ts

@@ -0,0 +1,2 @@
+declare const IxFileChipStyles: import("lit").CSSResult;
+export default IxFileChipStyles;

package/dist/styles/ix-file-chip-styles.js

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+const IxFileChipStyles = css `
+  .file-chip {
+    align-items: center;
+    background: #f5f7ff;
+    cursor: pointer;
+    display: flex;
+    flex: auto;
+    padding: 8px;
+  }
+`;
+export default IxFileChipStyles;
+//# sourceMappingURL=ix-file-chip-styles.js.map

package/dist/styles/ix-file-chip-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-file-chip-styles.js","sourceRoot":"","sources":["../../src/styles/ix-file-chip-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;CAS3B,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst IxFileChipStyles = css`\n  .file-chip {\n    align-items: center;\n    background: #f5f7ff;\n    cursor: pointer;\n    display: flex;\n    flex: auto;\n    padding: 8px;\n  }\n`;\n\nexport default IxFileChipStyles;\n"]}

package/dist/styles/ix-file-uploader-styles.d.ts

@@ -0,0 +1,2 @@
+declare const IxFileUploaderStyles: import("lit").CSSResult;
+export default IxFileUploaderStyles;

package/dist/styles/ix-file-uploader-styles.js

@@ -0,0 +1,74 @@
+import { css } from 'lit';
+const IxFileUploaderStyles = css `
+  .ix-file-uploader {
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 320px;
+    padding: 16px;
+  }
+  .dropzone {
+    background: var(--Background, #f5f7ff);
+    border: 1px dashed var(--Secondary-Main, #378aca);
+    border-radius: 3px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 16px;
+  }
+  .ix-file-uploader__label {
+    color: var(--Text-Dark, #092241);
+    font-family: Red Hat Display;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 1.25px;
+    text-align: center;
+    text-transform: uppercase;
+  }
+  .ix-file-uploader_help-text {
+    color: var(--Text-Dark, #092241);
+    font-family: Open Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+    text-align: center;
+  }
+  .uploaded-file-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    margin-top: 32px;
+    padding: 0;
+  }
+  .file-input {
+    /*
+      Per MDN -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+      "Note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive."
+    */
+    opacity: 0;
+
+    /*
+      Adapted styles from https://tailwindcss.com/docs/screen-readers
+    */
+    border-width: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+`;
+export default IxFileUploaderStyles;
+//# sourceMappingURL=ix-file-uploader-styles.js.map

package/dist/styles/ix-file-uploader-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-file-uploader-styles.js","sourceRoot":"","sources":["../../src/styles/ix-file-uploader-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE/B,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst IxFileUploaderStyles = css`\n  .ix-file-uploader {\n    align-items: center;\n    align-self: stretch;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 320px;\n    padding: 16px;\n  }\n  .dropzone {\n    background: var(--Background, #f5f7ff);\n    border: 1px dashed var(--Secondary-Main, #378aca);\n    border-radius: 3px;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    padding: 16px;\n  }\n  .ix-file-uploader__label {\n    color: var(--Text-Dark, #092241);\n    font-family: Red Hat Display;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 16px;\n    letter-spacing: 1.25px;\n    text-align: center;\n    text-transform: uppercase;\n  }\n  .ix-file-uploader_help-text {\n    color: var(--Text-Dark, #092241);\n    font-family: Open Sans;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0.4px;\n    text-align: center;\n  }\n  .uploaded-file-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    list-style: none;\n    margin: 0;\n    margin-top: 32px;\n    padding: 0;\n  }\n  .file-input {\n    /*\n      Per MDN -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n      \"Note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.\"\n    */\n    opacity: 0;\n\n    /*\n      Adapted styles from https://tailwindcss.com/docs/screen-readers\n    */\n    border-width: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n`;\n\nexport default IxFileUploaderStyles;\n"]}

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@digital-realty/ix-file-uploader",
+  "description": "Webcomponent ix-file-uploader following open-wc recommendations",
+  "license": "MIT",
+  "author": "Digital Realty",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./ix-file-uploader.js": "./dist/ix-file-uploader.js",
+    "./FileUploadResult": "./dist/file-upoad-result.js",
+    "./IxFileUploader": "./dist/react/IxFileUploader.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@digital-realty/ix-button": "^3.2.13",
+    "@digital-realty/ix-icon-button": "*",
+    "@digital-realty/theme": "*",
+    "@lit-labs/react": "^2.1.0",
+    "@lit/react": "^1.0.2",
+    "@material/web": "^1.0.0",
+    "lit": "^2.0.2",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
+        }
+      ],
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ],
+      "import/no-unresolved": "off",
+      "no-continue": "off",
+      "no-unused-vars": "off"
+    }
+  },
+  "prettier": {
+    "arrowParens": "avoid",
+    "singleQuote": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "files": [
+    "/dist",
+    "!/dist/test",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "gitHead": "1b89f4799af29a2ed1c0946843cb4b694a5d8cae"
+}