@duetds/components 10.3.1 → 10.5.0

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

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

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

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

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

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

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

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

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

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

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

@@ -215,11 +215,6 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
     private handleChange;
     private handleBlur;
     private handleFocus;
-    /**
-     * When the character limit has been reached and key is pressed, switch the
-     * visually hidden label temprorily to empty so it is re-read.
-     */
-    private handleKeyDown;
     private getDescribedBy;
     /**
      * Sets focus on the specified `duet-textarea`. Use this method instead of the global

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

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

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

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

package/lib/types/components.d.ts

@@ -24,7 +24,7 @@ import { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-co
 import { DuetDatePickerChangeEvent, DuetDatePickerDirection, DuetDatePickerFocusEvent } from "./components/duet-date-picker/duet-date-picker";
 import { DuetDividerMargin } from "./components/duet-divider/duet-divider";
 import { DuetEditableTableActions, DuetEditableTableColumns, DuetEditableTableRows, DuetTableMenuEvent, DuetTableToggleEvent } from "./components/duet-editable-table/duet-editable-table";
-import { DuetEmptyStateSize } from "./components/duet-empty-state/duet-empty-state";
+import { DuetEmptyStatePadding, DuetEmptyStateSize, DuetEmptyStateStatus } from "./components/duet-empty-state/duet-empty-state";
 import { DuetFileChooserEvent } from "./components/duet-file-chooser/duet-file-chooser";
 import { DuetFooterAnalyticsEvent, DuetFooterChangeEvent, DuetFooterVariation } from "./components/duet-footer/duet-footer";
 import { DuetGridAlignment, DuetGridDistribution, DuetGridMobileAlignment } from "./components/duet-grid/duet-grid";
@@ -92,7 +92,7 @@ export { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-co
 export { DuetDatePickerChangeEvent, DuetDatePickerDirection, DuetDatePickerFocusEvent } from "./components/duet-date-picker/duet-date-picker";
 export { DuetDividerMargin } from "./components/duet-divider/duet-divider";
 export { DuetEditableTableActions, DuetEditableTableColumns, DuetEditableTableRows, DuetTableMenuEvent, DuetTableToggleEvent } from "./components/duet-editable-table/duet-editable-table";
-export { DuetEmptyStateSize } from "./components/duet-empty-state/duet-empty-state";
+export { DuetEmptyStatePadding, DuetEmptyStateSize, DuetEmptyStateStatus } from "./components/duet-empty-state/duet-empty-state";
 export { DuetFileChooserEvent } from "./components/duet-file-chooser/duet-file-chooser";
 export { DuetFooterAnalyticsEvent, DuetFooterChangeEvent, DuetFooterVariation } from "./components/duet-footer/duet-footer";
 export { DuetGridAlignment, DuetGridDistribution, DuetGridMobileAlignment } from "./components/duet-grid/duet-grid";
@@ -335,6 +335,11 @@ export namespace Components {
           * @default ""
          */
         "theme": DuetTheme;
+        /**
+          * Giving tooltip text makes the badge act as tooltip button. The badge's text content will be used as the tooltips accessible-about-label - if you want other accessible label, use the tooltip slot instead of this attribute.
+          * @default ""
+         */
+        "tooltip": string;
         /**
           * Style variation of the badge.
           * @default "default"
@@ -1643,10 +1648,25 @@ export namespace Components {
     }
     interface DuetEmptyState {
         /**
-          * Icon shown in the empty state component.
+          * Set background to "none" when no background is wanted, e.g. inside a table.
+          * @default "auto"
+         */
+        "background": "auto" | "none";
+        /**
+          * Heading to show above the component content
+          * @default ""
+         */
+        "heading": string;
+        /**
+          * Icon shown in the empty state component. For warning variation a status icon is always used. Use value "none" for no icon at all.
           * @default "messaging-question"
          */
-        "icon": DuetIconName;
+        "icon": DuetIconName | "none";
+        /**
+          * Padding of the empty state component
+          * @default "medium"
+         */
+        "padding": DuetEmptyStatePadding;
         /**
           * The size of the empty state message.
           * @default "medium"
@@ -1657,6 +1677,11 @@ export namespace Components {
           * @default ""
          */
         "theme": DuetTheme;
