@oiz/stzh-components 1.4.0-npmjstest → 1.5.0-alpha

package/dist/collection/components/stzh-input/stzh-input.css

@@ -122,6 +122,7 @@
   /* Styles for floating label */
   /* Button Right Variant */
   /* Size variants */
+  /* Spin button */
   /* Invalid */
   /* Readonly / Disabled */
 }
@@ -265,8 +266,8 @@
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: normal;
-  font-size: var(--stzh-font-micro-font-size);
-  line-height: var(--stzh-font-micro-text-line-height);
+  font-size: var(--stzh-font-nano-font-size);
+  line-height: var(--stzh-font-nano-text-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -319,8 +320,6 @@
   pointer-events: initial;
 }
 .stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-fixed-label .stzh-input__label, .stzh-input--is-filled .stzh-input__label, .stzh-input--is-readonly .stzh-input__label, .stzh-input--is-disabled .stzh-input__label, .stzh-input--has-placeholder .stzh-input__label, .stzh-input--is-invalid .stzh-input__label {
-  font-size: var(--stzh-font-nano-font-size);
-  line-height: var(--stzh-font-nano-text-line-height);
   display: block;
   top: 0;
   left: calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));
@@ -371,6 +370,16 @@
 .stzh-input--size-small.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-placeholder .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
   max-width: calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xsmall) - var(--stzh-form-input-small-height));
 }
+.stzh-input:not(.stzh-input--has-spin) .stzh-input__input::-webkit-outer-spin-button, .stzh-input:not(.stzh-input--has-spin) .stzh-input__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+          appearance: none;
+  margin: 0;
+}
+.stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number] {
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+}
 .stzh-input--is-invalid .stzh-input__input, .stzh-input--is-invalid .stzh-input__label, .stzh-input--is-invalid .stzh-input__input + .stzh-input__label {
   color: var(--stzh-color-error);
 }

package/dist/collection/components/stzh-input/stzh-input.js

