@duetds/components 4.30.0 → 4.33.0

package/lib/types/components/duet-tooltip/duet-tooltip.d.ts

@@ -1,4 +1,5 @@
 import { DuetLanguage, DuetTheme, DuetTooltipDirection } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
 import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetTooltipBreakpoint = "medium" | "large";
 export declare class DuetTooltip implements ThemeableComponent {
@@ -32,6 +33,11 @@ export declare class DuetTooltip implements ThemeableComponent {
    * @default "fi"
    */
   language: DuetLanguage;
+  /**
+   * Default language strings for the accessibleLabel
+   * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+   */
+  accessibleLabelDefault: DuetLangObject | string;
   /**
    * Adds accessible label for the info icon that is only shown for screen
    * readers. This property is always required to create an accessible interface!
@@ -44,6 +50,11 @@ export declare class DuetTooltip implements ThemeableComponent {
    * Used internally by input components to add more context to the tooltip.
    */
   accessibleInputLabel: string;
+  /**
+   * Default language strings for the accessibleCloseLabel
+   * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+   */
+  accessibleCloseLabelDefault: DuetLangObject | string;
   /**
    * Adds accessible label for the close icon that is only shown for screen
    * readers. This property is always required to create an accessibly interface!

package/lib/types/components/duet-tray/duet-tray.d.ts

@@ -1,4 +1,5 @@
 import { DuetLanguage, DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
 import { ThemeableComponent } from "../../utils/themeable-component";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
@@ -27,12 +28,22 @@ export declare class DuetTray implements ThemeableComponent {
    * @default "fi"
    */
   language: DuetLanguage;
+  /**
+   * Defaults for accessibleCloseLabel
+   * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+   */
+  accessibleCloseLabelDefaults: DuetLangObject | string;
   /**
    * 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"}
    */
   accessibleCloseLabel: string;
+  /**
+   * Defaults for accessibleOpenLabel
+   * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+   */
+  accessibleOpenLabelDefaults: DuetLangObject | string;
   /**
    * Accessible label that is shown for screen reader users in the expandable
    * open toggle. Not visible for normal users.

package/lib/types/components/duet-upload/duet-upload-aria-status.d.ts

@@ -0,0 +1,49 @@
+export declare type StatusMessage = {
+  inProgress: string;
+  inProgressWithErrors: string;
+  done: string;
+  doneWithErrors: string;
+  file: string;
+  files: string;
+};
+export declare class DuetUploadAriaStatus {
+  /**
+   * State() variables
+   */
+  statusMessage: string;
+  /**
+   * State() variables
+   */
+  statusMessageLabel: StatusMessage;
+  /**
+   * Adds accessible label that is read aloud
+   */
+  accessibleAriaLive: "off" | "polite" | "assertive";
+  /**
+   * valid file amount
+   */
+  valid: number;
+  /**
+   * total files
+   */
+  total: number;
+  /**
+   * invalid file amount
+   */
+  invalid: number;
+  /**
+   * valid file amount
+   */
+  inprogress: number;
+  watchHandler(newValue: boolean, oldValue: boolean): void;
+  /**
+   * Component lifecycle events.
+   */
+  private replacePlaceHolders;
+  private getStatusMessage;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

package/lib/types/components/duet-upload/duet-upload-editable-item-error.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DuetFileListItem } from "./duet-upload";
+interface ErrorProps {
+  data: DuetFileListItem;
+}
+export declare const ErrorItem: FunctionalComponent<ErrorProps>;
+export {};

package/lib/types/components/duet-upload/duet-upload-editable-item-inprogres.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+interface ProgressProps {
+  progress: any;
+  name: string;
+}
+export declare const ProgressItem: FunctionalComponent<ProgressProps>;
+export {};

package/lib/types/components/duet-upload/duet-upload-editable-item-success.d.ts

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DuetFileListItem } from "./duet-upload";
+interface SuccessProps {
+  data: DuetFileListItem;
+  showLinks: boolean;
+}
+export declare const SuccessItem: FunctionalComponent<SuccessProps>;
+export {};

package/lib/types/components/duet-upload/duet-upload.d.ts

