@scania/tegel
Version:
Tegel Design System
1,610 lines (1,609 loc) • 265 kB
TypeScript
/* 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 { IconNames } from "./types/Icons";
import { TextAlign } from "./components/table/table/table";
import { Placement } from "@popperjs/core";
import { CollapseEvent, InternalTdsSideMenuPropChange } from "./components/side-menu/side-menu";
import { CollapseEvent as CollapseEvent1 } from "./components/side-menu/side-menu";
import { InternalTdsStepperPropChange } from "./components/stepper/stepper";
import { InternalTdsTablePropChange } from "./components/table/table/table";
export { IconNames } from "./types/Icons";
export { TextAlign } from "./components/table/table/table";
export { Placement } from "@popperjs/core";
export { CollapseEvent, InternalTdsSideMenuPropChange } from "./components/side-menu/side-menu";
export { CollapseEvent as CollapseEvent1 } from "./components/side-menu/side-menu";
export { InternalTdsStepperPropChange } from "./components/stepper/stepper";
export { InternalTdsTablePropChange } from "./components/table/table/table";
export namespace Components {
interface TdsAccordion {
/**
* Removes the bottom border of the last Accordion item.
* @default false
*/
"hideLastBorder": boolean;
/**
* Set the variant of the Accordion.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
}
interface TdsAccordionItem {
/**
* Specifies the heading level (aria-level) for accessibility. Only accepts values between 1 and 6.
* @default '6'
*/
"ariaLevelValue": '1' | '2' | '3' | '4' | '5' | '6';
/**
* Method for collapsing the Accordion Item
*/
"collapse": () => Promise<void>;
/**
* Disabled option in `boolean`.
* @default false
*/
"disabled": boolean;
/**
* Method for expanding the Accordion Item
*/
"expand": () => Promise<void>;
/**
* Changes position of the expand icon.
* @default 'end'
*/
"expandIconPosition": 'start' | 'end';
/**
* Set to true to expand panel open
* @default false
*/
"expanded": boolean;
/**
* The header gives users the context about the additional information available inside the panel
* @default ''
*/
"header": string;
/**
* Returns the expanded state of the Accordion Item.
*/
"isExpanded": () => Promise<boolean>;
/**
* When true, 16px on right padding instead of 64px
* @default false
*/
"paddingReset": boolean;
/**
* Method for toggling the expanded state of the Accordion Item.
*/
"toggleAccordionItem": () => Promise<void>;
}
interface TdsBadge {
/**
* Changes visibility of Badge
* @default false
*/
"hidden": boolean;
/**
* Sets component size.
* @default 'lg'
*/
"size": 'lg' | 'sm';
/**
* Defines aria-live attribute
* @default 'polite'
*/
"tdsAriaLive": 'off' | 'polite' | 'assertive';
/**
* Value shown in Badge
* @default ''
*/
"value": string;
}
interface TdsBanner {
/**
* ID used for internal table functionality and events, must be unique. **NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner, as the default ID is random and will be different every time.
* @default generateUniqueId()
*/
"bannerId": string;
/**
* Header text.
*/
"header"?: string;
/**
* Hides the Banner
* @default false
*/
"hidden": boolean;
/**
* Hides the Banner.
*/
"hideBanner": () => Promise<void>;
/**
* Name of the icon for the component. For error and information variant, the icon is predefined.
*/
"icon"?: IconNames;
/**
* Defines the ARIA role of the banner. Defaults to "banner" for global use, but can be set to "region" or "alert" if used differently.
* @default 'banner'
*/
"roleType": 'banner' | 'region' | 'alert';
/**
* Shows the Banner
*/
"showBanner": () => Promise<void>;
/**
* Subheader text.
*/
"subheader"?: string;
/**
* Variant of Banner
* @default 'default'
*/
"variant": 'error' | 'information' | 'default';
}
/**
* @example <tds-block>
* <section>Semantic section content</section>
* </tds-block>
*/
interface TdsBlock {
/**
* Specifies the HTML tag to be used for the component wrapper.
* @default 'div'
*/
"componentTag": | 'section'
| 'div'
| 'article'
| 'aside'
| 'header'
| 'footer'
| 'nav'
| 'main';
/**
* Mode variant of the component, based on current mode.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
}
interface TdsBodyCell {
/**
* Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering
*/
"cellKey"?: string;
/**
* Value that will be presented as text inside a cell
*/
"cellValue"?: string | number;
/**
* Number of columns the cell should span.
*/
"colSpan"?: number;
/**
* Disables internal padding. Useful when passing other components to cell.
* @default false
*/
"disablePadding": boolean;
/**
* Number of rows the cell should span.
*/
"rowSpan"?: number;
/**
* Setting for text align, default value "left". Other accepted values are "left", "start", "right", "end" or "center".
*/
"textAlign"?: TextAlign;
}
interface TdsBreadcrumb {
/**
* Boolean for the current link
* @default false
*/
"current": boolean;
}
interface TdsBreadcrumbs {
/**
* The value to be used for the aria-label attribute
*/
"tdsAriaLabel"?: string;
}
interface TdsButton {
/**
* Determines if and how the button should animate.
* @default 'none'
*/
"animation": 'none' | 'fade';
/**
* Control for disabled state of a component
* @default false
*/
"disabled": boolean;
/**
* When enabled, the Button takes 100% width
* @default false
*/
"fullbleed": boolean;
/**
* Set the mode variant of the Button.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* The name attribute allows for different ways of accessing the button element
*/
"name"?: string;
/**
* Size of a Button
* @default 'lg'
*/
"size": 'xs' | 'sm' | 'md' | 'lg';
/**
* The value to be used for the aria-label attribute if onlyIcon is set to true
*/
"tdsAriaLabel"?: string;
/**
* Text displayed inside the Button
*/
"text"?: string;
/**
* Button's type
* @default 'button'
*/
"type": 'button' | 'submit' | 'reset';
/**
* The value attribute can be used when handling a form submission
*/
"value"?: string;
/**
* Variation of Button's design
* @default 'primary'
*/
"variant": 'primary' | 'secondary' | 'ghost' | 'danger';
}
interface TdsCard {
/**
* Divider for the body
* @default false
*/
"bodyDivider": boolean;
/**
* Body image src
*/
"bodyImg"?: string;
/**
* Alt text for the body image
*/
"bodyImgAlt"?: string;
/**
* ID for the Card, must be unique. **NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card, as the default ID is random and will be different every time.
* @default generateUniqueId()
*/
"cardId": string;
/**
* Makes the Card clickable.
* @default false
*/
"clickable": boolean;
/**
* Enables expandable behaviour. When true, clicking the header toggles content visibility.
* @default false
*/
"expandable": boolean;
/**
* Tracks the current expanded state when expandable is enabled.
* @default false
*/
"expanded": boolean;
/**
* Text in the header
*/
"header"?: string;
/**
* Placement of the header
* @default 'below-header'
*/
"imagePlacement": 'above-header' | 'below-header';
/**
* Variant of the Card based on the theme used.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* @default false
*/
"stretch": boolean;
/**
* Subheader text in the header
*/
"subheader"?: string;
}
interface TdsCheckbox {
/**
* ID for the Checkbox's input element. Randomly generated if not specified.
* @default generateUniqueId()
*/
"checkboxId": string;
/**
* Sets the Checkbox as checked
* @default false
*/
"checked": boolean;
/**
* Sets the Checkbox in a disabled state
* @default false
*/
"disabled": boolean;
/**
* Method to programmatically focus the checkbox element
*/
"focusElement": () => Promise<void>;
/**
* Sets the Checkbox as indeterminate
* @default false
*/
"indeterminate": boolean;
/**
* Name for the Checkbox's input element.
*/
"name"?: string;
/**
* Make the Checkbox required
* @default false
*/
"required": boolean;
/**
* Value to be used for the aria-describedby attribute
*/
"tdsAriaDescribedby"?: string;
/**
* Value to be used for the aria-label attribute
*/
"tdsAriaLabel"?: string;
/**
* Toggles the checked value of the component.
*/
"toggleCheckbox": () => Promise<{ checkboxId: string; checked: boolean; }>;
/**
* Value for the Checkbox
*/
"value"?: string;
}
interface TdsChip {
/**
* Controls component's checked attribute. Valid only for type checkbox and radio.
* @default false
*/
"checked": boolean;
/**
* ID used for internal Chip functionality and events, must be unique. **NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input, as the default ID is random and will be different every time.
* @default generateUniqueId()
*/
"chipId": string;
/**
* Sets the Chip in a disabled state
* @default false
*/
"disabled": boolean;
/**
* Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio.
*/
"name"?: string;
/**
* Size of the Chip component
* @default 'lg'
*/
"size": 'sm' | 'lg';
/**
* Value to be used for the aria-label attribute
*/
"tdsAriaLabel"?: string;
/**
* Type of Chip, depends on usage
* @default 'button'
*/
"type": 'button' | 'radio' | 'checkbox';
/**
* Value of input. Valid only for type checkbox and radio.
*/
"value"?: string;
}
interface TdsCoreHeaderItem {
}
interface TdsDatetime {
/**
* Autofocus for input
* @default false
*/
"autofocus": boolean;
/**
* Function for additional validation based on business rules
*/
"customValidator"?: (value: string) => boolean;
/**
* Default value of the component.<br/>Format for date-time: yyyy-MM-ddTHH:mm.<br/>Format for date: yyyy-MM-dd.<br/>Format for month: yyyy-MM.<br/>Format for week: yyyy-Www.<br/>Format for time: HH:mm.
* @default 'none'
*/
"defaultValue": string | 'none';
/**
* Set input in disabled state
* @default false
*/
"disabled": boolean;
/**
* Method to programmatically focus the datetime element
*/
"focusElement": () => Promise<void>;
/**
* Default contextual helper text for the component for states = success or none
* @default ''
*/
"helper": string;
/**
* Contextual helper text for the component for error state
*/
"helperError"?: string;
/**
* Contextual helper text for the component when input is invalid
* @default 'Invalid input'
*/
"helperErrorInvalid"?: string;
/**
* Label text for the component
* @default ''
*/
"label": string;
/**
* Position of the label
* @default 'no-label'
*/
"labelPosition": 'inside' | 'outside' | 'no-label';
/**
* Sets max value.<br/>Example for different types:<br/>datetime="2023-01-31T00:00"<br/>date="2023-01-01"<br/>month="2023-01"<br/>week="2023-W02"<br/>time="15:00"
*/
"max"?: string;
/**
* Sets min value.<br/>Example for different types:<br/>datetime="2023-01-31T00:00"<br/>date="2023-01-01"<br/>month="2023-01"<br/>week="2023-W02"<br/>time="15:00"
*/
"min"?: string;
/**
* Set the variant of the Datetime component.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* Name property. Uses a unique ID as fallback if not specified.
* @default `datetime-${generateUniqueId()}`
*/
"name": string;
/**
* Resets min width rule
* @default false
*/
"noMinWidth": boolean;
/**
* Method that resets the value of the Datetime, using defaultValue if is not 'none'
*/
"reset": () => Promise<void>;
/**
* Method that sets the value of the datetime element
*/
"setValue": (newValue: string) => Promise<void>;
/**
* Size of the input
* @default 'lg'
*/
"size": 'sm' | 'md' | 'lg';
/**
* Switches between success and error state.
*/
"state"?: 'none' | 'success' | 'error';
/**
* Value for the aria-label attribute
*/
"tdsAriaLabel"?: string;
/**
* Sets an input type
* @default 'datetime-local'
*/
"type": 'datetime-local' | 'date' | 'month' | 'week' | 'time';
/**
* Value of the input text
* @default ''
*/
"value": string;
}
interface TdsDivider {
/**
* Orientation of the Divider, horizontal if not specified.
* @default 'horizontal'
*/
"orientation": 'horizontal' | 'vertical';
/**
* Variant of the Divider, subtle if not specified.
* @default 'subtle'
*/
"variant": 'discrete' | 'subtle' | 'soft' | 'defined' | 'dark-blue';
}
interface TdsDropdown {
/**
* @default 'slide'
*/
"animation": 'none' | 'slide';
"appendValue": (value: string) => Promise<void>;
/**
* Method for closing the Dropdown.
*/
"close": () => Promise<void>;
/**
* Default value selected in the Dropdown.
*/
"defaultValue"?: string | number;
/**
* Sets the Dropdown in a disabled state
* @default false
*/
"disabled": boolean;
/**
* Sets the Dropdown in an error state
* @default false
*/
"error": boolean;
/**
* Enables filtration in the Dropdown.
* @default false
*/
"filter": boolean;
/**
* Method that forces focus on the input element.
*/
"focusElement": () => Promise<void>;
/**
* Helper text for the Dropdown.
*/
"helper"?: string;
/**
* Label text for the Dropdown.
*/
"label"?: string;
/**
* Label text position
*/
"labelPosition"?: 'inside' | 'outside';
/**
* Mode variant of the component, based on current mode.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* Enables multiselect in the Dropdown.
* @default false
*/
"multiselect": boolean;
/**
* Name for the Dropdowns input element.
*/
"name"?: string;
/**
* Text that is displayed if filter is used and there are no options that matches the search. Setting it to an empty string disables message from showing up.
* @default 'No result'
*/
"noResultText"?: string;
/**
* Normalizes input text for fuzzier search
* @default true
*/
"normalizeText": boolean;
/**
* The direction the Dropdown should open, auto if not specified.
* @default 'auto'
*/
"openDirection": 'up' | 'down' | 'auto';
/**
* Placeholder text for the Dropdown.
*/
"placeholder"?: string;
"removeValue": (oldValue: string) => Promise<void>;
"reset": () => Promise<void>;
/**
* Method for setting the selected value of the Dropdown. Single selection example: <code> dropdown.setValue('option-1', 'Option 1'); </code> Multiselect example: <code> dropdown.setValue(['option-1', 'option-2']); </code>
*/
"setValue": (value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number | undefined; label: string | undefined; }[]>;
/**
* The size of the Dropdown.
* @default 'lg'
*/
"size": 'xs' | 'sm' | 'md' | 'lg';
/**
* Defines aria-label attribute for input
*/
"tdsAriaLabel"?: string;
/**
* Method to force update the dropdown display value. Use this method when you programmatically change the text content of dropdown options to ensure the selected value display updates immediately.
*/
"updateDisplay": () => Promise<void>;
/**
* Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number.
* @default null
*/
"value": string | number | (string | number)[] | null;
}
interface TdsDropdownOption {
/**
* Sets the option as disabled.
* @default false
*/
"disabled": boolean;
/**
* Method to select/deselect an option.
*/
"setSelected": (selected: boolean) => Promise<void>;
/**
* Defines aria-label attribute for the option
*/
"tdsAriaLabel"?: string;
/**
* Value of the dropdown option
*/
"value"?: string | number;
}
interface TdsFolderTab {
/**
* Disables the Tab.
* @default false
*/
"disabled": boolean;
"setSelected": (selected: boolean) => Promise<void>;
"setTabWidth": (width: number) => Promise<void>;
}
interface TdsFolderTabs {
/**
* Sets the default selected Tab.
* @default 0
*/
"defaultSelectedIndex": number;
/**
* Variant of the Tabs, primary= on white, secondary= on grey50
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* Reinitializes the component.
*/
"reinitialize": () => Promise<void>;
/**
* Sets the passed tabindex as the selected Tab.
*/
"selectTab": (tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>;
/**
* Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
*/
"selectedIndex"?: number;
/**
* Defines aria-label on left scroll button
* @default 'Scroll left'
*/
"tdsScrollLeftAriaLabel": string;
/**
* Defines aria-label on right scroll button
* @default 'Scroll right'
*/
"tdsScrollRightAriaLabel": string;
}
interface TdsFooter {
/**
* Mode variant of the component, based on current mode.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
}
interface TdsFooterGroup {
/**
* Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility.
*/
"tdsListAriaLabel"?: string;
/**
* Title text for the link group, only valid on top part of Footer.
*/
"titleText"?: string;
}
interface TdsFooterItem {
}
interface TdsHeader {
}
interface TdsHeaderBrandSymbol {
}
interface TdsHeaderCell {
/**
* The value of column key, usually comes from JSON, needed for sorting
*/
"cellKey"?: string;
/**
* Text that displays in column cell
*/
"cellValue"?: string;
/**
* Number of columns the cell should span.
*/
"colSpan"?: number;
/**
* In case noMinWidth is set, the user has to specify the width value for each column.
*/
"customWidth"?: string;
/**
* Disables internal padding. Useful when passing other components to cell.
* @default false
*/
"disablePadding": boolean;
/**
* Number of rows the cell should span.
*/
"rowSpan"?: number;
/**
* Enables sorting on that column
* @default false
*/
"sortable": boolean;
/**
* Aria label for the sort button, providing an accessible description
* @default ''
*/
"tdsAriaLabelSortButton"?: string;
/**
* Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end".
* @default 'left'
*/
"textAlign": TextAlign;
}
interface TdsHeaderDropdown {
/**
* The label of the button that opens the dropdown. This is an alternative to the label slot.
*/
"label"?: string;
/**
* If the dropdown icon (downwards chevron) should be hidden.
* @default false
*/
"noDropdownIcon": boolean;
/**
* If the button that opens the dropdown should appear selected.
* @default false
*/
"selected": boolean;
/**
* Value to be used by the aria-label attribute
*/
"tdsAriaLabel"?: string;
}
interface TdsHeaderDropdownList {
/**
* The size of the component.
* @default 'md'
*/
"size": 'lg' | 'md';
}
interface TdsHeaderDropdownListItem {
/**
* If the link should appear selected.
* @default false
*/
"selected": boolean;
/**
* The size of the component.
* @default 'md'
*/
"size": 'md' | 'lg';
}
interface TdsHeaderDropdownListUser {
/**
* Header text, usually the users first name and last name.
*/
"header"?: string;
/**
* Image alt text.
*/
"imgAlt"?: string;
/**
* Image URL.
*/
"imgUrl"?: string;
/**
* Subheader text.
*/
"subheader"?: string;
}
interface TdsHeaderHamburger {
/**
* Value to be used by the aria-label attribute
*/
"tdsAriaLabel"?: string;
}
interface TdsHeaderItem {
/**
* If the button should appear active. Can be used when the button is triggering a dropdown, and the dropdown is open, for example.
* @default false
*/
"active": boolean;
/**
* If the button should appear selected.
* @default false
*/
"selected": boolean;
}
interface TdsHeaderLauncher {
/**
* Value to be used by the aria-label attribute of the launcher button
*/
"tdsAriaLabel"?: string;
}
interface TdsHeaderLauncherButton {
/**
* If the button should appear active. Can be used when the button is triggering a dropdown, and the dropdown is open, for example.
* @default false
*/
"active": boolean;
/**
* Value to be used by the aria-label attribute
*/
"tdsAriaLabel"?: string;
}
interface TdsHeaderLauncherGrid {
}
interface TdsHeaderLauncherGridItem {
}
interface TdsHeaderLauncherGridTitle {
}
interface TdsHeaderLauncherList {
}
interface TdsHeaderLauncherListItem {
}
interface TdsHeaderLauncherListTitle {
}
interface TdsHeaderTitle {
}
interface TdsIcon {
/**
* Pass the name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library
* @default 'truck'
*/
"name": IconNames;
/**
* Pass a size of icon as a string, for example, 32px, 1rem, 4em...
* @default '16px'
*/
"size": string;
/**
* Set description for the svg. Also used by aria-describedby.
*/
"svgDescription"?: string;
/**
* Override the default title for the svg. Also used by aria-labelledby.
*/
"svgTitle"?: string;
/**
* Set aria-hidden attribute on svg
* @default false
*/
"tdsAriaHidden": boolean;
}
interface TdsInlineTab {
/**
* Disables the Tab.
* @default false
*/
"disabled": boolean;
"setSelected": (selected: boolean) => Promise<void>;
}
interface TdsInlineTabs {
/**
* Sets the default selected Tab.
* @default 0
*/
"defaultSelectedIndex": number;
/**
* Custom left padding value for the wrapper element.
* @default 32
*/
"leftPadding": number;
/**
* Variant of the Tabs, primary= on white, secondary= on grey50
* @default 'primary'
*/
"modeVariant": 'primary' | 'secondary';
/**
* Reinitializes the component.
*/
"reinitialize": () => Promise<void>;
/**
* Selects a Tab based on tabindex, will not select a disabled Tab.
*/
"selectTab": (tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>;
/**
* Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
*/
"selectedIndex"?: number;
/**
* Defines aria-label on left scroll button
* @default 'Scroll left'
*/
"tdsScrollLeftAriaLabel": string;
/**
* Defines aria-label on right scroll button
* @default 'Scroll right'
*/
"tdsScrollRightAriaLabel": string;
}
interface TdsLink {
/**
* Disables the Link
* @default false
*/
"disabled": boolean;
/**
* Displays the Link as a standalone component. Not part of a paragraph.
* @default false
*/
"standalone": boolean;
/**
* Displays the Link with an underline.
* @default true
*/
"underline": boolean;
}
interface TdsMessage {
/**
* Header text for the component.
*/
"header"?: string;
/**
* Minimal Message styling.
* @default false
*/
"minimal": boolean;
/**
* Variant of the component, based on current mode.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* Removes the icon in the Message.
* @default false
*/
"noIcon": boolean;
/**
* Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages.
* @default 'dialog'
*/
"tdsAlertDialog": 'alertdialog' | 'dialog';
/**
* Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles.
*/
"tdsAriaLabel"?: string;
/**
* Variant of Message.
* @default 'information'
*/
"variant": 'information' | 'error' | 'warning' | 'success';
}
interface TdsModal {
/**
* Changes the position behaviour of the actions slot.
* @default 'static'
*/
"actionsPosition": 'sticky' | 'static';
/**
* Cleans up event listeners and other resources.
*/
"cleanupModal": () => Promise<void>;
/**
* Shows or hides the close [X] button.
* @default true
*/
"closable": boolean;
/**
* Closes the Modal.
*/
"closeModal": () => Promise<void>;
/**
* Sets the header of the Modal.
*/
"header"?: string;
/**
* Initializes or re-initializes the modal, setting up event listeners.
*/
"initializeModal": () => Promise<void>;
/**
* Returns the current open state of the Modal.
*/
"isOpen": () => Promise<boolean>;
/**
* Disables closing Modal on clicking on overlay area.
* @default false
*/
"prevent": boolean;
/**
* Element that will show the Modal (takes priority over selector)
*/
"referenceEl"?: HTMLElement | null;
/**
* CSS selector for the element that will show the Modal.
*/
"selector"?: string;
/**
* Controls whether the Modal is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside.
*/
"show"?: boolean;
/**
* Shows the Modal.
*/
"showModal": () => Promise<void>;
/**
* Size of Modal
* @default 'md'
*/
"size": 'xs' | 'sm' | 'md' | 'lg';
/**
* Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages.
* @default 'dialog'
*/
"tdsAlertDialog": 'alertdialog' | 'dialog';
}
interface TdsNavigationTab {
/**
* Disables the Tab.
* @default false
*/
"disabled": boolean;
"setSelected": (selected: boolean) => Promise<void>;
}
interface TdsNavigationTabs {
/**
* Sets the default selected Tab.
* @default 0
*/
"defaultSelectedIndex": number;
/**
* Custom left padding value for the wrapper element.
* @default 32
*/
"leftPadding": number;
/**
* Variant of the Tabs, primary= on white, secondary= on grey50
* @default 'primary'
*/
"modeVariant": 'primary' | 'secondary';
/**
* Reinitializes the component.
*/
"reinitialize": () => Promise<void>;
/**
* Sets the passed tabindex as the selected Tab.
*/
"selectTab": (tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>;
/**
* Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
*/
"selectedIndex"?: number;
/**
* Defines aria-label on left scroll button
* @default 'Scroll left'
*/
"tdsScrollLeftAriaLabel": string;
/**
* Defines aria-label on right scroll button
* @default 'Scroll right'
*/
"tdsScrollRightAriaLabel": string;
}
interface TdsPopoverCanvas {
/**
* Whether the popover should animate when being opened/closed or not
* @default 'none'
*/
"animation": 'none' | 'fade' | string;
/**
* Property for closing popover programmatically
*/
"close": () => Promise<void>;
/**
* Decides if the component should be visible from the start.
* @default false
*/
"defaultShow": boolean;
/**
* Mode variant of the component, based on current mode.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/
* @default []
*/
"modifiers": object[];
/**
* Sets the offset distance
* @default 8
*/
"offsetDistance": number;
/**
* Sets the offset skidding
* @default 0
*/
"offsetSkidding": number;
/**
* Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement
* @default 'auto'
*/
"placement": Placement;
/**
* Element that will trigger the Popover (takes priority over selector)
*/
"referenceEl"?: HTMLElement | null;
/**
* The CSS-selector for an element that will trigger the Popover
*/
"selector"?: string;
/**
* Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
* @default null
*/
"show": boolean | null;
/**
* Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages.
* @default 'dialog'
*/
"tdsAlertDialog": 'alertdialog' | 'dialog';
}
interface TdsPopoverCore {
/**
* Whether the popover should animate when being opened/closed or not
* @default 'none'
*/
"animation": 'none' | 'fade' | string;
/**
* Decides if the popover should hide automatically. Alternatevly it can be hidden externally based on emitted events.
* @default true
*/
"autoHide": boolean;
/**
* Property for closing popover programmatically
*/
"close": () => Promise<void>;
/**
* Decides if the component should be visible from the start.
* @default false
*/
"defaultShow": boolean;
/**
* Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/
* @default []
*/
"modifiers": object[];
/**
* Sets the offset distance
* @default 8
*/
"offsetDistance": number;
/**
* Sets the offset skidding
* @default 0
*/
"offsetSkidding": number;
/**
* Decides the placement of the Popover Menu
* @default 'auto'
*/
"placement": Placement;
/**
* Element that will trigger the pop-over (takes priority over selector)
*/
"referenceEl"?: HTMLElement | null;
/**
* The CSS-selector for an element that will trigger the pop-over
*/
"selector"?: string;
/**
* Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
* @default null
*/
"show": boolean | null;
/**
* What triggers the popover to show
* @default 'click'
*/
"trigger": 'click' | 'hover' | 'hover-popover';
}
interface TdsPopoverMenu {
/**
* Whether the popover should animate when being opened/closed or not
* @default 'none'
*/
"animation": 'none' | 'fade' | string;
/**
* Property for closing popover programmatically
*/
"close": () => Promise<void>;
/**
* Decides if the component should be visible from the start.
* @default false
*/
"defaultShow": boolean;
/**
* If true this unsets the width (160px) of the Popover Menu
* @default false
*/
"fluidWidth": boolean;
/**
* Mode variant of the component, based on current mode.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* Sets the offset distance
* @default 8
*/
"offsetDistance": number;
/**
* Sets the offset skidding
* @default 0
*/
"offsetSkidding": number;
/**
* Decides the placement of the Popover Menu
* @default 'auto'
*/
"placement": Placement;
/**
* Element that will trigger the pop-over (takes priority over selector)
*/
"referenceEl"?: HTMLElement | null;
/**
* The CSS-selector for an element that will trigger the pop-over
*/
"selector"?: string;
/**
* Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
* @default null
*/
"show": boolean | null;
}
interface TdsPopoverMenuItem {
/**
* Disables the Popover Menu Item
* @default false
*/
"disabled": boolean;
}
interface TdsRadioButton {
/**
* Decides if the Radio Button is checked or not.
* @default false
*/
"checked": boolean;
/**
* Decides if the Radio Button is disabled or not.
* @default false
*/
"disabled": boolean;
/**
* Method to programmatically focus the radio button element
*/
"focusElement": () => Promise<void>;
/**
* Name of Radio Button, used for reference.
*/
"name"?: string;
/**
* Unique Radio Button identifier.
* @default generateUniqueId()
*/
"radioId": string;
/**
* Decides if the Radio Button is required or not.
* @default false
*/
"required": boolean;
/**
* Provides an accessible name for the component
*/
"tdsAriaLabel"?: string;
/**
* Provides a tabindex used when radio buttons are grouped
*/
"tdsTabIndex"?: number;
/**
* Value of input.
*/
"value"?: string;
}
interface TdsSideMenu {
/**
* If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed. NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event.
* @default false
*/
"collapsed": boolean;
/**
* Applicable only for mobile. If the Side Menu is open or not.
* @default false
*/
"open": boolean;
/**
* Applicable only for desktop. If the Side Menu should always be shown.
* @default false
*/
"persistent": boolean;
}
interface TdsSideMenuCloseButton {
}
interface TdsSideMenuCollapseButton {
}
interface TdsSideMenuDropdown {
/**
* The label of the button that opens the dropdown. This is an alternative to the label slot.
*/
"buttonLabel"?: string;
/**
* If the dropdown should be open from the start.
* @default false
*/
"defaultOpen": boolean;
/**
* Toggle open state programmatically
* @default false
*/
"open": boolean;
/**
* If the button that opens the dropdown should appear selected.
* @default false
*/
"selected": boolean;
}
interface TdsSideMenuDropdownList {
}
interface TdsSideMenuDropdownListItem {
/**
* If the item should appear selected.
* @default false
*/
"selected": boolean;
}
interface TdsSideMenuItem {
/**
* If the item should appear active. Can be used when the item is triggering a dropdown, and the dropdown is open, for example.
* @default false
*/
"active": boolean;
/**
* If the item should appear selected.
* @default false
*/
"selected": boolean;
}
interface TdsSideMenuOverlay {
}
interface TdsSideMenuUser {
/**
* The heading text.
*/
"heading": string;
/**
* The image alt text.
*/
"imgAlt"?: string;
/**
* The image source.
*/
"imgSrc"?: string;
/**
* The subheading text.
*/
"subheading"?: string;
}
interface TdsSideMenuUserImage {
/**
* The image alt text.
*/
"alt"?: string;
/**
* The image source.
*/
"src"?: string;
}
interface TdsSideMenuUserLabel {
/**
* The heading text.
*/
"heading": string;
/**
* The subheading text.
*/
"subheading"?: string;
}
interface TdsSlider {
/**
* Decide to show the controls or not
* @default false
*/
"controls": boolean;
/**
* Sets the disabled state for the whole component
* @default false
*/
"disabled": boolean;
/**
* Decide to show the input field or not
* @default false
*/
"input": boolean;
/**
* Text for label
* @default ''
*/
"label": string;
/**
* Maximum value
* @default '100'
*/
"max": string;
/**
* Minimum value
* @default '0'
*/
"min": string;
/**
* Name property (will be inherited by the native slider component)
* @default ''
*/
"name": string;
/**
* Sets the read only state for the whole component
* @default false
*/
"readOnly": boolean;
/**
* Public method to re-initialise the slider if some configuration props are changed
*/
"reset": () => Promise<void>;
/**
* Decide to show numbers above the tick markers or not
* @default false
*/
"showTickNumbers": boolean;
/**
* ID for the Slider's input element, randomly generated if not specified.
* @default generateUniqueId()
*/
"sliderId": string;
/**
* Snap to the tick's grid
* @default false
*/
"snap": boolean;
/**
* Defines how much to increment/decrement the value when using controls
* @default '1'
*/
"step": string;
/**
* Sets the aria-label for the slider control.
* @default ''
*/
"tdsAriaLabel": string;
/**
* Sets the read only aria label for the input field
* @default ''
*/
"tdsReadOnlyAriaLabel": string;
/**
* Sets the size of the thumb
* @default 'lg'
*/
"thumbSize": 'sm' | 'lg';
/**
* Number of tick markers (tick for min- and max-value will be added automatically)
* @default '0'
*/
"ticks": string;
/**
* Decide to show the tooltip or not
* @default false
*/
"tooltip": boolean;
/**
* Initial value
* @default '0'
*/
"value": string;
}
interface TdsSpinner {
/**
* Size of the Spinner
* @default 'lg'
*/
"size": 'xs' | 'sm' | 'md' | 'lg';
/**
* Variant of the Spinner
* @default 'standard'
*/
"variant": 'standard' | 'inverted';
}
interface TdsStep {
/**
* Index of the step. Will be displayed in the step if the state is current/upcoming.
*/
"index"?: string;
/**
* State of the Step
* @default 'upcoming'
*/
"state": 'current' | 'error' | 'success' | 'upcoming';
"tdsAriaCurrent"?: string;
}
interface TdsStepper {
/**
* Hides the label for the child components if true.
* @default false
*/
"hideLabels": boolean;
/**
* Text position, only available on a direction: horizontal
* @default 'below'
*/
"labelPosition": 'aside' | 'below';
/**
* The orientation the Steps
* @default 'horizontal'
*/
"orientation": 'horizontal' | 'vertical';
/**
* Size of the component and it's children.
* @default 'lg'
*/
"size": 'sm' | 'lg';
/**
* ID used for internal Stepper functionality and events, must be unique. **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper, as the default ID is random and will be different every time.
* @default generateUniqueId()
*/
"stepperId": string;
/**
* Label for the stepper component, for screen reader users
* @default 'Progress steps'
*/
"tdsAriaLabel": string;
}
interface TdsTable {
/**
* Enables style where Table toolbar, rows and footer are less high
* @default false
*/
"compactDesign": boolean;
/**
* Enables extended row feature of Table
* @default false
*/
"expandableRows": boolean;
/**
* Returns all selected rows data.
*/
"getSelectedRows": () => Promise<{ cellKey: string; cellValue: string | number; }[][]>;
/**
* Width of the table, used as the constraint for horizontal scrolling. **NOTE**: this will disable usage of the responsive flag
* @default null
*/
"horizontalScrollWidth"?: string | null;
/**
* Variant of the component, based on current mode.
* @default null
*/
"modeVariant": 'primary' | 'secondary' | null;
/**
* Enables multiselect feature of Table
* @default false
*/
"multiselect": boolean;
/**
* Enables to customize width on Table columns
*/
"noMinWidth"?: boolean;
/**
* Enables Table to take 100% available width with equal spacing of columns