@scania/tegel
Version:
Tegel Design System
1,632 lines • 202 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 { 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 { 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.
*/
"hideLastBorder": boolean;
/**
* Set the variant of the Accordion.
*/
"modeVariant": 'primary' | 'secondary';
}
interface TdsAccordionItem {
/**
* Specifies the heading level (aria-level) for accessibility. Only accepts values between 1 and 6.
*/
"ariaLevelValue": '1' | '2' | '3' | '4' | '5' | '6';
/**
* Method for collapsing the Accordion Item
*/
"collapse": () => Promise<void>;
/**
* Disabled option in `boolean`.
*/
"disabled": boolean;
/**
* Method for expanding the Accordion Item
*/
"expand": () => Promise<void>;
/**
* Changes position of the expand icon.
*/
"expandIconPosition": 'start' | 'end';
/**
* Set to true to expand panel open
*/
"expanded": boolean;
/**
* The header gives users the context about the additional information available inside the panel
*/
"header": string;
/**
* Returns the expanded state of the Accordion Item.
*/
"isExpanded": () => Promise<boolean>;
/**
* When true, 16px on right padding instead of 64px
*/
"paddingReset": boolean;
/**
* Method for toggling the expanded state of the Accordion Item.
*/
"toggleAccordionItem": () => Promise<void>;
}
interface TdsBadge {
/**
* Changes visibility of Badge
*/
"hidden": boolean;
/**
* Sets component size.
*/
"size": 'lg' | 'sm';
/**
* Defines aria-live attribute
*/
"tdsAriaLive": 'off' | 'polite' | 'assertive';
/**
* Value shown in Badge
*/
"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.
*/
"bannerId": string;
/**
* Header text.
*/
"header": string;
/**
* Hides the Banner
*/
"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.
*/
"roleType": 'banner' | 'region' | 'alert';
/**
* Shows the Banner
*/
"showBanner": () => Promise<void>;
/**
* Subheader text.
*/
"subheader": string;
/**
* Variant of Banner
*/
"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.
*/
"componentTag": | 'section'
| 'div'
| 'article'
| 'aside'
| 'header'
| 'footer'
| 'nav'
| 'main';
/**
* Mode variant of the component, based on current mode.
*/
"modeVariant": 'primary' | 'secondary';
}
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": any;
/**
* Value that will be presented as text inside a cell
*/
"cellValue": string | number;
/**
* Disables internal padding. Useful when passing other components to cell.
*/
"disablePadding": boolean;
/**
* Setting for text align, default value "left". Other accepted values are "left", "start", "right", "end" or "center".
*/
"textAlign": 'left' | 'start' | 'right' | 'end' | 'center';
}
interface TdsBreadcrumb {
/**
* Boolean for the current link
*/
"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.
*/
"animation": 'none' | 'fade';
/**
* Control for disabled state of a component
*/
"disabled": boolean;
/**
* When enabled, the Button takes 100% width
*/
"fullbleed": boolean;
/**
* Set the mode variant of the Button.
*/
"modeVariant": 'primary' | 'secondary';
/**
* The name attribute allows for different ways of accessing the button element
*/
"name": string;
/**
* Size of a Button
*/
"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
*/
"type": 'button' | 'submit' | 'reset';
/**
* The value attribute can be used when handling a form submission
*/
"value": string;
/**
* Variation of Button's design
*/
"variant": 'primary' | 'secondary' | 'ghost' | 'danger';
}
interface TdsCard {
/**
* Divider for the body
*/
"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.
*/
"cardId": string;
/**
* Makes the Card clickable.
*/
"clickable": boolean;
/**
* Text in the header
*/
"header": string;
/**
* Placement of the header
*/
"imagePlacement": 'above-header' | 'below-header';
/**
* Variant of the Card based on the theme used.
*/
"modeVariant": 'primary' | 'secondary';
"stretch": boolean;
/**
* Subheader text in the header
*/
"subheader": string;
}
interface TdsCheckbox {
/**
* ID for the Checkbox's input element. Randomly generated if not specified.
*/
"checkboxId": string;
/**
* Sets the Checkbox as checked
*/
"checked": boolean;
/**
* Sets the Checkbox in a disabled state
*/
"disabled": boolean;
/**
* Method to programmatically focus the checkbox element
*/
"focusElement": () => Promise<void>;
/**
* Sets the Checkbox as indeterminate
*/
"indeterminate": boolean;
/**
* Name for the Checkbox's input element.
*/
"name": string;
/**
* Make the Checkbox required
*/
"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.
*/
"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.
*/
"chipId": string;
/**
* Sets the Chip in a disabled state
*/
"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
*/
"size": 'sm' | 'lg';
/**
* Value to be used for the aria-label attribute
*/
"tdsAriaLabel": string;
/**
* Type of Chip, depends on usage
*/
"type": 'button' | 'radio' | 'checkbox';
/**
* Value of input. Valid only for type checkbox and radio.
*/
"value": string;
}
interface TdsCoreHeaderItem {
}
interface TdsDatetime {
/**
* Autofocus for input
*/
"autofocus": boolean;
/**
* Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www Format for date-time: YY-MM-DDTHH-MM
*/
"defaultValue": string | 'none';
/**
* Set input in disabled state
*/
"disabled": boolean;
/**
* Method to programmatically focus the datetime element
*/
"focusElement": () => Promise<void>;
/**
* Helper text for the component
*/
"helper": string;
/**
* Label text for the component
*/
"label": string;
/**
* Position of the label
*/
"labelPosition": 'inside' | 'outside' | 'no-label';
/**
* Sets max value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"
*/
"max": string;
/**
* Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"
*/
"min": string;
/**
* Set the variant of the Datetime component.
*/
"modeVariant": 'primary' | 'secondary';
/**
* Name property. Uses a unique ID as fallback if not specified.
*/
"name": string;
/**
* Resets min width rule
*/
"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
*/
"size": 'sm' | 'md' | 'lg';
/**
* Error state of input
*/
"state": string;
/**
* Value for the aria-label attribute
*/
"tdsAriaLabel": string;
/**
* Sets an input type
*/
"type": 'datetime-local' | 'date' | 'month' | 'week' | 'time';
/**
* Value of the input text
*/
"value": string;
}
interface TdsDivider {
/**
* Orientation of the Divider, horizontal if not specified.
*/
"orientation": 'horizontal' | 'vertical';
/**
* Variant of the Divider, subtle if not specified.
*/
"variant": 'discrete' | 'subtle' | 'soft' | 'defined' | 'dark-blue';
}
interface TdsDropdown {
"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
*/
"disabled": boolean;
/**
* Sets the Dropdown in an error state
*/
"error": boolean;
/**
* Enables filtration in the Dropdown.
*/
"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.
*/
"modeVariant": 'primary' | 'secondary';
/**
* Enables multiselect in the Dropdown.
*/
"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.
*/
"noResultText"?: string;
/**
* Normalizes input text for fuzzier search
*/
"normalizeText": boolean;
/**
* The direction the Dropdown should open, auto if not specified.
*/
"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; label: string; }[]>;
/**
* The size of the Dropdown.
*/
"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.
*/
"value": string | number | (string | number)[];
}
interface TdsDropdownOption {
/**
* Sets the option as disabled.
*/
"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.
*/
"disabled": boolean;
"setSelected": (selected: boolean) => Promise<void>;
"setTabWidth": (width: number) => Promise<void>;
}
interface TdsFolderTabs {
/**
* Sets the default selected Tab.
*/
"defaultSelectedIndex": number;
/**
* Variant of the Tabs, primary= on white, secondary= on grey50
*/
"modeVariant": 'primary' | 'secondary';
/**
* Reinitializes the component.
*/
"reinitialize": () => Promise<void>;
/**
* Sets the passed tabindex as the selected Tab.
*/
"selectTab": (tabIndex: number) => Promise<{ selectedTabIndex: number; }>;
/**
* 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
*/
"tdsScrollLeftAriaLabel": string;
/**
* Defines aria-label on right scroll button
*/
"tdsScrollRightAriaLabel": string;
}
interface TdsFooter {
/**
* Mode variant of the component, based on current mode.
*/
"modeVariant": 'primary' | 'secondary';
}
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;
/**
* 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.
*/
"disablePadding": boolean;
/**
* Enables sorting on that column
*/
"sortable": boolean;
/**
* Aria label for the sort button, providing an accessible description
*/
"tdsAriaLabelSortButton"?: string;
/**
* Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end".
*/
"textAlign": 'left' | 'start' | 'right' | 'end' | 'center';
}
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.
*/
"noDropdownIcon": boolean;
/**
* If the button that opens the dropdown should appear selected.
*/
"selected": boolean;
/**
* Value to be used by the aria-label attribute
*/
"tdsAriaLabel": string;
}
interface TdsHeaderDropdownList {
/**
* The size of the component.
*/
"size": 'lg' | 'md';
}
interface TdsHeaderDropdownListItem {
/**
* If the link should appear selected.
*/
"selected": boolean;
/**
* The size of the component.
*/
"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.
*/
"active": boolean;
/**
* If the button should appear selected.
*/
"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.
*/
"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
*/
"name": IconNames;
/**
* Pass a size of icon as a string, for example, 32px, 1rem, 4em...
*/
"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
*/
"tdsAriaHidden": boolean;
}
interface TdsInlineTab {
/**
* Disables the Tab.
*/
"disabled": boolean;
"setSelected": (selected: boolean) => Promise<void>;
}
interface TdsInlineTabs {
/**
* Sets the default selected Tab.
*/
"defaultSelectedIndex": number;
/**
* Custom left padding value for the wrapper element.
*/
"leftPadding": number;
/**
* Variant of the Tabs, primary= on white, secondary= on grey50
*/
"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; }>;
/**
* 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
*/
"tdsScrollLeftAriaLabel": string;
/**
* Defines aria-label on right scroll button
*/
"tdsScrollRightAriaLabel": string;
}
interface TdsLink {
/**
* Disables the Link
*/
"disabled": boolean;
/**
* Displays the Link as a standalone component. Not part of a paragraph.
*/
"standalone": boolean;
/**
* Displays the Link with an underline.
*/
"underline": boolean;
}
interface TdsMessage {
/**
* Header text for the component.
*/
"header": string;
/**
* Minimal Message styling.
*/
"minimal": boolean;
/**
* Variant of the component, based on current mode.
*/
"modeVariant": 'primary' | 'secondary';
/**
* Removes the icon in the Message.
*/
"noIcon": boolean;
/**
* Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages.
*/
"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.
*/
"variant": 'information' | 'error' | 'warning' | 'success';
}
interface TdsModal {
/**
* Changes the position behaviour of the actions slot.
*/
"actionsPosition": 'sticky' | 'static';
/**
* Cleans up event listeners and other resources.
*/
"cleanupModal": () => Promise<void>;
/**
* Shows or hides the close [X] button.
*/
"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.
*/
"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
*/
"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.
*/
"tdsAlertDialog": 'alertdialog' | 'dialog';
}
interface TdsNavigationTab {
/**
* Disables the Tab.
*/
"disabled": boolean;
"setSelected": (selected: boolean) => Promise<void>;
}
interface TdsNavigationTabs {
/**
* Sets the default selected Tab.
*/
"defaultSelectedIndex": number;
/**
* Custom left padding value for the wrapper element.
*/
"leftPadding": number;
/**
* Variant of the Tabs, primary= on white, secondary= on grey50
*/
"modeVariant": 'primary' | 'secondary';
/**
* Reinitializes the component.
*/
"reinitialize": () => Promise<void>;
/**
* Sets the passed tabindex as the selected Tab.
*/
"selectTab": (tabIndex: number) => Promise<{ selectedTabIndex: number; }>;
/**
* 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
*/
"tdsScrollLeftAriaLabel": string;
/**
* Defines aria-label on right scroll button
*/
"tdsScrollRightAriaLabel": string;
}
interface TdsPopoverCanvas {
/**
* Whether the popover should animate when being opened/closed or not
*/
"animation": 'none' | 'fade' | string;
/**
* Property for closing popover programmatically
*/
"close": () => Promise<void>;
/**
* Decides if the component should be visible from the start.
*/
"defaultShow": boolean;
/**
* Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/
*/
"modifiers": Object[];
/**
* Sets the offset distance
*/
"offsetDistance": number;
/**
* Sets the offset skidding
*/
"offsetSkidding": number;
/**
* Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement
*/
"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.
*/
"show": boolean;
/**
* Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages.
*/
"tdsAlertDialog": 'alertdialog' | 'dialog';
}
interface TdsPopoverCore {
/**
* Whether the popover should animate when being opened/closed or not
*/
"animation": 'none' | 'fade' | string;
/**
* Decides if the popover should hide automatically. Alternatevly it can be hidden externally based on emitted events.
*/
"autoHide": boolean;
/**
* Property for closing popover programmatically
*/
"close": () => Promise<void>;
/**
* Decides if the component should be visible from the start.
*/
"defaultShow": boolean;
/**
* Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/
*/
"modifiers": Object[];
/**
* Sets the offset distance
*/
"offsetDistance": number;
/**
* Sets the offset skidding
*/
"offsetSkidding": number;
/**
* Decides the placement of the Popover Menu
*/
"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.
*/
"show": boolean;
/**
* What triggers the popover to show
*/
"trigger": 'click' | 'hover' | 'hover-popover';
}
interface TdsPopoverMenu {
/**
* Whether the popover should animate when being opened/closed or not
*/
"animation": 'none' | 'fade' | string;
/**
* Property for closing popover programmatically
*/
"close": () => Promise<void>;
/**
* Decides if the component should be visible from the start.
*/
"defaultShow": boolean;
/**
* If true this unsets the width (160px) of the Popover Menu
*/
"fluidWidth": boolean;
/**
* Sets the offset distance
*/
"offsetDistance": number;
/**
* Sets the offset skidding
*/
"offsetSkidding": number;
/**
* Decides the placement of the Popover Menu
*/
"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.
*/
"show": boolean;
}
interface TdsPopoverMenuItem {
/**
* Disables the Popover Menu Item
*/
"disabled": boolean;
}
interface TdsRadioButton {
/**
* Decides if the Radio Button is checked or not.
*/
"checked": boolean;
/**
* Decides if the Radio Button is disabled or not.
*/
"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.
*/
"radioId": string;
/**
* Decides if the Radio Button is required or not.
*/
"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.
*/
"collapsed": boolean;
/**
* Applicable only for mobile. If the Side Menu is open or not.
*/
"open": boolean;
/**
* Applicable only for desktop. If the Side Menu should always be shown.
*/
"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.
*/
"defaultOpen": boolean;
/**
* Toggle open state programmatically
*/
"open": boolean;
/**
* If the button that opens the dropdown should appear selected.
*/
"selected": boolean;
}
interface TdsSideMenuDropdownList {
}
interface TdsSideMenuDropdownListItem {
/**
* If the item should appear selected.
*/
"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.
*/
"active": boolean;
/**
* If the item should appear selected.
*/
"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
*/
"controls": boolean;
/**
* Sets the disabled state for the whole component
*/
"disabled": boolean;
/**
* Decide to show the input field or not
*/
"input": boolean;
/**
* Text for label
*/
"label": string;
/**
* Maximum value
*/
"max": string;
/**
* Minimum value
*/
"min": string;
/**
* Name property (will be inherited by the native slider component)
*/
"name": string;
/**
* Sets the read only state for the whole component
*/
"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
*/
"showTickNumbers": boolean;
/**
* ID for the Slider's input element, randomly generated if not specified.
*/
"sliderId": string;
/**
* Snap to the tick's grid
*/
"snap": boolean;
/**
* Defines how much to increment/decrement the value when using controls
*/
"step": string;
/**
* Sets the aria-label for the slider control.
*/
"tdsAriaLabel": string;
/**
* Sets the read only aria label for the input field
*/
"tdsReadOnlyAriaLabel": string;
/**
* Sets the size of the thumb
*/
"thumbSize": 'sm' | 'lg';
/**
* Number of tick markers (tick for min- and max-value will be added automatically)
*/
"ticks": string;
/**
* Decide to show the tooltip or not
*/
"tooltip": boolean;
/**
* Initial value
*/
"value": string;
}
interface TdsSpinner {
/**
* Size of the Spinner
*/
"size": 'xs' | 'sm' | 'md' | 'lg';
/**
* Variant of the Spinner
*/
"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
*/
"state": 'current' | 'error' | 'success' | 'upcoming';
"tdsAriaCurrent": string;
}
interface TdsStepper {
/**
* Hides the label for the child components if true.
*/
"hideLabels": boolean;
/**
* Text position, only available on a direction: horizontal
*/
"labelPosition": 'aside' | 'below';
/**
* The orientation the Steps
*/
"orientation": 'horizontal' | 'vertical';
/**
* Size of the component and it's children.
*/
"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.
*/
"stepperId": string;
/**
* Label for the stepper component, for screen reader users
*/
"tdsAriaLabel": string;
}
interface TdsTable {
/**
* Enables style where Table toolbar, rows and footer are less high
*/
"compactDesign": boolean;
/**
* Enables extended row feature of Table
*/
"expandableRows": boolean;
/**
* Returns all selected rows data.
*/
"getSelectedRows": () => Promise<any[]>;
/**
* Width of the table, used as the constraint for horizontal scrolling. **NOTE**: this will disable usage of the responsive flag
*/
"horizontalScrollWidth"?: string;
/**
* Variant of the component, based on current mode.
*/
"modeVariant": 'primary' | 'secondary';
/**
* Enables multiselect feature of Table
*/
"multiselect": boolean;
/**
* Enables to customize width on Table columns
*/
"noMinWidth": boolean;
/**
* Enables Table to take 100% available width with equal spacing of columns
*/
"responsive": boolean;
/**
* ID used for internal Table functionality and events, must be unique. **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table, as the default ID is random and will be different every time.
*/
"tableId": string;
/**
* Enables style with vertical dividers between columns
*/
"verticalDividers": boolean;
/**
* Enables zebra stripe mode on the table rows or columns.
*/
"zebraMode": | 'rows-odd'
| 'rows-even'
| 'columns-odd'
| 'columns-even'
| 'none';
}
interface TdsTableBody {
}
interface TdsTableBodyInputWrapper {
/**
* Controls if the edit icon is shown
*/
"showIcon": boolean;
}
interface TdsTableBodyRow {
/**
* Makes the row clickable and tabbable for accessibility purposes.
*/
"clickable": boolean;
/**
* Marks the row as disabled, used for multiselect table.
*/
"disabled"?: boolean;
/**
* Marks the row as selected, used for multiselect table.
*/
"selected": boolean;
}
interface TdsTableBodyRowExpandable {
/**
* Enables auto-collapse of other expandable rows when one row is expanded
*/
"autoCollapse": boolean;
/**
* In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too
*/
"colSpan": number;
/**
* Method to collapse table row
*/
"collapse": () => Promise<void>;
/**
* Method to expand table row
*/
"expand": () => Promise<void>;
/**
* Sets isExpanded state to true or false externally
*/
"expanded": boolean;
/**
* Controls the overflow behavior of the expandable row content
*/
"overflow": 'auto' | 'hidden' | 'visible';
/**
* ID for the table row. Randomly generated if not specified.
*/
"rowId": string;
/**
* Aria label for the expand button, providing an accessible description
*/
"tdsAriaLabelExpandButton": string;
}
interface TdsTableFooter {
/**
* <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails.
*/
"cols": number;
/**
* Sets the number of pages.
*/
"pages": number;
/**
* Enable pagination and show pagination controls
*/
"pagination": boolean;
/**
* Sets the pagination number.
*/
"paginationValue": number;
/**
* Set available rows per page values
*/
"rowsPerPageValues": number[];
/**
* Enable rows per page dropdown
*/
"rowsperpage": boolean;
}
interface TdsTableHeader {
/**
* @deprecated Deprecated, use selected instead.
*/
"allSelected": boolean;
/**
* Prop for controlling the enabled/disabled state of the "All selected"-checkbox.
*/
"disabled"?: boolean;
/**
* Prop for controlling the indeterminate state of the "All selected"-checkbox.
*/
"indeterminate": boolean;
/**
* Prop for controlling the checked/unchecked state of the "All selected"-checkbox.
*/
"selected": boolean;
}
interface TdsTableHeaderInputWrapper {
"compactDesign": boolean;
/**
* Controls if the search icon is shown
*/
"showIcon": boolean;
}
interface TdsTableToolbar {
/**
* Enables preview of searchbar
*/
"filter": boolean;
/**
* Adds title to the Table
*/
"tableTitle": string;
/**
* Aria label for the search input, providing an accessible description
*/
"tdsSearchAriaLabel": string;
}
interface TdsTextField {
/**
* Autofocus for input
*/
"autofocus": boolean;
/**
* Set input in disabled state
*/
"disabled": boolean;
/**
* Method to handle focus
*/
"focusElement": () => Promise<void>;
/**
* Helper text
*/
"helper": string;
/**
* Hides the read-only icon in the Text Field. Requires Read Only to be enabled.
*/
"hideReadOnlyIcon": boolean;
/**
* Label text
*/
"label": string;
/**
* Position of the label for the Text Field.
*/
"labelPosition": 'inside' | 'outside' | 'no-label';
/**
* Max allowed value for input type number
*/
"max": string | number;
/**
* Max length of input
*/
"maxLength": number;
/**
* Min allowed value for input type number
*/
"min": string | number;
/**
* Mode variant of the Text Field
*/
"modeVariant": 'primary' | 'secondary';
/**
* Name property
*/
"name": string;
/**
* Unset minimum width of 208px.
*/
"noMinWidth": boolean;
/**
* Placeholder text
*/
"placeholder": string;
/**
* Set input in readonly state
*/
"readOnly": boolean;
/**
* Size of the input
*/
"size": 'sm' | 'md' | 'lg';
/**
* Error state of input
*/
"state": 'error' | 'success' | 'default';
/**
* Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true.
*/
"tdsAriaLabel": string;
/**
* Which input type, text, password or similar
*/
"type": 'text' | 'password' | 'number';
/**
* Value of the input text
*/
"value": string;
}
interface TdsTextarea {
/**
* Control of autofocus
*/
"autofocus": boolean;
/**
* Textarea cols attribute
*/
"cols": number;
/**
* Set input in disabled state
*/
"disabled": boolean;
/**
* Method to programmatically focus the textarea element
*/
"focusElement": () => Promise<void>;
/**
* Helper text
*/
"helper": string;
/**
* Hide the readonly icon
*/
"hideReadOnlyIcon": boolean;
/**
* Label text
*/
"label": string;
/**
* Position of the label for the Textarea.
*/
"labelPosition": 'inside' | 'outside' | 'no-label';
/**
* Max length of input
*/
"maxLength": number;
/**
* Mode variant of the Textarea
*/
"modeVarian