@duetds/components 10.4.0 → 10.6.0

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-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,10 @@ export declare class DuetHero implements ThemeableComponent {
      * Alt attribute text for the image. If not provided, image is assigned presentation role.
      */
     imageAlt: string;
+    /**
+     * 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

@@ -20,6 +20,8 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private proxyId;
     private clearId;
     private labelId;
+    private prefixId;
+    private suffixId;
     private topCaptionId;
     private topCaptionPlaceholderId;
     private chipCountId;
@@ -28,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;
@@ -36,6 +40,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private passwordShownAriaAnnouncement;
     private passwordHiddenAriaAnnouncement;
     private chipsSelectedDesriptionLabel;
+    private maxlengthReachedLabel;
     /**
      * Reference to host HTML element.
      */
@@ -53,12 +58,17 @@ 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.
      */
     accessibleActiveDescendant: string;
     /**
-     * Indicates what kind of user input completion suggestions are provided.
+     * Indicates in what mode user input completion suggestions are provided. Valid values are: "none", "inline",
+     * "list", "both"
      */
     accessibleAutocomplete: string;
     /**
@@ -197,7 +207,15 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      */
     labelHidden: boolean;
     /**
-     * Enable numeric keyboard for the input.
+     * Text to show before the start (left) of the input's editable area. Also used in accessible labelling.
+     */
+    fieldPrefix: string;
+    /**
+     * Text to show after the end (right) of the input's editable area. Also used in accessible labelling.
+     */
+    fieldSuffix: string;
+    /**
+     * Enable numeric keyboard for the input. Note that on iOS the numeric keyboard does not contain minus.
      */
     numericKeyboard: boolean;
     /**
@@ -217,6 +235,18 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      * Use minlength to specify the minimum length of the value that can be entered.
      */
     minlength: number;
+    /**
+     * When max is set and getting validity, the value of the input is interpreted as a number - possible comma as
+     * decimal seprator changed to dot and the value then parsed as float - and compared to max and validity set
+     * accordingly. This simulates the behavior of max attribute of input[type=number].
+     */
+    max: number;
+    /**
+     * When min is set and getting validity, the value of the input is interpreted as a number - possible comma as
+     * decimal seprator changed to dot and the value then parsed as float - and compared to min and validity set
+     * accordingly. This simulates the behavior of min attribute of input[type=number].
+     */
+    min: number;
     /**
      * Hint text to display.
      */
@@ -235,7 +265,9 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      */
     icon: DuetIconName;
     /**
-     * Enable or disable automatic completion by the browser
+     * Set the type of automatic completion by the browser. If possible use the standard tokens like "name", "given-name",
+     * "family-name", "postal-code", "street-address" etc. The component adds automatically "tel" and "email". If you must
+     * disable autocomplete use "off" (but avoid disabling unless absolutely necessary).
      */
     autoComplete: string;
     /**
@@ -302,10 +334,16 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private onBlur;
     private onFocus;
     private onClear;
+    private onInputKeyDown;
+    private onInputPaste;
+    private isAtMaxlengthWithoutSelection;
+    private handleMaxlengthLimitReached;
     /**
      * Private functions
      */
+    private valueAsNormalizedFloat;
     private getAriaDescribedBy;
+    private getAriaLabelledBy;
     private handleClearClick;
     private keyHandler;
     private togglePasswordRevealed;
@@ -345,6 +383,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      * If the last, rightmost chip was selected before, unselect it.
      */
     private selectChipToRight;
+    private getAutocomplete;
     /**
      * Add a chip to the input. Property "chips" must be true.
      */

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

@@ -161,7 +161,8 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
      */
     tooltip: string;
     /**
-     * Step amount.
+     * Step amount. Note that decimal values as step (e.g. 0.01) may produce unexpected results and thus are strongly
+     * discouraged (but for backwards compatibility still accepted).
      */
     step: number;
     /**

package/lib/types/components/duet-page-heading/duet-page-heading.d.ts

@@ -2,20 +2,30 @@ import { DuetIconName, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 /**
  * @slot heading - This is a slot for heading content.
+ * @slot button - This is a slot for button visually above the heading. Use only variation "plain" button.
  */
 export declare class DuetPageHeading implements ThemeableComponent {
     /**
      * Reference to host HTML element.
      */
     element: HTMLElement;
+    private hasButtonSlot;
     /**
      * Theme of the hero area.
      */
     theme: DuetTheme;
+    /**
+     * LähiTapiola theme includes a brand shape at the top by default. Set to "none" to omit it. Has no effect for Turva.
+     */
+    shape: "auto" | "none";
     /**
      * Icon.
      */
     icon: DuetIconName;
+    /**
+     * With LähiTapiola theme the icon can have secondary background instead of default. This has no effect on Turva theme.
+     */
+    iconBackground: "default" | "secondary";
     /**
      * Layout.
      * Values narrow and fluid are deprecated.

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

@@ -17,6 +17,7 @@ export declare class DuetPhoneInput implements ThemeableComponent, A11yComponent
     private countryFlagCDNUrl;
     private inputId;
     private buttonAriaLabel;
+    private buttonAriaLabelSelected;
     /**
      * Reference to host HTML element.
      */
@@ -100,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.
      */
@@ -174,5 +180,6 @@ export declare class DuetPhoneInput implements ThemeableComponent, A11yComponent
     private findCountryForCode;
     private renderFlag;
     private getFlagForButton;
+    private getAccessibleLabelForButton;
     render(): any;
 }

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,11 @@ export declare class DuetPromoCard implements ThemeableComponent {
      * Alt attribute text for the image. If not provided, image is assigned presentation role.
      */
     imageAlt: string;
+    /**
+     * 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-radio/duet-radio.d.ts

@@ -144,7 +144,6 @@ export declare class DuetRadio implements ThemeableComponent, InputComponent, A1
     /**
      * Component event handling.
      */
-    private onClick;
     private onChange;
     private onBlur;
     private onFocus;

package/lib/types/components/duet-tooltip/duet-tooltip-button.d.ts

@@ -17,6 +17,7 @@ export declare class DuetTooltipButton implements ThemeableComponent {
     negative: boolean;
     active: boolean;
     tooltipId: string;
+    inBadge: boolean;
     /**
      * Component lifecycle events.
      */

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

@@ -108,6 +108,11 @@ export declare class DuetTooltip implements ThemeableComponent {
      * Negative variation for tooltip button on dark background
      */
     negative: boolean;
+    /**
+     * @internal
+     * When used inside a duet-badge
+     */
+    badgeElement: HTMLDuetBadgeElement;
     /**
      * Component lifecycle events.
      */
@@ -127,6 +132,7 @@ export declare class DuetTooltip implements ThemeableComponent {
     private closeTooltip;
     private toggleOpen;
     private updatePlacement;
+    private badgeClick;
     /**
      * render() function.
      * Always the last one in the class.