@duetds/components 10.5.0 → 10.7.0

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

@@ -28,18 +28,18 @@ export declare class DuetChip implements ThemeableComponent {
     inputChipHover: boolean;
     inputChipDeleteFocus: boolean;
     /**
-     * Adds accessible label for the chip that is only shown for screen readers.
-     * Typically, this label text replaces the visible text on the button for
-     * users who use assistive technology. With input variation this is not used,
-     * as the accessible label is automatically generated.
+     * Adds accessible label for the chip that is used by screen readers and other assistive technology. Has effect only
+     * with "button" variation as for the other variations the accessible label is automatically generated.
      */
     accessibleLabel: string;
     /**
      * Variation of the chip.
      * Button should be used to present a list of actions or suggestions. It behaves like a button and must be used
-     * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be
-     * used with a value. Input represents items input by the user, and the chip can be removed with a click.
-     * Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+     * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with
+     * a value. Filter can also be used with a popup-menu - then the initial text describes the type of category of
+     * filtering, and the selection from the popup-menu sets the filter value. Input represents items input by the user,
+     * and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off in a group,
+     * and it should be used with a value and name.
      */
     variation: DuetChipVariation;
     /**
@@ -47,7 +47,7 @@ export declare class DuetChip implements ThemeableComponent {
      */
     size: DuetChipSize;
     /**
-     * Id of the DuetPopupMenu that is controlled by the chip.
+     * Id of the DuetPopupMenu that is controlled by the chip. Works only with "filter" variation.
      */
     popup: string;
     /**
@@ -97,6 +97,10 @@ export declare class DuetChip implements ThemeableComponent {
      * Use this property to add an aria-haspopup attribute.
      */
     accessiblePopup: string;
+    /**
+     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+     */
+    accessibleDescribedBy: string;
     /**
      * Emitted when the checked property has changed (applicable only for the filter variation).
      */
@@ -124,6 +128,8 @@ export declare class DuetChip implements ThemeableComponent {
     private radioInputListenersRemove;
     private radioInputListenersAdd;
     private radioInputSetUp;
+    private originalFilterChipText;
+    private originalFilterChipValue;
     private popupSetUp;
     /**
      * Component event handling.
@@ -148,6 +154,7 @@ export declare class DuetChip implements ThemeableComponent {
     private getAccessiblePopup;
     private getAccessibleDeleteLabel;
     private getAccessibleInputChipLabel;
+    private getAccessibleFilterLabel;
     /**
      * Remove input chip
      */

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

@@ -36,7 +36,6 @@ export declare class DuetCombobox implements ThemeableComponent {
     activeItemAnnouncement: string;
     activeItemHandler(_state: any): void;
     private announceActiveItem;
-    inputValueHandler(): void;
     /**
      * Defaults for the accessible labels for the select items
      */

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

@@ -1,5 +1,6 @@
 import { ThemeableComponent } from "../../common";
 import { DuetIconName, DuetLanguage, DuetMargin, DuetTheme } from "../../common-types";
+import { DuetSource } from "../../utils/picture-utils";
 export declare class DuetContactCard implements ThemeableComponent {
     /**
      * Own Properties.
@@ -22,6 +23,15 @@ 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.
+     */
+    sources: DuetSource[] | string;
     /**
      * Name.
      */

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

@@ -9,6 +9,9 @@ type DatePickerMonthProps = {
     language: DuetLanguage;
     min?: Date;
     max?: Date;
+    disallowWeekends?: boolean;
+    disallowBankHolidays?: boolean;
+    disallowedDates?: string | string[];
     onDateSelect: DatePickerDayProps["onDaySelect"];
     onKeyboardNavigation: DatePickerDayProps["onKeyboardNavigation"];
     focusedDayRef: (element: HTMLElement) => void;

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

@@ -29,6 +29,10 @@ export declare function startOfMonth(date: Date): Date;
 export declare function endOfMonth(date: Date): Date;
 export declare function setMonth(date: Date, month: number): Date;
 export declare function setYear(date: Date, year: number): Date;
+/**
+ * Check if date falls on a Saturday or Sunday
+ */
+export declare function isWeekend(date: Date): boolean;
 /**
  * Check if date is within a min and max
  */

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

@@ -0,0 +1,9 @@
+export type DisallowedDaysOptions = {
+    disallowWeekends?: boolean;
+    disallowBankHolidays?: boolean;
+    disallowedDates?: string | string[];
+};
+/**
+ * Check if a date is disallowed by any of the given weekend/bank-holiday/explicit-date rules
+ */
+export declare function isDateDisallowed(date: Date, options: DisallowedDaysOptions): boolean;

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

@@ -163,6 +163,19 @@ export declare class DuetDatePicker implements ThemeableComponent, InputComponen
      * This setting can be used alone or together with the min property.
      */
     max: string;
+    /**
+     * Disallow selecting Saturdays and Sundays.
+     */
+    disallowWeekends: boolean;
+    /**
+     * Disallow selecting Finnish bank holidays, including Easter-based dates and Midsummer Eve.
+     */
+    disallowBankHolidays: boolean;
+    /**
+     * Disallow selecting specific dates. Accepts an array of ISO-8601 (YYYY-MM-DD) dates,
+     * or a comma-separated string of the same when set as an HTML attribute.
+     */
+    disallowedDates: string | string[];
     /**
      * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
      */
@@ -171,6 +184,7 @@ export declare class DuetDatePicker implements ThemeableComponent, InputComponen
      * This offers information relating to the current validity of the component.
      * It follow as closely as possible the behaviour of the native date input.
      * Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.
+     * For disallowed dates property customError is set true.
      */
     get validity(): ValidityState;
     /**

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

@@ -0,0 +1,11 @@
+/**
+ * Calculate the date of Easter Sunday for a given year using the
+ * Meeus/Jones/Butcher Gregorian algorithm.
+ */
+export declare function getEasterSunday(year: number): Date;
+/**
+ * Finnish bank holidays for a given year, as published by the Bank of Finland:
+ * https://www.suomenpankki.fi/en/money-and-payments/bank-holidays/
+ */
+export declare function getFinnishBankHolidays(year: number): Date[];
+export declare function isFinnishBankHoliday(date: Date): boolean;

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

@@ -2,6 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetAnalyticsEvent, DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
+import { DuetSource } from "../../utils/picture-utils";
 export type DuetHeroIconSize = "medium" | "large";
 export type DuetHeroVariation = "default" | "light" | "gray" | "image" | "minimal" | "campaign" | "section" | "product" | "content";
 export type DuetHeroBackData = {
@@ -171,6 +172,15 @@ 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.
+     */
+    sources: DuetSource[] | string;
     /**
      * Style variation of the hero area.
      */

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

@@ -30,6 +30,8 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private togglePasswordRevealedButton?;
     private isCaptionVisible;
     private timeoutId;
+    private maxlengthAnnouncementTimeoutId;
+    private maxlengthAnnouncementKey;
     private disallowPatternRegex;
     private clearLabel;
     private timeAnnouncement;
@@ -38,6 +40,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private passwordShownAriaAnnouncement;
     private passwordHiddenAriaAnnouncement;
     private chipsSelectedDesriptionLabel;
+    private maxlengthReachedLabel;
     /**
      * Reference to host HTML element.
      */
@@ -55,6 +58,10 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      */
     isFocused: boolean;
     _accessiblePopup: string;
+    /**
+     * Text announced to screen readers when the maxlength limit is reached.
+     */
+    maxlengthAnnouncement: string;
     /**
      * Indicates the id of a related component’s visually focused element.
      */
@@ -327,6 +334,10 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private onBlur;
     private onFocus;
     private onClear;
+    private onInputKeyDown;
+    private onInputPaste;
+    private isAtMaxlengthWithoutSelection;
+    private handleMaxlengthLimitReached;
     /**
      * Private functions
      */

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

@@ -101,6 +101,11 @@ export declare class DuetPhoneInput implements ThemeableComponent, A11yComponent
      * Name of the input.
      */
     name: string;
+    /**
+     * Set the type of automatic completion by the browser. Must include "tel", may also include token "home", "work" or
+     * "mobile". If you must disable automatic completion (not recommended) use "off"
+     */
+    autoComplete: string;
     /**
      * Display the input in error state along with an error message.
      */

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

@@ -1,5 +1,6 @@
 import { DuetColor, DuetHeadingLevel, DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetSource } from "../../utils/picture-utils";
 /**
  * @slot pre-heading - Slot for pre-heading content.
  * @slot heading - Slot for heading content. Only span should be used in this slot.
@@ -38,6 +39,16 @@ 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.
+     */
+    sources: DuetSource[] | string;
     /**
      * The actual heading level used in the HTML markup.
      */

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