@duetds/components 6.2.4 → 6.2.6

package/lib/dist-custom-elements/duet-tray.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment } from './p-4367369a.js';
-import { i as sizeHeader } from './p-33e00967.js';
+import { p as proxyCustomElement, H, h, F as Fragment } from './p-a1724291.js';
+import { s as sizeHeader } from './p-55325c49.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$3 } from './p-908c1151.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$3 } from './p-91098fd5.js';
+import { d as defineCustomElement$2 } from './p-2d3fc462.js';
 
 const duetTrayCss = "*,*::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;display:block;width:100%}.duet-tray{position:fixed;top:4rem;right:0;left:0;z-index:399;display:flex;flex-direction:column;max-height:calc(100% - 8rem);padding:16px 20px 16px 24px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:#00294d;visibility:hidden;background:#f3f9fc;border-bottom:1px solid #e1e3e6;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:opacity 600ms ease, visibility 600ms ease, transform 600ms ease;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray{padding:16px 36px}}@media (min-width: 106.25em){.duet-tray{padding:16px 52px 16px 60px}}.duet-tray:focus{outline:0}:host(.user-is-tabbing) .duet-tray:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;background:#f5f5f7;border-color:#e4e4e6}.duet-tray.duet-tray-is-active{visibility:visible;opacity:1;transform:translateY(0)}.duet-tray.duet-tray-is-hidden{visibility:hidden;opacity:0;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray.duet-tray-is-responsive{display:none !important}}.duet-tray.duet-tray-is-expandable{padding-right:66px}@media (min-width: 62em){.duet-tray.duet-tray-is-expandable{padding-right:78px}}@media (min-width: 106.25em){.duet-tray.duet-tray-is-expandable{padding-right:94px}}.duet-tray-expandable{position:relative;z-index:100;width:calc(100% + 46px);max-height:0;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;scrollbar-width:none}.duet-tray-expandable::-webkit-scrollbar{display:none}.duet-tray-expandable.active{max-height:500px;visibility:visible;opacity:1}.duet-tray-expandable-content{width:100%;margin-top:16px;border-top:1px solid #e1e3e6}.duet-theme-turva .duet-tray-expandable-content{border-color:#e4e4e6}.duet-tray-button{-webkit-user-select:none;user-select:none;padding:20px !important;position:absolute;top:-2px;right:0;z-index:200;color:#00294d;text-align:center;cursor:pointer;border-radius:4px;transition:transform 300ms ease;-webkit-tap-highlight-color:transparent}@media (min-width: 62em){.duet-tray-button{margin-right:16px}}@media (min-width: 106.25em){.duet-tray-button{margin-right:36px}}.duet-theme-turva .duet-tray-button{color:#171c3a}.duet-tray-button.duet-tray-is-expanded{transform:rotate(-180deg)}.duet-tray-button:focus{outline:0}:host(.user-is-tabbing) .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray-button:active{box-shadow:none;opacity:0.75}";
 
@@ -22,78 +22,36 @@ const DuetTray$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
      */
     this.isTicking = false;
     this.expandableId = createID("DuetTray");
-    this.expanded = false;
     /**
-     * The state of the info panel.
+     * Local methods.
      */
+    this.animationLoop = () => {
+      this.hiddenState = window.pageYOffset < topOffset;
+      this.isTicking = false;
+    };
+    this.toggleExpandable = ev => {
+      ev.preventDefault();
+      this.expanded = !this.expanded;
+    };
+    this.expanded = false;
     this.hiddenState = false;
-    /**
-     * The currently active language. This setting changes the accessible labels to match the
-     * chosen language.
-     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
-     * @default "fi"
-     */
     this.language = getLanguage();
-    /**
-     * Defaults for accessibleCloseLabel
-     * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
-     */
     this.accessibleCloseLabelDefaults = {
       fi: "Sulje",
       en: "Close",
       sv: "Stäng",
     };
-    /**
-     * Accessible label that is shown for screen reader users in the expandable
-     * close toggle. Not visible for normal users.
-     * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
-     */
     this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
