@duetds/components 10.6.0 → 10.8.0

package/lib/types/components/duet-contact-card/duet-contact-card.d.ts

@@ -23,6 +23,11 @@ export declare class DuetContactCard implements ThemeableComponent {
      * Image.
      */
     image: string;
+    /**
+     * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to
+     * "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+     */
+    imagePriority: "high" | "low";
     /**
      * Array of sources for responsive images. Sources have the properties of <source> element.
      */

package/lib/types/components/duet-date-picker/duet-date-picker.d.ts

@@ -99,9 +99,13 @@ export declare class DuetDatePicker implements ThemeableComponent, InputComponen
      */
     error: string;
     /**
-     * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those.
+     * @deprecated changed from opt-out to opt-in with attribute `enable-built-in-errors`
      */
     disableBuiltInErrors: boolean;
+    /**
+     * Date picker can use built-in error messages for invalid or missing entries if the application does not handle those.
+     */
+    enableBuiltInErrors: boolean;
     /**
      * Visually hide the label, but still show it to screen readers.
      */

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

@@ -13,6 +13,7 @@ export declare class DuetGrid implements ComponentInterface {
      * Reference to host HTML element.
      */
     element: HTMLElement;
+    private directChildCount;
     /**
      * Enable or disable the automatic responsive behaviour of the grid component.
      * Setting this option to "true" makes sure that contents are stacked vertically
@@ -52,7 +53,7 @@ export declare class DuetGrid implements ComponentInterface {
     /**
      * CSS grid based templates that can be used to create pre-defined layouts.
      */
-    gridTemplate: "small" | "medium" | "large" | "sidebar-right" | "sidebar-left" | "two-columns" | "three-columns" | "button-grid";
+    gridTemplate: "small" | "medium" | "large" | "sidebar-right" | "sidebar-left" | "two-columns" | "three-columns" | "button-grid" | "teaser";
     /**
      * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first
      * is row-gap and the second column-gap. Does not apply to button-grid.

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

@@ -172,6 +172,11 @@ export declare class DuetHero implements ThemeableComponent {
      * Alt attribute text for the image. If not provided, image is assigned presentation role.
      */
     imageAlt: string;
+    /**
+     * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to
+     * "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+     */
+    imagePriority: "high" | "low";
     /**
      * Array of sources for responsive images. Sources have the properties of <source> element.
      */

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

@@ -148,6 +148,13 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      * interact with the input, and conveys its inactive state to assistive technologies.
      */
     disabled: boolean;
+    /**
+     * Makes the input component not mutable, meaning the user cannot edit the control.
+     * The user can otherwise interact, e.g. by selecting the content and copying it.
+     * Due to differences in different browsers' and screen readers' implementations it
+     * is strongly advisable to use this only with type="text".
+     */
+    readonly: boolean;
     /**
      * Adds a unique identifier for the input.
      */
@@ -199,7 +206,8 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      */
     labelWeight: DuetTextFontWeight;
     /**
-     * Display the input in error state along with an error message.
+     * Display the input in error state along with an error message. If input is disabled or readonly,
+     * error is ignored.
      */
     error: string;
     /**
@@ -326,6 +334,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     componentDidLoad(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    componentWillRender(): void;
     componentDidRender(): void;
     /**
      * Component event handling.
@@ -344,6 +353,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private valueAsNormalizedFloat;
     private getAriaDescribedBy;
     private getAriaLabelledBy;
+    private get writable();
     private handleClearClick;
     private keyHandler;
     private togglePasswordRevealed;

package/lib/types/components/duet-number-input/duet-number-input.d.ts

@@ -144,6 +144,10 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
      * Visually hide the label, but still show it to screen readers.
      */
     labelHidden: boolean;
+    /**
+     * Caption shown below label, also included in aria-describedby
+     */
+    caption: string;
     /**
      * Maximum value.
      */

package/lib/types/components/duet-phone-input/duet-phone-input.d.ts

@@ -172,6 +172,7 @@ export declare class DuetPhoneInput implements ThemeableComponent, A11yComponent
     private handleFocus;
     private handleChange;
     private handleBlur;
+    private setPopupMenuWidth;
     private handleInput;
     private handleCountryCodeSelectorOpen;
     private handleCountryCodeSelectorSelect;

package/lib/types/components/duet-promo-card/duet-promo-card.d.ts

@@ -39,6 +39,11 @@ export declare class DuetPromoCard implements ThemeableComponent {
      * Alt attribute text for the image. If not provided, image is assigned presentation role.
      */
     imageAlt: string;
+    /**
+     * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to
+     * "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+     */
+    imagePriority: "high" | "low";
     /**
      * Array of sources for responsive images. Sources have the properties of <source> element.
      * This is an experimental feature and might be changed without notice.

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

@@ -0,0 +1,93 @@
+import { DuetColor, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetSource } from "../../utils/picture-utils";
+export type DuetTeaserHeadingVisualLevel = "h3" | "h5";
+/**
+ * @slot links - Slot for links or buttons related to the teaser. Only default duet-link and plain duet-button components should be used in this slot. Not rendered when the `url` property is set.
+ */
+export declare class DuetTeaser implements ThemeableComponent {
+    private aOrDivElement;
+    private hasLinksSlot;
+    element: HTMLElement;
+    /**
+     * Theme.
+     */
+    theme: DuetTheme;
+    /**
+     * The heading text.
+     */
+    heading: string;
+    /**
+     * The actual heading level used in the HTML markup.
+     */
+    headingLevel: DuetHeadingLevel;
+    /**
+     * Controls the visual size of the heading. Headings longer than 60 characters
+     * always use "h5" visually, regardless of this setting.
+     */
+    headingVisualLevel: DuetTeaserHeadingVisualLevel;
+    /**
+     * Description text shown below the heading.
+     */
+    description: string;
+    /**
+     * Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it.
+     */
+    meta: string;
+    /**
+     * A destination to link to, rendered in the href attribute of a link. Makes
+     * the whole teaser act as a link and disables the links slot.
+     */
+    url: string;
+    /**
+     * Image URL. If provided, the icon property is ignored.
+     */
+    image: string;
+    /**
+     * Alt attribute text for the image. If not provided, image is assigned presentation role.
+     */
+    imageAlt: string;
+    /**
+     * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to
+     * "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+     */
+    imagePriority: "high" | "low";
+    /**
+     * Array of sources for responsive images. Sources have the properties of <source> element.
+     */
+    sources: DuetSource[] | string;
+    /**
+     * Icon to display when no image is set. Not used if the image property is given.
+     */
+    icon: DuetIconName;
+    /**
+     * Background color for the icon
+     */
+    iconBackground: DuetColor;
+    /**
+     * Color for the icon
+     */
+    iconColor: DuetIconColor;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    /**
+     * Sets focus on underlying a element.
+     * Available only when url attribute is used.
+     * Use this method instead of the native `focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * Creates/updates the actual heading element as a light DOM child of the
+     * host, slotted into the "heading" slot.
+     */
+    private headingSetUp;
+    private getHeadingVisualLevel;
+    /**
+     * render() function
+     * Always the last one of the class.
+     */
+    render(): any;
+}

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

@@ -89,6 +89,11 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
      * technologies.
      */
     disabled: boolean;
+    /**
+     * Makes the textarea component not mutable, meaning the user cannot edit the control.
+     * The user can otherwise interact, e.g. by selecting the content and copying it.
+     */
+    readonly: boolean;
     /**
      * Adds a unique identifier for the textarea.
      */
@@ -146,7 +151,8 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
      */
     minlength: number;
     /**
-     * Display the textarea in error state along with an error message.
+     * Display the textarea in error state along with an error message. If the textarea is disabled
+     * or readonly, the error is ignored.
      */
     error: string;
     /**
@@ -221,6 +227,7 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
      * `textarea.focus()`.
      */
     setFocus(options?: FocusOptions): Promise<void>;
+    private get writable();
     /**
      * render() function
      * Always the last one in the class.