@six-group/ui-library 0.0.0-insider.012ddb2

package/dist/collection/components/six-file-list-item/test/six-file-list-item.spec.js

@@ -0,0 +1,169 @@
+import { SixFileListItem } from "../six-file-list-item";
+import { newSpecPage } from "@stencil/core/testing";
+describe('six-file-list-item', () => {
+    it('should create a component instance', () => {
+        expect(new SixFileListItem()).toBeInstanceOf(SixFileListItem);
+    });
+    it('renders minimal six-file-list-item', async () => {
+        const page = await newSpecPage({
+            components: [SixFileListItem],
+            html: `<six-file-list-item></six-file-list-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-file-list-item date="" identifier="">
+        <mock:shadow-root>
+          <div class="six-files-list-item">
+            <span class="six-files-list-item__name"></span>
+            <span class="six-files-list-item__date"></span>
+            <six-icon class="six-files-list-item__icon" size="small">
+              delete
+            </six-icon>
+          </div>
+        </mock:shadow-root>
+      </six-file-list-item>
+    `);
+    });
+    it('renders six-file-list-item with name correctly', async () => {
+        const page = await newSpecPage({
+            components: [SixFileListItem],
+            html: `<six-file-list-item identifier="id1" name="file_1.pdf"></six-file-list-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-file-list-item date="" identifier="id1" name="file_1.pdf">
+        <mock:shadow-root>
+          <div class="six-files-list-item">
+            <span class="six-files-list-item__name">
+                file_1.pdf
+            </span>
+            <span class="six-files-list-item__date"></span>
+            <six-icon class="six-files-list-item__icon" size="small">
+              delete
+            </six-icon>
+          </div>
+        </mock:shadow-root>
+      </six-file-list-item>
+    `);
+    });
+    it('renders six-file-list-item with date correctly', async () => {
+        const page = await newSpecPage({
+            components: [SixFileListItem],
+            html: `<six-file-list-item identifier="id_2" name="file_2.pdf" date="23.09.2021, 09:12"></six-file-list-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-file-list-item date="23.09.2021, 09:12" identifier="id_2" name="file_2.pdf">
+        <mock:shadow-root>
+          <div class="six-files-list-item">
+            <span class="six-files-list-item__name">
+                file_2.pdf
+            </span>
+            <span class="six-files-list-item__date">
+                23.09.2021, 09:12
+            </span>
+            <six-icon class="six-files-list-item__icon" size="small">
+              delete
+            </six-icon>
+          </div>
+        </mock:shadow-root>
+      </six-file-list-item>
+    `);
+    });
+    it('renders six-file-list-item with size correctly', async () => {
+        const page = await newSpecPage({
+            components: [SixFileListItem],
+            html: `
+      <six-file-list-item
+          identifier="id_3"
+          name="file_3.pdf"
+          date="03.12.2021, 10:22"
+          size="75680"
+        ></six-file-list-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-file-list-item date="03.12.2021, 10:22" identifier="id_3" name="file_3.pdf" size="75680">
+        <mock:shadow-root>
+          <div class="six-files-list-item">
+            <span class="six-files-list-item__name">
+              file_3.pdf
+            </span>
+            <span class="six-files-list-item__date">
+              03.12.2021, 10:22
+            </span>
+            <span class="six-files-list-item__size">
+              74 KB
+            </span>
+            <six-icon class="six-files-list-item__icon" size="small">
+              delete
+            </six-icon>
+          </div>
+        </mock:shadow-root>
+      </six-file-list-item>
+    `);
+    });
+    it('renders six-file-list-item with download disabled', async () => {
+        const page = await newSpecPage({
+            components: [SixFileListItem],
+            html: `
+      <six-file-list-item
+          identifier="id_4"
+          name="file_4.pdf"
+          date="02.10.2021, 12:25"
+          size="77590"
+          nodownload
+        ></six-file-list-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-file-list-item date="02.10.2021, 12:25" identifier="id_4" name="file_4.pdf" nodownload="" size="77590">
+        <mock:shadow-root>
+          <div class="six-files-list-item">
+            <span class="six-files-list-item__name six-files-list-item__name--disabled">
+              file_4.pdf
+            </span>
+            <span class="six-files-list-item__date">
+              02.10.2021, 12:25
+            </span>
+            <span class="six-files-list-item__size">
+              76 KB
+            </span>
+            <six-icon class="six-files-list-item__icon" size="small">
+              delete
+            </six-icon>
+          </div>
+        </mock:shadow-root>
+      </six-file-list-item>
+    `);
+    });
+    it('renders six-file-list-item with deletion disabled', async () => {
+        const page = await newSpecPage({
+            components: [SixFileListItem],
+            html: `
+      <six-file-list-item
+          identifier="id_5"
+          name="file_5.pdf"
+          date="11.07.2021, 10:32"
+          size="72040"
+          nodelete
+        ></six-file-list-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-file-list-item date="11.07.2021, 10:32" identifier="id_5" name="file_5.pdf" nodelete="" size="72040">
+        <mock:shadow-root>
+          <div class="six-files-list-item">
+            <span class="six-files-list-item__name">
+              file_5.pdf
+            </span>
+            <span class="six-files-list-item__date">
+              11.07.2021, 10:32
+            </span>
+            <span class="six-files-list-item__size">
+              70 KB
+            </span>
+            <six-icon class="six-files-list-item__icon six-files-list-item__icon--disabled" size="small">
+              delete
+            </six-icon>
+          </div>
+        </mock:shadow-root>
+      </six-file-list-item>
+    `);
+    });
+});
+//# sourceMappingURL=six-file-list-item.spec.js.map

package/dist/collection/components/six-file-list-item/test/six-file-list-item.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-file-list-item.spec.js","sourceRoot":"","sources":["../../../../src/components/six-file-list-item/test/six-file-list-item.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,2CAA2C;SAClD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,8EAA8E;SACrF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wGAAwG;SAC/G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;KAgB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;;;;+BAMmB;SAC1B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;;;;;+BAOmB;SAC1B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;;;;;+BAOmB;SAC1B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { SixFileListItem } from '../six-file-list-item';\nimport { newSpecPage } from '@stencil/core/testing';\n\ndescribe('six-file-list-item', () => {\n  it('should create a component instance', () => {\n    expect(new SixFileListItem()).toBeInstanceOf(SixFileListItem);\n  });\n\n  it('renders minimal six-file-list-item', async () => {\n    const page = await newSpecPage({\n      components: [SixFileListItem],\n      html: `<six-file-list-item></six-file-list-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-file-list-item date=\"\" identifier=\"\">\n        <mock:shadow-root>\n          <div class=\"six-files-list-item\">\n            <span class=\"six-files-list-item__name\"></span>\n            <span class=\"six-files-list-item__date\"></span>\n            <six-icon class=\"six-files-list-item__icon\" size=\"small\">\n              delete\n            </six-icon>\n          </div>\n        </mock:shadow-root>\n      </six-file-list-item>\n    `);\n  });\n\n  it('renders six-file-list-item with name correctly', async () => {\n    const page = await newSpecPage({\n      components: [SixFileListItem],\n      html: `<six-file-list-item identifier=\"id1\" name=\"file_1.pdf\"></six-file-list-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-file-list-item date=\"\" identifier=\"id1\" name=\"file_1.pdf\">\n        <mock:shadow-root>\n          <div class=\"six-files-list-item\">\n            <span class=\"six-files-list-item__name\">\n                file_1.pdf\n            </span>\n            <span class=\"six-files-list-item__date\"></span>\n            <six-icon class=\"six-files-list-item__icon\" size=\"small\">\n              delete\n            </six-icon>\n          </div>\n        </mock:shadow-root>\n      </six-file-list-item>\n    `);\n  });\n\n  it('renders six-file-list-item with date correctly', async () => {\n    const page = await newSpecPage({\n      components: [SixFileListItem],\n      html: `<six-file-list-item identifier=\"id_2\" name=\"file_2.pdf\" date=\"23.09.2021, 09:12\"></six-file-list-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-file-list-item date=\"23.09.2021, 09:12\" identifier=\"id_2\" name=\"file_2.pdf\">\n        <mock:shadow-root>\n          <div class=\"six-files-list-item\">\n            <span class=\"six-files-list-item__name\">\n                file_2.pdf\n            </span>\n            <span class=\"six-files-list-item__date\">\n                23.09.2021, 09:12\n            </span>\n            <six-icon class=\"six-files-list-item__icon\" size=\"small\">\n              delete\n            </six-icon>\n          </div>\n        </mock:shadow-root>\n      </six-file-list-item>\n    `);\n  });\n\n  it('renders six-file-list-item with size correctly', async () => {\n    const page = await newSpecPage({\n      components: [SixFileListItem],\n      html: `\n      <six-file-list-item\n          identifier=\"id_3\"\n          name=\"file_3.pdf\"\n          date=\"03.12.2021, 10:22\"\n          size=\"75680\"\n        ></six-file-list-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-file-list-item date=\"03.12.2021, 10:22\" identifier=\"id_3\" name=\"file_3.pdf\" size=\"75680\">\n        <mock:shadow-root>\n          <div class=\"six-files-list-item\">\n            <span class=\"six-files-list-item__name\">\n              file_3.pdf\n            </span>\n            <span class=\"six-files-list-item__date\">\n              03.12.2021, 10:22\n            </span>\n            <span class=\"six-files-list-item__size\">\n              74 KB\n            </span>\n            <six-icon class=\"six-files-list-item__icon\" size=\"small\">\n              delete\n            </six-icon>\n          </div>\n        </mock:shadow-root>\n      </six-file-list-item>\n    `);\n  });\n\n  it('renders six-file-list-item with download disabled', async () => {\n    const page = await newSpecPage({\n      components: [SixFileListItem],\n      html: `\n      <six-file-list-item\n          identifier=\"id_4\"\n          name=\"file_4.pdf\"\n          date=\"02.10.2021, 12:25\"\n          size=\"77590\"\n          nodownload\n        ></six-file-list-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-file-list-item date=\"02.10.2021, 12:25\" identifier=\"id_4\" name=\"file_4.pdf\" nodownload=\"\" size=\"77590\">\n        <mock:shadow-root>\n          <div class=\"six-files-list-item\">\n            <span class=\"six-files-list-item__name six-files-list-item__name--disabled\">\n              file_4.pdf\n            </span>\n            <span class=\"six-files-list-item__date\">\n              02.10.2021, 12:25\n            </span>\n            <span class=\"six-files-list-item__size\">\n              76 KB\n            </span>\n            <six-icon class=\"six-files-list-item__icon\" size=\"small\">\n              delete\n            </six-icon>\n          </div>\n        </mock:shadow-root>\n      </six-file-list-item>\n    `);\n  });\n\n  it('renders six-file-list-item with deletion disabled', async () => {\n    const page = await newSpecPage({\n      components: [SixFileListItem],\n      html: `\n      <six-file-list-item\n          identifier=\"id_5\"\n          name=\"file_5.pdf\"\n          date=\"11.07.2021, 10:32\"\n          size=\"72040\"\n          nodelete\n        ></six-file-list-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-file-list-item date=\"11.07.2021, 10:32\" identifier=\"id_5\" name=\"file_5.pdf\" nodelete=\"\" size=\"72040\">\n        <mock:shadow-root>\n          <div class=\"six-files-list-item\">\n            <span class=\"six-files-list-item__name\">\n              file_5.pdf\n            </span>\n            <span class=\"six-files-list-item__date\">\n              11.07.2021, 10:32\n            </span>\n            <span class=\"six-files-list-item__size\">\n              70 KB\n            </span>\n            <six-icon class=\"six-files-list-item__icon six-files-list-item__icon--disabled\" size=\"small\">\n              delete\n            </six-icon>\n          </div>\n        </mock:shadow-root>\n      </six-file-list-item>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-file-upload/six-file-upload.css

@@ -0,0 +1,60 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+:host {
+  position: static;
+  display: block;
+}
+
+.six-file-upload six-card {
+  box-shadow: none;
+  padding: 0;
+  width: 100%;
+}
+.six-file-upload__label--highlighted {
+  color: var(--six-color-action-600);
+}
+.six-file-upload__container--full {
+  border: dashed 1px var(--six-color-web-rock-500);
+}
+.six-file-upload__label-icon {
+  margin-right: 0.5rem;
+}
+.six-file-upload__drop-zone {
+  padding: 2rem 0;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  transition: background-color 0.3s;
+}
+.six-file-upload__drop-zone--compact {
+  padding: 0;
+}
+.six-file-upload__input {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  user-select: none;
+  height: 100%;
+  opacity: 0;
+  outline: none;
+}
+.six-file-upload--disabled .six-file-upload__drop-zone {
+  background-color: var(--six-color-inactive);
+}
+.six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone:hover, .six-file-upload__drop-zone--hover {
+  background-color: var(--six-color-action-light-to-be-defined);
+}
+.six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone:hover.six-file-upload__drop-zone--compact, .six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact {
+  background-color: inherit;
+}
+.six-file-upload--disabled .six-file-upload__input {
+  cursor: not-allowed;
+}

package/dist/collection/components/six-file-upload/six-file-upload.js

@@ -0,0 +1,309 @@
+import { h } from "@stencil/core";
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+export class SixFileUpload {
+    constructor() {
+        this.handleFiles = (files) => {
+            if (this.disabled || files.length === 0) {
+                return;
+            }
+            if (!this.multiple && files.length > 1) {
+                return this.failure.emit({ reason: 'Only one file is allowed.' });
+            }
+            for (const file of files) {
+                if (file == null) {
+                    return;
+                }
+                let acceptedTypesList = [];
+                if (this.accept != null) {
+                    acceptedTypesList = this.accept.replace(/\s/g, '').split(',');
+                }
+                if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {
+                    const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';
+                    return this.failure.emit({ reason });
+                }
+                if (this.maxFileSize != null && file.size > this.maxFileSize) {
+                    const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';
+                    return this.failure.emit({ reason });
+                }
+            }
+            const eventPayload = this.multiple ? { files } : { file: files[0] };
+            this.success.emit(eventPayload);
+        };
+        this.onChange = () => {
+            var _a;
+            if (((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files) != null) {
+                const files = this.fileInput.files;
+                this.handleFiles(files);
+                this.fileInput.value = '';
+            }
+        };
+        this.isOver = false;
+        this.compact = false;
+        this.label = undefined;
+        this.disabled = false;
+        this.accept = undefined;
+        this.multiple = false;
+        this.maxFileSize = undefined;
+    }
+    dragenterHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
+        }
+    }
+    dragoverHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
+        }
+    }
+    dragleaveHandler() {
+        if (!this.disabled) {
+            this.isOver = false;
+        }
+    }
+    dropHandler({ dataTransfer }) {
+        if (!this.disabled) {
+            this.isOver = false;
+            if (dataTransfer != null) {
+                this.handleFiles(dataTransfer.files);
+            }
+        }
+    }
+    componentDidLoad() {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.addEventListener(eventName, this.preventDefaults, false);
+            document.body.addEventListener(eventName, this.preventDefaults, false);
+        });
+    }
+    disconnectedCallback() {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.removeEventListener(eventName, this.preventDefaults, false);
+            document.body.removeEventListener(eventName, this.preventDefaults, false);
+        });
+    }
+    preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    renderLabel() {
+        var _a;
+        return ((_a = this.label) !== null && _a !== void 0 ? _a : (this.compact ? ('Upload') : (h("span", null, "Drop files to upload, or ", h("span", { class: "six-file-upload__label--highlighted" }, "browse")))));
+    }
+    render() {
+        const Container = this.compact ? 'six-button' : 'six-card';
+        return (h("div", { class: {
+                'six-file-upload': true,
+                'six-file-upload--disabled': this.disabled,
+            } }, h(Container, { class: {
+                'six-file-upload__container--compact': this.compact,
+                'six-file-upload__container--full': !this.compact,
+            } }, this.compact && (h("span", { slot: "prefix" }, h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))), h("div", { class: {
+                'six-file-upload__drop-zone': true,
+                'six-file-upload__drop-zone--hover': this.isOver,
+                'six-file-upload__drop-zone--compact': this.compact,
+            } }, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, multiple: this.multiple, onChange: this.onChange, ref: (el) => (this.fileInput = el) })))));
+    }
+    static get is() { return "six-file-upload"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-file-upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true if file control should be small."
+                },
+                "attribute": "compact",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the drop area."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set when button is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted MIME-Types."
+                },
+                "attribute": "accept",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "More than one file allowed."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "maxFileSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Allowed max file size in bytes."
+                },
+                "attribute": "max-file-size",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOver": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "success",
+                "name": "six-file-upload-success",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggers when a file is added."
+                },
+                "complexType": {
+                    "original": "SixFileUploadSuccessPayload",
+                    "resolved": "IMultipleFiles | ISingleFile",
+                    "references": {
+                        "SixFileUploadSuccessPayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-file-upload/six-file-upload.tsx",
+                            "id": "src/components/six-file-upload/six-file-upload.tsx::SixFileUploadSuccessPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "failure",
+                "name": "six-file-upload-failure",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggers when an uploaded file doesn't match MIME type or max file size."
+                },
+                "complexType": {
+                    "original": "SixFileUploadFailurePayload",
+                    "resolved": "SixFileUploadFailurePayload",
+                    "references": {
+                        "SixFileUploadFailurePayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-file-upload/six-file-upload.tsx",
+                            "id": "src/components/six-file-upload/six-file-upload.tsx::SixFileUploadFailurePayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "dragenter",
+                "method": "dragenterHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragover",
+                "method": "dragoverHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragleave",
+                "method": "dragleaveHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "drop",
+                "method": "dropHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=six-file-upload.js.map

package/dist/collection/components/six-file-upload/six-file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\ninterface ISingleFile {\n  file: File;\n}\n\ninterface IMultipleFiles {\n  files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n  reason: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-upload',\n  styleUrl: 'six-file-upload.scss',\n  scoped: true,\n  shadow: false,\n})\nexport class SixFileUpload {\n  @Element() readonly host!: HTMLSixFileUploadElement;\n\n  private fileInput?: HTMLInputElement;\n\n  @State() isOver = false;\n\n  /** Set to true if file control should be small. */\n  @Prop() readonly compact: boolean = false;\n\n  /** Label of the drop area. */\n  @Prop() readonly label?: string;\n\n  /** Set when button is disabled. */\n  @Prop() readonly disabled = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept?: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple = false;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize?: number;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n  /** Triggers when an uploaded file doesn't match MIME type or max file size. */\n  @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n  @Listen('dragenter', { capture: false })\n  dragenterHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragover', { capture: false })\n  dragoverHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragleave', { capture: false })\n  dragleaveHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  @Listen('drop', { capture: false })\n  dropHandler({ dataTransfer }: DragEvent) {\n    if (!this.disabled) {\n      this.isOver = false;\n      if (dataTransfer != null) {\n        this.handleFiles(dataTransfer.files);\n      }\n    }\n  }\n\n  private handleFiles = (files: FileList) => {\n    if (this.disabled || files.length === 0) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.failure.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (file == null) {\n        return;\n      }\n\n      let acceptedTypesList: string[] = [];\n      if (this.accept != null) {\n        acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n      }\n\n      if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n        const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n        return this.failure.emit({ reason });\n      }\n\n      if (this.maxFileSize != null && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.failure.emit({ reason });\n      }\n    }\n\n    const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n    this.success.emit(eventPayload);\n  };\n\n  componentDidLoad() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.addEventListener(eventName, this.preventDefaults, false);\n      document.body.addEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  disconnectedCallback() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.removeEventListener(eventName, this.preventDefaults, false);\n      document.body.removeEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  private preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private onChange = () => {\n    if (this.fileInput?.files != null) {\n      const files = this.fileInput.files;\n      this.handleFiles(files);\n      this.fileInput.value = '';\n    }\n  };\n\n  private renderLabel() {\n    return (\n      this.label ??\n      (this.compact ? (\n        'Upload'\n      ) : (\n        <span>\n          Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n        </span>\n      ))\n    );\n  }\n\n  render() {\n    const Container = this.compact ? 'six-button' : 'six-card';\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled,\n        }}\n      >\n        <Container\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && (\n            <span slot=\"prefix\">\n              <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n            </span>\n          )}\n          <div\n            class={{\n              'six-file-upload__drop-zone': true,\n              'six-file-upload__drop-zone--hover': this.isOver,\n              'six-file-upload__drop-zone--compact': this.compact,\n            }}\n          >\n            <span>{this.renderLabel()}</span>\n            <input\n              class=\"six-file-upload__input\"\n              type=\"file\"\n              name=\"resume\"\n              disabled={this.disabled}\n              accept={this.accept}\n              multiple={this.multiple}\n              onChange={this.onChange}\n              ref={(el) => (this.fileInput = el)}\n            />\n          </div>\n        </Container>\n      </div>\n    );\n  }\n}\n"]}