@duetds/components 9.2.0 → 9.2.1

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

@@ -1,5 +1,6 @@
 import { DuetIconName, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetLangObject } from "../../utils/language-utils";
 export declare class DuetMenuBarItem implements ThemeableComponent {
     /**
      * Own Properties.
@@ -45,10 +46,26 @@ export declare class DuetMenuBarItem implements ThemeableComponent {
      * Use this property to add an aria-haspopup attribute to a button.
      */
     accessiblePopup: string;
+    /**
+     * 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;
     /**
      * Sets focus. Use this method instead of the global focus().
      */

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

@@ -66,6 +66,10 @@ export declare class DuetScrollable implements ThemeableComponent {
      * Private methods.
      */
     private getScrollPaneElements;
+    /**
+     * Check if scrolling is needed.
+     */
+    private checkScrollingNeeded;
     private getLastVisibleElement;
     private getFirstVisibleElement;
     private updateScrollButtons;

package/lib/types/components/duet-submenu-bar-item/duet-submenu-bar-item.d.ts

@@ -1,5 +1,6 @@
 import { DuetIconName, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetLangObject } from "../../utils/language-utils";
 export declare class DuetSubmenuBarItem implements ThemeableComponent {
     /**
      * Own Properties.
@@ -45,10 +46,26 @@ export declare class DuetSubmenuBarItem implements ThemeableComponent {
      * Use this property to add an aria-haspopup attribute to a button.
      */
     accessiblePopup: string;
+    /**
+     * 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;
     private handleEscape;
     /**
      * Sets focus. Use this method instead of the global focus().

package/lib/types/components/duet-toolbar-item/duet-toolbar-item.d.ts

@@ -1,5 +1,6 @@
 import { DuetIconName, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetLangObject } from "../../utils/language-utils";
 export declare class DuetToolbarItem implements ThemeableComponent {
     /**
      * Own Properties.
@@ -49,10 +50,26 @@ export declare class DuetToolbarItem implements ThemeableComponent {
      * Use this property to add an aria-haspopup attribute to a button.
      */
     accessiblePopup: string;
+    /**
+     * 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;
     /**
      * Sets focus. Use this method instead of the global focus().
      */

package/lib/types/components.d.ts

@@ -768,7 +768,7 @@ export namespace Components {
          */
         "accessibleExpanded": 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.
+          * 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.
          */
         "accessibleLabel": string;
         /**
@@ -799,6 +799,15 @@ export namespace Components {
           * Id of the DuetPopupMenu that is controlled by the chip.
          */
         "popup": string;
+        /**
+          * Removes input chip. Use this method instead of the native remove() so the component can emit appropriate event
+         */
+        "removeChip": () => Promise<void>;
+        /**
+          * Selected state of the input chip. Deleting the input chip with backspace key should be done only for a selected chip. If a chip is not selected, backspace key should select it.
+         */
+        "selected": boolean;
+        "setDeleteFocus": () => Promise<void>;
         /**
           * Sets focus. Use this method instead of the global focus().
          */
@@ -816,7 +825,7 @@ export namespace Components {
          */
         "value": 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. WARNING: Input variation is still work-in-progress and subject to change.
+          * 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.
          */
         "variation": DuetChipVariation;
     }
@@ -2431,6 +2440,16 @@ export namespace Components {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link 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;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -2439,6 +2458,10 @@ export namespace Components {
           * Active
          */
         "active": boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external": boolean;
         /**
           * Left icon.
          */
@@ -4087,6 +4110,16 @@ export namespace Components {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link 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;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -4095,6 +4128,10 @@ export namespace Components {
           * Active
          */
         "active": boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external": boolean;
         /**
           * Left icon.
          */
@@ -4583,6 +4620,16 @@ export namespace Components {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link 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;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -4591,6 +4638,10 @@ export namespace Components {
           * Active
          */
         "active": boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external": boolean;
         /**
           * Left icon.
          */
@@ -7080,7 +7131,7 @@ declare namespace LocalJSX {
          */
         "accessibleExpanded"?: 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.
+          * 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.
          */
         "accessibleLabel"?: string;
         /**
@@ -7140,7 +7191,7 @@ declare namespace LocalJSX {
          */
         "value"?: 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. WARNING: Input variation is still work-in-progress and subject to change.
+          * 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.
          */
         "variation"?: DuetChipVariation;
     }
@@ -8827,6 +8878,16 @@ declare namespace LocalJSX {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link 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;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -8835,6 +8896,10 @@ declare namespace LocalJSX {
           * Active
          */
         "active"?: boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external"?: boolean;
         /**
           * Left icon.
          */
@@ -10451,6 +10516,16 @@ declare namespace LocalJSX {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link 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;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -10459,6 +10534,10 @@ declare namespace LocalJSX {
           * Active
          */
         "active"?: boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external"?: boolean;
         /**
           * Left icon.
          */
@@ -10950,6 +11029,16 @@ declare namespace LocalJSX {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link 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;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -10958,6 +11047,10 @@ declare namespace LocalJSX {
           * Active
          */
         "active"?: boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external"?: boolean;
         /**
           * Left icon.
          */

package/lib/types/utils/a11y-utils.d.ts

@@ -0,0 +1,11 @@
+import { DuetLangObject } from "./language-utils";
+interface A11yLabel {
+    element: HTMLElement;
+    accessibleLabel?: string;
+    external?: boolean;
+    accessibleLabelExternal?: DuetLangObject | string;
+    accessibleLabelDownload?: DuetLangObject | string;
+    download?: string;
+}
+export declare function getAccessibleLinkLabel(component: A11yLabel): string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "9.2.0",
+  "version": "9.2.1",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@duetds/fonts": "3.0.51",
-    "@duetds/icons": "4.0.69",
-    "@duetds/tokens": "4.0.71",
+    "@duetds/icons": "4.0.70",
+    "@duetds/tokens": "4.0.72",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.22.2",
@@ -76,5 +76,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "6a63f894ac27d7a64f217f1d8804a40086feeba9"
+  "gitHead": "be3ffa9bfd70637a4d254c820d651a7c40023e00"
 }