@@ -3,31 +3,41 @@ import { DuetMargin, DuetTheme } from "../../common-types";
 import { FormComponent } from "../../utils/form-components";
 import { DuetLangObject } from "../../utils/language-utils";
 import { ThemeableComponent } from "../../utils/themeable-component";
+import { DuetEditableTableGroupNames } from "../duet-editable-table/duet-editable-table";
+import { DuetEditableTableActions } from "../duet-editable-table/duet-editable-table-item";
+import { StatusMessage } from "./duet-upload-aria-status";
 import { DuetUploadErrorCode } from "./errorcodes.utils";
 import { DuetXhrRequest } from "./xhr.helpers";
 export declare type DuetUploadEvent = {
   originalEvent?: Event;
   data?: Record<string, any>;
+  metaData?: Record<string, any>;
   component: "duet-upload";
 };
 export declare type DuetFileListItem = {
   uid: string;
   item: File | null;
   size: number;
+  meta?: Record<string, any>;
+  uploaded: boolean;
   error: DuetUploadErrorCode;
   progress: number;
   deleted: boolean;
   valid: boolean;
   xhr: DuetXhrRequest | false;
   url: string | false;
+  group?: string;
+  html?: string;
+  status?: number;
 };
 export interface StringMap {
   [key: string]: any;
 }
 /**
  * @slot header  - named slot - to place content after description / caption
- * @slot fileheader - named slot - to place content above filelist (only displayed when filelist contains items)
- * @slot filefooter - named slot - to place content below filelist (only displayed when filelist contains items)
+ * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
+ * @slot filelist - named slot - should always contain a configurable duet-editable-table or a component that exposes the same functionality
+ * @slot filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
  */
 export declare class DuetUpload implements ThemeableComponent, FormComponent {
   /**
@@ -36,10 +46,16 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   private buttonId;
   private labelId;
   private uploadId;
+  private editableTableId;
   private filesInProgress;
   private fileMaxReached;
   private bytesMaxReached;
+  private metaData;
   private nativeInput?;
+  /**
+   * Properties
+   */
+  private DefaultGroups;
   /**
    * Reference to host HTML element.
    */
@@ -70,19 +86,51 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * it will be up to you to handle the upload and return progress information to the upload-component
    */
   external: boolean;
+  /**
+   * If set the upload component will not display an upload button, you will have to create on yourself
+   * and call the exposed methods startUpload
+   */
+  hideButton: boolean;
+  /**
+   * Default actions added to all files
+   */
+  actions: DuetEditableTableActions | string;
   /**
    * Endpoint URI that is capable of receiving the files
    */
   uri: string;
+  /**
+   * If enabled the filelist will create links on successfully uploaded items,
+   * this requires the server can respond with link URIs in the correct format
+   */
+  showLinks: boolean;
   /**
    * Caption (underneath label) that can be set as a way of adding extra information
    */
   caption: string;
+  /**
+   * Property to change the aria upload progress text read aloud by screenreaders
+   * @default {
+      fi: "Lisää liite",
+      sv: "Lägg till en bilaga",
+      en: "Choose files",
+    }
+   */
+  statusLabelDefaults: DuetLangObject | string;
+  /**
+   * Strings used for the status aria-label
+   */
+  statusMessageLabel: StatusMessage;
   /**
    * Property to change descriptionDefaults 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 an attachment",
+    }
    */
-  buttonLabelDefaults: DuetLangObject;
+  buttonLabelDefaults: DuetLangObject | string;
   /**
    * Label of button
    * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
@@ -116,6 +164,16 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * browser from displaying its own validation errors.
    */
   required: boolean;
+  /**
+   * Array of group names that you want the editable table used to display files to display
+   * @required
+   * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+   */
+  groups: DuetEditableTableGroupNames | string;
+  /**
+   * Visually hides the groups labels in the editable table list used to display the list of files
+   */
+  hideGroups: boolean;
   /**
    * Map of string that contain list of uploaded files.
    */
@@ -128,8 +186,9 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   /**
    * 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"}
    */
-  labelDefaults: DuetLangObject;
+  labelDefaults: DuetLangObject | string;
   /**
    * Label for the input.
    * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
@@ -138,18 +197,31 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   /**
    * Property to change descriptionDefaults defaults on the component.
    * normally you would handle these strings on an application level and override @label when needed
+   * @default {
+      fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+      sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+      en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+    }
    */
-  descriptionDefaults: DuetLangObject;
+  descriptionDefaults: DuetLangObject | string;
   /**
    * Description for the upload component.
-   * @default ...
+   * @default {
+      fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+      sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+      en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+    }
    */
   description: string;
   /**
    * Defaults for the filelist's empty state.
-   * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+   * @default {
+      fi: "Ei vielä lisättyjä tiedostoja.",
+      sv: "Inga filer har lagts till ännu.",
+      en: "No files added yet.",
+     }
    */
-  fileListEmptyDefaults: DuetLangObject;
+  fileListEmptyDefaults: DuetLangObject | string;
   /**
    * 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."}
@@ -159,25 +231,10 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * Display the input in error state along with an error message.
    */
   error: string;
-  /**
-   * Visually hide the label, but still show it to screen readers.
-   */
-  labelHidden: boolean;
   /**
    * Name of the upload component.
    */
   name: string;
-  /**
-   * if set, allows capture of media from user camera / microphone
-   * The capture attribute value is a string that specifies which camera to use for capture
-   * of image or video data, if the accept attribute indicates that the input should be of
-   * one of those types. A value of user indicates that the user-facing camera and/or
-   * microphone should be used. A value of environment specifies that the outward-facing
-   * camera and/or microphone should be used. If this attribute is missing, the user agent
-   * is free to decide on its own what to do. If the requested facing mode isn't available,
-   * the user agent may fall back to its preferred default mode.
-   */
-  capture: string | boolean;
   /**
    * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
    */
@@ -257,6 +314,11 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   /**
    * Private functions
    */
+  private listenForActionEvents;
+  private verifyValidity;
+  private getGroupFromItemData;
+  private getItemHTMLFromItemData;
+  private convertToDuetEditableTableItems;
   private kick;
   private genHashName;
   private updateValueInMap;
@@ -264,7 +326,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   private trackProgress;
   private getFilesAsArray;
   private resetFormFields;
-  private getI18nError;
+  private startUpload;
   /**
    * Eventlisteners for the XHR requests
    */
@@ -290,12 +352,15 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   private onProgress;
   private onFocus;
   private onDone;
-  private startUpload;
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
    */
   setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Method for invoking the upload sequence
+   */
+  upload(metaData?: any | undefined): Promise<void>;
   /**
    * Get list of files, divided in errors and valid sections
    */
@@ -303,6 +368,10 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
     valid: any[];
     invalid: any[];
   }>;