@@ -16,6 +16,10 @@ export class StzhInput {
     this.multiline = false;
     /** If input field, this defines the type (if `search`, a search icon will be displayed) */
     this.type = "text";
+    /** If input type is number, this will be the step size  */
+    this.step = 1;
+    /** If input type is number and this property is true, this will show the spin buttons on hover/focus */
+    this.showSpin = false;
     /** Whether the element is readonly or not */
     this.readonly = false;
     /** Whether the element is disabled or not */
@@ -119,7 +123,7 @@ export class StzhInput {
   }
   typeWatcher(newValue) {
     const types = [
-      "text", "search", "password", "email", "url", "tel"
+      "text", "search", "password", "email", "url", "tel", "number"
     ];
     if (!this.multiline && !types.includes(newValue)) {
       throw new Error(`Type ${newValue} not supported`);
@@ -129,7 +133,7 @@ export class StzhInput {
     return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
   }
   renderInput() {
-    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
+    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, min: this.min, max: this.max, step: this.step, placeholder: this.placeholder, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
   }
   async componentWillLoad() {
     this.inputId = `stzh-input-${inputCounter++}`;
@@ -154,6 +158,7 @@ export class StzhInput {
       "stzh-input--has-description": descriptionUsed,
       "stzh-input--has-description-long": descriptionLongUsed,
       "stzh-input--has-error": errorUsed,
+      "stzh-input--has-spin": this.showSpin,
       "stzh-input--is-invalid": this.invalid,
       "stzh-input--is-disabled": this.disabled,
       "stzh-input--is-readonly": this.readonly,
@@ -249,8 +254,8 @@ export class StzhInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\"",
-          "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "original": "\"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\"",
+          "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "references": {}
         },
         "required": false,
@@ -263,6 +268,76 @@ export class StzhInput {
         "reflect": false,
         "defaultValue": "\"text\""
       },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input type is number, this will be the step size"
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input type is number, this will be the minimum step number"
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input type is number, this will be the maximum step number"
+        },
+        "attribute": "max",
+        "reflect": false
+      },
+      "showSpin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input type is number and this property is true, this will show the spin buttons on hover/focus"
+        },
+        "attribute": "show-spin",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "readonly": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.css

@@ -646,15 +646,6 @@ the .has-focus class is used by the focus target */
 
 .stzh-theme-ma {
   background-color: var(--stzh-color-grey5);
-
-  /* overwrite p1 and p2 font curves to be always the same size */
-  --stzh-font-curve-p1-medium-font-size: var(--stzh-font-milli-font-size);
-  --stzh-font-curve-p1-medium-text-line-height: var(--stzh-font-milli-text-line-height);
-  --stzh-font-curve-p1-medium-heading-line-height: var(--stzh-font-milli-heading-line-height);
-  --stzh-font-curve-p2-medium-font-size: var(--stzh-font-micro-font-size);
-  --stzh-font-curve-p2-medium-text-line-height: var(--stzh-font-micro-text-line-height);
-  --stzh-font-curve-p2-medium-heading-line-height: var(--stzh-font-micro-heading-line-height);
-  --stzh-font-curve-p2-medium-heading-letter-spacing: var(--stzh-font-micro-heading-letter-spacing);
 }
 
 :host {

package/dist/collection/components/stzh-radiogroup/stzh-radiogroup.js

@@ -84,9 +84,7 @@ export class StzhRadiogroup {
   }
   updateRadiosProperty(prop, value) {
     this.radios.forEach((radio) => {
-      if (prop === "name"
-        || (this.preventUpdateProperties.indexOf(prop) === -1
-          && radio.getAttribute(prop) === null)) {
+      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
         radio[camelCase(prop)] = value;
       }
     });

package/dist/collection/components/stzh-servicecard/stzh-servicecard.css

@@ -103,18 +103,18 @@
   position: relative;
   border-radius: var(--border-radius);
 }
-:host.is-ghost::after {
+:host.is-ghost::after, .is-ghost :host::after {
   border-radius: var(--border-radius);
 }
-:host.is-selected, :host.is-chosen {
+:host.is-selected, :host.is-chosen, .is-selected :host, .is-chosen :host {
   --box-shadow: var(--stzh-box-shadow-overlay);
 }
-:host.is-ghost {
+:host.is-ghost, .is-ghost :host {
   --box-shadow: none;
   --border: 0.0625rem solid transparent;
   overflow: hidden;
 }
-:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected {
+:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host {
   --dnd-visibility: visible;
   --dnd-opacity: 1;
 }

package/dist/collection/components/stzh-servicecard/stzh-servicecard.js

@@ -50,6 +50,9 @@ export class StzhServicecard {
       }
     };
     this.update = () => {
+      if (!this.mainElement) {
+        return;
+      }
       this.mainElement.classList.remove("stzh-servicecard--has-collapsed-header");
       if (media('medium').matches) {
         const headerWidth = this.headerElement.clientWidth;
@@ -97,13 +100,15 @@ export class StzhServicecard {
     this.arrowUpClick = () => {
       const sortable = this.element.closest("stzh-sortable");
       if (sortable) {
-        sortable.moveItem(this.element, "up");
+        const element = this.findSortableChildElement();
+        sortable.moveItem(element, "up");
       }
     };
     this.arrowDownClick = () => {
       const sortable = this.element.closest("stzh-sortable");
       if (sortable) {
-        sortable.moveItem(this.element, "down");
+        const element = this.findSortableChildElement();
+        sortable.moveItem(element, "down");
       }
     };
   }
@@ -134,6 +139,23 @@ export class StzhServicecard {
       this._actions = newValue;
     }
   }
+  findSortableChildElement() {
+    const sortable = this.element.closest("stzh-sortable");
+    if (sortable) {
+      let element = this.element;
+      let sortableContainer = null;
+      if (typeof sortable.container === "function") {
+        sortableContainer = sortable.container();
+      }
+      else {
+        sortableContainer = sortable.container;
+      }
+      while (element.parentElement !== sortableContainer) {
+        element = element.parentElement;
+      }
+      return element;
+    }
+  }
   async componentWillLoad() {
     this.subtitleWatcher(this.subtitle);
     this.actionsWatcher(this.actions);

package/dist/collection/components/stzh-servicecard-list/stzh-servicecard-list.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { cloneElement } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for `stzh-servicecard` elements
@@ -6,12 +7,28 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhServicecardList {
   constructor() {
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
     /** Whether collapse/expand toggle link */
     this.showToggleLink = false;
+    /** Whether sorting should be disabled */
+    this.sortableDisabled = false;
     /** HTML attribute that is used by the `toArray()` of sortable method */
     this.sortableDataIdAttribute = "data-id";
+    /** Algorithm how the ghost element will be cloned */
+    this.sortableGhostClone = (dragElement) => {
+      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
+      if (clonedStzhElement
+        && originalStzhElement
+        && clonedStzhElement.tagName.toLowerCase() === 'stzh-servicecard') {
+        const clonedStzhElementCard = clonedStzhElement;
+        const originalStzhElementCard = originalStzhElement;
+        // copy every property that is not reflected to its attribute
+        clonedStzhElementCard.heading = originalStzhElementCard.heading;
+        clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;
+        clonedStzhElementCard.actions = originalStzhElementCard.actions;
+        clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;
+      }
+      return clonedElement;
+    };
     this.allCollapsed = false;
     this.collapseClick = () => {
       const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
@@ -43,7 +60,7 @@ export class StzhServicecardList {
       "stzh-servicecard-list": true
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-servicecard-list__header" }, h("div", { class: "stzh-servicecard-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
-      h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute }, h("div", { class: "stzh-servicecard-list__cards", role: "list" }, h("slot", null))))));
+      h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-servicecard-list__cards", role: "list" }, h("slot", null))))));
   }
   static get is() { return "stzh-servicecard-list"; }
   static get encapsulation() { return "scoped"; }
@@ -79,7 +96,7 @@ export class StzhServicecardList {
           "text": "Translation strings"
         }
       },
-      "sortableDisabled": {
+      "showToggleLink": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -91,13 +108,13 @@ export class StzhServicecardList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether sorting should be disabled"
+          "text": "Whether collapse/expand toggle link"
         },
-        "attribute": "sortable-disabled",
-        "reflect": false,
+        "attribute": "show-toggle-link",
+        "reflect": true,
         "defaultValue": "false"
       },
-      "showToggleLink": {
+      "sortableDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -109,10 +126,10 @@ export class StzhServicecardList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether collapse/expand toggle link"
+          "text": "Whether sorting should be disabled"
         },
-        "attribute": "show-toggle-link",
-        "reflect": true,
+        "attribute": "sortable-disabled",
+        "reflect": false,
         "defaultValue": "false"
       },
       "sortableDataIdAttribute": {
@@ -132,6 +149,32 @@ export class StzhServicecardList {
         "attribute": "sortable-data-id-attribute",
         "reflect": false,
         "defaultValue": "\"data-id\""
+      },
+      "sortableGhostClone": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            },
+            "HTMLStzhServicecardElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Algorithm how the ghost element will be cloned"
+        },
+        "defaultValue": "(dragElement: HTMLElement) => {\n    const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);\n\n    if (\n      clonedStzhElement\n      && originalStzhElement\n      && clonedStzhElement.tagName.toLowerCase() === 'stzh-servicecard'\n    ) {\n      const clonedStzhElementCard: HTMLStzhServicecardElement = clonedStzhElement as HTMLStzhServicecardElement;\n      const originalStzhElementCard: HTMLStzhServicecardElement = originalStzhElement as HTMLStzhServicecardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedStzhElementCard.heading = originalStzhElementCard.heading;\n      clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n      clonedStzhElementCard.actions = originalStzhElementCard.actions;\n      clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    }\n\n    return clonedElement;\n  }"
       }
     };
   }

