/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetInputPadding, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetOverflowPadding, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTextFontWeight, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types"; import { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button"; import { DuetLangObject } from "./utils/language-utils"; import { DuetAlertEvent } from "./components/duet-alert/duet-alert"; import { bannerSize } from "./components/duet-banner/duet-banner"; import { DuetSource } from "./utils/picture-utils"; import { DuetButtonIconSize, DuetButtonSize, DuetButtonTextCentering, DuetButtonVariation, DuetButtonWrapping } from "./components/duet-button/duet-button"; import { DuetCaptionSize } from "./components/duet-caption/duet-caption"; import { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./components/duet-card/duet-card"; import { DuetBreakpoints } from "./utils/token-utils"; import { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox"; import { DuetChipEvent, DuetChipSize, DuetChipVariation } from "./components/duet-chip/duet-chip"; import { DuetChoiceEvent } from "./components/duet-choice/duet-choice"; import { DuetCollapsibleHeadingFontSize, DuetCollapsibleToggleEvent, DuetCollapsibleWeight } from "./components/duet-collapsible/duet-collapsible"; import { DuetComboboxEvent, DuetComboboxItem } from "./components/duet-combobox/duet-combobox"; import { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-cookie-consent"; 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 { 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"; import { DuetHeaderAnalyticsEvent, DuetHeaderChangeEvent, DuetHeaderMobileNavToggleEvent, I18nText } from "./components/duet-header/duet-header"; import { DuetHeadingWeight } from "./components/duet-heading/duet-heading"; import { DuetHeroAnalyticsEvent, DuetHeroButtonData, DuetHeroClickEvent, DuetHeroIconSize, DuetHeroVariation } from "./components/duet-hero/duet-hero"; import { IndicatorVariation } from "./components/duet-indicator/duet-indicator"; import { DuetInputComponentType, DuetInputEvent, DuetInputType, DuetVariationType } from "./components/duet-input/duet-input"; import { DuetLabelMargin, DuetLabelSize } from "./components/duet-label/duet-label"; import { DuetLayoutStickyDistance } from "./components/duet-layout/duet-layout"; import { DuetListLabelWidth, DuetListMobileAlignment, DuetListVariation } from "./components/duet-list/duet-list"; import { DuetLogoSize } from "./components/duet-logo/duet-logo"; import { DuetMenuBarChangeEvent } from "./components/duet-menu-bar/duet-menu-bar"; import { DuetModalCloseEvent, DuetModalSize, DuetModalVariation } from "./components/duet-modal/duet-modal"; import { FocusableComponent, OpenerComponent } from "./common"; import { DuetMultiselectEvent, DuetMultiselectItem, DuetMultiselectItemGroup } from "./components/duet-multiselect/duet-multiselect"; import { DuetNotificationDrawerDirection } from "./components/duet-notification-drawer/duet-notification-drawer"; import { DuetNumberInputEvent } from "./components/duet-number-input/duet-number-input"; import { OverlayDisplayDevice } from "./components/duet-overlay/duet-overlay"; import { DuetPaginationPageEvent, DuetPaginationVariation } from "./components/duet-pagination/duet-pagination"; import { DuetPanelVariation } from "./components/duet-panel/duet-panel"; 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 { DuetPopupMenuEvent } from "./components/duet-popup-menu/duet-popup-menu"; import { DuetPopupMenuItemEvent } from "./components/duet-popup-menu-item/duet-popup-menu-item"; import { DuetRadioEvent } from "./components/duet-radio/duet-radio"; import { DuetRangeChangeEvent } from "./components/duet-range-slider/duet-range-slider"; import { DuetRangeStepperUpdateEvent } from "./components/duet-range-stepper/duet-range-stepper"; import { DuetSelectEvent, DuetSelectItems, DuetSelectVariation } from "./components/duet-select/duet-select"; import { DuetShowMoreToggleEvent } from "./components/duet-show-more/duet-show-more"; import { DuetSlideoutEventDetails } from "./components/duet-slideout/duet-slideout"; import { DuetSpacerBreakpoint, DuetSpacerSize } from "./components/duet-spacer/duet-spacer"; import { DuetSpinnerSize } from "./components/duet-spinner/duet-spinner"; import { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-step"; import { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper"; import { IndicatorVariation as IndicatorVariation1 } from "./components/duet-indicator/duet-indicator"; import { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group"; import { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea"; import { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle"; import { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip"; import { DuetUploadEvent, DuetUploadTableGroupName, StringMap, XHRInternalMiddleWare } from "./components/duet-upload/duet-upload"; import { DuetEditableTableActions as DuetEditableTableActions1 } from "./components/duet-editable-table/duet-editable-table"; import { DuetUploadErrorCode } from "./components/duet-upload/errorcodes.utils"; import { UploadActionButtonTitles } from "./components/duet-upload-item/duet-upload-item"; import { DuetFileListItem, DuetUploadEvent as DuetUploadEvent1 } from "./components/duet-upload/duet-upload"; import { ItemType, UploadActionButtonTitles as UploadActionButtonTitles1 } from "./components/duet-upload-item/duet-upload-item"; import { EventEmitter } from "./stencil-public-runtime"; export { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetInputPadding, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetOverflowPadding, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTextFontWeight, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types"; export { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button"; export { DuetLangObject } from "./utils/language-utils"; export { DuetAlertEvent } from "./components/duet-alert/duet-alert"; export { bannerSize } from "./components/duet-banner/duet-banner"; export { DuetSource } from "./utils/picture-utils"; export { DuetButtonIconSize, DuetButtonSize, DuetButtonTextCentering, DuetButtonVariation, DuetButtonWrapping } from "./components/duet-button/duet-button"; export { DuetCaptionSize } from "./components/duet-caption/duet-caption"; export { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./components/duet-card/duet-card"; export { DuetBreakpoints } from "./utils/token-utils"; export { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox"; export { DuetChipEvent, DuetChipSize, DuetChipVariation } from "./components/duet-chip/duet-chip"; export { DuetChoiceEvent } from "./components/duet-choice/duet-choice"; export { DuetCollapsibleHeadingFontSize, DuetCollapsibleToggleEvent, DuetCollapsibleWeight } from "./components/duet-collapsible/duet-collapsible"; export { DuetComboboxEvent, DuetComboboxItem } from "./components/duet-combobox/duet-combobox"; export { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-cookie-consent"; 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 { 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"; export { DuetHeaderAnalyticsEvent, DuetHeaderChangeEvent, DuetHeaderMobileNavToggleEvent, I18nText } from "./components/duet-header/duet-header"; export { DuetHeadingWeight } from "./components/duet-heading/duet-heading"; export { DuetHeroAnalyticsEvent, DuetHeroButtonData, DuetHeroClickEvent, DuetHeroIconSize, DuetHeroVariation } from "./components/duet-hero/duet-hero"; export { IndicatorVariation } from "./components/duet-indicator/duet-indicator"; export { DuetInputComponentType, DuetInputEvent, DuetInputType, DuetVariationType } from "./components/duet-input/duet-input"; export { DuetLabelMargin, DuetLabelSize } from "./components/duet-label/duet-label"; export { DuetLayoutStickyDistance } from "./components/duet-layout/duet-layout"; export { DuetListLabelWidth, DuetListMobileAlignment, DuetListVariation } from "./components/duet-list/duet-list"; export { DuetLogoSize } from "./components/duet-logo/duet-logo"; export { DuetMenuBarChangeEvent } from "./components/duet-menu-bar/duet-menu-bar"; export { DuetModalCloseEvent, DuetModalSize, DuetModalVariation } from "./components/duet-modal/duet-modal"; export { FocusableComponent, OpenerComponent } from "./common"; export { DuetMultiselectEvent, DuetMultiselectItem, DuetMultiselectItemGroup } from "./components/duet-multiselect/duet-multiselect"; export { DuetNotificationDrawerDirection } from "./components/duet-notification-drawer/duet-notification-drawer"; export { DuetNumberInputEvent } from "./components/duet-number-input/duet-number-input"; export { OverlayDisplayDevice } from "./components/duet-overlay/duet-overlay"; export { DuetPaginationPageEvent, DuetPaginationVariation } from "./components/duet-pagination/duet-pagination"; export { DuetPanelVariation } from "./components/duet-panel/duet-panel"; 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 { DuetPopupMenuEvent } from "./components/duet-popup-menu/duet-popup-menu"; export { DuetPopupMenuItemEvent } from "./components/duet-popup-menu-item/duet-popup-menu-item"; export { DuetRadioEvent } from "./components/duet-radio/duet-radio"; export { DuetRangeChangeEvent } from "./components/duet-range-slider/duet-range-slider"; export { DuetRangeStepperUpdateEvent } from "./components/duet-range-stepper/duet-range-stepper"; export { DuetSelectEvent, DuetSelectItems, DuetSelectVariation } from "./components/duet-select/duet-select"; export { DuetShowMoreToggleEvent } from "./components/duet-show-more/duet-show-more"; export { DuetSlideoutEventDetails } from "./components/duet-slideout/duet-slideout"; export { DuetSpacerBreakpoint, DuetSpacerSize } from "./components/duet-spacer/duet-spacer"; export { DuetSpinnerSize } from "./components/duet-spinner/duet-spinner"; export { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-step"; export { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper"; export { IndicatorVariation as IndicatorVariation1 } from "./components/duet-indicator/duet-indicator"; export { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group"; export { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea"; export { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle"; export { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip"; export { DuetUploadEvent, DuetUploadTableGroupName, StringMap, XHRInternalMiddleWare } from "./components/duet-upload/duet-upload"; export { DuetEditableTableActions as DuetEditableTableActions1 } from "./components/duet-editable-table/duet-editable-table"; export { DuetUploadErrorCode } from "./components/duet-upload/errorcodes.utils"; export { UploadActionButtonTitles } from "./components/duet-upload-item/duet-upload-item"; export { DuetFileListItem, DuetUploadEvent as DuetUploadEvent1 } from "./components/duet-upload/duet-upload"; export { ItemType, UploadActionButtonTitles as UploadActionButtonTitles1 } from "./components/duet-upload-item/duet-upload-item"; export { EventEmitter } from "./stencil-public-runtime"; export namespace Components { interface DuetActionButton { /** * Used to indicate which dom element with ID this element controls * @default "" */ "accessibleControls": string; /** * Described By id * @default undefined */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Details of the component * @default undefined */ "accessibleDetails": string; /** * Accessible label * @default getLocaleString( this.accessibleLabelsDefaults ) */ "accessibleLabel": string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Default accessible label * @default { en: "Click to activate action", fi: "Klikkaa aktivoidaksesi toiminto", sv: "Klicka för att aktivera åtgärd", } */ "accessibleLabelsDefaults": DuetLangObject; /** * Title of the action button (shows as DOM tooltip when hovering) if set to true, this will try to add a best-guess title based on action-name if set to a string the string is used if set to false nothing is set * @default true */ "accessibleTitle": string | boolean; /** * Name of id of action that was called being called * @default undefined */ "actionId": string; /** * Name of id of action that was called being called * @default undefined */ "actionMeta": Record | string; /** * Name of action being called */ "actionName": string; /** * Custom color to be used for a background, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary". * @default "" */ "background": DuetColor; /** * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. * @default "" */ "color": DuetColor; /** * Disables the button * @default false */ "disabled": boolean; /** * Color of the icon to display * @default "currentColor" */ "iconColor": string; /** * Name of the icon to display * @default "action-arrow-left-small" */ "iconName": string; /** * Size of the icon * @default "xx-small" */ "iconSize": DuetActionButtonIconSize; /** * Sets focus on the specified `duet-action-button`. Use this method instead of the global `button.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the pagination. * @default "" */ "theme": DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. */ "url": string; } interface DuetAlert { /** * Adds accessible label for the dismissible alert close button. * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"} */ "accessibleLabel": string; /** * Property to change languageDefaults on the component. normally you would handle these strings on an application level and override accessibleLabel when needed * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"} */ "accessibleLabelDefaults": DuetLangObject | string; /** * Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually should be set to false, so that it is not read out first. * @default true */ "announcements": boolean; /** * Time in milliseconds which is waited before auto dismiss. */ "autoDismiss": number; /** * Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used. * @default false */ "dismissible": boolean; /** * When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a toggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible. * @default "" */ "expandingTitle": string; /** * @deprecated - if you need to set focus, use a focusable element inside Make alert focusable. * @default false */ "focusable": boolean; /** * Hide. */ "hide": () => Promise; /** * Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons, use of this property is discouraged, and it is being considered for deprication. * @default "" */ "icon": DuetIconName; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Controls the padding of the component. * @default "auto" */ "padding": DuetPadding; /** * Allows for styling of the alert based on its position in the layout. "below-nav" is used when the alert is below the navigation bar. It also overrides the icon to be the same as the variation. * @default "content" */ "position": "below-nav" | "content"; /** * @deprecated - if you need to set focus, use a focusable element inside */ "setFocus": (options?: FocusOptions) => Promise; /** * Show. */ "show": () => Promise; /** * Theme of the card. * @default "" */ "theme": DuetTheme; /** * Status variation of the alert. "danger" and "warning" will render the alert with role "alert" (unless announcements has been set to false). Other variations will have role "status". Use "danger" only when something serious has happened or the user must take immediate action. Use "warning" for unexpected situations that are potentially harmful, but don't require immediate action. * @default "default" */ "variation": DuetStatus; } interface DuetBadge { /** * Variation of the background. "strong" results in a more prominent background color. * @default "normal" */ "background": "normal" | "strong"; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Theme of the badge. * @default "" */ "theme": DuetTheme; /** * Style variation of the badge. * @default "default" */ "variation": DuetStatus | "subtle"; } interface DuetBanner { /** * Background color. * @default "primary-lighter" */ "backgroundColor": DuetColor; /** * The actual heading level used in the HTML markup. * @default "h2" */ "headingLevel": DuetHeadingLevel; /** * Icon. * @default "" */ "icon": DuetIconName; /** * Icon background color. * @default "primary" */ "iconBackgroundColor": DuetColor; /** * Icon color. * @default "gray-lightest" */ "iconColor": DuetColor; /** * Image. Example image is 512x341; * @default "" */ "image": string; /** * Alt attribute text for the image. If not provided, image is assigned presentation role. */ "imageAlt": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Maximum size of the banner. The banner will automatically switch to smaller sizes when space is not available. Sizes "large" and "medium" are horizontal, "small" is vertical, * @default "large" */ "size": bannerSize; /** * Array of sources for responsive images. Sources have the properties of element. This is an experimental feature and might be changed without notice. */ "sources": DuetSource[] | string; /** * Text color. * @default "secondary" */ "textColor": DuetColor; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetBreadcrumb { /** * 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; /** * Href for the link. Should be left empty for the last item, which should be the current page. * @default "" */ "href": string; /** * Icon * @default "arrow-right-small-icon" */ "icon": DuetIconName; /** * Icon size * @default "x-small" */ "iconSize": DuetIconSize; /** * Theme * @default "" */ "theme": DuetTheme; } interface DuetBreadcrumbs { /** * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color": DuetColor; /** * Theme * @default "" */ "theme": DuetTheme; /** * Variation * @default "header" */ "variation": "header" | "footer" | "plain"; } interface DuetButton { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages. */ "accessibleControls": string; /** * Indicates the id of a component that describes the button. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Details of the component * @default undefined */ "accessibleDetails": string; /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded": boolean; /** * 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; /** * Property to change accessibleLabelExternal defaults on the component. normally you would handle these strings on an application level and override accessibleLabelExternal when needed * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelExternalDefaults": DuetLangObject | string; /** * Adds accessible label for button in "loading" state * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"} */ "accessibleLabelLoading": string; /** * Property to change accessibleLabelLoading defaults on the component. normally you would handle these strings on an application level and override accessibleLabelLoading when needed * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"} */ "accessibleLabelLoadingDefaults": DuetLangObject | string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Indicates the id of a component owned by the button. */ "accessibleOwns": string; /** * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button. * @default "false" */ "accessiblePopup": string; /** * Tells screen reader the element is pressed. */ "accessiblePressed": boolean; /** * Centers the text of a button * @default false */ "centerText": DuetButtonTextCentering; /** * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color": DuetColor; /** * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * Expands the button to fill 100% of the container width. * @default false */ "expand": boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external": boolean; /** * Keep the button fixed width even on mobile viewports. * @default false */ "fixed": boolean; /** * ID of associated form element. */ "form": string; /** * Icon to display to the left of the button content. This is ignored/overridden when button is used as an external link. * @default "" */ "icon": DuetIconName; /** * Whether this button should use styles meant for displaying just an icon. * @default false */ "iconOnly": boolean; /** * Show icon on the right side of the button content. * @default false */ "iconRight": boolean; /** * Icon size. * @default "medium" */ "iconSize": DuetButtonIconSize; /** * Adds a unique identifier for the button. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead. */ "identifier": string; /** * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Loading state of the button * @default false */ "loading": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute. */ "name": string; /** * Negative variation, can be combined with Variation to produce negative versions * @default false */ "negative": boolean; /** * Controls the padding of the plain variation button - has no effect for other variations. * @default "auto" */ "padding": DuetPadding; /** * Sets focus on the specified `duet-button`. Use this method instead of the global `button.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Button’s size. * @default "medium" */ "size": DuetButtonSize; /** * Allows the button to submit a form. * @default false */ "submit": boolean; /** * Theme of the button. * @default "" */ "theme": DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. */ "url": string; /** * The value of the button, which gets paired with the button's name when submitted as part of a form. Corresponds with the native HTML value attribute. */ "value": string; /** * Style variation of the button. * @negative - value is deprecated and should be used in combination with negative prop in the future * @destructive - value is deprecated and should be replace with destructive-secondary * @default "default" */ "variation": DuetButtonVariation; /** * Controls the text wrapping. * @default "auto" */ "wrapping": DuetButtonWrapping; } interface DuetCallout { /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Theme of the caption. * @default "" */ "theme": DuetTheme; } interface DuetCaption { /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Selected state of the caption. Used inside Choice component. * @default false */ "selected": boolean; /** * Controls the size of the caption. * @default "medium" */ "size": DuetCaptionSize; /** * Theme of the caption. * @default "" */ "theme": DuetTheme; } interface DuetCard { /** * Adds accessible label for the card that is only shown for screen readers. Typically, this label text is used when the whole card is made clickable to create a label text for users who use assistive technology. */ "accessibleLabel": string; /** * Custom color to be used for the card background, as a design token entered in camelCase or kebab-case. Example: "primary". * @default "gray-lightest" */ "background": DuetColor; /** * Makes the card expand and collapse when the collapse/expand arrow in the heading is clicked or tapped. This option only works together with the heading option, meaning that you also need to set the heading for this functionality to show up. * @default false */ "collapsible": boolean; /** * The content for the card heading. If empty, both heading and collapse functionality will be hidden. * @default "" */ "heading": string; /** * Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary". */ "headingBackground": DuetColor | undefined; /** * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings. * @default "h2" */ "headingLevel": DuetCardHeadingLevel; /** * Icon to display on the left side of heading. Example: "form-location" */ "icon": DuetIconName; /** * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor". * @default "currentColor" */ "iconColor": DuetColor; /** * Image to display in the card. The image aspect ratio can be anything as images are resized to fit 100% width of the card. Example: "https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg" */ "image": string; /** * Alt attribute text for the image. If not provided, image is assigned presentation role. */ "imageAlt": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * If the card is collapsible, this property controls whether the card is open or closed. * @default true */ "open": boolean; /** * The padding for the card. Please note that the card padding values don’t directly translate to similar space token names, but instead the card uses it’s own derived defaults. * @default "small" */ "padding": DuetCardPadding; /** * Additional content for the card heading. If empty, both heading and collapse functionality will be hidden. * @default "" */ "secondaryHeading": string; /** * Sets focus on underlying a element. Available only when url attribute is used. Use this method instead of the native `focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Breakpoint used to remove shadow around card. These match to similar media query tokens: $media-query-small and $media-query-medium. * @default undefined */ "shadowBreakpoint"?: DuetBreakpoints; /** * Theme of the card. * @default "" */ "theme": DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. */ "url": string; /** * Style variation of the card. * @default "default" */ "variation": DuetCardVariation; } interface DuetCheckbox { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the checkbox. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Aria Details of the component * @default undefined */ "accessibleDetails": string; /** * Control the tabindex of checkbox. In most cases this should never be used! It exists only for Duet’s internal needs. */ "accessibleIndex": string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the checkbox. */ "accessibleOwns": string; /** * Aria selected * @default undefined */ "accessibleSelected": string; /** * Check state of the checkbox. * @default false */ "checked": boolean; /** * Makes the checkbox component disabled. This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * Display the checkbox in error state along with an error message (when a required choice has not been made). Note that this should only be used for single checkbox - for multiple checkboxes, wrap them in a fieldset and use the error property on that. * @default "" */ "error": string; /** * Adds a unique identifier for the checkbox. */ "identifier": string; /** * Label for the checkbox * @default "label" */ "label": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Name of the checkbox. */ "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. * @default false */ "required": boolean; /** * Defines a specific role attribute for the input. */ "role": string | null; /** * Sets focus on the specified `duet-checkbox`. Use this method instead of the global `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the checkbox. * @default "" */ "theme": DuetTheme; /** * The value of the checkbox does not mean if it's checked or not, use the checked property for that. */ "value": string; } interface DuetCheckmark { /** * Checked * @default false */ "center": boolean; /** * Checked * @default false */ "checked": boolean; /** * Checked * @default false */ "presentationOnly": boolean; /** * Theme * @default "" */ "theme": DuetTheme; /** * Type * @default "checkbox" */ "type": DuetChoiceType; } interface DuetChip { /** * If the component expands or collapses adjacent content, then use this property to add the aria-expanded attribute to the opening element. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "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. With input variation this is not used, as the accessible label is automatically generated. */ "accessibleLabel": string; /** * Use this property to add an aria-haspopup attribute. * @default "false" */ "accessiblePopup": string; /** * Checked state of the filter chip. * @default false */ "checked": boolean; /** * Makes the chip look inactive and announced as unavailable to assistive technologies. Prevents the default action. Not available for the input variation. * @default false */ "disabled": boolean; /** * Icon to display to the left of the chip content. * @default "" */ "icon": DuetIconName; /** * Adds a unique identifier for the chip. */ "identifier": string; /** * Name attribute of the html input (filter) or button. */ "name": string; /** * 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; /** * 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. * @default false */ "selected": boolean; "setDeleteFocus": () => Promise; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Size of the chip. Use "large" for a chip that has the same height as default duet-input and duet-button. * @default "medium" */ "size": DuetChipSize; /** * Theme of the button. * @default "" */ "theme": DuetTheme; /** * The value of the html input when used as filter, or the button's value. */ "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. * @default "button" */ "variation": DuetChipVariation; } interface DuetChoice { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the choice. if this is set to an empty string it will prevent screenreaders from flowing to a collapsible content and can be used as an escape hatch if that behaviour is undesired. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Aria Details of the component * @default undefined */ "accessibleDetails": string; /** * Accessible label that is read for screen reader users in the info toggle trigger button. Not visible for normal users. * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelInfoButton": string; /** * Property to change accessibleLabelInfoButton defaults on the component. normally you would handle these strings on an application level and override accessibleLabelInfoButton when needed * @default DuetStringsExternalDefaults */ "accessibleLabelInfoButtonDefaults": DuetLangObject | string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Indicates the id of a component owned by the choice. */ "accessibleOwns": string; /** * Additional caption to show inside the label of the choice button. * @default "" */ "caption": string; /** * Checked state of the choice button. * @default false */ "checked": boolean; /** * Makes the choice button open a new section underneath it when clicked or tapped. This new section can be used to show more options related to this choice. Please note that this feature can’t be used together with the "info" functionality and that it only accepts plain dom nodes (no shadow dom elements such as duet-paragraph can be used as this will break accessibility) * @default false */ "collapsible": boolean; /** * This attribute works only when the 'collapsible' attribute is set to true. It maintains the visibility of the additional content section, regardless of whether the input is checked or not. * @default false */ "collapsibleForceExpanded": boolean; /** * Accessible collapsible notification. If a collapsible choice has no header, and contains other elements than duet-paragraph, duet-heading or duet-fieldset, this is used as the accessible notification of opening the collapsible content (added to aria-describedby). * @default { fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle", en: "This choice has additional information opened below", sv: "Det här val har mer information som öppnades nedan", } */ "collapsibleNotification": string; /** * Accessible collapsible notification defaults * @default { fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle", en: "This choice has additional information opened below", sv: "Det här val har mer information som öppnades nedan", } */ "collapsibleNotificationDefaults": | DuetLangObject | string; /** * Makes the choice component disabled. This prevents users from being able to interact with the choice, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * Expands the choice button to fill 100% of the container width. * @default false */ "expand": boolean; "groupDirection": DuetDirection; "groupDisabled": boolean; "groupResponsive": DuetChoiceGroupBreakpoint; /** * Icon to display to the left of the choice button label. * @default "" */ "icon": string; /** * Adds a unique identifier for the choice button. */ "identifier": string; /** * Accessible info label * @default { fi: "Lisätietoja vaihtoehdosta", en: "More information about", sv: "Mera information om", } */ "infoLabel": string; /** * Accessible info label defaults * @default { fi: "Lisätietoja vaihtoehdosta", en: "More information about", sv: "Mera information om", } */ "infoLabelDefaults": DuetLangObject | string; /** * Label for the choice button. * @default "label" */ "label": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Name attribute of the html input that the Choice component controls. */ "name": string; /** * Controls the padding of the component. * @default "auto" */ "padding": DuetPadding; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required": boolean; /** * Sets focus on the specified `duet-choice`. Use this method instead of the global `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the choice. * @default "" */ "theme": DuetTheme; /** * This method toggles the info section. */ "toggleInfoMethod": () => Promise; /** * Type of the choice button. You can set the type of the choice to be either “radio” or “checkbox”. Depending on this selection we convey the selection type to assistive technologies as well. When type “radio” is chosen it is required to place the choices inside Choice Group component. * @default "checkbox" */ "type": DuetChoiceType; /** * The value of the html input that the Choice component controls. */ "value": string; } interface DuetChoiceGroup { /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium. * @default "small" */ "breakpoint": DuetChoiceGroupBreakpoint; /** * Additional caption to show inside the label of the choice group. * @default undefined */ "caption": string; /** * Direction of the choice group. * @default "vertical" */ "direction": DuetDirection; /** * Determines, whether the control is disabled or not. */ "disabled": boolean; /** * Display choice group in error state along with an error message. * @default "" */ "error": string; "getInitialValue": () => Promise; /** * Legend displayed for the choice buttons in this group. * @default "Label" */ "label": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Name for the choice buttons within this group. **This must be unique amongst all other inputs.** */ "name": string; /** * Sets whether making a choice is required or optional. Will set contained choices to required as well. * @default false */ "required": boolean; /** * Enable or disable the automatic responsive behaviour of the choice group component when horizontal setting is used. Setting this option to "true" makes sure that contents are stacked vertically on mobile. * @default false */ "responsive": boolean; /** * Theme of the choice group. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the choice group. * @default undefined */ "tooltip": string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection": DuetTooltipDirection; /** * The value of the selected choice button. */ "value": string; } interface DuetCollapsible { /** * Adds accessible label for the collapsible 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; /** * The caption text to display below the heading. * @default "" */ "caption": string; /** * Centers heading inside its container * @default false */ "centerHeading": boolean; /** * The content for the collapsible heading. * @default "" */ "heading": string; /** * Makes collapsible heading full width * @default false */ "headingFullWidth": boolean; /** * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. only variations of h1-h6 area accepted * @default undefined */ "headingLevel": DuetHeadingLevel | undefined; /** * Custom headingSize to be used for font size of heading, as a design token entered in kebab-case x-small -> font-size-x-small. Example: # 12px (0.75rem) ------ +2px (x-small) # 14px (0.875rem) ------ +2px (small) # 16px (1rem) ------ +2px (medium) # 20px (1.25rem) ------ +4px (large) # 24px (1.5rem) ------ +4px (x-large) # 36px (2.25rem) ------ +12px (xx-large) # 48px (3rem) ------ +12px (xxx-large) # 72px (4.5rem) ------ +24px (xxxx-large) * @default undefined */ "headingSize": DuetCollapsibleHeadingFontSize; /** * The font weight of the heading * @default "semibold" */ "headingWeight": DuetCollapsibleWeight; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Negative variation for collapsible on dark background * @default false */ "negative": boolean; /** * Is the component expanded or collapsed. * @default false */ "open": boolean; /** * Sets focus on the specified `duet-collapsible`. Use this method instead of the global `collapsible.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the collapsible. * @default "" */ "theme": DuetTheme; } interface DuetCombobox { /** * Defaults for the accessible labels for the select items * @default { en: { heading: "Select:", item: "{name}", itemFiltered: "{name}, {hiddenItems} filtered", }, fi: { heading: "Valitse:", item: "{name}", itemFiltered: "{name}, {hiddenItems} suodatettu", }, sv: { heading: "Välj:", item: "{name}", itemFiltered: "{name}, {hiddenItems} filtrerade", }, } */ "accessibleLabelDefaults": DuetLangObject | string; /** * Accessible labels for the select items * @default getLocaleString( this.accessibleLabelDefaults, getLanguage() ) */ "accessibleLabels": Record; /** * Caption for the input if input is not provided as a slotted element. * @default "" */ "caption": string; /** * Defines if filtering of items should be done by includes or startsWith * @default "startsWith" */ "filterType": "includes" | "startsWith"; /** * Force the user to make a selection (typing things in the input field will only be used for list search). This property also sync input value with selected value on blur. * @default false */ "force": boolean; /** * Exposes a formatter function to format the item value displayed after a user selects an item * @param item : DuetComboboxItem */ "formatItem": (item: DuetComboboxItem) => Promise; /** * A hook to overwrite how the values are displayed in the input field after a User select an item * @example (item) => `${item.name} (${item.value})` * @default undefined */ "formatter": (item: DuetComboboxItem) => string; /** * Array of item objects. Each item should have properties name, value and optionally id. If id is not provided, it will be generated. Alternatively, an array of strings can be provided, in which case the strings will be used for name, value and id. */ "items": any; /** * Label for the input if input is not provided as a slotted element. * @default "" */ "label": string; /** * Defines minimum number of characters that must be given to show search results * @default 0 */ "minCharacters": number; /** * Allow multiple selections. Selections are displayed as DuetChips. * @default false */ "multiple": boolean; /** * Defines if items list should always open after clicking on input * @default false */ "openListOnClick": boolean; /** * Theme of the combobox. * @default "" */ "theme": DuetTheme; /** * Value of selected item/s. If multiple is true, value is an array of selected items, else it's a string. */ "value": string | string[]; } interface DuetContactCard { /** * Button icon. * @default "form-date" */ "buttonIcon": DuetIconName; /** * Button text. */ "buttonText": string; /** * Button url. */ "buttonUrl": string; /** * Description. */ "description": string; /** * Email. */ "email": string; /** * Image. */ "image": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Name. */ "name": string; /** * Phone. */ "phone": string; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetCookieConsent { /** * Adds accessible label for the cookie consent ok button. * @default "Hyväksyn evästeiden käytön" */ "accessibleLabel": string; /** * Theme of the cookie consent banner. * @default "" */ "theme": DuetTheme; } interface DuetDatePicker { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy": string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the input. */ "accessibleOwns": string; /** * Caption (underneath label) that can be set as a way of adding extra information. */ "caption": string; /** * Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right. * @default "right" */ "direction": DuetDatePickerDirection; /** * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those. * @default false */ "disableBuiltInErrors": boolean; /** * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * If form input field has a placeholder text, and user types anything (causing the text to dissapear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) * @default false */ "echoPlaceholder": boolean; /** * Display the date picker input in error state along with an error message. * @default "" */ "error": string; /** * Expands the date picker input to fill 100% of the container width. * @default false */ "expand": boolean; /** * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus returning to the date picker's button. Default is true. */ "hide": (moveFocusToButton?: boolean) => Promise; /** * Adds a unique identifier for the date picker input. * @default "" */ "identifier": string; /** * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100 * @default 10 */ "incrementYears": number; /** * Label for the date picker input. * @default "" */ "label": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * The currently active language. This setting changes the month/year/day. names and button labels as well as all screen reader labels. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing. * @default "fi" */ "language": DuetLanguage; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. * @default "" */ "max": string; /** * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. * @default "" */ "min": string; /** * Name of the date picker input. * @default "" */ "name": string; /** * Hint text to display before the user types into the date picker input. * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" } */ "placeholder": string; /** * Placeholder defaults. * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" } */ "placeholderDefaults": DuetLangObject | string; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required": boolean; /** * Defines a specific role attribute for the date picker input. */ "role": string | null; /** * Sets focus on the date picker's input. Use this method instead of the global `focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Show the calendar modal, moving focus to the calendar inside. */ "show": () => Promise; /** * Theme of the component. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the date picker input. * @default "" */ "tooltip": string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection": DuetTooltipDirection; /** * This offers information relating to the current validity of the component. It follow as closely as possible the behaviour of the native date input. Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow. * @readonly */ "validity": ValidityState; /** * Date value. Must be in IS0-8601 format: YYYY-MM-DD * @default "" */ "value": string; } interface DuetDivider { /** * Custom color, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color": DuetColor; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetDividerMargin; /** * Theme of the divider. * @default "" */ "theme": DuetTheme; } interface DuetEditableTable { /** * Exposes the aria role for optimizing accessibility. * @default undefined */ "accessibleRole": string; /** * Define actions for all items in a table An alternative to inline HTML table. required for Sortable tables * @default undefined */ "actions": DuetEditableTableActions; /** * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout. * @default "small" */ "breakpoint": DuetTableBreakpoint; /** * Define columns for a table An alternative to inline HTML table. required for Sortable tables * @default undefined */ "columns": DuetEditableTableColumns; /** * Optional id that get passed to the table and used to setup ::parts * @default "" */ "groupId": string; /** * Hide a thead section visually. The content is still available to screen readers. * @default false */ "hideHeadVisually": boolean; /** * Duet-table: margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Define rows for a table An alternative to inline HTML table. required for Sortable tables * @default undefined */ "rows": DuetEditableTableRows; /** * Controls whether the table is sortable by headers * @default false */ "sortable": boolean; /** * Duet-table: Controls whether the table has a sticky header. Sticky headers are not compatible with breakpoint="none-scrollable". * @default false */ "sticky": boolean; /** * Duet-table: Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky. * @default "with-links" */ "stickyDistance": DuetTableStickyDistance; /** * Theme of the table. * @default "" */ "theme": DuetTheme; /** * Duet-table: Style variation of the table. * @default "striped" */ "variation": DuetTableVariant; } interface DuetEmptyState { /** * Icon shown in the empty state component. * @default "messaging-question" */ "icon": DuetIconName; /** * The size of the empty state message. * @default "medium" */ "size": DuetEmptyStateSize; /** * Theme of the empty state component. * @default "" */ "theme": DuetTheme; } interface DuetFieldset { /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * Additional caption to show next to the label. */ "caption": string; /** * @default false */ "compactLabel": boolean; /** * An error message to be shown next to the label. * @default "" */ "error": string; /** * Label/legend displayed for the fieldset. */ "label": string; /** * Heading level for the label in the legend element. This is only used to give screen readers better logical structure. This does not affect visual appearance. * @default "span" */ "labelHeadingLevel": DuetHeadingLevel | "span"; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Theme of the fieldset. * @default "" */ "theme": DuetTheme; } interface DuetFileChooser { /** * The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. * @default undefined */ "accept": string; /** * Returns actually selected files in file chooser. */ "getFiles": () => Promise; /** * Use multiple to allow the user to select multiple files when uploading * @default false */ "multiple": boolean; /** * Opens file choose dialog. */ "open": () => Promise; /** * theme. * @default "" */ "theme": DuetTheme; } interface DuetFooter { /** * Accessible label for footer */ "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; /** * Property to change accessibleLabelExternal defaults on the component. normally you would handle these strings on an application level and override accessibleLabelExternal when needed * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelExternalDefaults": DuetLangObject | string; /** * An array of items for the main footer links. Items have to include mandatory "label" and "href" fields to work. Additionally, you can pass an "id" that is added as an HTML identifier for the anchor tag. Also data object can be given to set data attributes to items. Note that previously mandatory "icon" field has now been removed - setting it has no effect. */ "items": any; /** * The currently active language. This setting changes the logo to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * URL that the logo link points to. * @default "/" */ "logoHref": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * An array of items for the small footer menu. Items have to include mandatory "label" and "href" fields to work. Also data object can be given to set data attributes to items. Additionally, you can pass an "id" that is added as an HTML identifier for the anchor tag. */ "menu": any; /** * Theme of the navigation. * @default "" */ "theme": DuetTheme; /** * Style variation of the footer. * @default "default" */ "variation": DuetFooterVariation; } interface DuetGrid { /** * Adjusts the vertical alignment of the grid items, if set to "form-distribute" the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items, so that they align even when displaying errors. Value "form_distribute" is deprecated, use "form-distribute" for new development. * @default "top" */ "alignment": DuetGridAlignment; /** * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens: $media-query-small and $media-query-medium. * @default "small" */ "breakpoint": DuetGridBreakpoint; /** * Direction of the grid items. * @default "horizontal" */ "direction": DuetDirection; /** * Adjusts the horizontal distribution of the grid items. * @default "default" */ "distribution": DuetGridDistribution; /** * CSS grid based templates that can be used to create pre-defined layouts. * @default null */ "gridTemplate": | "small" | "medium" | "large" | "sidebar-right" | "sidebar-left" | "two-columns" | "three-columns" | "button-grid"; /** * Adjusts the horizontal alignment of the grid items on mobile (575px and under). * @default "" */ "mobile": DuetGridMobileAlignment; /** * Enable or disable the automatic responsive behaviour of the grid component. Setting this option to "true" makes sure that contents are stacked vertically on mobile (575px and under). * @default false */ "responsive": boolean; /** * Reverse the order of the grid items when horizontal. Usefull when we want the primary item to be on bottom right on desktop, but on top on mobile and the first for screen readers. * @default false */ "rowReverse": boolean; } interface DuetGridItem { /** * @default "small" */ "breakpoint": DuetGridBreakpoint; /** * @default "horizontal" */ "direction": DuetDirection; /** * Make the grid item fill the remaining available grid space. * @default false */ "fill": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Sets the maximum width for the grid item using any valid numeric CSS value. E.g. "300px". */ "maxWidth": string; /** * Sets the minimum width for the grid item using any valid numeric CSS value. E.g. "33.333%". */ "minWidth": string; /** * @default false */ "responsive": boolean; /** * @default false */ "rowReverse": boolean; /** * Theme of the grid item. * @default "" */ "theme": DuetTheme; } interface DuetHeader { /** * Adds i18n translations of all internally used textStrings * @default { fi: { skipLabel: "Siirry pääsisältöön", changeLanguage: "Vaihda kieltä", activeLanguage: "Suomi valittuna", }, sv: { skipLabel: "Hoppa till huvudinnehåll", changeLanguage: "Ändra Språk", activeLanguage: "Svenska valt", }, en: { skipLabel: "Skip to main content", changeLanguage: "Change language", activeLanguage: "English selected", }, } */ "accessibleI18nLabels": I18nText; /** * Default strings for accessibleI18nLabels * @default { fi: { skipLabel: "Siirry pääsisältöön", changeLanguage: "Vaihda kieltä", activeLanguage: "Suomi valittuna", }, sv: { skipLabel: "Hoppa till huvudinnehåll", changeLanguage: "Ändra Språk", activeLanguage: "Svenska valt", }, en: { skipLabel: "Skip to main content", changeLanguage: "Change language", activeLanguage: "English selected", }, } */ "accessibleI18nLabelsDefaults": | string | Record; /** * Accessible label that is shown for screen reader users in the mobile navigation toggle. Not visible for normal users. * @default { fi: "Valikko", sv: "Meny", en: "Menu", } */ "accessibleLabel": string; /** * Property to change accessibleLabel defaults on the component. normally you would handle these strings on an application level and override accessibleLabel when needed * @default { fi: "Valikko", sv: "Meny", en: "Menu", } */ "accessibleLabelDefaults": 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; /** * Property to change accessibleLabelExternal defaults on the component. normally you would handle these strings on an application level and override accessibleLabelExternal when needed * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelExternalDefaults": DuetLangObject | string; /** * An object that includes mandatory "label" and "href" fields for the back link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, back link won’t be shown. **NOTE: The back link should be ONLY used in combination with language and logoHref props.** */ "back": any; /** * Closes all dropdown menus in header when called. */ "closeMenus": (moveFocusToButton?: boolean) => Promise; /** * Label of the contact menu. If empty, contact menu will be hidden. Note: not available in multilevel headers. * @default "" */ "contact": string; /** * An array of items for the contact menu. "label" and "href" are mandatory. Additionally, you can pass an "id" that is added as an HTML identifier for the element, and pass an "external" flag if the link is to open in a new window. */ "contactItems": any; /** * The href of the current page item that is shown as “active”. Note: not available in multilevel headers. * @default "/" */ "currentHref": string; /** * An array of items for the main navigation. Items have to include mandatory "label" and "href" fields to work. Additionally, you can pass an "id" that is added as an HTML identifier for the element, "active" boolean that makes item active, "badge" boolean to add notification badge next to the item and "items" array consisting of sub items that are allowed up to three levels. Two and three level menus are deprecated and you should instead use Nav component to create multilevel navigations. */ "items": any; /** * The currently active language. This setting also changes the logo to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * An array of items for the language menu. If empty, the language menu will be hidden. "label", "country" and "href" are mandatory. Additionally you can pass an "id" that is added as an HTML identifier for the element. */ "languageItems": any; /** * URL that the logo link points to. * @default "/" */ "logoHref": string; /** * Region that is shown next to the logo. If empty, region will be hidden. Note: not available in multilevel header. * @default "" */ "region": string; /** * An object that includes mandatory "label" and "href" fields for the search link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, this link won’t be shown. */ "search": any; /** * An object that includes mandatory "label", "href" and "type" fields for the session login/logout link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, this link won’t be shown. */ "session": any; /** * Sets focus on the specified `duet-header`. Use this method instead of the global `header.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * The ID of the element where "skip to content" link should take the user. If empty, the functionality won’t be rendered in the DOM. * @default "" */ "skipToId": string; /** * Theme of the header. * @default "" */ "theme": DuetTheme; /** * An object that includes mandatory "label" and "href" fields for the user profile link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, user won’t be shown. Note: not available in multilevel headers. */ "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 * @default false */ "border": boolean | "solid"; /** * Custom color for the heading as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color": DuetColor; /** * Disable responsive font scaling. * @default false */ "fixedSize": boolean; /** * Enable hyphenation for long titles. Useful when there is no control over content e.g. user-generated content. * @default false */ "hyphenate": boolean; /** * The actual heading level used in the HTML markup. * @default "h2" */ "level": DuetHeadingLevel | "div"; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Theme of the heading. * @default "" */ "theme": DuetTheme; /** * Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup. */ "visualLevel": DuetVisualHeadingLevel; /** * This property allows you to set normal or semibold font weight for all sizes when needed. * @default "auto" */ "weight": DuetHeadingWeight; } interface DuetHero { /** * 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; /** * An array of items for the main actions. Items have to include mandatory "label", "href" and "icon" fields to work. Additionally, you can pass an "id" that is added as an HTML identifier for the anchor tag. */ "actions": any; /** * An object that includes mandatory "label" and "href" fields for the back link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, back link won’t be shown. **NOTE: The back link can be ONLY used in combination with "gray" style variation.** */ "back": any; /** * An object that includes any data you want to pass to the button. This data will be emitted when the button is clicked. If property analyticsId is present, then a separate duetAnalytics event will be emitted. */ "buttonData": DuetHeroButtonData; /** * ID for the button. * @default "" */ "buttonId": string; /** * Text label shown inside the button. If empty, button will be hidden. * @default "" */ "buttonLabel": string; /** * URL that the button links to. * @default "#" */ "buttonUrl": string; /** * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden. * @default "" */ "categoryIcon": DuetIconName; /** * Icon color to use for the category icon that can be used in gray hero area variation. * @default "category-pet" */ "categoryIconColor": DuetColor; /** * The description of the hero area, rendered in a P tag. If empty, description will be hidden. * @default "" */ "description": string; /** * The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden. There is also a heading slot that can be used. * @default "" */ "heading": string; /** * Icon to display to the left of the button content. If empty, icon will be hidden. * @default "" */ "icon": DuetIconName; /** * Show icon on the right side of the button content. * @default false */ "iconRight": boolean; /** * Icon size for the button. * @default "medium" */ "iconSize": DuetHeroIconSize; /** * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of Hero Area the required image size is 1200x1200px (1:1 ratio). If this property is left empty, image will be hidden. * @default "" */ "image": string; /** * Alt attribute text for the image. If not provided, image is assigned presentation role. */ "imageAlt": string; /** * Image position. * @default "auto" */ "imagePosition": "auto" | "center"; /** * Image sizing. * @default "auto" */ "imageSize": "auto" | "cover"; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Layout. * @default "narrow" */ "layout": "narrow" | "fluid"; /** * Forces all items in the header to be leftAligned This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices or allways leftAligned (you must manually switch this parameter if you need special breakpoints) this nullifies textCenter prop * @default false */ "leftAlign": boolean; /** * The level of the heading. * @default "h1" */ "level": DuetHeadingLevel; /** * An array of items for the definition list inside hero. Items have to include mandatory "label" and "value" fields to work. */ "listItems": any; /** * The headline shown before heading. * @default "" */ "preHeading": string; /** * The level of the heading. Only usable with campaign, section variations. * @default "h2" */ "subHeadingLevel": DuetHeadingLevel; /** * Centers the text in hero area. * @default false */ "textCenter": boolean; /** * Theme of the hero area. * @default "" */ "theme": DuetTheme; /** * Style variation of the hero area. * @default "default" */ "variation": DuetHeroVariation; } interface DuetIcon { /** * Custom color to be used for a circular background, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary". * @default "" */ "background": DuetColor; /** * @default 1 */ "backgroundOpacity": number; /** * @default 0 */ "backgroundRotation": number; /** * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. * @default "" */ "color": DuetColor; /** * A raw SVG string. */ "icon": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Icon name from Duet to display. * @default "action-add" */ "name": DuetIconName; /** * Custom color to be used for a circular border and icon outline, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary". * @default "" */ "outline": DuetColor; /** * Whether the icon changes its size responsively or not. * @default true */ "responsive": boolean; /** * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size. * @default "circle" */ "shape": "circle" | "brand" | "brand-rotated"; /** * Icon size. Entered as one of the icon size design tokens. * @default "medium" */ "size": DuetIconSize; /** * A URL from which to load an icon. */ "src": string; /** * Theme of the icon. This setting will be overridden when you set the color property * @default "" */ "theme": DuetTheme; } interface DuetIndicator { /** * Label for users of assistive technologies. This component has sensible defaults, but they can be replaced with this property. */ "accessibleLabel": string; /** * Theme of the component * @default "" */ "theme": DuetTheme; /** * The variation of the indicator. Typically "change" and "new" are used; "error" and "success" should be used only in special cases, as errors and succeses normally require a more prominent message. * @default "change" */ "variation": IndicatorVariation; } interface DuetInput { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Indicates what kind of user input completion suggestions are provided. */ "accessibleAutocomplete": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id or a string of space seperated ids of a component(s) that describes the input. * @default "" */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Aria Details of the component * @default undefined */ "accessibleDetails": string; /** * Expanded state of the element, if needed */ "accessibleExpanded": string; /** * @deprecated , use `accessiblePopup` property instead * @default undefined */ "accessibleHasPopup": string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the input. */ "accessibleOwns": string; /** * Indicates value of any popup element associated with the input. * @default undefined */ "accessiblePopup": string; /** * Add a chip to the input. Property "chips" must be true. */ "addChip": (chip: HTMLDuetChipElement) => Promise; /** * Enable or disable automatic completion by the browser * @default "on" */ "autoComplete": string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption": string; /** * Render a container into which Duet Chip components can be added with the method "addChip". * @default false */ "chips": boolean; /** * If set, the input field will display a clear button that can be accessed with tabbing. * @default false */ "clear": boolean; /** * Remove all chips from the input. */ "clearChips": () => Promise; /** * Reset the cursor position on the native element `input.resetCursor()`. */ "clearInput": () => Promise; /** * @default "input" */ "component": DuetInputComponentType; /** * Set the amount of time, in milliseconds, to wait to trigger the duetChange event after each keystroke. * @default 0 */ "debounce": number; /** * Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * A regular expression that matches any characters which should be *disallowed*. This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression. e.g. the following will disallow any non-numeric characters `[^0-9]` * @default null */ "disallowPattern": string; /** * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) * @default false */ "echoPlaceholder": boolean; /** * Display the input in error state along with an error message. * @default "" */ "error": string; /** * Expands the input to fill 100% of the container width. * @default false */ "expand": boolean; /** * Get all chips from the input. */ "getChips": () => Promise; /** * Does the input have a chip with the given value and text. */ "hasChip": ({ value, text }: { value: string; text: string; }) => Promise; /** * Icon to display on the right side (from Duet’s icons). Example: "form-location" */ "icon": DuetIconName; /** * Adds a unique identifier for the input. */ "identifier": string; /** * Alignment of the input element * @default "left" */ "inputAlign": "left" | "right"; /** * Padding of the input element. Use this only in special cases, never with regular forms. Setting this to other than the default will not work properly with button variation or together with icons. * @default "medium" */ "inputPadding": DuetInputPadding; /** * Label for the input. * @default "Label" */ "label": string; /** * Color of the label. */ "labelColor": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Font weight of the label. */ "labelWeight": DuetTextFontWeight; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Use maxlength to specify the maximum length of the value that can be entered. */ "maxlength": number; /** * Use minlength to specify the minimum length of the value that can be entered. */ "minlength": number; /** * Name of the input. */ "name": string; /** * @readonly */ "nativeInputElement": HTMLElement; /** * Enable numeric keyboard for the input. * @default false */ "numericKeyboard": boolean; /** * A regular expression to check the value against. Please note that this uses native HTML5 pattern validation. */ "pattern": string; /** * Hint text to display. */ "placeholder": string; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required": boolean; /** * Reset the cursor position on the native element `input.resetCursor()`. */ "resetCursor": () => Promise; /** * Defines a specific role attribute for the input. */ "role": string | null; /** * Sets focus on the specified `duet-input`. Use this method instead of the global `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the input. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip": string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection": DuetTooltipDirection; /** * Type of the input. * @default "text" */ "type": DuetInputType; /** * This is a proxy for the enclosed native inputs validity * @readonly */ "validity": ValidityState; /** * Value of the input. */ "value": string; /** * 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. * @default "default" */ "variation": DuetVariationType; } interface DuetLabel { /** * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color": DuetColor; /** * ID of the component that the label is labelling. */ "for": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetLabelMargin; /** * Controls the size of the label. * @default "medium" */ "size": DuetLabelSize; /** * Theme of the label. * @default "" */ "theme": DuetTheme; /** * Controls the weight of the label. * @default "semi-bold" */ "weight": DuetTextFontWeight; } interface DuetLayout { /** * Center align all direct children of this component. * @default false */ "center": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Align container vertically in the middle when the space allows it. * @default false */ "middle": boolean; /** * Breakpoint used to remove padding. These match to similar media query tokens: $media-query-small and $media-query-medium. * @default undefined */ "paddingBreakpoint"?: DuetBreakpoints; /** * Makes the sidebar stick to the top of the window when scrolling down. * @default false */ "sticky": boolean; /** * Adjust sticky sidebar’s distance to duet navigation component using this property. * @default "with-links" */ "stickyDistance": DuetLayoutStickyDistance; /** * If set to true, the sidebar position will be adjusted to take tabs inside main content area into account. * @default false */ "tabs": boolean; } interface DuetLink { /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. Only works with empty url. */ "accessibleExpanded": boolean; /** * 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"} */ "accessibleLabelDownload": string; /** * Defaults for accessibleLabelDownload * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelDownloadDefaults": 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; /** * 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. Only works with empty url. * @default "false" */ "accessiblePopup": string; /** * Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. With a value, it will be used as the name for the downloaded file. Without a value, the browser will suggest a name. NOTE: this attribute only works for same-origin URLs, or the blob: and data: schemes. * @default null */ "download": string; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external": boolean; /** * Icon to display on the left side of the link text (only with "block" and "button" variations) */ "icon": DuetIconName; /** * Color of the icon to display (with "button" variation) or color of the bullet (with "article-list" variation). Not used for other variations. * @default null */ "iconBackground": DuetColor; /** * Color of the icon to display (only with "block" and "button" variations) * @default "currentColor" */ "iconColor": DuetIconColor; /** * Whether the icon changes its size responsively (only with "block" variation) * @default false */ "iconResponsive": boolean; /** * Adds a unique identifier for the link. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead. */ "identifier": string; /** * The currently active language. This setting changes the external link accessible label to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Controls the margin of the component (only with "button" variation) * @default "auto" */ "margin": DuetMargin; /** * Controls the padding of the component (only with "block" variation) * @default "auto" */ "padding": DuetPadding; /** * Sets focus on the specified `duet-link`. Use this method instead of the global `link.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Initially visually hidden link, which is shown on focus. * @default false */ "tabToLink": boolean; /** * Theme of the button. * @default "" */ "theme": DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. * @default "#" */ "url": string; /** * Style variation of the link. * @default "default" */ "variation": DuetLinkVariation; } interface DuetList { /** * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens: $media-query-small and $media-query-large. * @default "small" */ "breakpoint": DuetListBreakpoint; /** * Set the column width of the first column in percentages. For automatic sizing of the column you can use class "duet-list" with a native <dl> element. See list utilities of the CSS framework. * @default "30" */ "labelWidth": DuetListLabelWidth; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Adjusts the alignment of the list items on mobile breakpoint. * @default "left" */ "mobile": DuetListMobileAlignment; /** * Controls the padding of the component. * @default "auto" */ "padding": DuetPadding; /** * Enable or disable the automatic responsive behaviour of the list component. Setting this option to "true" makes sure that contents are stacked vertically on mobile. When "false" is set, contents are always shown in a single row. * @default true */ "responsive": boolean; /** * Theme of the list. * @default "" */ "theme": DuetTheme; /** * Style variation of the list. * @default "default" */ "variation": DuetListVariation; } interface DuetListItem { /** * @default "small" */ "breakpoint": DuetListBreakpoint; /** * @default false */ "responsive": boolean; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetLogo { /** * Accessible label. Defaults to what is in accessibleLabelDefaults prop. * @default getLocaleString(this.accessibleLabelDefaults) */ "accessibleLabel": string; /** * Default translations for accessible label. * @default { fi: "Siirry etusivulle.", sv: "Gå till förstasidan.", en: "Go to front page.", } */ "accessibleLabelDefaults": DuetLangObject; /** * Where the logo links to. * @default "/" */ "href": string; /** * Use inverse version of the logo (white logo on dark background). * @default false */ "inverse": boolean; /** * The language of the logo. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * @default false */ "onlySymbol": boolean; /** * Sets focus on the specified `duet-logo`. Use this method instead of the global `logo.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Size variation of the logo. * @default "medium" */ "size": DuetLogoSize; /** * Theme of the logo. * @default "" */ "theme": DuetTheme; } interface DuetMenuBar { /** * 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; /** * Makes the menu bar hide on top of the window when page is scrolled down Should be used only with sticky navigation. * @default false */ "hideOnScroll": boolean; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Logo. * @default true */ "logo": boolean; /** * Logo href. */ "logoHref": string; /** * Additional information text to show next to the logo. Show only when the center slot is empty. */ "logoInfoText": string; /** * Logo link accessible label. */ "logoLinkAccessibleLabel": string; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetMenuBarButton { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages. */ "accessibleControls": string; /** * Indicates the id of a component that describes the button. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Details of the component * @default undefined */ "accessibleDetails": string; /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded": boolean; /** * 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; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Indicates the id of a component owned by the button. */ "accessibleOwns": string; /** * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button. * @default "false" */ "accessiblePopup": string; /** * Tells screen reader the element is pressed. */ "accessiblePressed": boolean; /** * Icon * @default undefined */ "icon": string; /** * Sets focus on underlying button element. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetMenuBarDropdown { /** * 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; /** * Icon * @default undefined */ "icon": string; /** * Open * @default false */ "open": boolean; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetMenuBarDropdownLink { /** * 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; /** * Href * @default "#" */ "href": string; /** * Icon * @default undefined */ "icon": string; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetMenuBarItem { /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded": boolean; /** * 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. * @default "false" */ "accessiblePopup": string; /** * Active * @default false */ "active": boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external": boolean; /** * Left icon. * @default undefined */ "leadingIcon": DuetIconName; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; /** * Right icon. * @default undefined */ "trailingIcon": DuetIconName; /** * Url */ "url": string; } interface DuetMenuBarLink { /** * 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; /** * Active * @default false */ "active": boolean; /** * Href * @default "#" */ "href": string; /** * Icon * @default undefined */ "icon": string; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetModal { /** * Makes either the entire modal ("all"), headign and body content ("heading"), or just its body content ("body") an aria-live region, so that changes are announced by the screen readers. Do not use with loader variation, as it handles aria-live separately. */ "accessibleAnnounceChanges": "all" | "heading" | "body"; /** * Adds accessible label for the close icon that is only shown for screen readers. This property is always required to create an accessibly interface! Swedish translation for this property is “Stäng fönstret”. * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", } */ "accessibleCloseLabel": string; /** * Indicates the id or a string of space seperated ids of a component(s) that describes the input. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Details of the component * @default undefined */ "accessibleDetails": string; /** * By default the heading is used aria-label for the modal. If you wish to use something else then you must set this label. */ "accessibleLabel": string; /** * Indicates the id or a string of space seperated ids of a component(s) that labels the input. */ "accessibleLabelledBy": string; /** * When modal used as a lodader, as an audible substitute for the spinner, we use this message * @default {fi: "Odota, ole hyvä.", sv: "Vänligen vänta.", en: "Please wait.", } */ "accessibleLoaderAnnouncement": string; /** * Use this property when you need to have the modal dialog initially active. * @default false */ "active": boolean; /** * Adds a message to the modal dialog using animation and annoucing it to screen readers. Primarily for use with the loader variation. * @param message The message to be added to the modal dialog. * @param visible Set to false if you want to add a non-visual message. */ "addMessage": (message: string, visible?: boolean) => Promise; /** * Use this property when you want the modal to close when clicked outside of modal. * @default false */ "closeOnBlur": boolean; /** * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "primary". * @default "" */ "color": DuetColor; /** * Set focus on the close button of the modal. */ "focusCloseButton": () => Promise; /** * Where to move focus when the modal is closed, either set the element dirctly with JS or give the id of the element as a string. Use empty string to disable focus moving on close - do this if after closing there is another element that automatically gets the focus or you handle focusing manually. */ "focusElementOnClose": FocusableComponent | HTMLElement | string; /** * Size of the modal window's padding. * @default "medium" */ "gutterSize": DuetModalSize | "none"; /** * Accessible heading displayed in the modal. The modal marks this as the label of the modal when used. This helps screen reader users which is why this is a required property. * @default "" */ "heading": string; /** * Accessible heading size * @default "h3" */ "headingLevel": DuetHeadingLevel; /** * Makes the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup. */ "headingVisualLevel": DuetVisualHeadingLevel | undefined; /** * Hides the modal dialog and puts focus back to the original element that triggered the modal (if we’re still in the same view). */ "hide": () => Promise; /** * Icon to display above the heading (from Duet’s icons). Example: "form-location" * @default "" */ "icon": DuetIconName; /** * The currently active language. This setting also changes the logo to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Scolls the top of the modal's content into view * @param smooth Set to false for instant scrolling */ "scrollToTop": (smooth?: boolean) => Promise; /** * Shows the modal dialog. Additionally saves the element that triggered the modal so that focus can be moved back to this specific element when the modal dialog is closed. */ "show": () => Promise; /** * Size of the modal window. * @default "medium" */ "size": DuetModalSize; /** * Theme of the modal. * @default "" */ "theme": DuetTheme; /** * Variation of the modal window. Slide-up variation has fixed height so it suits well for situations where the modal content height changes. Loader variation is used when the user initiates an action that takes time to complete - it can be used with addMessage() method to insert accessible message to the modal to inform the user about the progress. * @default "default" */ "variation": DuetModalVariation; } interface DuetMultiselect { /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy": string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * If set, the multiselect will display buttons to select or deselect all items. This should be used when there are many items, consider when the number of items is more than 5. * @default false */ "allControls": boolean; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption": string; /** * Makes the select component disabled. This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * Display the select in error state along with an error message. * @default "" */ "error": string; /** * Expands the input to fill 100% of the container width. * @default false */ "expand": boolean; /** * Adds a unique identifier for the select. * @default createID("DuetMultiselect") */ "identifier": string; /** * An array of items to choose from */ "items": string | DuetMultiselectItem[] | DuetMultiselectItemGroup[]; /** * Label for the select. * @default "label" */ "label": string; /** * Color of the label. */ "labelColor": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Font weight of the label. */ "labelWeight": DuetTextFontWeight; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Hint text to display. * @default "" */ "placeholder": string; /** * Sets the value of the multiselect to contain the items matching the given array. Does not clear the previous value. If multiple items share the same value that is included in the array, they all get selected. */ "selectWithValues": (values: string[]) => Promise; /** * Sets focus on the specified `duet-multiselect`. Use this method instead of the global `multiselect.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the select. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip": string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection": DuetTooltipDirection; /** * Value of multiselect * @default [] */ "value": DuetMultiselectItem[]; } interface DuetNav { /** * Makes navigation sticky so it stays on top. when page is being scrolled. Works only for mobile. * @default false */ "sticky": boolean; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetNotification { /** * Adds accessible label for tooltip that is shown over unread counter * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" } */ "accessibleLabelUnread": string; /** * Property to change accessibleLabelUnread defaults on the component. normally you would handle these strings on an application level and override accessibleLabelUnread when needed * @default { en: "Unread", fi: "Lukematon", sv: "Oläst", } */ "accessibleLabelUnreadDefaults": DuetLangObject; /** * The date of the notification. * @default "" */ "date": string; /** * Should the link open in a new window? * @default false */ "external": boolean; /** * Should the notification be visually highlighted? * @default false */ "highlight": boolean; /** * The currently active language. Used for announcing unread notifications to screen readers. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Move focus to the notification's link element. Use this method instead of the native `focus()` method. * @param options */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the notification. * @default "" */ "theme": DuetTheme; /** * The url to open on notification click. * @default "#" */ "url": string; } interface DuetNotificationDrawer { /** * Adds accessible label for tooltip that is shown for notifications * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"} */ "accessibleLabelNotifications": string; /** * Defaults for accessibleLabelNotifications * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"} */ "accessibleLabelNotificationsDefaults": | DuetLangObject | string; /** * Show a badge that indicates something has changed. * @default false */ "badge": boolean; /** * Close the menu * @param moveFocusToButton should focus be moved to the menu's button on close? */ "close": (moveFocusToButton?: boolean) => Promise; /** * Which direction should the drawer open in? * @default "left" */ "direction": DuetNotificationDrawerDirection; /** * Icon to display to the left of the drawer button. * @default "" */ "icon": DuetIconName; /** * Label for the drawer button. * @default "Label" */ "label": string; /** * The currently active language. Used to determine the message displayed when there are no notifications. * @default getLanguage() */ "language": DuetLanguage; /** * Open the menu */ "open": () => Promise; /** * Move focus to the menu's button. Use instead of the native `focus()` method * @param options */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the notification drawer. * @default "" */ "theme": DuetTheme; } interface DuetNumberInput { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Accessible label for the add button that is read for screen reader users. The placeholders {step} and {unit} are replaced with respective properties. * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"} */ "accessibleAdd": string; /** * Defaults for accessibleAdd * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"} */ "accessibleAddDefaults": DuetLangObject | string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Details of the component * @default undefined */ "accessibleDetails": string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Format of message used to announce current amount when switching between amounts. Note that the default has "euros" so if you use another unit is is essential you set this attribute to reflect that unit. The string {current} is replaced with the current amount. * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"} */ "accessibleLive": string; /** * Defaults for accessibleLive * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"} */ "accessibleLiveDefaults": DuetLangObject | string; /** * Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead. * @default true */ "accessibleLiveEnabled": boolean; /** * Indicates the id of a component owned by the input. */ "accessibleOwns": string; /** * Accessible label for the subtract button that is read for screen reader users. The placeholders {step} and {unit} are replaced with respective properties. * @default {fi: "Vähennä {step} {unit}", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"} */ "accessibleSubtract": string; /** * Defaults for accessibleSubtract * @default {fi: "Vähenn {step} {unit}ä", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"} */ "accessibleSubtractDefaults": DuetLangObject | string; /** * Makes the number input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * Display the input in error state along with an error message. * @default "" */ "error": string; /** * Expands the input to fill 100% of the container width. * @default false */ "expand": boolean; /** * Returns a promise which resolves to the current input numeric value. */ "getValueAsNumber": () => Promise; /** * 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. * @default false */ "labelHidden": boolean; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands separators would break keyboard input. * @default getLocale(this.language).locale */ "locale": DuetLocale; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Maximum value. * @default 1000000 */ "max": number; /** * Minimum value. * @default 0 */ "min": number; /** * 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. * @default false */ "required": boolean; /** * Defines a specific role attribute for the input. */ "role": string | null; /** * Controls whether or not value gets rounded to the nearest multiple of a step on blur. Set to "false" to disable this behaviour. * @default true */ "rounding": boolean; /** * Sets focus on the specified `duet-number-input`. Use this method instead of the global `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Step amount. * @default 5000 */ "step": number; /** * Theme of the input. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip": string; /** * Unit for the number input. * @default getLocale(this.language).money */ "unit": string; /** * Value of the input. This is passed as a string since Number Input uses Duet’s Input component internally and we need the value to support spaces and the unit as well. */ "value": string; } interface DuetOverlay { /** * Mode * @default "all" */ "displayDevice": OverlayDisplayDevice; /** * Keep stacking context * @default false */ "keepStackingContext": boolean; /** * Modal overlay * @default false */ "modalOverlay": boolean; /** * Theme * @default "" */ "theme": DuetTheme; /** * Transition * @default "slowly" */ "transition": "quickly" | "slowly" | "immediate"; /** * Variation, dark and white can be used when we want to have text on the overlay * @default "default" */ "variation": "default" | "dark" | "white"; /** * Open * @default true */ "visible": boolean; /** * Z-index * @default "400" */ "zIndex": string; } interface DuetPageHeading { /** * Icon. * @default "" */ "icon": DuetIconName; /** * Layout. Values narrow and fluid are deprecated. * @default "narrow" */ "layout": "narrow" | "fluid" | "auto"; /** * Current step of total steps in progress indicator. (Current step should start from 1, not 0.) To render a progress indicator both progressTotalSteps and progressCurrentStep must be given. */ "progressCurrentStep": number; /** * Total steps amount in progress indicator. To render a progress indicator both progressTotalSteps and progressCurrentStep must be given */ "progressTotalSteps": number; /** * Theme of the hero area. * @default "" */ "theme": DuetTheme; } interface DuetPagination { /** * Described By id * @default undefined */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Details of the component * @default undefined */ "accessibleDetails": string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Default pagination labels * @default getLocaleString( this.accessibleLabelsDefaults ) */ "accessibleLabels": Record; /** * Default pagination labels * @default { en: { next_page: "Next page", previous_page: "Previous page", first_page: "First page", last_page: "Last page", jump_to: "Jump to page", go_to: "Go to page", description: "You may use arrow keys to select page number", pagination_label: "Pagination, choose a number to jump to a page", select_label: "Total pages {0}, choose a number to jump to a page", prev_section: "Show previous {0} page numbers, screen reader user should use arrowkeys to navigate", next_section: "Show next {0} page numbers, screen reader user should use arrowkeys to navigate", }, fi: { next_page: "Seuraava sivu", previous_page: "Edellinen sivu", first_page: "Ensimmäinen sivu", last_page: "Viimeinen sivu", jump_to: "Siirry sivulle", go_to: "Siirry sivulle", description: "Voit käyttää nuolinäppäimiä sivunumeron valitsemiseen", pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle", select_label: "Sivuja yhteensä {0}, valitse sivunumero siirtyäksesi sivulle", prev_section: "Näytä edelliset {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi", next_section: "Näytä seuraavat {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi", }, sv: { next_page: "Nästa sida", previous_page: "Föregående sida", first_page: "Första sidan", last_page: "Sista sidan", jump_to: "Hoppa till sida", go_to: "Hoppa till sida", description: "Du kan använda piltangenterna för att välja sida", pagination_label: "Paginering, välj en siffra för att hoppa till en sida", select_label: "Totalt antal sidor {0}, välj en siffra för att hoppa till en sida", prev_section: "Visa föregående {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera", next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera", }, } */ "accessibleLabelsDefaults": DuetLangObject; /** * Used to indicate which dom element with ID this element controls * @default "" */ "ariaControls": string; /** * Breakpoint at which the pagination should be rendered as compact with a select element * @default "x-small" */ "compactBreakpoint": DuetBreakpoints | "none"; /** * The current page * @default 1 */ "current": number; /** * Makes the controls of pagination component disabled. * @default false */ "disabled": boolean; /** * Array of urls that are used to create page links */ "pageLinks": string[] | string; /** * The size of the take, when paginating. * @default 5 */ "take": number; /** * Theme of the pagination. * @default "" */ "theme": DuetTheme; /** * The total size of the paginating data * @default 1000 */ "total": number; /** * Variation of the paginator (compact and default supported) * @default "default" */ "variation": DuetPaginationVariation; /** * Amount of visible page numbers to show * @default 5 */ "visibleItems": number; } interface DuetPanel { /** * Indicates the id of a component that describes the panel. */ "accessibleDescribedBy": string; /** * Adds accessible label for the panel that is only shown for screen readers. */ "accessibleLabel": string; /** * Indicates the id of a component that labels the panel. */ "accessibleLabelledBy": string; /** * Set this attribute to draw a border around the panel. */ "border": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Controls the padding of the component. Padding is automatically responsive. * @default "medium" */ "padding": "small" | "medium" | "large"; /** * Theme of the panel. * @default "" */ "theme": DuetTheme; /** * The color variation of the panel. Combination of palette ("default", "accent") and palette variation ("primary", "secondary"). You can ommit "default" and "primary" - they are the defaults. * @default "" */ "variation": DuetPanelVariation; } interface DuetParagraph { /** * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color": DuetColor; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Controls the size of the paragraph. * @default "medium" */ "size": DuetParagraphSize; /** * Theme of the paragraph. * @default "" */ "theme": DuetTheme; /** * Style variation of the paragraph. * @default "default" */ "variation": DuetParagraphVariation; /** * Controls the Font-Weight of the paragraph. * @default undefined */ "weight": DuetParagraphWeight; } interface DuetPhoneInput { /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Details of the component * @default undefined */ "accessibleDetails": string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption": 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. * @default Object.values(countries).filter(country => !!country.telephoneCountryCode) */ "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. * @default false */ "disabled": boolean; /** * Display the input in error state along with an error message. * @default "" */ "error": string; /** * Expands the input to fill 100% of the container width. * @default false */ "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. * @default false */ "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. * @default "auto" */ "margin": DuetMargin; /** * Use maxlength to specify the maximum length of the value that can be entered. */ "maxlength": number; /** * Use minlength to specify the minimum length of the value that can be entered. */ "minlength": number; /** * 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. * @default false */ "required": boolean; /** * Sets focus on the contained input element, use this instead of the native `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the input. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip": string; /** * This is a proxy for the enclosed native inputs validity * @readonly */ "validity": ValidityState; /** * 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. */ "accessibleLabel": string; /** * Accessible role. * @default "menu" */ "accessibleRole": "menu" | "listbox" | "list"; /** * Allow vertical flip when there is not enough space below the controller. * @default true */ "allowVerticalFlip": boolean; /** * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given, the component automatically sets the click event listener to open and close the popup-menu. */ "controller": | string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent) | HTMLElement; /** * By default Popup Menu adds "action-arrow-down-small" icon to the controller. This can be removed with controller-icon="". * @default "action-arrow-down-small" */ "controllerIcon": string; /** * Cross axis positioning offset of the popup menu relative to its controller. For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical. * @default 0 */ "crossAxisOffset": number; /** * Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute. * @default false */ "forcePlacement": boolean; /** * Hide. */ "hide": () => Promise; /** * isOpen. */ "isOpen": () => Promise; /** * Main axis positioning offset of the popup menu relative to its controller. For "top" and "bottom" placements main axis is vertical, for "left" and "right" horizontal. * @default 0 */ "mainAxisOffset": number; /** * Alias for property controller. */ "opener": string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent); /** * Placement of the popup menu relative to its controller. Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end". * @default "bottom-start" */ "placement": | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"; /** * Position. * @default "absolute" */ "position": "absolute" | "fixed"; /** * Limit the amount of visible items in Popup Menu before showing a scroll bar. */ "scrollLimit": number; /** * Show. */ "show": () => Promise; /** * 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. * @default "" */ "theme": DuetTheme; /** * Toggle. */ "toggle": () => Promise; } interface DuetPopupMenuItem { /** * Adds accessible label for the button or link 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; /** * Accessible role. * @default "menuitem" */ "accessibleRole": "menuitem" | "listitem" | "option"; /** * Is the item currently active (e.g. selected) * @default false */ "active": boolean; /** * @default false */ "activeDescendant": boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external": boolean; /** * isFocused. */ "isFocused": () => Promise; /** * Left icon. * @default undefined */ "leadingIcon": DuetIconName; /** * Left icon color. * @default undefined */ "leadingIconColor": DuetIconColor; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Language of the link. Use this only for language selection links. * @default undefined */ "targetLanguage": "en" | "fi" | "sv"; /** * Theme. * @default "" */ "theme": DuetTheme; /** * Right icon. * @default undefined */ "trailingIcon": DuetIconName; /** * Short text to display after the label, e.g. keyboard shortcut. * @default undefined */ "trailingText": string; /** * A destination to link to, rendered in the href attribute of a link. */ "url": string; /** * Value * @default undefined */ "value": string; } interface DuetProgress { /** * Indicates the id of a component that describes the upload component. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Aria Details of the component * @default undefined */ "accessibleDetails": string; /** * Indicates the aria-label of the component - this will get combined with an label+uploading when uploading, and label+upload complete when upload is complete */ "accessibleLabel": string; /** * Adds accessible label for upload in progress and upload complete states * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en: ["completed", "in progress"]} */ "accessibleLabelUpload": string; /** * Defaults for accessibleLabel * @default { fi: ["lähetys valmis", "lähetys käynnissä"], sv: ["Uppladdningen är klar", "Uppladdning pågår"], en: ["upload completed", "upload in progress"], } */ "accessibleLabelUploadDefaults": DuetLangObject | string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption": string; /** * Height of progressbar * @default "10px" */ "height": string; /** * Progress of the bar, a value from 0-100 * @default 0 */ "progress": number; /** * Theme of the input. * @default "" */ "theme": DuetTheme; } interface DuetPromoCard { /** * Background color. * @default "" */ "backgroundColor": DuetColor | ""; /** * The actual heading level used in the HTML markup. * @default "h3" */ "headingLevel": DuetHeadingLevel; /** * Image. Example image is 512x341; * @default "" */ "image": string; /** * Alt attribute text for the image. If not provided, image is assigned presentation role. */ "imageAlt": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Sets focus on underlying a element. Available only when url attribute is used. Use this method instead of the native `focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Text color. * @default "secondary" */ "textColor": DuetColor; /** * Theme. * @default "" */ "theme": DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. */ "url": string; } interface DuetRadio { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the radio. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Aria Details of the component * @default undefined */ "accessibleDetails": string; /** * Control the tabindex of checkbox. In most cases this should never be used! It exists only for Duet’s internal needs. */ "accessibleIndex": string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Indicates the id of a component owned by the radio. */ "accessibleOwns": string; /** * Stops the components from emitting events * @default false */ "blockEvents": boolean; /** * Check state of the radio. */ "checked": boolean; /** * Makes the radio component disabled. This prevents users from being able to interact with the radio, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; "groupDirection": DuetDirection; "groupDisabled": boolean; "groupResponsive": boolean; /** * Adds a unique identifier for the radio. */ "identifier": string; /** * Label for the radio. * @default "label" */ "label": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Name of the radio. */ "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. * @default false */ "required": boolean; /** * Defines a specific role attribute for the input. */ "role": string | null; /** * Sets focus on the specified `duet-radio`. Use this method instead of the global `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the radio. * @default "" */ "theme": DuetTheme; /** * The value of the radio input does not mean if it's checked or not, use the checked property for that. */ "value": string; } interface DuetRadioGroup { /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * Additional caption to show inside the label of the radio group. * @default "" */ "caption": string; /** * Direction of the radio group. * @default "vertical" */ "direction": DuetDirection; /** * Determines, whether the control is disabled or not. */ "disabled": boolean; /** * Display radio group in error state along with an error message. * @default "" */ "error": string; /** * Legend displayed for the radio buttons in this group. * @default "Label" */ "label": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Name for the radio buttons within this group. **This must be unique amongst all other inputs.** */ "name": string; /** * Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well. * @default false */ "required": boolean; /** * Enable or disable the automatic responsive behaviour of the radio group component when horizontal setting is used. Setting this option to "true" makes sure that contents are stacked vertically on mobile. * @default false */ "responsive": boolean; /** * Theme of the radio group. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the radio group. * @default "" */ "tooltip": string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection": DuetTooltipDirection; /** * The value of the selected radio button. */ "value": string; } interface DuetRangeSlider { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy": string; /** * Indicates the id of a component owned by the input. */ "accessibleOwns": string; /** * Set the amount of time, in milliseconds, to wait to trigger the duetChange event after each keystroke. * @default 0 */ "debounce": number; /** * Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * Expands the input to fill 100% of the container width. * @default false */ "expand": boolean; /** * Adds a unique identifier for the input. */ "identifier": string; /** * Label for the range slider. * @default "label" */ "label": string; /** * Color of the label. */ "labelColor": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Font weight of the label. */ "labelWeight": DuetTextFontWeight; /** * Locale used to format the entered value. * @default "fi-FI" */ "locale": DuetLocale; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Maximum value. * @default 100 */ "max": number; /** * Minimum value. * @default 0 */ "min": number; /** * Name of the input. */ "name": string; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required": boolean; /** * Sets focus on the specified `duet-range-slider`. Use this method instead of the global `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Step amount. * @default 1 */ "step": number; /** * Theme of the input. * @default "" */ "theme": DuetTheme; /** * Unit for the range slider. * @default "" */ "unit": string; /** * Value of the input. * @default 0 */ "value": number; } interface DuetRangeStepper { /** * Used to indicate which dom element with ID this element controls * @default "" */ "ariaControls": string; /** * Default pagination labels * @default getLocaleString( this.ariaLabelsDefaults ) */ "ariaLabels": Record; /** * Default range stepper labels * @default { en: { next_increment: "Next range increment", previous_increment: "Previous range increment", x_of_y: "{0}–{1} of {2}", }, fi: { next_increment: "Seuraava välillä", previous_increment: "Edellinen välillä", x_of_y: "{0}–{1} / {2}", }, sv: { next_increment: "Nästa intervall", previous_increment: "Föregående intervall", x_of_y: "{0}–{1} av {2}", }, } */ "ariaLabelsDefaults": DuetLangObject; /** * Makes the controls of range-stepper component disabled. * @default false */ "disabled": boolean; /** * Start value * @default 1 */ "stepIndex": number; /** * How big is the step * @default 50 */ "stepSize": number; /** * Theme of the component. * @default "" */ "theme": DuetTheme; /** * Total of * @default undefined */ "total": number; } interface DuetScrollable { /** * Vertical alignment of the previous and forward buttons. Defaults to center. * @default "center" */ "buttonAlignment": "top" | "center" | "bottom"; /** * @default "relative" */ "buttonPosition": "absolute" | "relative"; /** * Whether or not include previous and forward buttons. Defaults to true. * @default true */ "buttons": boolean; /** * Center the scrollable list. Defaults to false. * @default false */ "center": boolean; /** * Boolean to collapse scrollable items into normal flow. * @default false */ "collapsed": boolean; /** * @default "large" */ "gap": "none" | "large"; /** * Optional identifier to add to buttons in the tab group * @default "" */ "identifier": string; /** * Whether to add padding to the scrollable list to account for overflowing elements, such as shadows or outlines. * @default "none" */ "padding": DuetOverflowPadding; /** * Scrolls the scrollable so that the last item is visible */ "scrollToEnd": () => Promise; /** * Scrolls the scrollable so that the desired item is visible * @param itemIndex The first item is 1 */ "scrollToItem": (itemIndex: number) => Promise; /** * Scrolls the scrollable so that the first item is visible */ "scrollToStart": () => Promise; /** * Selected element * @default 0 */ "selected": number; /** * Enables stretch mode for tab groups * @default false */ "stretch": boolean; /** * Theme of duet-tab-scrollable. When used this will override the color setting and use "primary" or "primary-turva" as the color depending on which theme is chosen. * @default "" */ "theme": DuetTheme; } interface DuetSectionLayout { /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Align container vertically in the middle when the space allows it. * @default false */ "middle": boolean; /** * Breakpoint used to remove padding. These match to similar media query tokens: $media-query-small and $media-query-medium. * @default undefined */ "paddingBreakpoint"?: DuetBreakpoints; } interface DuetSelect { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy": string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the select. */ "accessibleOwns": string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption": string; /** * Makes the select component disabled. This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) * @default false */ "echoPlaceholder": boolean; /** * Display the select in error state along with an error message. * @default "" */ "error": string; /** * Expands the input to fill 100% of the container width. * @default false */ "expand": boolean; /** * Adds a unique identifier for the select. */ "identifier": string; /** * An array of items to choose from */ "items": string | DuetSelectItems; /** * Label for the select. * @default "label" */ "label": string; /** * Color of the label. */ "labelColor": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Font weight of the label. */ "labelWeight": DuetTextFontWeight; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Name of the select. */ "name": string; /** * Hint text to display. * @default "" */ "placeholder": string; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required": boolean; /** * Defines a specific role attribute for the select. */ "role": string | null; /** * Sets focus on the specified `duet-select`. Use this method instead of the global `select.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the select. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip": string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection": DuetTooltipDirection; /** * The selected value of the select */ "value": string; /** * Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons, like with compact pagination. * @default "default" */ "variation": DuetSelectVariation; } interface DuetShapedImage { /** * Adds accessible label for the image that is only shown for screen readers. */ "accessibleLabel": string; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Rotation. Note: in 'turva' theme there's no rotation. * @default "7" */ "rotation": 7 | -7; /** * A URL from which to load an image. */ "src": string; /** * Theme of the component. * @default "" */ "theme": DuetTheme; } interface DuetShareChart { /** * Theme of the component. * @default "" */ "theme": DuetTheme; /** * The string to show after each items value. When using "%" the enclosed items' values should add up to 100. * @default "%" */ "unit": string; } interface DuetShareChartItem { /** * The color to use in the graph given as a Duet color token. If left out, the Share chart picks a color from a default set. */ "color": DuetColor; /** * The value of the item. * @default 0 */ "value": number; } interface DuetShowMore { /** * Controls the margin of the button component inside of show more. * @default "auto" */ "buttonMargin": DuetMargin; /** * Controls the padding of the button component inside of show more. * @default "auto" */ "buttonPadding": DuetPadding; /** * The currently active language. This setting also changes the logo to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Is the component expanded or collapsed. * @default false */ "open": boolean; /** * Show less accessible label. Defaults to what is in showLessAccessibleLabelDefaults prop. * @default getLocaleString( this.showLessAccessibleLabelDefaults ) */ "showLessAccessibleLabel": string; /** * Default translations for show less accessible label. * @default { fi: "Näytä vähemmän tästä aiheesta", sv: "Visa mindre om detta ämne", en: "Show less about this subject", } */ "showLessAccessibleLabelDefaults": DuetLangObject; /** * Show less label. Defaults to what is in showLessLabelDefaults prop. * @default getLocaleString(this.showLessLabelDefaults) */ "showLessLabel": string; /** * Default translations for show less label. * @default { fi: "Näytä vähemmän", sv: "Visa mindre", en: "Show less", } */ "showLessLabelDefaults": DuetLangObject; /** * Show more accessible label. Defaults to what is in showMoreAccessibleLabelDefaults prop. * @default getLocaleString( this.showMoreAccessibleLabelDefaults ) */ "showMoreAccessibleLabel": string; /** * Default translations for show more accessible label. * @default { fi: "Näytä lisää tästä aiheesta", sv: "Visa mer om detta ämne", en: "Show more about this subject", } */ "showMoreAccessibleLabelDefaults": DuetLangObject; /** * Show more label. Defaults to what is in showMoreLabelDefaults prop. * @default getLocaleString(this.showMoreLabelDefaults) */ "showMoreLabel": string; /** * Default translations for show more label. * @default { fi: "Näytä lisää", sv: "Visa mer", en: "Show more", } */ "showMoreLabelDefaults": DuetLangObject; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetSlideout { /** * Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems. * @default "menubar" */ "accessibleRole": string; /** * Background color. Use one of the color tokens. * @default "gray-lightest" */ "backgroundColor": DuetColor; /** * Alias for property opener. */ "controller": string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent); /** * Hides the slideout dialog and puts focus back to the original element that triggered the slideout (if we’re still in the same view). */ "hide": () => Promise; /** * Whether the slideout behaves as a modal, i.e. with an overlay and preventing scrolling of the page content. Note that even when false, we still use focus guards to contain keyboard navigation within, as moving focus out could result in unexpected behavior. * @default true */ "modal": boolean; /** * Open * @default false */ "open": boolean; /** * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given, the component automatically sets the click event listener to open the slideout. */ "opener": | string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent); /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered the slideout so that focus can be moved back to this specific element when the slideout dialog is closed. */ "show": () => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; /** * Toggles the slideout. */ "toggle": () => Promise; } interface DuetSlideoutLang { /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetSlideoutLink { /** * 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 * @default false */ "active": boolean; /** * Caret * @default false */ "caret": boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external": boolean; /** * Href * @default "#" */ "href": string; /** * Icon * @default undefined */ "icon": string; /** * @default false */ "menuItem": boolean; /** * Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot. * @default "inherit" */ "size": "inherit" | "small" | "medium" | "large"; /** * Language of the link. Use this only for language selection links. * @default undefined */ "targetLanguage": "en" | "fi" | "sv"; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetSlideoutPanel { /** * Active * @default false */ "active": boolean; /** * Background color. Use one of the color tokens. * @default "gray-lightest" */ "backgroundColor": DuetColor; /** * Show a badge that indicates something has changed. * @default false */ "badge": boolean; /** * Icon * @default undefined */ "icon": string; /** * Size. Small, medium or large. * @default "medium" */ "labelSize": "small" | "medium" | "large"; /** * Open * @default false */ "open": boolean; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetSlideoutPanelDropdown { /** * Active * @default false */ "active": boolean; /** * Icon * @default undefined */ "icon": string; /** * Open * @default false */ "open": boolean; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetSpacer { /** * Adjusts the breakpoint where the spacer is shown in. The functionality follows 1:1 the media queries defined in design tokens. * @default "" */ "breakpoint": DuetSpacerBreakpoint; /** * Direction of the space added. * @default "vertical" */ "direction": DuetDirection; /** * Size variation of the spacer. Can be any of the spacing tokens. * @default "medium" */ "size": DuetSpacerSize; } interface DuetSpinner { /** * Adds accessible label for the spinner that is only shown for screen readers. */ "accessibleLabel": string; /** * Color of the spinner, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. Note that in earlier versions the color has defaulted to "gray-lightest", but in a future release it will change to undefined, so that the color will be the theme's primary. If you have relied on not defining color to result in white, it is advisable to update your code to explicitly define it. */ "color": DuetColor; /** * Size variation of the spinner. * @default "small" */ "size": DuetSpinnerSize; /** * Theme of the spinner. */ "theme": DuetTheme; } interface DuetStatusIcon { /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Icon size. Entered as one of the icon size design tokens. * @default "medium" */ "size": DuetIconSize; /** * Use strong background color when the icon would not otherwise stand out from the surrounding background. * @default false */ "strong": boolean; /** * Status the icon indicates * @default "default" */ "variation": DuetStatus; } interface DuetStep { /** * Set the heading for the step. */ "heading": string; /** * Set the heading level used in the HTML markup. */ "headingLevel": DuetHeadingLevel; /** * @default false */ "roundedBottom": boolean; /** * @default false */ "roundedTop": boolean; /** * Programmatically shift focus to the step's heading. */ "setFocus": (options?: FocusOptions) => Promise; "state": DuetStepState; "stepIndex": number; /** * Theme of the component. * @default "" */ "theme": DuetTheme; } interface DuetStepper { /** * Format of message used to announce current step when navigating between steps. The string {current} is replaced with the current step number. The string {total} is replaced with the total number of steps. * @default getLocaleString(DuetStringsListStepOfTotal, this.language) */ "accessibleLive": string; /** * Controls whether navigation back to previous steps is allowed or not. * @default false */ "backDisabled": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * The index of the current step. * @default 0 */ "selected": number; /** * Theme of the component. * @default "" */ "theme": DuetTheme; } interface DuetSubmenuBar { /** * 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; /** * Makes the submenu bar hide on top of the window when page is scrolled down Should be used only with sticky navigation. * @default false */ "hideOnScroll": boolean; /** * Open * @default false */ "open": boolean; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetSubmenuBarDropdown { /** * Active * @default false */ "active": boolean; /** * Icon * @default undefined */ "icon": string; /** * Open * @default false */ "open": boolean; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetSubmenuBarDropdownLink { /** * Active * @default false */ "active": boolean; /** * Caret * @default false */ "caret": boolean; /** * Highlight * @default false */ "highlight": boolean; /** * Href * @default "#" */ "href": string; /** * Icon * @default undefined */ "icon": string; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetSubmenuBarItem { /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded": boolean; /** * 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. * @default "false" */ "accessiblePopup": string; /** * Active * @default false */ "active": boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external": boolean; /** * Left icon. * @default undefined */ "leadingIcon": DuetIconName; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; /** * Right icon. * @default undefined */ "trailingIcon": DuetIconName; /** * Url */ "url": string; } interface DuetSubmenuBarLink { /** * Active * @default false */ "active": boolean; /** * Href * @default "#" */ "href": string; /** * Icon * @default undefined */ "icon": string; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetTab { /** * String for AccessibleLabel * @default null */ "accessibleDescription": string; /** * Defaults for AccessibleLabel * @default null */ "accessibleDescriptionDefault": DuetLangObject | string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Caption for the tab. */ "caption": string; /** * HTML id of element that is to be used when opening this tab. This enables decoupling the content from the tab buttons. * @default undefined */ "contentId": string; /** * Indicator to show in the tab button. */ "indicator": IndicatorVariation1; /** * Provides accessible text for the Duet Indicator. If Indicator's default is sufficient this is not needed. */ "indicatorAccessibleLabel": string; /** * Label for the tab. */ "label": string; /** * @deprecated Use indicator property instead. Notification mark to show in the tab button. Works better with plain variation, as the dark background of selected default button makes the mark less noticable. */ "notificationMark": "warning" | "danger"; /** * Selected state of the tab. */ "selected": boolean; /** * Sets focus on the tab panel. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the component. * @default "" */ "theme": DuetTheme; } interface DuetTabGroup { /** * Aria label for the entire tab-group * @default undefined */ "accessibleLabel": string; /** * Whether the tab-group collapses to a select dropwdown in minor breakpoints * @deprecated as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect * @default false */ "collapses": boolean; /** * Makes the tab group fill the space with background, only used when tab-group variation is default. * @default false */ "fillSpace": boolean; /** * Optional identifier to add to buttons in the tab group * @default this.id */ "identifier": string; /** * Label for the select element which gets shown on mobile. * @default {fi: "Valitse", en: "Choose", sv: "Välja"} */ "label": string; /** * Defaults for Label * @default {fi: "Valitse", en: "Choose", sv: "Välja"} */ "labelDefaults": DuetLangObject | string; /** * Determines whether the label for the select element shown on mobile is visually hidden. * @default true */ "labelHidden": boolean; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * This method allows you to open any of the tabs by calling the method and passing the index of the tab. Please note that index starts from zero. */ "openTab": (tabIndex: number) => Promise; /** * Controls the padding of the component. * @default "auto" */ "padding": DuetPadding; /** * This method used to refresh the contents of the tab group but is now deprecated as this is done automatically. * @deprecated */ "refresh": () => Promise; /** * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens) * @deprecated scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect * @default true */ "scrolls": boolean; /** * @deprecated in favour of Duet Tab component owning the tab indexing Controls if tab container should have tab index and be accessible by pressing tab * @default true */ "setTabIndex": boolean; /** * Makes the tab buttons stretch to fill the available space * @default false */ "stretch": boolean; /** * By default switches to larger size from small breakpoint. Never disables switching to larger size and always forces it. * @default "small" */ "switchLargeBreakpoint": "small" | "never" | "always"; /** * If this property is set to true, tab won't change immediately after clicking it. Component will emit "duetTabChangeRequested" event, and it needs to be handled manually in order to change tab. * @default false */ "tabChangeConfirm": boolean; /** * Theme of the component. * @default "" */ "theme": DuetTheme; /** * Style variation of the tab group. Note that "plain-scrolling" is deprecated, as tab-group now allways has scrolling behavior, use values "default", "plain" or "checked" * @default "default" */ "variation": DuetTabVariation; } interface DuetTable { /** * By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout. * @default "small" */ "breakpoint": DuetTableBreakpoint; /** * Hide a thead section visually. The content is still available to screen readers. * @default false */ "hideHeadVisually": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Controls whether the table has a sticky header. Sticky headers are not compatible with breakpoint="none-scrollable". * @default false */ "sticky": boolean; /** * Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky. * @default "with-links" */ "stickyDistance": DuetTableStickyDistance; /** * Theme of the table. */ "theme": DuetTheme; /** * Style variation of the table. * @default "striped" */ "variation": DuetTableVariant; } interface DuetTextarea { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Indicates what kind of user input completion suggestions are provided. */ "accessibleAutocomplete": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Aria Details of the component * @default undefined */ "accessibleDetails": string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError": "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the textarea. */ "accessibleOwns": string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption": string; /** * Display character counter. Must be used in conjunction with **maxlength** property. * @default false */ "counter": boolean; /** * @deprecated , the visually hidden counter label is no longer changeable * @default "" */ "counterLabel": string; /** * Makes the textarea component disabled. This prevents users from being able to interact with the textarea, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * A regular expression that matches any characters which should be *disallowed*. This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression. e.g. the following will disallow any non-numeric characters `[^0-9]` * @default null */ "disallowPattern": string; /** * If form input field has a placeholder text, and user types anything (causing the text to dissapear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) * @default false */ "echoPlaceholder": boolean; /** * Display the textarea in error state along with an error message. * @default "" */ "error": string; /** * Expands the textarea to fill 100% of the container width. * @default false */ "expand": boolean; /** * Adds a unique identifier for the textarea. */ "identifier": string; /** * Label for the textarea. * @default "label" */ "label": string; /** * Color of the label. */ "labelColor": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Font weight of the label. */ "labelWeight": DuetTextFontWeight; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Use maxlength to specify the maximum length of the value that can be entered. */ "maxlength": number; /** * Use minlength to specify the minimum length of the value that can be entered. */ "minlength": number; /** * Name of the textarea. */ "name": string; /** * Hint text to display. */ "placeholder": string; /** * Set whether the textarea 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. * @default false */ "required": boolean; /** * Defines a specific role attribute for the input. */ "role": string | null; /** * Rows attribute for the contained native textarea element. If set, overrides the default style's minheight. */ "rows": number; /** * Sets focus on the specified `duet-textarea`. Use this method instead of the global `textarea.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the textarea. * @default "" */ "theme": DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip": string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection": DuetTooltipDirection; /** * This is a proxy for the enclosed native textarea's validity * @readonly */ "validity": ValidityState; /** * Value of the textarea. * @default "" */ "value": string; } interface DuetToggle { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the toggle. */ "accessibleDescribedBy": string; /** * Aria description the button * @default undefined */ "accessibleDescription": string; /** * Aria Details of the component * @default undefined */ "accessibleDetails": string; /** * Adds accessible announcement for toggle when "loading" state ends. If not set, default strings are used: fi: "Valmis", sv: "Färdig", en: "Complete" */ "accessibleLabelComplete"?: string; /** * Adds accessible announcement for toggle in "loading" state If not set, default strings are used: fi: "Ladataan", sv: "Lastning", en: "Loading" */ "accessibleLabelLoading"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy": string; /** * Indicates the id of a component owned by the toggle. */ "accessibleOwns": string; /** * Check state of the checkbox. * @default false */ "checked": boolean; /** * Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * Adds a unique identifier for the checkbox. */ "identifier": string; /** * Label for the toggle. * @default "label" */ "label": string; /** * Color of the label. */ "labelColor": string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden": boolean; /** * Position of the label * @default "top" */ "labelPosition": "top" | "right" | "left"; /** * Font weight of the label. */ "labelWeight": DuetTextFontWeight; /** * Loading state of the toggle * @default false */ "loading": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Name of the checkbox. */ "name": string; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required": boolean; /** * Defines a specific role attribute for the input. */ "role": string | null; /** * Sets focus on the specified `duet-toggle`. Use this method instead of the global `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the card. * @default "" */ "theme": DuetTheme; /** * The value of the checkbox does not mean if it's checked or not, use the checked property for that. */ "value": string; } interface DuetToolbar { /** * 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; /** * Theme. * @default "" */ "theme": DuetTheme; /** * Variation. Secondary is not supported for Turva theme. Negative is deprecated. * @default "default" */ "variation": "default" | "primary" | "negative" | "secondary"; } interface DuetToolbarDropdown { /** * 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; /** * Active * @default false */ "active": boolean; /** * Icon * @default undefined */ "icon": string; /** * Open * @default false */ "open": boolean; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; /** * Variation. * @default "default" */ "variation": "default" | "negative"; } interface DuetToolbarDropdownLink { /** * 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; /** * Active * @default false */ "active": boolean; /** * Href * @default "#" */ "href": string; /** * Icon * @default undefined */ "icon": string; /** * Language of the link. Use this only for language selection links. * @default undefined */ "targetLanguage": "en" | "fi" | "sv"; /** * Theme. * @default "" */ "theme": DuetTheme; } interface DuetToolbarItem { /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded": boolean; /** * 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. * @default "false" */ "accessiblePopup": string; /** * Active * @default false */ "active": boolean; /** * Show a badge that indicates something has changed. * @default false */ "badge": boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external": boolean; /** * Left icon. * @default undefined */ "leadingIcon": DuetIconName; /** * Sets focus. Use this method instead of the global focus(). */ "setFocus": (options?: FocusOptions) => Promise; /** * Theme. * @default "" */ "theme": DuetTheme; /** * Right icon. * @default undefined */ "trailingIcon": DuetIconName; /** * Url */ "url": string; /** * Variation. Secondary is not supported for Turva theme. Negative is deprecated. * @default "default" */ "variation": "default" | "primary" | "negative" | "secondary"; } interface DuetToolbarLink { /** * 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; /** * Active * @default false */ "active": boolean; /** * Href * @default "#" */ "href": string; /** * Icon * @default undefined */ "icon": string; /** * Theme. * @default "" */ "theme": DuetTheme; /** * Variation. * @default "default" */ "variation": "default" | "negative"; } interface DuetTooltip { /** * String to add after the accessibleLabel to give more context to the tooltip. Preposition "about" is added between the strings. In Finnish, the preposition is "aiheesta" and in Swedish "om". */ "accessibleAboutLabel": string; /** * Adds accessible label for the close icon that is only shown for screen readers. This property is always required to create an accessibly interface! * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"} */ "accessibleCloseLabel": string; /** * Default language strings for the accessibleCloseLabel * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"} */ "accessibleCloseLabelDefault": DuetLangObject | string; "accessibleInputLabel": string; /** * Adds accessible label for the info icon that is only shown for screen readers. This property is always required to create an accessible interface! * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"} */ "accessibleLabel": string; /** * Default language strings for the accessibleLabel * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"} */ "accessibleLabelDefault": DuetLangObject | string; /** * Toggle whether the tooltip is initially visible or not. This property should not be used in production in most cases. * @default false */ "active": boolean; /** * Adjust the responsive breakpoint where tooltip starts opening towards left. * @default "medium" */ "breakpoint": DuetTooltipBreakpoint; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "direction": DuetTooltipDirection; /** * Label of the tooltip. * @default "" */ "label": string; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Negative variation for tooltip button on dark background * @default false */ "negative": boolean; /** * Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a negative value as well. E.g. "-13px". * @default "0" */ "positionHorizontal": string; /** * Adjust the vertical positioning of the tooltip toggle in pixels. Can be a negative value as well. E.g. "-13px". * @default "0" */ "positionVertical": string; /** * Theme of the tooltip. * @default "" */ "theme": DuetTheme; } interface DuetTooltipButton { "accessibleLabel": string; "active": boolean; /** * @default "" */ "label": string; /** * @default false */ "negative": boolean; "setFocus": (options?: FocusOptions) => Promise; /** * Theme of the card. Can be one of: "default", "turva". * @default "" */ "theme": DuetTheme; "tooltipId": string; } interface DuetTooltipPopup { "accessibleCloseLabel": string; "active": boolean; "arrowStyles": { top: string | undefined; left: string | undefined }; "getArrowElement": () => Promise; "getContentElement": () => Promise; "placement": string; "setFocusOnContentElement": () => Promise; /** * Theme of the tooltip. * @default "" */ "theme": DuetTheme; "tooltipId": string; } interface DuetTray { /** * Accessible label that is shown for screen reader users in the expandable close toggle. Not visible for normal users. * @default {fi: "Sulje", en: "Close", sv: "Stänga"} */ "accessibleCloseLabel": string; /** * Defaults for accessibleCloseLabel * @default {fi: "Sulje", en: "Close", sv: "Stänga"} */ "accessibleCloseLabelDefaults": DuetLangObject | string; /** * Accessible label that is shown for screen reader users in the expandable open toggle. Not visible for normal users. * @default {fi: "Avaa", en: "Open", sv: "Öppen"} */ "accessibleOpenLabel": string; /** * Defaults for accessibleOpenLabel * @default {fi: "Avaa", en: "Open", sv: "Öppen"} */ "accessibleOpenLabelDefaults": DuetLangObject | string; /** * Toggle whether the info panel is visible or not. You can use this property e.g. when pricing information is revealed to the user. * @default false */ "active": boolean; /** * Hide the info panel when user scrolls back to the top of the viewport. * @default true */ "autoHide": boolean; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language": DuetLanguage; /** * Enable or disable the automatic responsive behaviour which makes the info panel hide on larger viewports. Settings this to "false" means that the header panel is visible on all device sizes. * @default true */ "responsive": boolean; /** * Theme of the info panel. * @default "" */ "theme": DuetTheme; } interface DuetUpload { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant": string; /** * accessible aria-Label of button * @default undefined */ "accessibleButtonLabel": string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls": string; /** * Indicates the id of a component that describes the upload component. */ "accessibleDescribedBy": string; /** * Indicates the id of a component owned by the input. */ "accessibleOwns": string; /** * Map action name to DuetLangObject or boolean. Sets upload item action buttons titles (show as DOM tooltip when hovering). * @default { cancel: false, delete: false, } */ "actionButtonTitles": string | UploadActionButtonTitles; /** * Default actions added to the internally used duet-editable-table * @default [ { icon: "action-delete", color: "color-danger", size: "x-small", background: "gray-lightest", name: "delete", map: ["success", "failure"], label: { fi: "Poista tiedosto", en: "Delete the file", sv: "Ta bort filen", }, }, { icon: "navigation-close", color: "primary", size: "x-small", background: "gray-lightest", name: "cancel", map: ["inprogress", "pending"], label: { fi: "Keskeytä lähetys", en: "Cancel the upload", sv: "Stop överföringen", }, }, ] */ "actions": DuetEditableTableActions1; /** * Key used to set vertical alignment of action buttons * @default "middle" */ "alignment": string; /** * A string of commaseperated file type values that are allowed * @example : .pdf,.doc,.docx * @default "all" */ "allowedExtensions": string; /** * A string of commaseperated mime type values that are allowed * @example : image/*,application/msword, * @default "" */ "allowedMimetypes": string; /** * Label of button * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" } */ "buttonLabel": string; /** * Property to change button label defaults on the component. * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment", } */ "buttonLabelDefaults": DuetLangObject | string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption": string; /** * If true the input caption will be placed below file list and footer * @default false */ "captionOnBottom": boolean; /** * If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending() * @default false */ "deferUpload": boolean; /** * Description for the upload component. * @default { en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.", sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.", fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.", } */ "description": string; /** * Property to change descriptionDefaults defaults on the component. * @default { en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.", sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.", fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.", } */ "descriptionDefaults": DuetLangObject | string; /** * Makes the input component disabled. This prevents users from being able to interact with the upload component, and conveys its inactive state to assistive technologies. * @default false */ "disabled": boolean; /** * If link-click-event is set to true then upload component will emit an event on uploaded file link click (check linkClick event). * @default false */ "emitEvent": boolean; /** * Display the input in error state along with an error message. * @default "" */ "error": string; /** * Default errorcodes used by the component, modifiable via javascript * @default errorCodes */ "errorCodes": DuetUploadErrorCode[]; /** * If external is set to true, the upload component will not actually upload the files, but only keep states it will be up to you to handle the upload and return progress information to the upload-component * @default false */ "external": boolean; /** * Id of external uploadButton of the input used for setting accessibility attributes. */ "externalUploadButtonId": string; /** * Label for the filelist's empty state. * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."} */ "fileListEmpty": string; /** * Defaults for the filelist's empty state. * @default { fi: "Ei vielä lisättyjä tiedostoja.", sv: "Inga filer har lagts till ännu.", en: "No files added yet.", } */ "fileListEmptyDefaults": DuetLangObject | string; /** * Map of string that contain list of uploaded files. * @default new Map() */ "files": StringMap; /** * focusActionButton. */ "focusActionButton": (uid: string) => Promise; /** * Get list of files, divided in errors and valid sections */ "getFiles": () => Promise; /** * Array of group names that you want the editable table to use to display files * @required * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}] * @default [ { id: this.DefaultGroups.success, label: { fi: "Valmiit tiedostot", sv: "Files success", en: "Files success", }, }, { id: this.DefaultGroups.failure, label: { fi: "Tiedostot, joissa on virheitä", sv: "Filer med fel", en: "Files with errors", }, }, { id: this.DefaultGroups.inprogress, label: { fi: "Kesken olevat tiedostot", sv: "Filer inprogress", en: "Files inprogress", }, }, { id: this.DefaultGroups.pending, label: { en: "Files to upload", sv: "Filer att ladda", fi: "Ladattavat tiedostot", }, }, ] */ "groups": DuetUploadTableGroupName[]; /** * Heading level for the label in the legend element. This is only used to give screen readers better logical structure. This does not affect visual appearance. * @default "h3" */ "headerHeadingLevel": DuetHeadingLevel; /** * If set the upload component will not display an upload button, you will have to create one yourself and call the exposed method startUpload to open the upload dialog * @default false */ "hideButton": boolean; /** * Use hideCancelButton to hide cancel button for pending and in progress uploads * @default false */ "hideCancelButton": boolean; /** * Visually hides the groups labels in the editable table list used to display the list of files * @default false */ "hideGroups": boolean; /** * Use hide-header to hide upload component header and caption (if caption is not on bottom) * @default false */ "hideHeader": boolean; /** * Adds a unique identifier for the upload component. */ "identifier": string; /** * Label for the input. * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"} */ "label": string; /** * Property to change labelDefaults defaults on the component. normally you would handle these strings on an application level and override label when needed * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"} */ "labelDefaults": DuetLangObject | string; /** * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files, by default this is off, setting this to true will limit the users choices to what has been explicitly set * @default false */ "limitSelection": boolean; /** * Controls the margin of the component. * @default "auto" */ "margin": DuetMargin; /** * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded. * @default 200000000 */ "maxBytes": number; /** * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded. * @default undefined */ "maxBytesTotal": number; /** * Use maxFiles to specify the maximum amount of files that can be uploaded * @default 99 */ "maxFiles": number; /** * If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request * @default null */ "middleware": XHRInternalMiddleWare; /** * Use multiple to allow the user to select multiple files when uploading * @default true */ "multiple": boolean; /** * Name of the upload component. */ "name": string; /** * Method for forcing a render of the upload list, element.files can be changed externally But it will only rerender on a new Map or a top Level change - this can be used to update the tabular data if the automatic re-render is no sufficient */ "refresh": () => Promise; /** * Use rename-duplicates to auto rename files with the same name instead of replacing them. * @default false */ "renameDuplicates": boolean; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required": boolean; /** * Sets focus on the specified `duet-input`. Use this method instead of the global `input.focus()`. */ "setFocus": (options?: FocusOptions) => Promise; /** * If enabled the editable-table will display links on successfully uploaded items, this requires the server can respond with link URIs in the correct format and that the files are accessible to the user * @default false */ "showLinks": boolean; /** * Use show-uploaded-items-header to show single, generic, header for uploaded items * @default false */ "showUploadedItemsHeader": boolean; /** * Property to change the aria upload progress text read aloud by screenreaders * @default { fi: { inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.", inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui", done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti", doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui", files: "tiedostoa", file: "tiedosto", }, sv: { inProgress: "Laddar upp {filesUploaded} av {filesTotal}", inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades", done: "Uppladdningen slutförd, {filesTotal} har lagts till", doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades", files: "filer", file: "fil", }, en: { inProgress: "Uploading {filesUploaded} of {filesTotal}", inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed", done: "Upload completed, {filesTotal} added successfully", doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.", files: "files", file: "file", }, } */ "statusLabelDefaults": DuetLangObject | string; /** * Strings used for the status aria-label * @default getLocaleString( this.statusLabelDefaults ) */ "statusMessageLabel": StatusMessage | string; /** * Theme of the input. * @default "" */ "theme": DuetTheme; /** * Convenience method for updating the value of a key:value inside an item in the files attribute */ "updateValue": (item: string, key: string, value: any) => Promise; /** * Method for invoking the upload sequence */ "upload": (metaData?: any | undefined) => Promise; /** * Method for uploading pending files */ "uploadPending": () => Promise; /** * Property to change single uploaded items header label * @default { fi: "Ladattu tiedosto.", sv: "Nedladdad fil.", en: "Uploaded file.", } */ "uploadedItemsHeaderLabel": DuetLangObject; /** * Endpoint URI that is capable of receiving the files */ "uri": string; /** * Property to read if the internally used editable-table contains errors or not * @default !this.required */ "valid": boolean; /** * Value of the input. */ "value": string; } interface DuetUploadAriaStatus { /** * Adds accessible label that is read aloud * @default "polite" */ "accessibleAriaLive": "off" | "polite" | "assertive"; /** * valid file amount * @default undefined */ "inprogress": number; /** * invalid file amount * @default undefined */ "invalid": number; /** * Status labels used in the component * @default null */ "statusMessageLabel": StatusMessage; /** * total files * @default undefined */ "total": number; /** * valid file amount * @default undefined */ "valid": number; } interface DuetUploadItem { /** * actions. */ "actions": any; /** * buttonTitles. */ "buttonTitles": UploadActionButtonTitles1; /** * categoryLabel. */ "categoryLabel"?: DuetLangObject; /** * data. */ "data": DuetFileListItem; /** * errorCodes. */ "errorCodes"?: DuetUploadErrorCode[]; /** * focusActionButton. */ "focusActionButton": () => Promise; /** * label. */ "label"?: DuetLangObject; /** * linkClickEvent. */ "linkClickEvent"?: EventEmitter; /** * showCategory. */ "showCategory"?: boolean; /** * showLinks. */ "showLinks": boolean; /** * theme. * @default "" */ "theme": DuetTheme; /** * type. */ "type": ItemType; } interface DuetVisuallyHidden { } } export interface DuetActionButtonCustomEvent extends CustomEvent { detail: T; target: HTMLDuetActionButtonElement; } export interface DuetAlertCustomEvent extends CustomEvent { detail: T; target: HTMLDuetAlertElement; } export interface DuetButtonCustomEvent extends CustomEvent { detail: T; target: HTMLDuetButtonElement; } export interface DuetCardCustomEvent extends CustomEvent { detail: T; target: HTMLDuetCardElement; } export interface DuetCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLDuetCheckboxElement; } export interface DuetChipCustomEvent extends CustomEvent { detail: T; target: HTMLDuetChipElement; } export interface DuetChoiceCustomEvent extends CustomEvent { detail: T; target: HTMLDuetChoiceElement; } export interface DuetCollapsibleCustomEvent extends CustomEvent { detail: T; target: HTMLDuetCollapsibleElement; } export interface DuetComboboxCustomEvent extends CustomEvent { detail: T; target: HTMLDuetComboboxElement; } export interface DuetCookieConsentCustomEvent extends CustomEvent { detail: T; target: HTMLDuetCookieConsentElement; } export interface DuetDatePickerCustomEvent extends CustomEvent { detail: T; target: HTMLDuetDatePickerElement; } export interface DuetEditableTableCustomEvent extends CustomEvent { detail: T; target: HTMLDuetEditableTableElement; } export interface DuetFileChooserCustomEvent extends CustomEvent { detail: T; target: HTMLDuetFileChooserElement; } export interface DuetFooterCustomEvent extends CustomEvent { detail: T; target: HTMLDuetFooterElement; } export interface DuetHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLDuetHeaderElement; } export interface DuetHeroCustomEvent extends CustomEvent { detail: T; target: HTMLDuetHeroElement; } export interface DuetInputCustomEvent extends CustomEvent { detail: T; target: HTMLDuetInputElement; } export interface DuetMenuBarCustomEvent extends CustomEvent { detail: T; target: HTMLDuetMenuBarElement; } export interface DuetModalCustomEvent extends CustomEvent { detail: T; target: HTMLDuetModalElement; } export interface DuetMultiselectCustomEvent extends CustomEvent { detail: T; target: HTMLDuetMultiselectElement; } export interface DuetNumberInputCustomEvent extends CustomEvent { detail: T; target: HTMLDuetNumberInputElement; } export interface DuetPaginationCustomEvent extends CustomEvent { detail: T; target: HTMLDuetPaginationElement; } export interface DuetPhoneInputCustomEvent extends CustomEvent { detail: T; target: HTMLDuetPhoneInputElement; } export interface DuetPopupMenuCustomEvent extends CustomEvent { detail: T; target: HTMLDuetPopupMenuElement; } export interface DuetPopupMenuItemCustomEvent extends CustomEvent { detail: T; target: HTMLDuetPopupMenuItemElement; } export interface DuetRadioCustomEvent extends CustomEvent { detail: T; target: HTMLDuetRadioElement; } export interface DuetRangeSliderCustomEvent extends CustomEvent { detail: T; target: HTMLDuetRangeSliderElement; } export interface DuetRangeStepperCustomEvent extends CustomEvent { detail: T; target: HTMLDuetRangeStepperElement; } export interface DuetSelectCustomEvent extends CustomEvent { detail: T; target: HTMLDuetSelectElement; } export interface DuetShowMoreCustomEvent extends CustomEvent { detail: T; target: HTMLDuetShowMoreElement; } export interface DuetSlideoutCustomEvent extends CustomEvent { detail: T; target: HTMLDuetSlideoutElement; } export interface DuetStepCustomEvent extends CustomEvent { detail: T; target: HTMLDuetStepElement; } export interface DuetStepperCustomEvent extends CustomEvent { detail: T; target: HTMLDuetStepperElement; } export interface DuetTabGroupCustomEvent extends CustomEvent { detail: T; target: HTMLDuetTabGroupElement; } export interface DuetTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLDuetTextareaElement; } export interface DuetToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDuetToggleElement; } export interface DuetTooltipPopupCustomEvent extends CustomEvent { detail: T; target: HTMLDuetTooltipPopupElement; } export interface DuetUploadCustomEvent extends CustomEvent { detail: T; target: HTMLDuetUploadElement; } declare global { interface HTMLDuetActionButtonElementEventMap { "duetActionEvent": DuetActionButtonEvent; } interface HTMLDuetActionButtonElement extends Components.DuetActionButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetActionButtonElement, ev: DuetActionButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetActionButtonElement, ev: DuetActionButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetActionButtonElement: { prototype: HTMLDuetActionButtonElement; new (): HTMLDuetActionButtonElement; }; interface HTMLDuetAlertElementEventMap { "duetDismiss": DuetAlertEvent; "duetCloseComplete": any; } interface HTMLDuetAlertElement extends Components.DuetAlert, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetAlertElement, ev: DuetAlertCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetAlertElement, ev: DuetAlertCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetAlertElement: { prototype: HTMLDuetAlertElement; new (): HTMLDuetAlertElement; }; interface HTMLDuetBadgeElement extends Components.DuetBadge, HTMLStencilElement { } var HTMLDuetBadgeElement: { prototype: HTMLDuetBadgeElement; new (): HTMLDuetBadgeElement; }; interface HTMLDuetBannerElement extends Components.DuetBanner, HTMLStencilElement { } var HTMLDuetBannerElement: { prototype: HTMLDuetBannerElement; new (): HTMLDuetBannerElement; }; interface HTMLDuetBreadcrumbElement extends Components.DuetBreadcrumb, HTMLStencilElement { } var HTMLDuetBreadcrumbElement: { prototype: HTMLDuetBreadcrumbElement; new (): HTMLDuetBreadcrumbElement; }; interface HTMLDuetBreadcrumbsElement extends Components.DuetBreadcrumbs, HTMLStencilElement { } var HTMLDuetBreadcrumbsElement: { prototype: HTMLDuetBreadcrumbsElement; new (): HTMLDuetBreadcrumbsElement; }; interface HTMLDuetButtonElementEventMap { "duetFocus": any; "duetBlur": any; } interface HTMLDuetButtonElement extends Components.DuetButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetButtonElement, ev: DuetButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetButtonElement, ev: DuetButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetButtonElement: { prototype: HTMLDuetButtonElement; new (): HTMLDuetButtonElement; }; interface HTMLDuetCalloutElement extends Components.DuetCallout, HTMLStencilElement { } var HTMLDuetCalloutElement: { prototype: HTMLDuetCalloutElement; new (): HTMLDuetCalloutElement; }; interface HTMLDuetCaptionElement extends Components.DuetCaption, HTMLStencilElement { } var HTMLDuetCaptionElement: { prototype: HTMLDuetCaptionElement; new (): HTMLDuetCaptionElement; }; interface HTMLDuetCardElementEventMap { "duetToggle": DuetCardToggleEvent; } interface HTMLDuetCardElement extends Components.DuetCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetCardElement, ev: DuetCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetCardElement, ev: DuetCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetCardElement: { prototype: HTMLDuetCardElement; new (): HTMLDuetCardElement; }; interface HTMLDuetCheckboxElementEventMap { "duetChange": DuetCheckboxEvent; "duetFocus": DuetCheckboxEvent; "duetBlur": DuetCheckboxEvent; } interface HTMLDuetCheckboxElement extends Components.DuetCheckbox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetCheckboxElement, ev: DuetCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetCheckboxElement, ev: DuetCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetCheckboxElement: { prototype: HTMLDuetCheckboxElement; new (): HTMLDuetCheckboxElement; }; interface HTMLDuetCheckmarkElement extends Components.DuetCheckmark, HTMLStencilElement { } var HTMLDuetCheckmarkElement: { prototype: HTMLDuetCheckmarkElement; new (): HTMLDuetCheckmarkElement; }; interface HTMLDuetChipElementEventMap { "duetChange": DuetChipEvent; "duetRemove": DuetChipEvent; "duetFocus": DuetChipEvent; "duetBlur": DuetChipEvent; } interface HTMLDuetChipElement extends Components.DuetChip, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetChipElement, ev: DuetChipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetChipElement, ev: DuetChipCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetChipElement: { prototype: HTMLDuetChipElement; new (): HTMLDuetChipElement; }; interface HTMLDuetChoiceElementEventMap { "duetChoiceReady": CustomEvent; "duetChange": DuetChoiceEvent; "duetFocus": DuetChoiceEvent; "duetBlur": DuetChoiceEvent; } interface HTMLDuetChoiceElement extends Components.DuetChoice, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetChoiceElement, ev: DuetChoiceCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetChoiceElement, ev: DuetChoiceCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetChoiceElement: { prototype: HTMLDuetChoiceElement; new (): HTMLDuetChoiceElement; }; interface HTMLDuetChoiceGroupElement extends Components.DuetChoiceGroup, HTMLStencilElement { } var HTMLDuetChoiceGroupElement: { prototype: HTMLDuetChoiceGroupElement; new (): HTMLDuetChoiceGroupElement; }; interface HTMLDuetCollapsibleElementEventMap { "duetToggle": DuetCollapsibleToggleEvent; } interface HTMLDuetCollapsibleElement extends Components.DuetCollapsible, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetCollapsibleElement, ev: DuetCollapsibleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetCollapsibleElement, ev: DuetCollapsibleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetCollapsibleElement: { prototype: HTMLDuetCollapsibleElement; new (): HTMLDuetCollapsibleElement; }; interface HTMLDuetComboboxElementEventMap { "duetChange": DuetComboboxEvent; } interface HTMLDuetComboboxElement extends Components.DuetCombobox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetComboboxElement, ev: DuetComboboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetComboboxElement, ev: DuetComboboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetComboboxElement: { prototype: HTMLDuetComboboxElement; new (): HTMLDuetComboboxElement; }; interface HTMLDuetContactCardElement extends Components.DuetContactCard, HTMLStencilElement { } var HTMLDuetContactCardElement: { prototype: HTMLDuetContactCardElement; new (): HTMLDuetContactCardElement; }; interface HTMLDuetCookieConsentElementEventMap { "duetCookieConsent": DuetCookieConsentEvent; } interface HTMLDuetCookieConsentElement extends Components.DuetCookieConsent, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetCookieConsentElement, ev: DuetCookieConsentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetCookieConsentElement, ev: DuetCookieConsentCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetCookieConsentElement: { prototype: HTMLDuetCookieConsentElement; new (): HTMLDuetCookieConsentElement; }; interface HTMLDuetDatePickerElementEventMap { "duetChange": DuetDatePickerChangeEvent; "duetBlur": DuetDatePickerFocusEvent; "duetFocus": DuetDatePickerFocusEvent; } interface HTMLDuetDatePickerElement extends Components.DuetDatePicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetDatePickerElement, ev: DuetDatePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetDatePickerElement, ev: DuetDatePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetDatePickerElement: { prototype: HTMLDuetDatePickerElement; new (): HTMLDuetDatePickerElement; }; interface HTMLDuetDividerElement extends Components.DuetDivider, HTMLStencilElement { } var HTMLDuetDividerElement: { prototype: HTMLDuetDividerElement; new (): HTMLDuetDividerElement; }; interface HTMLDuetEditableTableElementEventMap { "duetTableToggle": DuetTableToggleEvent; "duetMenuClick": DuetTableMenuEvent; } interface HTMLDuetEditableTableElement extends Components.DuetEditableTable, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetEditableTableElement, ev: DuetEditableTableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetEditableTableElement, ev: DuetEditableTableCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetEditableTableElement: { prototype: HTMLDuetEditableTableElement; new (): HTMLDuetEditableTableElement; }; interface HTMLDuetEmptyStateElement extends Components.DuetEmptyState, HTMLStencilElement { } var HTMLDuetEmptyStateElement: { prototype: HTMLDuetEmptyStateElement; new (): HTMLDuetEmptyStateElement; }; interface HTMLDuetFieldsetElement extends Components.DuetFieldset, HTMLStencilElement { } var HTMLDuetFieldsetElement: { prototype: HTMLDuetFieldsetElement; new (): HTMLDuetFieldsetElement; }; interface HTMLDuetFileChooserElementEventMap { "duetChange": DuetFileChooserEvent; } interface HTMLDuetFileChooserElement extends Components.DuetFileChooser, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetFileChooserElement, ev: DuetFileChooserCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetFileChooserElement, ev: DuetFileChooserCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetFileChooserElement: { prototype: HTMLDuetFileChooserElement; new (): HTMLDuetFileChooserElement; }; interface HTMLDuetFooterElementEventMap { "duetChange": DuetFooterChangeEvent; "duetLogoClick": DuetFooterChangeEvent; "duetMenuClick": DuetFooterChangeEvent; "duetItemClick": DuetFooterChangeEvent; "duetAnalytics": DuetFooterAnalyticsEvent; "duetEvent": DuetFooterChangeEvent; } interface HTMLDuetFooterElement extends Components.DuetFooter, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetFooterElement, ev: DuetFooterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetFooterElement, ev: DuetFooterCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetFooterElement: { prototype: HTMLDuetFooterElement; new (): HTMLDuetFooterElement; }; interface HTMLDuetGridElement extends Components.DuetGrid, HTMLStencilElement { } var HTMLDuetGridElement: { prototype: HTMLDuetGridElement; new (): HTMLDuetGridElement; }; interface HTMLDuetGridItemElement extends Components.DuetGridItem, HTMLStencilElement { } var HTMLDuetGridItemElement: { prototype: HTMLDuetGridItemElement; new (): HTMLDuetGridItemElement; }; interface HTMLDuetHeaderElementEventMap { "duetChange": DuetHeaderChangeEvent; "duetSessionClick": DuetHeaderChangeEvent; "duetSearchClick": DuetHeaderChangeEvent; "duetUserClick": DuetHeaderChangeEvent; "duetLanguageSelect": DuetHeaderChangeEvent; "duetLogoClick": DuetHeaderChangeEvent; "duetBackClick": DuetHeaderChangeEvent; "duetContactClick": DuetHeaderChangeEvent; "duetItemClick": DuetHeaderChangeEvent; "duetSkipClick": DuetHeaderChangeEvent; "duetAnalytics": DuetHeaderAnalyticsEvent; "duetMobileNavToggle": DuetHeaderMobileNavToggleEvent; "duetEvent": DuetHeaderChangeEvent; } interface HTMLDuetHeaderElement extends Components.DuetHeader, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetHeaderElement, ev: DuetHeaderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetHeaderElement, ev: DuetHeaderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetHeaderElement: { prototype: HTMLDuetHeaderElement; new (): HTMLDuetHeaderElement; }; interface HTMLDuetHeadingElement extends Components.DuetHeading, HTMLStencilElement { } var HTMLDuetHeadingElement: { prototype: HTMLDuetHeadingElement; new (): HTMLDuetHeadingElement; }; interface HTMLDuetHeroElementEventMap { "duetClick": DuetHeroClickEvent; "duetAnalytics": DuetHeroAnalyticsEvent; } interface HTMLDuetHeroElement extends Components.DuetHero, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetHeroElement, ev: DuetHeroCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetHeroElement, ev: DuetHeroCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetHeroElement: { prototype: HTMLDuetHeroElement; new (): HTMLDuetHeroElement; }; interface HTMLDuetIconElement extends Components.DuetIcon, HTMLStencilElement { } var HTMLDuetIconElement: { prototype: HTMLDuetIconElement; new (): HTMLDuetIconElement; }; interface HTMLDuetIndicatorElement extends Components.DuetIndicator, HTMLStencilElement { } var HTMLDuetIndicatorElement: { prototype: HTMLDuetIndicatorElement; new (): HTMLDuetIndicatorElement; }; interface HTMLDuetInputElementEventMap { "duetInput": DuetInputEvent; "duetChange": DuetInputEvent; "duetBlur": DuetInputEvent; "duetClear": DuetInputEvent; "duetFocus": DuetInputEvent; } interface HTMLDuetInputElement extends Components.DuetInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetInputElement, ev: DuetInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetInputElement, ev: DuetInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetInputElement: { prototype: HTMLDuetInputElement; new (): HTMLDuetInputElement; }; interface HTMLDuetLabelElement extends Components.DuetLabel, HTMLStencilElement { } var HTMLDuetLabelElement: { prototype: HTMLDuetLabelElement; new (): HTMLDuetLabelElement; }; interface HTMLDuetLayoutElement extends Components.DuetLayout, HTMLStencilElement { } var HTMLDuetLayoutElement: { prototype: HTMLDuetLayoutElement; new (): HTMLDuetLayoutElement; }; interface HTMLDuetLinkElement extends Components.DuetLink, HTMLStencilElement { } var HTMLDuetLinkElement: { prototype: HTMLDuetLinkElement; new (): HTMLDuetLinkElement; }; interface HTMLDuetListElement extends Components.DuetList, HTMLStencilElement { } var HTMLDuetListElement: { prototype: HTMLDuetListElement; new (): HTMLDuetListElement; }; interface HTMLDuetListItemElement extends Components.DuetListItem, HTMLStencilElement { } var HTMLDuetListItemElement: { prototype: HTMLDuetListItemElement; new (): HTMLDuetListItemElement; }; interface HTMLDuetLogoElement extends Components.DuetLogo, HTMLStencilElement { } var HTMLDuetLogoElement: { prototype: HTMLDuetLogoElement; new (): HTMLDuetLogoElement; }; interface HTMLDuetMenuBarElementEventMap { "duetEvent": DuetMenuBarChangeEvent; } interface HTMLDuetMenuBarElement extends Components.DuetMenuBar, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetMenuBarElement, ev: DuetMenuBarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetMenuBarElement, ev: DuetMenuBarCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetMenuBarElement: { prototype: HTMLDuetMenuBarElement; new (): HTMLDuetMenuBarElement; }; interface HTMLDuetMenuBarButtonElement extends Components.DuetMenuBarButton, HTMLStencilElement { } var HTMLDuetMenuBarButtonElement: { prototype: HTMLDuetMenuBarButtonElement; new (): HTMLDuetMenuBarButtonElement; }; interface HTMLDuetMenuBarDropdownElement extends Components.DuetMenuBarDropdown, HTMLStencilElement { } var HTMLDuetMenuBarDropdownElement: { prototype: HTMLDuetMenuBarDropdownElement; new (): HTMLDuetMenuBarDropdownElement; }; interface HTMLDuetMenuBarDropdownLinkElement extends Components.DuetMenuBarDropdownLink, HTMLStencilElement { } var HTMLDuetMenuBarDropdownLinkElement: { prototype: HTMLDuetMenuBarDropdownLinkElement; new (): HTMLDuetMenuBarDropdownLinkElement; }; interface HTMLDuetMenuBarItemElement extends Components.DuetMenuBarItem, HTMLStencilElement { } var HTMLDuetMenuBarItemElement: { prototype: HTMLDuetMenuBarItemElement; new (): HTMLDuetMenuBarItemElement; }; interface HTMLDuetMenuBarLinkElement extends Components.DuetMenuBarLink, HTMLStencilElement { } var HTMLDuetMenuBarLinkElement: { prototype: HTMLDuetMenuBarLinkElement; new (): HTMLDuetMenuBarLinkElement; }; interface HTMLDuetModalElementEventMap { "duetOpen": any; "duetClose": any; "duetCloseComplete": any; "duetBeforeClose": DuetModalCloseEvent; } interface HTMLDuetModalElement extends Components.DuetModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetModalElement, ev: DuetModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetModalElement, ev: DuetModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetModalElement: { prototype: HTMLDuetModalElement; new (): HTMLDuetModalElement; }; interface HTMLDuetMultiselectElementEventMap { "duetChange": DuetMultiselectEvent; "duetFocus": DuetMultiselectEvent; "duetBlur": DuetMultiselectEvent; } interface HTMLDuetMultiselectElement extends Components.DuetMultiselect, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetMultiselectElement, ev: DuetMultiselectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetMultiselectElement, ev: DuetMultiselectCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetMultiselectElement: { prototype: HTMLDuetMultiselectElement; new (): HTMLDuetMultiselectElement; }; interface HTMLDuetNavElement extends Components.DuetNav, HTMLStencilElement { } var HTMLDuetNavElement: { prototype: HTMLDuetNavElement; new (): HTMLDuetNavElement; }; interface HTMLDuetNotificationElement extends Components.DuetNotification, HTMLStencilElement { } var HTMLDuetNotificationElement: { prototype: HTMLDuetNotificationElement; new (): HTMLDuetNotificationElement; }; interface HTMLDuetNotificationDrawerElement extends Components.DuetNotificationDrawer, HTMLStencilElement { } var HTMLDuetNotificationDrawerElement: { prototype: HTMLDuetNotificationDrawerElement; new (): HTMLDuetNotificationDrawerElement; }; interface HTMLDuetNumberInputElementEventMap { "duetChange": DuetNumberInputEvent; "duetInput": DuetNumberInputEvent; "duetBlur": DuetNumberInputEvent; "duetFocus": DuetNumberInputEvent; } interface HTMLDuetNumberInputElement extends Components.DuetNumberInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetNumberInputElement, ev: DuetNumberInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetNumberInputElement, ev: DuetNumberInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetNumberInputElement: { prototype: HTMLDuetNumberInputElement; new (): HTMLDuetNumberInputElement; }; interface HTMLDuetOverlayElement extends Components.DuetOverlay, HTMLStencilElement { } var HTMLDuetOverlayElement: { prototype: HTMLDuetOverlayElement; new (): HTMLDuetOverlayElement; }; interface HTMLDuetPageHeadingElement extends Components.DuetPageHeading, HTMLStencilElement { } var HTMLDuetPageHeadingElement: { prototype: HTMLDuetPageHeadingElement; new (): HTMLDuetPageHeadingElement; }; interface HTMLDuetPaginationElementEventMap { "duetPageChange": DuetPaginationPageEvent; } interface HTMLDuetPaginationElement extends Components.DuetPagination, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetPaginationElement, ev: DuetPaginationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetPaginationElement, ev: DuetPaginationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetPaginationElement: { prototype: HTMLDuetPaginationElement; new (): HTMLDuetPaginationElement; }; interface HTMLDuetPanelElement extends Components.DuetPanel, HTMLStencilElement { } var HTMLDuetPanelElement: { prototype: HTMLDuetPanelElement; new (): HTMLDuetPanelElement; }; interface HTMLDuetParagraphElement extends Components.DuetParagraph, HTMLStencilElement { } var HTMLDuetParagraphElement: { prototype: HTMLDuetParagraphElement; new (): HTMLDuetParagraphElement; }; interface HTMLDuetPhoneInputElementEventMap { "duetChange": DuetPhoneInputEvent; "duetInput": DuetPhoneInputEvent; "duetBlur": DuetPhoneInputEvent; "duetFocus": DuetPhoneInputEvent; } interface HTMLDuetPhoneInputElement extends Components.DuetPhoneInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetPhoneInputElement, ev: DuetPhoneInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetPhoneInputElement, ev: DuetPhoneInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(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; } interface HTMLDuetPopupMenuElement extends Components.DuetPopupMenu, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetPopupMenuElement, ev: DuetPopupMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetPopupMenuElement, ev: DuetPopupMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetPopupMenuElement: { prototype: HTMLDuetPopupMenuElement; new (): HTMLDuetPopupMenuElement; }; interface HTMLDuetPopupMenuItemElementEventMap { "duetFocus": DuetPopupMenuItemEvent; "duetBlur": DuetPopupMenuItemEvent; } interface HTMLDuetPopupMenuItemElement extends Components.DuetPopupMenuItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetPopupMenuItemElement, ev: DuetPopupMenuItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetPopupMenuItemElement, ev: DuetPopupMenuItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetPopupMenuItemElement: { prototype: HTMLDuetPopupMenuItemElement; new (): HTMLDuetPopupMenuItemElement; }; interface HTMLDuetProgressElement extends Components.DuetProgress, HTMLStencilElement { } var HTMLDuetProgressElement: { prototype: HTMLDuetProgressElement; new (): HTMLDuetProgressElement; }; interface HTMLDuetPromoCardElement extends Components.DuetPromoCard, HTMLStencilElement { } var HTMLDuetPromoCardElement: { prototype: HTMLDuetPromoCardElement; new (): HTMLDuetPromoCardElement; }; interface HTMLDuetRadioElementEventMap { "duetChange": DuetRadioEvent; "duetFocus": DuetRadioEvent; "duetBlur": DuetRadioEvent; } interface HTMLDuetRadioElement extends Components.DuetRadio, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetRadioElement, ev: DuetRadioCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetRadioElement, ev: DuetRadioCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetRadioElement: { prototype: HTMLDuetRadioElement; new (): HTMLDuetRadioElement; }; interface HTMLDuetRadioGroupElement extends Components.DuetRadioGroup, HTMLStencilElement { } var HTMLDuetRadioGroupElement: { prototype: HTMLDuetRadioGroupElement; new (): HTMLDuetRadioGroupElement; }; interface HTMLDuetRangeSliderElementEventMap { "duetChange": DuetRangeChangeEvent; "duetInput": DuetRangeChangeEvent; } interface HTMLDuetRangeSliderElement extends Components.DuetRangeSlider, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetRangeSliderElement, ev: DuetRangeSliderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetRangeSliderElement, ev: DuetRangeSliderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetRangeSliderElement: { prototype: HTMLDuetRangeSliderElement; new (): HTMLDuetRangeSliderElement; }; interface HTMLDuetRangeStepperElementEventMap { "duetRangeStepUpdate": DuetRangeStepperUpdateEvent; } interface HTMLDuetRangeStepperElement extends Components.DuetRangeStepper, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetRangeStepperElement, ev: DuetRangeStepperCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetRangeStepperElement, ev: DuetRangeStepperCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetRangeStepperElement: { prototype: HTMLDuetRangeStepperElement; new (): HTMLDuetRangeStepperElement; }; interface HTMLDuetScrollableElement extends Components.DuetScrollable, HTMLStencilElement { } var HTMLDuetScrollableElement: { prototype: HTMLDuetScrollableElement; new (): HTMLDuetScrollableElement; }; interface HTMLDuetSectionLayoutElement extends Components.DuetSectionLayout, HTMLStencilElement { } var HTMLDuetSectionLayoutElement: { prototype: HTMLDuetSectionLayoutElement; new (): HTMLDuetSectionLayoutElement; }; interface HTMLDuetSelectElementEventMap { "duetChange": DuetSelectEvent; "duetFocus": DuetSelectEvent; "duetBlur": DuetSelectEvent; } interface HTMLDuetSelectElement extends Components.DuetSelect, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetSelectElement, ev: DuetSelectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetSelectElement, ev: DuetSelectCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetSelectElement: { prototype: HTMLDuetSelectElement; new (): HTMLDuetSelectElement; }; interface HTMLDuetShapedImageElement extends Components.DuetShapedImage, HTMLStencilElement { } var HTMLDuetShapedImageElement: { prototype: HTMLDuetShapedImageElement; new (): HTMLDuetShapedImageElement; }; interface HTMLDuetShareChartElement extends Components.DuetShareChart, HTMLStencilElement { } var HTMLDuetShareChartElement: { prototype: HTMLDuetShareChartElement; new (): HTMLDuetShareChartElement; }; interface HTMLDuetShareChartItemElement extends Components.DuetShareChartItem, HTMLStencilElement { } var HTMLDuetShareChartItemElement: { prototype: HTMLDuetShareChartItemElement; new (): HTMLDuetShareChartItemElement; }; interface HTMLDuetShowMoreElementEventMap { "duetToggle": DuetShowMoreToggleEvent; } interface HTMLDuetShowMoreElement extends Components.DuetShowMore, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetShowMoreElement, ev: DuetShowMoreCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetShowMoreElement, ev: DuetShowMoreCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetShowMoreElement: { prototype: HTMLDuetShowMoreElement; new (): HTMLDuetShowMoreElement; }; interface HTMLDuetSlideoutElementEventMap { "duetSlideoutEvent": DuetSlideoutEventDetails; } interface HTMLDuetSlideoutElement extends Components.DuetSlideout, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetSlideoutElement, ev: DuetSlideoutCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetSlideoutElement, ev: DuetSlideoutCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetSlideoutElement: { prototype: HTMLDuetSlideoutElement; new (): HTMLDuetSlideoutElement; }; interface HTMLDuetSlideoutLangElement extends Components.DuetSlideoutLang, HTMLStencilElement { } var HTMLDuetSlideoutLangElement: { prototype: HTMLDuetSlideoutLangElement; new (): HTMLDuetSlideoutLangElement; }; interface HTMLDuetSlideoutLinkElement extends Components.DuetSlideoutLink, HTMLStencilElement { } var HTMLDuetSlideoutLinkElement: { prototype: HTMLDuetSlideoutLinkElement; new (): HTMLDuetSlideoutLinkElement; }; interface HTMLDuetSlideoutPanelElement extends Components.DuetSlideoutPanel, HTMLStencilElement { } var HTMLDuetSlideoutPanelElement: { prototype: HTMLDuetSlideoutPanelElement; new (): HTMLDuetSlideoutPanelElement; }; interface HTMLDuetSlideoutPanelDropdownElement extends Components.DuetSlideoutPanelDropdown, HTMLStencilElement { } var HTMLDuetSlideoutPanelDropdownElement: { prototype: HTMLDuetSlideoutPanelDropdownElement; new (): HTMLDuetSlideoutPanelDropdownElement; }; interface HTMLDuetSpacerElement extends Components.DuetSpacer, HTMLStencilElement { } var HTMLDuetSpacerElement: { prototype: HTMLDuetSpacerElement; new (): HTMLDuetSpacerElement; }; interface HTMLDuetSpinnerElement extends Components.DuetSpinner, HTMLStencilElement { } var HTMLDuetSpinnerElement: { prototype: HTMLDuetSpinnerElement; new (): HTMLDuetSpinnerElement; }; interface HTMLDuetStatusIconElement extends Components.DuetStatusIcon, HTMLStencilElement { } var HTMLDuetStatusIconElement: { prototype: HTMLDuetStatusIconElement; new (): HTMLDuetStatusIconElement; }; interface HTMLDuetStepElementEventMap { "duetStepClick": DuetStepClickEvent; } interface HTMLDuetStepElement extends Components.DuetStep, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetStepElement, ev: DuetStepCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetStepElement, ev: DuetStepCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetStepElement: { prototype: HTMLDuetStepElement; new (): HTMLDuetStepElement; }; interface HTMLDuetStepperElementEventMap { "duetStepChange": DuetStepChangeEvent; } interface HTMLDuetStepperElement extends Components.DuetStepper, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetStepperElement, ev: DuetStepperCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetStepperElement, ev: DuetStepperCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetStepperElement: { prototype: HTMLDuetStepperElement; new (): HTMLDuetStepperElement; }; interface HTMLDuetSubmenuBarElement extends Components.DuetSubmenuBar, HTMLStencilElement { } var HTMLDuetSubmenuBarElement: { prototype: HTMLDuetSubmenuBarElement; new (): HTMLDuetSubmenuBarElement; }; interface HTMLDuetSubmenuBarDropdownElement extends Components.DuetSubmenuBarDropdown, HTMLStencilElement { } var HTMLDuetSubmenuBarDropdownElement: { prototype: HTMLDuetSubmenuBarDropdownElement; new (): HTMLDuetSubmenuBarDropdownElement; }; interface HTMLDuetSubmenuBarDropdownLinkElement extends Components.DuetSubmenuBarDropdownLink, HTMLStencilElement { } var HTMLDuetSubmenuBarDropdownLinkElement: { prototype: HTMLDuetSubmenuBarDropdownLinkElement; new (): HTMLDuetSubmenuBarDropdownLinkElement; }; interface HTMLDuetSubmenuBarItemElement extends Components.DuetSubmenuBarItem, HTMLStencilElement { } var HTMLDuetSubmenuBarItemElement: { prototype: HTMLDuetSubmenuBarItemElement; new (): HTMLDuetSubmenuBarItemElement; }; interface HTMLDuetSubmenuBarLinkElement extends Components.DuetSubmenuBarLink, HTMLStencilElement { } var HTMLDuetSubmenuBarLinkElement: { prototype: HTMLDuetSubmenuBarLinkElement; new (): HTMLDuetSubmenuBarLinkElement; }; interface HTMLDuetTabElement extends Components.DuetTab, HTMLStencilElement { } var HTMLDuetTabElement: { prototype: HTMLDuetTabElement; new (): HTMLDuetTabElement; }; interface HTMLDuetTabGroupElementEventMap { "duetChange": DuetTabGroupEvent; "duetTabChange": DuetTabGroupEvent; "duetTabChangeRequested": DuetTabGroupEvent; } interface HTMLDuetTabGroupElement extends Components.DuetTabGroup, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetTabGroupElement, ev: DuetTabGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetTabGroupElement, ev: DuetTabGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetTabGroupElement: { prototype: HTMLDuetTabGroupElement; new (): HTMLDuetTabGroupElement; }; interface HTMLDuetTableElement extends Components.DuetTable, HTMLStencilElement { } var HTMLDuetTableElement: { prototype: HTMLDuetTableElement; new (): HTMLDuetTableElement; }; interface HTMLDuetTextareaElementEventMap { "duetInput": DuetTextareaEvent; "duetChange": DuetTextareaEvent; "duetBlur": DuetTextareaEvent; "duetFocus": DuetTextareaEvent; } interface HTMLDuetTextareaElement extends Components.DuetTextarea, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetTextareaElement, ev: DuetTextareaCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetTextareaElement, ev: DuetTextareaCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetTextareaElement: { prototype: HTMLDuetTextareaElement; new (): HTMLDuetTextareaElement; }; interface HTMLDuetToggleElementEventMap { "duetChange": DuetToggleChangeEvent; } interface HTMLDuetToggleElement extends Components.DuetToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetToggleElement, ev: DuetToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetToggleElement, ev: DuetToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetToggleElement: { prototype: HTMLDuetToggleElement; new (): HTMLDuetToggleElement; }; interface HTMLDuetToolbarElement extends Components.DuetToolbar, HTMLStencilElement { } var HTMLDuetToolbarElement: { prototype: HTMLDuetToolbarElement; new (): HTMLDuetToolbarElement; }; interface HTMLDuetToolbarDropdownElement extends Components.DuetToolbarDropdown, HTMLStencilElement { } var HTMLDuetToolbarDropdownElement: { prototype: HTMLDuetToolbarDropdownElement; new (): HTMLDuetToolbarDropdownElement; }; interface HTMLDuetToolbarDropdownLinkElement extends Components.DuetToolbarDropdownLink, HTMLStencilElement { } var HTMLDuetToolbarDropdownLinkElement: { prototype: HTMLDuetToolbarDropdownLinkElement; new (): HTMLDuetToolbarDropdownLinkElement; }; interface HTMLDuetToolbarItemElement extends Components.DuetToolbarItem, HTMLStencilElement { } var HTMLDuetToolbarItemElement: { prototype: HTMLDuetToolbarItemElement; new (): HTMLDuetToolbarItemElement; }; interface HTMLDuetToolbarLinkElement extends Components.DuetToolbarLink, HTMLStencilElement { } var HTMLDuetToolbarLinkElement: { prototype: HTMLDuetToolbarLinkElement; new (): HTMLDuetToolbarLinkElement; }; interface HTMLDuetTooltipElement extends Components.DuetTooltip, HTMLStencilElement { } var HTMLDuetTooltipElement: { prototype: HTMLDuetTooltipElement; new (): HTMLDuetTooltipElement; }; interface HTMLDuetTooltipButtonElement extends Components.DuetTooltipButton, HTMLStencilElement { } var HTMLDuetTooltipButtonElement: { prototype: HTMLDuetTooltipButtonElement; new (): HTMLDuetTooltipButtonElement; }; interface HTMLDuetTooltipPopupElementEventMap { "tooltipPopupClosed": CustomEvent; } interface HTMLDuetTooltipPopupElement extends Components.DuetTooltipPopup, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetTooltipPopupElement, ev: DuetTooltipPopupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetTooltipPopupElement, ev: DuetTooltipPopupCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetTooltipPopupElement: { prototype: HTMLDuetTooltipPopupElement; new (): HTMLDuetTooltipPopupElement; }; interface HTMLDuetTrayElement extends Components.DuetTray, HTMLStencilElement { } var HTMLDuetTrayElement: { prototype: HTMLDuetTrayElement; new (): HTMLDuetTrayElement; }; interface HTMLDuetUploadElementEventMap { "duetChange": DuetUploadEvent; "duetBlur": DuetUploadEvent; "duetFocus": DuetUploadEvent; "duetReady": DuetUploadEvent; "duetDone": DuetUploadEvent; "duetState": DuetUploadEvent; "duetDelete": DuetUploadEvent; "duetCancel": DuetUploadEvent; "duetProgress": DuetUploadEvent; "duetUpload": DuetUploadEvent; "linkClick": DuetUploadEvent; } interface HTMLDuetUploadElement extends Components.DuetUpload, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDuetUploadElement, ev: DuetUploadCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDuetUploadElement, ev: DuetUploadCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDuetUploadElement: { prototype: HTMLDuetUploadElement; new (): HTMLDuetUploadElement; }; interface HTMLDuetUploadAriaStatusElement extends Components.DuetUploadAriaStatus, HTMLStencilElement { } var HTMLDuetUploadAriaStatusElement: { prototype: HTMLDuetUploadAriaStatusElement; new (): HTMLDuetUploadAriaStatusElement; }; interface HTMLDuetUploadItemElement extends Components.DuetUploadItem, HTMLStencilElement { } var HTMLDuetUploadItemElement: { prototype: HTMLDuetUploadItemElement; new (): HTMLDuetUploadItemElement; }; interface HTMLDuetVisuallyHiddenElement extends Components.DuetVisuallyHidden, HTMLStencilElement { } var HTMLDuetVisuallyHiddenElement: { prototype: HTMLDuetVisuallyHiddenElement; new (): HTMLDuetVisuallyHiddenElement; }; interface HTMLElementTagNameMap { "duet-action-button": HTMLDuetActionButtonElement; "duet-alert": HTMLDuetAlertElement; "duet-badge": HTMLDuetBadgeElement; "duet-banner": HTMLDuetBannerElement; "duet-breadcrumb": HTMLDuetBreadcrumbElement; "duet-breadcrumbs": HTMLDuetBreadcrumbsElement; "duet-button": HTMLDuetButtonElement; "duet-callout": HTMLDuetCalloutElement; "duet-caption": HTMLDuetCaptionElement; "duet-card": HTMLDuetCardElement; "duet-checkbox": HTMLDuetCheckboxElement; "duet-checkmark": HTMLDuetCheckmarkElement; "duet-chip": HTMLDuetChipElement; "duet-choice": HTMLDuetChoiceElement; "duet-choice-group": HTMLDuetChoiceGroupElement; "duet-collapsible": HTMLDuetCollapsibleElement; "duet-combobox": HTMLDuetComboboxElement; "duet-contact-card": HTMLDuetContactCardElement; "duet-cookie-consent": HTMLDuetCookieConsentElement; "duet-date-picker": HTMLDuetDatePickerElement; "duet-divider": HTMLDuetDividerElement; "duet-editable-table": HTMLDuetEditableTableElement; "duet-empty-state": HTMLDuetEmptyStateElement; "duet-fieldset": HTMLDuetFieldsetElement; "duet-file-chooser": HTMLDuetFileChooserElement; "duet-footer": HTMLDuetFooterElement; "duet-grid": HTMLDuetGridElement; "duet-grid-item": HTMLDuetGridItemElement; "duet-header": HTMLDuetHeaderElement; "duet-heading": HTMLDuetHeadingElement; "duet-hero": HTMLDuetHeroElement; "duet-icon": HTMLDuetIconElement; "duet-indicator": HTMLDuetIndicatorElement; "duet-input": HTMLDuetInputElement; "duet-label": HTMLDuetLabelElement; "duet-layout": HTMLDuetLayoutElement; "duet-link": HTMLDuetLinkElement; "duet-list": HTMLDuetListElement; "duet-list-item": HTMLDuetListItemElement; "duet-logo": HTMLDuetLogoElement; "duet-menu-bar": HTMLDuetMenuBarElement; "duet-menu-bar-button": HTMLDuetMenuBarButtonElement; "duet-menu-bar-dropdown": HTMLDuetMenuBarDropdownElement; "duet-menu-bar-dropdown-link": HTMLDuetMenuBarDropdownLinkElement; "duet-menu-bar-item": HTMLDuetMenuBarItemElement; "duet-menu-bar-link": HTMLDuetMenuBarLinkElement; "duet-modal": HTMLDuetModalElement; "duet-multiselect": HTMLDuetMultiselectElement; "duet-nav": HTMLDuetNavElement; "duet-notification": HTMLDuetNotificationElement; "duet-notification-drawer": HTMLDuetNotificationDrawerElement; "duet-number-input": HTMLDuetNumberInputElement; "duet-overlay": HTMLDuetOverlayElement; "duet-page-heading": HTMLDuetPageHeadingElement; "duet-pagination": HTMLDuetPaginationElement; "duet-panel": HTMLDuetPanelElement; "duet-paragraph": HTMLDuetParagraphElement; "duet-phone-input": HTMLDuetPhoneInputElement; "duet-popup-menu": HTMLDuetPopupMenuElement; "duet-popup-menu-item": HTMLDuetPopupMenuItemElement; "duet-progress": HTMLDuetProgressElement; "duet-promo-card": HTMLDuetPromoCardElement; "duet-radio": HTMLDuetRadioElement; "duet-radio-group": HTMLDuetRadioGroupElement; "duet-range-slider": HTMLDuetRangeSliderElement; "duet-range-stepper": HTMLDuetRangeStepperElement; "duet-scrollable": HTMLDuetScrollableElement; "duet-section-layout": HTMLDuetSectionLayoutElement; "duet-select": HTMLDuetSelectElement; "duet-shaped-image": HTMLDuetShapedImageElement; "duet-share-chart": HTMLDuetShareChartElement; "duet-share-chart-item": HTMLDuetShareChartItemElement; "duet-show-more": HTMLDuetShowMoreElement; "duet-slideout": HTMLDuetSlideoutElement; "duet-slideout-lang": HTMLDuetSlideoutLangElement; "duet-slideout-link": HTMLDuetSlideoutLinkElement; "duet-slideout-panel": HTMLDuetSlideoutPanelElement; "duet-slideout-panel-dropdown": HTMLDuetSlideoutPanelDropdownElement; "duet-spacer": HTMLDuetSpacerElement; "duet-spinner": HTMLDuetSpinnerElement; "duet-status-icon": HTMLDuetStatusIconElement; "duet-step": HTMLDuetStepElement; "duet-stepper": HTMLDuetStepperElement; "duet-submenu-bar": HTMLDuetSubmenuBarElement; "duet-submenu-bar-dropdown": HTMLDuetSubmenuBarDropdownElement; "duet-submenu-bar-dropdown-link": HTMLDuetSubmenuBarDropdownLinkElement; "duet-submenu-bar-item": HTMLDuetSubmenuBarItemElement; "duet-submenu-bar-link": HTMLDuetSubmenuBarLinkElement; "duet-tab": HTMLDuetTabElement; "duet-tab-group": HTMLDuetTabGroupElement; "duet-table": HTMLDuetTableElement; "duet-textarea": HTMLDuetTextareaElement; "duet-toggle": HTMLDuetToggleElement; "duet-toolbar": HTMLDuetToolbarElement; "duet-toolbar-dropdown": HTMLDuetToolbarDropdownElement; "duet-toolbar-dropdown-link": HTMLDuetToolbarDropdownLinkElement; "duet-toolbar-item": HTMLDuetToolbarItemElement; "duet-toolbar-link": HTMLDuetToolbarLinkElement; "duet-tooltip": HTMLDuetTooltipElement; "duet-tooltip-button": HTMLDuetTooltipButtonElement; "duet-tooltip-popup": HTMLDuetTooltipPopupElement; "duet-tray": HTMLDuetTrayElement; "duet-upload": HTMLDuetUploadElement; "duet-upload-aria-status": HTMLDuetUploadAriaStatusElement; "duet-upload-item": HTMLDuetUploadItemElement; "duet-visually-hidden": HTMLDuetVisuallyHiddenElement; } } declare namespace LocalJSX { interface DuetActionButton { /** * Used to indicate which dom element with ID this element controls * @default "" */ "accessibleControls"?: string; /** * Described By id * @default undefined */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Details of the component * @default undefined */ "accessibleDetails"?: string; /** * Accessible label * @default getLocaleString( this.accessibleLabelsDefaults ) */ "accessibleLabel"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Default accessible label * @default { en: "Click to activate action", fi: "Klikkaa aktivoidaksesi toiminto", sv: "Klicka för att aktivera åtgärd", } */ "accessibleLabelsDefaults"?: DuetLangObject; /** * Title of the action button (shows as DOM tooltip when hovering) if set to true, this will try to add a best-guess title based on action-name if set to a string the string is used if set to false nothing is set * @default true */ "accessibleTitle"?: string | boolean; /** * Name of id of action that was called being called * @default undefined */ "actionId"?: string; /** * Name of id of action that was called being called * @default undefined */ "actionMeta"?: Record | string; /** * Name of action being called */ "actionName"?: string; /** * Custom color to be used for a background, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary". * @default "" */ "background"?: DuetColor; /** * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. * @default "" */ "color"?: DuetColor; /** * Disables the button * @default false */ "disabled"?: boolean; /** * Color of the icon to display * @default "currentColor" */ "iconColor"?: string; /** * Name of the icon to display * @default "action-arrow-left-small" */ "iconName"?: string; /** * Size of the icon * @default "xx-small" */ "iconSize"?: DuetActionButtonIconSize; /** * Emitted when an action has been invoked */ "onDuetActionEvent"?: (event: DuetActionButtonCustomEvent) => void; /** * Theme of the pagination. * @default "" */ "theme"?: DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. */ "url"?: string; } interface DuetAlert { /** * Adds accessible label for the dismissible alert close button. * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"} */ "accessibleLabel"?: string; /** * Property to change languageDefaults on the component. normally you would handle these strings on an application level and override accessibleLabel when needed * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"} */ "accessibleLabelDefaults"?: DuetLangObject | string; /** * Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually should be set to false, so that it is not read out first. * @default true */ "announcements"?: boolean; /** * Time in milliseconds which is waited before auto dismiss. */ "autoDismiss"?: number; /** * Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used. * @default false */ "dismissible"?: boolean; /** * When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a toggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible. * @default "" */ "expandingTitle"?: string; /** * @deprecated - if you need to set focus, use a focusable element inside Make alert focusable. * @default false */ "focusable"?: boolean; /** * Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons, use of this property is discouraged, and it is being considered for deprication. * @default "" */ "icon"?: DuetIconName; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Emitted when the alert closing transition is complete. */ "onDuetCloseComplete"?: (event: DuetAlertCustomEvent) => void; /** * Emitted when the dismiss button is clicked */ "onDuetDismiss"?: (event: DuetAlertCustomEvent) => void; /** * Controls the padding of the component. * @default "auto" */ "padding"?: DuetPadding; /** * Allows for styling of the alert based on its position in the layout. "below-nav" is used when the alert is below the navigation bar. It also overrides the icon to be the same as the variation. * @default "content" */ "position"?: "below-nav" | "content"; /** * Theme of the card. * @default "" */ "theme"?: DuetTheme; /** * Status variation of the alert. "danger" and "warning" will render the alert with role "alert" (unless announcements has been set to false). Other variations will have role "status". Use "danger" only when something serious has happened or the user must take immediate action. Use "warning" for unexpected situations that are potentially harmful, but don't require immediate action. * @default "default" */ "variation"?: DuetStatus; } interface DuetBadge { /** * Variation of the background. "strong" results in a more prominent background color. * @default "normal" */ "background"?: "normal" | "strong"; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Theme of the badge. * @default "" */ "theme"?: DuetTheme; /** * Style variation of the badge. * @default "default" */ "variation"?: DuetStatus | "subtle"; } interface DuetBanner { /** * Background color. * @default "primary-lighter" */ "backgroundColor"?: DuetColor; /** * The actual heading level used in the HTML markup. * @default "h2" */ "headingLevel"?: DuetHeadingLevel; /** * Icon. * @default "" */ "icon"?: DuetIconName; /** * Icon background color. * @default "primary" */ "iconBackgroundColor"?: DuetColor; /** * Icon color. * @default "gray-lightest" */ "iconColor"?: DuetColor; /** * Image. Example image is 512x341; * @default "" */ "image"?: string; /** * Alt attribute text for the image. If not provided, image is assigned presentation role. */ "imageAlt"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Maximum size of the banner. The banner will automatically switch to smaller sizes when space is not available. Sizes "large" and "medium" are horizontal, "small" is vertical, * @default "large" */ "size"?: bannerSize; /** * Array of sources for responsive images. Sources have the properties of element. This is an experimental feature and might be changed without notice. */ "sources"?: DuetSource[] | string; /** * Text color. * @default "secondary" */ "textColor"?: DuetColor; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetBreadcrumb { /** * 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; /** * Href for the link. Should be left empty for the last item, which should be the current page. * @default "" */ "href"?: string; /** * Icon * @default "arrow-right-small-icon" */ "icon"?: DuetIconName; /** * Icon size * @default "x-small" */ "iconSize"?: DuetIconSize; /** * Theme * @default "" */ "theme"?: DuetTheme; } interface DuetBreadcrumbs { /** * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color"?: DuetColor; /** * Theme * @default "" */ "theme"?: DuetTheme; /** * Variation * @default "header" */ "variation"?: "header" | "footer" | "plain"; } interface DuetButton { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the button. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Details of the component * @default undefined */ "accessibleDetails"?: string; /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded"?: boolean; /** * 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; /** * Property to change accessibleLabelExternal defaults on the component. normally you would handle these strings on an application level and override accessibleLabelExternal when needed * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelExternalDefaults"?: DuetLangObject | string; /** * Adds accessible label for button in "loading" state * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"} */ "accessibleLabelLoading"?: string; /** * Property to change accessibleLabelLoading defaults on the component. normally you would handle these strings on an application level and override accessibleLabelLoading when needed * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"} */ "accessibleLabelLoadingDefaults"?: DuetLangObject | string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Indicates the id of a component owned by the button. */ "accessibleOwns"?: string; /** * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button. * @default "false" */ "accessiblePopup"?: string; /** * Tells screen reader the element is pressed. */ "accessiblePressed"?: boolean; /** * Centers the text of a button * @default false */ "centerText"?: DuetButtonTextCentering; /** * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color"?: DuetColor; /** * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * Expands the button to fill 100% of the container width. * @default false */ "expand"?: boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external"?: boolean; /** * Keep the button fixed width even on mobile viewports. * @default false */ "fixed"?: boolean; /** * ID of associated form element. */ "form"?: string; /** * Icon to display to the left of the button content. This is ignored/overridden when button is used as an external link. * @default "" */ "icon"?: DuetIconName; /** * Whether this button should use styles meant for displaying just an icon. * @default false */ "iconOnly"?: boolean; /** * Show icon on the right side of the button content. * @default false */ "iconRight"?: boolean; /** * Icon size. * @default "medium" */ "iconSize"?: DuetButtonIconSize; /** * Adds a unique identifier for the button. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead. */ "identifier"?: string; /** * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Loading state of the button * @default false */ "loading"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute. */ "name"?: string; /** * Negative variation, can be combined with Variation to produce negative versions * @default false */ "negative"?: boolean; /** * Emitted when the button loses focus. */ "onDuetBlur"?: (event: DuetButtonCustomEvent) => void; /** * Emitted when the button has focus. */ "onDuetFocus"?: (event: DuetButtonCustomEvent) => void; /** * Controls the padding of the plain variation button - has no effect for other variations. * @default "auto" */ "padding"?: DuetPadding; /** * Button’s size. * @default "medium" */ "size"?: DuetButtonSize; /** * Allows the button to submit a form. * @default false */ "submit"?: boolean; /** * Theme of the button. * @default "" */ "theme"?: DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. */ "url"?: string; /** * The value of the button, which gets paired with the button's name when submitted as part of a form. Corresponds with the native HTML value attribute. */ "value"?: string; /** * Style variation of the button. * @negative - value is deprecated and should be used in combination with negative prop in the future * @destructive - value is deprecated and should be replace with destructive-secondary * @default "default" */ "variation"?: DuetButtonVariation; /** * Controls the text wrapping. * @default "auto" */ "wrapping"?: DuetButtonWrapping; } interface DuetCallout { /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Theme of the caption. * @default "" */ "theme"?: DuetTheme; } interface DuetCaption { /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Selected state of the caption. Used inside Choice component. * @default false */ "selected"?: boolean; /** * Controls the size of the caption. * @default "medium" */ "size"?: DuetCaptionSize; /** * Theme of the caption. * @default "" */ "theme"?: DuetTheme; } interface DuetCard { /** * Adds accessible label for the card that is only shown for screen readers. Typically, this label text is used when the whole card is made clickable to create a label text for users who use assistive technology. */ "accessibleLabel"?: string; /** * Custom color to be used for the card background, as a design token entered in camelCase or kebab-case. Example: "primary". * @default "gray-lightest" */ "background"?: DuetColor; /** * Makes the card expand and collapse when the collapse/expand arrow in the heading is clicked or tapped. This option only works together with the heading option, meaning that you also need to set the heading for this functionality to show up. * @default false */ "collapsible"?: boolean; /** * The content for the card heading. If empty, both heading and collapse functionality will be hidden. * @default "" */ "heading"?: string; /** * Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary". */ "headingBackground"?: DuetColor | undefined; /** * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings. * @default "h2" */ "headingLevel"?: DuetCardHeadingLevel; /** * Icon to display on the left side of heading. Example: "form-location" */ "icon"?: DuetIconName; /** * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor". * @default "currentColor" */ "iconColor"?: DuetColor; /** * Image to display in the card. The image aspect ratio can be anything as images are resized to fit 100% width of the card. Example: "https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg" */ "image"?: string; /** * Alt attribute text for the image. If not provided, image is assigned presentation role. */ "imageAlt"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Event emitted when opened/closed */ "onDuetToggle"?: (event: DuetCardCustomEvent) => void; /** * If the card is collapsible, this property controls whether the card is open or closed. * @default true */ "open"?: boolean; /** * The padding for the card. Please note that the card padding values don’t directly translate to similar space token names, but instead the card uses it’s own derived defaults. * @default "small" */ "padding"?: DuetCardPadding; /** * Additional content for the card heading. If empty, both heading and collapse functionality will be hidden. * @default "" */ "secondaryHeading"?: string; /** * Breakpoint used to remove shadow around card. These match to similar media query tokens: $media-query-small and $media-query-medium. * @default undefined */ "shadowBreakpoint"?: DuetBreakpoints; /** * Theme of the card. * @default "" */ "theme"?: DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. */ "url"?: string; /** * Style variation of the card. * @default "default" */ "variation"?: DuetCardVariation; } interface DuetCheckbox { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the checkbox. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Aria Details of the component * @default undefined */ "accessibleDetails"?: string; /** * Control the tabindex of checkbox. In most cases this should never be used! It exists only for Duet’s internal needs. */ "accessibleIndex"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the checkbox. */ "accessibleOwns"?: string; /** * Aria selected * @default undefined */ "accessibleSelected"?: string; /** * Check state of the checkbox. * @default false */ "checked"?: boolean; /** * Makes the checkbox component disabled. This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * Display the checkbox in error state along with an error message (when a required choice has not been made). Note that this should only be used for single checkbox - for multiple checkboxes, wrap them in a fieldset and use the error property on that. * @default "" */ "error"?: string; /** * Adds a unique identifier for the checkbox. */ "identifier"?: string; /** * Label for the checkbox * @default "label" */ "label"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Name of the checkbox. */ "name"?: string; /** * Emitted when the checkbox loses focus. */ "onDuetBlur"?: (event: DuetCheckboxCustomEvent) => void; /** * Emitted when the checked property has changed. */ "onDuetChange"?: (event: DuetCheckboxCustomEvent) => void; /** * Emitted when the checkbox has focus. */ "onDuetFocus"?: (event: DuetCheckboxCustomEvent) => 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. * @default false */ "required"?: boolean; /** * Defines a specific role attribute for the input. */ "role"?: string | null; /** * Theme of the checkbox. * @default "" */ "theme"?: DuetTheme; /** * The value of the checkbox does not mean if it's checked or not, use the checked property for that. */ "value"?: string; } interface DuetCheckmark { /** * Checked * @default false */ "center"?: boolean; /** * Checked * @default false */ "checked"?: boolean; /** * Checked * @default false */ "presentationOnly"?: boolean; /** * Theme * @default "" */ "theme"?: DuetTheme; /** * Type * @default "checkbox" */ "type"?: DuetChoiceType; } interface DuetChip { /** * If the component expands or collapses adjacent content, then use this property to add the aria-expanded attribute to the opening element. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "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. With input variation this is not used, as the accessible label is automatically generated. */ "accessibleLabel"?: string; /** * Use this property to add an aria-haspopup attribute. * @default "false" */ "accessiblePopup"?: string; /** * Checked state of the filter chip. * @default false */ "checked"?: boolean; /** * Makes the chip look inactive and announced as unavailable to assistive technologies. Prevents the default action. Not available for the input variation. * @default false */ "disabled"?: boolean; /** * Icon to display to the left of the chip content. * @default "" */ "icon"?: DuetIconName; /** * Adds a unique identifier for the chip. */ "identifier"?: string; /** * Name attribute of the html input (filter) or button. */ "name"?: string; /** * Emitted when the chip loses focus. */ "onDuetBlur"?: (event: DuetChipCustomEvent) => void; /** * Emitted when the checked property has changed (applicable only for the filter variation). */ "onDuetChange"?: (event: DuetChipCustomEvent) => void; /** * Emitted when the chip receives focus. */ "onDuetFocus"?: (event: DuetChipCustomEvent) => void; /** * Emitted when an input chip is removed. */ "onDuetRemove"?: (event: DuetChipCustomEvent) => void; /** * Id of the DuetPopupMenu that is controlled by the chip. */ "popup"?: string; /** * Size of the chip. Use "large" for a chip that has the same height as default duet-input and duet-button. * @default "medium" */ "size"?: DuetChipSize; /** * Theme of the button. * @default "" */ "theme"?: DuetTheme; /** * The value of the html input when used as filter, or the button's value. */ "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. * @default "button" */ "variation"?: DuetChipVariation; } interface DuetChoice { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the choice. if this is set to an empty string it will prevent screenreaders from flowing to a collapsible content and can be used as an escape hatch if that behaviour is undesired. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Aria Details of the component * @default undefined */ "accessibleDetails"?: string; /** * Accessible label that is read for screen reader users in the info toggle trigger button. Not visible for normal users. * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelInfoButton"?: string; /** * Property to change accessibleLabelInfoButton defaults on the component. normally you would handle these strings on an application level and override accessibleLabelInfoButton when needed * @default DuetStringsExternalDefaults */ "accessibleLabelInfoButtonDefaults"?: DuetLangObject | string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Indicates the id of a component owned by the choice. */ "accessibleOwns"?: string; /** * Additional caption to show inside the label of the choice button. * @default "" */ "caption"?: string; /** * Checked state of the choice button. * @default false */ "checked"?: boolean; /** * Makes the choice button open a new section underneath it when clicked or tapped. This new section can be used to show more options related to this choice. Please note that this feature can’t be used together with the "info" functionality and that it only accepts plain dom nodes (no shadow dom elements such as duet-paragraph can be used as this will break accessibility) * @default false */ "collapsible"?: boolean; /** * This attribute works only when the 'collapsible' attribute is set to true. It maintains the visibility of the additional content section, regardless of whether the input is checked or not. * @default false */ "collapsibleForceExpanded"?: boolean; /** * Accessible collapsible notification. If a collapsible choice has no header, and contains other elements than duet-paragraph, duet-heading or duet-fieldset, this is used as the accessible notification of opening the collapsible content (added to aria-describedby). * @default { fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle", en: "This choice has additional information opened below", sv: "Det här val har mer information som öppnades nedan", } */ "collapsibleNotification"?: string; /** * Accessible collapsible notification defaults * @default { fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle", en: "This choice has additional information opened below", sv: "Det här val har mer information som öppnades nedan", } */ "collapsibleNotificationDefaults"?: | DuetLangObject | string; /** * Makes the choice component disabled. This prevents users from being able to interact with the choice, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * Expands the choice button to fill 100% of the container width. * @default false */ "expand"?: boolean; /** * Icon to display to the left of the choice button label. * @default "" */ "icon"?: string; /** * Adds a unique identifier for the choice button. */ "identifier"?: string; /** * Accessible info label * @default { fi: "Lisätietoja vaihtoehdosta", en: "More information about", sv: "Mera information om", } */ "infoLabel"?: string; /** * Accessible info label defaults * @default { fi: "Lisätietoja vaihtoehdosta", en: "More information about", sv: "Mera information om", } */ "infoLabelDefaults"?: DuetLangObject | string; /** * Label for the choice button. * @default "label" */ "label"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Name attribute of the html input that the Choice component controls. */ "name"?: string; /** * Emitted when the checkbox loses focus. */ "onDuetBlur"?: (event: DuetChoiceCustomEvent) => void; /** * Emitted when the checked property has changed. */ "onDuetChange"?: (event: DuetChoiceCustomEvent) => void; /** * Emitted when the component is available in the DOM. */ "onDuetChoiceReady"?: (event: DuetChoiceCustomEvent) => void; /** * Emitted when the checkbox has focus. */ "onDuetFocus"?: (event: DuetChoiceCustomEvent) => void; /** * Controls the padding of the component. * @default "auto" */ "padding"?: DuetPadding; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required"?: boolean; /** * Theme of the choice. * @default "" */ "theme"?: DuetTheme; /** * Type of the choice button. You can set the type of the choice to be either “radio” or “checkbox”. Depending on this selection we convey the selection type to assistive technologies as well. When type “radio” is chosen it is required to place the choices inside Choice Group component. * @default "checkbox" */ "type"?: DuetChoiceType; /** * The value of the html input that the Choice component controls. */ "value"?: string; } interface DuetChoiceGroup { /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium. * @default "small" */ "breakpoint"?: DuetChoiceGroupBreakpoint; /** * Additional caption to show inside the label of the choice group. * @default undefined */ "caption"?: string; /** * Direction of the choice group. * @default "vertical" */ "direction"?: DuetDirection; /** * Determines, whether the control is disabled or not. */ "disabled"?: boolean; /** * Display choice group in error state along with an error message. * @default "" */ "error"?: string; /** * Legend displayed for the choice buttons in this group. * @default "Label" */ "label"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Name for the choice buttons within this group. **This must be unique amongst all other inputs.** */ "name"?: string; /** * Sets whether making a choice is required or optional. Will set contained choices to required as well. * @default false */ "required"?: boolean; /** * Enable or disable the automatic responsive behaviour of the choice group component when horizontal setting is used. Setting this option to "true" makes sure that contents are stacked vertically on mobile. * @default false */ "responsive"?: boolean; /** * Theme of the choice group. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the choice group. * @default undefined */ "tooltip"?: string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection"?: DuetTooltipDirection; /** * The value of the selected choice button. */ "value"?: string; } interface DuetCollapsible { /** * Adds accessible label for the collapsible 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; /** * The caption text to display below the heading. * @default "" */ "caption"?: string; /** * Centers heading inside its container * @default false */ "centerHeading"?: boolean; /** * The content for the collapsible heading. * @default "" */ "heading"?: string; /** * Makes collapsible heading full width * @default false */ "headingFullWidth"?: boolean; /** * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. only variations of h1-h6 area accepted * @default undefined */ "headingLevel"?: DuetHeadingLevel | undefined; /** * Custom headingSize to be used for font size of heading, as a design token entered in kebab-case x-small -> font-size-x-small. Example: # 12px (0.75rem) ------ +2px (x-small) # 14px (0.875rem) ------ +2px (small) # 16px (1rem) ------ +2px (medium) # 20px (1.25rem) ------ +4px (large) # 24px (1.5rem) ------ +4px (x-large) # 36px (2.25rem) ------ +12px (xx-large) # 48px (3rem) ------ +12px (xxx-large) # 72px (4.5rem) ------ +24px (xxxx-large) * @default undefined */ "headingSize"?: DuetCollapsibleHeadingFontSize; /** * The font weight of the heading * @default "semibold" */ "headingWeight"?: DuetCollapsibleWeight; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Negative variation for collapsible on dark background * @default false */ "negative"?: boolean; /** * Event emitted when opened/closed */ "onDuetToggle"?: (event: DuetCollapsibleCustomEvent) => void; /** * Is the component expanded or collapsed. * @default false */ "open"?: boolean; /** * Theme of the collapsible. * @default "" */ "theme"?: DuetTheme; } interface DuetCombobox { /** * Defaults for the accessible labels for the select items * @default { en: { heading: "Select:", item: "{name}", itemFiltered: "{name}, {hiddenItems} filtered", }, fi: { heading: "Valitse:", item: "{name}", itemFiltered: "{name}, {hiddenItems} suodatettu", }, sv: { heading: "Välj:", item: "{name}", itemFiltered: "{name}, {hiddenItems} filtrerade", }, } */ "accessibleLabelDefaults"?: DuetLangObject | string; /** * Accessible labels for the select items * @default getLocaleString( this.accessibleLabelDefaults, getLanguage() ) */ "accessibleLabels"?: Record; /** * Caption for the input if input is not provided as a slotted element. * @default "" */ "caption"?: string; /** * Defines if filtering of items should be done by includes or startsWith * @default "startsWith" */ "filterType"?: "includes" | "startsWith"; /** * Force the user to make a selection (typing things in the input field will only be used for list search). This property also sync input value with selected value on blur. * @default false */ "force"?: boolean; /** * A hook to overwrite how the values are displayed in the input field after a User select an item * @example (item) => `${item.name} (${item.value})` * @default undefined */ "formatter"?: (item: DuetComboboxItem) => string; /** * Array of item objects. Each item should have properties name, value and optionally id. If id is not provided, it will be generated. Alternatively, an array of strings can be provided, in which case the strings will be used for name, value and id. */ "items"?: any; /** * Label for the input if input is not provided as a slotted element. * @default "" */ "label"?: string; /** * Defines minimum number of characters that must be given to show search results * @default 0 */ "minCharacters"?: number; /** * Allow multiple selections. Selections are displayed as DuetChips. * @default false */ "multiple"?: boolean; /** * Emitted when selected item changed. */ "onDuetChange"?: (event: DuetComboboxCustomEvent) => void; /** * Defines if items list should always open after clicking on input * @default false */ "openListOnClick"?: boolean; /** * Theme of the combobox. * @default "" */ "theme"?: DuetTheme; /** * Value of selected item/s. If multiple is true, value is an array of selected items, else it's a string. */ "value"?: string | string[]; } interface DuetContactCard { /** * Button icon. * @default "form-date" */ "buttonIcon"?: DuetIconName; /** * Button text. */ "buttonText"?: string; /** * Button url. */ "buttonUrl"?: string; /** * Description. */ "description"?: string; /** * Email. */ "email"?: string; /** * Image. */ "image"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Name. */ "name"?: string; /** * Phone. */ "phone"?: string; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetCookieConsent { /** * Adds accessible label for the cookie consent ok button. * @default "Hyväksyn evästeiden käytön" */ "accessibleLabel"?: string; /** * Emitted when the consent button has been clicked. */ "onDuetCookieConsent"?: (event: DuetCookieConsentCustomEvent) => void; /** * Theme of the cookie consent banner. * @default "" */ "theme"?: DuetTheme; } interface DuetDatePicker { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy"?: string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the input. */ "accessibleOwns"?: string; /** * Caption (underneath label) that can be set as a way of adding extra information. */ "caption"?: string; /** * Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right. * @default "right" */ "direction"?: DuetDatePickerDirection; /** * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those. * @default false */ "disableBuiltInErrors"?: boolean; /** * Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * If form input field has a placeholder text, and user types anything (causing the text to dissapear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) * @default false */ "echoPlaceholder"?: boolean; /** * Display the date picker input in error state along with an error message. * @default "" */ "error"?: string; /** * Expands the date picker input to fill 100% of the container width. * @default false */ "expand"?: boolean; /** * Adds a unique identifier for the date picker input. * @default "" */ "identifier"?: string; /** * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100 * @default 10 */ "incrementYears"?: number; /** * Label for the date picker input. * @default "" */ "label"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * The currently active language. This setting changes the month/year/day. names and button labels as well as all screen reader labels. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing. * @default "fi" */ "language"?: DuetLanguage; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. * @default "" */ "max"?: string; /** * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. * @default "" */ "min"?: string; /** * Name of the date picker input. * @default "" */ "name"?: string; /** * Event emitted the date picker input is blurred. */ "onDuetBlur"?: (event: DuetDatePickerCustomEvent) => void; /** * Event emitted when a date is selected. */ "onDuetChange"?: (event: DuetDatePickerCustomEvent) => void; /** * Event emitted the date picker input is focused. */ "onDuetFocus"?: (event: DuetDatePickerCustomEvent) => void; /** * Hint text to display before the user types into the date picker input. * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" } */ "placeholder"?: string; /** * Placeholder defaults. * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" } */ "placeholderDefaults"?: DuetLangObject | string; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required"?: boolean; /** * Defines a specific role attribute for the date picker input. */ "role"?: string | null; /** * Theme of the component. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the date picker input. * @default "" */ "tooltip"?: string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection"?: DuetTooltipDirection; /** * This offers information relating to the current validity of the component. It follow as closely as possible the behaviour of the native date input. Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow. * @readonly */ "validity"?: ValidityState; /** * Date value. Must be in IS0-8601 format: YYYY-MM-DD * @default "" */ "value"?: string; } interface DuetDivider { /** * Custom color, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color"?: DuetColor; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetDividerMargin; /** * Theme of the divider. * @default "" */ "theme"?: DuetTheme; } interface DuetEditableTable { /** * Exposes the aria role for optimizing accessibility. * @default undefined */ "accessibleRole"?: string; /** * Define actions for all items in a table An alternative to inline HTML table. required for Sortable tables * @default undefined */ "actions"?: DuetEditableTableActions; /** * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout. * @default "small" */ "breakpoint"?: DuetTableBreakpoint; /** * Define columns for a table An alternative to inline HTML table. required for Sortable tables * @default undefined */ "columns"?: DuetEditableTableColumns; /** * Optional id that get passed to the table and used to setup ::parts * @default "" */ "groupId"?: string; /** * Hide a thead section visually. The content is still available to screen readers. * @default false */ "hideHeadVisually"?: boolean; /** * Duet-table: margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Event emitted when table is sortable and a header item is clicked/enter is pressed */ "onDuetMenuClick"?: (event: DuetEditableTableCustomEvent) => void; /** * Event emitted when table is sortable and a header item is clicked/enter is pressed */ "onDuetTableToggle"?: (event: DuetEditableTableCustomEvent) => void; /** * Define rows for a table An alternative to inline HTML table. required for Sortable tables * @default undefined */ "rows"?: DuetEditableTableRows; /** * Controls whether the table is sortable by headers * @default false */ "sortable"?: boolean; /** * Duet-table: Controls whether the table has a sticky header. Sticky headers are not compatible with breakpoint="none-scrollable". * @default false */ "sticky"?: boolean; /** * Duet-table: Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky. * @default "with-links" */ "stickyDistance"?: DuetTableStickyDistance; /** * Theme of the table. * @default "" */ "theme"?: DuetTheme; /** * Duet-table: Style variation of the table. * @default "striped" */ "variation"?: DuetTableVariant; } interface DuetEmptyState { /** * Icon shown in the empty state component. * @default "messaging-question" */ "icon"?: DuetIconName; /** * The size of the empty state message. * @default "medium" */ "size"?: DuetEmptyStateSize; /** * Theme of the empty state component. * @default "" */ "theme"?: DuetTheme; } interface DuetFieldset { /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * Additional caption to show next to the label. */ "caption"?: string; /** * An error message to be shown next to the label. * @default "" */ "error"?: string; /** * Label/legend displayed for the fieldset. */ "label": string; /** * Heading level for the label in the legend element. This is only used to give screen readers better logical structure. This does not affect visual appearance. * @default "span" */ "labelHeadingLevel"?: DuetHeadingLevel | "span"; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Theme of the fieldset. * @default "" */ "theme"?: DuetTheme; } interface DuetFileChooser { /** * The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. * @default undefined */ "accept"?: string; /** * Use multiple to allow the user to select multiple files when uploading * @default false */ "multiple"?: boolean; /** * Emitted when the value has changed. */ "onDuetChange"?: (event: DuetFileChooserCustomEvent) => void; /** * theme. * @default "" */ "theme"?: DuetTheme; } interface DuetFooter { /** * Accessible label for footer */ "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; /** * Property to change accessibleLabelExternal defaults on the component. normally you would handle these strings on an application level and override accessibleLabelExternal when needed * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelExternalDefaults"?: DuetLangObject | string; /** * An array of items for the main footer links. Items have to include mandatory "label" and "href" fields to work. Additionally, you can pass an "id" that is added as an HTML identifier for the anchor tag. Also data object can be given to set data attributes to items. Note that previously mandatory "icon" field has now been removed - setting it has no effect. */ "items"?: any; /** * The currently active language. This setting changes the logo to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * URL that the logo link points to. * @default "/" */ "logoHref"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * An array of items for the small footer menu. Items have to include mandatory "label" and "href" fields to work. Also data object can be given to set data attributes to items. Additionally, you can pass an "id" that is added as an HTML identifier for the anchor tag. */ "menu"?: any; /** * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be accessed via **event.detail.analyticsId** */ "onDuetAnalytics"?: (event: DuetFooterCustomEvent) => void; /** * @deprecated in favour of the more specific events like duetLogoClick. Callback for when a user is about to navigate to another page. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetChange"?: (event: DuetFooterCustomEvent) => void; /** * General event stream for the following events: item: onMouseEnter, onTouchDown; menuItem: onMouseEnter, onTouchDown;. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetEvent"?: (event: DuetFooterCustomEvent) => void; /** * Event raised when the items are clicked. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetItemClick"?: (event: DuetFooterCustomEvent) => void; /** * Event raised when the logo is clicked. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetLogoClick"?: (event: DuetFooterCustomEvent) => void; /** * Event raised when the menu links are clicked. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetMenuClick"?: (event: DuetFooterCustomEvent) => void; /** * Theme of the navigation. * @default "" */ "theme"?: DuetTheme; /** * Style variation of the footer. * @default "default" */ "variation"?: DuetFooterVariation; } interface DuetGrid { /** * Adjusts the vertical alignment of the grid items, if set to "form-distribute" the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items, so that they align even when displaying errors. Value "form_distribute" is deprecated, use "form-distribute" for new development. * @default "top" */ "alignment"?: DuetGridAlignment; /** * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens: $media-query-small and $media-query-medium. * @default "small" */ "breakpoint"?: DuetGridBreakpoint; /** * Direction of the grid items. * @default "horizontal" */ "direction"?: DuetDirection; /** * Adjusts the horizontal distribution of the grid items. * @default "default" */ "distribution"?: DuetGridDistribution; /** * CSS grid based templates that can be used to create pre-defined layouts. * @default null */ "gridTemplate"?: | "small" | "medium" | "large" | "sidebar-right" | "sidebar-left" | "two-columns" | "three-columns" | "button-grid"; /** * Adjusts the horizontal alignment of the grid items on mobile (575px and under). * @default "" */ "mobile"?: DuetGridMobileAlignment; /** * Enable or disable the automatic responsive behaviour of the grid component. Setting this option to "true" makes sure that contents are stacked vertically on mobile (575px and under). * @default false */ "responsive"?: boolean; /** * Reverse the order of the grid items when horizontal. Usefull when we want the primary item to be on bottom right on desktop, but on top on mobile and the first for screen readers. * @default false */ "rowReverse"?: boolean; } interface DuetGridItem { /** * Make the grid item fill the remaining available grid space. * @default false */ "fill"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Sets the maximum width for the grid item using any valid numeric CSS value. E.g. "300px". */ "maxWidth"?: string; /** * Sets the minimum width for the grid item using any valid numeric CSS value. E.g. "33.333%". */ "minWidth"?: string; /** * Theme of the grid item. * @default "" */ "theme"?: DuetTheme; } interface DuetHeader { /** * Adds i18n translations of all internally used textStrings * @default { fi: { skipLabel: "Siirry pääsisältöön", changeLanguage: "Vaihda kieltä", activeLanguage: "Suomi valittuna", }, sv: { skipLabel: "Hoppa till huvudinnehåll", changeLanguage: "Ändra Språk", activeLanguage: "Svenska valt", }, en: { skipLabel: "Skip to main content", changeLanguage: "Change language", activeLanguage: "English selected", }, } */ "accessibleI18nLabels"?: I18nText; /** * Default strings for accessibleI18nLabels * @default { fi: { skipLabel: "Siirry pääsisältöön", changeLanguage: "Vaihda kieltä", activeLanguage: "Suomi valittuna", }, sv: { skipLabel: "Hoppa till huvudinnehåll", changeLanguage: "Ändra Språk", activeLanguage: "Svenska valt", }, en: { skipLabel: "Skip to main content", changeLanguage: "Change language", activeLanguage: "English selected", }, } */ "accessibleI18nLabelsDefaults"?: | string | Record; /** * Accessible label that is shown for screen reader users in the mobile navigation toggle. Not visible for normal users. * @default { fi: "Valikko", sv: "Meny", en: "Menu", } */ "accessibleLabel"?: string; /** * Property to change accessibleLabel defaults on the component. normally you would handle these strings on an application level and override accessibleLabel when needed * @default { fi: "Valikko", sv: "Meny", en: "Menu", } */ "accessibleLabelDefaults"?: 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; /** * Property to change accessibleLabelExternal defaults on the component. normally you would handle these strings on an application level and override accessibleLabelExternal when needed * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelExternalDefaults"?: DuetLangObject | string; /** * An object that includes mandatory "label" and "href" fields for the back link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, back link won’t be shown. **NOTE: The back link should be ONLY used in combination with language and logoHref props.** */ "back"?: any; /** * Label of the contact menu. If empty, contact menu will be hidden. Note: not available in multilevel headers. * @default "" */ "contact"?: string; /** * An array of items for the contact menu. "label" and "href" are mandatory. Additionally, you can pass an "id" that is added as an HTML identifier for the element, and pass an "external" flag if the link is to open in a new window. */ "contactItems"?: any; /** * The href of the current page item that is shown as “active”. Note: not available in multilevel headers. * @default "/" */ "currentHref"?: string; /** * An array of items for the main navigation. Items have to include mandatory "label" and "href" fields to work. Additionally, you can pass an "id" that is added as an HTML identifier for the element, "active" boolean that makes item active, "badge" boolean to add notification badge next to the item and "items" array consisting of sub items that are allowed up to three levels. Two and three level menus are deprecated and you should instead use Nav component to create multilevel navigations. */ "items"?: any; /** * The currently active language. This setting also changes the logo to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * An array of items for the language menu. If empty, the language menu will be hidden. "label", "country" and "href" are mandatory. Additionally you can pass an "id" that is added as an HTML identifier for the element. */ "languageItems"?: any; /** * URL that the logo link points to. * @default "/" */ "logoHref"?: string; /** * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be accessed via **event.detail.analyticsId** */ "onDuetAnalytics"?: (event: DuetHeaderCustomEvent) => void; /** * Event raised when a user has clicked the back button. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetBackClick"?: (event: DuetHeaderCustomEvent) => void; /** * @deprecated in favour of more specific events like duetLogoClick. Callback for when a user is about to navigate to another page. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetChange"?: (event: DuetHeaderCustomEvent) => void; /** * Event raised when a user has clicked an option from the contact dropdown. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetContactClick"?: (event: DuetHeaderCustomEvent) => void; /** * General event stream for the following events: item: onMouseEnter, onTouchDown; menuItem: onMouseEnter, onTouchDown;. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetEvent"?: (event: DuetHeaderCustomEvent) => void; /** * Event raised when a user has clicked a menu item. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetItemClick"?: (event: DuetHeaderCustomEvent) => void; /** * Event raised when a user has selected a language from the language dropdown. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetLanguageSelect"?: (event: DuetHeaderCustomEvent) => void; /** * Event raised when a user has clicked the logo. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetLogoClick"?: (event: DuetHeaderCustomEvent) => void; /** * Event raised mobile navigation is toggled. **event.detail.open** shows the current status of the navigation. */ "onDuetMobileNavToggle"?: (event: DuetHeaderCustomEvent) => void; /** * Event for when a user has clicked the search link. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetSearchClick"?: (event: DuetHeaderCustomEvent) => void; /** * Event for when a user has clicked the session link. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetSessionClick"?: (event: DuetHeaderCustomEvent) => void; /** * Event raised when a user has clicked the "skip to content" button. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetSkipClick"?: (event: DuetHeaderCustomEvent) => void; /** * Event raised when a user has clicked the user link. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetUserClick"?: (event: DuetHeaderCustomEvent) => void; /** * Region that is shown next to the logo. If empty, region will be hidden. Note: not available in multilevel header. * @default "" */ "region"?: string; /** * An object that includes mandatory "label" and "href" fields for the search link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, this link won’t be shown. */ "search"?: any; /** * An object that includes mandatory "label", "href" and "type" fields for the session login/logout link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, this link won’t be shown. */ "session"?: any; /** * The ID of the element where "skip to content" link should take the user. If empty, the functionality won’t be rendered in the DOM. * @default "" */ "skipToId"?: string; /** * Theme of the header. * @default "" */ "theme"?: DuetTheme; /** * An object that includes mandatory "label" and "href" fields for the user profile link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, user won’t be shown. Note: not available in multilevel headers. */ "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 * @default false */ "border"?: boolean | "solid"; /** * Custom color for the heading as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color"?: DuetColor; /** * Disable responsive font scaling. * @default false */ "fixedSize"?: boolean; /** * Enable hyphenation for long titles. Useful when there is no control over content e.g. user-generated content. * @default false */ "hyphenate"?: boolean; /** * The actual heading level used in the HTML markup. * @default "h2" */ "level"?: DuetHeadingLevel | "div"; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Theme of the heading. * @default "" */ "theme"?: DuetTheme; /** * Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup. */ "visualLevel"?: DuetVisualHeadingLevel; /** * This property allows you to set normal or semibold font weight for all sizes when needed. * @default "auto" */ "weight"?: DuetHeadingWeight; } interface DuetHero { /** * 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; /** * An array of items for the main actions. Items have to include mandatory "label", "href" and "icon" fields to work. Additionally, you can pass an "id" that is added as an HTML identifier for the anchor tag. */ "actions"?: any; /** * An object that includes mandatory "label" and "href" fields for the back link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, back link won’t be shown. **NOTE: The back link can be ONLY used in combination with "gray" style variation.** */ "back"?: any; /** * An object that includes any data you want to pass to the button. This data will be emitted when the button is clicked. If property analyticsId is present, then a separate duetAnalytics event will be emitted. */ "buttonData"?: DuetHeroButtonData; /** * ID for the button. * @default "" */ "buttonId"?: string; /** * Text label shown inside the button. If empty, button will be hidden. * @default "" */ "buttonLabel"?: string; /** * URL that the button links to. * @default "#" */ "buttonUrl"?: string; /** * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden. * @default "" */ "categoryIcon"?: DuetIconName; /** * Icon color to use for the category icon that can be used in gray hero area variation. * @default "category-pet" */ "categoryIconColor"?: DuetColor; /** * The description of the hero area, rendered in a P tag. If empty, description will be hidden. * @default "" */ "description"?: string; /** * The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden. There is also a heading slot that can be used. * @default "" */ "heading"?: string; /** * Icon to display to the left of the button content. If empty, icon will be hidden. * @default "" */ "icon"?: DuetIconName; /** * Show icon on the right side of the button content. * @default false */ "iconRight"?: boolean; /** * Icon size for the button. * @default "medium" */ "iconSize"?: DuetHeroIconSize; /** * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of Hero Area the required image size is 1200x1200px (1:1 ratio). If this property is left empty, image will be hidden. * @default "" */ "image"?: string; /** * Alt attribute text for the image. If not provided, image is assigned presentation role. */ "imageAlt"?: string; /** * Image position. * @default "auto" */ "imagePosition"?: "auto" | "center"; /** * Image sizing. * @default "auto" */ "imageSize"?: "auto" | "cover"; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Layout. * @default "narrow" */ "layout"?: "narrow" | "fluid"; /** * Forces all items in the header to be leftAligned This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices or allways leftAligned (you must manually switch this parameter if you need special breakpoints) this nullifies textCenter prop * @default false */ "leftAlign"?: boolean; /** * The level of the heading. * @default "h1" */ "level"?: DuetHeadingLevel; /** * An array of items for the definition list inside hero. Items have to include mandatory "label" and "value" fields to work. */ "listItems"?: any; /** * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be accessed via **event.detail.analyticsId** */ "onDuetAnalytics"?: (event: DuetHeroCustomEvent) => void; /** * Callback for when an user clicks the hero area's action button. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetClick"?: (event: DuetHeroCustomEvent) => void; /** * The headline shown before heading. * @default "" */ "preHeading"?: string; /** * The level of the heading. Only usable with campaign, section variations. * @default "h2" */ "subHeadingLevel"?: DuetHeadingLevel; /** * Centers the text in hero area. * @default false */ "textCenter"?: boolean; /** * Theme of the hero area. * @default "" */ "theme"?: DuetTheme; /** * Style variation of the hero area. * @default "default" */ "variation"?: DuetHeroVariation; } interface DuetIcon { /** * Custom color to be used for a circular background, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary". * @default "" */ "background"?: DuetColor; /** * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. * @default "" */ "color"?: DuetColor; /** * A raw SVG string. */ "icon"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Icon name from Duet to display. * @default "action-add" */ "name"?: DuetIconName; /** * Custom color to be used for a circular border and icon outline, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary". * @default "" */ "outline"?: DuetColor; /** * Whether the icon changes its size responsively or not. * @default true */ "responsive"?: boolean; /** * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size. * @default "circle" */ "shape"?: "circle" | "brand" | "brand-rotated"; /** * Icon size. Entered as one of the icon size design tokens. * @default "medium" */ "size"?: DuetIconSize; /** * A URL from which to load an icon. */ "src"?: string; /** * Theme of the icon. This setting will be overridden when you set the color property * @default "" */ "theme"?: DuetTheme; } interface DuetIndicator { /** * Label for users of assistive technologies. This component has sensible defaults, but they can be replaced with this property. */ "accessibleLabel"?: string; /** * Theme of the component * @default "" */ "theme"?: DuetTheme; /** * The variation of the indicator. Typically "change" and "new" are used; "error" and "success" should be used only in special cases, as errors and succeses normally require a more prominent message. * @default "change" */ "variation"?: IndicatorVariation; } interface DuetInput { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Indicates what kind of user input completion suggestions are provided. */ "accessibleAutocomplete"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id or a string of space seperated ids of a component(s) that describes the input. * @default "" */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Aria Details of the component * @default undefined */ "accessibleDetails"?: string; /** * Expanded state of the element, if needed */ "accessibleExpanded"?: string; /** * @deprecated , use `accessiblePopup` property instead * @default undefined */ "accessibleHasPopup"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the input. */ "accessibleOwns"?: string; /** * Indicates value of any popup element associated with the input. * @default undefined */ "accessiblePopup"?: string; /** * Enable or disable automatic completion by the browser * @default "on" */ "autoComplete"?: string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption"?: string; /** * Render a container into which Duet Chip components can be added with the method "addChip". * @default false */ "chips"?: boolean; /** * If set, the input field will display a clear button that can be accessed with tabbing. * @default false */ "clear"?: boolean; /** * Set the amount of time, in milliseconds, to wait to trigger the duetChange event after each keystroke. * @default 0 */ "debounce"?: number; /** * Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * A regular expression that matches any characters which should be *disallowed*. This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression. e.g. the following will disallow any non-numeric characters `[^0-9]` * @default null */ "disallowPattern"?: string; /** * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) * @default false */ "echoPlaceholder"?: boolean; /** * Display the input in error state along with an error message. * @default "" */ "error"?: string; /** * Expands the input to fill 100% of the container width. * @default false */ "expand"?: boolean; /** * Icon to display on the right side (from Duet’s icons). Example: "form-location" */ "icon"?: DuetIconName; /** * Adds a unique identifier for the input. */ "identifier"?: string; /** * Alignment of the input element * @default "left" */ "inputAlign"?: "left" | "right"; /** * Padding of the input element. Use this only in special cases, never with regular forms. Setting this to other than the default will not work properly with button variation or together with icons. * @default "medium" */ "inputPadding"?: DuetInputPadding; /** * Label for the input. * @default "Label" */ "label"?: string; /** * Color of the label. */ "labelColor"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Font weight of the label. */ "labelWeight"?: DuetTextFontWeight; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Use maxlength to specify the maximum length of the value that can be entered. */ "maxlength"?: number; /** * Use minlength to specify the minimum length of the value that can be entered. */ "minlength"?: number; /** * Name of the input. */ "name"?: string; /** * Enable numeric keyboard for the input. * @default false */ "numericKeyboard"?: boolean; /** * Emitted when the input loses focus. */ "onDuetBlur"?: (event: DuetInputCustomEvent) => void; /** * Emitted when the value has changed. */ "onDuetChange"?: (event: DuetInputCustomEvent) => void; /** * Emitted when the input is cleared. */ "onDuetClear"?: (event: DuetInputCustomEvent) => void; /** * Emitted when the input has focus. */ "onDuetFocus"?: (event: DuetInputCustomEvent) => void; /** * Emitted when a keyboard input ocurred. */ "onDuetInput"?: (event: DuetInputCustomEvent) => void; /** * A regular expression to check the value against. Please note that this uses native HTML5 pattern validation. */ "pattern"?: string; /** * Hint text to display. */ "placeholder"?: string; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required"?: boolean; /** * Defines a specific role attribute for the input. */ "role"?: string | null; /** * Theme of the input. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip"?: string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection"?: DuetTooltipDirection; /** * Type of the input. * @default "text" */ "type"?: DuetInputType; /** * This is a proxy for the enclosed native inputs validity * @readonly */ "validity"?: ValidityState; /** * Value of the input. */ "value"?: string; /** * 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. * @default "default" */ "variation"?: DuetVariationType; } interface DuetLabel { /** * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color"?: DuetColor; /** * ID of the component that the label is labelling. */ "for"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetLabelMargin; /** * Controls the size of the label. * @default "medium" */ "size"?: DuetLabelSize; /** * Theme of the label. * @default "" */ "theme"?: DuetTheme; /** * Controls the weight of the label. * @default "semi-bold" */ "weight"?: DuetTextFontWeight; } interface DuetLayout { /** * Center align all direct children of this component. * @default false */ "center"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Align container vertically in the middle when the space allows it. * @default false */ "middle"?: boolean; /** * Breakpoint used to remove padding. These match to similar media query tokens: $media-query-small and $media-query-medium. * @default undefined */ "paddingBreakpoint"?: DuetBreakpoints; /** * Makes the sidebar stick to the top of the window when scrolling down. * @default false */ "sticky"?: boolean; /** * Adjust sticky sidebar’s distance to duet navigation component using this property. * @default "with-links" */ "stickyDistance"?: DuetLayoutStickyDistance; /** * If set to true, the sidebar position will be adjusted to take tabs inside main content area into account. * @default false */ "tabs"?: boolean; } interface DuetLink { /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. Only works with empty url. */ "accessibleExpanded"?: boolean; /** * 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"} */ "accessibleLabelDownload"?: string; /** * Defaults for accessibleLabelDownload * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ "accessibleLabelDownloadDefaults"?: 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; /** * 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. Only works with empty url. * @default "false" */ "accessiblePopup"?: string; /** * Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. With a value, it will be used as the name for the downloaded file. Without a value, the browser will suggest a name. NOTE: this attribute only works for same-origin URLs, or the blob: and data: schemes. * @default null */ "download"?: string; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external"?: boolean; /** * Icon to display on the left side of the link text (only with "block" and "button" variations) */ "icon"?: DuetIconName; /** * Color of the icon to display (with "button" variation) or color of the bullet (with "article-list" variation). Not used for other variations. * @default null */ "iconBackground"?: DuetColor; /** * Color of the icon to display (only with "block" and "button" variations) * @default "currentColor" */ "iconColor"?: DuetIconColor; /** * Whether the icon changes its size responsively (only with "block" variation) * @default false */ "iconResponsive"?: boolean; /** * Adds a unique identifier for the link. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead. */ "identifier"?: string; /** * The currently active language. This setting changes the external link accessible label to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Controls the margin of the component (only with "button" variation) * @default "auto" */ "margin"?: DuetMargin; /** * Controls the padding of the component (only with "block" variation) * @default "auto" */ "padding"?: DuetPadding; /** * Initially visually hidden link, which is shown on focus. * @default false */ "tabToLink"?: boolean; /** * Theme of the button. * @default "" */ "theme"?: DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. * @default "#" */ "url"?: string; /** * Style variation of the link. * @default "default" */ "variation"?: DuetLinkVariation; } interface DuetList { /** * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens: $media-query-small and $media-query-large. * @default "small" */ "breakpoint"?: DuetListBreakpoint; /** * Set the column width of the first column in percentages. For automatic sizing of the column you can use class "duet-list" with a native <dl> element. See list utilities of the CSS framework. * @default "30" */ "labelWidth"?: DuetListLabelWidth; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Adjusts the alignment of the list items on mobile breakpoint. * @default "left" */ "mobile"?: DuetListMobileAlignment; /** * Controls the padding of the component. * @default "auto" */ "padding"?: DuetPadding; /** * Enable or disable the automatic responsive behaviour of the list component. Setting this option to "true" makes sure that contents are stacked vertically on mobile. When "false" is set, contents are always shown in a single row. * @default true */ "responsive"?: boolean; /** * Theme of the list. * @default "" */ "theme"?: DuetTheme; /** * Style variation of the list. * @default "default" */ "variation"?: DuetListVariation; } interface DuetListItem { /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetLogo { /** * Accessible label. Defaults to what is in accessibleLabelDefaults prop. * @default getLocaleString(this.accessibleLabelDefaults) */ "accessibleLabel"?: string; /** * Default translations for accessible label. * @default { fi: "Siirry etusivulle.", sv: "Gå till förstasidan.", en: "Go to front page.", } */ "accessibleLabelDefaults"?: DuetLangObject; /** * Where the logo links to. * @default "/" */ "href"?: string; /** * Use inverse version of the logo (white logo on dark background). * @default false */ "inverse"?: boolean; /** * The language of the logo. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Size variation of the logo. * @default "medium" */ "size"?: DuetLogoSize; /** * Theme of the logo. * @default "" */ "theme"?: DuetTheme; } interface DuetMenuBar { /** * 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; /** * Makes the menu bar hide on top of the window when page is scrolled down Should be used only with sticky navigation. * @default false */ "hideOnScroll"?: boolean; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Logo. * @default true */ "logo"?: boolean; /** * Logo href. */ "logoHref"?: string; /** * Additional information text to show next to the logo. Show only when the center slot is empty. */ "logoInfoText"?: string; /** * Logo link accessible label. */ "logoLinkAccessibleLabel"?: string; /** * General event stream for the following events: logoClick You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetEvent"?: (event: DuetMenuBarCustomEvent) => void; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetMenuBarButton { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the button. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Details of the component * @default undefined */ "accessibleDetails"?: string; /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded"?: boolean; /** * 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; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Indicates the id of a component owned by the button. */ "accessibleOwns"?: string; /** * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button. * @default "false" */ "accessiblePopup"?: string; /** * Tells screen reader the element is pressed. */ "accessiblePressed"?: boolean; /** * Icon * @default undefined */ "icon"?: string; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetMenuBarDropdown { /** * 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; /** * Icon * @default undefined */ "icon"?: string; /** * Open * @default false */ "open"?: boolean; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetMenuBarDropdownLink { /** * 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; /** * Href * @default "#" */ "href"?: string; /** * Icon * @default undefined */ "icon"?: string; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetMenuBarItem { /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded"?: boolean; /** * 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. * @default "false" */ "accessiblePopup"?: string; /** * Active * @default false */ "active"?: boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external"?: boolean; /** * Left icon. * @default undefined */ "leadingIcon"?: DuetIconName; /** * Theme. * @default "" */ "theme"?: DuetTheme; /** * Right icon. * @default undefined */ "trailingIcon"?: DuetIconName; /** * Url */ "url"?: string; } interface DuetMenuBarLink { /** * 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; /** * Active * @default false */ "active"?: boolean; /** * Href * @default "#" */ "href"?: string; /** * Icon * @default undefined */ "icon"?: string; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetModal { /** * Makes either the entire modal ("all"), headign and body content ("heading"), or just its body content ("body") an aria-live region, so that changes are announced by the screen readers. Do not use with loader variation, as it handles aria-live separately. */ "accessibleAnnounceChanges"?: "all" | "heading" | "body"; /** * Adds accessible label for the close icon that is only shown for screen readers. This property is always required to create an accessibly interface! Swedish translation for this property is “Stäng fönstret”. * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", } */ "accessibleCloseLabel"?: string; /** * Indicates the id or a string of space seperated ids of a component(s) that describes the input. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Details of the component * @default undefined */ "accessibleDetails"?: string; /** * By default the heading is used aria-label for the modal. If you wish to use something else then you must set this label. */ "accessibleLabel"?: string; /** * Indicates the id or a string of space seperated ids of a component(s) that labels the input. */ "accessibleLabelledBy"?: string; /** * When modal used as a lodader, as an audible substitute for the spinner, we use this message * @default {fi: "Odota, ole hyvä.", sv: "Vänligen vänta.", en: "Please wait.", } */ "accessibleLoaderAnnouncement"?: string; /** * Use this property when you need to have the modal dialog initially active. * @default false */ "active"?: boolean; /** * Use this property when you want the modal to close when clicked outside of modal. * @default false */ "closeOnBlur"?: boolean; /** * Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "primary". * @default "" */ "color"?: DuetColor; /** * Where to move focus when the modal is closed, either set the element dirctly with JS or give the id of the element as a string. Use empty string to disable focus moving on close - do this if after closing there is another element that automatically gets the focus or you handle focusing manually. */ "focusElementOnClose"?: FocusableComponent | HTMLElement | string; /** * Size of the modal window's padding. * @default "medium" */ "gutterSize"?: DuetModalSize | "none"; /** * Accessible heading displayed in the modal. The modal marks this as the label of the modal when used. This helps screen reader users which is why this is a required property. * @default "" */ "heading"?: string; /** * Accessible heading size * @default "h3" */ "headingLevel"?: DuetHeadingLevel; /** * Makes the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup. */ "headingVisualLevel"?: DuetVisualHeadingLevel | undefined; /** * Icon to display above the heading (from Duet’s icons). Example: "form-location" * @default "" */ "icon"?: DuetIconName; /** * The currently active language. This setting also changes the logo to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Emitted before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault(). */ "onDuetBeforeClose"?: (event: DuetModalCustomEvent) => void; /** * Emitted when the modal is closed. */ "onDuetClose"?: (event: DuetModalCustomEvent) => void; /** * Emitted when the modal closing transition is complete. */ "onDuetCloseComplete"?: (event: DuetModalCustomEvent) => void; /** * Emitted when the modal is opened. */ "onDuetOpen"?: (event: DuetModalCustomEvent) => void; /** * Size of the modal window. * @default "medium" */ "size"?: DuetModalSize; /** * Theme of the modal. * @default "" */ "theme"?: DuetTheme; /** * Variation of the modal window. Slide-up variation has fixed height so it suits well for situations where the modal content height changes. Loader variation is used when the user initiates an action that takes time to complete - it can be used with addMessage() method to insert accessible message to the modal to inform the user about the progress. * @default "default" */ "variation"?: DuetModalVariation; } interface DuetMultiselect { /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy"?: string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * If set, the multiselect will display buttons to select or deselect all items. This should be used when there are many items, consider when the number of items is more than 5. * @default false */ "allControls"?: boolean; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption"?: string; /** * Makes the select component disabled. This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * Display the select in error state along with an error message. * @default "" */ "error"?: string; /** * Expands the input to fill 100% of the container width. * @default false */ "expand"?: boolean; /** * Adds a unique identifier for the select. * @default createID("DuetMultiselect") */ "identifier"?: string; /** * An array of items to choose from */ "items"?: string | DuetMultiselectItem[] | DuetMultiselectItemGroup[]; /** * Label for the select. * @default "label" */ "label"?: string; /** * Color of the label. */ "labelColor"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Font weight of the label. */ "labelWeight"?: DuetTextFontWeight; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Emitted when the select loses focus. */ "onDuetBlur"?: (event: DuetMultiselectCustomEvent) => void; /** * Callback for when the value changed. */ "onDuetChange"?: (event: DuetMultiselectCustomEvent) => void; /** * Emitted when the select has focus. */ "onDuetFocus"?: (event: DuetMultiselectCustomEvent) => void; /** * Hint text to display. * @default "" */ "placeholder"?: string; /** * Theme of the select. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip"?: string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection"?: DuetTooltipDirection; /** * Value of multiselect * @default [] */ "value"?: DuetMultiselectItem[]; } interface DuetNav { /** * Makes navigation sticky so it stays on top. when page is being scrolled. Works only for mobile. * @default false */ "sticky"?: boolean; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetNotification { /** * Adds accessible label for tooltip that is shown over unread counter * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" } */ "accessibleLabelUnread"?: string; /** * Property to change accessibleLabelUnread defaults on the component. normally you would handle these strings on an application level and override accessibleLabelUnread when needed * @default { en: "Unread", fi: "Lukematon", sv: "Oläst", } */ "accessibleLabelUnreadDefaults"?: DuetLangObject; /** * The date of the notification. * @default "" */ "date"?: string; /** * Should the link open in a new window? * @default false */ "external"?: boolean; /** * Should the notification be visually highlighted? * @default false */ "highlight"?: boolean; /** * The currently active language. Used for announcing unread notifications to screen readers. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Theme of the notification. * @default "" */ "theme"?: DuetTheme; /** * The url to open on notification click. * @default "#" */ "url"?: string; } interface DuetNotificationDrawer { /** * Adds accessible label for tooltip that is shown for notifications * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"} */ "accessibleLabelNotifications"?: string; /** * Defaults for accessibleLabelNotifications * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"} */ "accessibleLabelNotificationsDefaults"?: | DuetLangObject | string; /** * Show a badge that indicates something has changed. * @default false */ "badge"?: boolean; /** * Which direction should the drawer open in? * @default "left" */ "direction"?: DuetNotificationDrawerDirection; /** * Icon to display to the left of the drawer button. * @default "" */ "icon"?: DuetIconName; /** * Label for the drawer button. * @default "Label" */ "label"?: string; /** * The currently active language. Used to determine the message displayed when there are no notifications. * @default getLanguage() */ "language"?: DuetLanguage; /** * Theme of the notification drawer. * @default "" */ "theme"?: DuetTheme; } interface DuetNumberInput { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Accessible label for the add button that is read for screen reader users. The placeholders {step} and {unit} are replaced with respective properties. * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"} */ "accessibleAdd"?: string; /** * Defaults for accessibleAdd * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"} */ "accessibleAddDefaults"?: DuetLangObject | string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Details of the component * @default undefined */ "accessibleDetails"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Format of message used to announce current amount when switching between amounts. Note that the default has "euros" so if you use another unit is is essential you set this attribute to reflect that unit. The string {current} is replaced with the current amount. * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"} */ "accessibleLive"?: string; /** * Defaults for accessibleLive * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"} */ "accessibleLiveDefaults"?: DuetLangObject | string; /** * Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead. * @default true */ "accessibleLiveEnabled"?: boolean; /** * Indicates the id of a component owned by the input. */ "accessibleOwns"?: string; /** * Accessible label for the subtract button that is read for screen reader users. The placeholders {step} and {unit} are replaced with respective properties. * @default {fi: "Vähennä {step} {unit}", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"} */ "accessibleSubtract"?: string; /** * Defaults for accessibleSubtract * @default {fi: "Vähenn {step} {unit}ä", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"} */ "accessibleSubtractDefaults"?: DuetLangObject | string; /** * Makes the number input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * Display the input in error state along with an error message. * @default "" */ "error"?: string; /** * Expands the input to fill 100% of the container width. * @default false */ "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. * @default false */ "labelHidden"?: boolean; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands separators would break keyboard input. * @default getLocale(this.language).locale */ "locale"?: DuetLocale; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Maximum value. * @default 1000000 */ "max"?: number; /** * Minimum value. * @default 0 */ "min"?: number; /** * Name of the input. */ "name"?: string; /** * Emitted when the input loses focus. */ "onDuetBlur"?: (event: DuetNumberInputCustomEvent) => void; /** * Emitted when the value has changed. */ "onDuetChange"?: (event: DuetNumberInputCustomEvent) => void; /** * Emitted when the input has focus. */ "onDuetFocus"?: (event: DuetNumberInputCustomEvent) => void; /** * Emitted when a keyboard input has ocurred. */ "onDuetInput"?: (event: DuetNumberInputCustomEvent) => 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. * @default false */ "required"?: boolean; /** * Defines a specific role attribute for the input. */ "role"?: string | null; /** * Controls whether or not value gets rounded to the nearest multiple of a step on blur. Set to "false" to disable this behaviour. * @default true */ "rounding"?: boolean; /** * Step amount. * @default 5000 */ "step"?: number; /** * Theme of the input. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip"?: string; /** * Unit for the number input. * @default getLocale(this.language).money */ "unit"?: string; /** * Value of the input. This is passed as a string since Number Input uses Duet’s Input component internally and we need the value to support spaces and the unit as well. */ "value"?: string; } interface DuetOverlay { /** * Mode * @default "all" */ "displayDevice"?: OverlayDisplayDevice; /** * Keep stacking context * @default false */ "keepStackingContext"?: boolean; /** * Modal overlay * @default false */ "modalOverlay"?: boolean; /** * Theme * @default "" */ "theme"?: DuetTheme; /** * Transition * @default "slowly" */ "transition"?: "quickly" | "slowly" | "immediate"; /** * Variation, dark and white can be used when we want to have text on the overlay * @default "default" */ "variation"?: "default" | "dark" | "white"; /** * Open * @default true */ "visible"?: boolean; /** * Z-index * @default "400" */ "zIndex"?: string; } interface DuetPageHeading { /** * Icon. * @default "" */ "icon"?: DuetIconName; /** * Layout. Values narrow and fluid are deprecated. * @default "narrow" */ "layout"?: "narrow" | "fluid" | "auto"; /** * Current step of total steps in progress indicator. (Current step should start from 1, not 0.) To render a progress indicator both progressTotalSteps and progressCurrentStep must be given. */ "progressCurrentStep"?: number; /** * Total steps amount in progress indicator. To render a progress indicator both progressTotalSteps and progressCurrentStep must be given */ "progressTotalSteps"?: number; /** * Theme of the hero area. * @default "" */ "theme"?: DuetTheme; } interface DuetPagination { /** * Described By id * @default undefined */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Details of the component * @default undefined */ "accessibleDetails"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Default pagination labels * @default getLocaleString( this.accessibleLabelsDefaults ) */ "accessibleLabels"?: Record; /** * Default pagination labels * @default { en: { next_page: "Next page", previous_page: "Previous page", first_page: "First page", last_page: "Last page", jump_to: "Jump to page", go_to: "Go to page", description: "You may use arrow keys to select page number", pagination_label: "Pagination, choose a number to jump to a page", select_label: "Total pages {0}, choose a number to jump to a page", prev_section: "Show previous {0} page numbers, screen reader user should use arrowkeys to navigate", next_section: "Show next {0} page numbers, screen reader user should use arrowkeys to navigate", }, fi: { next_page: "Seuraava sivu", previous_page: "Edellinen sivu", first_page: "Ensimmäinen sivu", last_page: "Viimeinen sivu", jump_to: "Siirry sivulle", go_to: "Siirry sivulle", description: "Voit käyttää nuolinäppäimiä sivunumeron valitsemiseen", pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle", select_label: "Sivuja yhteensä {0}, valitse sivunumero siirtyäksesi sivulle", prev_section: "Näytä edelliset {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi", next_section: "Näytä seuraavat {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi", }, sv: { next_page: "Nästa sida", previous_page: "Föregående sida", first_page: "Första sidan", last_page: "Sista sidan", jump_to: "Hoppa till sida", go_to: "Hoppa till sida", description: "Du kan använda piltangenterna för att välja sida", pagination_label: "Paginering, välj en siffra för att hoppa till en sida", select_label: "Totalt antal sidor {0}, välj en siffra för att hoppa till en sida", prev_section: "Visa föregående {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera", next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera", }, } */ "accessibleLabelsDefaults"?: DuetLangObject; /** * Used to indicate which dom element with ID this element controls * @default "" */ "ariaControls"?: string; /** * Breakpoint at which the pagination should be rendered as compact with a select element * @default "x-small" */ "compactBreakpoint"?: DuetBreakpoints | "none"; /** * The current page * @default 1 */ "current"?: number; /** * Makes the controls of pagination component disabled. * @default false */ "disabled"?: boolean; /** * Emitted a page selection has been made */ "onDuetPageChange"?: (event: DuetPaginationCustomEvent) => void; /** * Array of urls that are used to create page links */ "pageLinks"?: string[] | string; /** * The size of the take, when paginating. * @default 5 */ "take"?: number; /** * Theme of the pagination. * @default "" */ "theme"?: DuetTheme; /** * The total size of the paginating data * @default 1000 */ "total"?: number; /** * Variation of the paginator (compact and default supported) * @default "default" */ "variation"?: DuetPaginationVariation; /** * Amount of visible page numbers to show * @default 5 */ "visibleItems"?: number; } interface DuetPanel { /** * Indicates the id of a component that describes the panel. */ "accessibleDescribedBy"?: string; /** * Adds accessible label for the panel that is only shown for screen readers. */ "accessibleLabel"?: string; /** * Indicates the id of a component that labels the panel. */ "accessibleLabelledBy"?: string; /** * Set this attribute to draw a border around the panel. */ "border"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Controls the padding of the component. Padding is automatically responsive. * @default "medium" */ "padding"?: "small" | "medium" | "large"; /** * Theme of the panel. * @default "" */ "theme"?: DuetTheme; /** * The color variation of the panel. Combination of palette ("default", "accent") and palette variation ("primary", "secondary"). You can ommit "default" and "primary" - they are the defaults. * @default "" */ "variation"?: DuetPanelVariation; } interface DuetParagraph { /** * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary". * @default "" */ "color"?: DuetColor; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Controls the size of the paragraph. * @default "medium" */ "size"?: DuetParagraphSize; /** * Theme of the paragraph. * @default "" */ "theme"?: DuetTheme; /** * Style variation of the paragraph. * @default "default" */ "variation"?: DuetParagraphVariation; /** * Controls the Font-Weight of the paragraph. * @default undefined */ "weight"?: DuetParagraphWeight; } interface DuetPhoneInput { /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Details of the component * @default undefined */ "accessibleDetails"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption"?: 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. * @default Object.values(countries).filter(country => !!country.telephoneCountryCode) */ "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. * @default false */ "disabled"?: boolean; /** * Display the input in error state along with an error message. * @default "" */ "error"?: string; /** * Expands the input to fill 100% of the container width. * @default false */ "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. * @default false */ "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. * @default "auto" */ "margin"?: DuetMargin; /** * Use maxlength to specify the maximum length of the value that can be entered. */ "maxlength"?: number; /** * Use minlength to specify the minimum length of the value that can be entered. */ "minlength"?: number; /** * Name of the input. */ "name"?: string; /** * Emitted when the input loses focus. */ "onDuetBlur"?: (event: DuetPhoneInputCustomEvent) => void; /** * Emitted when the value has changed. */ "onDuetChange"?: (event: DuetPhoneInputCustomEvent) => void; /** * Emitted when the input has focus. */ "onDuetFocus"?: (event: DuetPhoneInputCustomEvent) => void; /** * Emitted when a keyboard input has ocurred. */ "onDuetInput"?: (event: DuetPhoneInputCustomEvent) => 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. * @default false */ "required"?: boolean; /** * Theme of the input. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip"?: string; /** * This is a proxy for the enclosed native inputs validity * @readonly */ "validity"?: ValidityState; /** * 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. */ "accessibleLabel"?: string; /** * Accessible role. * @default "menu" */ "accessibleRole"?: "menu" | "listbox" | "list"; /** * Allow vertical flip when there is not enough space below the controller. * @default true */ "allowVerticalFlip"?: boolean; /** * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given, the component automatically sets the click event listener to open and close the popup-menu. */ "controller"?: | string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent) | HTMLElement; /** * By default Popup Menu adds "action-arrow-down-small" icon to the controller. This can be removed with controller-icon="". * @default "action-arrow-down-small" */ "controllerIcon"?: string; /** * Cross axis positioning offset of the popup menu relative to its controller. For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical. * @default 0 */ "crossAxisOffset"?: number; /** * Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute. * @default false */ "forcePlacement"?: boolean; /** * Main axis positioning offset of the popup menu relative to its controller. For "top" and "bottom" placements main axis is vertical, for "left" and "right" horizontal. * @default 0 */ "mainAxisOffset"?: number; /** * Emitted when the popup menu is opened or closed. */ "onDuetToggle"?: (event: DuetPopupMenuCustomEvent) => void; /** * Alias for property controller. */ "opener"?: string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent); /** * Placement of the popup menu relative to its controller. Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end". * @default "bottom-start" */ "placement"?: | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"; /** * Position. * @default "absolute" */ "position"?: "absolute" | "fixed"; /** * 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. * @default "" */ "theme"?: DuetTheme; } interface DuetPopupMenuItem { /** * Adds accessible label for the button or link 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; /** * Accessible role. * @default "menuitem" */ "accessibleRole"?: "menuitem" | "listitem" | "option"; /** * Is the item currently active (e.g. selected) * @default false */ "active"?: boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external"?: boolean; /** * Left icon. * @default undefined */ "leadingIcon"?: DuetIconName; /** * Left icon color. * @default undefined */ "leadingIconColor"?: DuetIconColor; /** * Emitted when the item loses focus. */ "onDuetBlur"?: (event: DuetPopupMenuItemCustomEvent) => void; /** * Emitted when the item receives focus. */ "onDuetFocus"?: (event: DuetPopupMenuItemCustomEvent) => void; /** * Language of the link. Use this only for language selection links. * @default undefined */ "targetLanguage"?: "en" | "fi" | "sv"; /** * Theme. * @default "" */ "theme"?: DuetTheme; /** * Right icon. * @default undefined */ "trailingIcon"?: DuetIconName; /** * Short text to display after the label, e.g. keyboard shortcut. * @default undefined */ "trailingText"?: string; /** * A destination to link to, rendered in the href attribute of a link. */ "url"?: string; /** * Value * @default undefined */ "value"?: string; } interface DuetProgress { /** * Indicates the id of a component that describes the upload component. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Aria Details of the component * @default undefined */ "accessibleDetails"?: string; /** * Indicates the aria-label of the component - this will get combined with an label+uploading when uploading, and label+upload complete when upload is complete */ "accessibleLabel"?: string; /** * Adds accessible label for upload in progress and upload complete states * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en: ["completed", "in progress"]} */ "accessibleLabelUpload"?: string; /** * Defaults for accessibleLabel * @default { fi: ["lähetys valmis", "lähetys käynnissä"], sv: ["Uppladdningen är klar", "Uppladdning pågår"], en: ["upload completed", "upload in progress"], } */ "accessibleLabelUploadDefaults"?: DuetLangObject | string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption"?: string; /** * Height of progressbar * @default "10px" */ "height"?: string; /** * Progress of the bar, a value from 0-100 * @default 0 */ "progress"?: number; /** * Theme of the input. * @default "" */ "theme"?: DuetTheme; } interface DuetPromoCard { /** * Background color. * @default "" */ "backgroundColor"?: DuetColor | ""; /** * The actual heading level used in the HTML markup. * @default "h3" */ "headingLevel"?: DuetHeadingLevel; /** * Image. Example image is 512x341; * @default "" */ "image"?: string; /** * Alt attribute text for the image. If not provided, image is assigned presentation role. */ "imageAlt"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Text color. * @default "secondary" */ "textColor"?: DuetColor; /** * Theme. * @default "" */ "theme"?: DuetTheme; /** * A destination to link to, rendered in the href attribute of a link. */ "url"?: string; } interface DuetRadio { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the radio. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Aria Details of the component * @default undefined */ "accessibleDetails"?: string; /** * Control the tabindex of checkbox. In most cases this should never be used! It exists only for Duet’s internal needs. */ "accessibleIndex"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Indicates the id of a component owned by the radio. */ "accessibleOwns"?: string; /** * Stops the components from emitting events * @default false */ "blockEvents"?: boolean; /** * Check state of the radio. */ "checked"?: boolean; /** * Makes the radio component disabled. This prevents users from being able to interact with the radio, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * Adds a unique identifier for the radio. */ "identifier"?: string; /** * Label for the radio. * @default "label" */ "label"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Name of the radio. */ "name"?: string; /** * Emitted when the checkbox loses focus. */ "onDuetBlur"?: (event: DuetRadioCustomEvent) => void; /** * Emitted when the checked property has changed. */ "onDuetChange"?: (event: DuetRadioCustomEvent) => void; /** * Emitted when the checkbox has focus. */ "onDuetFocus"?: (event: DuetRadioCustomEvent) => 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. * @default false */ "required"?: boolean; /** * Defines a specific role attribute for the input. */ "role"?: string | null; /** * Theme of the radio. * @default "" */ "theme"?: DuetTheme; /** * The value of the radio input does not mean if it's checked or not, use the checked property for that. */ "value"?: string; } interface DuetRadioGroup { /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * Additional caption to show inside the label of the radio group. * @default "" */ "caption"?: string; /** * Direction of the radio group. * @default "vertical" */ "direction"?: DuetDirection; /** * Determines, whether the control is disabled or not. */ "disabled"?: boolean; /** * Display radio group in error state along with an error message. * @default "" */ "error"?: string; /** * Legend displayed for the radio buttons in this group. * @default "Label" */ "label"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Name for the radio buttons within this group. **This must be unique amongst all other inputs.** */ "name"?: string; /** * Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well. * @default false */ "required"?: boolean; /** * Enable or disable the automatic responsive behaviour of the radio group component when horizontal setting is used. Setting this option to "true" makes sure that contents are stacked vertically on mobile. * @default false */ "responsive"?: boolean; /** * Theme of the radio group. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the radio group. * @default "" */ "tooltip"?: string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection"?: DuetTooltipDirection; /** * The value of the selected radio button. */ "value"?: string; } interface DuetRangeSlider { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy"?: string; /** * Indicates the id of a component owned by the input. */ "accessibleOwns"?: string; /** * Set the amount of time, in milliseconds, to wait to trigger the duetChange event after each keystroke. * @default 0 */ "debounce"?: number; /** * Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * Expands the input to fill 100% of the container width. * @default false */ "expand"?: boolean; /** * Adds a unique identifier for the input. */ "identifier"?: string; /** * Label for the range slider. * @default "label" */ "label"?: string; /** * Color of the label. */ "labelColor"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Font weight of the label. */ "labelWeight"?: DuetTextFontWeight; /** * Locale used to format the entered value. * @default "fi-FI" */ "locale"?: DuetLocale; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Maximum value. * @default 100 */ "max"?: number; /** * Minimum value. * @default 0 */ "min"?: number; /** * Name of the input. */ "name"?: string; /** * Emitted when the value has changed. */ "onDuetChange"?: (event: DuetRangeSliderCustomEvent) => void; /** * Emitted when a keyboard input ocurred. */ "onDuetInput"?: (event: DuetRangeSliderCustomEvent) => void; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required"?: boolean; /** * Step amount. * @default 1 */ "step"?: number; /** * Theme of the input. * @default "" */ "theme"?: DuetTheme; /** * Unit for the range slider. * @default "" */ "unit"?: string; /** * Value of the input. * @default 0 */ "value"?: number; } interface DuetRangeStepper { /** * Used to indicate which dom element with ID this element controls * @default "" */ "ariaControls"?: string; /** * Default pagination labels * @default getLocaleString( this.ariaLabelsDefaults ) */ "ariaLabels"?: Record; /** * Default range stepper labels * @default { en: { next_increment: "Next range increment", previous_increment: "Previous range increment", x_of_y: "{0}–{1} of {2}", }, fi: { next_increment: "Seuraava välillä", previous_increment: "Edellinen välillä", x_of_y: "{0}–{1} / {2}", }, sv: { next_increment: "Nästa intervall", previous_increment: "Föregående intervall", x_of_y: "{0}–{1} av {2}", }, } */ "ariaLabelsDefaults"?: DuetLangObject; /** * Makes the controls of range-stepper component disabled. * @default false */ "disabled"?: boolean; /** * Event emitted when the step heading is clicked. */ "onDuetRangeStepUpdate"?: (event: DuetRangeStepperCustomEvent) => void; /** * Start value * @default 1 */ "stepIndex"?: number; /** * How big is the step * @default 50 */ "stepSize"?: number; /** * Theme of the component. * @default "" */ "theme"?: DuetTheme; /** * Total of * @default undefined */ "total"?: number; } interface DuetScrollable { /** * Vertical alignment of the previous and forward buttons. Defaults to center. * @default "center" */ "buttonAlignment"?: "top" | "center" | "bottom"; /** * Whether or not include previous and forward buttons. Defaults to true. * @default true */ "buttons"?: boolean; /** * Center the scrollable list. Defaults to false. * @default false */ "center"?: boolean; /** * Boolean to collapse scrollable items into normal flow. * @default false */ "collapsed"?: boolean; /** * Optional identifier to add to buttons in the tab group * @default "" */ "identifier"?: string; /** * Whether to add padding to the scrollable list to account for overflowing elements, such as shadows or outlines. * @default "none" */ "padding"?: DuetOverflowPadding; /** * Selected element * @default 0 */ "selected"?: number; /** * Theme of duet-tab-scrollable. When used this will override the color setting and use "primary" or "primary-turva" as the color depending on which theme is chosen. * @default "" */ "theme"?: DuetTheme; } interface DuetSectionLayout { /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Align container vertically in the middle when the space allows it. * @default false */ "middle"?: boolean; /** * Breakpoint used to remove padding. These match to similar media query tokens: $media-query-small and $media-query-medium. * @default undefined */ "paddingBreakpoint"?: DuetBreakpoints; } interface DuetSelect { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy"?: string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the select. */ "accessibleOwns"?: string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption"?: string; /** * Makes the select component disabled. This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) * @default false */ "echoPlaceholder"?: boolean; /** * Display the select in error state along with an error message. * @default "" */ "error"?: string; /** * Expands the input to fill 100% of the container width. * @default false */ "expand"?: boolean; /** * Adds a unique identifier for the select. */ "identifier"?: string; /** * An array of items to choose from */ "items"?: string | DuetSelectItems; /** * Label for the select. * @default "label" */ "label"?: string; /** * Color of the label. */ "labelColor"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Font weight of the label. */ "labelWeight"?: DuetTextFontWeight; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Name of the select. */ "name"?: string; /** * Emitted when the select loses focus. */ "onDuetBlur"?: (event: DuetSelectCustomEvent) => void; /** * Callback for when the value changed. */ "onDuetChange"?: (event: DuetSelectCustomEvent) => void; /** * Emitted when the select has focus. */ "onDuetFocus"?: (event: DuetSelectCustomEvent) => void; /** * Hint text to display. * @default "" */ "placeholder"?: string; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required"?: boolean; /** * Defines a specific role attribute for the select. */ "role"?: string | null; /** * Theme of the select. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip"?: string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection"?: DuetTooltipDirection; /** * The selected value of the select */ "value"?: string; /** * Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons, like with compact pagination. * @default "default" */ "variation"?: DuetSelectVariation; } interface DuetShapedImage { /** * Adds accessible label for the image that is only shown for screen readers. */ "accessibleLabel"?: string; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Rotation. Note: in 'turva' theme there's no rotation. * @default "7" */ "rotation"?: 7 | -7; /** * A URL from which to load an image. */ "src"?: string; /** * Theme of the component. * @default "" */ "theme"?: DuetTheme; } interface DuetShareChart { /** * Theme of the component. * @default "" */ "theme"?: DuetTheme; /** * The string to show after each items value. When using "%" the enclosed items' values should add up to 100. * @default "%" */ "unit"?: string; } interface DuetShareChartItem { /** * The color to use in the graph given as a Duet color token. If left out, the Share chart picks a color from a default set. */ "color"?: DuetColor; /** * The value of the item. * @default 0 */ "value"?: number; } interface DuetShowMore { /** * Controls the margin of the button component inside of show more. * @default "auto" */ "buttonMargin"?: DuetMargin; /** * Controls the padding of the button component inside of show more. * @default "auto" */ "buttonPadding"?: DuetPadding; /** * The currently active language. This setting also changes the logo to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Event emitted when opened/closed */ "onDuetToggle"?: (event: DuetShowMoreCustomEvent) => void; /** * Is the component expanded or collapsed. * @default false */ "open"?: boolean; /** * Show less accessible label. Defaults to what is in showLessAccessibleLabelDefaults prop. * @default getLocaleString( this.showLessAccessibleLabelDefaults ) */ "showLessAccessibleLabel"?: string; /** * Default translations for show less accessible label. * @default { fi: "Näytä vähemmän tästä aiheesta", sv: "Visa mindre om detta ämne", en: "Show less about this subject", } */ "showLessAccessibleLabelDefaults"?: DuetLangObject; /** * Show less label. Defaults to what is in showLessLabelDefaults prop. * @default getLocaleString(this.showLessLabelDefaults) */ "showLessLabel"?: string; /** * Default translations for show less label. * @default { fi: "Näytä vähemmän", sv: "Visa mindre", en: "Show less", } */ "showLessLabelDefaults"?: DuetLangObject; /** * Show more accessible label. Defaults to what is in showMoreAccessibleLabelDefaults prop. * @default getLocaleString( this.showMoreAccessibleLabelDefaults ) */ "showMoreAccessibleLabel"?: string; /** * Default translations for show more accessible label. * @default { fi: "Näytä lisää tästä aiheesta", sv: "Visa mer om detta ämne", en: "Show more about this subject", } */ "showMoreAccessibleLabelDefaults"?: DuetLangObject; /** * Show more label. Defaults to what is in showMoreLabelDefaults prop. * @default getLocaleString(this.showMoreLabelDefaults) */ "showMoreLabel"?: string; /** * Default translations for show more label. * @default { fi: "Näytä lisää", sv: "Visa mer", en: "Show more", } */ "showMoreLabelDefaults"?: DuetLangObject; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSlideout { /** * Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems. * @default "menubar" */ "accessibleRole"?: string; /** * Background color. Use one of the color tokens. * @default "gray-lightest" */ "backgroundColor"?: DuetColor; /** * Alias for property opener. */ "controller"?: string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent); /** * Whether the slideout behaves as a modal, i.e. with an overlay and preventing scrolling of the page content. Note that even when false, we still use focus guards to contain keyboard navigation within, as moving focus out could result in unexpected behavior. * @default true */ "modal"?: boolean; /** * Event raised when the menu has been opened. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**. */ "onDuetSlideoutEvent"?: (event: DuetSlideoutCustomEvent) => void; /** * Open * @default false */ "open"?: boolean; /** * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given, the component automatically sets the click event listener to open the slideout. */ "opener"?: | string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent); /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSlideoutLang { /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSlideoutLink { /** * 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 * @default false */ "active"?: boolean; /** * Caret * @default false */ "caret"?: boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external"?: boolean; /** * Href * @default "#" */ "href"?: string; /** * Icon * @default undefined */ "icon"?: string; /** * Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot. * @default "inherit" */ "size"?: "inherit" | "small" | "medium" | "large"; /** * Language of the link. Use this only for language selection links. * @default undefined */ "targetLanguage"?: "en" | "fi" | "sv"; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSlideoutPanel { /** * Active * @default false */ "active"?: boolean; /** * Background color. Use one of the color tokens. * @default "gray-lightest" */ "backgroundColor"?: DuetColor; /** * Show a badge that indicates something has changed. * @default false */ "badge"?: boolean; /** * Icon * @default undefined */ "icon"?: string; /** * Size. Small, medium or large. * @default "medium" */ "labelSize"?: "small" | "medium" | "large"; /** * Open * @default false */ "open"?: boolean; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSlideoutPanelDropdown { /** * Active * @default false */ "active"?: boolean; /** * Icon * @default undefined */ "icon"?: string; /** * Open * @default false */ "open"?: boolean; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSpacer { /** * Adjusts the breakpoint where the spacer is shown in. The functionality follows 1:1 the media queries defined in design tokens. * @default "" */ "breakpoint"?: DuetSpacerBreakpoint; /** * Direction of the space added. * @default "vertical" */ "direction"?: DuetDirection; /** * Size variation of the spacer. Can be any of the spacing tokens. * @default "medium" */ "size"?: DuetSpacerSize; } interface DuetSpinner { /** * Adds accessible label for the spinner that is only shown for screen readers. */ "accessibleLabel"?: string; /** * Color of the spinner, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. Note that in earlier versions the color has defaulted to "gray-lightest", but in a future release it will change to undefined, so that the color will be the theme's primary. If you have relied on not defining color to result in white, it is advisable to update your code to explicitly define it. */ "color"?: DuetColor; /** * Size variation of the spinner. * @default "small" */ "size"?: DuetSpinnerSize; /** * Theme of the spinner. */ "theme"?: DuetTheme; } interface DuetStatusIcon { /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Icon size. Entered as one of the icon size design tokens. * @default "medium" */ "size"?: DuetIconSize; /** * Use strong background color when the icon would not otherwise stand out from the surrounding background. * @default false */ "strong"?: boolean; /** * Status the icon indicates * @default "default" */ "variation"?: DuetStatus; } interface DuetStep { /** * Set the heading for the step. */ "heading": string; /** * Set the heading level used in the HTML markup. */ "headingLevel": DuetHeadingLevel; /** * Event emitted when the step heading is clicked. */ "onDuetStepClick"?: (event: DuetStepCustomEvent) => void; /** * Theme of the component. * @default "" */ "theme"?: DuetTheme; } interface DuetStepper { /** * Format of message used to announce current step when navigating between steps. The string {current} is replaced with the current step number. The string {total} is replaced with the total number of steps. * @default getLocaleString(DuetStringsListStepOfTotal, this.language) */ "accessibleLive"?: string; /** * Controls whether navigation back to previous steps is allowed or not. * @default false */ "backDisabled"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Event emitted when the current step is changed. Can be cancelled to prevent the change. */ "onDuetStepChange"?: (event: DuetStepperCustomEvent) => void; /** * The index of the current step. * @default 0 */ "selected"?: number; /** * Theme of the component. * @default "" */ "theme"?: DuetTheme; } interface DuetSubmenuBar { /** * 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; /** * Makes the submenu bar hide on top of the window when page is scrolled down Should be used only with sticky navigation. * @default false */ "hideOnScroll"?: boolean; /** * Open * @default false */ "open"?: boolean; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSubmenuBarDropdown { /** * Active * @default false */ "active"?: boolean; /** * Icon * @default undefined */ "icon"?: string; /** * Open * @default false */ "open"?: boolean; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSubmenuBarDropdownLink { /** * Active * @default false */ "active"?: boolean; /** * Caret * @default false */ "caret"?: boolean; /** * Highlight * @default false */ "highlight"?: boolean; /** * Href * @default "#" */ "href"?: string; /** * Icon * @default undefined */ "icon"?: string; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetSubmenuBarItem { /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded"?: boolean; /** * 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. * @default "false" */ "accessiblePopup"?: string; /** * Active * @default false */ "active"?: boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external"?: boolean; /** * Left icon. * @default undefined */ "leadingIcon"?: DuetIconName; /** * Theme. * @default "" */ "theme"?: DuetTheme; /** * Right icon. * @default undefined */ "trailingIcon"?: DuetIconName; /** * Url */ "url"?: string; } interface DuetSubmenuBarLink { /** * Active * @default false */ "active"?: boolean; /** * Href * @default "#" */ "href"?: string; /** * Icon * @default undefined */ "icon"?: string; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetTab { /** * String for AccessibleLabel * @default null */ "accessibleDescription"?: string; /** * Defaults for AccessibleLabel * @default null */ "accessibleDescriptionDefault"?: DuetLangObject | string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Caption for the tab. */ "caption"?: string; /** * HTML id of element that is to be used when opening this tab. This enables decoupling the content from the tab buttons. * @default undefined */ "contentId"?: string; /** * Indicator to show in the tab button. */ "indicator"?: IndicatorVariation1; /** * Provides accessible text for the Duet Indicator. If Indicator's default is sufficient this is not needed. */ "indicatorAccessibleLabel"?: string; /** * Label for the tab. */ "label"?: string; /** * @deprecated Use indicator property instead. Notification mark to show in the tab button. Works better with plain variation, as the dark background of selected default button makes the mark less noticable. */ "notificationMark"?: "warning" | "danger"; /** * Selected state of the tab. */ "selected"?: boolean; /** * Theme of the component. * @default "" */ "theme"?: DuetTheme; } interface DuetTabGroup { /** * Aria label for the entire tab-group * @default undefined */ "accessibleLabel"?: string; /** * Whether the tab-group collapses to a select dropwdown in minor breakpoints * @deprecated as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect * @default false */ "collapses"?: boolean; /** * Makes the tab group fill the space with background, only used when tab-group variation is default. * @default false */ "fillSpace"?: boolean; /** * Optional identifier to add to buttons in the tab group * @default this.id */ "identifier"?: string; /** * Label for the select element which gets shown on mobile. * @default {fi: "Valitse", en: "Choose", sv: "Välja"} */ "label"?: string; /** * Defaults for Label * @default {fi: "Valitse", en: "Choose", sv: "Välja"} */ "labelDefaults"?: DuetLangObject | string; /** * Determines whether the label for the select element shown on mobile is visually hidden. * @default true */ "labelHidden"?: boolean; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * @deprecated in favour of more specific duetTabChange event. Callback for when the value changed. */ "onDuetChange"?: (event: DuetTabGroupCustomEvent) => void; /** * Event raised when the selected tab is changed */ "onDuetTabChange"?: (event: DuetTabGroupCustomEvent) => void; /** * Event raised when new tab is clicked and "tabChangeConfirm" property is set to true */ "onDuetTabChangeRequested"?: (event: DuetTabGroupCustomEvent) => void; /** * Controls the padding of the component. * @default "auto" */ "padding"?: DuetPadding; /** * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens) * @deprecated scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect * @default true */ "scrolls"?: boolean; /** * @deprecated in favour of Duet Tab component owning the tab indexing Controls if tab container should have tab index and be accessible by pressing tab * @default true */ "setTabIndex"?: boolean; /** * Makes the tab buttons stretch to fill the available space * @default false */ "stretch"?: boolean; /** * By default switches to larger size from small breakpoint. Never disables switching to larger size and always forces it. * @default "small" */ "switchLargeBreakpoint"?: "small" | "never" | "always"; /** * If this property is set to true, tab won't change immediately after clicking it. Component will emit "duetTabChangeRequested" event, and it needs to be handled manually in order to change tab. * @default false */ "tabChangeConfirm"?: boolean; /** * Theme of the component. * @default "" */ "theme"?: DuetTheme; /** * Style variation of the tab group. Note that "plain-scrolling" is deprecated, as tab-group now allways has scrolling behavior, use values "default", "plain" or "checked" * @default "default" */ "variation"?: DuetTabVariation; } interface DuetTable { /** * By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout. * @default "small" */ "breakpoint"?: DuetTableBreakpoint; /** * Hide a thead section visually. The content is still available to screen readers. * @default false */ "hideHeadVisually"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Controls whether the table has a sticky header. Sticky headers are not compatible with breakpoint="none-scrollable". * @default false */ "sticky"?: boolean; /** * Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky. * @default "with-links" */ "stickyDistance"?: DuetTableStickyDistance; /** * Theme of the table. */ "theme"?: DuetTheme; /** * Style variation of the table. * @default "striped" */ "variation"?: DuetTableVariant; } interface DuetTextarea { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Indicates what kind of user input completion suggestions are provided. */ "accessibleAutocomplete"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the input. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Aria Details of the component * @default undefined */ "accessibleDetails"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers. * @default "polite" */ "accessibleLiveError"?: "off" | "polite" | "assertive"; /** * Indicates the id of a component owned by the textarea. */ "accessibleOwns"?: string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption"?: string; /** * Display character counter. Must be used in conjunction with **maxlength** property. * @default false */ "counter"?: boolean; /** * @deprecated , the visually hidden counter label is no longer changeable * @default "" */ "counterLabel"?: string; /** * Makes the textarea component disabled. This prevents users from being able to interact with the textarea, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * A regular expression that matches any characters which should be *disallowed*. This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression. e.g. the following will disallow any non-numeric characters `[^0-9]` * @default null */ "disallowPattern"?: string; /** * If form input field has a placeholder text, and user types anything (causing the text to dissapear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0) * @default false */ "echoPlaceholder"?: boolean; /** * Display the textarea in error state along with an error message. * @default "" */ "error"?: string; /** * Expands the textarea to fill 100% of the container width. * @default false */ "expand"?: boolean; /** * Adds a unique identifier for the textarea. */ "identifier"?: string; /** * Label for the textarea. * @default "label" */ "label"?: string; /** * Color of the label. */ "labelColor"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Font weight of the label. */ "labelWeight"?: DuetTextFontWeight; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Use maxlength to specify the maximum length of the value that can be entered. */ "maxlength"?: number; /** * Use minlength to specify the minimum length of the value that can be entered. */ "minlength"?: number; /** * Name of the textarea. */ "name"?: string; /** * Emitted when the input loses focus. */ "onDuetBlur"?: (event: DuetTextareaCustomEvent) => void; /** * Emitted when the value has changed. */ "onDuetChange"?: (event: DuetTextareaCustomEvent) => void; /** * Emitted when the input has focus. */ "onDuetFocus"?: (event: DuetTextareaCustomEvent) => void; /** * Emitted when a keyboard input ocurred. */ "onDuetInput"?: (event: DuetTextareaCustomEvent) => void; /** * Hint text to display. */ "placeholder"?: string; /** * Set whether the textarea 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. * @default false */ "required"?: boolean; /** * Defines a specific role attribute for the input. */ "role"?: string | null; /** * Rows attribute for the contained native textarea element. If set, overrides the default style's minheight. */ "rows"?: number; /** * Theme of the textarea. * @default "" */ "theme"?: DuetTheme; /** * Tooltip to display next to the label of the input. * @default "" */ "tooltip"?: string; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "tooltipDirection"?: DuetTooltipDirection; /** * This is a proxy for the enclosed native textarea's validity * @readonly */ "validity"?: ValidityState; /** * Value of the textarea. * @default "" */ "value"?: string; } interface DuetToggle { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the toggle. */ "accessibleDescribedBy"?: string; /** * Aria description the button * @default undefined */ "accessibleDescription"?: string; /** * Aria Details of the component * @default undefined */ "accessibleDetails"?: string; /** * Adds accessible announcement for toggle when "loading" state ends. If not set, default strings are used: fi: "Valmis", sv: "Färdig", en: "Complete" */ "accessibleLabelComplete"?: string; /** * Adds accessible announcement for toggle in "loading" state If not set, default strings are used: fi: "Ladataan", sv: "Lastning", en: "Loading" */ "accessibleLabelLoading"?: string; /** * String of id's that indicate alternative labels elements * @default undefined */ "accessibleLabelledBy"?: string; /** * Indicates the id of a component owned by the toggle. */ "accessibleOwns"?: string; /** * Check state of the checkbox. * @default false */ "checked"?: boolean; /** * Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * Adds a unique identifier for the checkbox. */ "identifier"?: string; /** * Label for the toggle. * @default "label" */ "label"?: string; /** * Color of the label. */ "labelColor"?: string; /** * Visually hide the label, but still show it to screen readers. * @default false */ "labelHidden"?: boolean; /** * Position of the label * @default "top" */ "labelPosition"?: "top" | "right" | "left"; /** * Font weight of the label. */ "labelWeight"?: DuetTextFontWeight; /** * Loading state of the toggle * @default false */ "loading"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Name of the checkbox. */ "name"?: string; /** * Emitted when the checked property has changed. */ "onDuetChange"?: (event: DuetToggleCustomEvent) => void; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required"?: boolean; /** * Defines a specific role attribute for the input. */ "role"?: string | null; /** * Theme of the card. * @default "" */ "theme"?: DuetTheme; /** * The value of the checkbox does not mean if it's checked or not, use the checked property for that. */ "value"?: string; } interface DuetToolbar { /** * 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; /** * Theme. * @default "" */ "theme"?: DuetTheme; /** * Variation. Secondary is not supported for Turva theme. Negative is deprecated. * @default "default" */ "variation"?: "default" | "primary" | "negative" | "secondary"; } interface DuetToolbarDropdown { /** * 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; /** * Active * @default false */ "active"?: boolean; /** * Icon * @default undefined */ "icon"?: string; /** * Open * @default false */ "open"?: boolean; /** * Theme. * @default "" */ "theme"?: DuetTheme; /** * Variation. * @default "default" */ "variation"?: "default" | "negative"; } interface DuetToolbarDropdownLink { /** * 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; /** * Active * @default false */ "active"?: boolean; /** * Href * @default "#" */ "href"?: string; /** * Icon * @default undefined */ "icon"?: string; /** * Language of the link. Use this only for language selection links. * @default undefined */ "targetLanguage"?: "en" | "fi" | "sv"; /** * Theme. * @default "" */ "theme"?: DuetTheme; } interface DuetToolbarItem { /** * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. */ "accessibleExpanded"?: boolean; /** * 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. * @default "false" */ "accessiblePopup"?: string; /** * Active * @default false */ "active"?: boolean; /** * Show a badge that indicates something has changed. * @default false */ "badge"?: boolean; /** * Forces URL to open in a new browser tab. Used together with URL prop. * @default false */ "external"?: boolean; /** * Left icon. * @default undefined */ "leadingIcon"?: DuetIconName; /** * Theme. * @default "" */ "theme"?: DuetTheme; /** * Right icon. * @default undefined */ "trailingIcon"?: DuetIconName; /** * Url */ "url"?: string; /** * Variation. Secondary is not supported for Turva theme. Negative is deprecated. * @default "default" */ "variation"?: "default" | "primary" | "negative" | "secondary"; } interface DuetToolbarLink { /** * 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; /** * Active * @default false */ "active"?: boolean; /** * Href * @default "#" */ "href"?: string; /** * Icon * @default undefined */ "icon"?: string; /** * Theme. * @default "" */ "theme"?: DuetTheme; /** * Variation. * @default "default" */ "variation"?: "default" | "negative"; } interface DuetTooltip { /** * String to add after the accessibleLabel to give more context to the tooltip. Preposition "about" is added between the strings. In Finnish, the preposition is "aiheesta" and in Swedish "om". */ "accessibleAboutLabel"?: string; /** * Adds accessible label for the close icon that is only shown for screen readers. This property is always required to create an accessibly interface! * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"} */ "accessibleCloseLabel"?: string; /** * Default language strings for the accessibleCloseLabel * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"} */ "accessibleCloseLabelDefault"?: DuetLangObject | string; /** * Adds accessible label for the info icon that is only shown for screen readers. This property is always required to create an accessible interface! * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"} */ "accessibleLabel"?: string; /** * Default language strings for the accessibleLabel * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"} */ "accessibleLabelDefault"?: DuetLangObject | string; /** * Toggle whether the tooltip is initially visible or not. This property should not be used in production in most cases. * @default false */ "active"?: boolean; /** * Adjust the responsive breakpoint where tooltip starts opening towards left. * @default "medium" */ "breakpoint"?: DuetTooltipBreakpoint; /** * With direction setting you can force the tooltip to always open towards left or right instead of automatically determining the direction. * @default "auto" */ "direction"?: DuetTooltipDirection; /** * Label of the tooltip. * @default "" */ "label"?: string; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Negative variation for tooltip button on dark background * @default false */ "negative"?: boolean; /** * Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a negative value as well. E.g. "-13px". * @default "0" */ "positionHorizontal"?: string; /** * Adjust the vertical positioning of the tooltip toggle in pixels. Can be a negative value as well. E.g. "-13px". * @default "0" */ "positionVertical"?: string; /** * Theme of the tooltip. * @default "" */ "theme"?: DuetTheme; } interface DuetTooltipButton { "accessibleLabel"?: string; "active"?: boolean; /** * @default "" */ "label"?: string; /** * @default false */ "negative"?: boolean; /** * Theme of the card. Can be one of: "default", "turva". * @default "" */ "theme"?: DuetTheme; "tooltipId"?: string; } interface DuetTooltipPopup { "accessibleCloseLabel"?: string; "active"?: boolean; "arrowStyles"?: { top: string | undefined; left: string | undefined }; /** * Component event handling. */ "onTooltipPopupClosed"?: (event: DuetTooltipPopupCustomEvent) => void; "placement"?: string; /** * Theme of the tooltip. * @default "" */ "theme"?: DuetTheme; "tooltipId"?: string; } interface DuetTray { /** * Accessible label that is shown for screen reader users in the expandable close toggle. Not visible for normal users. * @default {fi: "Sulje", en: "Close", sv: "Stänga"} */ "accessibleCloseLabel"?: string; /** * Defaults for accessibleCloseLabel * @default {fi: "Sulje", en: "Close", sv: "Stänga"} */ "accessibleCloseLabelDefaults"?: DuetLangObject | string; /** * Accessible label that is shown for screen reader users in the expandable open toggle. Not visible for normal users. * @default {fi: "Avaa", en: "Open", sv: "Öppen"} */ "accessibleOpenLabel"?: string; /** * Defaults for accessibleOpenLabel * @default {fi: "Avaa", en: "Open", sv: "Öppen"} */ "accessibleOpenLabelDefaults"?: DuetLangObject | string; /** * Toggle whether the info panel is visible or not. You can use this property e.g. when pricing information is revealed to the user. * @default false */ "active"?: boolean; /** * Hide the info panel when user scrolls back to the top of the viewport. * @default true */ "autoHide"?: boolean; /** * The currently active language. This setting changes the accessible labels to match the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ "language"?: DuetLanguage; /** * Enable or disable the automatic responsive behaviour which makes the info panel hide on larger viewports. Settings this to "false" means that the header panel is visible on all device sizes. * @default true */ "responsive"?: boolean; /** * Theme of the info panel. * @default "" */ "theme"?: DuetTheme; } interface DuetUpload { /** * Indicates the id of a related component’s visually focused element. */ "accessibleActiveDescendant"?: string; /** * accessible aria-Label of button * @default undefined */ "accessibleButtonLabel"?: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. */ "accessibleControls"?: string; /** * Indicates the id of a component that describes the upload component. */ "accessibleDescribedBy"?: string; /** * Indicates the id of a component owned by the input. */ "accessibleOwns"?: string; /** * Map action name to DuetLangObject or boolean. Sets upload item action buttons titles (show as DOM tooltip when hovering). * @default { cancel: false, delete: false, } */ "actionButtonTitles"?: string | UploadActionButtonTitles; /** * Default actions added to the internally used duet-editable-table * @default [ { icon: "action-delete", color: "color-danger", size: "x-small", background: "gray-lightest", name: "delete", map: ["success", "failure"], label: { fi: "Poista tiedosto", en: "Delete the file", sv: "Ta bort filen", }, }, { icon: "navigation-close", color: "primary", size: "x-small", background: "gray-lightest", name: "cancel", map: ["inprogress", "pending"], label: { fi: "Keskeytä lähetys", en: "Cancel the upload", sv: "Stop överföringen", }, }, ] */ "actions"?: DuetEditableTableActions1; /** * Key used to set vertical alignment of action buttons * @default "middle" */ "alignment"?: string; /** * A string of commaseperated file type values that are allowed * @example : .pdf,.doc,.docx * @default "all" */ "allowedExtensions"?: string; /** * A string of commaseperated mime type values that are allowed * @example : image/*,application/msword, * @default "" */ "allowedMimetypes"?: string; /** * Label of button * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" } */ "buttonLabel"?: string; /** * Property to change button label defaults on the component. * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment", } */ "buttonLabelDefaults"?: DuetLangObject | string; /** * Caption (underneath label) that can be set as a way of adding extra information */ "caption"?: string; /** * If true the input caption will be placed below file list and footer * @default false */ "captionOnBottom"?: boolean; /** * If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending() * @default false */ "deferUpload"?: boolean; /** * Description for the upload component. * @default { en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.", sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.", fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.", } */ "description"?: string; /** * Property to change descriptionDefaults defaults on the component. * @default { en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.", sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.", fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.", } */ "descriptionDefaults"?: DuetLangObject | string; /** * Makes the input component disabled. This prevents users from being able to interact with the upload component, and conveys its inactive state to assistive technologies. * @default false */ "disabled"?: boolean; /** * If link-click-event is set to true then upload component will emit an event on uploaded file link click (check linkClick event). * @default false */ "emitEvent"?: boolean; /** * Display the input in error state along with an error message. * @default "" */ "error"?: string; /** * Default errorcodes used by the component, modifiable via javascript * @default errorCodes */ "errorCodes"?: DuetUploadErrorCode[]; /** * If external is set to true, the upload component will not actually upload the files, but only keep states it will be up to you to handle the upload and return progress information to the upload-component * @default false */ "external"?: boolean; /** * Id of external uploadButton of the input used for setting accessibility attributes. */ "externalUploadButtonId"?: string; /** * Label for the filelist's empty state. * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."} */ "fileListEmpty"?: string; /** * Defaults for the filelist's empty state. * @default { fi: "Ei vielä lisättyjä tiedostoja.", sv: "Inga filer har lagts till ännu.", en: "No files added yet.", } */ "fileListEmptyDefaults"?: DuetLangObject | string; /** * Map of string that contain list of uploaded files. * @default new Map() */ "files"?: StringMap; /** * Array of group names that you want the editable table to use to display files * @required * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}] * @default [ { id: this.DefaultGroups.success, label: { fi: "Valmiit tiedostot", sv: "Files success", en: "Files success", }, }, { id: this.DefaultGroups.failure, label: { fi: "Tiedostot, joissa on virheitä", sv: "Filer med fel", en: "Files with errors", }, }, { id: this.DefaultGroups.inprogress, label: { fi: "Kesken olevat tiedostot", sv: "Filer inprogress", en: "Files inprogress", }, }, { id: this.DefaultGroups.pending, label: { en: "Files to upload", sv: "Filer att ladda", fi: "Ladattavat tiedostot", }, }, ] */ "groups"?: DuetUploadTableGroupName[]; /** * Heading level for the label in the legend element. This is only used to give screen readers better logical structure. This does not affect visual appearance. * @default "h3" */ "headerHeadingLevel"?: DuetHeadingLevel; /** * If set the upload component will not display an upload button, you will have to create one yourself and call the exposed method startUpload to open the upload dialog * @default false */ "hideButton"?: boolean; /** * Use hideCancelButton to hide cancel button for pending and in progress uploads * @default false */ "hideCancelButton"?: boolean; /** * Visually hides the groups labels in the editable table list used to display the list of files * @default false */ "hideGroups"?: boolean; /** * Use hide-header to hide upload component header and caption (if caption is not on bottom) * @default false */ "hideHeader"?: boolean; /** * Adds a unique identifier for the upload component. */ "identifier"?: string; /** * Label for the input. * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"} */ "label"?: string; /** * Property to change labelDefaults defaults on the component. normally you would handle these strings on an application level and override label when needed * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"} */ "labelDefaults"?: DuetLangObject | string; /** * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files, by default this is off, setting this to true will limit the users choices to what has been explicitly set * @default false */ "limitSelection"?: boolean; /** * Controls the margin of the component. * @default "auto" */ "margin"?: DuetMargin; /** * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded. * @default 200000000 */ "maxBytes"?: number; /** * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded. * @default undefined */ "maxBytesTotal"?: number; /** * Use maxFiles to specify the maximum amount of files that can be uploaded * @default 99 */ "maxFiles"?: number; /** * If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request * @default null */ "middleware"?: XHRInternalMiddleWare; /** * Use multiple to allow the user to select multiple files when uploading * @default true */ "multiple"?: boolean; /** * Name of the upload component. */ "name"?: string; /** * Emitted when the input loses focus. */ "onDuetBlur"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when a user clicks cancel on an upload in progress */ "onDuetCancel"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when the value has changed. */ "onDuetChange"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when a user clicks delete to delete an uploaded file, or a file entry with error */ "onDuetDelete"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when the current upload batch finishes */ "onDuetDone"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when the input has focus. */ "onDuetFocus"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when the file progress is updated. */ "onDuetProgress"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when the component is finished initializing */ "onDuetReady"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when the current validation state changes internally */ "onDuetState"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when the user clicks the upload button */ "onDuetUpload"?: (event: DuetUploadCustomEvent) => void; /** * Emitted when the user clicks the uploaded file link and link-click-event prop is set to true */ "onLinkClick"?: (event: DuetUploadCustomEvent) => void; /** * Use rename-duplicates to auto rename files with the same name instead of replacing them. * @default false */ "renameDuplicates"?: boolean; /** * Set whether the input is required or not. Please note that this is necessary 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. * @default false */ "required"?: boolean; /** * If enabled the editable-table will display links on successfully uploaded items, this requires the server can respond with link URIs in the correct format and that the files are accessible to the user * @default false */ "showLinks"?: boolean; /** * Use show-uploaded-items-header to show single, generic, header for uploaded items * @default false */ "showUploadedItemsHeader"?: boolean; /** * Property to change the aria upload progress text read aloud by screenreaders * @default { fi: { inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.", inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui", done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti", doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui", files: "tiedostoa", file: "tiedosto", }, sv: { inProgress: "Laddar upp {filesUploaded} av {filesTotal}", inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades", done: "Uppladdningen slutförd, {filesTotal} har lagts till", doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades", files: "filer", file: "fil", }, en: { inProgress: "Uploading {filesUploaded} of {filesTotal}", inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed", done: "Upload completed, {filesTotal} added successfully", doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.", files: "files", file: "file", }, } */ "statusLabelDefaults"?: DuetLangObject | string; /** * Strings used for the status aria-label * @default getLocaleString( this.statusLabelDefaults ) */ "statusMessageLabel"?: StatusMessage | string; /** * Theme of the input. * @default "" */ "theme"?: DuetTheme; /** * Property to change single uploaded items header label * @default { fi: "Ladattu tiedosto.", sv: "Nedladdad fil.", en: "Uploaded file.", } */ "uploadedItemsHeaderLabel"?: DuetLangObject; /** * Endpoint URI that is capable of receiving the files */ "uri"?: string; /** * Property to read if the internally used editable-table contains errors or not * @default !this.required */ "valid"?: boolean; /** * Value of the input. */ "value"?: string; } interface DuetUploadAriaStatus { /** * Adds accessible label that is read aloud * @default "polite" */ "accessibleAriaLive"?: "off" | "polite" | "assertive"; /** * valid file amount * @default undefined */ "inprogress"?: number; /** * invalid file amount * @default undefined */ "invalid"?: number; /** * Status labels used in the component * @default null */ "statusMessageLabel"?: StatusMessage; /** * total files * @default undefined */ "total"?: number; /** * valid file amount * @default undefined */ "valid"?: number; } interface DuetUploadItem { /** * actions. */ "actions"?: any; /** * buttonTitles. */ "buttonTitles"?: UploadActionButtonTitles1; /** * categoryLabel. */ "categoryLabel"?: DuetLangObject; /** * data. */ "data"?: DuetFileListItem; /** * errorCodes. */ "errorCodes"?: DuetUploadErrorCode[]; /** * label. */ "label"?: DuetLangObject; /** * linkClickEvent. */ "linkClickEvent"?: EventEmitter; /** * showCategory. */ "showCategory"?: boolean; /** * showLinks. */ "showLinks"?: boolean; /** * theme. * @default "" */ "theme"?: DuetTheme; /** * type. */ "type"?: ItemType; } interface DuetVisuallyHidden { } interface IntrinsicElements { "duet-action-button": DuetActionButton; "duet-alert": DuetAlert; "duet-badge": DuetBadge; "duet-banner": DuetBanner; "duet-breadcrumb": DuetBreadcrumb; "duet-breadcrumbs": DuetBreadcrumbs; "duet-button": DuetButton; "duet-callout": DuetCallout; "duet-caption": DuetCaption; "duet-card": DuetCard; "duet-checkbox": DuetCheckbox; "duet-checkmark": DuetCheckmark; "duet-chip": DuetChip; "duet-choice": DuetChoice; "duet-choice-group": DuetChoiceGroup; "duet-collapsible": DuetCollapsible; "duet-combobox": DuetCombobox; "duet-contact-card": DuetContactCard; "duet-cookie-consent": DuetCookieConsent; "duet-date-picker": DuetDatePicker; "duet-divider": DuetDivider; "duet-editable-table": DuetEditableTable; "duet-empty-state": DuetEmptyState; "duet-fieldset": DuetFieldset; "duet-file-chooser": DuetFileChooser; "duet-footer": DuetFooter; "duet-grid": DuetGrid; "duet-grid-item": DuetGridItem; "duet-header": DuetHeader; "duet-heading": DuetHeading; "duet-hero": DuetHero; "duet-icon": DuetIcon; "duet-indicator": DuetIndicator; "duet-input": DuetInput; "duet-label": DuetLabel; "duet-layout": DuetLayout; "duet-link": DuetLink; "duet-list": DuetList; "duet-list-item": DuetListItem; "duet-logo": DuetLogo; "duet-menu-bar": DuetMenuBar; "duet-menu-bar-button": DuetMenuBarButton; "duet-menu-bar-dropdown": DuetMenuBarDropdown; "duet-menu-bar-dropdown-link": DuetMenuBarDropdownLink; "duet-menu-bar-item": DuetMenuBarItem; "duet-menu-bar-link": DuetMenuBarLink; "duet-modal": DuetModal; "duet-multiselect": DuetMultiselect; "duet-nav": DuetNav; "duet-notification": DuetNotification; "duet-notification-drawer": DuetNotificationDrawer; "duet-number-input": DuetNumberInput; "duet-overlay": DuetOverlay; "duet-page-heading": DuetPageHeading; "duet-pagination": DuetPagination; "duet-panel": DuetPanel; "duet-paragraph": DuetParagraph; "duet-phone-input": DuetPhoneInput; "duet-popup-menu": DuetPopupMenu; "duet-popup-menu-item": DuetPopupMenuItem; "duet-progress": DuetProgress; "duet-promo-card": DuetPromoCard; "duet-radio": DuetRadio; "duet-radio-group": DuetRadioGroup; "duet-range-slider": DuetRangeSlider; "duet-range-stepper": DuetRangeStepper; "duet-scrollable": DuetScrollable; "duet-section-layout": DuetSectionLayout; "duet-select": DuetSelect; "duet-shaped-image": DuetShapedImage; "duet-share-chart": DuetShareChart; "duet-share-chart-item": DuetShareChartItem; "duet-show-more": DuetShowMore; "duet-slideout": DuetSlideout; "duet-slideout-lang": DuetSlideoutLang; "duet-slideout-link": DuetSlideoutLink; "duet-slideout-panel": DuetSlideoutPanel; "duet-slideout-panel-dropdown": DuetSlideoutPanelDropdown; "duet-spacer": DuetSpacer; "duet-spinner": DuetSpinner; "duet-status-icon": DuetStatusIcon; "duet-step": DuetStep; "duet-stepper": DuetStepper; "duet-submenu-bar": DuetSubmenuBar; "duet-submenu-bar-dropdown": DuetSubmenuBarDropdown; "duet-submenu-bar-dropdown-link": DuetSubmenuBarDropdownLink; "duet-submenu-bar-item": DuetSubmenuBarItem; "duet-submenu-bar-link": DuetSubmenuBarLink; "duet-tab": DuetTab; "duet-tab-group": DuetTabGroup; "duet-table": DuetTable; "duet-textarea": DuetTextarea; "duet-toggle": DuetToggle; "duet-toolbar": DuetToolbar; "duet-toolbar-dropdown": DuetToolbarDropdown; "duet-toolbar-dropdown-link": DuetToolbarDropdownLink; "duet-toolbar-item": DuetToolbarItem; "duet-toolbar-link": DuetToolbarLink; "duet-tooltip": DuetTooltip; "duet-tooltip-button": DuetTooltipButton; "duet-tooltip-popup": DuetTooltipPopup; "duet-tray": DuetTray; "duet-upload": DuetUpload; "duet-upload-aria-status": DuetUploadAriaStatus; "duet-upload-item": DuetUploadItem; "duet-visually-hidden": DuetVisuallyHidden; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "duet-action-button": LocalJSX.DuetActionButton & JSXBase.HTMLAttributes; "duet-alert": LocalJSX.DuetAlert & JSXBase.HTMLAttributes; "duet-badge": LocalJSX.DuetBadge & JSXBase.HTMLAttributes; "duet-banner": LocalJSX.DuetBanner & JSXBase.HTMLAttributes; "duet-breadcrumb": LocalJSX.DuetBreadcrumb & JSXBase.HTMLAttributes; "duet-breadcrumbs": LocalJSX.DuetBreadcrumbs & JSXBase.HTMLAttributes; "duet-button": LocalJSX.DuetButton & JSXBase.HTMLAttributes; "duet-callout": LocalJSX.DuetCallout & JSXBase.HTMLAttributes; "duet-caption": LocalJSX.DuetCaption & JSXBase.HTMLAttributes; "duet-card": LocalJSX.DuetCard & JSXBase.HTMLAttributes; "duet-checkbox": LocalJSX.DuetCheckbox & JSXBase.HTMLAttributes; "duet-checkmark": LocalJSX.DuetCheckmark & JSXBase.HTMLAttributes; "duet-chip": LocalJSX.DuetChip & JSXBase.HTMLAttributes; "duet-choice": LocalJSX.DuetChoice & JSXBase.HTMLAttributes; "duet-choice-group": LocalJSX.DuetChoiceGroup & JSXBase.HTMLAttributes; "duet-collapsible": LocalJSX.DuetCollapsible & JSXBase.HTMLAttributes; "duet-combobox": LocalJSX.DuetCombobox & JSXBase.HTMLAttributes; "duet-contact-card": LocalJSX.DuetContactCard & JSXBase.HTMLAttributes; "duet-cookie-consent": LocalJSX.DuetCookieConsent & JSXBase.HTMLAttributes; "duet-date-picker": LocalJSX.DuetDatePicker & JSXBase.HTMLAttributes; "duet-divider": LocalJSX.DuetDivider & JSXBase.HTMLAttributes; "duet-editable-table": LocalJSX.DuetEditableTable & JSXBase.HTMLAttributes; "duet-empty-state": LocalJSX.DuetEmptyState & JSXBase.HTMLAttributes; "duet-fieldset": LocalJSX.DuetFieldset & JSXBase.HTMLAttributes; "duet-file-chooser": LocalJSX.DuetFileChooser & JSXBase.HTMLAttributes; "duet-footer": LocalJSX.DuetFooter & JSXBase.HTMLAttributes; "duet-grid": LocalJSX.DuetGrid & JSXBase.HTMLAttributes; "duet-grid-item": LocalJSX.DuetGridItem & JSXBase.HTMLAttributes; "duet-header": LocalJSX.DuetHeader & JSXBase.HTMLAttributes; "duet-heading": LocalJSX.DuetHeading & JSXBase.HTMLAttributes; "duet-hero": LocalJSX.DuetHero & JSXBase.HTMLAttributes; "duet-icon": LocalJSX.DuetIcon & JSXBase.HTMLAttributes; "duet-indicator": LocalJSX.DuetIndicator & JSXBase.HTMLAttributes; "duet-input": LocalJSX.DuetInput & JSXBase.HTMLAttributes; "duet-label": LocalJSX.DuetLabel & JSXBase.HTMLAttributes; "duet-layout": LocalJSX.DuetLayout & JSXBase.HTMLAttributes; "duet-link": LocalJSX.DuetLink & JSXBase.HTMLAttributes; "duet-list": LocalJSX.DuetList & JSXBase.HTMLAttributes; "duet-list-item": LocalJSX.DuetListItem & JSXBase.HTMLAttributes; "duet-logo": LocalJSX.DuetLogo & JSXBase.HTMLAttributes; "duet-menu-bar": LocalJSX.DuetMenuBar & JSXBase.HTMLAttributes; "duet-menu-bar-button": LocalJSX.DuetMenuBarButton & JSXBase.HTMLAttributes; "duet-menu-bar-dropdown": LocalJSX.DuetMenuBarDropdown & JSXBase.HTMLAttributes; "duet-menu-bar-dropdown-link": LocalJSX.DuetMenuBarDropdownLink & JSXBase.HTMLAttributes; "duet-menu-bar-item": LocalJSX.DuetMenuBarItem & JSXBase.HTMLAttributes; "duet-menu-bar-link": LocalJSX.DuetMenuBarLink & JSXBase.HTMLAttributes; "duet-modal": LocalJSX.DuetModal & JSXBase.HTMLAttributes; "duet-multiselect": LocalJSX.DuetMultiselect & JSXBase.HTMLAttributes; "duet-nav": LocalJSX.DuetNav & JSXBase.HTMLAttributes; "duet-notification": LocalJSX.DuetNotification & JSXBase.HTMLAttributes; "duet-notification-drawer": LocalJSX.DuetNotificationDrawer & JSXBase.HTMLAttributes; "duet-number-input": LocalJSX.DuetNumberInput & JSXBase.HTMLAttributes; "duet-overlay": LocalJSX.DuetOverlay & JSXBase.HTMLAttributes; "duet-page-heading": LocalJSX.DuetPageHeading & JSXBase.HTMLAttributes; "duet-pagination": LocalJSX.DuetPagination & JSXBase.HTMLAttributes; "duet-panel": LocalJSX.DuetPanel & JSXBase.HTMLAttributes; "duet-paragraph": LocalJSX.DuetParagraph & JSXBase.HTMLAttributes; "duet-phone-input": LocalJSX.DuetPhoneInput & JSXBase.HTMLAttributes; "duet-popup-menu": LocalJSX.DuetPopupMenu & JSXBase.HTMLAttributes; "duet-popup-menu-item": LocalJSX.DuetPopupMenuItem & JSXBase.HTMLAttributes; "duet-progress": LocalJSX.DuetProgress & JSXBase.HTMLAttributes; "duet-promo-card": LocalJSX.DuetPromoCard & JSXBase.HTMLAttributes; "duet-radio": LocalJSX.DuetRadio & JSXBase.HTMLAttributes; "duet-radio-group": LocalJSX.DuetRadioGroup & JSXBase.HTMLAttributes; "duet-range-slider": LocalJSX.DuetRangeSlider & JSXBase.HTMLAttributes; "duet-range-stepper": LocalJSX.DuetRangeStepper & JSXBase.HTMLAttributes; "duet-scrollable": LocalJSX.DuetScrollable & JSXBase.HTMLAttributes; "duet-section-layout": LocalJSX.DuetSectionLayout & JSXBase.HTMLAttributes; "duet-select": LocalJSX.DuetSelect & JSXBase.HTMLAttributes; "duet-shaped-image": LocalJSX.DuetShapedImage & JSXBase.HTMLAttributes; "duet-share-chart": LocalJSX.DuetShareChart & JSXBase.HTMLAttributes; "duet-share-chart-item": LocalJSX.DuetShareChartItem & JSXBase.HTMLAttributes; "duet-show-more": LocalJSX.DuetShowMore & JSXBase.HTMLAttributes; "duet-slideout": LocalJSX.DuetSlideout & JSXBase.HTMLAttributes; "duet-slideout-lang": LocalJSX.DuetSlideoutLang & JSXBase.HTMLAttributes; "duet-slideout-link": LocalJSX.DuetSlideoutLink & JSXBase.HTMLAttributes; "duet-slideout-panel": LocalJSX.DuetSlideoutPanel & JSXBase.HTMLAttributes; "duet-slideout-panel-dropdown": LocalJSX.DuetSlideoutPanelDropdown & JSXBase.HTMLAttributes; "duet-spacer": LocalJSX.DuetSpacer & JSXBase.HTMLAttributes; "duet-spinner": LocalJSX.DuetSpinner & JSXBase.HTMLAttributes; "duet-status-icon": LocalJSX.DuetStatusIcon & JSXBase.HTMLAttributes; "duet-step": LocalJSX.DuetStep & JSXBase.HTMLAttributes; "duet-stepper": LocalJSX.DuetStepper & JSXBase.HTMLAttributes; "duet-submenu-bar": LocalJSX.DuetSubmenuBar & JSXBase.HTMLAttributes; "duet-submenu-bar-dropdown": LocalJSX.DuetSubmenuBarDropdown & JSXBase.HTMLAttributes; "duet-submenu-bar-dropdown-link": LocalJSX.DuetSubmenuBarDropdownLink & JSXBase.HTMLAttributes; "duet-submenu-bar-item": LocalJSX.DuetSubmenuBarItem & JSXBase.HTMLAttributes; "duet-submenu-bar-link": LocalJSX.DuetSubmenuBarLink & JSXBase.HTMLAttributes; "duet-tab": LocalJSX.DuetTab & JSXBase.HTMLAttributes; "duet-tab-group": LocalJSX.DuetTabGroup & JSXBase.HTMLAttributes; "duet-table": LocalJSX.DuetTable & JSXBase.HTMLAttributes; "duet-textarea": LocalJSX.DuetTextarea & JSXBase.HTMLAttributes; "duet-toggle": LocalJSX.DuetToggle & JSXBase.HTMLAttributes; "duet-toolbar": LocalJSX.DuetToolbar & JSXBase.HTMLAttributes; "duet-toolbar-dropdown": LocalJSX.DuetToolbarDropdown & JSXBase.HTMLAttributes; "duet-toolbar-dropdown-link": LocalJSX.DuetToolbarDropdownLink & JSXBase.HTMLAttributes; "duet-toolbar-item": LocalJSX.DuetToolbarItem & JSXBase.HTMLAttributes; "duet-toolbar-link": LocalJSX.DuetToolbarLink & JSXBase.HTMLAttributes; "duet-tooltip": LocalJSX.DuetTooltip & JSXBase.HTMLAttributes; "duet-tooltip-button": LocalJSX.DuetTooltipButton & JSXBase.HTMLAttributes; "duet-tooltip-popup": LocalJSX.DuetTooltipPopup & JSXBase.HTMLAttributes; "duet-tray": LocalJSX.DuetTray & JSXBase.HTMLAttributes; "duet-upload": LocalJSX.DuetUpload & JSXBase.HTMLAttributes; "duet-upload-aria-status": LocalJSX.DuetUploadAriaStatus & JSXBase.HTMLAttributes; "duet-upload-item": LocalJSX.DuetUploadItem & JSXBase.HTMLAttributes; "duet-visually-hidden": LocalJSX.DuetVisuallyHidden & JSXBase.HTMLAttributes; } } }