+  /**
+   * Convenience method for updating a of an item in the files attribute
+   */
+  updateValue(item: string, key: string, value: any): Promise<void>;
   /**
    * render() function
    * Always the last one in the class.

package/lib/types/components/duet-upload/errorcodes.utils.d.ts

@@ -5,3 +5,4 @@ export declare type DuetUploadErrorCode = {
   message: DuetLangObject | undefined;
 };
 export declare const getError: (code: string) => DuetUploadErrorCode;
+export declare const getI18nError: (errorCode: string) => any;

package/lib/types/components/duet-upload/xhr.helpers.d.ts

@@ -9,4 +9,10 @@ export declare type failureHandler = (xhr: XMLHttpRequest, name: string, status:
 export declare type successHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
 export declare type progressTracker = (name: string) => void;
 export declare type DuetXhrRequest = (payload: Record<string, any>, options: Partial<DuetXhrRequestOptions>, onFailure: failureHandler, onSuccess: successHandler, onProgress: progressTracker) => XMLHttpRequest;
-export declare const makeXhrRequest: (payload: any, options: any, onFailure: any, onSuccess: any, onProgress: any) => DuetXhrRequest;
+export declare const makeXhrRequest: ({ payload, options, onFailure, onSuccess, onProgress }: {
+  payload: any;
+  options: any;
+  onFailure: any;
+  onSuccess: any;
+  onProgress: any;
+}) => DuetXhrRequest;