package/dist/collection/components/stzh-servicecard-list/stzh-servicecard-list.stories.js

@@ -102,7 +102,8 @@ const Template = (args) => (
         Content Middle Section 1
       </stzh-section>
       <stzh-section slot="middle">
-        Content Middle Section 2
+        Content Middle Section 2 with Input:
+        <stzh-input></stzh-input>
       </stzh-section>
       <stzh-button label="Button Right" slot="right" fullwidth></stzh-button>
     </stzh-servicecard>

package/dist/collection/components/stzh-sortable/stzh-sortable.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import scrollIntoView from "scroll-into-view-if-needed";
-import Sortable from "sortablejs";
+import Sortable from "../../libraries/sortable";
+import { cloneElement } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 const CLASS_ITEM = 'is-sortable-item';
 const CLASS_GHOST = "is-ghost";
@@ -23,6 +24,11 @@ export class StzhSortable {
       var _a;
       return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
     };
+    /** Algorithm how the ghost element will be cloned */
+    this.ghostClone = (dragElement) => {
+      const [clonedElement] = cloneElement(dragElement);
+      return clonedElement;
+    };
     /** Filtered elements that should prevent dragging inside the drag item elements */
     this.filterElements = [
       "[data-stzh-sortable-filtered]",
@@ -78,17 +84,13 @@ export class StzhSortable {
     };
     this.onKeydown = (event) => {
       const currentTarget = event.currentTarget;
+      const target = event.target;
       if (!this.getContainer() || this.disabled) {
         return;
       }
-      if (event.key === " "
-        || (event.key === "Tab"
-          && this.selectedItem
-          && this.selectedItem === event.currentTarget)) {
-        event.preventDefault();
-      }
-      const isFilteredElement = currentTarget.matches(this._filterElements.join(', '));
+      const isFilteredElement = target.matches(this._filterElements.join(', '));
       if (event.key === " " && !isFilteredElement) {
+        event.preventDefault();
         if (!this.selectedItem) {
           this.selectedItem = currentTarget;
           this.selectedItem.parentElement.classList.add(CLASS_PARENT_SELECTED);
@@ -104,6 +106,9 @@ export class StzhSortable {
           this.resetActiveItem();
         }
       }
+      else if (event.key === "Tab" && this.selectedItem && this.selectedItem === event.currentTarget) {
+        event.preventDefault();
+      }
       else if (event.key === "Escape" && this.selectedItem) {
         this.resetItemOnBlur = false;
         this.updateAriaLive(this.localization.canceled);
@@ -260,6 +265,7 @@ export class StzhSortable {
       delay: 200,
       delayOnTouchOnly: true,
       disabled: this.disabled,
+      ghostClone: this.ghostClone,
       // changed sorting within list
       onUpdate: this.updated
     });
@@ -378,6 +384,29 @@ export class StzhSortable {
         },
         "defaultValue": "() => {\n    return this.containerElement?.firstElementChild;\n  }"
       },
+      "ghostClone": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Algorithm how the ghost element will be cloned"
+        },
+        "defaultValue": "(dragElement: HTMLElement) => {\n    const [clonedElement] = cloneElement(dragElement);\n    return clonedElement;\n  }"
+      },
       "filterElements": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stzh-upload/stzh-upload.css

@@ -386,6 +386,9 @@ stzh-upload *::after {
 .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);
 }

