@duetds/components 4.31.0 → 4.33.2

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

@@ -0,0 +1,404 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+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)
+ */
+export declare class DuetUpload implements ThemeableComponent, FormComponent {
+  /**
+   * Own Properties
+   */
+  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.
+   */
+  element: HTMLElement;
+  /**
+   * State() variables
+   */
+  tick: number;
+  /**
+   * Indicates the id of a related component’s visually focused element.
+   */
+  accessibleActiveDescendant: string;
+  /**
+   * Indicates the id of a component that describes the upload component.
+   */
+  accessibleDescribedBy: string;
+  /**
+   * Use this prop to add an aria-controls attribute. Use the attribute to
+   * indicate the id of a component controlled by this component.
+   */
+  accessibleControls: string;
+  /**
+   * Indicates the id of a component owned by the input.
+   */
+  accessibleOwns: string;
+  /**
+   * 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
+   */
+  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 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 aria-Label of button
+   */
+  accessibleButtonLabel: string;
+  /**
+   * Theme of the input.
+   */
+  theme: DuetTheme;
+  /**
+   * 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.
+   */
+  disabled: boolean;
+  /**
+   * Adds a unique identifier for the upload component.
+   */
+  identifier: string;
+  /**
+   * Controls the margin of the component.
+   */
+  margin: DuetMargin;
+  /**
+   * 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.
+   */
+  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 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 | string;
+  /**
+   * Label for the input.
+   * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+   */
+  label: string;
+  /**
+   * Property to change descriptionDefaults defaults on the component.
+   * @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 | string;
+  /**
+   * Description for the upload component.
+   * @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: "Ei vielä lisättyjä tiedostoja.",
+      sv: "Inga filer har lagts till ännu.",
+      en: "No files added yet.",
+     }
+   */
+  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."}
+   */
+  fileListEmpty: string;
+  /**
+   * Display the input in error state along with an error message.
+   */
+  error: string;
+  /**
+   * Name of the upload component.
+   */
+  name: string;
+  /**
+   * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
+   */
+  maxBytes: number;
+  /**
+   * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded.
+   */
+  maxBytesTotal: number;
+  /**
+   * Use maxFiles to specify the maximum amount of files that can be uploaded
+   */
+  maxFiles: number;
+  /**
+   * A string of commaseperated file type values that are allowed
+   * @example: .pdf,.doc,.docx
+   */
+  allowedExtensions: string;
+  /**
+   * A string of commaseperated mime type values that are allowed
+   * @example: image/*,application/msword,
+   */
+  allowedMimetypes: string;
+  /**
+   * Use multiple to allow the user to select multiple files when uploading
+   */
+  multiple: boolean;
+  /**
+   * 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
+   */
+  limitSelection: boolean;
+  /**
+   * Value of the input.
+   */
+  value: string;
+  /**
+   * Emitted when the value has changed.
+   */
+  duetChange: EventEmitter<DuetUploadEvent>;
+  /**
+   * Emitted when the input loses focus.
+   */
+  duetBlur: EventEmitter<DuetUploadEvent>;
+  /**
+   * Emitted when the input has focus.
+   */
+  duetFocus: EventEmitter<DuetUploadEvent>;
+  /**
+   * Emitted when the current upload batch finishes
+   */
+  duetDone: EventEmitter<DuetUploadEvent>;
+  /**
+   * Emitted when the current validation state changes internally
+   */
+  duetState: EventEmitter<DuetUploadEvent>;
+  /**
+   * Emitted when a user clicks delete to delete an uploaded file, or a file entry with error
+   */
+  duetDelete: EventEmitter<DuetUploadEvent>;
+  /**
+   * Emitted when a user clicks cancel on an upload in progress
+   */
+  duetCancel: EventEmitter<DuetUploadEvent>;
+  /**
+   * Emitted when the file progress is updated.
+   */
+  duetProgress: EventEmitter<DuetUploadEvent>;
+  /**
+   * Emitted when the user clicks the upload button
+   */
+  duetUpload: EventEmitter<DuetUploadEvent>;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  /**
+   * Private functions
+   */
+  private listenForActionEvents;
+  private verifyValidity;
+  private getGroupFromItemData;
+  private getItemHTMLFromItemData;
+  private convertToDuetEditableTableItems;
+  private kick;
+  private genHashName;
+  private updateValueInMap;
+  private updateProgress;
+  private trackProgress;
+  private getFilesAsArray;
+  private resetFormFields;
+  private startUpload;
+  /**
+   * Eventlisteners for the XHR requests
+   */
+  private transferComplete;
+  private transferDone;
+  private transferDoneWithFailure;
+  private transferFailed;
+  private transferCanceled;
+  private validateTotals;
+  /**
+   * XHR request utilities
+   */
+  private makeXHRPostRequest;
+  private makeXHRDeleteRequest;
+  /**
+   * Component event handling.
+   */
+  private onChange;
+  private onDelete;
+  private onCancel;
+  private onUpload;
+  private onBlur;
+  private onProgress;
+  private onFocus;
+  private onDone;
+  /**
+   * 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
+   */
+  getFiles(): Promise<false | {
+    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.
+   */
+  render(): any;
+}

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

@@ -0,0 +1,8 @@
+import { DuetLangObject } from "../../utils/language-utils";
+export declare type DuetUploadErrorCode = {
+  type: string | undefined;
+  system_message: string | undefined;
+  message: DuetLangObject | undefined;
+};
+export declare const getError: (code: string) => DuetUploadErrorCode;
+export declare const getI18nError: (errorCode: string) => any;

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

@@ -0,0 +1,2 @@
+/** list of mock File elements to pass the duet-upload component */
+export declare function getBrowsedFiles(): Map<any, 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/upload-validators.d.ts

@@ -0,0 +1,12 @@
+import { StringMap } from "./duet-upload";
+export declare const validateFileExtension: (name: string, allowedExtensions: string) => boolean;
+export declare const validateFileMime: (type: any, allowedMimetypes: string) => boolean;
+export declare const validateFileSize: (size: any, maxBytes: any) => boolean;
+export declare const validateFile: (item: any, validators: Record<string, any>) => {
+  valid: boolean;
+  errorMessage: any;
+  errorSystem: string;
+  errorType: string;
+};
+export declare const validateTotalSizeIsAboveMax: (filelist: StringMap, maxTotalBytes: number) => boolean;
+export declare const validateTotalAmountIsAboveMax: (filelist: StringMap, maxFiles: number) => boolean;

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

@@ -0,0 +1 @@
+export declare const formatBytes: (bytes: any, decimals?: number) => string;

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

@@ -0,0 +1,18 @@
+export declare type DuetXhrRequestOptions = {
+  type: "POST" | "DELETE";
+  xhr: XMLHttpRequest;
+  argument: string | null;
+  uri: string;
+  headers: Record<string, string> | null;
+};
+export declare type failureHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
+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, 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;
+}