-    /**
-     * Defaults for accessibleOpenLabel
-     * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
-     */
     this.accessibleOpenLabelDefaults = {
       fi: "Avaa",
       en: "Open",
       sv: "Öppna",
     };
-    /**
-     * Accessible label that is shown for screen reader users in the expandable
-     * open toggle. Not visible for normal users.
-     * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
-     */
     this.accessibleOpenLabel = getLocaleString(this.accessibleOpenLabelDefaults, this.language);
-    /**
-     * Theme of the info panel.
-     */
     this.theme = "";
-    /**
-     * Toggle whether the info panel is visible or not. You can use this
-     * property e.g. when pricing information is revealed to the user.
-     */
     this.active = false;
-    /**
-     * Hide the info panel when user scrolls back to the top of the viewport.
-     */
     this.autoHide = true;
-    /**
-     * Enable or disable the automatic responsive behaviour which
-     * makes the info panel hide on larger viewports. Settings this to
-     * "false" means that the header panel is visible on all device sizes.
-     */
     this.responsive = true;
-    /**
-     * Local methods.
-     */
-    this.animationLoop = () => {
-      this.hiddenState = window.pageYOffset < topOffset;
-      this.isTicking = false;
-    };
-    this.toggleExpandable = ev => {
-      ev.preventDefault();
-      this.expanded = !this.expanded;
-    };
   }
   /**
    * Component lifecycle events.

package/lib/dist-custom-elements/duet-upload-aria-status.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetUploadAriaStatus$1, d as defineCustomElement$1 } from './p-396cb7a5.js';
+import { D as DuetUploadAriaStatus$1, d as defineCustomElement$1 } from './p-2f9f54eb.js';
 
 const DuetUploadAriaStatus = DuetUploadAriaStatus$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-upload.js

@@ -1,30 +1,30 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { d as debounce } from './p-0b3f675e.js';
 import { g as getLocaleString, s as sanitizeString } from './p-ede854e1.js';
 import { p as parsePossibleJSON } from './p-5a9d75e1.js';
-import { h } from './p-b9058029.js';
-import { d as defineCustomElement$i } from './p-f674e164.js';
-import { d as defineCustomElement$h } from './p-9cfc3bee.js';
-import { d as defineCustomElement$g } from './p-b89983b2.js';
-import { d as defineCustomElement$f } from './p-b4b809ff.js';
-import { d as defineCustomElement$e } from './p-c4165359.js';
-import { d as defineCustomElement$d } from './p-0938933e.js';
-import { d as defineCustomElement$c } from './p-1fef1f90.js';
-import { d as defineCustomElement$b } from './p-908c1151.js';
-import { d as defineCustomElement$a } from './p-f51d88cc.js';
-import { d as defineCustomElement$9 } from './p-29b4f008.js';
-import { d as defineCustomElement$8 } from './p-2a509b17.js';
-import { d as defineCustomElement$7 } from './p-1302f6e8.js';
-import { d as defineCustomElement$6 } from './p-e987e04b.js';
-import { d as defineCustomElement$5 } from './p-862c60cc.js';
-import { d as defineCustomElement$4 } from './p-1f03397c.js';
-import { d as defineCustomElement$3 } from './p-396cb7a5.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { h } from './p-e4a60f42.js';
+import { d as defineCustomElement$i } from './p-076044f7.js';
+import { d as defineCustomElement$h } from './p-e4c2e7eb.js';
+import { d as defineCustomElement$g } from './p-a5f24f49.js';
+import { d as defineCustomElement$f } from './p-11621a52.js';
+import { d as defineCustomElement$e } from './p-4905133d.js';
+import { d as defineCustomElement$d } from './p-029208b5.js';
+import { d as defineCustomElement$c } from './p-cc5bc0c6.js';
+import { d as defineCustomElement$b } from './p-91098fd5.js';
+import { d as defineCustomElement$a } from './p-f4d2face.js';
+import { d as defineCustomElement$9 } from './p-3b1bc8f3.js';
+import { d as defineCustomElement$8 } from './p-becb3aa3.js';
+import { d as defineCustomElement$7 } from './p-52471a7a.js';
+import { d as defineCustomElement$6 } from './p-d188f26e.js';
+import { d as defineCustomElement$5 } from './p-7b1b2eef.js';
+import { d as defineCustomElement$4 } from './p-f079cc55.js';
+import { d as defineCustomElement$3 } from './p-2f9f54eb.js';
+import { d as defineCustomElement$2 } from './p-2d3fc462.js';
 
 const errorCodes = [
 	{
@@ -385,280 +385,6 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.duetCancel = createEvent(this, "duetCancel", 3);
     this.duetProgress = createEvent(this, "duetProgress", 3);
     this.duetUpload = createEvent(this, "duetUpload", 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: "Poista tiedosto",
-          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} lähetettävästä {filesTotal} tiedostosta",
-     *       inProgressWithErrors:
-     *         "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
-     *       done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
-     *       doneWithErrors:
-     *         "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
-     *       files: "tiedostot",
-     *       file: "tiedosto",
-     *     },
-     *     sv: {
-     *       inProgress: "Adding {filesUploaded} of {filesTotal}",
-     *       inProgressWithErrors:
-     *         "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
-     *       done: "Alla {filesTotal} har lagts till",
-     *       doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
-     *       files: "filer",
-     *       file: "fil",
-     *     },
-     *     en: {
-     *       inProgress: "Adding {filesUploaded} of {filesTotal}",
-     *       inProgressWithErrors:
-     *         "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
-     *       done: "All {filesTotal} added successfully",
-     *       doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
-     *       files: "tiedostoa",
-     *       file: "tiedosto",
-     *     },
-     *   }
-     */
-    this.statusLabelDefaults = {
-      fi: {
-        inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
-        inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
-        done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
-        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
-        files: "tiedostot",
-        file: "tiedosto",
-      },
-      sv: {
-        inProgress: "Adding {filesUploaded} of {filesTotal}",
-        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
-        done: "Alla {filesTotal} har lagts till",
-        doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
-        files: "filer",
-        file: "fil",
-      },
-      en: {
-        inProgress: "Adding {filesUploaded} of {filesTotal}",
-        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
-        done: "All {filesTotal} added successfully",
-        doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
-        files: "File",
-        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;
     /**
      * Own Properties
      */
@@ -678,45 +404,6 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       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.pending,
-        label: {
-          en: "Files to upload",
-          sv: "Filer att ladda",
-          fi: "Ladattavat tiedostot",
-        },
-      },
-      {
-        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",
-        },
-      },
-    ];
     this.kick = debounce(() => {
       this.tick = Date.now();
     }, 30); // will trigger re-render
