@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/esm/duet-editable-table_3.entry.js

@@ -1,16 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as fieldSorter, d as debounce } from './js-utils-9b9e0039.js';
-import { i as isKeyboardClick } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString, s as sanitizeString } from './language-utils-40caac4f.js';
-import { p as spaceLarge, q as fontFamilyText, r as fontSizeMedium, u as fontFamilyTextTurva, v as colorSecondary, w as colorSecondaryTurva, x as fontWeightSemiBold, y as lineHeightSmall, z as colorGrayDarker, A as colorGrayDarkTurva, B as spaceMedium, C as spaceXxSmall, n as colorGrayLightest, a as mediaQueryXSmall, D as spaceSmall, E as colorGrayLight, F as colorGrayLightTurva, G as colorGrayDarkerTurva, k as colorPrimary, H as sizeNavigation, s as sizeHeader } from './tokens.module-2d02f5ff.js';
-import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-b9ba8c5e.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { p as parsePossibleJSON } from './string-utils-192eb3c8.js';
-import { g as getError, a as getI18nError } from './errorcodes.utils-86af68b7.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { f as fieldSorter, d as debounce } from './js-utils-BlUsLmbQ.js';
+import { i as isKeyboardClick } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString, s as sanitizeString } from './language-utils-BxXgd2r7.js';
+import { o as spaceLarge, p as fontFamilyText, q as fontSizeMedium, r as fontFamilyTextTurva, u as colorSecondary, v as colorSecondaryTurva, w as fontWeightSemiBold, x as lineHeightSmall, y as colorGrayDarker, z as colorGrayDarkTurva, A as spaceMedium, B as spaceXxSmall, C as colorGrayLightest, f as mediaQueryXSmall, D as spaceSmall, E as colorGrayLight, F as colorGrayLightTurva, G as colorGrayDarkerTurva, j as colorPrimary, s as sizeHeader, H as sizeNavigation } from './tokens.module-UQH7pb1d.js';
+import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-D2bU4zM_.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
+import { a as getError, g as getI18nError } from './errorcodes.utils-BgVG3eUP.js';
 
 //simple functional component that renders the data in the table
 const TableData = ({ data, groupId, alignment }, _children) => {
@@ -24,7 +24,6 @@ const TableData = ({ data, groupId, alignment }, _children) => {
 };
 
 const duetEditableTableCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-actions-menu,td.duet-editable-table-actions-menu{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon .duet-icon{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row .duet-text-right{text-align:right}.duet-editable-table-header tr .duet-editable-table-header-hidden{padding:0 !important;font-size:0;border-bottom:0}";
-const DuetEditableTableStyle0 = duetEditableTableCss;
 
 const DuetEditableTable = class {
     constructor(hostRef) {
@@ -34,6 +33,74 @@ const DuetEditableTable = class {
         this.hasHeadSlotFirst = false;
         this.hasHeadSlotLast = false;
         this.hasFootSlot = false;
+        this.language = getLanguage();
+        /**
+         * Duet-table: margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Duet-table: Style variation of the table.
+         */
+        this.variation = "striped";
+        /**
+         * Duet-table: Controls whether the table has a sticky header.
+         * Sticky headers are not compatible with breakpoint="none-scrollable".
+         */
+        this.sticky = false;
+        /**
+         * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+         * table header becomes sticky.
+         */
+        this.stickyDistance = "with-links";
+        /**
+         * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.
+         * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+         * Set to "none" to disable the responsive functionality.
+         * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+         * this is useful for comparison tables where it's important to maintain column and row layout.
+         */
+        this.breakpoint = "small";
+        /**
+         * Define actions for all items in a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.actions = undefined;
+        /**
+         * Define columns for a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.columns = undefined;
+        /**
+         * Define rows for a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.rows = undefined;
+        /**
+         * Controls whether the table is sortable by headers
+         */
+        this.sortable = false;
+        /**
+         * Optional id that get passed to the table and used to setup ::parts
+         */
+        this.groupId = "";
+        /**
+         * Theme of the table.
+         */
+        this.theme = "";
+        /**
+         * Exposes the aria role for optimizing accessibility.
+         */
+        this.accessibleRole = undefined;
+        /**
+         * Hide a thead section visually. The content is still available to screen readers.
+         */
+        this.hideHeadVisually = false;
         this.sortableDefaultLabel = {
             fi: "Järjestä",
             en: "Click to sort",
@@ -64,20 +131,6 @@ const DuetEditableTable = class {
                 this.toggleColumn(column, e);
             }
         };
-        this.language = getLanguage();
-        this.margin = "auto";
-        this.variation = "striped";
-        this.sticky = false;
-        this.stickyDistance = "with-links";
-        this.breakpoint = "small";
-        this.actions = undefined;
-        this.columns = undefined;
-        this.rows = undefined;
-        this.sortable = false;
-        this.groupId = "";
-        this.theme = "";
-        this.accessibleRole = undefined;
-        this.hideHeadVisually = false;
     }
     /**
      * Component lifecycle events.
@@ -188,7 +241,7 @@ const DuetEditableTable = class {
     }
     get element() { return getElement(this); }
 };
-DuetEditableTable.style = DuetEditableTableStyle0;
+DuetEditableTable.style = duetEditableTableCss;
 
 const rgbable = (value) => {
     return value.replace("rgb(", "").replace(")", "");
@@ -698,18 +751,47 @@ const DuetTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
-        this.handleMediaQueryChange = (mq) => {
-            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
-        };
+        /**
+         * Tracks whether the breakpoint is matched. This is set to true by default so that JavaScript disabled in SSR mode we get accessible table data first.
+         */
         this.matchesBreakpoint = true;
+        /**
+         * While table itself does not use language, the copyHeadingsToCells() method needs to be triggered when language changes.
+         */
         this.language = getLanguage();
-        this.theme = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Style variation of the table.
+         */
         this.variation = "striped";
+        /**
+         * Controls whether the table has a sticky header.
+         * Sticky headers are not compatible with breakpoint="none-scrollable".
+         */
         this.sticky = false;
+        /**
+         * Adjust the distance from top of the viewport (in pixels) when the
+         * table header becomes sticky.
+         */
         this.stickyDistance = "with-links";
+        /**
+         * By default the table is responsive - it will be flattened at narrow viewport widths.
+         * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+         * Set to "none" to disable the responsive functionality.
+         * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+         * this is useful for comparison tables where it's important to maintain column and row layout.
+         */
         this.breakpoint = "small";
+        /**
+         * Hide a thead section visually. The content is still available to screen readers.
+         */
         this.hideHeadVisually = false;
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
+        };
     }
     watchLanguageStateHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -797,7 +879,7 @@ const DuetTable = class {
     }; }
 };
 
-const errorCodes = [
+var errorCodes = [
 	{
 		type: "default",
 		system_message: "unknown error",
@@ -1104,7 +1186,6 @@ const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress })
 };
 
 const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}::slotted([slot=uploadfooter]){margin-top:20px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:rgb(245, 248, 250)}.duet-upload-filelist-empty-label{font-size:1rem;font-weight:400}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:1rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending{position:relative}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-progress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-progress{position:absolute;bottom:0;width:100%}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button),.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-action-button::part(button){border:0}duet-paragraph::part(duet-paragraph){word-break:break-word}duet-editable-table tfoot{display:none}.upload-bottom-caption{margin-top:12px;margin-bottom:16px;line-height:1.4rem}.items-header{display:none;flex-direction:row;margin-bottom:0}@media (min-width: 36em){.items-header{display:flex}}.items-header:not(:last-child),.items-header:not(:first-child){margin-top:12px}.items-header .category-header{width:35%}.items-header .filename-header{width:65%}.items-header .filename-header.no-category{width:100%}.upload-item-row{display:flex;flex-direction:column;gap:16px;align-content:center;align-items:center;padding:16px 0 16px 0;border-bottom:1px solid rgb(212, 223, 229)}@media (min-width: 36em){.upload-item-row{flex-direction:row;gap:10px}}.upload-item-row .item-categories{width:100%}@media (min-width: 36em){.upload-item-row .item-categories{width:35%}}.upload-item-row .item-name{position:relative;bottom:2px;width:100%;text-align:left}@media (min-width: 36em){.upload-item-row .item-name{width:50%}.upload-item-row .item-name.no-category{width:85%}}.upload-item-row .item-categories .heading,.upload-item-row .item-name .heading{display:block}@media (min-width: 36em){.upload-item-row .item-categories .heading,.upload-item-row .item-name .heading{display:none}}.upload-item-row .item-actions{width:100%;margin-left:-8px;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;padding-top:0;margin-left:auto;text-align:right}}.upload-item-row .duet-upload-item-name duet-icon{position:relative;top:4px}.upload-item-row .duet-upload-item-name duet-progress{display:block;margin-top:16px}";
-const DuetUploadStyle0 = duetUploadCss;
 
 const DuetUpload = class {
     constructor(hostRef) {
@@ -1120,6 +1201,330 @@ const DuetUpload = class {
         this.duetProgress = createEvent(this, "duetProgress", 3);
         this.duetUpload = createEvent(this, "duetUpload", 3);
         this.linkClick = createEvent(this, "linkClick", 3);
+        /**
+         * 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
          */
@@ -1142,6 +1547,45 @@ const DuetUpload = class {
             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
@@ -1581,169 +2025,6 @@ const DuetUpload = class {
             });
             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) {
@@ -2036,6 +2317,6 @@ const DuetUpload = class {
         "valid": ["watchValidHandler"]
     }; }
 };
-DuetUpload.style = DuetUploadStyle0;
+DuetUpload.style = duetUploadCss;
 
 export { DuetEditableTable as duet_editable_table, DuetTable as duet_table, DuetUpload as duet_upload };