@six-group/ui-library 0.0.0-insider.d82aaa2 → 0.0.0-insider.d9aec2b

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

@@ -1,309 +1,389 @@
 import { h } from "@stencil/core";
+import { hasSlot } from "../../utils/slot";
 /**
  * @since 2.0.0
  * @status experimental
  *
+ * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.
  */
 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;
+    constructor() {
+        this.handleSlotChange = () => {
+            let validType = false;
+            if (this.errorText != null &&
+                ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) ||
+                    (typeof this.errorText == 'object' && this.errorText.length > 0))) {
+                validType = true;
+            }
+            this.hasError = validType || hasSlot(this.host, 'error-text');
+            console.log(this.errorText);
+            console.log(this.hasError);
+        };
+        this.handleFiles = (files) => {
+            if (this.disabled || files.length === 0 || this.uploading) {
+                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.hasError = false;
+        this.compact = false;
+        this.label = undefined;
+        this.disabled = false;
+        this.accept = undefined;
+        this.multiple = false;
+        this.maxFileSize = undefined;
+        this.uploading = false;
+        this.errorText = '';
+        this.invalid = false;
+    }
+    dragenterHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
         }
-        let acceptedTypesList = [];
-        if (this.accept != null) {
-          acceptedTypesList = this.accept.replace(/\s/g, '').split(',');
+    }
+    dragoverHandler() {
+        if (!this.disabled) {
+            this.isOver = true;
         }
-        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 });
+    }
+    dragleaveHandler() {
+        if (!this.disabled) {
+            this.isOver = false;
         }
-        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 });
+    }
+    dropHandler({ dataTransfer }) {
+        if (!this.disabled) {
+            this.isOver = false;
+            if (dataTransfer != null) {
+                this.handleFiles(dataTransfer.files);
+            }
         }
-      }
-      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;
+    componentWillLoad() {
+        this.handleSlotChange();
     }
-  }
-  dragleaveHandler() {
-    if (!this.disabled) {
-      this.isOver = false;
+    componentDidLoad() {
+        var _a;
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.addEventListener(eventName, this.preventDefaults, false);
+            document.body.addEventListener(eventName, this.preventDefaults, false);
+        });
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
     }
-  }
-  dropHandler({ dataTransfer }) {
-    if (!this.disabled) {
-      this.isOver = false;
-      if (dataTransfer != null) {
-        this.handleFiles(dataTransfer.files);
-      }
+    disconnectedCallback() {
+        var _a;
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+            this.host.removeEventListener(eventName, this.preventDefaults, false);
+            document.body.removeEventListener(eventName, this.preventDefaults, false);
+        });
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     }
-  }
-  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"
+    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';
+        const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter((text) => text != null && text.trim() !== '');
+        return (h("div", { key: 'aeaeba82e5419d410bb070edc4c14e99658a2024', class: {
+                'six-file-upload': true,
+                'six-file-upload--disabled': this.disabled || this.uploading,
+            } }, h(Container, { key: '18a2c76f6c1cc07d6a8d69f17fa55df61bcfc486', disabled: this.disabled || this.uploading, "aria-invalid": this.invalid ? 'true' : 'false', class: {
+                'six-file-upload__container--compact': this.compact,
+                'six-file-upload__container--full': !this.compact,
+            } }, this.compact && !this.uploading && (h("span", { slot: "prefix" }, h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))), h("div", { key: '1c4dee810b517670842708c438e280897b80c32a', class: {
+                'six-file-upload__drop-zone': true,
+                'six-file-upload__drop-zone--hover': this.isOver,
+                'six-file-upload__drop-zone--compact': this.compact,
+            } }, this.uploading ? (h("span", { class: "six-file-upload__drop-zone__spinner-container" }, h("six-spinner", null), " Uploading...")) : (h("div", null, 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) }))))), h("div", { key: '4d8524acc6ab4b919ab8ed469b16d11268ed9994', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: '8b104ee4a3feb6c5db255157a5530deeec5dec3d', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
+    }
+    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
+            },
+            "uploading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw the control in a loading state."
+                },
+                "attribute": "uploading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
             }
-          }
-        }
-      }];
-  }
-  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
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isOver": {},
+            "hasError": {}
+        };
+    }
+    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