@duetds/components 4.32.0 → 4.34.0

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

@@ -1,6 +1,6 @@
 import { ComponentInterface } from "../../stencil-public-runtime";
 import { DuetDirection, DuetGridBreakpoint } from "../../common-types";
-export declare type DuetGridAlignment = "top" | "bottom" | "center" | "stretch" | "baseline";
+export declare type DuetGridAlignment = "top" | "bottom" | "center" | "stretch" | "baseline" | "form_distribute";
 export declare type DuetGridDistribution = "default" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
 export declare type DuetGridMobileAlignment = "" | "auto" | "left" | "right" | "center";
 export declare class DuetGrid implements ComponentInterface {
@@ -8,6 +8,9 @@ export declare class DuetGrid implements ComponentInterface {
    * Own Properties.
    */
   private mutationO?;
+  private mutation1?;
+  private mql;
+  distributeFormElement: boolean;
   /**
    * Reference to host HTML element.
    */
@@ -28,7 +31,9 @@ export declare class DuetGrid implements ComponentInterface {
    */
   direction: DuetDirection;
   /**
-   * Adjusts the vertical alignment of the grid items.
+   * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+   * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+   * so that they align even when displaying errors.
    */
   alignment: DuetGridAlignment;
   /**
@@ -39,6 +44,15 @@ export declare class DuetGrid implements ComponentInterface {
    * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
    */
   mobile: DuetGridMobileAlignment;
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  private outerHeight;
   /**
    * Component lifecycle events.
    */
@@ -48,6 +62,7 @@ export declare class DuetGrid implements ComponentInterface {
    * Local methods
    */
   private updateGridItems;
+  private updateGridItemsWithInputFields;
   /**
    * render() function
    * Always the last one in the class.

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-heading/duet-heading.d.ts

@@ -21,9 +21,9 @@ export declare class DuetHeading implements ThemeableComponent {
    */
   visualLevel: DuetVisualHeadingLevel;
   /**
-   * Enable or disable the border underneath the heading.
+   * Enable or disable the border underneath the heading, solid will darken the border
    */
-  border: boolean;
+  border: boolean | "solid";
   /**
    * This property allows you to set semibold font weight for all sizes
    * when needed.

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-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-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;