@duetds/components 4.33.0 → 4.34.1

package/lib/types/common-types.d.ts

@@ -12,5 +12,4 @@ export type DuetLanguageWithUs = "fi" | "en" | "sv" | "us"
 export type DuetStatus = "default" | "success" | "danger" | "warning"
 export type DuetAnalyticsEvent<T extends string> = { analyticsId: string; component: T }
 export type DuetGridBreakpoint = "small" | "medium" | "x-large"
-
 export type DuetLocale = "fi-FI" | "sv-SE" | "en-GB" | "en-US"

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

@@ -7,6 +7,9 @@ export declare type DuetCollapsibleToggleEvent = {
   component: "duet-collapsible";
   originalEvent: KeyboardEvent | MouseEvent;
 };
+/**
+ * @part duet-collapsible-heading-content - piercing selector for styling the heading content
+ */
 export declare class DuetCollapsible implements ThemeableComponent {
   /**
    * Own Properties

package/lib/types/components/duet-editable-table/duet-editable-table-button.d.ts

@@ -64,6 +64,7 @@ export declare class DuetEditableTableButton implements ThemeableComponent {
   private emitActionEvent;
   private onMouseEnter;
   private onMouseLeave;
+  private getColours;
   /**
    * render() function
    * Always the last one in the class.

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

@@ -23,7 +23,7 @@ export declare type DuetEditableTableActions = {
 }[];
 export declare type DuetEditableTableItemData = {
   uid: string;
-  item: string | HTMLElement;
+  item: string | HTMLElement | Record<string, string>;
   group: string;
 };
 export declare class DuetEditableTableItem implements ThemeableComponent {
@@ -42,6 +42,10 @@ export declare class DuetEditableTableItem implements ThemeableComponent {
    * @internal
    */
   groupId: string;
+  /**
+   * Key used to set vertical alignment of action buttons
+   */
+  alignment: string;
   /**
    * Key used to identify item, when running actions
    */

package/lib/types/components/duet-editable-table/duet-editable-table-tabledata.d.ts

@@ -2,6 +2,7 @@ import { FunctionalComponent } from "../../stencil-public-runtime";
 interface TableDataProps {
   data: any;
   groupId: string;
+  alignment: string;
 }
 export declare const TableData: FunctionalComponent<TableDataProps>;
 export {};

package/lib/types/components/duet-editable-table/duet-editable-table.d.ts

@@ -11,6 +11,7 @@ export declare type DuetEditableTableItems = Map<any, DuetEditableTableItemData>
 export declare class DuetEditableTable implements ThemeableComponent {
   private internalGroupArray;
   private internalActionsArray;
+  private template;
   /**
    * Reference to host HTML element.
    */
@@ -24,6 +25,10 @@ export declare class DuetEditableTable implements ThemeableComponent {
    * Map of items that contain list of things.
    */
   items: DuetEditableTableItems;
+  /**
+   * Key used to set vertical alignment of action buttons
+   */
+  alignment: string;
   /**
    * Array of internationalized defaults for the default groups labels.
    */
@@ -79,6 +84,11 @@ export declare class DuetEditableTable implements ThemeableComponent {
    * Private methods.
    */
   private kick;
+  /**
+   * If a user defines a template section within editable table, try to read an use it.
+   */
+  private getTemplate;
+  private getItemData;
   filterMap: (needle: any) => [any, DuetEditableTableItemData][];
   render(): any;
 }

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

@@ -9,6 +9,7 @@ export declare class DuetGrid implements ComponentInterface {
    */
   private mutationO?;
   private mutation1?;
+  private mql;
   distributeFormElement: boolean;
   /**
    * Reference to host HTML element.

package/lib/types/components/duet-header/duet-header-dropdown.d.ts

@@ -0,0 +1,16 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+interface Props {
+  id: string;
+  className?: string;
+  label: string;
+  icon?: string;
+  accessibleText?: string;
+  active: boolean;
+  isOpen: boolean;
+  badge: boolean;
+  toggleRef: (el: HTMLButtonElement) => void;
+  itemsRef: (el: HTMLDivElement) => void;
+  onToggle: (e: Event) => void;
+}
+export declare const DuetHeaderDropdown: FunctionalComponent<Props>;
+export {};

package/lib/types/components/duet-header/duet-header-hamburger.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+export declare const DuetHeaderHamburger: FunctionalComponent;

package/lib/types/components/duet-header/duet-header-icon.d.ts

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DuetIconSize } from "../duet-icon/duet-icon";
+interface Props {
+  icon: string;
+  iconSize?: DuetIconSize;
+}
+export declare const DuetHeaderIcon: FunctionalComponent<Props>;
+export {};

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

@@ -13,6 +13,10 @@ export declare type DuetHeaderContactItem = DuetHeaderItem & {
 };
 export declare type DuetHeaderMainItem = DuetHeaderItem & {
   badge?: boolean;
+  active?: boolean;
+  external: boolean;
+  icon?: string;
+  items?: DuetHeaderMainItem[];
 };
 export declare type DuetHeaderLanguageItem = DuetHeaderItem & {
   country: DuetLanguage;
@@ -20,6 +24,7 @@ export declare type DuetHeaderLanguageItem = DuetHeaderItem & {
 export declare type DuetHeaderSession = DuetHeaderItem & {
   type: "login" | "logout";
 };
+export declare type DuetHeaderSearch = DuetHeaderItem;
 export declare type DuetHeaderChangeEvent = {
   originalEvent: Event;
   data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession;
@@ -32,20 +37,26 @@ export interface I18nText {
   activeLanguage: string;
 }
 /**
- * @slot utility - A slot for utilities, such as a notification drawer
- * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop.
+ * @slot utility - A slot for utilities, such as a notification drawer or shopping basket.
+ * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop. Note: not available in desktop multilevel header.
  */
 export declare class DuetHeader implements ThemeableComponent {
   /**
    * Own Properties
    */
+  private subMenuItemRefs;
+  private subMenuButtonRefs;
   private contactItemsEl;
   private contactItemsButtonEl;
   private hasLanguageChanged;
   private languageItemsEl;
   private languageItemsButtonEl;
+  private segmentItemsEl;
+  private segmentItemsButtonEl;
   private navigationEl;
   private logoEl;
+  private mql;
+  private boundMqlFunctions;
   /**
    * Reference to host HTML element.
    */
@@ -57,12 +68,17 @@ export declare class DuetHeader implements ThemeableComponent {
   isContactOpen: boolean;
   isLanguageOpen: boolean;
   isSlideOutOpen: boolean;
+  isSegmentOpen: boolean;
+  openMenu: string;
+  closedActives: string[];
   processedItems: DuetHeaderMainItem[];
   processedLanguageItems: DuetHeaderLanguageItem[];
   processedContactItems: DuetHeaderContactItem[];
   processedSession: DuetHeaderSession;
+  processedSearch: DuetHeaderSearch;
   processedUser: DuetHeaderItem;
   processedBack: DuetHeaderItem;
+  renderDesktopNav: boolean;
   /**
    * Theme of the header.
    */
@@ -146,6 +162,7 @@ export declare class DuetHeader implements ThemeableComponent {
    * An object that includes mandatory "label" and "href" fields for the user
    * profile link. Additionally, you can pass an "id" that is added as an HTML
    * identifier for the element. If nothing is passed, user won’t be shown.
+   * Note: not available in multilevel headers.
    */
   user: any;
   /**
@@ -154,6 +171,7 @@ export declare class DuetHeader implements ThemeableComponent {
   logoHref: string;
   /**
    * The href of the current page item that is shown as “active”.
+   * Note: not available in multilevel headers.
    */
   currentHref: string;
   /**
@@ -164,20 +182,30 @@ export declare class DuetHeader implements ThemeableComponent {
   /**
    * An array of items for the main navigation. Items have to include mandatory
    * "label" and "href" fields to work. Additionally, you can pass an "id" that is
-   * added as an HTML identifier for the element.
+   * added as an HTML identifier for the element, "active" boolean that makes item active,
+   * "badge" boolean to add notification badge next to the item and
+   * "items" array consisting of sub items that are allowed up to three levels.
    */
   items: any;
   /**
    * Region that is shown next to the logo. If empty, region will be hidden.
+   * Note: not available in desktop multilevel header.
    */
   region: string;
   /**
    * An object that includes mandatory "label", "href" and "type" fields for the
    * session login/logout link. Additionally, you can pass an "id" that is added
+   * as an HTML identifier for the element.
+   * If nothing is passed, this link won’t be shown.
+   */
+  session: any;
+  /**
+   * An object that includes mandatory "label" and "href" fields for the
+   * search link. Additionally, you can pass an "id" that is added
    * as an HTML identifier for the element. If nothing is passed, this link won’t
    * be shown.
    */
-  session: any;
+  search: any;
   /**
    * An object that includes mandatory "label" and "href" fields for the back link.
    * Additionally, you can pass an "id" that is added as an HTML identifier for the
@@ -187,6 +215,7 @@ export declare class DuetHeader implements ThemeableComponent {
   back: any;
   /**
    * Label of the contact menu. If empty, contact menu will be hidden.
+   * Note: not available in multilevel headers.
    */
   contact: string;
   /**
@@ -214,6 +243,12 @@ export declare class DuetHeader implements ThemeableComponent {
    * inside your listener. Additionally, the passed data is available via **event.detail.data**.
    */
   duetSessionClick: EventEmitter<DuetHeaderChangeEvent>;
+  /**
+   * Event for when a user has clicked the search link. You can prevent the
+   * default browser functionality by calling **event.detail.originalEvent.preventDefault()**
+   * inside your listener. Additionally, the passed data is available via **event.detail.data**.
+   */
+  duetSearchClick: EventEmitter<DuetHeaderChangeEvent>;
   /**
    * Event raised when a user has clicked the user link. You can prevent the
    * default browser functionality by calling **event.detail.originalEvent.preventDefault()**
@@ -265,6 +300,7 @@ export declare class DuetHeader implements ThemeableComponent {
    * Component lifecycle events.
    */
   componentWillLoad(): void;
+  connectedCallback(): void;
   disconnectedCallback(): void;
   /**
    * Component event handling.
@@ -275,6 +311,7 @@ export declare class DuetHeader implements ThemeableComponent {
   private handleLanguageClick;
   private handleClick;
   private handleSessionClick;
+  private handleSearchClick;
   private handleUserClick;
   private handleBackClick;
   private handleContactClick;

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

@@ -60,7 +60,7 @@ export declare class DuetIcon implements ThemeableComponent {
   /**
    * Component lifecycle events.
    */
-  componentWillLoad(): Promise<void>;
+  componentWillLoad(): void;
   loadIcon(): Promise<void>;
   /**
    * render() function.

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

@@ -1,6 +1,9 @@
 import { DuetLanguage, DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
 import { ThemeableComponent } from "../../utils/themeable-component";
+/**
+ * @part duet-link - piercing selector for styling the link
+ */
 export declare class DuetLink implements ThemeableComponent {
   private nativeLink;
   /**

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

@@ -1,7 +1,7 @@
 import { DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetTableBreakpoint = keyof typeof breakpointToToken;
-export declare type DuetTableVariant = "striped" | "plain";
+export declare type DuetTableVariant = "striped" | "plain" | "fixed";
 export declare type DuetTableStickyDistance = "with-links" | "without-links" | "none";
 declare const breakpointToToken: {
   none: string;

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

@@ -5,7 +5,7 @@ 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 { StatusMessage } from "../duet-upload-aria-status/duet-upload-aria-status";
 import { DuetUploadErrorCode } from "./errorcodes.utils";
 import { DuetXhrRequest } from "./xhr.helpers";
 export declare type DuetUploadEvent = {
@@ -36,7 +36,6 @@ export interface StringMap {
 /**
  * @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 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 {
@@ -50,6 +49,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   private filesInProgress;
   private fileMaxReached;
   private bytesMaxReached;
+  private internalStatusMessageLabel;
   private metaData;
   private nativeInput?;
   /**
@@ -87,12 +87,12 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    */
   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
+   * 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 all files
+   * Default actions added to the internally used duet-editable-table
    */
   actions: DuetEditableTableActions | string;
   /**
@@ -100,8 +100,9 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    */
   uri: string;
   /**
-   * If enabled the filelist will create links on successfully uploaded items,
+   * 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;
   /**
@@ -111,19 +112,43 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   /**
    * 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",
-    }
+   *     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;
+  statusMessageLabel: StatusMessage | string;
   /**
-   * Property to change descriptionDefaults defaults on the component.
-   * normally you would handle these strings on an application level and override @label when needed
+   * Property to change button label defaults on the component.
    * @default {
       fi: "Lisää liite",
       sv: "Lägg till en bilaga",
@@ -137,7 +162,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    */
   buttonLabel: string;
   /**
-   * accessible Label of button
+   * accessible aria-Label of button
    */
   accessibleButtonLabel: string;
   /**
@@ -165,11 +190,15 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    */
   required: boolean;
   /**
-   * Array of group names that you want the editable table used to display files to display
+   * 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;
+  /**
+   * Key used to set vertical alignment of action buttons
+   */
+  alignment: string;
   /**
    * Visually hides the groups labels in the editable table list used to display the list of files
    */
@@ -179,7 +208,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    */
   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;
@@ -196,7 +225,6 @@ 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.",
@@ -369,7 +397,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
     invalid: any[];
   }>;
   /**
-   * Convenience method for updating a of an item in the files attribute
+   * 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>;
   /**

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

@@ -12,7 +12,7 @@ export declare class DuetUploadAriaStatus {
    */
   statusMessage: string;
   /**
-   * State() variables
+   * Status labels used in the component
    */
   statusMessageLabel: StatusMessage;
   /**
@@ -37,7 +37,7 @@ export declare class DuetUploadAriaStatus {
   inprogress: number;
   watchHandler(newValue: boolean, oldValue: boolean): void;
   /**
-   * Component lifecycle events.
+   * Private functions
    */
   private replacePlaceHolders;
   private getStatusMessage;