@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

package/lib/collection/components/duet-upload/duet-upload.js

@@ -24,6 +24,330 @@ import { makeXhrRequest, } from "./xhr.helpers";
  */
 export class DuetUpload {
     constructor() {
+        /**
+         * State() variables
+         */
+        this.tick = Date.now();
+        /**
+         * If external is set to true, the upload component will not actually upload the files, but only keep states
+         * it will be up to you to handle the upload and return progress information to the upload-component
+         */
+        this.external = false;
+        /**
+         * If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request
+         */
+        this.middleware = null;
+        /**
+         * If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()
+         */
+        this.deferUpload = false;
+        /**
+         * If set the upload component will not display an upload button, you will have to create one yourself
+         * and call the exposed method startUpload to open the upload dialog
+         */
+        this.hideButton = false;
+        /**
+         * Default actions added to the internally used duet-editable-table
+         */
+        this.actions = [
+            {
+                icon: "action-delete",
+                color: "color-danger",
+                size: "x-small",
+                background: "gray-lightest",
+                name: "delete",
+                map: ["success", "failure"],
+                label: {
+                    fi: "Poista tiedosto",
+                    en: "Delete the file",
+                    sv: "Ta bort filen",
+                },
+            },
+            {
+                icon: "navigation-close",
+                color: "primary",
+                size: "x-small",
+                background: "gray-lightest",
+                name: "cancel",
+                map: ["inprogress", "pending"],
+                label: {
+                    fi: "Keskeytä lähetys",
+                    en: "Cancel the upload",
+                    sv: "Stop överföringen",
+                },
+            },
+        ];
+        /**
+         * If enabled the editable-table will display links on successfully uploaded items,
+         * this requires the server can respond with link URIs in the correct format
+         * and that the files are accessible to the user
+         */
+        this.showLinks = false;
+        /**
+         * Property to change the aria upload progress text read aloud by screenreaders
+         * @default {
+         *     fi: {
+         *       inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
+         *       inProgressWithErrors:
+         *         "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
+         *       done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
+         *       doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
+         *       files: "tiedostoa",
+         *       file: "tiedosto",
+         *     },
+         *     sv: {
+         *       inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
+         *       inProgressWithErrors:
+         *         "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+         *       done: "Uppladdningen slutförd, {filesTotal} har lagts till",
+         *       doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+         *       files: "filer",
+         *       file: "fil",
+         *     },
+         *     en: {
+         *       inProgress: "Uploading {filesUploaded} of {filesTotal}",
+         *       inProgressWithErrors:
+         *         "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+         *       done: "Upload completed, {filesTotal} added successfully",
+         *       doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
+         *       files: "files",
+         *       file: "file",
+         *     },
+         *  }
+         */
+        this.statusLabelDefaults = {
+            fi: {
+                inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
+                inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
+                done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
+                doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
+                files: "tiedostoa",
+                file: "tiedosto",
+            },
+            sv: {
+                inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
+                inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+                done: "Uppladdningen slutförd, {filesTotal} har lagts till",
+                doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+                files: "filer",
+                file: "fil",
+            },
+            en: {
+                inProgress: "Uploading {filesUploaded} of {filesTotal}",
+                inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+                done: "Upload completed, {filesTotal} added successfully",
+                doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
+                files: "files",
+                file: "file",
+            },
+        };
+        /**
+         * Strings used for the status aria-label
+         */
+        this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
+        /**
+         * Property to change button label defaults on the component.
+         * @default {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add an attachment",
+          }
+         */
+        this.buttonLabelDefaults = {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add an attachment",
+        };
+        /**
+         * Label of button
+         * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
+         */
+        this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
+        /**
+         * accessible aria-Label of button
+         */
+        this.accessibleButtonLabel = undefined;
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Makes the input component disabled. This prevents users from being able to
+         * interact with the upload component, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Key used to set vertical alignment of action buttons
+         */
+        this.alignment = "middle";
+        /**
+         * Visually hides the groups labels in the editable table list used to display the list of files
+         */
+        this.hideGroups = false;
+        /**
+         * Map of string that contain list of uploaded files.
+         */
+        this.files = new Map();
+        /**
+         * Property to read if the internally used editable-table contains errors or not
+         */
+        this.valid = !this.required;
+        /**
+         * Property to change labelDefaults defaults on the component.
+         * normally you would handle these strings on an application level and override label when needed
+         * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+         */
+        this.labelDefaults = {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add attachments",
+        };
+        /**
+         * Label for the input.
+         * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+         */
+        this.label = getLocaleString(this.labelDefaults);
+        /**
+         * Property to change descriptionDefaults defaults on the component.
+         * @default {
+         *     en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
+         *     sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
+         *     fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
+         *   }
+         */
+        this.descriptionDefaults = {
+            en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
+            sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
+            fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
+        };
+        /**
+         * Description for the upload component.
+         * @default {
+         *     en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
+         *     sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
+         *     fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
+         *   }
+         */
+        this.description = getLocaleString(this.descriptionDefaults);
+        /**
+         * Defaults for the filelist's empty state.
+         * @default {
+            fi: "Ei vielä lisättyjä tiedostoja.",
+            sv: "Inga filer har lagts till ännu.",
+            en: "No files added yet.",
+           }
+         */
+        this.fileListEmptyDefaults = {
+            fi: "Ei vielä lisättyjä tiedostoja.",
+            sv: "Inga filer har lagts till ännu.",
+            en: "No files added yet.",
+        };
+        /**
+         * Label for the filelist's empty state.
+         * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."}
+         */
+        this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Default errorcodes used by the component, modifiable via javascript
+         */
+        this.errorCodes = errorCodes;
+        /**
+         * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
+         */
+        this.maxBytes = 200000000;
+        /**
+         * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded.
+         */
+        this.maxBytesTotal = undefined;
+        /**
+         * Use maxFiles to specify the maximum amount of files that can be uploaded
+         */
+        this.maxFiles = 99;
+        /**
+         * A string of commaseperated file type values that are allowed
+         * @example: .pdf,.doc,.docx
+         */
+        this.allowedExtensions = "all";
+        /**
+         * A string of commaseperated mime type values that are allowed
+         * @example: image/*,application/msword,
+         */
+        this.allowedMimetypes = "";
+        /**
+         * Use multiple to allow the user to select multiple files when uploading
+         */
+        this.multiple = true;
+        /**
+         * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files,
+         * by default this is off, setting this to true will limit the users choices to what has been explicitly set
+         */
+        this.limitSelection = false;
+        /**
+         * Use hideCancelButton to hide cancel button for pending and in progress uploads
+         */
+        this.hideCancelButton = false;
+        /**
+         * If true the input caption will be placed below file list and footer
+         */
+        this.captionOnBottom = false;
+        /**
+         * Use show-uploaded-items-header to show single, generic, header for uploaded items
+         */
+        this.showUploadedItemsHeader = false;
+        /**
+         * Property to change single uploaded items header label
+         * @default {
+         *       fi: "Ladattu tiedosto.",
+         *       sv: "Nedladdad fil.",
+         *       en: "Uploaded file.",
+         *      }
+         */
+        this.uploadedItemsHeaderLabel = {
+            fi: "Ladattu tiedosto",
+            sv: "Lägg till en bilaga",
+            en: "Uploaded file",
+        };
+        /**
+         * Heading level for the label in the legend element. This is only used to give screen readers better logical structure.
+         * This does not affect visual appearance.
+         */
+        this.headerHeadingLevel = "h3";
+        /**
+         * Use hide-header to hide upload component header and caption (if caption is not on bottom)
+         */
+        this.hideHeader = false;
+        /**
+         * If link-click-event is set to true then upload component
+         * will emit an event on uploaded file link click (check linkClick event).
+         */
+        this.emitEvent = false;
+        /**
+         * Map action name to DuetLangObject or boolean. Sets upload item action buttons titles
+         * (show as DOM tooltip when hovering).
+         */
+        this.actionButtonTitles = {
+            cancel: false,
+            delete: false,
+        };
+        /**
+         * Use rename-duplicates to auto rename files with the same name instead of replacing them.
+         */
+        this.renameDuplicates = false;
         /**
          * Own Properties
          */
@@ -46,6 +370,45 @@ export class DuetUpload {
             pending: "pending",
             failure: "failure",
         };
+        /**
+         * Array of group names that you want the editable table to use to display files
+         * @required
+         * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+         */
+        this.groups = [
+            {
+                id: this.DefaultGroups.success,
+                label: {
+                    fi: "Valmiit tiedostot",
+                    sv: "Files success",
+                    en: "Files success",
+                },
+            },
+            {
+                id: this.DefaultGroups.failure,
+                label: {
+                    fi: "Tiedostot, joissa on virheitä",
+                    sv: "Filer med fel",
+                    en: "Files with errors",
+                },
+            },
+            {
+                id: this.DefaultGroups.inprogress,
+                label: {
+                    fi: "Kesken olevat tiedostot",
+                    sv: "Filer inprogress",
+                    en: "Files inprogress",
+                },
+            },
+            {
+                id: this.DefaultGroups.pending,
+                label: {
+                    en: "Files to upload",
+                    sv: "Filer att ladda",
+                    fi: "Ladattavat tiedostot",
+                },
+            },
+        ];
         this.kick = debounce(() => {
             this.tick = Date.now();
         }, 30); // will trigger re-render
@@ -486,169 +849,6 @@ export class DuetUpload {
             });
             return (h(Fragment, null, this.showUploadedItemsHeader && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
         };
-        this.tick = Date.now();
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.external = false;
-        this.middleware = null;
-        this.deferUpload = false;
-        this.hideButton = false;
-        this.actions = [
-            {
-                icon: "action-delete",
-                color: "color-danger",
-                size: "x-small",
-                background: "gray-lightest",
-                name: "delete",
-                map: ["success", "failure"],
-                label: {
-                    fi: "Poista tiedosto",
-                    en: "Delete the file",
-                    sv: "Ta bort filen",
-                },
-            },
-            {
-                icon: "navigation-close",
-                color: "primary",
-                size: "x-small",
-                background: "gray-lightest",
-                name: "cancel",
-                map: ["inprogress", "pending"],
-                label: {
-                    fi: "Keskeytä lähetys",
-                    en: "Cancel the upload",
-                    sv: "Stop överföringen",
-                },
-            },
-        ];
-        this.uri = undefined;
-        this.showLinks = false;
-        this.caption = undefined;
-        this.statusLabelDefaults = {
-            fi: {
-                inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
-                inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
-                done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
-                doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
-                files: "tiedostoa",
-                file: "tiedosto",
-            },
-            sv: {
-                inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
-                inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
-                done: "Uppladdningen slutförd, {filesTotal} har lagts till",
-                doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
-                files: "filer",
-                file: "fil",
-            },
-            en: {
-                inProgress: "Uploading {filesUploaded} of {filesTotal}",
-                inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
-                done: "Upload completed, {filesTotal} added successfully",
-                doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
-                files: "files",
-                file: "file",
-            },
-        };
-        this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
-        this.buttonLabelDefaults = {
-            fi: "Lisää liite",
-            sv: "Lägg till en bilaga",
-            en: "Add an attachment",
-        };
-        this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
-        this.accessibleButtonLabel = undefined;
-        this.theme = "";
-        this.disabled = false;
-        this.identifier = undefined;
-        this.margin = "auto";
-        this.required = false;
-        this.alignment = "middle";
-        this.hideGroups = false;
-        this.files = new Map();
-        this.valid = !this.required;
-        this.labelDefaults = {
-            fi: "Lisää liite",
-            sv: "Lägg till en bilaga",
-            en: "Add attachments",
-        };
-        this.label = getLocaleString(this.labelDefaults);
-        this.descriptionDefaults = {
-            en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
-            sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
-            fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
-        };
-        this.description = getLocaleString(this.descriptionDefaults);
-        this.fileListEmptyDefaults = {
-            fi: "Ei vielä lisättyjä tiedostoja.",
-            sv: "Inga filer har lagts till ännu.",
-            en: "No files added yet.",
-        };
-        this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
-        this.error = "";
-        this.errorCodes = errorCodes;
-        this.name = undefined;
-        this.maxBytes = 200000000;
-        this.maxBytesTotal = undefined;
-        this.maxFiles = 99;
-        this.allowedExtensions = "all";
-        this.allowedMimetypes = "";
-        this.multiple = true;
-        this.limitSelection = false;
-        this.hideCancelButton = false;
-        this.value = undefined;
-        this.externalUploadButtonId = undefined;
-        this.captionOnBottom = false;
-        this.showUploadedItemsHeader = false;
-        this.uploadedItemsHeaderLabel = {
-            fi: "Ladattu tiedosto",
-            sv: "Lägg till en bilaga",
-            en: "Uploaded file",
-        };
-        this.headerHeadingLevel = "h3";
-        this.hideHeader = false;
-        this.emitEvent = false;
-        this.actionButtonTitles = {
-            cancel: false,
-            delete: false,
-        };
-        this.renameDuplicates = false;
-        this.groups = [
-            {
-                id: this.DefaultGroups.success,
-                label: {
-                    fi: "Valmiit tiedostot",
-                    sv: "Files success",
-                    en: "Files success",
-                },
-            },
-            {
-                id: this.DefaultGroups.failure,
-                label: {
-                    fi: "Tiedostot, joissa on virheitä",
-                    sv: "Filer med fel",
-                    en: "Files with errors",
-                },
-            },
-            {
-                id: this.DefaultGroups.inprogress,
-                label: {
-                    fi: "Kesken olevat tiedostot",
-                    sv: "Filer inprogress",
-                    en: "Files inprogress",
-                },
-            },
-            {
-                id: this.DefaultGroups.pending,
-                label: {
-                    en: "Files to upload",
-                    sv: "Filer att ladda",
-                    fi: "Ladattavat tiedostot",
-                },
-            },
-        ];
     }
     watchValidHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -753,10 +953,10 @@ export class DuetUpload {
             this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
         }
         // @ts-ignore
-        return (h(Host, { key: 'd9a06a80ee3dbe6c14afeba29034210c0876e030', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '91dd6b9b6702eda6b91bde8051ba3dc19f61897f', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: 'db5e4b9f271fe451b5d22f7400ec4c0d3a6f138e', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '27ba6010ee533701bf11a149427d2216c8ce29d9', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'e89c1d5f4ec256d1e3a78c3c39d2e70abf10e8e6', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '42eadc522cef6c31bf92926536586c335f70aa29', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '73e49bd8b917493fe195e9a41485bc92f7b28f87', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: 'f4af2ea636e86ad99ea095816a947160842e473a', name: "filefooter" }), h("slot", { key: '4f5808dd9f1d1f59a22358e889b465603fcf66e5', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: '098d617ed6b92abb83204dfd0c02f38aee307091', margin: "none", size: "small" }, h("div", { key: 'df692c821b64ef7d2a8e00f1b798e0d6ea28589b', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'f5c2d00cef8aea857176ccfa0cf3ff52eb4b07ec', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '6950dea516b4b35f4e5fb7c9d37afd340a151a14' }, h("duet-spacer", { key: '24eac12d73d7ed5ad8fab3be0777d7452bf326d7', size: "large" }), h("duet-button", { key: 'fb63b67dfcd988535867d4fde83bd13c110d9f1c', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
+        return (h(Host, { key: '543992b9d9c308f9e01bae345b5fd8c806b94d8f', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '77e0b4bc007bfb6259a45a0d360611c8a8f58a57', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: 'aaefb5b725097acfba9855cbeda4af32ccb39702', name: "header" }), !this.files.size && (h("duet-empty-state", { key: 'e03c91293b669c938fa1bb156549c8b85dabfd1a', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '9158cff25bef2cdcf251140604c17b4c9917fe63', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '0545322e2f3dc59797b5a5a7e2dc7b03d45abbf7', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '4180909f17d65a4f7d7f6ce772cf7316bec91161', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: '5c489100fac57463ed965d0ce8a81be27d4ba3da', name: "filefooter" }), h("slot", { key: '2ff841a688a9a03d2ca0b476336c85e815f3b6e4', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'ba7ccda08073f82c646ca46e2665d6998bf6fb30', margin: "none", size: "small" }, h("div", { key: 'e3cab668b5d88f68275c62b878db3c46e133dd26', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'ee6f6b6083d15d990f95baf44d10cbcffbf0ebc4', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '287c6c09b0beecd2e586fee769feca4bb35a185c' }, h("duet-spacer", { key: '3aae82caef09bbd97ec88ac30ca1732f8c07f940', size: "large" }), h("duet-button", { key: '708bcfc6751bdef503a581f543812eca76ebdf9d', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
             this.bytesMaxReached ||
             this.filesToUploadExceedsLimit ||
-            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '749d1166c084a9b2919b909ee7ab9246d2c0ebe7' }, h("duet-spacer", { key: '907c8f0f2709cf387eef1b2bb815335ded8ad30d', size: "medium" }), h("duet-alert", { key: '792b424865e2a20fe34eeb248cbd00e376bcd646', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '31b3a469d2722362b44ee1e89e468f79e313fc7e', "aria-hidden": "true" }, h("input", { key: 'ee5f9699f2d29c0ac92d0ba78c3e007a0cc327cd', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '08acb67d151215eb8d87ea2d2a8b06b8679e7279' }, h("duet-spacer", { key: '627aff6809d68c854b2d73fb058b163959f20e4a', size: "medium" }), h("duet-alert", { key: '67aff7ef34cf925bc40bcc9de417f1415bac12c2', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '2638b759795817f6db83dd714135600e267b7794', "aria-hidden": "true" }, h("input", { key: 'c395a101ca022d9d3f56f9b94bc4a5b6cf19e37b', ref: input => {
                 this.nativeInput = input;
             }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
                 "duet-upload": true,
@@ -952,6 +1152,7 @@ export class DuetUpload {
         return {
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -966,11 +1167,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -985,11 +1186,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1004,11 +1205,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1023,11 +1224,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1042,12 +1243,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "middleware": {
                 "type": "unknown",
+                "attribute": "middleware",
                 "mutable": false,
                 "complexType": {
                     "original": "XHRInternalMiddleWare",
@@ -1072,6 +1273,7 @@ export class DuetUpload {
             },
             "deferUpload": {
                 "type": "boolean",
+                "attribute": "defer-upload",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1086,12 +1288,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "defer-upload",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hideButton": {
                 "type": "boolean",
+                "attribute": "hide-upload-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1106,12 +1308,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-upload-button",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "actions": {
                 "type": "unknown",
+                "attribute": "actions",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetEditableTableActions",
@@ -1136,6 +1338,7 @@ export class DuetUpload {
             },
             "uri": {
                 "type": "string",
+                "attribute": "uri",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1150,11 +1353,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "uri",
                 "reflect": false
             },
             "showLinks": {
                 "type": "boolean",
+                "attribute": "show-links",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1169,12 +1372,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-links",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1189,11 +1392,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "statusLabelDefaults": {
                 "type": "string",
+                "attribute": "status-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -1217,12 +1420,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "status-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}.\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress}, l\u00E4hetetty {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}, {filesWithErrors} ep\u00E4onnistui\",\n      done: \"L\u00E4hetys valmis, {filesTotal} lis\u00E4tty onnistuneesti\",\n      doneWithErrors: \"L\u00E4hetys valmis, {filesUploaded} lis\u00E4tty onnistuneesti, {filesWithErrors} ep\u00E4onnistui\",\n      files: \"tiedostoa\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Laddar upp {filesUploaded} av {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Uppladdningen slutf\u00F6rd, {filesTotal} har lagts till\",\n      doneWithErrors: \"Uppladdningen slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Uploading {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"Upload completed, {filesTotal} added successfully\",\n      doneWithErrors: \"Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.\",\n      files: \"files\",\n      file: \"file\",\n    },\n  }"
             },
             "statusMessageLabel": {
                 "type": "string",
+                "attribute": "status-message-label",
                 "mutable": false,
                 "complexType": {
                     "original": "StatusMessage | string",
@@ -1243,12 +1446,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "status-message-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.statusLabelDefaults\n  )"
             },
             "buttonLabelDefaults": {
                 "type": "string",
+                "attribute": "button-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -1272,12 +1475,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 liite\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Add an attachment\",\n  }"
             },
             "buttonLabel": {
                 "type": "string",
+                "attribute": "button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1295,12 +1498,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.buttonLabelDefaults)"
             },
             "accessibleButtonLabel": {
                 "type": "string",
+                "attribute": "accessible-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1315,12 +1518,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-button-label",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -1341,12 +1544,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1361,12 +1564,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1381,11 +1584,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -1406,12 +1609,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1426,12 +1629,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "alignment": {
                 "type": "string",
+                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1446,12 +1649,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "\"middle\""
             },
             "hideGroups": {
                 "type": "boolean",
+                "attribute": "hide-table-labels",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1466,12 +1669,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-table-labels",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "files": {
                 "type": "unknown",
+                "attribute": "files",
                 "mutable": true,
                 "complexType": {
                     "original": "StringMap",
@@ -1496,6 +1699,7 @@ export class DuetUpload {
             },
             "valid": {
                 "type": "boolean",
+                "attribute": "valid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -1510,12 +1714,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid",
                 "reflect": true,
                 "defaultValue": "!this.required"
             },
             "labelDefaults": {
                 "type": "string",
+                "attribute": "label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -1539,12 +1743,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 liite\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Add attachments\",\n  }"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1562,12 +1766,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.labelDefaults)"
             },
             "descriptionDefaults": {
                 "type": "string",
+                "attribute": "description-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -1591,12 +1795,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description-default",
                 "reflect": false,
                 "defaultValue": "{\n    en: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.\",\n    sv: \"Du kan bifoga f\u00F6ljande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer \u00E5t g\u00E5ngen, och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen varje inte st\u00F6rre \u00E4n {maxbytes}.\",\n    fi: \"Voit liitt\u00E4\u00E4 seuraavat tiedostotyypit: {filetypes} - sek\u00E4 yleisimm\u00E4t videotiedostot. Voit l\u00E4hett\u00E4\u00E4 {maxbytestotal} tiedostoa kerrallaan, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan, jokainen enint\u00E4\u00E4n {maxbytes} kokoisena.\",\n  }"
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1614,12 +1818,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.descriptionDefaults)"
             },
             "fileListEmptyDefaults": {
                 "type": "string",
+                "attribute": "list-empty-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -1643,12 +1847,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "list-empty-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",\n    sv: \"Inga filer har lagts till \u00E4nnu.\",\n    en: \"No files added yet.\",\n  }"
             },
             "fileListEmpty": {
                 "type": "string",
+                "attribute": "file-list-empty",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1666,12 +1870,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "file-list-empty",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.fileListEmptyDefaults)"
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1686,12 +1890,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "errorCodes": {
                 "type": "unknown",
+                "attribute": "error-codes",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetUploadErrorCode[]",
@@ -1716,6 +1920,7 @@ export class DuetUpload {
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1730,11 +1935,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "maxBytes": {
                 "type": "number",
+                "attribute": "max-bytes",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1749,12 +1954,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-bytes",
                 "reflect": false,
                 "defaultValue": "200000000"
             },
             "maxBytesTotal": {
                 "type": "number",
+                "attribute": "max-bytes-total",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1769,12 +1974,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-bytes-total",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "maxFiles": {
                 "type": "number",
+                "attribute": "max-files",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1789,12 +1994,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-files",
                 "reflect": false,
                 "defaultValue": "99"
             },
             "allowedExtensions": {
                 "type": "string",
+                "attribute": "allowed-extensions",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1812,12 +2017,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allowed-extensions",
                 "reflect": false,
                 "defaultValue": "\"all\""
             },
             "allowedMimetypes": {
                 "type": "string",
+                "attribute": "allowed-mimetypes",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1835,12 +2040,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allowed-mimetypes",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1855,12 +2060,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "limitSelection": {
                 "type": "boolean",
+                "attribute": "limit-selection",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1875,12 +2080,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "limit-selection",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hideCancelButton": {
                 "type": "boolean",
+                "attribute": "hide-cancel-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1895,12 +2100,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-cancel-button",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1915,11 +2120,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "externalUploadButtonId": {
                 "type": "string",
+                "attribute": "external-upload-button-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1934,11 +2139,11 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external-upload-button-id",
                 "reflect": false
             },
             "captionOnBottom": {
                 "type": "boolean",
+                "attribute": "caption-on-bottom",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1953,12 +2158,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption-on-bottom",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "showUploadedItemsHeader": {
                 "type": "boolean",
+                "attribute": "show-uploaded-items-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1973,12 +2178,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-uploaded-items-header",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "uploadedItemsHeaderLabel": {
                 "type": "unknown",
+                "attribute": "uploaded-items-header-label",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -2006,6 +2211,7 @@ export class DuetUpload {
             },
             "headerHeadingLevel": {
                 "type": "string",
+                "attribute": "header-heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -2026,12 +2232,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "header-heading-level",
                 "reflect": false,
                 "defaultValue": "\"h3\""
             },
             "hideHeader": {
                 "type": "boolean",
+                "attribute": "hide-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2046,12 +2252,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-header",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "emitEvent": {
                 "type": "boolean",
+                "attribute": "link-click-event",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2066,12 +2272,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "link-click-event",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "actionButtonTitles": {
                 "type": "string",
+                "attribute": "action-button-titles",
                 "mutable": false,
                 "complexType": {
                     "original": "string | UploadActionButtonTitles",
@@ -2092,12 +2298,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "action-button-titles",
                 "reflect": false,
                 "defaultValue": "{\n    cancel: false,\n    delete: false,\n  }"
             },
             "renameDuplicates": {
                 "type": "boolean",
+                "attribute": "rename-duplicates",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2112,12 +2318,12 @@ export class DuetUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rename-duplicates",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "groups": {
                 "type": "unknown",
+                "attribute": "groups",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetUploadTableGroupName[]",