From 12a8cbeba84619148ea5c65240ab05576ac6ef6b Mon Sep 17 00:00:00 2001
From: pk <kaske@edv-wasmeier.de>
Date: Thu, 27 Jul 2023 16:40:07 +0200
Subject: [PATCH] Fixes and modifications

---
 control-state.js | 17 ++++++++++++++---
 fetch-mixin.js   |  2 +-
 upload-files.js  | 24 ++++++++++++++++++++----
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/control-state.js b/control-state.js
index 1f37aee..7411c96 100644
--- a/control-state.js
+++ b/control-state.js
@@ -4,7 +4,7 @@ Copyright (c) 2022 trading_peter
 This program is available under Apache License Version 2.0
 */
 
-export const ControlState = function(superClass) {
+export const ControlState = function (superClass) {
   return class extends superClass {
     static get properties() {
       return {
@@ -20,10 +20,21 @@ export const ControlState = function(superClass) {
 
     firstUpdated() {
       super.firstUpdated();
+      if (!this.hasAttribute('tabindex')) {
+        this.setAttribute('tabindex', '0');
+      }
       this.addEventListener('focus', this._boundFocus, true);
       this.addEventListener('blur', this._boundFocus, true);
     }
 
+    shouldUpdate(changes) {
+      if (changes.has('disabled')) {
+        this._disabledChanged(this.disabled);
+      }
+
+      return super.shouldUpdate(changes);
+    }
+
     _focusHandler(e) {
       this.focused = e.type === 'focus';
     }
@@ -38,7 +49,7 @@ export const ControlState = function(superClass) {
         // leaving `-1` hides shadow root children from the tab order.
         this._prevTabIndex = this.getAttribute('tabindex');
         this.focused = false;
-        this.tabIndex = -1;
+        this.setAttribute('tabIndex', '-1');
         this.blur();
       } else if (this._prevTabIndex !== undefined) {
         if (this._prevTabIndex === null) {
@@ -49,4 +60,4 @@ export const ControlState = function(superClass) {
       }
     }
   };
-}
\ No newline at end of file
+}
diff --git a/fetch-mixin.js b/fetch-mixin.js
index 886b2c1..8416649 100644
--- a/fetch-mixin.js
+++ b/fetch-mixin.js
@@ -24,7 +24,7 @@ export const fetchMixin = function(superClass) {
       try {
         const reqOptions = {
           method: 'POST',
-          signal: this.__abortControllers.get(url).signal,
+          signal: overwrite ? this.__abortControllers.get(url).signal : null,
           mode: 'cors',
           cache: 'no-cache',
           headers: {
diff --git a/upload-files.js b/upload-files.js
index 33abf2a..6004583 100644
--- a/upload-files.js
+++ b/upload-files.js
@@ -8,13 +8,13 @@ export const upload = function(superClass) {
      * @param {Object} opts Upload options
      * @returns Promise
      */
-    uploadFiles(url, files, opts = {}) {
+    uploadFiles(url, files, data = {}) {
       return new Promise((resolve, reject) => {
         const request = new XMLHttpRequest();
         const formData = new FormData();
 
-        for (const key in opts) {
-          formData.append(key, opts[key]);
+        for (const key in data) {
+          formData.append(key, data[key]);
         }
 
         request.open('POST', url, true);
@@ -24,14 +24,30 @@ export const upload = function(superClass) {
           }
         });
 
-        request.upload.addEventListener('progress', e => {
+        request.addEventListener('loadstart', e => {
+          this.dispatchEvent(new CustomEvent('upload-started', { detail: e, bubbles: true, composed: true }));
+        });
+
+        request.addEventListener('progress', e => {
           this.dispatchEvent(new CustomEvent('upload-progress', { detail: { percent: ((e.loaded / e.total) * 100).toFixed(2) }, bubbles: true, composed: true }));
         });
 
+        request.addEventListener('error', e => {
+          this.dispatchEvent(new CustomEvent('upload-error', { detail: e, bubbles: true, composed: true }));
+        });
+
+        request.addEventListener('error', e => {
+          this.dispatchEvent(new CustomEvent('upload-error', { detail: e, bubbles: true, composed: true }));
+        });
+
         request.addEventListener('load', () => {
           this.dispatchEvent(new CustomEvent('upload-finished', { detail: null, bubbles: true, composed: true }));
         });
 
+        request.addEventListener('abort', () => {
+          this.dispatchEvent(new CustomEvent('upload-aborted', { detail: null, bubbles: true, composed: true }));
+        });
+
         for (let i = 0; i < files.length; i++) {
           formData.append(files[i].name, files[i]);
         }