@@ -1129,6 +816,152 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       });
       return EditableTables;
     };
+    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: "Poista tiedosto",
+          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} lähetettävästä {filesTotal} tiedostosta",
+        inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+        done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+        files: "tiedostot",
+        file: "tiedosto",
+      },
+      sv: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+        done: "Alla {filesTotal} har lagts till",
+        doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+        files: "filer",
+        file: "fil",
+      },
+      en: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+        done: "All {filesTotal} added successfully",
+        doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+        files: "File",
+        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.value = undefined;
+    this.groups = [
+      {
+        id: this.DefaultGroups.pending,
+        label: {
+          en: "Files to upload",
+          sv: "Filer att ladda",
+          fi: "Ladattavat tiedostot",
+        },
+      },
+      {
+        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",
+        },
+      },
+    ];
   }
   watchValidHandler(newValue, oldValue) {
     if (newValue !== oldValue) {

package/lib/dist-custom-elements/duet-visually-hidden.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetVisuallyHidden$1, d as defineCustomElement$1 } from './p-70d1ca9f.js';
+import { D as DuetVisuallyHidden$1, d as defineCustomElement$1 } from './p-2d3fc462.js';
 
 const DuetVisuallyHidden = DuetVisuallyHidden$1;
 const defineCustomElement = defineCustomElement$1;