@duetds/components 4.30.1 → 4.33.1

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

@@ -1,14 +1,18 @@
 import { DuetColor, DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetParagraphSize = "small" | "medium";
+export declare type DuetParagraphWeight = "semi-bold" | "bold" | undefined;
 export declare type DuetParagraphVariation = "default" | "intro";
+/**
+ * @part duet-paragraph - piercing selector for styling the paragraph
+ */
 export declare class DuetParagraph implements ThemeableComponent {
   /**
    * Reference to host HTML element.
    */
   element: HTMLElement;
   /**
-   * Theme of the card.
+   * Theme of the paragraph.
    */
   theme: DuetTheme;
   /**
@@ -19,6 +23,10 @@ export declare class DuetParagraph implements ThemeableComponent {
    * Controls the size of the paragraph.
    */
   size: DuetParagraphSize;
+  /**
+   * Controls the Font-Weight of the paragraph.
+   */
+  weight: DuetParagraphWeight;
   /**
    * Style variation of the paragraph.
    */

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

@@ -0,0 +1,64 @@
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export declare type DuetUploadEvent = {
+  originalEvent?: Event;
+  data?: Record<string, any>;
+  component: "duet-progress";
+  scoped: true;
+};
+export declare class DuetProgress implements ThemeableComponent {
+  /**
+   * Own Properties
+   */
+  private progressId;
+  private progressLabelId;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * Indicates the id of a component that describes the upload component.
+   */
+  accessibleDescribedBy: string;
+  /**
+   * Indicates the aria-label of the component -
+   * this will get combined with an label+uploading when uploading,
+   * and label+upload complete when upload is complete
+   */
+  accessibleLabel: string;
+  /**
+   * Defaults for accessibleLabel
+   */
+  accessibleLabelUploadDefaults: DuetLangObject | string;
+  /**
+   * Adds accessible label for upload in progress and upload complete states
+   * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+   */
+  accessibleLabelUpload: string;
+  /**
+   * Progress of the bar, a value from 0-100
+   */
+  progress: number;
+  /**
+   * Caption (underneath label) that can be set as a way of adding extra information
+   */
+  caption: string;
+  /**
+   * Height of progressbar
+   */
+  height: string;
+  /**
+   * Theme of the input.
+   */
+  theme: DuetTheme;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

package/lib/types/components/duet-tab-group/duet-tab-group.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetLanguage, DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
 import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetTabGroupEvent = {
   component: "duet-tab-group";
@@ -37,6 +38,11 @@ export declare class DuetTabGroup implements ThemeableComponent {
    * @default "fi"
    */
   language: DuetLanguage;
+  /**
+   * Defaults for Label
+   * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+   */
+  labelDefaults: DuetLangObject | string;
   /**
    * Label for the select element which gets shown on mobile.
    * @default {fi: "Valitse", en: "Choose", sv: "Välja"}

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.d.ts

@@ -3,31 +3,40 @@ 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/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 filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
  */
 export declare class DuetUpload implements ThemeableComponent, FormComponent {
   /**
@@ -36,10 +45,17 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   private buttonId;
   private labelId;
   private uploadId;
+  private editableTableId;
   private filesInProgress;
   private fileMaxReached;
   private bytesMaxReached;
+  private internalStatusMessageLabel;
+  private metaData;
   private nativeInput?;
+  /**
+   * Properties
+   */
+  private DefaultGroups;
   /**
    * Reference to host HTML element.
    */
@@ -70,26 +86,83 @@ 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 one yourself
+   * and call the exposed method startUpload
+   */
+  hideButton: boolean;
+  /**
+   * Default actions added to the internally used duet-editable-table
+   */
+  actions: DuetEditableTableActions | string;
   /**
    * Endpoint URI that is capable of receiving the files
    */
   uri: string;
+  /**
+   * 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
+   */
+  showLinks: boolean;
   /**
    * Caption (underneath label) that can be set as a way of adding extra information
    */
   caption: string;
   /**
-   * Property to change descriptionDefaults defaults on the component.
-   * normally you would handle these strings on an application level and override @label when needed
-   */
-  buttonLabelDefaults: DuetLangObject;
+   * 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",
+   *     },
+   *   }
+   */
+  statusLabelDefaults: DuetLangObject | string;
+  /**
+   * Strings used for the status aria-label
+   */
+  statusMessageLabel: StatusMessage | string;
+  /**
+   * Property to change button label defaults on the component.
+   * @default {
+      fi: "Lisää liite",
+      sv: "Lägg till en bilaga",
+      en: "Add an attachment",
+    }
+   */
+  buttonLabelDefaults: DuetLangObject | string;
   /**
    * Label of button
    * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
    */
   buttonLabel: string;
   /**
-   * accessible Label of button
+   * accessible aria-Label of button
    */
   accessibleButtonLabel: string;
   /**
@@ -116,20 +189,31 @@ 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 to use to display files
+   * @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.
    */
   files: StringMap;
   /**
-   * Property to read if filelist contains errors or not
+   * Property to read if the internally used editable-table contains errors or not
    */
   valid: boolean;
   watchValidHandler(newValue: boolean, oldValue: boolean): void;
   /**
    * 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"}
@@ -137,19 +221,31 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   label: string;
   /**
    * 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 +255,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 +338,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 +350,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 +376,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 +392,10 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
     valid: any[];
     invalid: any[];
   }>;
+  /**
+   * Convenience method for updating the value of a key:value inside 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/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/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/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/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;

package/lib/types/components/duet-upload-aria-status/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;
+  /**
+   * Status labels used in the component
+   */
+  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;
+  /**
+   * Private functions
+   */
+  private replacePlaceHolders;
+  private getStatusMessage;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}