@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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

@@ -30,7 +30,8 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
      */
     language: DuetLanguage;
     /**
-     * Locale used to format the entered value.
+     * Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands
+     * separators would break keyboard input.
      */
     locale: DuetLocale;
     /**
@@ -77,7 +78,8 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
      */
     accessibleLiveDefaults: DuetLangObject | string;
     /**
-     * Format of message used to announce current amount when switching between amounts.
+     * Format of message used to announce current amount when switching between amounts. Note that the default has "euros"
+     * so if you use another unit is is essential you set this attribute to reflect that unit.
      * The string {current} is replaced with the current amount.
      * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
      */
@@ -234,6 +236,7 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
     private setValue;
     private add;
     private subtract;
+    private getUnitString;
     private formatAnnouncement;
     /**
      * render() function

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

@@ -6,6 +6,10 @@ export type OverlayDisplayDevice = "x-small" | "not-x-small" | "small" | "not-sm
  * This component is for internal use.
  */
 export declare class DuetOverlay implements ThemeableComponent {
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
     /**
      * Open
      */

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

@@ -0,0 +1,47 @@
+import { DuetMargin, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
+type DuetPanelPalette = "default" | "accent";
+type DuetPanelPaletteVariation = "primary" | "secondary";
+export type DuetPanelVariation = "" | `${DuetPanelPalette}` | `${DuetPanelPaletteVariation}` | `${DuetPanelPalette}-${DuetPanelPaletteVariation}` | `${DuetPanelPaletteVariation}-${DuetPanelPalette}`;
+export declare class DuetPanel implements ThemeableComponent {
+    element: HTMLElement;
+    /**
+     * Theme of the panel.
+     */
+    theme: DuetTheme;
+    /**
+     * Controls the padding of the component. Padding is automatically responsive.
+     */
+    padding: "small" | "medium" | "large";
+    /**
+     * The color variation of the panel. Combination of palette ("default", "accent") and palette variation ("primary",
+     * "secondary"). You can ommit "default" and "primary" - they are the defaults.
+     */
+    variation: DuetPanelVariation;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Set this attribute to draw a border around the panel.
+     */
+    border: boolean;
+    /**
+     * Adds accessible label for the panel that is only shown for screen readers.
+     */
+    accessibleLabel: string;
+    /**
+     * Indicates the id of a component that labels the panel.
+     */
+    accessibleLabelledBy: string;
+    /**
+     * Indicates the id of a component that describes the panel.
+     */
+    accessibleDescribedBy: string;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    render(): any;
+}
+export {};

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

@@ -8,6 +8,7 @@ export type DuetParagraphVariation = "default" | "intro";
  */
 export declare class DuetParagraph implements ThemeableComponent {
     private id;
+    private inheritingParents;
     /**
      * Reference to host HTML element.
      */

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

@@ -0,0 +1,178 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, ThemeableComponent } from "../../common";
+import { DuetLanguage, DuetMargin, DuetTheme } from "../../common-types";
+import { Country } from "../../data/countries";
+import { DuetLangObject } from "../../utils/language-utils";
+export type DuetPhoneInputEvent = {
+    originalEvent?: Event;
+    component: "duet-phone-input";
+    value: string;
+    countryCode?: string;
+};
+export declare class DuetPhoneInput implements ThemeableComponent, A11yComponent {
+    private duetInputElement;
+    private countryCodeButton;
+    private countryCodePopup;
+    private countriesToList;
+    private countryFlagCDNUrl;
+    private inputId;
+    private buttonAriaLabel;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    language: DuetLanguage;
+    currentCountry: Country | "error";
+    /**
+     * Theme of the input.
+     */
+    theme: DuetTheme;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Expands the input to fill 100% of the container width.
+     */
+    expand: boolean;
+    /**
+     * Adds a unique identifier for the input.
+     */
+    identifier: string;
+    /**
+     * Details of the component
+     */
+    accessibleDetails: string;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    accessibleLabelledBy: string;
+    /**
+     * Aria description the button
+     */
+    accessibleDescription: string;
+    /**
+     * Indicates the id of a component that describes the input.
+     */
+    accessibleDescribedBy: string;
+    /**
+     * Makes the phone input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    disabled: boolean;
+    /**
+     * Set whether the input is required or not. Please note that this is required for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    required: boolean;
+    /**
+     * The phone input itself contains a comprehensive list of countries and their telephone country codes and it is
+     * advisable to hold to that. There may be situations where the set of possible country codes is narrowed down: e.g.
+     * if we have established that the person giving their details has a Nordic phone number, then we can give a narrowed
+     * down list. Do not make unjustified assumptions: e.g. a Finnish company may well have employees in Afganistan or
+     * Bhutan. List of countries can be given either as array of ISO 3166-1 alpha-2 codes or array of objects with keys:
+     * en, fi, sv, isoCode (two uppercase letters), telephoneCountryCode (one to three digits), or JSON array string of
+     * either two.
+     */
+    get countries(): Country[] | string[] | string;
+    set countries(countriesProp: Country[] | string[] | string);
+    /**
+     * Defaults for Label
+     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+     */
+    labelDefaults: DuetLangObject | string;
+    /**
+     * Label for the number input.
+     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+     */
+    label: string;
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    labelHidden: boolean;
+    /**
+     * Caption (underneath label) that can be set as a way of adding extra information
+     */
+    caption: string;
+    /**
+     * Name of the input.
+     */
+    name: string;
+    /**
+     * Display the input in error state along with an error message.
+     */
+    error: string;
+    /**
+     * Tooltip to display next to the label of the input.
+     */
+    tooltip: string;
+    /**
+     * Use maxlength to specify the maximum length of the value that can be entered.
+     */
+    maxlength: number;
+    /**
+     * Use minlength to specify the minimum length of the value that can be entered.
+     */
+    minlength: number;
+    /**
+     * Value of the input.
+     */
+    get value(): string;
+    set value(val: string);
+    /**
+     * If the value is set above before the component has rendered, the ref to duetInputElement has not yet been set.
+     * In these cases we set the value to this.pendingValue and after the first render pass it on to this.duetInputElement.
+     */
+    private pendingValue;
+    /**
+     * This is a proxy for the enclosed native inputs validity
+     */
+    get validity(): ValidityState;
+    /**
+     * Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes.
+     * @default ["FI", "SE"]
+     */
+    listFirst: string | string[];
+    /**
+     * Emitted when the value has changed.
+     */
+    duetChange: EventEmitter<DuetPhoneInputEvent>;
+    /**
+     * Emitted when a keyboard input has ocurred.
+     */
+    duetInput: EventEmitter<DuetPhoneInputEvent>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    duetBlur: EventEmitter<DuetPhoneInputEvent>;
+    /**
+     * Emitted when the input has focus.
+     */
+    duetFocus: EventEmitter<DuetPhoneInputEvent>;
+    /**t
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Sets focus on the contained input element, use this instead of the native `input.focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    private setListFirstCountries;
+    private handleFocus;
+    private handleChange;
+    private handleBlur;
+    private handleInput;
+    private handleCountryCodeSelectorOpen;
+    private handleCountryCodeSelectorSelect;
+    private setInputCountryCode;
+    private findCountryCode;
+    private findCountryForCode;
+    private renderFlag;
+    private getFlagForButton;
+    render(): any;
+}

package/lib/types/components/duet-popup-menu/duet-popup-menu.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { FocusableComponent, OpenerComponent, ThemeableComponent } from "../../common";
-import { DuetTheme } from "../../common-types";
+import { DuetLanguage, DuetTheme } from "../../common-types";
 export type DuetPopupMenuEvent = {
     open: boolean;
     component: "duet-popup-menu";
@@ -9,8 +9,12 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     private teleport;
     private menuElement;
     private openButton;
-    private _controller?;
     private autoUpdateCleanup;
+    private filterInput?;
+    private filterLabel;
+    private filterResultCountLabel;
+    private disconnectController;
+    private eventListenerController;
     /**
      * Reference to host HTML element.
      */
@@ -18,6 +22,8 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     open: boolean;
     menuY: number;
     menuX: number;
+    filterResultCount: number;
+    language: DuetLanguage;
     /**
      * Adds accessible label for the menu that is only presented for users of assistive technologies.
      * A popup menu should always have an accessible label that describes the popup's function.
@@ -39,8 +45,7 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
      * the component automatically sets the click event listener to open and close the popup-menu.
      */
-    get controller(): string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
-    set controller(value: string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent));
+    controller: string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent);
     /**
      * Alias for property controller.
      */
@@ -52,7 +57,7 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      */
     placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
     /**
-     * Force placement.
+     * Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute.
      */
     forcePlacement: boolean;
     /**
@@ -83,6 +88,10 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      * Limit the amount of visible items in Popup Menu before showing a scroll bar.
      */
     scrollLimit: number;
+    /**
+     * Show input where user can type to filter popup-menu items to those that have a match in value or text content
+     */
+    showFilterInput: boolean;
     /**
      * Emitted when the popup menu is opened or closed.
      */
@@ -117,11 +126,16 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      */
     toggle(): Promise<void>;
     handleOpenChange(newValue: any, oldValue: any): void;
+    handleControllerChange(newValue: any, oldValue: any): void;
     private setOpenButton;
     private openButtonEventListener;
     private updatePlacement;
     private get itemElements();
+    private getAllPrecedingMatchingSiblings;
     private get popupMenuStyleHeight();
     private getFocusedItemIndex;
+    private getNonFilteredItems;
+    private filterItems;
+    private handleKeyDownOnFilter;
     render(): any;
 }

