@duetds/components 9.4.1 → 9.5.0

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

@@ -0,0 +1,156 @@
+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 _value;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Value of the input.
+     */
+    get value(): string;
+    set value(val: string);
+    /**
+     * 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;
+    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";
@@ -11,6 +11,8 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     private openButton;
     private _controller?;
     private autoUpdateCleanup;
+    private filterInput?;
+    private filterLabel;
     /**
      * Reference to host HTML element.
      */
@@ -18,6 +20,7 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     open: boolean;
     menuY: number;
     menuX: 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.
@@ -83,6 +86,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.
      */
@@ -123,5 +130,8 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     private get itemElements();
     private get popupMenuStyleHeight();
     private getFocusedItemIndex;
+    private getNonFilteredItems;
+    private filterItems;
+    private handleKeyDownOnFilter;
     render(): any;
 }

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

@@ -89,6 +89,7 @@ export declare class DuetScrollable implements ThemeableComponent {
     private scrollLeft;
     private scrollRight;
     private collapsedOnClick;
+    private getOverlayWidth;
     private renderButton;
     /**
      * render() function

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

@@ -18,6 +18,7 @@ export declare class DuetTabGroup implements ThemeableComponent {
     private mutationO?;
     private id;
     private tabsContainer;
+    private intersectionObserver;
     /**
      * Reference to host HTML element.
      */

package/lib/types/components.d.ts

@@ -44,6 +44,8 @@ import { DuetNumberInputEvent } from "./components/duet-number-input/duet-number
 import { OverlayDisplayDevice } from "./components/duet-overlay/duet-overlay";
 import { DuetPaginationPageEvent, DuetPaginationVariation } from "./components/duet-pagination/duet-pagination";
 import { DuetParagraphSize, DuetParagraphVariation, DuetParagraphWeight } from "./components/duet-paragraph/duet-paragraph";
+import { Country } from "./data/countries";
+import { DuetPhoneInputEvent } from "./components/duet-phone-input/duet-phone-input";
 import { FocusableComponent, OpenerComponent } from "./common";
 import { DuetPopupMenuEvent } from "./components/duet-popup-menu/duet-popup-menu";
 import { DuetPopupMenuItemEvent } from "./components/duet-popup-menu-item/duet-popup-menu-item";
@@ -107,6 +109,8 @@ export { DuetNumberInputEvent } from "./components/duet-number-input/duet-number
 export { OverlayDisplayDevice } from "./components/duet-overlay/duet-overlay";
 export { DuetPaginationPageEvent, DuetPaginationVariation } from "./components/duet-pagination/duet-pagination";
 export { DuetParagraphSize, DuetParagraphVariation, DuetParagraphWeight } from "./components/duet-paragraph/duet-paragraph";
+export { Country } from "./data/countries";
+export { DuetPhoneInputEvent } from "./components/duet-phone-input/duet-phone-input";
 export { FocusableComponent, OpenerComponent } from "./common";
 export { DuetPopupMenuEvent } from "./components/duet-popup-menu/duet-popup-menu";
 export { DuetPopupMenuItemEvent } from "./components/duet-popup-menu-item/duet-popup-menu-item";
@@ -1689,6 +1693,10 @@ export namespace Components {
         "user": any;
     }
     interface DuetHeading {
+        /**
+          * Adds aria-label for the heading. It is important to note that this overrides the heading's text content for screen readers. Usually the same content should be provided for all users. Use this attribute only in specisl circumstances when an accessibility specialist instructs to do so.
+         */
+        "accessibleLabel": string;
         /**
           * Enable or disable the border underneath the heading, solid will darken the border
          */
@@ -2080,7 +2088,7 @@ export namespace Components {
          */
         "value": string;
         /**
-          * Variation of button. Use "button" to render a button element next to the input. Use "revealable" to render a button that reveals the password.
+          * Variation of button. Use "button" to render a button element next to the input, "button-left" to render a button on the left edge of the input, and "revealable" to render a button that reveals the password.
          */
         "variation": DuetVariationType;
     }
@@ -3116,6 +3124,91 @@ export namespace Components {
          */
         "weight": DuetParagraphWeight;
     }
+    interface DuetPhoneInput {
+        /**
+          * Indicates the id of a component that describes the input.
+         */
+        "accessibleDescribedBy": string;
+        /**
+          * Aria description the button
+         */
+        "accessibleDescription": string;
+        /**
+          * Details of the component
+         */
+        "accessibleDetails": string;
+        /**
+          * String of id's that indicate alternative labels elements
+         */
+        "accessibleLabelledBy": string;
+        /**
+          * 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.
+         */
+        "countries": string | string[] | Country[];
+        /**
+          * 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;
+        /**
+          * Display the input in error state along with an error message.
+         */
+        "error": string;
+        /**
+          * Expands the input to fill 100% of the container width.
+         */
+        "expand": boolean;
+        /**
+          * Adds a unique identifier for the input.
+         */
+        "identifier": string;
+        /**
+          * Label for the number input.
+          * @default {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        "label": string;
+        /**
+          * Defaults for Label
+          * @default {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        "labelDefaults": DuetLangObject | string;
+        /**
+          * Visually hide the label, but still show it to screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * 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[];
+        /**
+          * Controls the margin of the component.
+         */
+        "margin": DuetMargin;
+        /**
+          * Name of the input.
+         */
+        "name": string;
+        /**
+          * 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;
+        /**
+          * Sets focus on the contained input element, use this instead of the native `input.focus()`.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * Theme of the input.
+         */
+        "theme": DuetTheme;
+        /**
+          * Tooltip to display next to the label of the input.
+         */
+        "tooltip": string;
+        /**
+          * Value of the input.
+         */
+        "value": string;
+    }
     interface DuetPopupMenu {
         /**
           * 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.
@@ -3188,6 +3281,10 @@ export namespace Components {
           * Show.
          */
         "show": () => Promise<void>;
+        /**
+          * Show input where user can type to filter popup-menu items to those that have a match in value or text content
+         */
+        "showFilterInput": boolean;
         "skipTeleport": boolean;
         /**
           * Theme.
@@ -3916,6 +4013,16 @@ export namespace Components {
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
          */
         "accessibleLabel": 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;
+        /**
+          * Defaults for accessibleLabelExternal
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternalDefaults": DuetLangObject | string;
         /**
           * Active
          */
@@ -3924,6 +4031,10 @@ export namespace Components {
           * Caret
          */
         "caret": boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external": boolean;
         /**
           * Href
          */
@@ -5330,6 +5441,10 @@ export interface DuetPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDuetPaginationElement;
 }
+export interface DuetPhoneInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDuetPhoneInputElement;
+}
 export interface DuetPopupMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDuetPopupMenuElement;
@@ -6007,6 +6122,26 @@ declare global {
         prototype: HTMLDuetParagraphElement;
         new (): HTMLDuetParagraphElement;
     };
+    interface HTMLDuetPhoneInputElementEventMap {
+        "duetChange": DuetPhoneInputEvent;
+        "duetInput": DuetPhoneInputEvent;
+        "duetBlur": DuetPhoneInputEvent;
+        "duetFocus": DuetPhoneInputEvent;
+    }
+    interface HTMLDuetPhoneInputElement extends Components.DuetPhoneInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDuetPhoneInputElementEventMap>(type: K, listener: (this: HTMLDuetPhoneInputElement, ev: DuetPhoneInputCustomEvent<HTMLDuetPhoneInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDuetPhoneInputElementEventMap>(type: K, listener: (this: HTMLDuetPhoneInputElement, ev: DuetPhoneInputCustomEvent<HTMLDuetPhoneInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDuetPhoneInputElement: {
+        prototype: HTMLDuetPhoneInputElement;
+        new (): HTMLDuetPhoneInputElement;
+    };
     interface HTMLDuetPopupMenuElementEventMap {
         "duetToggle": DuetPopupMenuEvent;
     }
@@ -6525,6 +6660,7 @@ declare global {
         "duet-page-heading": HTMLDuetPageHeadingElement;
         "duet-pagination": HTMLDuetPaginationElement;
         "duet-paragraph": HTMLDuetParagraphElement;
+        "duet-phone-input": HTMLDuetPhoneInputElement;
         "duet-popup-menu": HTMLDuetPopupMenuElement;
         "duet-popup-menu-item": HTMLDuetPopupMenuItemElement;
         "duet-progress": HTMLDuetProgressElement;
@@ -8220,6 +8356,10 @@ declare namespace LocalJSX {
         "user"?: any;
     }
     interface DuetHeading {
+        /**
+          * Adds aria-label for the heading. It is important to note that this overrides the heading's text content for screen readers. Usually the same content should be provided for all users. Use this attribute only in specisl circumstances when an accessibility specialist instructs to do so.
+         */
+        "accessibleLabel"?: string;
         /**
           * Enable or disable the border underneath the heading, solid will darken the border
          */
@@ -8619,7 +8759,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Variation of button. Use "button" to render a button element next to the input. Use "revealable" to render a button that reveals the password.
+          * Variation of button. Use "button" to render a button element next to the input, "button-left" to render a button on the left edge of the input, and "revealable" to render a button that reveals the password.
          */
         "variation"?: DuetVariationType;
     }
@@ -9631,6 +9771,103 @@ declare namespace LocalJSX {
          */
         "weight"?: DuetParagraphWeight;
     }
+    interface DuetPhoneInput {
+        /**
+          * Indicates the id of a component that describes the input.
+         */
+        "accessibleDescribedBy"?: string;
+        /**
+          * Aria description the button
+         */
+        "accessibleDescription"?: string;
+        /**
+          * Details of the component
+         */
+        "accessibleDetails"?: string;
+        /**
+          * String of id's that indicate alternative labels elements
+         */
+        "accessibleLabelledBy"?: string;
+        /**
+          * 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.
+         */
+        "countries"?: string | string[] | Country[];
+        /**
+          * 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;
+        /**
+          * Display the input in error state along with an error message.
+         */
+        "error"?: string;
+        /**
+          * Expands the input to fill 100% of the container width.
+         */
+        "expand"?: boolean;
+        /**
+          * Adds a unique identifier for the input.
+         */
+        "identifier"?: string;
+        /**
+          * Label for the number input.
+          * @default {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        "label"?: string;
+        /**
+          * Defaults for Label
+          * @default {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        "labelDefaults"?: DuetLangObject | string;
+        /**
+          * Visually hide the label, but still show it to screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * 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[];
+        /**
+          * Controls the margin of the component.
+         */
+        "margin"?: DuetMargin;
+        /**
+          * Name of the input.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onDuetBlur"?: (event: DuetPhoneInputCustomEvent<DuetPhoneInputEvent>) => void;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onDuetChange"?: (event: DuetPhoneInputCustomEvent<DuetPhoneInputEvent>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onDuetFocus"?: (event: DuetPhoneInputCustomEvent<DuetPhoneInputEvent>) => void;
+        /**
+          * Emitted when a keyboard input has ocurred.
+         */
+        "onDuetInput"?: (event: DuetPhoneInputCustomEvent<DuetPhoneInputEvent>) => void;
+        /**
+          * 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;
+        /**
+          * Theme of the input.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * Tooltip to display next to the label of the input.
+         */
+        "tooltip"?: string;
+        /**
+          * Value of the input.
+         */
+        "value"?: string;
+    }
     interface DuetPopupMenu {
         /**
           * 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.
@@ -9695,6 +9932,10 @@ declare namespace LocalJSX {
           * 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;
         /**
           * Theme.
          */
@@ -10424,6 +10665,16 @@ declare namespace LocalJSX {
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
          */
         "accessibleLabel"?: 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;
+        /**
+          * Defaults for accessibleLabelExternal
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternalDefaults"?: DuetLangObject | string;
         /**
           * Active
          */
@@ -10432,6 +10683,10 @@ declare namespace LocalJSX {
           * Caret
          */
         "caret"?: boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external"?: boolean;
         /**
           * Href
          */
@@ -11798,6 +12053,7 @@ declare namespace LocalJSX {
         "duet-page-heading": DuetPageHeading;
         "duet-pagination": DuetPagination;
         "duet-paragraph": DuetParagraph;
+        "duet-phone-input": DuetPhoneInput;
         "duet-popup-menu": DuetPopupMenu;
         "duet-popup-menu-item": DuetPopupMenuItem;
         "duet-progress": DuetProgress;
@@ -11905,6 +12161,7 @@ declare module "@stencil/core" {
             "duet-page-heading": LocalJSX.DuetPageHeading & JSXBase.HTMLAttributes<HTMLDuetPageHeadingElement>;
             "duet-pagination": LocalJSX.DuetPagination & JSXBase.HTMLAttributes<HTMLDuetPaginationElement>;
             "duet-paragraph": LocalJSX.DuetParagraph & JSXBase.HTMLAttributes<HTMLDuetParagraphElement>;
+            "duet-phone-input": LocalJSX.DuetPhoneInput & JSXBase.HTMLAttributes<HTMLDuetPhoneInputElement>;
             "duet-popup-menu": LocalJSX.DuetPopupMenu & JSXBase.HTMLAttributes<HTMLDuetPopupMenuElement>;
             "duet-popup-menu-item": LocalJSX.DuetPopupMenuItem & JSXBase.HTMLAttributes<HTMLDuetPopupMenuItemElement>;
             "duet-progress": LocalJSX.DuetProgress & JSXBase.HTMLAttributes<HTMLDuetProgressElement>;

package/lib/types/data/countries.d.ts

@@ -0,0 +1,22 @@
+export type Country = {
+    en: string;
+    fi: string;
+    sv: string;
+    isoCode: string;
+    telephoneCountryCode?: string;
+};
+declare const countries: Record<string, Country>;
+export declare const primaryCountriesForSharedCountryCodes: {
+    "1": string;
+    "7": string;
+    "39": string;
+    "44": string;
+    "47": string;
+    "61": string;
+    "212": string;
+    "262": string;
+    "358": string;
+    "590": string;
+    "599": string;
+};
+export default countries;