package/dist/collection/components/stzh-upload/stzh-upload.js

@@ -18,7 +18,11 @@ let uploadCounter = 0;
  */
 export class StzhUpload {
   constructor() {
-    /* Initially pre existing files (e.g. already uploaded by the user) */
+    /**
+     * 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 */
@@ -224,6 +228,7 @@ export class StzhUpload {
     if (this.dropzone) {
       return;
     }
+    const self = this;
     this.dropzone = new Dropzone(this.dropzoneElement, {
       url: this.url,
       method: this.method,
@@ -258,7 +263,35 @@ export class StzhUpload {
       dictResponseError: this.localization.responseError,
       dictInvalidFileType: this.localization.invalidFileType,
       dictFileTooBig: this.localization.fileTooBig,
-      error: (file, message, xhr) => {
+      // 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) {
@@ -266,19 +299,19 @@ export class StzhUpload {
           }
           else if (xhr) {
             if (xhr.status === 401 || xhr.status === 403) {
-              message = this.localization.accessError;
+              message = self.localization.accessError;
             }
             else if (xhr.status === 413) {
-              message = this.localization.fileTooBigServer;
+              message = self.localization.fileTooBigServer;
             }
             else if (xhr.status === 415) {
-              message = this.localization.invalidFileType;
+              message = self.localization.invalidFileType;
             }
             else if (xhr.status >= 500) {
-              message = this.localization.serverError;
+              message = self.localization.serverError;
             }
             else {
-              const defaultError = this.localization.responseError
+              const defaultError = self.localization.responseError
                 .replace("{{statusCode}}", xhr.status);
               message = defaultError;
             }
@@ -323,7 +356,7 @@ export class StzhUpload {
               </div>
             </div>
             <div class="stzh-upload__actions">
-              <button class="stzh-upload__delete" data-dz-remove title="${this.localization.cancelUpload}">
+              <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>
@@ -420,7 +453,7 @@ export class StzhUpload {
       "stzh-upload--has-error": errorUsed,
       "stzh-upload--has-instructions": !!this.description || !!this.localization.description
     };
-    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, this.label && h("div", { class: "stzh-upload__label" }, this.label), h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), 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)), h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))));
+    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, this.label && h("div", { class: "stzh-upload__label" }, this.label), h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), 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)), h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }), h("div", { class: "stzh-upload__errors", ref: (el) => (this.errorsElement = el) }))));
   }
   static get is() { return "stzh-upload"; }
   static get originalStyleUrls() {
@@ -452,7 +485,7 @@ export class StzhUpload {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Initially pre existing files (e.g. already uploaded by the user).\nArray of objects that must at least include `name` and `size` attribute:\n`[{\"name\":\"file1.txt\", \"size\": 12345}, {\"name\":\"file2.txt\", \"size\": 12345}]`"
         },
         "attribute": "existing-files",
         "reflect": false,

package/dist/collection/components/stzh-upload/stzh-upload.stories.js

@@ -11,20 +11,22 @@ export default {
     actions: {
       handles: [
         'stzhFileAdded',
-        'stzhFileSending',
-        'stzhFileSendingMultiple',
+        'stzhFilesAdded',
+        'stzhFileRemoved',
+        'stzhSending',
+        'stzhSendingMultiple',
         'stzhProcessing',
         'stzhProcessingMultiple',
         'stzhProgress',
         'stzhProgressTotal',
-        'stzhCancel',
-        'stzhCancelMultiple',
+        'stzhCanceled',
+        'stzhCanceledMultiple',
         'stzhSuccess',
         'stzhSuccessMultiple',
         'stzhError',
         'stzhErrorMultiple',
         'stzhComplete',
-        'stzhCompleteMultiple',
+        'stzhCompleteMultiple'
       ]
     },
     docs: {
@@ -62,8 +64,8 @@ ExistingFiles.args = {
   description: 'To upload files drag & drop them in this area. Allowed file formats: [txt, pdf, docx] (max. 25 MB)',
   'accepted-files': '.txt,.pdf,.docs',
   'existing-files': `[
-    { "name": "Filename.pdf", "size": 12345 },
-    { "name": "Filename2.pdf", "size": 22345 },
-    { "name": "Filename3.pdf", "size": 32345 }
+    { "name": "Filename.pdf", "size": 12345, "id": "upload-1" },
+    { "name": "Filename2.pdf", "size": 22345, "id": "upload-2" },
+    { "name": "Filename3.pdf", "size": 32345, "id": "upload-3" }
   ]`
 };