package/lib/types/components/duet-popup-menu-item/duet-popup-menu-item.d.ts

@@ -9,6 +9,7 @@ export type DuetPopupMenuItemEvent = {
 export declare class DuetPopupMenuItem implements ThemeableComponent {
     focus: boolean;
     private itemElement;
+    private isSafariBrowser;
     /**
      * Reference to host HTML element.
      */

package/lib/types/components/duet-radio-group/duet-radio-group.d.ts

@@ -67,6 +67,7 @@ export declare class DuetRadioGroup implements ThemeableComponent {
      * Determines, whether the control is disabled or not.
      */
     disabled: boolean;
+    removeDisabledAttributeWhenFalse(): void;
     /**
      * Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well.
      */

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

@@ -42,6 +42,10 @@ export declare class DuetScrollable implements ThemeableComponent {
      * Vertical alignment of the previous and forward buttons. Defaults to center.
      */
     buttonAlignment: "top" | "center" | "bottom";
+    /**
+     * @internal
+     */
+    buttonPosition: "absolute" | "relative";
     /**
      * Center the scrollable list. Defaults to false.
      */
@@ -51,11 +55,20 @@ export declare class DuetScrollable implements ThemeableComponent {
      * overflowing elements, such as shadows or outlines.
      */
     padding: DuetOverflowPadding;
+    /**
+     * @internal
+     */
+    gap: "none" | "large";
     /**
      * Selected element
      */
     selected: number;
     watchPropHandler(newValue: number): void;
+    /**
+     * Enables stretch mode for tab groups
+     * @internal
+     */
+    stretch: boolean;
     /**
      * Component lifecycle events.
      */
@@ -68,6 +81,10 @@ export declare class DuetScrollable implements ThemeableComponent {
     private getScrollPaneElements;
     /**
      * Check if scrolling is needed.
+     *
+     * @param element - The element to check.
+     * @param threshold - The threshold to allow content to be slightly wider before showing buttons.
+     *                    Defaults to half of the overlay width, since gradient is 10px wide with 50/50 split.
      */
     private checkScrollingNeeded;
     private getLastVisibleElement;
@@ -77,7 +94,7 @@ export declare class DuetScrollable implements ThemeableComponent {
     private scrollLeft;
     private scrollRight;
     private collapsedOnClick;
-    private renderFadeOverlay;
+    private getOverlayWidth;
     private renderButton;
     /**
      * render() function

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

@@ -34,6 +34,7 @@ export declare class DuetSelect implements ThemeableComponent, InputComponent {
     private topCaptionPlaceholderId;
     private isCaptionVisible;
     private nativeSelect?;
+    private proxyId;
     /**
      * Reference to host HTML element.
      */
@@ -176,6 +177,7 @@ export declare class DuetSelect implements ThemeableComponent, InputComponent {
      * Component lifecycle events.
      */
     componentWillLoad(): void;
+    componentDidRender(): void;
     /**
      * Component event handling.
      */

package/lib/types/components/duet-share-chart/duet-share-chart.d.ts

@@ -0,0 +1,34 @@
+import { ThemeableComponent } from "../../common";
+import { DuetColor, DuetTheme } from "../../common-types";
+interface ShareChartItem {
+    text: string;
+    value: number;
+    color: DuetColor;
+}
+export declare class DuetShareChart implements ThemeableComponent {
+    private childObserver;
+    private itemsTotalValue;
+    private defaultColors;
+    element: HTMLElement;
+    items: ShareChartItem[];
+    /**
+     * Theme of the component.
+     */
+    theme: DuetTheme;
+    /**
+     * The string to show after each items value. When using "%" the enclosed items' values should add up to 100.
+     */
+    unit: string;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Local methods
+     */
+    private updateChartItems;
+    render(): any;
+}
+export {};

package/lib/types/components/duet-share-chart-item/duet-share-chart-item.d.ts

@@ -0,0 +1,13 @@
+import { DuetColor } from "../../common-types";
+export declare class DuetShareChartItem {
+    element: HTMLElement;
+    /**
+     * The value of the item.
+     */
+    value: number;
+    /**
+     * The color to use in the graph given as a Duet color token. If left out, the Share chart picks a color from a default set.
+     */
+    color: DuetColor;
+    render(): any;
+}

package/lib/types/components/duet-show-more/duet-show-more.d.ts

@@ -10,6 +10,7 @@ export declare class DuetShowMore implements ThemeableComponent {
     private contentElement;
     private contentId;
     private buttonId;
+    private isSafariBrowser;
     element: HTMLElement;
     buttonAriaOpen: boolean;
     /**

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

@@ -25,7 +25,8 @@ export declare class DuetSlideout implements ThemeableComponent {
     private mutationObserver;
     private teleport;
     private hasStickyHeaderSlot;
-    private _opener?;
+    private disconnectController;
+    private eventListenerController;
     /**
      * Reference to host HTML element.
      */
@@ -49,8 +50,7 @@ export declare class DuetSlideout implements ThemeableComponent {
      * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,
      * the component automatically sets the click event listener to open the slideout.
      */
-    get opener(): string | (HTMLElement & FocusableComponent & OpenerComponent);
-    set opener(value: string | (HTMLElement & FocusableComponent & OpenerComponent));
+    opener: string | (HTMLElement & FocusableComponent & OpenerComponent);
     /**
      * Alias for property opener.
      */
@@ -79,6 +79,7 @@ export declare class DuetSlideout implements ThemeableComponent {
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleOpenChange(newValue: any, oldValue: any): void;
+    handleOpenerChange(newValue: any, oldValue: any): void;
     private setOpenButton;
     private setStickHeaderStyleMutations;
     private openButtonEventListener;

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

@@ -1,5 +1,6 @@
 import { DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetLangObject } from "../../utils/language-utils";
 export declare class DuetSlideoutLink implements ThemeableComponent {
     /**
      * Own Properties.
@@ -47,10 +48,26 @@ export declare class DuetSlideoutLink implements ThemeableComponent {
      * Indicates the component is used where aria-role menuitem is expected
      */
     menuItem: boolean;
+    /**
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternalDefaults: DuetLangObject | string;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternal: string;
+    /**
+     * Forces URL to open in a new browser tab. Used together with URL prop.
+     */
+    external: boolean;
     /**
      * Component lifecycle events.
      */
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * render() function
      * Always the last one in the class.

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

@@ -2,6 +2,7 @@ import { DuetColor, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetSpinnerSize = "small" | "medium" | "large";
 export declare class DuetSpinner implements ThemeableComponent {
+    element: HTMLElement;
     /**
      * Adds accessible label for the spinner that is only shown for screen readers.
      */

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

@@ -0,0 +1,27 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+import { DuetIconSize, DuetMargin, DuetStatus } from "../../common-types";
+export declare class DuetStatusIcon implements ComponentInterface {
+    private bg;
+    private color;
+    /**
+     * Status the icon indicates
+     */
+    variation: DuetStatus;
+    /**
+     * Icon size. Entered as one of the icon size design tokens.
+     */
+    size: DuetIconSize;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Use strong background color when the icon would not otherwise stand out from the surrounding background.
+     */
+    strong: boolean;
+    private getVariation;
+    private getBg;
+    private getColor;
+    private getIcon;
+    render(): any;
+}

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { DuetMargin, DuetTheme } from "../../common-types";
+import { DuetLanguage, DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetStepClickEvent } from "../duet-step/duet-step";
 export type DuetStepChangeEvent = {
@@ -8,17 +8,19 @@ export type DuetStepChangeEvent = {
     toStep: number;
 };
 export declare class DuetStepper implements ThemeableComponent {
+    private childObserver;
     /**
      * Reference to host HTML element.
      */
     element: HTMLElement;
+    language: DuetLanguage;
     /**
      * Theme of the component.
      */
     theme: DuetTheme;
     /**
      * Format of message used to announce current step when navigating between steps.
-     * The string {current} is replaced with current the step number.
+     * The string {current} is replaced with the current step number.
      * The string {total} is replaced with the total number of steps.
      */
     accessibleLive: string;
@@ -43,6 +45,7 @@ export declare class DuetStepper implements ThemeableComponent {
     onDuetStepClick(e: CustomEvent<DuetStepClickEvent>): void;
     componentWillLoad(): void;
     connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
     private getSteps;
     private setStepFocus;
     private updateStepState;

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

@@ -1,6 +1,7 @@
 import { ThemeableComponent } from "../../common";
 import { DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
+import { IndicatorVariation } from "../duet-indicator/duet-indicator";
 export declare class DuetTab implements ThemeableComponent {
     private tabpanelElement;
     element: HTMLElement;
@@ -21,10 +22,19 @@ export declare class DuetTab implements ThemeableComponent {
      */
     selected: boolean;
     /**
+     * @deprecated Use indicator property instead.
      * Notification mark to show in the tab button. Works better with plain variation, as the dark background of
      * selected default button makes the mark less noticable.
      */
     notificationMark: "warning" | "danger";
+    /**
+     * Indicator to show in the tab button.
+     */
+    indicator: IndicatorVariation;
+    /**
+     * Provides accessible text for the Duet Indicator. If Indicator's default is sufficient this is not needed.
+     */
+    indicatorAccessibleLabel: string;
     /**
      * Defaults for AccessibleLabel
      * @default null