+        /**
+          * The variation of the empty state component. Use "warning" when the empty state is due to an error.
+          * @default "default"
+         */
+        "variation": DuetEmptyStateStatus;
     }
     interface DuetFieldset {
         /**
@@ -1810,6 +1835,11 @@ export namespace Components {
     | "two-columns"
     | "three-columns"
     | "button-grid";
+        /**
+          * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first is row-gap and the second column-gap. Does not apply to button-grid.
+          * @default "auto"
+         */
+        "gridTemplateGap": "auto" | "none" | "auto none" | "none auto";
         /**
           * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
           * @default ""
@@ -2007,6 +2037,14 @@ export namespace Components {
           * @default "auto"
          */
         "margin": DuetMargin;
+        /**
+          * Text that is included inside the heading tag, but is rendered as smaller line below the slotted heading text. Use only with pages' main heading.
+         */
+        "postHeading": string;
+        /**
+          * Text that is included inside the heading tag, but is rendered as smaller line above the slotted heading text. Use only with pages' main heading.
+         */
+        "preHeading": string;
         /**
           * Theme of the heading.
           * @default ""
@@ -2250,7 +2288,7 @@ export namespace Components {
          */
         "accessibleActiveDescendant": string;
         /**
-          * Indicates what kind of user input completion suggestions are provided.
+          * Indicates in what mode user input completion suggestions are provided. Valid values are: "none", "inline", "list", "both"
          */
         "accessibleAutocomplete": string;
         /**
@@ -2305,7 +2343,7 @@ export namespace Components {
          */
         "addChip": (chip: HTMLDuetChipElement) => Promise<void>;
         /**
-          * Enable or disable automatic completion by the browser
+          * Set the type of automatic completion by the browser. If possible use the standard tokens like "name", "given-name", "family-name", "postal-code", "street-address" etc. The component adds automatically "tel" and "email". If you must disable autocomplete use "off" (but avoid disabling unless absolutely necessary).
           * @default "on"
          */
         "autoComplete": string;
@@ -2365,6 +2403,14 @@ export namespace Components {
           * @default false
          */
         "expand": boolean;
+        /**
+          * Text to show before the start (left) of the input's editable area. Also used in accessible labelling.
+         */
+        "fieldPrefix": string;
+        /**
+          * Text to show after the end (right) of the input's editable area. Also used in accessible labelling.
+         */
+        "fieldSuffix": string;
         /**
           * Get all chips from the input.
          */
@@ -2414,10 +2460,18 @@ export namespace Components {
           * @default "auto"
          */
         "margin": DuetMargin;
+        /**
+          * When max is set and getting validity, the value of the input is interpreted as a number - possible comma as decimal seprator changed to dot and the value then parsed as float - and compared to max and validity set accordingly. This simulates the behavior of max attribute of input[type=number].
+         */
+        "max": number;
         /**
           * Use maxlength to specify the maximum length of the value that can be entered.
          */
         "maxlength": number;
+        /**
+          * When min is set and getting validity, the value of the input is interpreted as a number - possible comma as decimal seprator changed to dot and the value then parsed as float - and compared to min and validity set accordingly. This simulates the behavior of min attribute of input[type=number].
+         */
+        "min": number;
         /**
           * Use minlength to specify the minimum length of the value that can be entered.
          */
@@ -2431,7 +2485,7 @@ export namespace Components {
          */
         "nativeInputElement": HTMLElement;
         /**
-          * Enable numeric keyboard for the input.
+          * Enable numeric keyboard for the input. Note that on iOS the numeric keyboard does not contain minus.
           * @default false
          */
         "numericKeyboard": boolean;
@@ -3508,7 +3562,7 @@ export namespace Components {
          */
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
-          * Step amount.
+          * Step amount. Note that decimal values as step (e.g. 0.01) may produce unexpected results and thus are strongly discouraged (but for backwards compatibility still accepted).
           * @default 5000
          */
         "step": number;
@@ -3580,6 +3634,11 @@ export namespace Components {
           * @default ""
          */
         "icon": DuetIconName;
+        /**
+          * With LähiTapiola theme the icon can have secondary background instead of default. This has no effect on Turva theme.
+          * @default "default"
+         */
+        "iconBackground": "default" | "secondary";
         /**
           * Layout. Values narrow and fluid are deprecated.
           * @default "narrow"
@@ -3593,6 +3652,11 @@ export namespace Components {
           * Total steps amount in progress indicator. To render a progress indicator both progressTotalSteps and progressCurrentStep must be given
          */
         "progressTotalSteps": number;
+        /**
+          * LähiTapiola theme includes a brand shape at the top by default. Set to "none" to omit it. Has no effect for Turva.
+          * @default "auto"
+         */
+        "shape": "auto" | "none";
         /**
           * Theme of the hero area.
           * @default ""
@@ -5926,6 +5990,7 @@ export namespace Components {
           * @default false
          */
         "active": boolean;
+        "badgeElement": HTMLDuetBadgeElement;
         /**
           * Adjust the responsive breakpoint where tooltip starts opening towards left.
           * @default "medium"
@@ -5971,6 +6036,10 @@ export namespace Components {
     interface DuetTooltipButton {
         "accessibleLabel": string;
         "active": boolean;
+        /**
+          * @default false
+         */
+        "inBadge": boolean;
         /**
           * @default ""
          */
@@ -8003,6 +8072,11 @@ declare namespace LocalJSX {
           * @default ""
          */
         "theme"?: DuetTheme;
+        /**
+          * Giving tooltip text makes the badge act as tooltip button. The badge's text content will be used as the tooltips accessible-about-label - if you want other accessible label, use the tooltip slot instead of this attribute.
+          * @default ""
+         */
+        "tooltip"?: string;
         /**
           * Style variation of the badge.
           * @default "default"
@@ -9340,10 +9414,25 @@ declare namespace LocalJSX {
     }
     interface DuetEmptyState {
         /**
-          * Icon shown in the empty state component.
+          * Set background to "none" when no background is wanted, e.g. inside a table.
+          * @default "auto"
+         */
+        "background"?: "auto" | "none";
+        /**
+          * Heading to show above the component content
+          * @default ""
+         */
+        "heading"?: string;
+        /**
+          * Icon shown in the empty state component. For warning variation a status icon is always used. Use value "none" for no icon at all.
           * @default "messaging-question"
          */
-        "icon"?: DuetIconName;
+        "icon"?: DuetIconName | "none";
+        /**
+          * Padding of the empty state component
+          * @default "medium"
+         */
+        "padding"?: DuetEmptyStatePadding;
         /**
           * The size of the empty state message.
           * @default "medium"
@@ -9354,6 +9443,11 @@ declare namespace LocalJSX {
           * @default ""
          */
         "theme"?: DuetTheme;
+        /**
+          * The variation of the empty state component. Use "warning" when the empty state is due to an error.
+          * @default "default"
+         */
+        "variation"?: DuetEmptyStateStatus;
     }
     interface DuetFieldset {
         /**
@@ -9523,6 +9617,11 @@ declare namespace LocalJSX {
     | "two-columns"
     | "three-columns"
     | "button-grid";
+        /**
+          * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first is row-gap and the second column-gap. Does not apply to button-grid.
+          * @default "auto"
+         */
+        "gridTemplateGap"?: "auto" | "none" | "auto none" | "none auto";
         /**
           * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
           * @default ""
@@ -9748,6 +9847,14 @@ declare namespace LocalJSX {
           * @default "auto"
          */
         "margin"?: DuetMargin;
+        /**
+          * Text that is included inside the heading tag, but is rendered as smaller line below the slotted heading text. Use only with pages' main heading.
+         */
+        "postHeading"?: string;
+        /**
+          * Text that is included inside the heading tag, but is rendered as smaller line above the slotted heading text. Use only with pages' main heading.
+         */
+        "preHeading"?: string;
         /**
           * Theme of the heading.
           * @default ""
@@ -9991,7 +10098,7 @@ declare namespace LocalJSX {
          */
         "accessibleActiveDescendant"?: string;
         /**
-          * Indicates what kind of user input completion suggestions are provided.
+          * Indicates in what mode user input completion suggestions are provided. Valid values are: "none", "inline", "list", "both"
          */
         "accessibleAutocomplete"?: string;
         /**
@@ -10042,7 +10149,7 @@ declare namespace LocalJSX {
          */
         "accessiblePopup"?: string;
         /**
-          * Enable or disable automatic completion by the browser
+          * Set the type of automatic completion by the browser. If possible use the standard tokens like "name", "given-name", "family-name", "postal-code", "street-address" etc. The component adds automatically "tel" and "email". If you must disable autocomplete use "off" (but avoid disabling unless absolutely necessary).
           * @default "on"
          */
         "autoComplete"?: string;
@@ -10090,6 +10197,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "expand"?: boolean;
+        /**
+          * Text to show before the start (left) of the input's editable area. Also used in accessible labelling.
+         */
+        "fieldPrefix"?: string;
+        /**
+          * Text to show after the end (right) of the input's editable area. Also used in accessible labelling.
+         */
+        "fieldSuffix"?: string;
         /**
           * Icon to display on the right side (from Duet’s icons). Example: "form-location"
          */
@@ -10131,10 +10246,18 @@ declare namespace LocalJSX {
           * @default "auto"
          */
         "margin"?: DuetMargin;
+        /**
+          * When max is set and getting validity, the value of the input is interpreted as a number - possible comma as decimal seprator changed to dot and the value then parsed as float - and compared to max and validity set accordingly. This simulates the behavior of max attribute of input[type=number].
+         */
+        "max"?: number;
         /**
           * Use maxlength to specify the maximum length of the value that can be entered.
          */
         "maxlength"?: number;
+        /**
+          * When min is set and getting validity, the value of the input is interpreted as a number - possible comma as decimal seprator changed to dot and the value then parsed as float - and compared to min and validity set accordingly. This simulates the behavior of min attribute of input[type=number].
+         */
+        "min"?: number;
         /**
           * Use minlength to specify the minimum length of the value that can be entered.
          */
@@ -10144,7 +10267,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Enable numeric keyboard for the input.
+          * Enable numeric keyboard for the input. Note that on iOS the numeric keyboard does not contain minus.
           * @default false
          */
         "numericKeyboard"?: boolean;
@@ -11191,7 +11314,7 @@ declare namespace LocalJSX {
          */
         "rounding"?: boolean;
         /**
-          * Step amount.
+          * Step amount. Note that decimal values as step (e.g. 0.01) may produce unexpected results and thus are strongly discouraged (but for backwards compatibility still accepted).
           * @default 5000
          */
         "step"?: number;
@@ -11263,6 +11386,11 @@ declare namespace LocalJSX {
           * @default ""
          */
         "icon"?: DuetIconName;
+        /**
+          * With LähiTapiola theme the icon can have secondary background instead of default. This has no effect on Turva theme.
+          * @default "default"
+         */
+        "iconBackground"?: "default" | "secondary";
         /**
           * Layout. Values narrow and fluid are deprecated.
           * @default "narrow"
@@ -11276,6 +11404,11 @@ declare namespace LocalJSX {
           * Total steps amount in progress indicator. To render a progress indicator both progressTotalSteps and progressCurrentStep must be given
          */
         "progressTotalSteps"?: number;
+        /**
+          * LähiTapiola theme includes a brand shape at the top by default. Set to "none" to omit it. Has no effect for Turva.
+          * @default "auto"
+         */
+        "shape"?: "auto" | "none";
         /**
           * Theme of the hero area.
           * @default ""
@@ -13608,6 +13741,10 @@ declare namespace LocalJSX {
     interface DuetTooltipButton {
         "accessibleLabel"?: string;
         "active"?: boolean;
+        /**
+          * @default false
+         */
+        "inBadge"?: boolean;
         /**
           * @default ""
          */

package/lib/types/utils/math.utils.d.ts

@@ -9,3 +9,4 @@ export declare function SafeParseFloat(value: string | number, locale?: string):
 export declare function ConvertToEnUS(value: string, locale: string, replaceThousands?: boolean): string;
 export declare const roundTo: (val: number, multiple: number) => number;
 export declare const clamp: (val: number, min: number, max: number) => number;
+export declare const isInteger: (val: number) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "10.3.1",
+  "version": "10.5.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -67,9 +67,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "3.0.65",
-    "@duetds/icons": "4.3.7",
-    "@duetds/tokens": "5.1.0",
+    "@duetds/fonts": "3.0.67",
+    "@duetds/icons": "4.3.9",
+    "@duetds/tokens": "5.1.2",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.36.3",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8daf5b2c1a1ccf789f6cb3927d0ee5b47caf6e77"
+  "gitHead": "136213c9d5eb4ccc8a2d492c8122e0572c665dc3"
 }

package/lib/duet/p-0a80de40.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import{r as e,c as t,h as s,H as o,g as i}from"./p-DrqQiRTn.js";import{i as a}from"./p-CLZq8YfV.js";import{c as n}from"./p-Cfr_DJqU.js";import{i as r}from"./p-Db8rvjPI.js";import{a as h,g as l,c,d}from"./p-DFAnksuG.js";import"./p-C6E9F6QT.js";const m=class{constructor(s){e(this,s),this.duetToggle=t(this,"duetToggle",7),this.contentId=n("DuetShowMore"),this.buttonId=n("DuetShowMoreButton"),this.isSafariBrowser=/^((?!chrome|android).)*safari/i.test(null===navigator||void 0===navigator?void 0:navigator.userAgent),this.buttonAriaOpen=!1,this.theme="",this.language=h(),this.showMoreLabelDefaults={fi:"Näytä lisää",sv:"Visa mer",en:"Show more"},this.showMoreLabel=l(this.showMoreLabelDefaults),this.showLessLabelDefaults={fi:"Näytä vähemmän",sv:"Visa mindre",en:"Show less"},this.showLessLabel=l(this.showLessLabelDefaults),this.showMoreAccessibleLabelDefaults={fi:"Näytä lisää tästä aiheesta",sv:"Visa mer om detta ämne",en:"Show more about this subject"},this.showMoreAccessibleLabel=l(this.showMoreAccessibleLabelDefaults),this.showLessAccessibleLabelDefaults={fi:"Näytä vähemmän tästä aiheesta",sv:"Visa mindre om detta ämne",en:"Show less about this subject"},this.showLessAccessibleLabel=l(this.showLessAccessibleLabelDefaults),this.margin="auto",this.buttonMargin="auto",this.buttonPadding="auto",this.open=!1,this.handleKeyDown=e=>{r(e)&&this.handleClick(e)},this.handleClick=e=>{e.preventDefault();const t=!this.open;this.open=t,t?(setTimeout((()=>{this.contentElement.focus()}),100),setTimeout((()=>{this.buttonAriaOpen=t}),500)):this.buttonAriaOpen=t,this.duetToggle.emit({component:"duet-show-more",originalEvent:e})}}componentWillLoad(){a(this),this.buttonAriaOpen=this.open}connectedCallback(){c(this,[{prop:"showMoreLabel",defaults:"showMoreLabelDefaults"},{prop:"showLessLabel",defaults:"showLessLabelDefaults"},{prop:"showMoreAccessibleLabel",defaults:"showMoreAccessibleLabelDefaults"},{prop:"showLessAccessibleLabel",defaults:"showLessAccessibleLabelDefaults"}])}disconnectedCallback(){d(this)}render(){return s(o,{key:"514e5c439744a2960e711811f696d2ee9e49dba3"},s("div",{key:"40788025130f4b8570cbacfa6371b11ea4bbdb42",class:{"duet-show-more":!0,"duet-theme-turva":"turva"===this.theme,"duet-m-0":"none"===this.margin,open:this.open}},s("div",{key:"42f30cd3ffc5c33651d4d0c7e36c913eab6d8147",ref:e=>this.contentElement=e,class:{content:!0,"duet-theme-turva":"turva"===this.theme},id:this.contentId,tabindex:this.open?"-1":""},s("div",{key:"a319d301f1ed7130671aa529592270c4b708b7f9",class:{"slotted-content":!0}},s("slot",{key:"81b3e98809cee2a52c358af50383272ddebd8ee6"}))),s("duet-button",{key:"9789882dceda992bd6107cc84fa92ca4289f3679",id:this.buttonId,variation:"plain","accessible-label":this.buttonAriaOpen?this.showLessAccessibleLabel:this.showMoreAccessibleLabel,"accessible-expanded":this.buttonAriaOpen?"true":"false","accessible-controls":this.contentId,accessiblePressed:this.isSafariBrowser?this.open:null,onClick:this.handleClick,onKeyDown:this.handleKeyDown,"icon-right":!0,icon:this.open?"action-arrow-up-small":"action-arrow-down-small","icon-size":"medium-small",size:"small",margin:this.buttonMargin,padding:this.buttonPadding,theme:"turva"===this.theme?"turva":"default"},s("span",{key:"9d664617e12985187968c239189df78e3ce87a40"},this.open?this.showLessLabel:this.showMoreLabel))))}get element(){return i(this)}};m.style='*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:block}.duet-show-more{margin-bottom:16px !important;font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}.duet-show-more.duet-m-0{margin:0 !important}.duet-show-more .slotted-content{display:none}.duet-show-more.open .slotted-content{display:block}.duet-show-more .content:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-show-more .content:focus,.duet-show-more .content:focus.duet-theme-turva{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-show-more.duet-theme-turva{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:rgb(23, 42, 59)}';export{m as duet_show_more}