@duetds/components 9.4.2 → 9.5.0

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "9.4.2",
+  "version": "9.5.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -45,8 +45,8 @@
   },
   "devDependencies": {
     "@duetds/fonts": "3.0.51",
-    "@duetds/icons": "4.1.10",
-    "@duetds/tokens": "4.0.87",
+    "@duetds/icons": "4.1.11",
+    "@duetds/tokens": "4.0.88",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.23.0",
@@ -77,5 +77,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "c37331c573db87ccd2f4d6acee8eb4b61dd19043"
+  "gitHead": "23e8880af9188f1ea65c3863965f417fc3bb3748"
 }