@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/cjs/stzh-upload.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
-const translationUtils = require('./translation-utils-2dbbce94.js');
-const stzhInputDescription = require('./stzh-input-description-9ed61d1d.js');
+const utils = require('./utils-8dc66449.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+const stzhInputDescription = require('./stzh-input-description-9802abc2.js');
 const _commonjsHelpers = require('./_commonjsHelpers-bcc1208a.js');
 
 var dropzone = _commonjsHelpers.createCommonjsModule(function (module, exports) {
@@ -10306,445 +10306,478 @@ window.Dropzone = Dropzone;
 
 const Dropzone = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(dropzone);
 
-const stzhUploadCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}stzh-upload[hidden]{display:none}stzh-upload *,stzh-upload *::before,stzh-upload *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;position:relative;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.stzh-upload__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-upload__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-upload__error,.stzh-upload__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-upload__error{color:var(--stzh-color-error)}.stzh-upload__error-list{list-style:none;margin:0;padding:0}.stzh-upload__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-upload__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-upload__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-upload__description-long-popover[open]:not([open=false]) .stzh-upload__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-upload__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload stzh-icon.stzh-upload__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-xxsmall)}.stzh-upload__label{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);color:var(--stzh-base-lead-color);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__label{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-text-letter-spacing)}}.stzh-upload__clickarea{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding:var(--stzh-space-large);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;text-align:center;border:0.0625rem solid var(--stzh-base-border-color);border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD4SURBVHgB7dlBCoMwEAXQSXqBHsUj9ChWdK2eoN6gdi/W3shjtLssWxDTmZKFFGqhphDhPxBDIOEbJAyMIpYkSay1PvJwSxPjOO7btu1oBq8t3NqPFuxj+Dk1TVOpNE0PwzBcZLLrOkMBieNYDm7LH7DTPCgowJDCZTKvk+YTtRQ4yahpJRDUNwlaUuDkeiMAAFhGalEKXJZlOVdQ+kyBs9bWKEp8Q1DfENQ3VPg+ocIHAPAAFb5HqPD/YVVBjes+BMllM5soim78s175TX3f3ykgk/bNQ8kEdx0qDpsrpd5PtuRmVD23mWumfbs5ftqHMxl+SmmmPQHYcmyn56UnaQAAAABJRU5ErkJggg==');border-image-slice:12;border-image-width:0.75rem;border-image-repeat:round;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-upload__clickarea{padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-upload__clickarea{padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxxlarge)}}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7d3BbeJAFMbxsYXFlRLYDtgKllIsC0vcEiqIU8EmB04glu2EdEAHYTvgbgv2vawdcdokni/ikP9Pwp6YyB59YCcej/SS0MrzfDQYDG6sOW1fb2qa5tt2uz2ECHbcsR33OQhcoT/70+n0uNlstt2G9LWRprmtqvCOMM/n89FWi9jOu3Yf9yHCFfszsdx+zWaz225D4ouyLG9Wq9WjfzpZlo3quj7Yjo8B/2VBTpMkOVp2e8/QcvudFEWRe8r2xnd/I+DDLi4T95Zl6tdNP21GAX112f3wa+jEW+v1ehfQ16FdT9OAaJd/bwhUjEDFCFSMQMUIVIxAxQhU5+Vfpy7QqMEJhGCjTv8ynM/n4wAJv6cPAAAAAAAAAPBVMCiq44P1qc8au5zfiH4sw7umaZ67Z0p3AbEqX3SBMpVRhMfIYgQqRqBiBCpGoGIEKkagYgQqRqBiBCpGoGIEKkagYgSqwxx7JebYfwIeJwEAAAAAAAD4UhgU1WGOvRBz7PUqXzDHXozHyGIEKkagYgQqRqBiBCr2GqhXqwmI5oHuvJFl2TigFy+y0jb3HuiTt+q6pjpNT3bL+ZKd11Ya2A8Pdj9/9DpCZVlOvMgKdUHe5pdIP6v9i2jZ7e1buvBCVUn3C0VR3KZp+vMD+6wseMm8Uq9FZB9kFeJuga/Zn4Ud+8EbyeXWtraSlwOavGcvw+FwvFwu/4QIyhJqV+jPzl5PfpZ3BVb+AjID1CfgWYnZAAAAAElFTkSuQmCC');border-image-slice:24}}.stzh-upload__button{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__button{margin-top:var(--stzh-space-medium)}}.stzh-upload stzh-icon.stzh-upload__delete-icon-error{display:none}.stzh-upload__preview{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-upload__preview.dz-error .stzh-upload__title{color:var(--stzh-color-error)}.stzh-upload__preview.dz-error .stzh-upload__error-message{display:block}.stzh-upload__preview.dz-error .stzh-upload__meta,.stzh-upload__preview.dz-error stzh-icon.stzh-upload__delete-icon{display:none}.stzh-upload__preview.dz-error stzh-icon.stzh-upload__delete-icon-error{display:-ms-inline-flexbox;display:inline-flex}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-processing{display:none}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete{display:-ms-flexbox;display:flex}.stzh-upload__inner{height:3.875rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-upload__details{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;overflow:hidden}.stzh-upload__info-wrapper-processing,.stzh-upload__info-wrapper-complete{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.stzh-upload__info-wrapper-complete{display:none}.stzh-upload__actions{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-medium)}.stzh-upload__infos{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:var(--stzh-space-xxsmall)}.stzh-upload__title,.stzh-upload__subtitle{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-upload__title{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__meta{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em}.stzh-upload__size strong{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__image{display:none}.stzh-upload__progress{display:block;height:0.5rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13)}.stzh-upload__progress-bar{display:block;height:100%;width:0;border-radius:0.75rem;background:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__progress-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;margin-left:var(--stzh-space-medium);font-variant-numeric:tabular-nums}.stzh-upload__extension{text-transform:uppercase}.stzh-upload__delete{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;background:none;display:-ms-flexbox;display:flex;color:var(--stzh-base-color)}.stzh-upload__error-message{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;color:var(--stzh-color-error);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);display:none}.stzh-upload.dz-started .stzh-upload__clickarea{margin-bottom:var(--stzh-space-small)}.stzh-upload.dz-drag-hover .stzh-upload__clickarea{background-color:var(--stzh-color-primary4)}.stzh-upload.dz-drag-hover .stzh-upload__button{--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD/SURBVHgB7dlBasJAFAbg/71supy16aI9Qm7Qo7QnsDlBvUHrCdqeKPUEXbUunY0gCPOcMQgimIWOMOL/bRJC8vgJITz4BVFX1c9ieI+nDnss4KXB3xcGdKhfRbfPHnXGHG+waRP+JzLT0VsI4RtY+QbeoyAdXHxxdw5V9SQ/Wi8sLB9LC7nT4cGJrn8RgxoKlzIqrgSD5qbxA21RuPR7AxERnSftoijcTO/H3J5yY9DcGDQ3Bs2NGz4R0a3ghp8RN/xLuKqgvm8fypTKhnjwGleoNlUkJYbtM62cQaayvaCjiZiMIQeFGELbhPnH4LC+TPscuufkORYLMUObyrQNlY5lla7HUdEAAAAASUVORK5CYII=')}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIwSURBVHgB7d1NUhNBGIfxf3dKrdJNNlaJYTFu3Zg5gTlKbjByAuAEwgn0KHKCTk4gLhCrXJiFKy3mdXomCeoCQuYFFjy/DZOhauh6CGE+uqqDlpKGwxifVmZhoqCJNmD1xatS307VQ9KLIsTBZzm48/GYZhZ1XF6cfVztipfffTY1hYONYpoWJu31HXyWj9H83EP1cV/jCRoH04eknXf/7J/HnSp/zb+dpNE4v1uFayXtTnKvvD2Pu1XuFtJgNM2Vrf5Vlvo+E25s9TFhssPYxKy63U94V25t0LYLFt6GWRxZfjGuz4KwlaRiGOLvH3k7Cr2VOl2stgnqjKDOCOqMoM4I6oygzgjqpz11aoP2vjmB5k6XuobNWX4huMjX9AIAAAAAAACAh4Kbon5yy5hnjaX43/xG3Ng8vtzPLdtnSkFxX+ilnaysy6eeTGV0wmNkZwR1RlBnBHVGUGcEdUZQZwR1RlBnBHVGUGcEdUZQZwT1wxx7T8yxvwU8TgIAAAAAAADwoHBT1A9z7B0xx94Zc+xvCY+RnRHUGUGdEdQZQZ0R1Nk6KOt/+IjNGemnbvNRIWylueSctBtms2jBTrrdg4Wwpa6dWThu17FIcdReyyc9H69r40r5I3LZq2hfLxuuF1TJO5oX7zc9YJAdvKm/uswrzWsRWXM89bgEvs/xmOq9sj4/6sbxl6TRNARVeSWrTQ70uK6L1zr/oh48l1C78/E0/38shBPVP49KLdo/+z+8SbPi8H5KCQAAAABJRU5ErkJggg==')}}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-small)}.stzh-upload--is-disabled .stzh-upload__clickarea{cursor:not-allowed;background-color:var(--stzh-color-grey5)}";
-
-Dropzone.autoDiscover = false;
-const ATTR_NAME = "data-dz-name";
-const ATTR_TYPE = "data-dz-type";
-const ATTR_EXTENSION = "data-dz-extension";
-const ATTR_PROGRESS_TEXT = "data-dz-progress-text";
-let uploadCounter = 0;
-const StzhUpload = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhFileAdded = index.createEvent(this, "stzhFileAdded", 7);
-    this.stzhFilesAdded = index.createEvent(this, "stzhFilesAdded", 7);
-    this.stzhFileRemoved = index.createEvent(this, "stzhFileRemoved", 7);
-    this.stzhSending = index.createEvent(this, "stzhSending", 7);
-    this.stzhSendingMultiple = index.createEvent(this, "stzhSendingMultiple", 7);
-    this.stzhProcessing = index.createEvent(this, "stzhProcessing", 7);
-    this.stzhProcessingMultiple = index.createEvent(this, "stzhProcessingMultiple", 7);
-    this.stzhProgress = index.createEvent(this, "stzhProgress", 7);
-    this.stzhProgressTotal = index.createEvent(this, "stzhProgressTotal", 7);
-    this.stzhError = index.createEvent(this, "stzhError", 7);
-    this.stzhErrorMultiple = index.createEvent(this, "stzhErrorMultiple", 7);
-    this.stzhSuccess = index.createEvent(this, "stzhSuccess", 7);
-    this.stzhSuccessMultiple = index.createEvent(this, "stzhSuccessMultiple", 7);
-    this.stzhCanceled = index.createEvent(this, "stzhCanceled", 7);
-    this.stzhCanceledMultiple = index.createEvent(this, "stzhCanceledMultiple", 7);
-    this.stzhComplete = index.createEvent(this, "stzhComplete", 7);
-    this.stzhCompleteMultiple = index.createEvent(this, "stzhCompleteMultiple", 7);
-    /* Initially pre existing files (e.g. already uploaded by the user) */
-    this.existingFiles = [];
-    this._existingFiles = [];
-    /** Label */
-    this.label = "";
-    /** Description */
-    this.description = "";
-    /** Button text */
-    this.button = "";
-    /**
-     * URL the files are processed to.
-     *
-     * You can also provide a function that will be called with `files` and
-     * `dataBlocks`  and must return the url as string.
-     */
-    this.url = "";
-    /**
-     * Can be changed to `"put"` if necessary. You can also provide a function
-     * that will be called with `files` and must return the method.
-     */
-    this.method = "post";
-    /**
-     * Will be set on the XHRequest.
-     */
-    this.withCredentials = false;
-    /**
-     * Whether the upload is disabled or not.
-     */
-    this.disabled = false;
-    /**
-     * Whether the upload is marked as invalid.
-     */
-    this.invalid = false;
-    /**
-     * The default implementation of `accept` checks the file's mime type or
-     * extension against this list. This is a comma separated list of mime
-     * types or file extensions.
-     *
-     * Eg.: `image/*,application/pdf,.psd`
-     *
-     * This option will also be used as
-     * [`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)
-     * parameter on the hidden file input as well.
-     */
-    this.acceptedFiles = null;
-    /**
-     * If false, files will be added to the queue but the queue will not be
-     * processed automatically.
-     * This can be useful if you need some additional user input before sending
-     * files (or if you want want all files sent at once).
-     * If you're ready to send the file simply call `element.processQueue()`.
-     */
-    this.autoProcessQueue = true;
-    /**
-     * If not `null` defines how many files this dropzone handles. If it exceeds,
-     * the event `stzhMaxfilesexceeded` will be called.
-     */
-    this.maxFiles = null;
-    /**
-     * The maximum filesize (in MiB) that is allowed to be uploaded.
-     */
-    this.maxFilesize = 25;
-    /**
-     * How many file uploads to process in parallel.
-     */
-    this.parallelUploads = 2;
-    /**
-     * Whether to send multiple files in one request. If
-     * this it set to true, then the fallback file input element will
-     * have the `multiple` attribute as well. This option will
-     * also trigger additional events (like `stzhSuccessMultiple`). See the events
-     * documentation section for more information.
-     */
-    this.uploadMultiple = false;
-    /**
-     * Whether you want files to be uploaded in chunks to your server. This can't be
-     * used in combination with `uploadMultiple`.
-     *
-     * See `chunksUploaded` prop for the callback to finalise an upload.
-     */
-    this.chunking = false;
-    /**
-     * If `chunking` is enabled, this defines whether **every** file should be chunked,
-     * even if the file size is below chunkSize. This means, that the additional chunk
-     * form data will be submitted and the `chunksUploaded` callback will be invoked.
-     */
-    this.forceChunking = false;
-    /**
-     * If `chunking` is `true`, then this defines the chunk size in bytes.
-     */
-    this.chunkSize = 2 * 1024 * 1024;
-    /**
-     * If `true`, the individual chunks of a file are being uploaded simultaneously.
-     */
-    this.parallelChunkUploads = false;
-    /**
-     * Whether a chunk should be retried if it fails.
-     */
-    this.retryChunks = false;
-    /**
-     * If `retryChunks` is true, how many times should it be retried.
-     */
-    this.retryChunksLimit = 3;
-    /**
-     * The base that is used to calculate the **displayed** filesize. You can
-     * change this to 1024 if you would rather display kibibytes, mebibytes,
-     * etc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`
-     * not `1 kilobyte`. You can change this to `1024` if you don't care about
-     * validity.
-     */
-    this.filesizeBase = 1000;
-    /**
-     * An optional object to send additional headers to the server. Eg:
-     * `{ "My-Awesome-Header": "header value" }`
-     */
-    this.headers = null;
-    /**
-     * Should the default headers be set or not?
-     * Accept: application/json <- for requesting json response
-     * Cache-Control: no-cache <- Request shouldnt be cached
-     * X-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest
-     */
-    this.defaultHeaders = true;
-    /**
-     * A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)
-     * and a `done` function as parameters.
-     *
-     * If the done function is invoked without arguments, the file is "accepted" and will
-     * be processed. If you pass an error message, the file is rejected, and the error
-     * message will be displayed.
-     * This function will not be called if the file is too big or doesn't match the mime types.
-     */
-    this.accept = function (_file, done) {
-      return done();
-    };
-    /**
-     * The callback that will be invoked when all chunks have been uploaded for a file.
-     * It gets the file for which the chunks have been uploaded as the first parameter,
-     * and the `done` function as second. `done()` needs to be invoked when everything
-     * needed to finish the upload process is done.
-     */
-    this.chunksUploaded = function (_file, done) {
-      done();
-    };
-    /**
-     * This is the element the hidden input field (which is used when clicking on the
-     * dropzone to trigger file selection) will be appended to. This might
-     * be important in case you use frameworks to switch the content of your page.
-     *
-     * Can be a selector string, or an element directly.
-     */
-    this.hiddenInputContainer = "body";
-  }
-  existingFilesWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._existingFiles = JSON.parse(newValue);
-    }
-    else {
-      this._existingFiles = newValue;
-    }
-  }
-  disabledWatcher() {
-    if (this.disabled) {
-      this.dropzone.disable();
-    }
-    else {
-      this.dropzone.enable();
-    }
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  async processQueue() {
-    return this.dropzone.processQueue();
-  }
-  async componentWillLoad() {
-    this.uploadId = `stzh-upload-${uploadCounter++}`;
-    this.existingFilesWatcher(this.existingFiles);
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'upload');
-    }
-  }
-  componentDidRender() {
-    if (this.dropzone) {
-      return;
-    }
-    this.dropzone = new Dropzone(this.dropzoneElement, {
-      url: this.url,
-      method: this.method,
-      withCredentials: this.withCredentials,
-      clickable: [this.clickareaElement],
-      acceptedFiles: this.acceptedFiles,
-      accept: this.accept,
-      maxFiles: this.maxFiles,
-      maxFilesize: this.maxFilesize,
-      filesizeBase: this.filesizeBase,
-      parallelUploads: this.parallelUploads,
-      uploadMultiple: this.uploadMultiple,
-      autoProcessQueue: this.autoProcessQueue,
-      headers: this.headers,
-      defaultHeaders: this.defaultHeaders,
-      chunking: this.chunking,
-      chunkSize: this.chunkSize,
-      chunksUploaded: this.chunksUploaded,
-      forceChunking: this.forceChunking,
-      parallelChunkUploads: this.parallelChunkUploads,
-      retryChunks: this.retryChunks,
-      retryChunksLimit: this.retryChunksLimit,
-      createImageThumbnails: false,
-      hiddenInputContainer: this.hiddenInputContainer,
-      dictFileSizeUnits: { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" },
-      dictRemoveFileConfirmation: null,
-      dictMaxFilesExceeded: this.localization.maxFilesExceeded,
-      dictRemoveFile: this.localization.removeFile,
-      dictCancelUploadConfirmation: this.localization.cancelUploadConfirmation,
-      dictUploadCanceled: this.localization.uploadCanceled,
-      dictCancelUpload: this.localization.cancelUpload,
-      dictResponseError: this.localization.responseError,
-      dictInvalidFileType: this.localization.invalidFileType,
-      dictFileTooBig: this.localization.fileTooBig,
-      error: (file, message, xhr) => {
-        if (file.previewElement) {
-          file.previewElement.classList.add("dz-error");
-          if (typeof message !== "string" && message.error) {
-            message = message.error;
-          }
-          else if (xhr) {
-            if (xhr.status === 401 || xhr.status === 403) {
-              message = this.localization.accessError;
-            }
-            else if (xhr.status === 413) {
-              message = this.localization.fileTooBigServer;
-            }
-            else if (xhr.status === 415) {
-              message = this.localization.invalidFileType;
-            }
-            else if (xhr.status >= 500) {
-              message = this.localization.serverError;
-            }
-            else {
-              const defaultError = this.localization.responseError
-                .replace("{{statusCode}}", xhr.status);
-              message = defaultError;
-            }
-          }
-          for (let node of file.previewElement.querySelectorAll("[data-dz-errormessage]")) {
-            node.textContent = message;
-          }
-        }
-      },
-      previewTemplate: `
-      <div class="stzh-upload__preview">
-        <div class="stzh-upload__inner">
-          <div class="stzh-upload__image">
-            <img data-dz-thumbnail />
-          </div>
-
-          <div class="stzh-upload__details">
-            <div class="stzh-upload__info-wrapper-processing">
-              <div class="stzh-upload__infos">
-                <div class="stzh-upload__subtitle">
-                  <span data-dz-name></span>
-                </div>
-                <div class="stzh-upload__progress-text">
-                  <span data-dz-progress-text></span>
-                </div>
-              </div>
-              <div class="stzh-upload__progress">
-                <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
-              </div>
-            </div>
-            <div class="stzh-upload__info-wrapper-complete">
-              <div class="stzh-upload__title">
-                <span data-dz-name></span>
-              </div>
-              <div class="stzh-upload__meta">
-                <span class="stzh-upload__extension" data-dz-extension></span>
-                |
-                <span class="stzh-upload__size" data-dz-size></span>
-              </div>
-              <div class="stzh-upload__error-message">
-                <span data-dz-errormessage></span>
-              </div>
-            </div>
-            <div class="stzh-upload__actions">
-              <button class="stzh-upload__delete" data-dz-remove title="${this.localization.cancelUpload}">
-                <stzh-icon class="stzh-upload__delete-icon" name="delete"></stzh-icon>
-                <stzh-icon class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      `
-    });
-    this.disabledWatcher();
-    this.dropzone.on("addedfile", (file) => this.stzhFileAdded.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("addedfiles", (files) => this.stzhFilesAdded.emit({
-      component: "stzh-upload", files
-    }));
-    this.dropzone.on("removedfile", (file) => this.stzhFileRemoved.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("sending", (file, xhr, formData) => this.stzhSending.emit({
-      component: "stzh-upload", file, xhr, formData
-    }));
-    this.dropzone.on("sendingmultiple", (files, xhr, formData) => this.stzhSendingMultiple.emit({
-      component: "stzh-upload", files, xhr, formData
-    }));
-    this.dropzone.on("processing", (file) => this.stzhProcessing.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("processingmultiple", (files) => this.stzhProcessingMultiple.emit({
-      component: "stzh-upload", files
-    }));
-    this.dropzone.on("uploadprogress", (file, progress, bytesSent) => this.stzhProgress.emit({
-      component: "stzh-upload", file, progress, bytesSent
-    }));
-    this.dropzone.on("totaluploadprogress", (totalUploadProgress, totalBytes, totalBytesSent) => this.stzhProgressTotal.emit({
-      component: "stzh-upload", totalUploadProgress, totalBytes, totalBytesSent
-    }));
-    this.dropzone.on("error", (file, message, xhr) => this.stzhError.emit({
-      component: "stzh-upload", file, message, xhr
-    }));
-    this.dropzone.on("errormultiple", (files, message, xhr) => this.stzhErrorMultiple.emit({
-      component: "stzh-upload", files, message, xhr
-    }));
-    this.dropzone.on("success", (file, responseText, event) => this.stzhSuccess.emit({
-      component: "stzh-upload", file, responseText, event
-    }));
-    this.dropzone.on("successmultiple", (files, responseText, event) => this.stzhSuccessMultiple.emit({
-      component: "stzh-upload", files, responseText, event
-    }));
-    this.dropzone.on("canceled", (file) => this.stzhCanceled.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("canceledmultiple", (files) => this.stzhCanceledMultiple.emit({
-      component: "stzh-upload", files
-    }));
-    this.dropzone.on("complete", (file) => this.stzhComplete.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("completemultiple", (files) => this.stzhCompleteMultiple.emit({
-      component: "stzh-upload", files
-    }));
-    this.dropzone.on("addedfile", (file) => {
-      file.previewElement.querySelectorAll(`[${ATTR_NAME}]`).forEach((name) => {
-        name.setAttribute("title", file.name);
-      });
-      file.previewElement.querySelectorAll(`[${ATTR_TYPE}]`).forEach((type) => {
-        type.innerText = file.type;
-      });
-      file.previewElement.querySelectorAll(`[${ATTR_EXTENSION}]`).forEach((extension) => {
-        extension.innerText = file.name.split(".").pop();
-      });
-    });
-    this.dropzone.on("uploadprogress", (file, progress) => {
-      file.previewElement.querySelectorAll(`[${ATTR_PROGRESS_TEXT}]`).forEach((progressText) => {
-        progressText.innerText = `${progress.toString()}%`;
-      });
-    });
-    this._existingFiles.forEach((file) => {
-      this.dropzone.displayExistingFile(file, null, null, null, null);
-    });
-  }
-  disconnectedCallback() {
-    if (this.dropzone) {
-      this.dropzone.destroy();
-      this.dropzone = null;
-    }
-  }
-  render() {
-    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-upload": true,
-      "stzh-upload--is-invalid": this.invalid,
-      "stzh-upload--is-disabled": this.disabled,
-      "stzh-upload--has-error": errorUsed,
-      "stzh-upload--has-instructions": !!this.description || !!this.localization.description
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, this.label && index.h("div", { class: "stzh-upload__label" }, this.label), index.h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, index.h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), index.h("stzh-button", { size: "small", class: "stzh-upload__button", "aria-describedby": `${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled }, this.button ? this.button : this.localization.button)), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "existingFiles": ["existingFilesWatcher"],
-    "disabled": ["disabledWatcher"],
-    "error": ["errorWatcher"]
-  }; }
-};
+const stzhUploadCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}stzh-upload[hidden]{display:none}stzh-upload *,stzh-upload *::before,stzh-upload *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;position:relative;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.stzh-upload__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-upload__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-upload__error,.stzh-upload__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-upload__error{color:var(--stzh-color-error)}.stzh-upload__error-list{list-style:none;margin:0;padding:0}.stzh-upload__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-upload__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-upload__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-upload__description-long-popover[open]:not([open=false]) .stzh-upload__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-upload__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload stzh-icon.stzh-upload__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-xxsmall)}.stzh-upload__label{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);color:var(--stzh-base-lead-color);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__label{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-text-letter-spacing)}}.stzh-upload__clickarea{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding:var(--stzh-space-large);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;text-align:center;border:0.0625rem solid var(--stzh-base-border-color);border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD4SURBVHgB7dlBCoMwEAXQSXqBHsUj9ChWdK2eoN6gdi/W3shjtLssWxDTmZKFFGqhphDhPxBDIOEbJAyMIpYkSay1PvJwSxPjOO7btu1oBq8t3NqPFuxj+Dk1TVOpNE0PwzBcZLLrOkMBieNYDm7LH7DTPCgowJDCZTKvk+YTtRQ4yahpJRDUNwlaUuDkeiMAAFhGalEKXJZlOVdQ+kyBs9bWKEp8Q1DfENQ3VPg+ocIHAPAAFb5HqPD/YVVBjes+BMllM5soim78s175TX3f3ykgk/bNQ8kEdx0qDpsrpd5PtuRmVD23mWumfbs5ftqHMxl+SmmmPQHYcmyn56UnaQAAAABJRU5ErkJggg==');border-image-slice:12;border-image-width:0.75rem;border-image-repeat:round;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-upload__clickarea{padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-upload__clickarea{padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxxlarge)}}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7d3BbeJAFMbxsYXFlRLYDtgKllIsC0vcEiqIU8EmB04glu2EdEAHYTvgbgv2vawdcdokni/ikP9Pwp6YyB59YCcej/SS0MrzfDQYDG6sOW1fb2qa5tt2uz2ECHbcsR33OQhcoT/70+n0uNlstt2G9LWRprmtqvCOMM/n89FWi9jOu3Yf9yHCFfszsdx+zWaz225D4ouyLG9Wq9WjfzpZlo3quj7Yjo8B/2VBTpMkOVp2e8/QcvudFEWRe8r2xnd/I+DDLi4T95Zl6tdNP21GAX112f3wa+jEW+v1ehfQ16FdT9OAaJd/bwhUjEDFCFSMQMUIVIxAxQhU5+Vfpy7QqMEJhGCjTv8ynM/n4wAJv6cPAAAAAAAAAPBVMCiq44P1qc8au5zfiH4sw7umaZ67Z0p3AbEqX3SBMpVRhMfIYgQqRqBiBCpGoGIEKkagYgQqRqBiBCpGoGIEKkagYgSqwxx7JebYfwIeJwEAAAAAAAD4UhgU1WGOvRBz7PUqXzDHXozHyGIEKkagYgQqRqBiBCr2GqhXqwmI5oHuvJFl2TigFy+y0jb3HuiTt+q6pjpNT3bL+ZKd11Ya2A8Pdj9/9DpCZVlOvMgKdUHe5pdIP6v9i2jZ7e1buvBCVUn3C0VR3KZp+vMD+6wseMm8Uq9FZB9kFeJuga/Zn4Ud+8EbyeXWtraSlwOavGcvw+FwvFwu/4QIyhJqV+jPzl5PfpZ3BVb+AjID1CfgWYnZAAAAAElFTkSuQmCC');border-image-slice:24}}.stzh-upload__button{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__button{margin-top:var(--stzh-space-medium)}}.stzh-upload stzh-icon.stzh-upload__delete-icon-error{display:none}.stzh-upload__preview{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-upload__preview.dz-error .stzh-upload__title{color:var(--stzh-color-error)}.stzh-upload__preview.dz-error .stzh-upload__error-message{display:block}.stzh-upload__preview.dz-error .stzh-upload__meta,.stzh-upload__preview.dz-error stzh-icon.stzh-upload__delete-icon{display:none}.stzh-upload__preview.dz-error stzh-icon.stzh-upload__delete-icon-error{display:-ms-inline-flexbox;display:inline-flex}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-processing{display:none}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete{display:-ms-flexbox;display:flex}.stzh-upload__inner{height:3.875rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-upload__details{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;overflow:hidden}.stzh-upload__info-wrapper-processing,.stzh-upload__info-wrapper-complete{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.stzh-upload__info-wrapper-complete{display:none}.stzh-upload__actions{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-medium)}.stzh-upload__infos{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:var(--stzh-space-xxsmall)}.stzh-upload__title,.stzh-upload__subtitle{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-upload__title{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__meta{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em}.stzh-upload__size strong{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__image{display:none}.stzh-upload__progress{display:block;height:0.5rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13)}.stzh-upload__progress-bar{display:block;height:100%;width:0;border-radius:0.75rem;background:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__progress-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;margin-left:var(--stzh-space-medium);font-variant-numeric:tabular-nums}.stzh-upload__extension{text-transform:uppercase}.stzh-upload__delete{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;background:none;display:-ms-flexbox;display:flex;color:var(--stzh-base-color)}.stzh-upload__error-message{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;color:var(--stzh-color-error);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);display:none}.stzh-upload.dz-started .stzh-upload__clickarea{margin-bottom:var(--stzh-space-small)}.stzh-upload:has(.stzh-upload__preview) .stzh-upload__clickarea{margin-bottom:var(--stzh-space-small)}.stzh-upload.dz-drag-hover .stzh-upload__clickarea{background-color:var(--stzh-color-primary4)}.stzh-upload.dz-drag-hover .stzh-upload__button{--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD/SURBVHgB7dlBasJAFAbg/71supy16aI9Qm7Qo7QnsDlBvUHrCdqeKPUEXbUunY0gCPOcMQgimIWOMOL/bRJC8vgJITz4BVFX1c9ieI+nDnss4KXB3xcGdKhfRbfPHnXGHG+waRP+JzLT0VsI4RtY+QbeoyAdXHxxdw5V9SQ/Wi8sLB9LC7nT4cGJrn8RgxoKlzIqrgSD5qbxA21RuPR7AxERnSftoijcTO/H3J5yY9DcGDQ3Bs2NGz4R0a3ghp8RN/xLuKqgvm8fypTKhnjwGleoNlUkJYbtM62cQaayvaCjiZiMIQeFGELbhPnH4LC+TPscuufkORYLMUObyrQNlY5lla7HUdEAAAAASUVORK5CYII=')}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIwSURBVHgB7d1NUhNBGIfxf3dKrdJNNlaJYTFu3Zg5gTlKbjByAuAEwgn0KHKCTk4gLhCrXJiFKy3mdXomCeoCQuYFFjy/DZOhauh6CGE+uqqDlpKGwxifVmZhoqCJNmD1xatS307VQ9KLIsTBZzm48/GYZhZ1XF6cfVztipfffTY1hYONYpoWJu31HXyWj9H83EP1cV/jCRoH04eknXf/7J/HnSp/zb+dpNE4v1uFayXtTnKvvD2Pu1XuFtJgNM2Vrf5Vlvo+E25s9TFhssPYxKy63U94V25t0LYLFt6GWRxZfjGuz4KwlaRiGOLvH3k7Cr2VOl2stgnqjKDOCOqMoM4I6oygzgjqpz11aoP2vjmB5k6XuobNWX4huMjX9AIAAAAAAACAh4Kbon5yy5hnjaX43/xG3Ng8vtzPLdtnSkFxX+ilnaysy6eeTGV0wmNkZwR1RlBnBHVGUGcEdUZQZwR1RlBnBHVGUGcEdUZQZwT1wxx7T8yxvwU8TgIAAAAAAADwoHBT1A9z7B0xx94Zc+xvCY+RnRHUGUGdEdQZQZ0R1Nk6KOt/+IjNGemnbvNRIWylueSctBtms2jBTrrdg4Wwpa6dWThu17FIcdReyyc9H69r40r5I3LZq2hfLxuuF1TJO5oX7zc9YJAdvKm/uswrzWsRWXM89bgEvs/xmOq9sj4/6sbxl6TRNARVeSWrTQ70uK6L1zr/oh48l1C78/E0/38shBPVP49KLdo/+z+8SbPi8H5KCQAAAABJRU5ErkJggg==')}}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-small)}.stzh-upload--is-disabled .stzh-upload__clickarea{cursor:not-allowed;background-color:var(--stzh-color-grey5)}";
+
+Dropzone.autoDiscover = false;
+const ATTR_NAME = "data-dz-name";
+const ATTR_TYPE = "data-dz-type";
+const ATTR_EXTENSION = "data-dz-extension";
+const ATTR_PROGRESS_TEXT = "data-dz-progress-text";
+let uploadCounter = 0;
+const StzhUpload = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhFileAdded = index.createEvent(this, "stzhFileAdded", 7);
+    this.stzhFilesAdded = index.createEvent(this, "stzhFilesAdded", 7);
+    this.stzhFileRemoved = index.createEvent(this, "stzhFileRemoved", 7);
+    this.stzhSending = index.createEvent(this, "stzhSending", 7);
+    this.stzhSendingMultiple = index.createEvent(this, "stzhSendingMultiple", 7);
+    this.stzhProcessing = index.createEvent(this, "stzhProcessing", 7);
+    this.stzhProcessingMultiple = index.createEvent(this, "stzhProcessingMultiple", 7);
+    this.stzhProgress = index.createEvent(this, "stzhProgress", 7);
+    this.stzhProgressTotal = index.createEvent(this, "stzhProgressTotal", 7);
+    this.stzhError = index.createEvent(this, "stzhError", 7);
+    this.stzhErrorMultiple = index.createEvent(this, "stzhErrorMultiple", 7);
+    this.stzhSuccess = index.createEvent(this, "stzhSuccess", 7);
+    this.stzhSuccessMultiple = index.createEvent(this, "stzhSuccessMultiple", 7);
+    this.stzhCanceled = index.createEvent(this, "stzhCanceled", 7);
+    this.stzhCanceledMultiple = index.createEvent(this, "stzhCanceledMultiple", 7);
+    this.stzhComplete = index.createEvent(this, "stzhComplete", 7);
+    this.stzhCompleteMultiple = index.createEvent(this, "stzhCompleteMultiple", 7);
+    /**
+     * Initially pre existing files (e.g. already uploaded by the user).
+     * Array of objects that must at least include `name` and `size` attribute:
+     * `[{"name":"file1.txt", "size": 12345}, {"name":"file2.txt", "size": 12345}]`
+     */
+    this.existingFiles = [];
+    this._existingFiles = [];
+    /** Label */
+    this.label = "";
+    /** Description */
+    this.description = "";
+    /** Button text */
+    this.button = "";
+    /**
+     * URL the files are processed to.
+     *
+     * You can also provide a function that will be called with `files` and
+     * `dataBlocks`  and must return the url as string.
+     */
+    this.url = "";
+    /**
+     * Can be changed to `"put"` if necessary. You can also provide a function
+     * that will be called with `files` and must return the method.
+     */
+    this.method = "post";
+    /**
+     * Will be set on the XHRequest.
+     */
+    this.withCredentials = false;
+    /**
+     * Whether the upload is disabled or not.
+     */
+    this.disabled = false;
+    /**
+     * Whether the upload is marked as invalid.
+     */
+    this.invalid = false;
+    /**
+     * The default implementation of `accept` checks the file's mime type or
+     * extension against this list. This is a comma separated list of mime
+     * types or file extensions.
+     *
+     * Eg.: `image/*,application/pdf,.psd`
+     *
+     * This option will also be used as
+     * [`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)
+     * parameter on the hidden file input as well.
+     */
+    this.acceptedFiles = null;
+    /**
+     * If false, files will be added to the queue but the queue will not be
+     * processed automatically.
+     * This can be useful if you need some additional user input before sending
+     * files (or if you want want all files sent at once).
+     * If you're ready to send the file simply call `element.processQueue()`.
+     */
+    this.autoProcessQueue = true;
+    /**
+     * If not `null` defines how many files this dropzone handles. If it exceeds,
+     * the event `stzhMaxfilesexceeded` will be called.
+     */
+    this.maxFiles = null;
+    /**
+     * The maximum filesize (in MiB) that is allowed to be uploaded.
+     */
+    this.maxFilesize = 25;
+    /**
+     * How many file uploads to process in parallel.
+     */
+    this.parallelUploads = 2;
+    /**
+     * Whether to send multiple files in one request. If
+     * this it set to true, then the fallback file input element will
+     * have the `multiple` attribute as well. This option will
+     * also trigger additional events (like `stzhSuccessMultiple`). See the events
+     * documentation section for more information.
+     */
+    this.uploadMultiple = false;
+    /**
+     * Whether you want files to be uploaded in chunks to your server. This can't be
+     * used in combination with `uploadMultiple`.
+     *
+     * See `chunksUploaded` prop for the callback to finalise an upload.
+     */
+    this.chunking = false;
+    /**
+     * If `chunking` is enabled, this defines whether **every** file should be chunked,
+     * even if the file size is below chunkSize. This means, that the additional chunk
+     * form data will be submitted and the `chunksUploaded` callback will be invoked.
+     */
+    this.forceChunking = false;
+    /**
+     * If `chunking` is `true`, then this defines the chunk size in bytes.
+     */
+    this.chunkSize = 2 * 1024 * 1024;
+    /**
+     * If `true`, the individual chunks of a file are being uploaded simultaneously.
+     */
+    this.parallelChunkUploads = false;
+    /**
+     * Whether a chunk should be retried if it fails.
+     */
+    this.retryChunks = false;
+    /**
+     * If `retryChunks` is true, how many times should it be retried.
+     */
+    this.retryChunksLimit = 3;
+    /**
+     * The base that is used to calculate the **displayed** filesize. You can
+     * change this to 1024 if you would rather display kibibytes, mebibytes,
+     * etc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`
+     * not `1 kilobyte`. You can change this to `1024` if you don't care about
+     * validity.
+     */
+    this.filesizeBase = 1000;
+    /**
+     * An optional object to send additional headers to the server. Eg:
+     * `{ "My-Awesome-Header": "header value" }`
+     */
+    this.headers = null;
+    /**
+     * Should the default headers be set or not?
+     * Accept: application/json <- for requesting json response
+     * Cache-Control: no-cache <- Request shouldnt be cached
+     * X-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest
+     */
+    this.defaultHeaders = true;
+    /**
+     * A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)
+     * and a `done` function as parameters.
+     *
+     * If the done function is invoked without arguments, the file is "accepted" and will
+     * be processed. If you pass an error message, the file is rejected, and the error
+     * message will be displayed.
+     * This function will not be called if the file is too big or doesn't match the mime types.
+     */
+    this.accept = function (_file, done) {
+      return done();
+    };
+    /**
+     * The callback that will be invoked when all chunks have been uploaded for a file.
+     * It gets the file for which the chunks have been uploaded as the first parameter,
+     * and the `done` function as second. `done()` needs to be invoked when everything
+     * needed to finish the upload process is done.
+     */
+    this.chunksUploaded = function (_file, done) {
+      done();
+    };
+    /**
+     * This is the element the hidden input field (which is used when clicking on the
+     * dropzone to trigger file selection) will be appended to. This might
+     * be important in case you use frameworks to switch the content of your page.
+     *
+     * Can be a selector string, or an element directly.
+     */
+    this.hiddenInputContainer = "body";
+  }
+  existingFilesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._existingFiles = JSON.parse(newValue);
+    }
+    else {
+      this._existingFiles = newValue;
+    }
+  }
+  disabledWatcher() {
+    if (this.disabled) {
+      this.dropzone.disable();
+    }
+    else {
+      this.dropzone.enable();
+    }
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  async processQueue() {
+    return this.dropzone.processQueue();
+  }
+  async componentWillLoad() {
+    this.uploadId = `stzh-upload-${uploadCounter++}`;
+    this.existingFilesWatcher(this.existingFiles);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'upload');
+    }
+  }
+  componentDidRender() {
+    if (this.dropzone) {
+      return;
+    }
+    const self = this;
+    this.dropzone = new Dropzone(this.dropzoneElement, {
+      url: this.url,
+      method: this.method,
+      withCredentials: this.withCredentials,
+      clickable: [this.clickareaElement],
+      acceptedFiles: this.acceptedFiles,
+      accept: this.accept,
+      maxFiles: this.maxFiles,
+      maxFilesize: this.maxFilesize,
+      filesizeBase: this.filesizeBase,
+      parallelUploads: this.parallelUploads,
+      uploadMultiple: this.uploadMultiple,
+      autoProcessQueue: this.autoProcessQueue,
+      headers: this.headers,
+      defaultHeaders: this.defaultHeaders,
+      chunking: this.chunking,
+      chunkSize: this.chunkSize,
+      chunksUploaded: this.chunksUploaded,
+      forceChunking: this.forceChunking,
+      parallelChunkUploads: this.parallelChunkUploads,
+      retryChunks: this.retryChunks,
+      retryChunksLimit: this.retryChunksLimit,
+      createImageThumbnails: false,
+      hiddenInputContainer: this.hiddenInputContainer,
+      dictFileSizeUnits: { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" },
+      dictRemoveFileConfirmation: null,
+      dictMaxFilesExceeded: this.localization.maxFilesExceeded,
+      dictRemoveFile: this.localization.removeFile,
+      dictCancelUploadConfirmation: this.localization.cancelUploadConfirmation,
+      dictUploadCanceled: this.localization.uploadCanceled,
+      dictCancelUpload: this.localization.cancelUpload,
+      dictResponseError: this.localization.responseError,
+      dictInvalidFileType: this.localization.invalidFileType,
+      dictFileTooBig: this.localization.fileTooBig,
+      // When the upload is finished, either with success or an error.
+      // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L752
+      complete(file) {
+        for (let node of file.previewElement.querySelectorAll("[data-dz-remove]")) {
+          node.setAttribute('title', this.options.dictRemoveFile);
+          node.setAttribute('aria-label', this.options.dictRemoveFile);
+        }
+        // move file uploads with errors to another element, so they are grouped together
+        if (file.status === "error") {
+          self.errorsElement.appendChild(file.previewElement);
+        }
+        if (file._removeLink) {
+          file._removeLink.innerHTML = this.options.dictRemoveFile;
+        }
+        if (file.previewElement) {
+          return file.previewElement.classList.add("dz-complete");
+        }
+      },
+      // Called whenever a file is removed.
+      // Taken fom https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L649
+      removedfile(file) {
+        if (file.previewElement != null && file.previewElement.parentNode != null) {
+          file.previewElement.parentNode.removeChild(file.previewElement);
+        }
+        // set focus to upload
+        self.buttonElement.setFocus();
+        return this._updateMaxFilesReachedClass();
+      },
+      error(file, message, xhr) {
+        if (file.previewElement) {
+          file.previewElement.classList.add("dz-error");
+          if (typeof message !== "string" && message.error) {
+            message = message.error;
+          }
+          else if (xhr) {
+            if (xhr.status === 401 || xhr.status === 403) {
+              message = self.localization.accessError;
+            }
+            else if (xhr.status === 413) {
+              message = self.localization.fileTooBigServer;
+            }
+            else if (xhr.status === 415) {
+              message = self.localization.invalidFileType;
+            }
+            else if (xhr.status >= 500) {
+              message = self.localization.serverError;
+            }
+            else {
+              const defaultError = self.localization.responseError
+                .replace("{{statusCode}}", xhr.status);
+              message = defaultError;
+            }
+          }
+          for (let node of file.previewElement.querySelectorAll("[data-dz-errormessage]")) {
+            node.textContent = message;
+          }
+        }
+      },
+      previewTemplate: `
+      <div class="stzh-upload__preview">
+        <div class="stzh-upload__inner">
+          <div class="stzh-upload__image">
+            <img data-dz-thumbnail />
+          </div>
+
+          <div class="stzh-upload__details">
+            <div class="stzh-upload__info-wrapper-processing">
+              <div class="stzh-upload__infos">
+                <div class="stzh-upload__subtitle">
+                  <span data-dz-name></span>
+                </div>
+                <div class="stzh-upload__progress-text">
+                  <span data-dz-progress-text></span>
+                </div>
+              </div>
+              <div class="stzh-upload__progress">
+                <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
+              </div>
+            </div>
+            <div class="stzh-upload__info-wrapper-complete">
+              <div class="stzh-upload__title">
+                <span data-dz-name></span>
+              </div>
+              <div class="stzh-upload__meta">
+                <span class="stzh-upload__extension" data-dz-extension></span>
+                |
+                <span class="stzh-upload__size" data-dz-size></span>
+              </div>
+              <div class="stzh-upload__error-message">
+                <span data-dz-errormessage></span>
+              </div>
+            </div>
+            <div class="stzh-upload__actions">
+              <button class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
+                <stzh-icon class="stzh-upload__delete-icon" name="delete"></stzh-icon>
+                <stzh-icon class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      `
+    });
+    this.disabledWatcher();
+    this.dropzone.on("addedfile", (file) => this.stzhFileAdded.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("addedfiles", (files) => this.stzhFilesAdded.emit({
+      component: "stzh-upload", files
+    }));
+    this.dropzone.on("removedfile", (file) => this.stzhFileRemoved.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("sending", (file, xhr, formData) => this.stzhSending.emit({
+      component: "stzh-upload", file, xhr, formData
+    }));
+    this.dropzone.on("sendingmultiple", (files, xhr, formData) => this.stzhSendingMultiple.emit({
+      component: "stzh-upload", files, xhr, formData
+    }));
+    this.dropzone.on("processing", (file) => this.stzhProcessing.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("processingmultiple", (files) => this.stzhProcessingMultiple.emit({
+      component: "stzh-upload", files
+    }));
+    this.dropzone.on("uploadprogress", (file, progress, bytesSent) => this.stzhProgress.emit({
+      component: "stzh-upload", file, progress, bytesSent
+    }));
+    this.dropzone.on("totaluploadprogress", (totalUploadProgress, totalBytes, totalBytesSent) => this.stzhProgressTotal.emit({
+      component: "stzh-upload", totalUploadProgress, totalBytes, totalBytesSent
+    }));
+    this.dropzone.on("error", (file, message, xhr) => this.stzhError.emit({
+      component: "stzh-upload", file, message, xhr
+    }));
+    this.dropzone.on("errormultiple", (files, message, xhr) => this.stzhErrorMultiple.emit({
+      component: "stzh-upload", files, message, xhr
+    }));
+    this.dropzone.on("success", (file, responseText, event) => this.stzhSuccess.emit({
+      component: "stzh-upload", file, responseText, event
+    }));
+    this.dropzone.on("successmultiple", (files, responseText, event) => this.stzhSuccessMultiple.emit({
+      component: "stzh-upload", files, responseText, event
+    }));
+    this.dropzone.on("canceled", (file) => this.stzhCanceled.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("canceledmultiple", (files) => this.stzhCanceledMultiple.emit({
+      component: "stzh-upload", files
+    }));
+    this.dropzone.on("complete", (file) => this.stzhComplete.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("completemultiple", (files) => this.stzhCompleteMultiple.emit({
+      component: "stzh-upload", files
+    }));
+    this.dropzone.on("addedfile", (file) => {
+      file.previewElement.querySelectorAll(`[${ATTR_NAME}]`).forEach((name) => {
+        name.setAttribute("title", file.name);
+      });
+      file.previewElement.querySelectorAll(`[${ATTR_TYPE}]`).forEach((type) => {
+        type.innerText = file.type;
+      });
+      file.previewElement.querySelectorAll(`[${ATTR_EXTENSION}]`).forEach((extension) => {
+        extension.innerText = file.name.split(".").pop();
+      });
+    });
+    this.dropzone.on("uploadprogress", (file, progress) => {
+      file.previewElement.querySelectorAll(`[${ATTR_PROGRESS_TEXT}]`).forEach((progressText) => {
+        progressText.innerText = `${progress.toString()}%`;
+      });
+    });
+    this._existingFiles.forEach((file) => {
+      this.dropzone.displayExistingFile(file, null, null, null, null);
+    });
+  }
+  disconnectedCallback() {
+    if (this.dropzone) {
+      this.dropzone.destroy();
+      this.dropzone = null;
+    }
+  }
+  render() {
+    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-upload": true,
+      "stzh-upload--is-invalid": this.invalid,
+      "stzh-upload--is-disabled": this.disabled,
+      "stzh-upload--has-error": errorUsed,
+      "stzh-upload--has-instructions": !!this.description || !!this.localization.description
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, this.label && index.h("div", { class: "stzh-upload__label" }, this.label), index.h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, index.h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), index.h("stzh-button", { size: "small", class: "stzh-upload__button", ref: (el) => (this.buttonElement = el), "aria-describedby": `${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled }, this.button ? this.button : this.localization.button)), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }), index.h("div", { class: "stzh-upload__errors", ref: (el) => (this.errorsElement = el) }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "existingFiles": ["existingFilesWatcher"],
+    "disabled": ["disabledWatcher"],
+    "error": ["errorWatcher"]
+  }; }
+};
 StzhUpload.style = stzhUploadCss;
 
 exports.stzh_upload = StzhUpload;