diff --git a/docker-compose.yml b/docker-compose.yml index d5ed9b1d..7d7948b4 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,5 +1,3 @@ -version: '3.8' - services: storybook: healthcheck: @@ -30,4 +28,4 @@ services: depends_on: storybook: condition: service_healthy - command: npx test-storybook --verbose --url http://storybook.local:6006 + command: npx test-storybook --verbose --url http://storybook.local:6006 \ No newline at end of file diff --git a/packages/core-components/src/components.d.ts b/packages/core-components/src/components.d.ts index f55defe9..4212674d 100644 --- a/packages/core-components/src/components.d.ts +++ b/packages/core-components/src/components.d.ts @@ -4,5170 +4,3679 @@ * 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/core/internal'; -import { - BreadCrumbChangeEventDetail, - ColumnSortChangeEventDetail, - EscapePressed, - NextMonth, - PageChangeEventDetail, - PreviousMonth, - TabChangeEventDetail, - ToggleChipEventDetail, - ToggleSwitchEventDetail, -} from './utils/interfaces/interaction.interface'; -import { - CalendarEventDetail, - CheckboxEventDetail, - ChipComponentEventDetail, - DateSelectedEventDetail, - InputChangeEvent, - InputClear, - MultiSelectOptionEventDetail, - OptionSelectedEventDetail, - RadioEventDetail, - SearchClickEventDetail, - ToggleButtonEventDetail, -} from './utils/interfaces/form.interface'; -import { IconName } from './components/icon/types'; -import { IconName as IconName1 } from './components/icon-100/types'; -import { IconName as IconName2 } from './components/icon-50/types'; -import { BeforeCloseEventDetail } from './utils/interfaces/status.interface'; -import { - ContentAlignment, - TableAccordionRowTypes, - TableColourOptions, - TableRowgroupTypes, - TableSizes, - TableSortDirections, -} from './utils/types/table.types'; -import { CheckboxEventDetail as CheckboxEventDetail1 } from './components'; -import { TableAccordionSelectedEventDetail } from './utils/interfaces/content.interface'; -import { WizardStatus, WizardSteps } from './utils/types/wizard.types'; -export { - BreadCrumbChangeEventDetail, - ColumnSortChangeEventDetail, - EscapePressed, - NextMonth, - PageChangeEventDetail, - PreviousMonth, - TabChangeEventDetail, - ToggleChipEventDetail, - ToggleSwitchEventDetail, -} from './utils/interfaces/interaction.interface'; -export { - CalendarEventDetail, - CheckboxEventDetail, - ChipComponentEventDetail, - DateSelectedEventDetail, - InputChangeEvent, - InputClear, - MultiSelectOptionEventDetail, - OptionSelectedEventDetail, - RadioEventDetail, - SearchClickEventDetail, - ToggleButtonEventDetail, -} from './utils/interfaces/form.interface'; -export { IconName } from './components/icon/types'; -export { IconName as IconName1 } from './components/icon-100/types'; -export { IconName as IconName2 } from './components/icon-50/types'; -export { BeforeCloseEventDetail } from './utils/interfaces/status.interface'; -export { - ContentAlignment, - TableAccordionRowTypes, - TableColourOptions, - TableRowgroupTypes, - TableSizes, - TableSortDirections, -} from './utils/types/table.types'; -export { CheckboxEventDetail as CheckboxEventDetail1 } from './components'; -export { TableAccordionSelectedEventDetail } from './utils/interfaces/content.interface'; -export { WizardStatus, WizardSteps } from './utils/types/wizard.types'; +import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; +import { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, EscapePressed, NextMonth, PageChangeEventDetail, PreviousMonth, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface"; +import { CalendarEventDetail, CheckboxEventDetail, ChipComponentEventDetail, DateSelectedEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface"; +import { IconName } from "./components/icon/types"; +import { IconName as IconName1 } from "./components/icon-100/types"; +import { IconName as IconName2 } from "./components/icon-50/types"; +import { BeforeCloseEventDetail } from "./utils/interfaces/status.interface"; +import { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types"; +import { CheckboxEventDetail as CheckboxEventDetail1 } from "./components"; +import { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface"; +import { WizardStatus, WizardSteps } from "./utils/types/wizard.types"; +export { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, EscapePressed, NextMonth, PageChangeEventDetail, PreviousMonth, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface"; +export { CalendarEventDetail, CheckboxEventDetail, ChipComponentEventDetail, DateSelectedEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface"; +export { IconName } from "./components/icon/types"; +export { IconName as IconName1 } from "./components/icon-100/types"; +export { IconName as IconName2 } from "./components/icon-50/types"; +export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface"; +export { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types"; +export { CheckboxEventDetail as CheckboxEventDetail1 } from "./components"; +export { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface"; +export { WizardStatus, WizardSteps } from "./utils/types/wizard.types"; export namespace Components { - interface B2bAlert { - /** - * Whether or not you want to use a custom icon. Per default, it is false. - */ - customIcon: boolean; - /** - * Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. - */ - hasCloseButton: boolean; - /** - * Whether the alert is currently open. Set to true to display the alert. - */ - opened: boolean; - /** - * The size of the alert. Per default it is large. If set to small, the alert will only have an icon. - */ - size: 'large' | 'small'; - /** - * The type of alert. Per default it is info. - */ - type: 'info' | 'success' | 'warning' | 'error'; - } - interface B2bAnchor { - /** - * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user. - */ - download: string; - /** - * The URL or URL fragment the anchor points to. This is required. - */ - href: string; - /** - * The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px. - */ - size: 'inherit' | '100'; - /** - * The target the URL will be opened into. The default is self. - */ - target: 'self' | 'blank' | 'parent' | 'top'; - } - interface B2bBreadcrumb {} - interface B2bBreadcrumbItem { - /** - * If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state. - */ - active: boolean; - /** - * If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked. - */ - href: string; - /** - * The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar. - */ - value: any; - } - interface B2bButton { - /** - * Whether the button is currently active. Set to true when using the button to signify a permanent active state - */ - active: boolean; - /** - * Whether the button is disabled. - */ - disabled: boolean; - /** - * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user. - */ - download?: string; - groupDisabled: boolean; - /** - * An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files - */ - href?: string; - /** - * Whether the button is currently loading. Set to true to hide text and display loading spinner instead - */ - loading: boolean; - /** - * Manually set focus to button element - */ - setFocus: () => Promise; - /** - * The size of the button, 100 is the default state - */ - size: '100' | '50'; - /** - * The target of the button if it should behave like an anchor. Per default it is self. - */ - target?: 'self' | 'blank'; - /** - * The button type. Matches native HTML types. The default type is 'button'. - */ - type: 'button' | 'submit' | 'reset'; - /** - * The button variant. If not specified, the button will be the secondary variant. - */ - variant: 'primary' | 'secondary'; - /** - * The width of the button. Per default, it will fit the content - */ - width: 'fit-content' | 'fit-container' | 'custom'; - } - interface B2bCalendar { - /** - * Whether the dates after the current date are disabled. By default, this is false. - */ - disableFutureDates: boolean; - /** - * Whether the previous dates from the current date are disabled. By default, this is true. - */ - disablePastDates: boolean; - /** - * Whether the dates that fall on the weekend are disabled. By default, this is false. - */ - disableWeekends: boolean; - /** - * Label for the calendar component. - */ - label: string; - } - interface B2bCalendarDays { - /** - * Internal whether the dates after the current date are disabled. By default, this is false. - */ - disableFutureDates: boolean; - /** - * Internal whether the dates previous to the current date are disabled. By default, this is true. - */ - disablePastDates: boolean; - /** - * Internal whether the weekends are disabled. By default, this is false. - */ - disableWeekends: boolean; - /** - * Internal selected day - */ - selectedDay: number; - /** - * Internal selected month - */ - selectedMonth: number; - /** - * Internal selected year - */ - selectedYear: number; - } - interface B2bCalendarDaysHeader {} - interface B2bCalendarHeader { - /** - * Internal selected month - */ - selectedMonth: number; - /** - * Internal selected year - */ - selectedYear: number; - } - interface B2bCard { - /** - * Disables the card. Per default, it is false - */ - disabled: boolean; - /** - * An optional href in case the card is used to redirect on click. - */ - href?: string; - /** - * The target of the card if used with an href. Blank per default. - */ - target?: 'blank' | 'self'; - } - interface B2bCheckbox { - /** - * Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked. - */ - checked: boolean; - /** - * Whether or not the checkbox is disabled. The default value is false. - */ - disabled: boolean; - /** - * The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles. - */ - error?: string; - groupDisabled: boolean; - /** - * The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint. - */ - hint?: string; - /** - * If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false. - */ - indeterminate: boolean; - /** - * Whether or not the checkbox is rendered with error styles. Defaults to false. - */ - invalid?: boolean; - /** - * The checkbox label. This attribute is required. - */ - label?: string; - /** - * The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name. - */ - name?: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - /** - * If true, renders a standalone inline checkbox with no label and hint/error. - */ - standalone: boolean; - /** - * The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group - */ - value?: any; - } - interface B2bCheckboxGroup { - /** - * The alignment of the checkbox group. Per default it is vertical - */ - alignment: 'vertical' | 'horizontal'; - /** - * Whether or not the checkbox group as a whole is disabled. Default state is false. - */ - disabled: boolean; - /** - * The checkbox group error message. Is displayed when invalid is set to true. - */ - error?: string; - /** - * The checkbox group hint text. - */ - hint?: string; - /** - * Whether or not the checkbox group as a whole is invalid. Set to true to display a group error. - */ - invalid: boolean; - /** - * The label for the checkbox group. This is optional. - */ - label: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - } - interface B2bChipComponent { - /** - * Whether the chip is disabled. - */ - disabled: boolean; - /** - * Whether or not the chip component has a close button. Per default it is true. - */ - hasCloseButton: boolean; - /** - * The text content of the chip. It is required. - */ - label: string; - /** - * The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set. - */ - labelStyle?: 'bold' | 'italic' | 'underline' | 'strikethrough'; - /** - * The type of chip to represent states like success, info, warn and error. Uses default style if not set. - */ - type?: 'success' | 'info' | 'warn' | 'error'; - /** - * It is only used when the chip component participates in a group - */ - value?: any; - } - interface B2bDropdown { - /** - * Whether the select as a whole is disabled. Per default it is false. - */ - disabled: boolean; - /** - * An optional error message for the dropdown. This will only appear if invalid is set to true. - */ - error?: string; - /** - * An optional hint text for the dropdown. - */ - hint?: string; - /** - * Whether the select is currently invalid. Per default it is false. - */ - invalid: boolean; - /** - * The dropdown label. - */ - label: string; - /** - * The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility. - */ - name?: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - } - interface B2bFlyoutMenu { - opened: boolean; - } - interface B2bFlyoutMenuOption { - /** - * Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected. - */ - disabled: boolean; - /** - * The option name. - */ - option: string; - /** - * Whether the option has a separator at the bottom. Per default it is false. - */ - separator: boolean; - } - interface B2bGrid { - /** - * The inner padding of the grid container measured in px. - */ - margin: number; - } - interface B2bGridCol { - /** - * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row. - */ - span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; - /** - * The alignment of text placed inside of a column. Note that this will apply to all children. - */ - textAlign: 'left' | 'center' | 'right'; - } - interface B2bGridRow { - /** - * Vertical alignment of columns. This requires the row to have a defined height. - */ - alignItems: 'stretch' | 'flex-start' | 'center' | 'flex-end'; - /** - * The spacing in between individual columns in px. The higher the gap, the smaller the columns will be. - */ - columnGap: number; - /** - * Horizontal alignment of columns. - */ - justify: - | 'start' - | 'end' - | 'center' - | 'space-around' - | 'space-between' - | 'space-evenly'; - /** - * The spacing between individual rows in px. - */ - rowGap: number; - } - /** - * Headline component to render hading tags content. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46 - */ - interface B2bHeadline { - /** - * The alignment of the headline. - */ - align: 'left' | 'right' | 'center'; - /** - * Whether the headline should have a margin. Per default, margins are enabled. - */ - noMargin: boolean; - /** - * Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `

`, 200 to `

` and 100 to `

` - */ - size: '400' | '200' | '100'; - } - interface B2bIcon { - /** - * Will display a pointer cursor when hovering the icon - */ - clickable: boolean; - /** - * The color of the icon - */ - color: 'primary' | 'secondary' | 'inverse' | 'inherit'; - /** - * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. - */ - focusable: boolean; - /** - * The name of the icon - */ - icon: IconName; - /** - * @deprecated The size of the icon. In the future, only 50 and 100 will be support through new components. - */ - size: '50' | '100' | '200'; - } - interface B2bIcon100 { - /** - * Will display a pointer cursor when hovering the icon - */ - clickable: boolean; - /** - * The color of the icon - */ - color: 'primary' | 'secondary' | 'inverse' | 'inherit'; - /** - * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. - */ - focusable: boolean; - /** - * The name of the icon - */ - icon: IconName1; - /** - * The size of the icon in pixel. Minimum is 24, maximum is 96px. - */ - size: number; - } - interface B2bIcon50 { - /** - * Will display a pointer cursor when hovering the icon - */ - clickable: boolean; - /** - * The color of the icon - */ - color: 'primary' | 'secondary' | 'inverse' | 'inherit'; - /** - * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. - */ - focusable: boolean; - /** - * The name of the icon - */ - icon: IconName2; - } - /** - * Input component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 - */ - interface B2bInput { - /** - * When setting the autofocus to true, the input element will be focused when the page loads. - */ - autofocus: boolean; - /** - * Simulate the native behavior of type="search" to emit an empty string when the input is cleared - */ - clearInput: () => Promise; - /** - * Whether or not the input is disabled. Default is false. - */ - disabled: boolean; - /** - * The error message that is shown if the input is invalid. - */ - error?: string; - groupDisabled: boolean; - /** - * The hint text that appears underneath the input field. - */ - hint?: string; - /** - * Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false. - */ - invalid: boolean; - /** - * The input label. - */ - label: string; - /** - * The name of the input. Use it to group label and input together and make it more accessible. - */ - name?: string; - /** - * A placeholder for the input field. Per default, it is null. - */ - placeholder: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - /** - * Manually set focus to the element - */ - setFocus: () => Promise; - /** - * The type of the input. All native HTML types except date or month are supported. Default is text. - */ - type: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'; - /** - * The default value of the input field. If defined, it will prefill the input. - */ - value: string; - } - interface B2bInputGroup { - /** - * Whether or not the input group is disabled as a whole. Per default it is false. - */ - disabled: boolean; - /** - * A group error text. It will only show if invalid is set to true. - */ - error?: string; - /** - * The hint text that appears underneath the input group. - */ - hint?: string; - /** - * Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false. - */ - invalid: boolean; - } - interface B2bInputLabel { - /** - * Will render the label with a disabled style. The default value is false. - */ - disabled: boolean; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - } - interface B2bInputList { - /** - * Whether or not the input is disabled. Default is false. - */ - disabled: boolean; - groupDisabled: boolean; - /** - * The input label. - */ - label: string; - /** - * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. - */ - optionsList: string[]; - /** - * The placeholder shown in the input field. - */ - placeholder: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - /** - * The default value of the input field. If defined, it will prefill the input. - */ - value: string; - } - interface B2bInputListOption { - /** - * The option name. - */ - option: string; - } - interface B2bLabel { - /** - * The type of the label. Per default it is neutral. - */ - type: 'neutral' | 'info' | 'success' | 'warning' | 'error'; - } - /** - * Modal component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 - */ - interface B2bModal { - /** - * A boolean that indicates whether the modal can be dismissed by clicking in the backdrop outside the modal. - */ - backdropDismiss: boolean; - /** - * A boolean to indicate whether the modal can be dismissed by pressing the escape key on the keyboard - */ - escDismiss: boolean; - /** - * The title for the modal. This is required. - */ - heading: string; - /** - * Whether the modal is shown or not. Default is false - */ - opened: boolean; - /** - * The size of the modal. If not specified, will assume the default size - */ - variant: 'default' | 'large'; - } - interface B2bMultiselectDropdown { - /** - * The input label. - */ - label: string; - /** - * The maximum amount of chips visible. Adjust this depending on available size of the dropdown. - */ - maxOptionsVisible: number; - /** - * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. - */ - optionsList: string[]; - /** - * The placeholder shown in the input field. - */ - placeholder: string; - /** - * The placeholder shown in the search bar. - */ - searchPlaceholder: string; - /** - * The string displayed as the select all label. - */ - selectAllLabel: string; - /** - * The initial values to be selected in the dropdown. - */ - selectedValues: string[]; - } - interface B2bMultiselectOption { - indeterminate?: boolean; - /** - * The label of the option. - */ - option: string; - /** - * Whether the option is currently selected. - */ - selected: boolean; - } - interface B2bPagination { - /** - * Use this property to set programmatically the active page - */ - activePage: number; - /** - * (optional) translation to 'Go to next page' - */ - ariaLabelNextPage: string; - /** - * (optional) translation to 'Go to previous page' - */ - ariaLabelPreviousPage: string; - /** - * The total number of pages to calculate the length of pagination component - */ - totalPages: number; - } - /** - * Paragraph component to render text content. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45 - */ - interface B2bParagraph { - /** - * The alignment of the text. - */ - align: 'left' | 'right' | 'center'; - /** - * The size of the text. - */ - size: '50' | '100'; - /** - * The weight of the text. - */ - weight: 'bold' | 'normal'; - } - interface B2bProgressBar { - /** - * The label of the progress bar. - */ - label?: string; - /** - * Whether the label should be displayed on the right or left of the progress bar. - */ - labelPosition?: 'left' | 'right'; - /** - * Whether the label should be displayed below or on the side of the progress bar. - */ - labelType?: 'below' | 'side'; - /** - * The percentage of progress from 0 to 100. - */ - progress: number; - } - interface B2bRadioButton { - /** - * Whether or not the radio button is currently checked. Per default it is false. - */ - checked: boolean; - /** - * Whether or not the radio button is currently disabled. Per default it is false. - */ - disabled: boolean; - /** - * An error text. It will only show if invalid is set to true. - */ - error?: string; - /** - * A hint to give additional information on the radio button. - */ - hint?: string; - /** - * Whether or not the radio button should be rendered with error styles. Per default it is false. - */ - invalid: boolean; - /** - * The label of the radio button. This is required - */ - label: string; - /** - * The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required. - */ - name: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - /** - * The value of the radio button. This will be emitted when the radio button is clicked. - */ - value?: string; - } - interface B2bRadioGroup { - /** - * The alignment of the radio group. Can be vertical or horizontal, per default it is vertical. - */ - alignment: 'vertical' | 'horizontal'; - /** - * Whether or not the radio group is disabled as a whole. Per default it is false. - */ - disabled: boolean; - /** - * A group error text. It will only show if invalid is set to true. - */ - error?: string; - /** - * A group hint text. - */ - hint?: string; - /** - * Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false. - */ - invalid: boolean; - /** - * The radio group label. This is optional. - */ - label: string; - /** - * The radio group name used to group them together programmatically. This is required. - */ - name: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - } - interface B2bRequiredSeparator { - /** - * The required label. Per default it is the german 'Pflichtfeld', but can be altered. - */ - label: string; - } - interface B2bRoundedIcon { - /** - * The color of the border of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string - */ - borderColor: string; - /** - * The color of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string - */ - color: string; - /** - * The color of the text or icon within the circle. Use any type including hex, rgb or css custom properties as long as you pass it as a string - */ - contentColor: string; - } - interface B2bScrollableContainer {} - interface B2bSearch { - /** - * Whether or not the input is disabled. Default is false. - */ - disabled: boolean; - /** - * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. - */ - optionsList: string[]; - /** - * The placeholder shown in the input field. - */ - placeholder: string; - /** - * The default value of the search input field. If defined, it will prefill the input. - */ - value: string; - } - interface B2bSeparator { - /** - * The alignment of the separator. Per default it is horizontal. - */ - alignment: 'vertical' | 'horizontal'; - } - /** - * Spinner component to display loading indicator. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70 - */ - interface B2bSpinner { - /** - * The color of the spinner. - */ - color: 'primary' | 'secondary' | 'inverse'; - /** - * The size of the spinner. - */ - size: '50' | '100' | '200'; - } - interface B2bTab { - /** - * Whether or not the tab is currently disabled. Per default it is false. - */ - disabled: boolean; - /** - * Whether or not the tab has an error. Per default, it is false. - */ - invalid: boolean; - /** - * Whether or not the tab is currently selected. Per default it is false. - */ - selected: boolean; - } - interface B2bTabGroup { - /** - * Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation. Set it to true if you want to use external, route-based navigation. - */ - useRouter: boolean; - } - interface B2bTabPanel {} - interface B2bTable { - /** - * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns. Colspan behaves same as equal, but allows you to set a colspan attribute on individual columns or cells to make them span more than one column. - */ - size: TableSizes; - } - interface B2bTableCell { - /** - * Alignment of the content of the cell, by default is to the left. * - */ - align: ContentAlignment; - /** - * Background color of the cell. This color selection does not have hover states, as it is handled from the row* - */ - color: TableColourOptions; - /** - * How many columns the cell should span. Accepts numbers greater than one. - */ - colspan?: number; - /** - * adds a border to the right of the cell. * - */ - divider: boolean; - size: TableSizes; - /** - * Whether text should wrap or truncate. It will only truncate when table size is equal * - */ - textWrap: boolean; - totalCols?: number; - } - interface B2bTableHeader { - /** - * The width of the column. Increase it to change the size of the column relative to other columns. - */ - colspan?: number; - /** - * Alignment of the content of the cell, by default is to the left. * - */ - contentAlign: ContentAlignment; - /** - * adds a border to the right of the header. * - */ - divider: boolean; - /** - * @deprecated Use fixed on the rowgroup instead. Sets the header position to sticky. Use it when table is inside a scrollable container. * - */ - fixed: boolean; - /** - * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation. - */ - size: TableSizes; - /** - * The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this. - */ - sortDirection: TableSortDirections; - /** - * Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent. - */ - sortId?: string; - totalCols?: number; - } - interface B2bTableRow { - accordionType: TableAccordionRowTypes; - /** - * If a selectable row is currently checked. Per default, it is false. - */ - checked: boolean; - /** - * Background color of the row. Use it semantically. This color selection have hover states * - */ - color: TableColourOptions; - /** - * Whether the row will be highlighted on mouse over * - */ - highlight: boolean; - /** - * If a selectable row is a parent for an accordion, it becomes indeterminate when some of it's children are checked, but not all. - */ - indeterminate: boolean; - selectable: boolean; - size?: TableSizes; - /** - * Will toggle the accordion opened or closed. - */ - toggleAccordion: (isOpen: boolean) => Promise; - /** - * The unique identifier for a selectable row. It is emitted when the row is selected. - */ - value?: string; - } - interface B2bTableRowgroup { - /** - * Renders the rowgroup as an accordion. Both header and body must have accordion set to true. One table can contain multiple rowgroups of type body, each of which represents an accordion row with children. - */ - accordion: boolean; - /** - * Sets the header rowgroup position to sticky. Use this in a scrollable container. - */ - fixed: boolean; - /** - * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false. - */ - opened: boolean; - /** - * If the rows in the rowgroup can be selected via checkmark. Per default, it is false. - */ - selectable: boolean; - size: TableSizes; - /** - * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over. - */ - type: TableRowgroupTypes; - } - /** - * Text Area Component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96 - */ - interface B2bTextarea { - /** - * Whether or not the textarea should be automatically focused on page load. Per default it is false. - */ - autofocus: boolean; - /** - * Whether or not the textarea is disabled. Per default it is false. - */ - disabled: boolean; - /** - * An optional error message that is displayed when the textarea is invalid. Per default it is undefined. - */ - error?: string; - /** - * The height of the text area - */ - height?: string; - /** - * An optional hint for the textarea. Per default it is undefined. - */ - hint?: string; - /** - * Whether or not the textarea should be displayed with error styles. Per default it is false. - */ - invalid: boolean; - /** - * The textarea label. This is optional. - */ - label: string; - /** - * The maximum input length. Characters entered after that will not be appended to the input value. - */ - maxLength?: number; - /** - * The name of the textarea. This is used to programmatically group it into a form. - */ - name?: string; - /** - * The textarea placeholder. It is optional and undefined by default. - */ - placeholder?: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required: boolean; - /** - * If and how the textarea is resizable. Per default it is resizable in both directions. - */ - resize?: 'unset' | 'none' | 'vertical' | 'horizontal'; - /** - * The value of the textarea. Per default it is null. - */ - value: string; - } - interface B2bToggleButton { - /** - * Whether or not the toggle button is currently checked. Per default it is false. - */ - checked: boolean; - /** - * Whether or not the toggle button is currently disabled. Per default it is false. - */ - disabled: boolean; - /** - * The label of the toggle button. This is required - */ - label: string; - /** - * The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. - */ - name: string; - /** - * The value of the toggle button. This will be emitted when the toggle button is clicked. This is required - */ - value: string; - } - interface B2bToggleChip { - /** - * Whether or not the chip is currently active. Per default, it is false. - */ - active: boolean; - /** - * Whether or not the chip is currently disabled. Per default it is false. - */ - disabled: boolean; - /** - * The chip's label. This is required. - */ - label: string; - /** - * The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. - */ - name: string; - /** - * The value associated with the toggle chip. This is emitted when the chip is interacted with. - */ - value: any; - /** - * The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey - */ - variant: 'grey' | 'white'; - } - interface B2bToggleGroup { - /** - * Whether or not the toggle group is disabled as a whole. Per default it is false. - */ - disabled: boolean; - /** - * The toggle group name used to group them together programmatically. This is required. - */ - name: string; - } - interface B2bToggleSwitch { - /** - * Whether or not the toggle button is currently disabled. Per default it is false. - */ - disabled: boolean; - /** - * An optional label for the toggle switch. - */ - label?: string; - /** - * The alignment of the toggle switch label. - */ - labelPosition: 'left' | 'right'; - /** - * The toggle name. Use this if the toggle switch is used in a form group. - */ - name?: string; - /** - * Whether or not the toggle button is currently on or off. Per default it is off. - */ - state: boolean; - } - /** - * The tooltip can display additional information, and will be visible based on - * a specific trigger. - */ - interface B2bTooltip { - /** - * The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content. - */ - content: string; - /** - * Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility. - */ - opened: boolean; - /** - * Position of the tooltip. - */ - position: 'left' | 'right' | 'top' | 'bottom'; - /** - * The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover. - */ - trigger: 'hover' | 'focus' | 'custom'; - } - interface B2bWizard { - /** - * The current active step - */ - activeStep: WizardSteps | '0'; - /** - * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number - */ - checkIcon: boolean; - /** - * By default, is false, where the wizard will handle steps states. If set to true, steps state must be handled manually. - */ - custom: boolean; - } - interface B2bWizardIcon { - /** - * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number - */ - checkIcon: boolean; - /** - * The state of the step - */ - state: WizardStatus; - /** - * The step number - */ - step: WizardSteps; - } - interface B2bWizardStep { - /** - * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number - */ - checkIcon: boolean; - /** - * Use when wizard has property custom true. The state of the step - */ - state: WizardStatus; - /** - * Use when wizard has property custom true. The step number - */ - step: WizardSteps; - } -} -export interface B2bAlertCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bAlertElement; -} -export interface B2bBreadcrumbCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bBreadcrumbElement; -} -export interface B2bBreadcrumbItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bBreadcrumbItemElement; -} -export interface B2bCalendarCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bCalendarElement; -} -export interface B2bCalendarDaysCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bCalendarDaysElement; -} -export interface B2bCalendarHeaderCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bCalendarHeaderElement; -} -export interface B2bCardCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bCardElement; -} -export interface B2bCheckboxCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bCheckboxElement; -} -export interface B2bCheckboxGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bCheckboxGroupElement; -} -export interface B2bChipComponentCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bChipComponentElement; -} -export interface B2bDropdownCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bDropdownElement; -} -export interface B2bFlyoutMenuOptionCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bFlyoutMenuOptionElement; -} -export interface B2bInputCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bInputElement; -} -export interface B2bInputListCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bInputListElement; -} -export interface B2bInputListOptionCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bInputListOptionElement; -} -export interface B2bModalCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bModalElement; -} -export interface B2bMultiselectDropdownCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bMultiselectDropdownElement; -} -export interface B2bMultiselectOptionCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bMultiselectOptionElement; -} -export interface B2bPaginationCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bPaginationElement; -} -export interface B2bRadioButtonCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bRadioButtonElement; -} -export interface B2bRadioGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bRadioGroupElement; -} -export interface B2bSearchCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bSearchElement; -} -export interface B2bTabCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bTabElement; -} -export interface B2bTabGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bTabGroupElement; -} -export interface B2bTableCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bTableElement; -} -export interface B2bTableHeaderCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bTableHeaderElement; -} -export interface B2bTableRowCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bTableRowElement; -} -export interface B2bTableRowgroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bTableRowgroupElement; -} -export interface B2bTextareaCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bTextareaElement; -} -export interface B2bToggleButtonCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bToggleButtonElement; -} -export interface B2bToggleChipCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bToggleChipElement; -} -export interface B2bToggleGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bToggleGroupElement; -} -export interface B2bToggleSwitchCustomEvent extends CustomEvent { - detail: T; - target: HTMLB2bToggleSwitchElement; -} -declare global { - interface HTMLB2bAlertElementEventMap { - 'b2b-close': void; - } - interface HTMLB2bAlertElement - extends Components.B2bAlert, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bAlertElement, - ev: B2bAlertCustomEvent, - ) => 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: HTMLB2bAlertElement, - ev: B2bAlertCustomEvent, - ) => 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 HTMLB2bAlertElement: { - prototype: HTMLB2bAlertElement; - new (): HTMLB2bAlertElement; - }; - interface HTMLB2bAnchorElement - extends Components.B2bAnchor, - HTMLStencilElement {} - var HTMLB2bAnchorElement: { - prototype: HTMLB2bAnchorElement; - new (): HTMLB2bAnchorElement; - }; - interface HTMLB2bBreadcrumbElementEventMap { - 'b2b-selected': BreadCrumbChangeEventDetail; - } - interface HTMLB2bBreadcrumbElement - extends Components.B2bBreadcrumb, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bBreadcrumbElement, - ev: B2bBreadcrumbCustomEvent, - ) => 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: HTMLB2bBreadcrumbElement, - ev: B2bBreadcrumbCustomEvent, - ) => 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 HTMLB2bBreadcrumbElement: { - prototype: HTMLB2bBreadcrumbElement; - new (): HTMLB2bBreadcrumbElement; - }; - interface HTMLB2bBreadcrumbItemElementEventMap { - 'b2b-change': BreadCrumbChangeEventDetail; - } - interface HTMLB2bBreadcrumbItemElement - extends Components.B2bBreadcrumbItem, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bBreadcrumbItemElement, - ev: B2bBreadcrumbItemCustomEvent< - HTMLB2bBreadcrumbItemElementEventMap[K] - >, - ) => 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: HTMLB2bBreadcrumbItemElement, - ev: B2bBreadcrumbItemCustomEvent< - HTMLB2bBreadcrumbItemElementEventMap[K] - >, - ) => 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 HTMLB2bBreadcrumbItemElement: { - prototype: HTMLB2bBreadcrumbItemElement; - new (): HTMLB2bBreadcrumbItemElement; - }; - interface HTMLB2bButtonElement - extends Components.B2bButton, - HTMLStencilElement {} - var HTMLB2bButtonElement: { - prototype: HTMLB2bButtonElement; - new (): HTMLB2bButtonElement; - }; - interface HTMLB2bCalendarElementEventMap { - 'b2b-selected': CalendarEventDetail; - } - interface HTMLB2bCalendarElement - extends Components.B2bCalendar, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bCalendarElement, - ev: B2bCalendarCustomEvent, - ) => 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: HTMLB2bCalendarElement, - ev: B2bCalendarCustomEvent, - ) => 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 HTMLB2bCalendarElement: { - prototype: HTMLB2bCalendarElement; - new (): HTMLB2bCalendarElement; - }; - interface HTMLB2bCalendarDaysElementEventMap { - 'b2b-calendar-escape': EscapePressed; - 'b2b-date-selected': DateSelectedEventDetail; - } - interface HTMLB2bCalendarDaysElement - extends Components.B2bCalendarDays, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bCalendarDaysElement, - ev: B2bCalendarDaysCustomEvent, - ) => 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: HTMLB2bCalendarDaysElement, - ev: B2bCalendarDaysCustomEvent, - ) => 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 HTMLB2bCalendarDaysElement: { - prototype: HTMLB2bCalendarDaysElement; - new (): HTMLB2bCalendarDaysElement; - }; - interface HTMLB2bCalendarDaysHeaderElement - extends Components.B2bCalendarDaysHeader, - HTMLStencilElement {} - var HTMLB2bCalendarDaysHeaderElement: { - prototype: HTMLB2bCalendarDaysHeaderElement; - new (): HTMLB2bCalendarDaysHeaderElement; - }; - interface HTMLB2bCalendarHeaderElementEventMap { - 'b2b-calendar-previous-month': PreviousMonth; - 'b2b-calendar-next-month': NextMonth; - } - interface HTMLB2bCalendarHeaderElement - extends Components.B2bCalendarHeader, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bCalendarHeaderElement, - ev: B2bCalendarHeaderCustomEvent< - HTMLB2bCalendarHeaderElementEventMap[K] - >, - ) => 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: HTMLB2bCalendarHeaderElement, - ev: B2bCalendarHeaderCustomEvent< - HTMLB2bCalendarHeaderElementEventMap[K] - >, - ) => 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 HTMLB2bCalendarHeaderElement: { - prototype: HTMLB2bCalendarHeaderElement; - new (): HTMLB2bCalendarHeaderElement; - }; - interface HTMLB2bCardElementEventMap { - 'b2b-selected': void; - } - interface HTMLB2bCardElement extends Components.B2bCard, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bCardElement, - ev: B2bCardCustomEvent, - ) => 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: HTMLB2bCardElement, - ev: B2bCardCustomEvent, - ) => 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 HTMLB2bCardElement: { - prototype: HTMLB2bCardElement; - new (): HTMLB2bCardElement; - }; - interface HTMLB2bCheckboxElementEventMap { - 'b2b-focus': FocusEvent; - 'b2b-blur': FocusEvent; - 'b2b-change': CheckboxEventDetail; - } - interface HTMLB2bCheckboxElement - extends Components.B2bCheckbox, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bCheckboxElement, - ev: B2bCheckboxCustomEvent, - ) => 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: HTMLB2bCheckboxElement, - ev: B2bCheckboxCustomEvent, - ) => 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 HTMLB2bCheckboxElement: { - prototype: HTMLB2bCheckboxElement; - new (): HTMLB2bCheckboxElement; - }; - interface HTMLB2bCheckboxGroupElementEventMap { - 'b2b-group-change': CheckboxEventDetail; - } - interface HTMLB2bCheckboxGroupElement - extends Components.B2bCheckboxGroup, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bCheckboxGroupElement, - ev: B2bCheckboxGroupCustomEvent, - ) => 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: HTMLB2bCheckboxGroupElement, - ev: B2bCheckboxGroupCustomEvent, - ) => 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 HTMLB2bCheckboxGroupElement: { - prototype: HTMLB2bCheckboxGroupElement; - new (): HTMLB2bCheckboxGroupElement; - }; - interface HTMLB2bChipComponentElementEventMap { - 'b2b-close': ChipComponentEventDetail; - } - interface HTMLB2bChipComponentElement - extends Components.B2bChipComponent, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bChipComponentElement, - ev: B2bChipComponentCustomEvent, - ) => 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: HTMLB2bChipComponentElement, - ev: B2bChipComponentCustomEvent, - ) => 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 HTMLB2bChipComponentElement: { - prototype: HTMLB2bChipComponentElement; - new (): HTMLB2bChipComponentElement; - }; - interface HTMLB2bDropdownElementEventMap { - 'b2b-change': string; - 'b2b-focus': FocusEvent; - 'b2b-blur': FocusEvent; - } - interface HTMLB2bDropdownElement - extends Components.B2bDropdown, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bDropdownElement, - ev: B2bDropdownCustomEvent, - ) => 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: HTMLB2bDropdownElement, - ev: B2bDropdownCustomEvent, - ) => 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 HTMLB2bDropdownElement: { - prototype: HTMLB2bDropdownElement; - new (): HTMLB2bDropdownElement; - }; - interface HTMLB2bFlyoutMenuElement - extends Components.B2bFlyoutMenu, - HTMLStencilElement {} - var HTMLB2bFlyoutMenuElement: { - prototype: HTMLB2bFlyoutMenuElement; - new (): HTMLB2bFlyoutMenuElement; - }; - interface HTMLB2bFlyoutMenuOptionElementEventMap { - 'b2b-option-selected': OptionSelectedEventDetail; - } - interface HTMLB2bFlyoutMenuOptionElement - extends Components.B2bFlyoutMenuOption, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bFlyoutMenuOptionElement, - ev: B2bFlyoutMenuOptionCustomEvent< - HTMLB2bFlyoutMenuOptionElementEventMap[K] - >, - ) => 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: HTMLB2bFlyoutMenuOptionElement, - ev: B2bFlyoutMenuOptionCustomEvent< - HTMLB2bFlyoutMenuOptionElementEventMap[K] - >, - ) => 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 HTMLB2bFlyoutMenuOptionElement: { - prototype: HTMLB2bFlyoutMenuOptionElement; - new (): HTMLB2bFlyoutMenuOptionElement; - }; - interface HTMLB2bGridElement extends Components.B2bGrid, HTMLStencilElement {} - var HTMLB2bGridElement: { - prototype: HTMLB2bGridElement; - new (): HTMLB2bGridElement; - }; - interface HTMLB2bGridColElement - extends Components.B2bGridCol, - HTMLStencilElement {} - var HTMLB2bGridColElement: { - prototype: HTMLB2bGridColElement; - new (): HTMLB2bGridColElement; - }; - interface HTMLB2bGridRowElement - extends Components.B2bGridRow, - HTMLStencilElement {} - var HTMLB2bGridRowElement: { - prototype: HTMLB2bGridRowElement; - new (): HTMLB2bGridRowElement; - }; - /** - * Headline component to render hading tags content. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46 - */ - interface HTMLB2bHeadlineElement - extends Components.B2bHeadline, - HTMLStencilElement {} - var HTMLB2bHeadlineElement: { - prototype: HTMLB2bHeadlineElement; - new (): HTMLB2bHeadlineElement; - }; - interface HTMLB2bIconElement extends Components.B2bIcon, HTMLStencilElement {} - var HTMLB2bIconElement: { - prototype: HTMLB2bIconElement; - new (): HTMLB2bIconElement; - }; - interface HTMLB2bIcon100Element - extends Components.B2bIcon100, - HTMLStencilElement {} - var HTMLB2bIcon100Element: { - prototype: HTMLB2bIcon100Element; - new (): HTMLB2bIcon100Element; - }; - interface HTMLB2bIcon50Element - extends Components.B2bIcon50, - HTMLStencilElement {} - var HTMLB2bIcon50Element: { - prototype: HTMLB2bIcon50Element; - new (): HTMLB2bIcon50Element; - }; - interface HTMLB2bInputElementEventMap { - 'b2b-focus': FocusEvent; - 'b2b-blur': FocusEvent; - 'b2b-input': InputChangeEvent; - } - /** - * Input component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 - */ - interface HTMLB2bInputElement - extends Components.B2bInput, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bInputElement, - ev: B2bInputCustomEvent, - ) => 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: HTMLB2bInputElement, - ev: B2bInputCustomEvent, - ) => 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 HTMLB2bInputElement: { - prototype: HTMLB2bInputElement; - new (): HTMLB2bInputElement; - }; - interface HTMLB2bInputGroupElement - extends Components.B2bInputGroup, - HTMLStencilElement {} - var HTMLB2bInputGroupElement: { - prototype: HTMLB2bInputGroupElement; - new (): HTMLB2bInputGroupElement; - }; - interface HTMLB2bInputLabelElement - extends Components.B2bInputLabel, - HTMLStencilElement {} - var HTMLB2bInputLabelElement: { - prototype: HTMLB2bInputLabelElement; - new (): HTMLB2bInputLabelElement; - }; - interface HTMLB2bInputListElementEventMap { - 'b2b-clear': InputClear; - } - interface HTMLB2bInputListElement - extends Components.B2bInputList, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bInputListElement, - ev: B2bInputListCustomEvent, - ) => 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: HTMLB2bInputListElement, - ev: B2bInputListCustomEvent, - ) => 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 HTMLB2bInputListElement: { - prototype: HTMLB2bInputListElement; - new (): HTMLB2bInputListElement; - }; - interface HTMLB2bInputListOptionElementEventMap { - 'b2b-option-selected': OptionSelectedEventDetail; - } - interface HTMLB2bInputListOptionElement - extends Components.B2bInputListOption, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bInputListOptionElement, - ev: B2bInputListOptionCustomEvent< - HTMLB2bInputListOptionElementEventMap[K] - >, - ) => 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: HTMLB2bInputListOptionElement, - ev: B2bInputListOptionCustomEvent< - HTMLB2bInputListOptionElementEventMap[K] - >, - ) => 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 HTMLB2bInputListOptionElement: { - prototype: HTMLB2bInputListOptionElement; - new (): HTMLB2bInputListOptionElement; - }; - interface HTMLB2bLabelElement - extends Components.B2bLabel, - HTMLStencilElement {} - var HTMLB2bLabelElement: { - prototype: HTMLB2bLabelElement; - new (): HTMLB2bLabelElement; - }; - interface HTMLB2bModalElementEventMap { - 'b2b-close': void; - 'b2b-before-close': BeforeCloseEventDetail; - } - /** - * Modal component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 - */ - interface HTMLB2bModalElement - extends Components.B2bModal, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bModalElement, - ev: B2bModalCustomEvent, - ) => 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: HTMLB2bModalElement, - ev: B2bModalCustomEvent, - ) => 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 HTMLB2bModalElement: { - prototype: HTMLB2bModalElement; - new (): HTMLB2bModalElement; - }; - interface HTMLB2bMultiselectDropdownElementEventMap { - 'b2b-selected': string[]; - } - interface HTMLB2bMultiselectDropdownElement - extends Components.B2bMultiselectDropdown, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bMultiselectDropdownElement, - ev: B2bMultiselectDropdownCustomEvent< - HTMLB2bMultiselectDropdownElementEventMap[K] - >, - ) => 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< - K extends keyof HTMLB2bMultiselectDropdownElementEventMap, - >( - type: K, - listener: ( - this: HTMLB2bMultiselectDropdownElement, - ev: B2bMultiselectDropdownCustomEvent< - HTMLB2bMultiselectDropdownElementEventMap[K] - >, - ) => 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 HTMLB2bMultiselectDropdownElement: { - prototype: HTMLB2bMultiselectDropdownElement; - new (): HTMLB2bMultiselectDropdownElement; - }; - interface HTMLB2bMultiselectOptionElementEventMap { - 'b2b-option-selected': MultiSelectOptionEventDetail; - } - interface HTMLB2bMultiselectOptionElement - extends Components.B2bMultiselectOption, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bMultiselectOptionElement, - ev: B2bMultiselectOptionCustomEvent< - HTMLB2bMultiselectOptionElementEventMap[K] - >, - ) => 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< - K extends keyof HTMLB2bMultiselectOptionElementEventMap, - >( - type: K, - listener: ( - this: HTMLB2bMultiselectOptionElement, - ev: B2bMultiselectOptionCustomEvent< - HTMLB2bMultiselectOptionElementEventMap[K] - >, - ) => 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 HTMLB2bMultiselectOptionElement: { - prototype: HTMLB2bMultiselectOptionElement; - new (): HTMLB2bMultiselectOptionElement; - }; - interface HTMLB2bPaginationElementEventMap { - 'b2b-page-change': PageChangeEventDetail; - } - interface HTMLB2bPaginationElement - extends Components.B2bPagination, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bPaginationElement, - ev: B2bPaginationCustomEvent, - ) => 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: HTMLB2bPaginationElement, - ev: B2bPaginationCustomEvent, - ) => 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 HTMLB2bPaginationElement: { - prototype: HTMLB2bPaginationElement; - new (): HTMLB2bPaginationElement; - }; - /** - * Paragraph component to render text content. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45 - */ - interface HTMLB2bParagraphElement - extends Components.B2bParagraph, - HTMLStencilElement {} - var HTMLB2bParagraphElement: { - prototype: HTMLB2bParagraphElement; - new (): HTMLB2bParagraphElement; - }; - interface HTMLB2bProgressBarElement - extends Components.B2bProgressBar, - HTMLStencilElement {} - var HTMLB2bProgressBarElement: { - prototype: HTMLB2bProgressBarElement; - new (): HTMLB2bProgressBarElement; - }; - interface HTMLB2bRadioButtonElementEventMap { - 'b2b-focus': FocusEvent; - 'b2b-blur': FocusEvent; - 'b2b-change': RadioEventDetail; - } - interface HTMLB2bRadioButtonElement - extends Components.B2bRadioButton, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bRadioButtonElement, - ev: B2bRadioButtonCustomEvent, - ) => 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: HTMLB2bRadioButtonElement, - ev: B2bRadioButtonCustomEvent, - ) => 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 HTMLB2bRadioButtonElement: { - prototype: HTMLB2bRadioButtonElement; - new (): HTMLB2bRadioButtonElement; - }; - interface HTMLB2bRadioGroupElementEventMap { - 'b2b-group-change': RadioEventDetail; - } - interface HTMLB2bRadioGroupElement - extends Components.B2bRadioGroup, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bRadioGroupElement, - ev: B2bRadioGroupCustomEvent, - ) => 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: HTMLB2bRadioGroupElement, - ev: B2bRadioGroupCustomEvent, - ) => 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 HTMLB2bRadioGroupElement: { - prototype: HTMLB2bRadioGroupElement; - new (): HTMLB2bRadioGroupElement; - }; - interface HTMLB2bRequiredSeparatorElement - extends Components.B2bRequiredSeparator, - HTMLStencilElement {} - var HTMLB2bRequiredSeparatorElement: { - prototype: HTMLB2bRequiredSeparatorElement; - new (): HTMLB2bRequiredSeparatorElement; - }; - interface HTMLB2bRoundedIconElement - extends Components.B2bRoundedIcon, - HTMLStencilElement {} - var HTMLB2bRoundedIconElement: { - prototype: HTMLB2bRoundedIconElement; - new (): HTMLB2bRoundedIconElement; - }; - interface HTMLB2bScrollableContainerElement - extends Components.B2bScrollableContainer, - HTMLStencilElement {} - var HTMLB2bScrollableContainerElement: { - prototype: HTMLB2bScrollableContainerElement; - new (): HTMLB2bScrollableContainerElement; - }; - interface HTMLB2bSearchElementEventMap { - 'b2b-search': SearchClickEventDetail; - } - interface HTMLB2bSearchElement - extends Components.B2bSearch, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bSearchElement, - ev: B2bSearchCustomEvent, - ) => 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: HTMLB2bSearchElement, - ev: B2bSearchCustomEvent, - ) => 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 HTMLB2bSearchElement: { - prototype: HTMLB2bSearchElement; - new (): HTMLB2bSearchElement; - }; - interface HTMLB2bSeparatorElement - extends Components.B2bSeparator, - HTMLStencilElement {} - var HTMLB2bSeparatorElement: { - prototype: HTMLB2bSeparatorElement; - new (): HTMLB2bSeparatorElement; - }; - /** - * Spinner component to display loading indicator. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70 - */ - interface HTMLB2bSpinnerElement - extends Components.B2bSpinner, - HTMLStencilElement {} - var HTMLB2bSpinnerElement: { - prototype: HTMLB2bSpinnerElement; - new (): HTMLB2bSpinnerElement; - }; - interface HTMLB2bTabElementEventMap { - 'b2b-change': boolean; - } - interface HTMLB2bTabElement extends Components.B2bTab, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bTabElement, - ev: B2bTabCustomEvent, - ) => 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: HTMLB2bTabElement, - ev: B2bTabCustomEvent, - ) => 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 HTMLB2bTabElement: { - prototype: HTMLB2bTabElement; - new (): HTMLB2bTabElement; - }; - interface HTMLB2bTabGroupElementEventMap { - 'b2b-selected': TabChangeEventDetail; - } - interface HTMLB2bTabGroupElement - extends Components.B2bTabGroup, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bTabGroupElement, - ev: B2bTabGroupCustomEvent, - ) => 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: HTMLB2bTabGroupElement, - ev: B2bTabGroupCustomEvent, - ) => 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 HTMLB2bTabGroupElement: { - prototype: HTMLB2bTabGroupElement; - new (): HTMLB2bTabGroupElement; - }; - interface HTMLB2bTabPanelElement - extends Components.B2bTabPanel, - HTMLStencilElement {} - var HTMLB2bTabPanelElement: { - prototype: HTMLB2bTabPanelElement; - new (): HTMLB2bTabPanelElement; - }; - interface HTMLB2bTableElementEventMap { - 'b2b-sort-change': ColumnSortChangeEventDetail; - } - interface HTMLB2bTableElement - extends Components.B2bTable, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bTableElement, - ev: B2bTableCustomEvent, - ) => 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: HTMLB2bTableElement, - ev: B2bTableCustomEvent, - ) => 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 HTMLB2bTableElement: { - prototype: HTMLB2bTableElement; - new (): HTMLB2bTableElement; - }; - interface HTMLB2bTableCellElement - extends Components.B2bTableCell, - HTMLStencilElement {} - var HTMLB2bTableCellElement: { - prototype: HTMLB2bTableCellElement; - new (): HTMLB2bTableCellElement; - }; - interface HTMLB2bTableHeaderElementEventMap { - 'b2b-change': TableSortDirections; - } - interface HTMLB2bTableHeaderElement - extends Components.B2bTableHeader, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bTableHeaderElement, - ev: B2bTableHeaderCustomEvent, - ) => 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: HTMLB2bTableHeaderElement, - ev: B2bTableHeaderCustomEvent, - ) => 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 HTMLB2bTableHeaderElement: { - prototype: HTMLB2bTableHeaderElement; - new (): HTMLB2bTableHeaderElement; - }; - interface HTMLB2bTableRowElementEventMap { - 'b2b-open': boolean; - 'b2b-row-selected': CheckboxEventDetail1; - } - interface HTMLB2bTableRowElement - extends Components.B2bTableRow, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bTableRowElement, - ev: B2bTableRowCustomEvent, - ) => 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: HTMLB2bTableRowElement, - ev: B2bTableRowCustomEvent, - ) => 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 HTMLB2bTableRowElement: { - prototype: HTMLB2bTableRowElement; - new (): HTMLB2bTableRowElement; - }; - interface HTMLB2bTableRowgroupElementEventMap { - 'b2b-group-selected': TableAccordionSelectedEventDetail; - } - interface HTMLB2bTableRowgroupElement - extends Components.B2bTableRowgroup, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bTableRowgroupElement, - ev: B2bTableRowgroupCustomEvent, - ) => 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: HTMLB2bTableRowgroupElement, - ev: B2bTableRowgroupCustomEvent, - ) => 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 HTMLB2bTableRowgroupElement: { - prototype: HTMLB2bTableRowgroupElement; - new (): HTMLB2bTableRowgroupElement; - }; - interface HTMLB2bTextareaElementEventMap { - 'b2b-focus': FocusEvent; - 'b2b-blur': FocusEvent; - 'b2b-input': InputChangeEvent; - } - /** - * Text Area Component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96 - */ - interface HTMLB2bTextareaElement - extends Components.B2bTextarea, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bTextareaElement, - ev: B2bTextareaCustomEvent, - ) => 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: HTMLB2bTextareaElement, - ev: B2bTextareaCustomEvent, - ) => 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 HTMLB2bTextareaElement: { - prototype: HTMLB2bTextareaElement; - new (): HTMLB2bTextareaElement; - }; - interface HTMLB2bToggleButtonElementEventMap { - 'b2b-change': ToggleButtonEventDetail; - } - interface HTMLB2bToggleButtonElement - extends Components.B2bToggleButton, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bToggleButtonElement, - ev: B2bToggleButtonCustomEvent, - ) => 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: HTMLB2bToggleButtonElement, - ev: B2bToggleButtonCustomEvent, - ) => 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 HTMLB2bToggleButtonElement: { - prototype: HTMLB2bToggleButtonElement; - new (): HTMLB2bToggleButtonElement; - }; - interface HTMLB2bToggleChipElementEventMap { - 'b2b-selected': ToggleChipEventDetail; - } - interface HTMLB2bToggleChipElement - extends Components.B2bToggleChip, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bToggleChipElement, - ev: B2bToggleChipCustomEvent, - ) => 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: HTMLB2bToggleChipElement, - ev: B2bToggleChipCustomEvent, - ) => 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 HTMLB2bToggleChipElement: { - prototype: HTMLB2bToggleChipElement; - new (): HTMLB2bToggleChipElement; - }; - interface HTMLB2bToggleGroupElementEventMap { - 'b2b-group-change': ToggleButtonEventDetail; - } - interface HTMLB2bToggleGroupElement - extends Components.B2bToggleGroup, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bToggleGroupElement, - ev: B2bToggleGroupCustomEvent, - ) => 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: HTMLB2bToggleGroupElement, - ev: B2bToggleGroupCustomEvent, - ) => 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 HTMLB2bToggleGroupElement: { - prototype: HTMLB2bToggleGroupElement; - new (): HTMLB2bToggleGroupElement; - }; - interface HTMLB2bToggleSwitchElementEventMap { - 'b2b-change': ToggleSwitchEventDetail; - } - interface HTMLB2bToggleSwitchElement - extends Components.B2bToggleSwitch, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLB2bToggleSwitchElement, - ev: B2bToggleSwitchCustomEvent, - ) => 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: HTMLB2bToggleSwitchElement, - ev: B2bToggleSwitchCustomEvent, - ) => 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 HTMLB2bToggleSwitchElement: { - prototype: HTMLB2bToggleSwitchElement; - new (): HTMLB2bToggleSwitchElement; - }; - /** - * The tooltip can display additional information, and will be visible based on - * a specific trigger. - */ - interface HTMLB2bTooltipElement - extends Components.B2bTooltip, - HTMLStencilElement {} - var HTMLB2bTooltipElement: { - prototype: HTMLB2bTooltipElement; - new (): HTMLB2bTooltipElement; - }; - interface HTMLB2bWizardElement - extends Components.B2bWizard, - HTMLStencilElement {} - var HTMLB2bWizardElement: { - prototype: HTMLB2bWizardElement; - new (): HTMLB2bWizardElement; - }; - interface HTMLB2bWizardIconElement - extends Components.B2bWizardIcon, - HTMLStencilElement {} - var HTMLB2bWizardIconElement: { - prototype: HTMLB2bWizardIconElement; - new (): HTMLB2bWizardIconElement; - }; - interface HTMLB2bWizardStepElement - extends Components.B2bWizardStep, - HTMLStencilElement {} - var HTMLB2bWizardStepElement: { - prototype: HTMLB2bWizardStepElement; - new (): HTMLB2bWizardStepElement; - }; - interface HTMLElementTagNameMap { - 'b2b-alert': HTMLB2bAlertElement; - 'b2b-anchor': HTMLB2bAnchorElement; - 'b2b-breadcrumb': HTMLB2bBreadcrumbElement; - 'b2b-breadcrumb-item': HTMLB2bBreadcrumbItemElement; - 'b2b-button': HTMLB2bButtonElement; - 'b2b-calendar': HTMLB2bCalendarElement; - 'b2b-calendar-days': HTMLB2bCalendarDaysElement; - 'b2b-calendar-days-header': HTMLB2bCalendarDaysHeaderElement; - 'b2b-calendar-header': HTMLB2bCalendarHeaderElement; - 'b2b-card': HTMLB2bCardElement; - 'b2b-checkbox': HTMLB2bCheckboxElement; - 'b2b-checkbox-group': HTMLB2bCheckboxGroupElement; - 'b2b-chip-component': HTMLB2bChipComponentElement; - 'b2b-dropdown': HTMLB2bDropdownElement; - 'b2b-flyout-menu': HTMLB2bFlyoutMenuElement; - 'b2b-flyout-menu-option': HTMLB2bFlyoutMenuOptionElement; - 'b2b-grid': HTMLB2bGridElement; - 'b2b-grid-col': HTMLB2bGridColElement; - 'b2b-grid-row': HTMLB2bGridRowElement; - 'b2b-headline': HTMLB2bHeadlineElement; - 'b2b-icon': HTMLB2bIconElement; - 'b2b-icon-100': HTMLB2bIcon100Element; - 'b2b-icon-50': HTMLB2bIcon50Element; - 'b2b-input': HTMLB2bInputElement; - 'b2b-input-group': HTMLB2bInputGroupElement; - 'b2b-input-label': HTMLB2bInputLabelElement; - 'b2b-input-list': HTMLB2bInputListElement; - 'b2b-input-list-option': HTMLB2bInputListOptionElement; - 'b2b-label': HTMLB2bLabelElement; - 'b2b-modal': HTMLB2bModalElement; - 'b2b-multiselect-dropdown': HTMLB2bMultiselectDropdownElement; - 'b2b-multiselect-option': HTMLB2bMultiselectOptionElement; - 'b2b-pagination': HTMLB2bPaginationElement; - 'b2b-paragraph': HTMLB2bParagraphElement; - 'b2b-progress-bar': HTMLB2bProgressBarElement; - 'b2b-radio-button': HTMLB2bRadioButtonElement; - 'b2b-radio-group': HTMLB2bRadioGroupElement; - 'b2b-required-separator': HTMLB2bRequiredSeparatorElement; - 'b2b-rounded-icon': HTMLB2bRoundedIconElement; - 'b2b-scrollable-container': HTMLB2bScrollableContainerElement; - 'b2b-search': HTMLB2bSearchElement; - 'b2b-separator': HTMLB2bSeparatorElement; - 'b2b-spinner': HTMLB2bSpinnerElement; - 'b2b-tab': HTMLB2bTabElement; - 'b2b-tab-group': HTMLB2bTabGroupElement; - 'b2b-tab-panel': HTMLB2bTabPanelElement; - 'b2b-table': HTMLB2bTableElement; - 'b2b-table-cell': HTMLB2bTableCellElement; - 'b2b-table-header': HTMLB2bTableHeaderElement; - 'b2b-table-row': HTMLB2bTableRowElement; - 'b2b-table-rowgroup': HTMLB2bTableRowgroupElement; - 'b2b-textarea': HTMLB2bTextareaElement; - 'b2b-toggle-button': HTMLB2bToggleButtonElement; - 'b2b-toggle-chip': HTMLB2bToggleChipElement; - 'b2b-toggle-group': HTMLB2bToggleGroupElement; - 'b2b-toggle-switch': HTMLB2bToggleSwitchElement; - 'b2b-tooltip': HTMLB2bTooltipElement; - 'b2b-wizard': HTMLB2bWizardElement; - 'b2b-wizard-icon': HTMLB2bWizardIconElement; - 'b2b-wizard-step': HTMLB2bWizardStepElement; - } -} -declare namespace LocalJSX { - interface B2bAlert { - /** - * Whether or not you want to use a custom icon. Per default, it is false. - */ - 'customIcon'?: boolean; - /** - * Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. - */ - 'hasCloseButton'?: boolean; - /** - * Emits whenever the alert is closed. - */ - 'onB2b-close'?: (event: B2bAlertCustomEvent) => void; - /** - * Whether the alert is currently open. Set to true to display the alert. - */ - 'opened'?: boolean; - /** - * The size of the alert. Per default it is large. If set to small, the alert will only have an icon. - */ - 'size'?: 'large' | 'small'; - /** - * The type of alert. Per default it is info. - */ - 'type'?: 'info' | 'success' | 'warning' | 'error'; - } - interface B2bAnchor { - /** - * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user. - */ - download?: string; - /** - * The URL or URL fragment the anchor points to. This is required. - */ - href: string; - /** - * The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px. - */ - size?: 'inherit' | '100'; - /** - * The target the URL will be opened into. The default is self. - */ - target?: 'self' | 'blank' | 'parent' | 'top'; - } - interface B2bBreadcrumb { - /** - * Emits the value of the currently selected item whenever an item is selected. - */ - 'onB2b-selected'?: ( - event: B2bBreadcrumbCustomEvent, - ) => void; - } - interface B2bBreadcrumbItem { - /** - * If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state. - */ - 'active'?: boolean; - /** - * If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked. - */ - 'href'?: string; - 'onB2b-change'?: ( - event: B2bBreadcrumbItemCustomEvent, - ) => void; - /** - * The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar. - */ - 'value': any; - } - interface B2bButton { - /** - * Whether the button is currently active. Set to true when using the button to signify a permanent active state - */ - active?: boolean; - /** - * Whether the button is disabled. - */ - disabled?: boolean; - /** - * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user. - */ - download?: string; - groupDisabled?: boolean; - /** - * An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files - */ - href?: string; - /** - * Whether the button is currently loading. Set to true to hide text and display loading spinner instead - */ - loading?: boolean; - /** - * The size of the button, 100 is the default state - */ - size?: '100' | '50'; - /** - * The target of the button if it should behave like an anchor. Per default it is self. - */ - target?: 'self' | 'blank'; - /** - * The button type. Matches native HTML types. The default type is 'button'. - */ - type?: 'button' | 'submit' | 'reset'; - /** - * The button variant. If not specified, the button will be the secondary variant. - */ - variant?: 'primary' | 'secondary'; - /** - * The width of the button. Per default, it will fit the content - */ - width?: 'fit-content' | 'fit-container' | 'custom'; - } - interface B2bCalendar { - /** - * Whether the dates after the current date are disabled. By default, this is false. - */ - 'disableFutureDates'?: boolean; - /** - * Whether the previous dates from the current date are disabled. By default, this is true. - */ - 'disablePastDates'?: boolean; - /** - * Whether the dates that fall on the weekend are disabled. By default, this is false. - */ - 'disableWeekends'?: boolean; - /** - * Label for the calendar component. - */ - 'label'?: string; - /** - * Emits the selected date as Date type. - */ - 'onB2b-selected'?: ( - event: B2bCalendarCustomEvent, - ) => void; - } - interface B2bCalendarDays { - /** - * Internal whether the dates after the current date are disabled. By default, this is false. - */ - 'disableFutureDates'?: boolean; - /** - * Internal whether the dates previous to the current date are disabled. By default, this is true. - */ - 'disablePastDates'?: boolean; - /** - * Internal whether the weekends are disabled. By default, this is false. - */ - 'disableWeekends'?: boolean; - /** - * Event emitted on escape press* - */ - 'onB2b-calendar-escape'?: ( - event: B2bCalendarDaysCustomEvent, - ) => void; - /** - * Event emitted on selecting date* - */ - 'onB2b-date-selected'?: ( - event: B2bCalendarDaysCustomEvent, - ) => void; - /** - * Internal selected day - */ - 'selectedDay'?: number; - /** - * Internal selected month - */ - 'selectedMonth'?: number; - /** - * Internal selected year - */ - 'selectedYear'?: number; - } - interface B2bCalendarDaysHeader {} - interface B2bCalendarHeader { - /** - * Event emitted for next month click* - */ - 'onB2b-calendar-next-month'?: ( - event: B2bCalendarHeaderCustomEvent, - ) => void; - /** - * Event emitted for previous month click* - */ - 'onB2b-calendar-previous-month'?: ( - event: B2bCalendarHeaderCustomEvent, - ) => void; - /** - * Internal selected month - */ - 'selectedMonth'?: number; - /** - * Internal selected year - */ - 'selectedYear'?: number; - } - interface B2bCard { - /** - * Disables the card. Per default, it is false - */ - 'disabled'?: boolean; - /** - * An optional href in case the card is used to redirect on click. - */ - 'href'?: string; - /** - * Emits whenever the card is clicked on or enter is pressed while the card has focus. - */ - 'onB2b-selected'?: (event: B2bCardCustomEvent) => void; - /** - * The target of the card if used with an href. Blank per default. - */ - 'target'?: 'blank' | 'self'; - } - interface B2bCheckbox { - /** - * Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked. - */ - 'checked'?: boolean; - /** - * Whether or not the checkbox is disabled. The default value is false. - */ - 'disabled'?: boolean; - /** - * The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles. - */ - 'error'?: string; - 'groupDisabled'?: boolean; - /** - * The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint. - */ - 'hint'?: string; - /** - * If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false. - */ - 'indeterminate'?: boolean; - /** - * Whether or not the checkbox is rendered with error styles. Defaults to false. - */ - 'invalid'?: boolean; - /** - * The checkbox label. This attribute is required. - */ - 'label'?: string; - /** - * The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name. - */ - 'name'?: string; - /** - * Emits whenever the checkbox loses focus. - */ - 'onB2b-blur'?: (event: B2bCheckboxCustomEvent) => void; - /** - * Emits the checkbox value when it's checked status changes. - */ - 'onB2b-change'?: ( - event: B2bCheckboxCustomEvent, - ) => void; - /** - * Emits whenever the checkbox receives focus. - */ - 'onB2b-focus'?: (event: B2bCheckboxCustomEvent) => void; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - 'required'?: boolean; - /** - * If true, renders a standalone inline checkbox with no label and hint/error. - */ - 'standalone'?: boolean; - /** - * The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group - */ - 'value'?: any; - } - interface B2bCheckboxGroup { - /** - * The alignment of the checkbox group. Per default it is vertical - */ - 'alignment'?: 'vertical' | 'horizontal'; - /** - * Whether or not the checkbox group as a whole is disabled. Default state is false. - */ - 'disabled'?: boolean; - /** - * The checkbox group error message. Is displayed when invalid is set to true. - */ - 'error'?: string; - /** - * The checkbox group hint text. - */ - 'hint'?: string; - /** - * Whether or not the checkbox group as a whole is invalid. Set to true to display a group error. - */ - 'invalid'?: boolean; - /** - * The label for the checkbox group. This is optional. - */ - 'label'?: string; - /** - * Emits whenever a checkbox within the group is checked or unchecked. - */ - 'onB2b-group-change'?: ( - event: B2bCheckboxGroupCustomEvent, - ) => void; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - 'required'?: boolean; - } - interface B2bChipComponent { - /** - * Whether the chip is disabled. - */ - 'disabled'?: boolean; - /** - * Whether or not the chip component has a close button. Per default it is true. - */ - 'hasCloseButton'?: boolean; - /** - * The text content of the chip. It is required. - */ - 'label': string; - /** - * The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set. - */ - 'labelStyle'?: 'bold' | 'italic' | 'underline' | 'strikethrough'; - /** - * This event will be triggered when the chip element is closed - */ - 'onB2b-close'?: ( - event: B2bChipComponentCustomEvent, - ) => void; - /** - * The type of chip to represent states like success, info, warn and error. Uses default style if not set. - */ - 'type'?: 'success' | 'info' | 'warn' | 'error'; - /** - * It is only used when the chip component participates in a group - */ - 'value'?: any; - } - interface B2bDropdown { - /** - * Whether the select as a whole is disabled. Per default it is false. - */ - 'disabled'?: boolean; - /** - * An optional error message for the dropdown. This will only appear if invalid is set to true. - */ - 'error'?: string; - /** - * An optional hint text for the dropdown. - */ - 'hint'?: string; - /** - * Whether the select is currently invalid. Per default it is false. - */ - 'invalid'?: boolean; - /** - * The dropdown label. - */ - 'label'?: string; - /** - * The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility. - */ - 'name'?: string; - /** - * Emits whenever the dropdown loses focus. - */ - 'onB2b-blur'?: (event: B2bDropdownCustomEvent) => void; - /** - * Emits the option whenever a new option is chosen. - */ - 'onB2b-change'?: (event: B2bDropdownCustomEvent) => void; - /** - * Emits whenever the dropdown receives focus. - */ - 'onB2b-focus'?: (event: B2bDropdownCustomEvent) => void; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - 'required'?: boolean; - } - interface B2bFlyoutMenu { - opened?: boolean; - } - interface B2bFlyoutMenuOption { - /** - * Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected. - */ - 'disabled'?: boolean; - /** - * Emits the option as a string whenever an option is selected. - */ - 'onB2b-option-selected'?: ( - event: B2bFlyoutMenuOptionCustomEvent, - ) => void; - /** - * The option name. - */ - 'option': string; - /** - * Whether the option has a separator at the bottom. Per default it is false. - */ - 'separator'?: boolean; - } - interface B2bGrid { - /** - * The inner padding of the grid container measured in px. - */ - margin?: number; - } - interface B2bGridCol { - /** - * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row. - */ - span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; - /** - * The alignment of text placed inside of a column. Note that this will apply to all children. - */ - textAlign?: 'left' | 'center' | 'right'; - } - interface B2bGridRow { - /** - * Vertical alignment of columns. This requires the row to have a defined height. - */ - alignItems?: 'stretch' | 'flex-start' | 'center' | 'flex-end'; - /** - * The spacing in between individual columns in px. The higher the gap, the smaller the columns will be. - */ - columnGap?: number; - /** - * Horizontal alignment of columns. - */ - justify?: - | 'start' - | 'end' - | 'center' - | 'space-around' - | 'space-between' - | 'space-evenly'; - /** - * The spacing between individual rows in px. - */ - rowGap?: number; - } - /** - * Headline component to render hading tags content. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46 - */ - interface B2bHeadline { - /** - * The alignment of the headline. - */ - align?: 'left' | 'right' | 'center'; - /** - * Whether the headline should have a margin. Per default, margins are enabled. - */ - noMargin?: boolean; - /** - * Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `

`, 200 to `

` and 100 to `

` - */ - size?: '400' | '200' | '100'; - } - interface B2bIcon { - /** - * Will display a pointer cursor when hovering the icon - */ - clickable?: boolean; - /** - * The color of the icon - */ - color?: 'primary' | 'secondary' | 'inverse' | 'inherit'; - /** - * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. - */ - focusable?: boolean; - /** - * The name of the icon - */ - icon?: IconName; - /** - * @deprecated The size of the icon. In the future, only 50 and 100 will be support through new components. - */ - size?: '50' | '100' | '200'; - } - interface B2bIcon100 { - /** - * Will display a pointer cursor when hovering the icon - */ - clickable?: boolean; - /** - * The color of the icon - */ - color?: 'primary' | 'secondary' | 'inverse' | 'inherit'; - /** - * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. - */ - focusable?: boolean; - /** - * The name of the icon - */ - icon?: IconName1; - /** - * The size of the icon in pixel. Minimum is 24, maximum is 96px. - */ - size?: number; - } - interface B2bIcon50 { - /** - * Will display a pointer cursor when hovering the icon - */ - clickable?: boolean; - /** - * The color of the icon - */ - color?: 'primary' | 'secondary' | 'inverse' | 'inherit'; - /** - * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. - */ - focusable?: boolean; - /** - * The name of the icon - */ - icon?: IconName2; - } - /** - * Input component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 - */ - interface B2bInput { - /** - * When setting the autofocus to true, the input element will be focused when the page loads. - */ - 'autofocus'?: boolean; - /** - * Whether or not the input is disabled. Default is false. - */ - 'disabled'?: boolean; - /** - * The error message that is shown if the input is invalid. - */ - 'error'?: string; - 'groupDisabled'?: boolean; - /** - * The hint text that appears underneath the input field. - */ - 'hint'?: string; - /** - * Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false. - */ - 'invalid'?: boolean; - /** - * The input label. - */ - 'label'?: string; - /** - * The name of the input. Use it to group label and input together and make it more accessible. - */ - 'name'?: string; - /** - * Emits whenever the input loses focus. - */ - 'onB2b-blur'?: (event: B2bInputCustomEvent) => void; - /** - * Emits whenever the input receives focus. - */ - 'onB2b-focus'?: (event: B2bInputCustomEvent) => void; - /** - * Emits whenever the input value changes. - */ - 'onB2b-input'?: (event: B2bInputCustomEvent) => void; - /** - * A placeholder for the input field. Per default, it is null. - */ - 'placeholder'?: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - 'required'?: boolean; - /** - * The type of the input. All native HTML types except date or month are supported. Default is text. - */ - 'type'?: - | 'text' - | 'email' - | 'number' - | 'password' - | 'search' - | 'tel' - | 'url'; - /** - * The default value of the input field. If defined, it will prefill the input. - */ - 'value'?: string; - } - interface B2bInputGroup { - /** - * Whether or not the input group is disabled as a whole. Per default it is false. - */ - disabled?: boolean; - /** - * A group error text. It will only show if invalid is set to true. - */ - error?: string; - /** - * The hint text that appears underneath the input group. - */ - hint?: string; - /** - * Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false. - */ - invalid?: boolean; - } - interface B2bInputLabel { - /** - * Will render the label with a disabled style. The default value is false. - */ - disabled?: boolean; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - required?: boolean; - } - interface B2bInputList { - /** - * Whether or not the input is disabled. Default is false. - */ - 'disabled'?: boolean; - 'groupDisabled'?: boolean; - /** - * The input label. - */ - 'label'?: string; - /** - * Emits when the user clicks the clear button. - */ - 'onB2b-clear'?: (event: B2bInputListCustomEvent) => void; - /** - * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. - */ - 'optionsList'?: string[]; - /** - * The placeholder shown in the input field. - */ - 'placeholder'?: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - 'required'?: boolean; - /** - * The default value of the input field. If defined, it will prefill the input. - */ - 'value'?: string; - } - interface B2bInputListOption { - /** - * Emits the option as a string whenever an option is selected. - */ - 'onB2b-option-selected'?: ( - event: B2bInputListOptionCustomEvent, - ) => void; - /** - * The option name. - */ - 'option'?: string; - } - interface B2bLabel { - /** - * The type of the label. Per default it is neutral. - */ - type?: 'neutral' | 'info' | 'success' | 'warning' | 'error'; - } - /** - * Modal component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 - */ - interface B2bModal { - /** - * A boolean that indicates whether the modal can be dismissed by clicking in the backdrop outside the modal. - */ - 'backdropDismiss'?: boolean; - /** - * A boolean to indicate whether the modal can be dismissed by pressing the escape key on the keyboard - */ - 'escDismiss'?: boolean; - /** - * The title for the modal. This is required. - */ - 'heading': string; - /** - * This even will be triggered before the modal is closed - */ - 'onB2b-before-close'?: ( - event: B2bModalCustomEvent, - ) => void; - /** - * This even will be triggered when the modal is closed - */ - 'onB2b-close'?: (event: B2bModalCustomEvent) => void; - /** - * Whether the modal is shown or not. Default is false - */ - 'opened'?: boolean; - /** - * The size of the modal. If not specified, will assume the default size - */ - 'variant'?: 'default' | 'large'; - } - interface B2bMultiselectDropdown { - /** - * The input label. - */ - 'label': string; - /** - * The maximum amount of chips visible. Adjust this depending on available size of the dropdown. - */ - 'maxOptionsVisible'?: number; - /** - * Emits when there is a change to the currently selected values. - */ - 'onB2b-selected'?: ( - event: B2bMultiselectDropdownCustomEvent, - ) => void; - /** - * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. - */ - 'optionsList'?: string[]; - /** - * The placeholder shown in the input field. - */ - 'placeholder'?: string; - /** - * The placeholder shown in the search bar. - */ - 'searchPlaceholder'?: string; - /** - * The string displayed as the select all label. - */ - 'selectAllLabel'?: string; - /** - * The initial values to be selected in the dropdown. - */ - 'selectedValues'?: string[]; - } - interface B2bMultiselectOption { - 'indeterminate'?: boolean; - /** - * Emits the option as a string whenever an option is selected. - */ - 'onB2b-option-selected'?: ( - event: B2bMultiselectOptionCustomEvent, - ) => void; - /** - * The label of the option. - */ - 'option': string; - /** - * Whether the option is currently selected. - */ - 'selected'?: boolean; - } - interface B2bPagination { - /** - * Use this property to set programmatically the active page - */ - 'activePage'?: number; - /** - * (optional) translation to 'Go to next page' - */ - 'ariaLabelNextPage'?: string; - /** - * (optional) translation to 'Go to previous page' - */ - 'ariaLabelPreviousPage'?: string; - /** - * Will emit every time a page changes, by clicking back, next or any specific page. \ Emits a PageChangeEventDetail that includes lastSelectedPage, currentPage and direction. Direction is only when clicking back or next. - */ - 'onB2b-page-change'?: ( - event: B2bPaginationCustomEvent, - ) => void; - /** - * The total number of pages to calculate the length of pagination component - */ - 'totalPages'?: number; - } - /** - * Paragraph component to render text content. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45 - */ - interface B2bParagraph { - /** - * The alignment of the text. - */ - align?: 'left' | 'right' | 'center'; - /** - * The size of the text. - */ - size?: '50' | '100'; - /** - * The weight of the text. - */ - weight?: 'bold' | 'normal'; - } - interface B2bProgressBar { - /** - * The label of the progress bar. - */ - label?: string; - /** - * Whether the label should be displayed on the right or left of the progress bar. - */ - labelPosition?: 'left' | 'right'; - /** - * Whether the label should be displayed below or on the side of the progress bar. - */ - labelType?: 'below' | 'side'; - /** - * The percentage of progress from 0 to 100. - */ - progress?: number; - } - interface B2bRadioButton { - /** - * Whether or not the radio button is currently checked. Per default it is false. - */ - 'checked'?: boolean; - /** - * Whether or not the radio button is currently disabled. Per default it is false. - */ - 'disabled'?: boolean; - /** - * An error text. It will only show if invalid is set to true. - */ - 'error'?: string; - /** - * A hint to give additional information on the radio button. - */ - 'hint'?: string; - /** - * Whether or not the radio button should be rendered with error styles. Per default it is false. - */ - 'invalid'?: boolean; - /** - * The label of the radio button. This is required - */ - 'label': string; - /** - * The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required. - */ - 'name': string; - /** - * Emits whenever the radio button loses focus. - */ - 'onB2b-blur'?: (event: B2bRadioButtonCustomEvent) => void; - /** - * Emitted whenever the radio button is clicked. - */ - 'onB2b-change'?: ( - event: B2bRadioButtonCustomEvent, - ) => void; - /** - * Emits whenever the radio button receives focus. - */ - 'onB2b-focus'?: (event: B2bRadioButtonCustomEvent) => void; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - 'required'?: boolean; - /** - * The value of the radio button. This will be emitted when the radio button is clicked. - */ - 'value'?: string; - } - interface B2bRadioGroup { - /** - * The alignment of the radio group. Can be vertical or horizontal, per default it is vertical. - */ - 'alignment'?: 'vertical' | 'horizontal'; - /** - * Whether or not the radio group is disabled as a whole. Per default it is false. - */ - 'disabled'?: boolean; - /** - * A group error text. It will only show if invalid is set to true. - */ - 'error'?: string; - /** - * A group hint text. - */ - 'hint'?: string; - /** - * Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false. - */ - 'invalid'?: boolean; - /** - * The radio group label. This is optional. - */ - 'label'?: string; - /** - * The radio group name used to group them together programmatically. This is required. - */ - 'name': string; - /** - * Emitted whenever a radio button in the group is clicked. Will emit the value of the currently selected radio button. - */ - 'onB2b-group-change'?: ( - event: B2bRadioGroupCustomEvent, - ) => void; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - 'required'?: boolean; - } - interface B2bRequiredSeparator { - /** - * The required label. Per default it is the german 'Pflichtfeld', but can be altered. - */ - label?: string; - } - interface B2bRoundedIcon { - /** - * The color of the border of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string - */ - borderColor?: string; - /** - * The color of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string - */ - color?: string; - /** - * The color of the text or icon within the circle. Use any type including hex, rgb or css custom properties as long as you pass it as a string - */ - contentColor?: string; - } - interface B2bScrollableContainer {} - interface B2bSearch { - /** - * Whether or not the input is disabled. Default is false. - */ - 'disabled'?: boolean; - /** - * Emits whenever the user clicks the search button. Will emit the search string. - */ - 'onB2b-search'?: ( - event: B2bSearchCustomEvent, - ) => void; - /** - * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. - */ - 'optionsList'?: string[]; - /** - * The placeholder shown in the input field. - */ - 'placeholder'?: string; - /** - * The default value of the search input field. If defined, it will prefill the input. - */ - 'value'?: string; - } - interface B2bSeparator { - /** - * The alignment of the separator. Per default it is horizontal. - */ - alignment?: 'vertical' | 'horizontal'; - } - /** - * Spinner component to display loading indicator. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70 - */ - interface B2bSpinner { - /** - * The color of the spinner. - */ - color?: 'primary' | 'secondary' | 'inverse'; - /** - * The size of the spinner. - */ - size?: '50' | '100' | '200'; - } - interface B2bTab { - /** - * Whether or not the tab is currently disabled. Per default it is false. - */ - 'disabled'?: boolean; - /** - * Whether or not the tab has an error. Per default, it is false. - */ - 'invalid'?: boolean; - /** - * Emits whether the tab is selected whenever there is a change to the tabs selected status. - */ - 'onB2b-change'?: (event: B2bTabCustomEvent) => void; - /** - * Whether or not the tab is currently selected. Per default it is false. - */ - 'selected'?: boolean; - } - interface B2bTabGroup { - /** - * Emits the previous and the next tab panel whenever a new panel is selected. - */ - 'onB2b-selected'?: ( - event: B2bTabGroupCustomEvent, - ) => void; - /** - * Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation. Set it to true if you want to use external, route-based navigation. - */ - 'useRouter'?: boolean; - } - interface B2bTabPanel {} - interface B2bTable { - /** - * Emits whenever the sort direction of any column in the table changes. - */ - 'onB2b-sort-change'?: ( - event: B2bTableCustomEvent, - ) => void; - /** - * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns. Colspan behaves same as equal, but allows you to set a colspan attribute on individual columns or cells to make them span more than one column. - */ - 'size'?: TableSizes; - } - interface B2bTableCell { - /** - * Alignment of the content of the cell, by default is to the left. * - */ - align?: ContentAlignment; - /** - * Background color of the cell. This color selection does not have hover states, as it is handled from the row* - */ - color?: TableColourOptions; - /** - * How many columns the cell should span. Accepts numbers greater than one. - */ - colspan?: number; - /** - * adds a border to the right of the cell. * - */ - divider?: boolean; - size?: TableSizes; - /** - * Whether text should wrap or truncate. It will only truncate when table size is equal * - */ - textWrap?: boolean; - totalCols?: number; - } - interface B2bTableHeader { - /** - * The width of the column. Increase it to change the size of the column relative to other columns. - */ - 'colspan'?: number; - /** - * Alignment of the content of the cell, by default is to the left. * - */ - 'contentAlign'?: ContentAlignment; - /** - * adds a border to the right of the header. * - */ - 'divider'?: boolean; - /** - * @deprecated Use fixed on the rowgroup instead. Sets the header position to sticky. Use it when table is inside a scrollable container. * - */ - 'fixed'?: boolean; - /** - * Emits whenever the sort direction changes. - */ - 'onB2b-change'?: ( - event: B2bTableHeaderCustomEvent, - ) => void; - /** - * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation. - */ - 'size'?: TableSizes; - /** - * The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this. - */ - 'sortDirection'?: TableSortDirections; - /** - * Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent. - */ - 'sortId'?: string; - 'totalCols'?: number; - } - interface B2bTableRow { - 'accordionType'?: TableAccordionRowTypes; - /** - * If a selectable row is currently checked. Per default, it is false. - */ - 'checked'?: boolean; - /** - * Background color of the row. Use it semantically. This color selection have hover states * - */ - 'color'?: TableColourOptions; - /** - * Whether the row will be highlighted on mouse over * - */ - 'highlight'?: boolean; - /** - * If a selectable row is a parent for an accordion, it becomes indeterminate when some of it's children are checked, but not all. - */ - 'indeterminate'?: boolean; - /** - * Emits if the parent rowgroup is an accordion and the row is a top-level accordion row. Determines if the child rows will be shown. - */ - 'onB2b-open'?: (event: B2bTableRowCustomEvent) => void; - /** - * Emits if the row is selectable and it is selected or unselected. Emits both unique value and the checkbox status. - */ - 'onB2b-row-selected'?: ( - event: B2bTableRowCustomEvent, - ) => void; - 'selectable'?: boolean; - 'size'?: TableSizes; - /** - * The unique identifier for a selectable row. It is emitted when the row is selected. - */ - 'value'?: string; - } - interface B2bTableRowgroup { - /** - * Renders the rowgroup as an accordion. Both header and body must have accordion set to true. One table can contain multiple rowgroups of type body, each of which represents an accordion row with children. - */ - 'accordion'?: boolean; - /** - * Sets the header rowgroup position to sticky. Use this in a scrollable container. - */ - 'fixed'?: boolean; - /** - * Emits when the rowgroup as a whole is selected. - */ - 'onB2b-group-selected'?: ( - event: B2bTableRowgroupCustomEvent, - ) => void; - /** - * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false. - */ - 'opened'?: boolean; - /** - * If the rows in the rowgroup can be selected via checkmark. Per default, it is false. - */ - 'selectable'?: boolean; - 'size'?: TableSizes; - /** - * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over. - */ - 'type'?: TableRowgroupTypes; - } - /** - * Text Area Component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96 - */ - interface B2bTextarea { - /** - * Whether or not the textarea should be automatically focused on page load. Per default it is false. - */ - 'autofocus'?: boolean; - /** - * Whether or not the textarea is disabled. Per default it is false. - */ - 'disabled'?: boolean; - /** - * An optional error message that is displayed when the textarea is invalid. Per default it is undefined. - */ - 'error'?: string; - /** - * The height of the text area - */ - 'height'?: string; - /** - * An optional hint for the textarea. Per default it is undefined. - */ - 'hint'?: string; - /** - * Whether or not the textarea should be displayed with error styles. Per default it is false. - */ - 'invalid'?: boolean; - /** - * The textarea label. This is optional. - */ - 'label'?: string; - /** - * The maximum input length. Characters entered after that will not be appended to the input value. - */ - 'maxLength'?: number; - /** - * The name of the textarea. This is used to programmatically group it into a form. - */ - 'name'?: string; - /** - * Emits whenever the textarea loses focus. - */ - 'onB2b-blur'?: (event: B2bTextareaCustomEvent) => void; - /** - * Emits whenever the textarea receives focus. - */ - 'onB2b-focus'?: (event: B2bTextareaCustomEvent) => void; - /** - * Emits whenever the textarea's input changes. - */ - 'onB2b-input'?: (event: B2bTextareaCustomEvent) => void; - /** - * The textarea placeholder. It is optional and undefined by default. - */ - 'placeholder'?: string; - /** - * Adds an asterisk at the end of the label to signify that the field is required. - */ - 'required'?: boolean; - /** - * If and how the textarea is resizable. Per default it is resizable in both directions. - */ - 'resize'?: 'unset' | 'none' | 'vertical' | 'horizontal'; - /** - * The value of the textarea. Per default it is null. - */ - 'value'?: string; - } - interface B2bToggleButton { - /** - * Whether or not the toggle button is currently checked. Per default it is false. - */ - 'checked'?: boolean; - /** - * Whether or not the toggle button is currently disabled. Per default it is false. - */ - 'disabled'?: boolean; - /** - * The label of the toggle button. This is required - */ - 'label': string; - /** - * The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. - */ - 'name': string; - /** - * Emitted whenever the toggle button is clicked. - */ - 'onB2b-change'?: ( - event: B2bToggleButtonCustomEvent, - ) => void; - /** - * The value of the toggle button. This will be emitted when the toggle button is clicked. This is required - */ - 'value': string; - } - interface B2bToggleChip { - /** - * Whether or not the chip is currently active. Per default, it is false. - */ - 'active'?: boolean; - /** - * Whether or not the chip is currently disabled. Per default it is false. - */ - 'disabled'?: boolean; - /** - * The chip's label. This is required. - */ - 'label': string; - /** - * The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. - */ - 'name': string; - /** - * Emits the value whenever the toggle chip is selected. - */ - 'onB2b-selected'?: ( - event: B2bToggleChipCustomEvent, - ) => void; - /** - * The value associated with the toggle chip. This is emitted when the chip is interacted with. - */ - 'value': any; - /** - * The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey - */ - 'variant'?: 'grey' | 'white'; - } - interface B2bToggleGroup { - /** - * Whether or not the toggle group is disabled as a whole. Per default it is false. - */ - 'disabled'?: boolean; + interface B2bAlert { + /** + * Whether or not you want to use a custom icon. Per default, it is false. + */ + "customIcon": boolean; + /** + * Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. + */ + "hasCloseButton": boolean; + /** + * Whether the alert is currently open. Set to true to display the alert. + */ + "opened": boolean; + /** + * The size of the alert. Per default it is large. If set to small, the alert will only have an icon. + */ + "size": 'large' | 'small'; + /** + * The type of alert. Per default it is info. + */ + "type": 'info' | 'success' | 'warning' | 'error'; + } + interface B2bAnchor { + /** + * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user. + */ + "download": string; + /** + * The URL or URL fragment the anchor points to. This is required. + */ + "href": string; + /** + * The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px. + */ + "size": 'inherit' | '100'; + /** + * The target the URL will be opened into. The default is self. + */ + "target": 'self' | 'blank' | 'parent' | 'top'; + } + interface B2bBreadcrumb { + } + interface B2bBreadcrumbItem { + /** + * If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state. + */ + "active": boolean; + /** + * If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked. + */ + "href": string; + /** + * The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar. + */ + "value": any; + } + interface B2bButton { + /** + * Whether the button is currently active. Set to true when using the button to signify a permanent active state + */ + "active": boolean; + /** + * Whether the button is disabled. + */ + "disabled": boolean; + /** + * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user. + */ + "download"?: string; + "groupDisabled": boolean; + /** + * An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files + */ + "href"?: string; + /** + * Whether the button is currently loading. Set to true to hide text and display loading spinner instead + */ + "loading": boolean; + /** + * Manually set focus to button element + */ + "setFocus": () => Promise; + /** + * The size of the button, 100 is the default state + */ + "size": '100' | '50'; + /** + * The target of the button if it should behave like an anchor. Per default it is self. + */ + "target"?: 'self' | 'blank'; + /** + * The button type. Matches native HTML types. The default type is 'button'. + */ + "type": 'button' | 'submit' | 'reset'; + /** + * The button variant. If not specified, the button will be the secondary variant. + */ + "variant": 'primary' | 'secondary'; + /** + * The width of the button. Per default, it will fit the content + */ + "width": 'fit-content' | 'fit-container' | 'custom'; + } + interface B2bCalendar { + /** + * Whether the dates after the current date are disabled. By default, this is false. + */ + "disableFutureDates": boolean; + /** + * Whether the previous dates from the current date are disabled. By default, this is true. + */ + "disablePastDates": boolean; + /** + * Whether the dates that fall on the weekend are disabled. By default, this is false. + */ + "disableWeekends": boolean; + /** + * Label for the calendar component. + */ + "label": string; + } + interface B2bCalendarDays { + /** + * Internal whether the dates after the current date are disabled. By default, this is false. + */ + "disableFutureDates": boolean; + /** + * Internal whether the dates previous to the current date are disabled. By default, this is true. + */ + "disablePastDates": boolean; + /** + * Internal whether the weekends are disabled. By default, this is false. + */ + "disableWeekends": boolean; + /** + * Internal selected day + */ + "selectedDay": number; + /** + * Internal selected month + */ + "selectedMonth": number; + /** + * Internal selected year + */ + "selectedYear": number; + } + interface B2bCalendarDaysHeader { + } + interface B2bCalendarHeader { + /** + * Internal selected month + */ + "selectedMonth": number; + /** + * Internal selected year + */ + "selectedYear": number; + } + interface B2bCard { + /** + * Disables the card. Per default, it is false + */ + "disabled": boolean; + /** + * An optional href in case the card is used to redirect on click. + */ + "href"?: string; + /** + * The target of the card if used with an href. Blank per default. + */ + "target"?: 'blank' | 'self'; + } + interface B2bCheckbox { + /** + * Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked. + */ + "checked": boolean; + /** + * Whether or not the checkbox is disabled. The default value is false. + */ + "disabled": boolean; + /** + * The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles. + */ + "error"?: string; + "groupDisabled": boolean; + /** + * The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint. + */ + "hint"?: string; + /** + * If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false. + */ + "indeterminate": boolean; + /** + * Whether or not the checkbox is rendered with error styles. Defaults to false. + */ + "invalid"?: boolean; + /** + * The checkbox label. This attribute is required. + */ + "label"?: string; + /** + * The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name. + */ + "name"?: string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + /** + * If true, renders a standalone inline checkbox with no label and hint/error. + */ + "standalone": boolean; + /** + * The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group + */ + "value"?: any; + } + interface B2bCheckboxGroup { + /** + * The alignment of the checkbox group. Per default it is vertical + */ + "alignment": 'vertical' | 'horizontal'; + /** + * Whether or not the checkbox group as a whole is disabled. Default state is false. + */ + "disabled": boolean; + /** + * The checkbox group error message. Is displayed when invalid is set to true. + */ + "error"?: string; + /** + * The checkbox group hint text. + */ + "hint"?: string; + /** + * Whether or not the checkbox group as a whole is invalid. Set to true to display a group error. + */ + "invalid": boolean; + /** + * The label for the checkbox group. This is optional. + */ + "label": string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + } + interface B2bChipComponent { + /** + * Whether the chip is disabled. + */ + "disabled": boolean; + /** + * Whether or not the chip component has a close button. Per default it is true. + */ + "hasCloseButton": boolean; + /** + * The text content of the chip. It is required. + */ + "label": string; + /** + * The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set. + */ + "labelStyle"?: 'bold' | 'italic' | 'underline' | 'strikethrough'; + /** + * The type of chip to represent states like success, info, warn and error. Uses default style if not set. + */ + "type"?: 'success' | 'info' | 'warn' | 'error'; + /** + * It is only used when the chip component participates in a group + */ + "value"?: any; + } + interface B2bDropdown { + /** + * Whether the select as a whole is disabled. Per default it is false. + */ + "disabled": boolean; + /** + * An optional error message for the dropdown. This will only appear if invalid is set to true. + */ + "error"?: string; + /** + * An optional hint text for the dropdown. + */ + "hint"?: string; + /** + * Whether the select is currently invalid. Per default it is false. + */ + "invalid": boolean; + /** + * The dropdown label. + */ + "label": string; + /** + * The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility. + */ + "name"?: string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + } + interface B2bFlyoutMenu { + "opened": boolean; + } + interface B2bFlyoutMenuOption { + /** + * Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected. + */ + "disabled": boolean; + /** + * The option name. + */ + "option": string; + /** + * Whether the option has a separator at the bottom. Per default it is false. + */ + "separator": boolean; + } + interface B2bGrid { + /** + * The inner padding of the grid container measured in px. + */ + "margin": number; + } + interface B2bGridCol { + /** + * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row. + */ + "span": | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12; + /** + * The alignment of text placed inside of a column. Note that this will apply to all children. + */ + "textAlign": 'left' | 'center' | 'right'; + } + interface B2bGridRow { + /** + * Vertical alignment of columns. This requires the row to have a defined height. + */ + "alignItems": 'stretch' | 'flex-start' | 'center' | 'flex-end'; + /** + * The spacing in between individual columns in px. The higher the gap, the smaller the columns will be. + */ + "columnGap": number; + /** + * Horizontal alignment of columns. + */ + "justify": | 'start' + | 'end' + | 'center' + | 'space-around' + | 'space-between' + | 'space-evenly'; + /** + * The spacing between individual rows in px. + */ + "rowGap": number; + } /** - * The toggle group name used to group them together programmatically. This is required. - */ - 'name': string; + * Headline component to render hading tags content. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46 + */ + interface B2bHeadline { + /** + * The alignment of the headline. + */ + "align": 'left' | 'right' | 'center'; + /** + * Whether the headline should have a margin. Per default, margins are enabled. + */ + "noMargin": boolean; + /** + * Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `

`, 200 to `

` and 100 to `

` + */ + "size": '400' | '200' | '100'; + } + interface B2bIcon { + /** + * Will display a pointer cursor when hovering the icon + */ + "clickable": boolean; + /** + * The color of the icon + */ + "color": 'primary' | 'secondary' | 'inverse' | 'inherit'; + /** + * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. + */ + "focusable": boolean; + /** + * The name of the icon + */ + "icon": IconName; + /** + * @deprecated The size of the icon. In the future, only 50 and 100 will be support through new components. + */ + "size": '50' | '100' | '200'; + } + interface B2bIcon100 { + /** + * Will display a pointer cursor when hovering the icon + */ + "clickable": boolean; + /** + * The color of the icon + */ + "color": 'primary' | 'secondary' | 'inverse' | 'inherit'; + /** + * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. + */ + "focusable": boolean; + /** + * The name of the icon + */ + "icon": IconName1; + /** + * The size of the icon in pixel. Minimum is 24, maximum is 96px. + */ + "size": number; + } + interface B2bIcon50 { + /** + * Will display a pointer cursor when hovering the icon + */ + "clickable": boolean; + /** + * The color of the icon + */ + "color": 'primary' | 'secondary' | 'inverse' | 'inherit'; + /** + * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. + */ + "focusable": boolean; + /** + * The name of the icon + */ + "icon": IconName2; + } /** - * Emitted whenever a toggle button in the group is clicked. Will emit the value of the currently selected radio button. - */ - 'onB2b-group-change'?: ( - event: B2bToggleGroupCustomEvent, - ) => void; - } - interface B2bToggleSwitch { + * Input component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 + */ + interface B2bInput { + /** + * When setting the autofocus to true, the input element will be focused when the page loads. + */ + "autofocus": boolean; + /** + * Simulate the native behavior of type="search" to emit an empty string when the input is cleared + */ + "clearInput": () => Promise; + /** + * Whether or not the input is disabled. Default is false. + */ + "disabled": boolean; + /** + * The error message that is shown if the input is invalid. + */ + "error"?: string; + "groupDisabled": boolean; + /** + * The hint text that appears underneath the input field. + */ + "hint"?: string; + /** + * The alignment of the text. + */ + "inputTextAlign": 'left' | 'right' | 'center'; + /** + * Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false. + */ + "invalid": boolean; + /** + * The input label. + */ + "label": string; + /** + * The name of the input. Use it to group label and input together and make it more accessible. + */ + "name"?: string; + /** + * A placeholder for the input field. Per default, it is null. + */ + "placeholder": string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + /** + * Manually set focus to the element + */ + "setFocus": () => Promise; + /** + * The type of the input. All native HTML types except date or month are supported. Default is text. + */ + "type": | 'text' + | 'email' + | 'number' + | 'password' + | 'search' + | 'tel' + | 'url'; + /** + * The default value of the input field. If defined, it will prefill the input. + */ + "value": string; + } + interface B2bInputGroup { + /** + * Whether or not the input group is disabled as a whole. Per default it is false. + */ + "disabled": boolean; + /** + * A group error text. It will only show if invalid is set to true. + */ + "error"?: string; + /** + * The hint text that appears underneath the input group. + */ + "hint"?: string; + /** + * Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false. + */ + "invalid": boolean; + } + interface B2bInputLabel { + /** + * Will render the label with a disabled style. The default value is false. + */ + "disabled": boolean; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + } + interface B2bInputList { + /** + * Whether or not the input is disabled. Default is false. + */ + "disabled": boolean; + "groupDisabled": boolean; + /** + * The input label. + */ + "label": string; + /** + * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. + */ + "optionsList": string[]; + /** + * The placeholder shown in the input field. + */ + "placeholder": string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + /** + * The default value of the input field. If defined, it will prefill the input. + */ + "value": string; + } + interface B2bInputListOption { + /** + * The option name. + */ + "option": string; + } + interface B2bLabel { + /** + * The type of the label. Per default it is neutral. + */ + "type": 'neutral' | 'info' | 'success' | 'warning' | 'error'; + } /** - * Whether or not the toggle button is currently disabled. Per default it is false. - */ - 'disabled'?: boolean; + * Modal component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 + */ + interface B2bModal { + /** + * A boolean that indicates whether the modal can be dismissed by clicking in the backdrop outside the modal. + */ + "backdropDismiss": boolean; + /** + * A boolean to indicate whether the modal can be dismissed by pressing the escape key on the keyboard + */ + "escDismiss": boolean; + /** + * The title for the modal. This is required. + */ + "heading": string; + /** + * Whether the modal is shown or not. Default is false + */ + "opened": boolean; + /** + * The size of the modal. If not specified, will assume the default size + */ + "variant": 'default' | 'large'; + } + interface B2bMultiselectDropdown { + /** + * The input label. + */ + "label": string; + /** + * The maximum amount of chips visible. Adjust this depending on available size of the dropdown. + */ + "maxOptionsVisible": number; + /** + * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. + */ + "optionsList": string[]; + /** + * The placeholder shown in the input field. + */ + "placeholder": string; + /** + * The placeholder shown in the search bar. + */ + "searchPlaceholder": string; + /** + * The string displayed as the select all label. + */ + "selectAllLabel": string; + /** + * The initial values to be selected in the dropdown. + */ + "selectedValues": string[]; + } + interface B2bMultiselectOption { + "indeterminate"?: boolean; + /** + * The label of the option. + */ + "option": string; + /** + * Whether the option is currently selected. + */ + "selected": boolean; + } + interface B2bPagination { + /** + * Use this property to set programmatically the active page + */ + "activePage": number; + /** + * (optional) translation to 'Go to next page' + */ + "ariaLabelNextPage": string; + /** + * (optional) translation to 'Go to previous page' + */ + "ariaLabelPreviousPage": string; + /** + * The total number of pages to calculate the length of pagination component + */ + "totalPages": number; + } /** - * An optional label for the toggle switch. - */ - 'label'?: string; + * Paragraph component to render text content. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45 + */ + interface B2bParagraph { + /** + * The alignment of the text. + */ + "align": 'left' | 'right' | 'center'; + /** + * The size of the text. + */ + "size": '50' | '100'; + /** + * The weight of the text. + */ + "weight": 'bold' | 'normal'; + } + interface B2bProgressBar { + /** + * The label of the progress bar. + */ + "label"?: string; + /** + * Whether the label should be displayed on the right or left of the progress bar. + */ + "labelPosition"?: 'left' | 'right'; + /** + * Whether the label should be displayed below or on the side of the progress bar. + */ + "labelType"?: 'below' | 'side'; + /** + * The percentage of progress from 0 to 100. + */ + "progress": number; + } + interface B2bRadioButton { + /** + * Whether or not the radio button is currently checked. Per default it is false. + */ + "checked": boolean; + /** + * Whether or not the radio button is currently disabled. Per default it is false. + */ + "disabled": boolean; + /** + * An error text. It will only show if invalid is set to true. + */ + "error"?: string; + /** + * A hint to give additional information on the radio button. + */ + "hint"?: string; + /** + * Whether or not the radio button should be rendered with error styles. Per default it is false. + */ + "invalid": boolean; + /** + * The label of the radio button. This is required + */ + "label": string; + /** + * The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required. + */ + "name": string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + /** + * The value of the radio button. This will be emitted when the radio button is clicked. + */ + "value"?: string; + } + interface B2bRadioGroup { + /** + * The alignment of the radio group. Can be vertical or horizontal, per default it is vertical. + */ + "alignment": 'vertical' | 'horizontal'; + /** + * Whether or not the radio group is disabled as a whole. Per default it is false. + */ + "disabled": boolean; + /** + * A group error text. It will only show if invalid is set to true. + */ + "error"?: string; + /** + * A group hint text. + */ + "hint"?: string; + /** + * Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false. + */ + "invalid": boolean; + /** + * The radio group label. This is optional. + */ + "label": string; + /** + * The radio group name used to group them together programmatically. This is required. + */ + "name": string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + } + interface B2bRequiredSeparator { + /** + * The required label. Per default it is the german 'Pflichtfeld', but can be altered. + */ + "label": string; + } + interface B2bRoundedIcon { + /** + * The color of the border of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string + */ + "borderColor": string; + /** + * The color of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string + */ + "color": string; + /** + * The color of the text or icon within the circle. Use any type including hex, rgb or css custom properties as long as you pass it as a string + */ + "contentColor": string; + } + interface B2bScrollableContainer { + } + interface B2bSearch { + /** + * Whether or not the input is disabled. Default is false. + */ + "disabled": boolean; + /** + * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. + */ + "optionsList": string[]; + /** + * The placeholder shown in the input field. + */ + "placeholder": string; + /** + * The default value of the search input field. If defined, it will prefill the input. + */ + "value": string; + } + interface B2bSeparator { + /** + * The alignment of the separator. Per default it is horizontal. + */ + "alignment": 'vertical' | 'horizontal'; + } /** - * The alignment of the toggle switch label. - */ - 'labelPosition'?: 'left' | 'right'; + * Spinner component to display loading indicator. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70 + */ + interface B2bSpinner { + /** + * The color of the spinner. + */ + "color": 'primary' | 'secondary' | 'inverse'; + /** + * The size of the spinner. + */ + "size": '50' | '100' | '200'; + } + interface B2bTab { + /** + * Whether or not the tab is currently disabled. Per default it is false. + */ + "disabled": boolean; + /** + * Whether or not the tab has an error. Per default, it is false. + */ + "invalid": boolean; + /** + * Whether or not the tab is currently selected. Per default it is false. + */ + "selected": boolean; + } + interface B2bTabGroup { + /** + * Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation. Set it to true if you want to use external, route-based navigation. + */ + "useRouter": boolean; + } + interface B2bTabPanel { + } + interface B2bTable { + /** + * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns. Colspan behaves same as equal, but allows you to set a colspan attribute on individual columns or cells to make them span more than one column. + */ + "size": TableSizes; + } + interface B2bTableCell { + /** + * Alignment of the content of the cell, by default is to the left. * + */ + "align": ContentAlignment; + /** + * Background color of the cell. This color selection does not have hover states, as it is handled from the row* + */ + "color": TableColourOptions; + /** + * How many columns the cell should span. Accepts numbers greater than one. + */ + "colspan"?: number; + /** + * adds a border to the right of the cell. * + */ + "divider": boolean; + "size": TableSizes; + /** + * Whether text should wrap or truncate. It will only truncate when table size is equal * + */ + "textWrap": boolean; + "totalCols"?: number; + } + interface B2bTableHeader { + /** + * The width of the column. Increase it to change the size of the column relative to other columns. + */ + "colspan"?: number; + /** + * Alignment of the content of the cell, by default is to the left. * + */ + "contentAlign": ContentAlignment; + /** + * adds a border to the right of the header. * + */ + "divider": boolean; + /** + * @deprecated Use fixed on the rowgroup instead. Sets the header position to sticky. Use it when table is inside a scrollable container. * + */ + "fixed": boolean; + /** + * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation. + */ + "size": TableSizes; + /** + * The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this. + */ + "sortDirection": TableSortDirections; + /** + * Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent. + */ + "sortId"?: string; + "totalCols"?: number; + } + interface B2bTableRow { + "accordionType": TableAccordionRowTypes; + /** + * If a selectable row is currently checked. Per default, it is false. + */ + "checked": boolean; + /** + * Background color of the row. Use it semantically. This color selection have hover states * + */ + "color": TableColourOptions; + /** + * Whether the row will be highlighted on mouse over * + */ + "highlight": boolean; + /** + * If a selectable row is a parent for an accordion, it becomes indeterminate when some of it's children are checked, but not all. + */ + "indeterminate": boolean; + "selectable": boolean; + "size"?: TableSizes; + /** + * Will toggle the accordion opened or closed. + */ + "toggleAccordion": (isOpen: boolean) => Promise; + /** + * The unique identifier for a selectable row. It is emitted when the row is selected. + */ + "value"?: string; + } + interface B2bTableRowgroup { + /** + * Renders the rowgroup as an accordion. Both header and body must have accordion set to true. One table can contain multiple rowgroups of type body, each of which represents an accordion row with children. + */ + "accordion": boolean; + /** + * Sets the header rowgroup position to sticky. Use this in a scrollable container. + */ + "fixed": boolean; + /** + * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false. + */ + "opened": boolean; + /** + * If the rows in the rowgroup can be selected via checkmark. Per default, it is false. + */ + "selectable": boolean; + "size": TableSizes; + /** + * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over. + */ + "type": TableRowgroupTypes; + } /** - * The toggle name. Use this if the toggle switch is used in a form group. - */ - 'name'?: string; + * Text Area Component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96 + */ + interface B2bTextarea { + /** + * Whether or not the textarea should be automatically focused on page load. Per default it is false. + */ + "autofocus": boolean; + /** + * Whether or not the textarea is disabled. Per default it is false. + */ + "disabled": boolean; + /** + * An optional error message that is displayed when the textarea is invalid. Per default it is undefined. + */ + "error"?: string; + /** + * The height of the text area + */ + "height"?: string; + /** + * An optional hint for the textarea. Per default it is undefined. + */ + "hint"?: string; + /** + * Whether or not the textarea should be displayed with error styles. Per default it is false. + */ + "invalid": boolean; + /** + * The textarea label. This is optional. + */ + "label": string; + /** + * The maximum input length. Characters entered after that will not be appended to the input value. + */ + "maxLength"?: number; + /** + * The name of the textarea. This is used to programmatically group it into a form. + */ + "name"?: string; + /** + * The textarea placeholder. It is optional and undefined by default. + */ + "placeholder"?: string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required": boolean; + /** + * If and how the textarea is resizable. Per default it is resizable in both directions. + */ + "resize"?: | 'unset' + | 'none' + | 'vertical' + | 'horizontal'; + /** + * The value of the textarea. Per default it is null. + */ + "value": string; + } + interface B2bToggleButton { + /** + * Whether or not the toggle button is currently checked. Per default it is false. + */ + "checked": boolean; + /** + * Whether or not the toggle button is currently disabled. Per default it is false. + */ + "disabled": boolean; + /** + * The label of the toggle button. This is required + */ + "label": string; + /** + * The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. + */ + "name": string; + /** + * The value of the toggle button. This will be emitted when the toggle button is clicked. This is required + */ + "value": string; + } + interface B2bToggleChip { + /** + * Whether or not the chip is currently active. Per default, it is false. + */ + "active": boolean; + /** + * Whether or not the chip is currently disabled. Per default it is false. + */ + "disabled": boolean; + /** + * The chip's label. This is required. + */ + "label": string; + /** + * The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. + */ + "name": string; + /** + * The value associated with the toggle chip. This is emitted when the chip is interacted with. + */ + "value": any; + /** + * The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey + */ + "variant": 'grey' | 'white'; + } + interface B2bToggleGroup { + /** + * Whether or not the toggle group is disabled as a whole. Per default it is false. + */ + "disabled": boolean; + /** + * The toggle group name used to group them together programmatically. This is required. + */ + "name": string; + } + interface B2bToggleSwitch { + /** + * Whether or not the toggle button is currently disabled. Per default it is false. + */ + "disabled": boolean; + /** + * An optional label for the toggle switch. + */ + "label"?: string; + /** + * The alignment of the toggle switch label. + */ + "labelPosition": 'left' | 'right'; + /** + * The toggle name. Use this if the toggle switch is used in a form group. + */ + "name"?: string; + /** + * Whether or not the toggle button is currently on or off. Per default it is off. + */ + "state": boolean; + } /** - * Emits the toggle switch value when it's state changes. - */ - 'onB2b-change'?: ( - event: B2bToggleSwitchCustomEvent, - ) => void; + * The tooltip can display additional information, and will be visible based on + * a specific trigger. + */ + interface B2bTooltip { + /** + * The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content. + */ + "content": string; + /** + * Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility. + */ + "opened": boolean; + /** + * Position of the tooltip. + */ + "position": 'left' | 'right' | 'top' | 'bottom'; + /** + * The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover. + */ + "trigger": 'hover' | 'focus' | 'custom'; + } + interface B2bWizard { + /** + * The current active step + */ + "activeStep": WizardSteps | '0'; + /** + * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number + */ + "checkIcon": boolean; + /** + * By default, is false, where the wizard will handle steps states. If set to true, steps state must be handled manually. + */ + "custom": boolean; + } + interface B2bWizardIcon { + /** + * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number + */ + "checkIcon": boolean; + /** + * The state of the step + */ + "state": WizardStatus; + /** + * The step number + */ + "step": WizardSteps; + } + interface B2bWizardStep { + /** + * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number + */ + "checkIcon": boolean; + /** + * Use when wizard has property custom true. The state of the step + */ + "state": WizardStatus; + /** + * Use when wizard has property custom true. The step number + */ + "step": WizardSteps; + } +} +export interface B2bAlertCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bAlertElement; +} +export interface B2bBreadcrumbCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bBreadcrumbElement; +} +export interface B2bBreadcrumbItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bBreadcrumbItemElement; +} +export interface B2bCalendarCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bCalendarElement; +} +export interface B2bCalendarDaysCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bCalendarDaysElement; +} +export interface B2bCalendarHeaderCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bCalendarHeaderElement; +} +export interface B2bCardCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bCardElement; +} +export interface B2bCheckboxCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bCheckboxElement; +} +export interface B2bCheckboxGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bCheckboxGroupElement; +} +export interface B2bChipComponentCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bChipComponentElement; +} +export interface B2bDropdownCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bDropdownElement; +} +export interface B2bFlyoutMenuOptionCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bFlyoutMenuOptionElement; +} +export interface B2bInputCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bInputElement; +} +export interface B2bInputListCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bInputListElement; +} +export interface B2bInputListOptionCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bInputListOptionElement; +} +export interface B2bModalCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bModalElement; +} +export interface B2bMultiselectDropdownCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bMultiselectDropdownElement; +} +export interface B2bMultiselectOptionCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bMultiselectOptionElement; +} +export interface B2bPaginationCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bPaginationElement; +} +export interface B2bRadioButtonCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bRadioButtonElement; +} +export interface B2bRadioGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bRadioGroupElement; +} +export interface B2bSearchCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bSearchElement; +} +export interface B2bTabCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bTabElement; +} +export interface B2bTabGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bTabGroupElement; +} +export interface B2bTableCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bTableElement; +} +export interface B2bTableHeaderCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bTableHeaderElement; +} +export interface B2bTableRowCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bTableRowElement; +} +export interface B2bTableRowgroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bTableRowgroupElement; +} +export interface B2bTextareaCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bTextareaElement; +} +export interface B2bToggleButtonCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bToggleButtonElement; +} +export interface B2bToggleChipCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bToggleChipElement; +} +export interface B2bToggleGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bToggleGroupElement; +} +export interface B2bToggleSwitchCustomEvent extends CustomEvent { + detail: T; + target: HTMLB2bToggleSwitchElement; +} +declare global { + interface HTMLB2bAlertElementEventMap { + "b2b-close": void; + } + interface HTMLB2bAlertElement extends Components.B2bAlert, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bAlertElement, ev: B2bAlertCustomEvent) => 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: HTMLB2bAlertElement, ev: B2bAlertCustomEvent) => 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 HTMLB2bAlertElement: { + prototype: HTMLB2bAlertElement; + new (): HTMLB2bAlertElement; + }; + interface HTMLB2bAnchorElement extends Components.B2bAnchor, HTMLStencilElement { + } + var HTMLB2bAnchorElement: { + prototype: HTMLB2bAnchorElement; + new (): HTMLB2bAnchorElement; + }; + interface HTMLB2bBreadcrumbElementEventMap { + "b2b-selected": BreadCrumbChangeEventDetail; + } + interface HTMLB2bBreadcrumbElement extends Components.B2bBreadcrumb, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bBreadcrumbElement, ev: B2bBreadcrumbCustomEvent) => 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: HTMLB2bBreadcrumbElement, ev: B2bBreadcrumbCustomEvent) => 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 HTMLB2bBreadcrumbElement: { + prototype: HTMLB2bBreadcrumbElement; + new (): HTMLB2bBreadcrumbElement; + }; + interface HTMLB2bBreadcrumbItemElementEventMap { + "b2b-change": BreadCrumbChangeEventDetail; + } + interface HTMLB2bBreadcrumbItemElement extends Components.B2bBreadcrumbItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bBreadcrumbItemElement, ev: B2bBreadcrumbItemCustomEvent) => 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: HTMLB2bBreadcrumbItemElement, ev: B2bBreadcrumbItemCustomEvent) => 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 HTMLB2bBreadcrumbItemElement: { + prototype: HTMLB2bBreadcrumbItemElement; + new (): HTMLB2bBreadcrumbItemElement; + }; + interface HTMLB2bButtonElement extends Components.B2bButton, HTMLStencilElement { + } + var HTMLB2bButtonElement: { + prototype: HTMLB2bButtonElement; + new (): HTMLB2bButtonElement; + }; + interface HTMLB2bCalendarElementEventMap { + "b2b-selected": CalendarEventDetail; + } + interface HTMLB2bCalendarElement extends Components.B2bCalendar, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bCalendarElement, ev: B2bCalendarCustomEvent) => 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: HTMLB2bCalendarElement, ev: B2bCalendarCustomEvent) => 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 HTMLB2bCalendarElement: { + prototype: HTMLB2bCalendarElement; + new (): HTMLB2bCalendarElement; + }; + interface HTMLB2bCalendarDaysElementEventMap { + "b2b-calendar-escape": EscapePressed; + "b2b-date-selected": DateSelectedEventDetail; + } + interface HTMLB2bCalendarDaysElement extends Components.B2bCalendarDays, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bCalendarDaysElement, ev: B2bCalendarDaysCustomEvent) => 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: HTMLB2bCalendarDaysElement, ev: B2bCalendarDaysCustomEvent) => 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 HTMLB2bCalendarDaysElement: { + prototype: HTMLB2bCalendarDaysElement; + new (): HTMLB2bCalendarDaysElement; + }; + interface HTMLB2bCalendarDaysHeaderElement extends Components.B2bCalendarDaysHeader, HTMLStencilElement { + } + var HTMLB2bCalendarDaysHeaderElement: { + prototype: HTMLB2bCalendarDaysHeaderElement; + new (): HTMLB2bCalendarDaysHeaderElement; + }; + interface HTMLB2bCalendarHeaderElementEventMap { + "b2b-calendar-previous-month": PreviousMonth; + "b2b-calendar-next-month": NextMonth; + } + interface HTMLB2bCalendarHeaderElement extends Components.B2bCalendarHeader, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bCalendarHeaderElement, ev: B2bCalendarHeaderCustomEvent) => 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: HTMLB2bCalendarHeaderElement, ev: B2bCalendarHeaderCustomEvent) => 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 HTMLB2bCalendarHeaderElement: { + prototype: HTMLB2bCalendarHeaderElement; + new (): HTMLB2bCalendarHeaderElement; + }; + interface HTMLB2bCardElementEventMap { + "b2b-selected": void; + } + interface HTMLB2bCardElement extends Components.B2bCard, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bCardElement, ev: B2bCardCustomEvent) => 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: HTMLB2bCardElement, ev: B2bCardCustomEvent) => 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 HTMLB2bCardElement: { + prototype: HTMLB2bCardElement; + new (): HTMLB2bCardElement; + }; + interface HTMLB2bCheckboxElementEventMap { + "b2b-focus": FocusEvent; + "b2b-blur": FocusEvent; + "b2b-change": CheckboxEventDetail; + } + interface HTMLB2bCheckboxElement extends Components.B2bCheckbox, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bCheckboxElement, ev: B2bCheckboxCustomEvent) => 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: HTMLB2bCheckboxElement, ev: B2bCheckboxCustomEvent) => 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 HTMLB2bCheckboxElement: { + prototype: HTMLB2bCheckboxElement; + new (): HTMLB2bCheckboxElement; + }; + interface HTMLB2bCheckboxGroupElementEventMap { + "b2b-group-change": CheckboxEventDetail; + } + interface HTMLB2bCheckboxGroupElement extends Components.B2bCheckboxGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bCheckboxGroupElement, ev: B2bCheckboxGroupCustomEvent) => 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: HTMLB2bCheckboxGroupElement, ev: B2bCheckboxGroupCustomEvent) => 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 HTMLB2bCheckboxGroupElement: { + prototype: HTMLB2bCheckboxGroupElement; + new (): HTMLB2bCheckboxGroupElement; + }; + interface HTMLB2bChipComponentElementEventMap { + "b2b-close": ChipComponentEventDetail; + } + interface HTMLB2bChipComponentElement extends Components.B2bChipComponent, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bChipComponentElement, ev: B2bChipComponentCustomEvent) => 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: HTMLB2bChipComponentElement, ev: B2bChipComponentCustomEvent) => 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 HTMLB2bChipComponentElement: { + prototype: HTMLB2bChipComponentElement; + new (): HTMLB2bChipComponentElement; + }; + interface HTMLB2bDropdownElementEventMap { + "b2b-change": string; + "b2b-focus": FocusEvent; + "b2b-blur": FocusEvent; + } + interface HTMLB2bDropdownElement extends Components.B2bDropdown, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bDropdownElement, ev: B2bDropdownCustomEvent) => 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: HTMLB2bDropdownElement, ev: B2bDropdownCustomEvent) => 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 HTMLB2bDropdownElement: { + prototype: HTMLB2bDropdownElement; + new (): HTMLB2bDropdownElement; + }; + interface HTMLB2bFlyoutMenuElement extends Components.B2bFlyoutMenu, HTMLStencilElement { + } + var HTMLB2bFlyoutMenuElement: { + prototype: HTMLB2bFlyoutMenuElement; + new (): HTMLB2bFlyoutMenuElement; + }; + interface HTMLB2bFlyoutMenuOptionElementEventMap { + "b2b-option-selected": OptionSelectedEventDetail; + } + interface HTMLB2bFlyoutMenuOptionElement extends Components.B2bFlyoutMenuOption, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bFlyoutMenuOptionElement, ev: B2bFlyoutMenuOptionCustomEvent) => 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: HTMLB2bFlyoutMenuOptionElement, ev: B2bFlyoutMenuOptionCustomEvent) => 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 HTMLB2bFlyoutMenuOptionElement: { + prototype: HTMLB2bFlyoutMenuOptionElement; + new (): HTMLB2bFlyoutMenuOptionElement; + }; + interface HTMLB2bGridElement extends Components.B2bGrid, HTMLStencilElement { + } + var HTMLB2bGridElement: { + prototype: HTMLB2bGridElement; + new (): HTMLB2bGridElement; + }; + interface HTMLB2bGridColElement extends Components.B2bGridCol, HTMLStencilElement { + } + var HTMLB2bGridColElement: { + prototype: HTMLB2bGridColElement; + new (): HTMLB2bGridColElement; + }; + interface HTMLB2bGridRowElement extends Components.B2bGridRow, HTMLStencilElement { + } + var HTMLB2bGridRowElement: { + prototype: HTMLB2bGridRowElement; + new (): HTMLB2bGridRowElement; + }; /** - * Whether or not the toggle button is currently on or off. Per default it is off. + * Headline component to render hading tags content. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46 */ - 'state'?: boolean; - } - /** - * The tooltip can display additional information, and will be visible based on - * a specific trigger. - */ - interface B2bTooltip { + interface HTMLB2bHeadlineElement extends Components.B2bHeadline, HTMLStencilElement { + } + var HTMLB2bHeadlineElement: { + prototype: HTMLB2bHeadlineElement; + new (): HTMLB2bHeadlineElement; + }; + interface HTMLB2bIconElement extends Components.B2bIcon, HTMLStencilElement { + } + var HTMLB2bIconElement: { + prototype: HTMLB2bIconElement; + new (): HTMLB2bIconElement; + }; + interface HTMLB2bIcon100Element extends Components.B2bIcon100, HTMLStencilElement { + } + var HTMLB2bIcon100Element: { + prototype: HTMLB2bIcon100Element; + new (): HTMLB2bIcon100Element; + }; + interface HTMLB2bIcon50Element extends Components.B2bIcon50, HTMLStencilElement { + } + var HTMLB2bIcon50Element: { + prototype: HTMLB2bIcon50Element; + new (): HTMLB2bIcon50Element; + }; + interface HTMLB2bInputElementEventMap { + "b2b-focus": FocusEvent; + "b2b-blur": FocusEvent; + "b2b-input": InputChangeEvent; + } /** - * The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content. - */ - content?: string; + * Input component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 + */ + interface HTMLB2bInputElement extends Components.B2bInput, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bInputElement, ev: B2bInputCustomEvent) => 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: HTMLB2bInputElement, ev: B2bInputCustomEvent) => 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 HTMLB2bInputElement: { + prototype: HTMLB2bInputElement; + new (): HTMLB2bInputElement; + }; + interface HTMLB2bInputGroupElement extends Components.B2bInputGroup, HTMLStencilElement { + } + var HTMLB2bInputGroupElement: { + prototype: HTMLB2bInputGroupElement; + new (): HTMLB2bInputGroupElement; + }; + interface HTMLB2bInputLabelElement extends Components.B2bInputLabel, HTMLStencilElement { + } + var HTMLB2bInputLabelElement: { + prototype: HTMLB2bInputLabelElement; + new (): HTMLB2bInputLabelElement; + }; + interface HTMLB2bInputListElementEventMap { + "b2b-clear": InputClear; + } + interface HTMLB2bInputListElement extends Components.B2bInputList, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bInputListElement, ev: B2bInputListCustomEvent) => 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: HTMLB2bInputListElement, ev: B2bInputListCustomEvent) => 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 HTMLB2bInputListElement: { + prototype: HTMLB2bInputListElement; + new (): HTMLB2bInputListElement; + }; + interface HTMLB2bInputListOptionElementEventMap { + "b2b-option-selected": OptionSelectedEventDetail; + } + interface HTMLB2bInputListOptionElement extends Components.B2bInputListOption, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bInputListOptionElement, ev: B2bInputListOptionCustomEvent) => 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: HTMLB2bInputListOptionElement, ev: B2bInputListOptionCustomEvent) => 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 HTMLB2bInputListOptionElement: { + prototype: HTMLB2bInputListOptionElement; + new (): HTMLB2bInputListOptionElement; + }; + interface HTMLB2bLabelElement extends Components.B2bLabel, HTMLStencilElement { + } + var HTMLB2bLabelElement: { + prototype: HTMLB2bLabelElement; + new (): HTMLB2bLabelElement; + }; + interface HTMLB2bModalElementEventMap { + "b2b-close": void; + "b2b-before-close": BeforeCloseEventDetail; + } /** - * Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility. - */ - opened?: boolean; + * Modal component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 + */ + interface HTMLB2bModalElement extends Components.B2bModal, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bModalElement, ev: B2bModalCustomEvent) => 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: HTMLB2bModalElement, ev: B2bModalCustomEvent) => 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 HTMLB2bModalElement: { + prototype: HTMLB2bModalElement; + new (): HTMLB2bModalElement; + }; + interface HTMLB2bMultiselectDropdownElementEventMap { + "b2b-selected": string[]; + } + interface HTMLB2bMultiselectDropdownElement extends Components.B2bMultiselectDropdown, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bMultiselectDropdownElement, ev: B2bMultiselectDropdownCustomEvent) => 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: HTMLB2bMultiselectDropdownElement, ev: B2bMultiselectDropdownCustomEvent) => 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 HTMLB2bMultiselectDropdownElement: { + prototype: HTMLB2bMultiselectDropdownElement; + new (): HTMLB2bMultiselectDropdownElement; + }; + interface HTMLB2bMultiselectOptionElementEventMap { + "b2b-option-selected": MultiSelectOptionEventDetail; + } + interface HTMLB2bMultiselectOptionElement extends Components.B2bMultiselectOption, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bMultiselectOptionElement, ev: B2bMultiselectOptionCustomEvent) => 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: HTMLB2bMultiselectOptionElement, ev: B2bMultiselectOptionCustomEvent) => 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 HTMLB2bMultiselectOptionElement: { + prototype: HTMLB2bMultiselectOptionElement; + new (): HTMLB2bMultiselectOptionElement; + }; + interface HTMLB2bPaginationElementEventMap { + "b2b-page-change": PageChangeEventDetail; + } + interface HTMLB2bPaginationElement extends Components.B2bPagination, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bPaginationElement, ev: B2bPaginationCustomEvent) => 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: HTMLB2bPaginationElement, ev: B2bPaginationCustomEvent) => 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 HTMLB2bPaginationElement: { + prototype: HTMLB2bPaginationElement; + new (): HTMLB2bPaginationElement; + }; /** - * Position of the tooltip. + * Paragraph component to render text content. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45 */ - position?: 'left' | 'right' | 'top' | 'bottom'; + interface HTMLB2bParagraphElement extends Components.B2bParagraph, HTMLStencilElement { + } + var HTMLB2bParagraphElement: { + prototype: HTMLB2bParagraphElement; + new (): HTMLB2bParagraphElement; + }; + interface HTMLB2bProgressBarElement extends Components.B2bProgressBar, HTMLStencilElement { + } + var HTMLB2bProgressBarElement: { + prototype: HTMLB2bProgressBarElement; + new (): HTMLB2bProgressBarElement; + }; + interface HTMLB2bRadioButtonElementEventMap { + "b2b-focus": FocusEvent; + "b2b-blur": FocusEvent; + "b2b-change": RadioEventDetail; + } + interface HTMLB2bRadioButtonElement extends Components.B2bRadioButton, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bRadioButtonElement, ev: B2bRadioButtonCustomEvent) => 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: HTMLB2bRadioButtonElement, ev: B2bRadioButtonCustomEvent) => 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 HTMLB2bRadioButtonElement: { + prototype: HTMLB2bRadioButtonElement; + new (): HTMLB2bRadioButtonElement; + }; + interface HTMLB2bRadioGroupElementEventMap { + "b2b-group-change": RadioEventDetail; + } + interface HTMLB2bRadioGroupElement extends Components.B2bRadioGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bRadioGroupElement, ev: B2bRadioGroupCustomEvent) => 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: HTMLB2bRadioGroupElement, ev: B2bRadioGroupCustomEvent) => 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 HTMLB2bRadioGroupElement: { + prototype: HTMLB2bRadioGroupElement; + new (): HTMLB2bRadioGroupElement; + }; + interface HTMLB2bRequiredSeparatorElement extends Components.B2bRequiredSeparator, HTMLStencilElement { + } + var HTMLB2bRequiredSeparatorElement: { + prototype: HTMLB2bRequiredSeparatorElement; + new (): HTMLB2bRequiredSeparatorElement; + }; + interface HTMLB2bRoundedIconElement extends Components.B2bRoundedIcon, HTMLStencilElement { + } + var HTMLB2bRoundedIconElement: { + prototype: HTMLB2bRoundedIconElement; + new (): HTMLB2bRoundedIconElement; + }; + interface HTMLB2bScrollableContainerElement extends Components.B2bScrollableContainer, HTMLStencilElement { + } + var HTMLB2bScrollableContainerElement: { + prototype: HTMLB2bScrollableContainerElement; + new (): HTMLB2bScrollableContainerElement; + }; + interface HTMLB2bSearchElementEventMap { + "b2b-search": SearchClickEventDetail; + } + interface HTMLB2bSearchElement extends Components.B2bSearch, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bSearchElement, ev: B2bSearchCustomEvent) => 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: HTMLB2bSearchElement, ev: B2bSearchCustomEvent) => 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 HTMLB2bSearchElement: { + prototype: HTMLB2bSearchElement; + new (): HTMLB2bSearchElement; + }; + interface HTMLB2bSeparatorElement extends Components.B2bSeparator, HTMLStencilElement { + } + var HTMLB2bSeparatorElement: { + prototype: HTMLB2bSeparatorElement; + new (): HTMLB2bSeparatorElement; + }; /** - * The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover. + * Spinner component to display loading indicator. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70 */ - trigger?: 'hover' | 'focus' | 'custom'; - } - interface B2bWizard { + interface HTMLB2bSpinnerElement extends Components.B2bSpinner, HTMLStencilElement { + } + var HTMLB2bSpinnerElement: { + prototype: HTMLB2bSpinnerElement; + new (): HTMLB2bSpinnerElement; + }; + interface HTMLB2bTabElementEventMap { + "b2b-change": boolean; + } + interface HTMLB2bTabElement extends Components.B2bTab, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bTabElement, ev: B2bTabCustomEvent) => 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: HTMLB2bTabElement, ev: B2bTabCustomEvent) => 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 HTMLB2bTabElement: { + prototype: HTMLB2bTabElement; + new (): HTMLB2bTabElement; + }; + interface HTMLB2bTabGroupElementEventMap { + "b2b-selected": TabChangeEventDetail; + } + interface HTMLB2bTabGroupElement extends Components.B2bTabGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bTabGroupElement, ev: B2bTabGroupCustomEvent) => 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: HTMLB2bTabGroupElement, ev: B2bTabGroupCustomEvent) => 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 HTMLB2bTabGroupElement: { + prototype: HTMLB2bTabGroupElement; + new (): HTMLB2bTabGroupElement; + }; + interface HTMLB2bTabPanelElement extends Components.B2bTabPanel, HTMLStencilElement { + } + var HTMLB2bTabPanelElement: { + prototype: HTMLB2bTabPanelElement; + new (): HTMLB2bTabPanelElement; + }; + interface HTMLB2bTableElementEventMap { + "b2b-sort-change": ColumnSortChangeEventDetail; + } + interface HTMLB2bTableElement extends Components.B2bTable, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bTableElement, ev: B2bTableCustomEvent) => 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: HTMLB2bTableElement, ev: B2bTableCustomEvent) => 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 HTMLB2bTableElement: { + prototype: HTMLB2bTableElement; + new (): HTMLB2bTableElement; + }; + interface HTMLB2bTableCellElement extends Components.B2bTableCell, HTMLStencilElement { + } + var HTMLB2bTableCellElement: { + prototype: HTMLB2bTableCellElement; + new (): HTMLB2bTableCellElement; + }; + interface HTMLB2bTableHeaderElementEventMap { + "b2b-change": TableSortDirections; + } + interface HTMLB2bTableHeaderElement extends Components.B2bTableHeader, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bTableHeaderElement, ev: B2bTableHeaderCustomEvent) => 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: HTMLB2bTableHeaderElement, ev: B2bTableHeaderCustomEvent) => 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 HTMLB2bTableHeaderElement: { + prototype: HTMLB2bTableHeaderElement; + new (): HTMLB2bTableHeaderElement; + }; + interface HTMLB2bTableRowElementEventMap { + "b2b-open": boolean; + "b2b-row-selected": CheckboxEventDetail1; + } + interface HTMLB2bTableRowElement extends Components.B2bTableRow, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bTableRowElement, ev: B2bTableRowCustomEvent) => 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: HTMLB2bTableRowElement, ev: B2bTableRowCustomEvent) => 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 HTMLB2bTableRowElement: { + prototype: HTMLB2bTableRowElement; + new (): HTMLB2bTableRowElement; + }; + interface HTMLB2bTableRowgroupElementEventMap { + "b2b-group-selected": TableAccordionSelectedEventDetail; + } + interface HTMLB2bTableRowgroupElement extends Components.B2bTableRowgroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bTableRowgroupElement, ev: B2bTableRowgroupCustomEvent) => 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: HTMLB2bTableRowgroupElement, ev: B2bTableRowgroupCustomEvent) => 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 HTMLB2bTableRowgroupElement: { + prototype: HTMLB2bTableRowgroupElement; + new (): HTMLB2bTableRowgroupElement; + }; + interface HTMLB2bTextareaElementEventMap { + "b2b-focus": FocusEvent; + "b2b-blur": FocusEvent; + "b2b-input": InputChangeEvent; + } /** - * The current active step - */ - activeStep?: WizardSteps | '0'; + * Text Area Component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96 + */ + interface HTMLB2bTextareaElement extends Components.B2bTextarea, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bTextareaElement, ev: B2bTextareaCustomEvent) => 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: HTMLB2bTextareaElement, ev: B2bTextareaCustomEvent) => 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 HTMLB2bTextareaElement: { + prototype: HTMLB2bTextareaElement; + new (): HTMLB2bTextareaElement; + }; + interface HTMLB2bToggleButtonElementEventMap { + "b2b-change": ToggleButtonEventDetail; + } + interface HTMLB2bToggleButtonElement extends Components.B2bToggleButton, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bToggleButtonElement, ev: B2bToggleButtonCustomEvent) => 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: HTMLB2bToggleButtonElement, ev: B2bToggleButtonCustomEvent) => 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 HTMLB2bToggleButtonElement: { + prototype: HTMLB2bToggleButtonElement; + new (): HTMLB2bToggleButtonElement; + }; + interface HTMLB2bToggleChipElementEventMap { + "b2b-selected": ToggleChipEventDetail; + } + interface HTMLB2bToggleChipElement extends Components.B2bToggleChip, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bToggleChipElement, ev: B2bToggleChipCustomEvent) => 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: HTMLB2bToggleChipElement, ev: B2bToggleChipCustomEvent) => 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 HTMLB2bToggleChipElement: { + prototype: HTMLB2bToggleChipElement; + new (): HTMLB2bToggleChipElement; + }; + interface HTMLB2bToggleGroupElementEventMap { + "b2b-group-change": ToggleButtonEventDetail; + } + interface HTMLB2bToggleGroupElement extends Components.B2bToggleGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bToggleGroupElement, ev: B2bToggleGroupCustomEvent) => 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: HTMLB2bToggleGroupElement, ev: B2bToggleGroupCustomEvent) => 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 HTMLB2bToggleGroupElement: { + prototype: HTMLB2bToggleGroupElement; + new (): HTMLB2bToggleGroupElement; + }; + interface HTMLB2bToggleSwitchElementEventMap { + "b2b-change": ToggleSwitchEventDetail; + } + interface HTMLB2bToggleSwitchElement extends Components.B2bToggleSwitch, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLB2bToggleSwitchElement, ev: B2bToggleSwitchCustomEvent) => 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: HTMLB2bToggleSwitchElement, ev: B2bToggleSwitchCustomEvent) => 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 HTMLB2bToggleSwitchElement: { + prototype: HTMLB2bToggleSwitchElement; + new (): HTMLB2bToggleSwitchElement; + }; /** - * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number + * The tooltip can display additional information, and will be visible based on + * a specific trigger. */ - checkIcon?: boolean; + interface HTMLB2bTooltipElement extends Components.B2bTooltip, HTMLStencilElement { + } + var HTMLB2bTooltipElement: { + prototype: HTMLB2bTooltipElement; + new (): HTMLB2bTooltipElement; + }; + interface HTMLB2bWizardElement extends Components.B2bWizard, HTMLStencilElement { + } + var HTMLB2bWizardElement: { + prototype: HTMLB2bWizardElement; + new (): HTMLB2bWizardElement; + }; + interface HTMLB2bWizardIconElement extends Components.B2bWizardIcon, HTMLStencilElement { + } + var HTMLB2bWizardIconElement: { + prototype: HTMLB2bWizardIconElement; + new (): HTMLB2bWizardIconElement; + }; + interface HTMLB2bWizardStepElement extends Components.B2bWizardStep, HTMLStencilElement { + } + var HTMLB2bWizardStepElement: { + prototype: HTMLB2bWizardStepElement; + new (): HTMLB2bWizardStepElement; + }; + interface HTMLElementTagNameMap { + "b2b-alert": HTMLB2bAlertElement; + "b2b-anchor": HTMLB2bAnchorElement; + "b2b-breadcrumb": HTMLB2bBreadcrumbElement; + "b2b-breadcrumb-item": HTMLB2bBreadcrumbItemElement; + "b2b-button": HTMLB2bButtonElement; + "b2b-calendar": HTMLB2bCalendarElement; + "b2b-calendar-days": HTMLB2bCalendarDaysElement; + "b2b-calendar-days-header": HTMLB2bCalendarDaysHeaderElement; + "b2b-calendar-header": HTMLB2bCalendarHeaderElement; + "b2b-card": HTMLB2bCardElement; + "b2b-checkbox": HTMLB2bCheckboxElement; + "b2b-checkbox-group": HTMLB2bCheckboxGroupElement; + "b2b-chip-component": HTMLB2bChipComponentElement; + "b2b-dropdown": HTMLB2bDropdownElement; + "b2b-flyout-menu": HTMLB2bFlyoutMenuElement; + "b2b-flyout-menu-option": HTMLB2bFlyoutMenuOptionElement; + "b2b-grid": HTMLB2bGridElement; + "b2b-grid-col": HTMLB2bGridColElement; + "b2b-grid-row": HTMLB2bGridRowElement; + "b2b-headline": HTMLB2bHeadlineElement; + "b2b-icon": HTMLB2bIconElement; + "b2b-icon-100": HTMLB2bIcon100Element; + "b2b-icon-50": HTMLB2bIcon50Element; + "b2b-input": HTMLB2bInputElement; + "b2b-input-group": HTMLB2bInputGroupElement; + "b2b-input-label": HTMLB2bInputLabelElement; + "b2b-input-list": HTMLB2bInputListElement; + "b2b-input-list-option": HTMLB2bInputListOptionElement; + "b2b-label": HTMLB2bLabelElement; + "b2b-modal": HTMLB2bModalElement; + "b2b-multiselect-dropdown": HTMLB2bMultiselectDropdownElement; + "b2b-multiselect-option": HTMLB2bMultiselectOptionElement; + "b2b-pagination": HTMLB2bPaginationElement; + "b2b-paragraph": HTMLB2bParagraphElement; + "b2b-progress-bar": HTMLB2bProgressBarElement; + "b2b-radio-button": HTMLB2bRadioButtonElement; + "b2b-radio-group": HTMLB2bRadioGroupElement; + "b2b-required-separator": HTMLB2bRequiredSeparatorElement; + "b2b-rounded-icon": HTMLB2bRoundedIconElement; + "b2b-scrollable-container": HTMLB2bScrollableContainerElement; + "b2b-search": HTMLB2bSearchElement; + "b2b-separator": HTMLB2bSeparatorElement; + "b2b-spinner": HTMLB2bSpinnerElement; + "b2b-tab": HTMLB2bTabElement; + "b2b-tab-group": HTMLB2bTabGroupElement; + "b2b-tab-panel": HTMLB2bTabPanelElement; + "b2b-table": HTMLB2bTableElement; + "b2b-table-cell": HTMLB2bTableCellElement; + "b2b-table-header": HTMLB2bTableHeaderElement; + "b2b-table-row": HTMLB2bTableRowElement; + "b2b-table-rowgroup": HTMLB2bTableRowgroupElement; + "b2b-textarea": HTMLB2bTextareaElement; + "b2b-toggle-button": HTMLB2bToggleButtonElement; + "b2b-toggle-chip": HTMLB2bToggleChipElement; + "b2b-toggle-group": HTMLB2bToggleGroupElement; + "b2b-toggle-switch": HTMLB2bToggleSwitchElement; + "b2b-tooltip": HTMLB2bTooltipElement; + "b2b-wizard": HTMLB2bWizardElement; + "b2b-wizard-icon": HTMLB2bWizardIconElement; + "b2b-wizard-step": HTMLB2bWizardStepElement; + } +} +declare namespace LocalJSX { + interface B2bAlert { + /** + * Whether or not you want to use a custom icon. Per default, it is false. + */ + "customIcon"?: boolean; + /** + * Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. + */ + "hasCloseButton"?: boolean; + /** + * Emits whenever the alert is closed. + */ + "onB2b-close"?: (event: B2bAlertCustomEvent) => void; + /** + * Whether the alert is currently open. Set to true to display the alert. + */ + "opened"?: boolean; + /** + * The size of the alert. Per default it is large. If set to small, the alert will only have an icon. + */ + "size"?: 'large' | 'small'; + /** + * The type of alert. Per default it is info. + */ + "type"?: 'info' | 'success' | 'warning' | 'error'; + } + interface B2bAnchor { + /** + * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user. + */ + "download"?: string; + /** + * The URL or URL fragment the anchor points to. This is required. + */ + "href": string; + /** + * The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px. + */ + "size"?: 'inherit' | '100'; + /** + * The target the URL will be opened into. The default is self. + */ + "target"?: 'self' | 'blank' | 'parent' | 'top'; + } + interface B2bBreadcrumb { + /** + * Emits the value of the currently selected item whenever an item is selected. + */ + "onB2b-selected"?: (event: B2bBreadcrumbCustomEvent) => void; + } + interface B2bBreadcrumbItem { + /** + * If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state. + */ + "active"?: boolean; + /** + * If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked. + */ + "href"?: string; + "onB2b-change"?: (event: B2bBreadcrumbItemCustomEvent) => void; + /** + * The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar. + */ + "value": any; + } + interface B2bButton { + /** + * Whether the button is currently active. Set to true when using the button to signify a permanent active state + */ + "active"?: boolean; + /** + * Whether the button is disabled. + */ + "disabled"?: boolean; + /** + * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user. + */ + "download"?: string; + "groupDisabled"?: boolean; + /** + * An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files + */ + "href"?: string; + /** + * Whether the button is currently loading. Set to true to hide text and display loading spinner instead + */ + "loading"?: boolean; + /** + * The size of the button, 100 is the default state + */ + "size"?: '100' | '50'; + /** + * The target of the button if it should behave like an anchor. Per default it is self. + */ + "target"?: 'self' | 'blank'; + /** + * The button type. Matches native HTML types. The default type is 'button'. + */ + "type"?: 'button' | 'submit' | 'reset'; + /** + * The button variant. If not specified, the button will be the secondary variant. + */ + "variant"?: 'primary' | 'secondary'; + /** + * The width of the button. Per default, it will fit the content + */ + "width"?: 'fit-content' | 'fit-container' | 'custom'; + } + interface B2bCalendar { + /** + * Whether the dates after the current date are disabled. By default, this is false. + */ + "disableFutureDates"?: boolean; + /** + * Whether the previous dates from the current date are disabled. By default, this is true. + */ + "disablePastDates"?: boolean; + /** + * Whether the dates that fall on the weekend are disabled. By default, this is false. + */ + "disableWeekends"?: boolean; + /** + * Label for the calendar component. + */ + "label"?: string; + /** + * Emits the selected date as Date type. + */ + "onB2b-selected"?: (event: B2bCalendarCustomEvent) => void; + } + interface B2bCalendarDays { + /** + * Internal whether the dates after the current date are disabled. By default, this is false. + */ + "disableFutureDates"?: boolean; + /** + * Internal whether the dates previous to the current date are disabled. By default, this is true. + */ + "disablePastDates"?: boolean; + /** + * Internal whether the weekends are disabled. By default, this is false. + */ + "disableWeekends"?: boolean; + /** + * Event emitted on escape press* + */ + "onB2b-calendar-escape"?: (event: B2bCalendarDaysCustomEvent) => void; + /** + * Event emitted on selecting date* + */ + "onB2b-date-selected"?: (event: B2bCalendarDaysCustomEvent) => void; + /** + * Internal selected day + */ + "selectedDay"?: number; + /** + * Internal selected month + */ + "selectedMonth"?: number; + /** + * Internal selected year + */ + "selectedYear"?: number; + } + interface B2bCalendarDaysHeader { + } + interface B2bCalendarHeader { + /** + * Event emitted for next month click* + */ + "onB2b-calendar-next-month"?: (event: B2bCalendarHeaderCustomEvent) => void; + /** + * Event emitted for previous month click* + */ + "onB2b-calendar-previous-month"?: (event: B2bCalendarHeaderCustomEvent) => void; + /** + * Internal selected month + */ + "selectedMonth"?: number; + /** + * Internal selected year + */ + "selectedYear"?: number; + } + interface B2bCard { + /** + * Disables the card. Per default, it is false + */ + "disabled"?: boolean; + /** + * An optional href in case the card is used to redirect on click. + */ + "href"?: string; + /** + * Emits whenever the card is clicked on or enter is pressed while the card has focus. + */ + "onB2b-selected"?: (event: B2bCardCustomEvent) => void; + /** + * The target of the card if used with an href. Blank per default. + */ + "target"?: 'blank' | 'self'; + } + interface B2bCheckbox { + /** + * Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked. + */ + "checked"?: boolean; + /** + * Whether or not the checkbox is disabled. The default value is false. + */ + "disabled"?: boolean; + /** + * The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles. + */ + "error"?: string; + "groupDisabled"?: boolean; + /** + * The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint. + */ + "hint"?: string; + /** + * If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false. + */ + "indeterminate"?: boolean; + /** + * Whether or not the checkbox is rendered with error styles. Defaults to false. + */ + "invalid"?: boolean; + /** + * The checkbox label. This attribute is required. + */ + "label"?: string; + /** + * The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name. + */ + "name"?: string; + /** + * Emits whenever the checkbox loses focus. + */ + "onB2b-blur"?: (event: B2bCheckboxCustomEvent) => void; + /** + * Emits the checkbox value when it's checked status changes. + */ + "onB2b-change"?: (event: B2bCheckboxCustomEvent) => void; + /** + * Emits whenever the checkbox receives focus. + */ + "onB2b-focus"?: (event: B2bCheckboxCustomEvent) => void; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + /** + * If true, renders a standalone inline checkbox with no label and hint/error. + */ + "standalone"?: boolean; + /** + * The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group + */ + "value"?: any; + } + interface B2bCheckboxGroup { + /** + * The alignment of the checkbox group. Per default it is vertical + */ + "alignment"?: 'vertical' | 'horizontal'; + /** + * Whether or not the checkbox group as a whole is disabled. Default state is false. + */ + "disabled"?: boolean; + /** + * The checkbox group error message. Is displayed when invalid is set to true. + */ + "error"?: string; + /** + * The checkbox group hint text. + */ + "hint"?: string; + /** + * Whether or not the checkbox group as a whole is invalid. Set to true to display a group error. + */ + "invalid"?: boolean; + /** + * The label for the checkbox group. This is optional. + */ + "label"?: string; + /** + * Emits whenever a checkbox within the group is checked or unchecked. + */ + "onB2b-group-change"?: (event: B2bCheckboxGroupCustomEvent) => void; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + } + interface B2bChipComponent { + /** + * Whether the chip is disabled. + */ + "disabled"?: boolean; + /** + * Whether or not the chip component has a close button. Per default it is true. + */ + "hasCloseButton"?: boolean; + /** + * The text content of the chip. It is required. + */ + "label": string; + /** + * The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set. + */ + "labelStyle"?: 'bold' | 'italic' | 'underline' | 'strikethrough'; + /** + * This event will be triggered when the chip element is closed + */ + "onB2b-close"?: (event: B2bChipComponentCustomEvent) => void; + /** + * The type of chip to represent states like success, info, warn and error. Uses default style if not set. + */ + "type"?: 'success' | 'info' | 'warn' | 'error'; + /** + * It is only used when the chip component participates in a group + */ + "value"?: any; + } + interface B2bDropdown { + /** + * Whether the select as a whole is disabled. Per default it is false. + */ + "disabled"?: boolean; + /** + * An optional error message for the dropdown. This will only appear if invalid is set to true. + */ + "error"?: string; + /** + * An optional hint text for the dropdown. + */ + "hint"?: string; + /** + * Whether the select is currently invalid. Per default it is false. + */ + "invalid"?: boolean; + /** + * The dropdown label. + */ + "label"?: string; + /** + * The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility. + */ + "name"?: string; + /** + * Emits whenever the dropdown loses focus. + */ + "onB2b-blur"?: (event: B2bDropdownCustomEvent) => void; + /** + * Emits the option whenever a new option is chosen. + */ + "onB2b-change"?: (event: B2bDropdownCustomEvent) => void; + /** + * Emits whenever the dropdown receives focus. + */ + "onB2b-focus"?: (event: B2bDropdownCustomEvent) => void; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + } + interface B2bFlyoutMenu { + "opened"?: boolean; + } + interface B2bFlyoutMenuOption { + /** + * Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected. + */ + "disabled"?: boolean; + /** + * Emits the option as a string whenever an option is selected. + */ + "onB2b-option-selected"?: (event: B2bFlyoutMenuOptionCustomEvent) => void; + /** + * The option name. + */ + "option": string; + /** + * Whether the option has a separator at the bottom. Per default it is false. + */ + "separator"?: boolean; + } + interface B2bGrid { + /** + * The inner padding of the grid container measured in px. + */ + "margin"?: number; + } + interface B2bGridCol { + /** + * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row. + */ + "span"?: | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12; + /** + * The alignment of text placed inside of a column. Note that this will apply to all children. + */ + "textAlign"?: 'left' | 'center' | 'right'; + } + interface B2bGridRow { + /** + * Vertical alignment of columns. This requires the row to have a defined height. + */ + "alignItems"?: 'stretch' | 'flex-start' | 'center' | 'flex-end'; + /** + * The spacing in between individual columns in px. The higher the gap, the smaller the columns will be. + */ + "columnGap"?: number; + /** + * Horizontal alignment of columns. + */ + "justify"?: | 'start' + | 'end' + | 'center' + | 'space-around' + | 'space-between' + | 'space-evenly'; + /** + * The spacing between individual rows in px. + */ + "rowGap"?: number; + } /** - * By default, is false, where the wizard will handle steps states. If set to true, steps state must be handled manually. - */ - custom?: boolean; - } - interface B2bWizardIcon { + * Headline component to render hading tags content. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46 + */ + interface B2bHeadline { + /** + * The alignment of the headline. + */ + "align"?: 'left' | 'right' | 'center'; + /** + * Whether the headline should have a margin. Per default, margins are enabled. + */ + "noMargin"?: boolean; + /** + * Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `

`, 200 to `

` and 100 to `

` + */ + "size"?: '400' | '200' | '100'; + } + interface B2bIcon { + /** + * Will display a pointer cursor when hovering the icon + */ + "clickable"?: boolean; + /** + * The color of the icon + */ + "color"?: 'primary' | 'secondary' | 'inverse' | 'inherit'; + /** + * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. + */ + "focusable"?: boolean; + /** + * The name of the icon + */ + "icon"?: IconName; + /** + * @deprecated The size of the icon. In the future, only 50 and 100 will be support through new components. + */ + "size"?: '50' | '100' | '200'; + } + interface B2bIcon100 { + /** + * Will display a pointer cursor when hovering the icon + */ + "clickable"?: boolean; + /** + * The color of the icon + */ + "color"?: 'primary' | 'secondary' | 'inverse' | 'inherit'; + /** + * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. + */ + "focusable"?: boolean; + /** + * The name of the icon + */ + "icon"?: IconName1; + /** + * The size of the icon in pixel. Minimum is 24, maximum is 96px. + */ + "size"?: number; + } + interface B2bIcon50 { + /** + * Will display a pointer cursor when hovering the icon + */ + "clickable"?: boolean; + /** + * The color of the icon + */ + "color"?: 'primary' | 'secondary' | 'inverse' | 'inherit'; + /** + * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. + */ + "focusable"?: boolean; + /** + * The name of the icon + */ + "icon"?: IconName2; + } /** - * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number - */ - checkIcon?: boolean; + * Input component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 + */ + interface B2bInput { + /** + * When setting the autofocus to true, the input element will be focused when the page loads. + */ + "autofocus"?: boolean; + /** + * Whether or not the input is disabled. Default is false. + */ + "disabled"?: boolean; + /** + * The error message that is shown if the input is invalid. + */ + "error"?: string; + "groupDisabled"?: boolean; + /** + * The hint text that appears underneath the input field. + */ + "hint"?: string; + /** + * The alignment of the text. + */ + "inputTextAlign"?: 'left' | 'right' | 'center'; + /** + * Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false. + */ + "invalid"?: boolean; + /** + * The input label. + */ + "label"?: string; + /** + * The name of the input. Use it to group label and input together and make it more accessible. + */ + "name"?: string; + /** + * Emits whenever the input loses focus. + */ + "onB2b-blur"?: (event: B2bInputCustomEvent) => void; + /** + * Emits whenever the input receives focus. + */ + "onB2b-focus"?: (event: B2bInputCustomEvent) => void; + /** + * Emits whenever the input value changes. + */ + "onB2b-input"?: (event: B2bInputCustomEvent) => void; + /** + * A placeholder for the input field. Per default, it is null. + */ + "placeholder"?: string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + /** + * The type of the input. All native HTML types except date or month are supported. Default is text. + */ + "type"?: | 'text' + | 'email' + | 'number' + | 'password' + | 'search' + | 'tel' + | 'url'; + /** + * The default value of the input field. If defined, it will prefill the input. + */ + "value"?: string; + } + interface B2bInputGroup { + /** + * Whether or not the input group is disabled as a whole. Per default it is false. + */ + "disabled"?: boolean; + /** + * A group error text. It will only show if invalid is set to true. + */ + "error"?: string; + /** + * The hint text that appears underneath the input group. + */ + "hint"?: string; + /** + * Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false. + */ + "invalid"?: boolean; + } + interface B2bInputLabel { + /** + * Will render the label with a disabled style. The default value is false. + */ + "disabled"?: boolean; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + } + interface B2bInputList { + /** + * Whether or not the input is disabled. Default is false. + */ + "disabled"?: boolean; + "groupDisabled"?: boolean; + /** + * The input label. + */ + "label"?: string; + /** + * Emits when the user clicks the clear button. + */ + "onB2b-clear"?: (event: B2bInputListCustomEvent) => void; + /** + * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. + */ + "optionsList"?: string[]; + /** + * The placeholder shown in the input field. + */ + "placeholder"?: string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + /** + * The default value of the input field. If defined, it will prefill the input. + */ + "value"?: string; + } + interface B2bInputListOption { + /** + * Emits the option as a string whenever an option is selected. + */ + "onB2b-option-selected"?: (event: B2bInputListOptionCustomEvent) => void; + /** + * The option name. + */ + "option"?: string; + } + interface B2bLabel { + /** + * The type of the label. Per default it is neutral. + */ + "type"?: 'neutral' | 'info' | 'success' | 'warning' | 'error'; + } /** - * The state of the step - */ - state?: WizardStatus; + * Modal component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 + */ + interface B2bModal { + /** + * A boolean that indicates whether the modal can be dismissed by clicking in the backdrop outside the modal. + */ + "backdropDismiss"?: boolean; + /** + * A boolean to indicate whether the modal can be dismissed by pressing the escape key on the keyboard + */ + "escDismiss"?: boolean; + /** + * The title for the modal. This is required. + */ + "heading": string; + /** + * This even will be triggered before the modal is closed + */ + "onB2b-before-close"?: (event: B2bModalCustomEvent) => void; + /** + * This even will be triggered when the modal is closed + */ + "onB2b-close"?: (event: B2bModalCustomEvent) => void; + /** + * Whether the modal is shown or not. Default is false + */ + "opened"?: boolean; + /** + * The size of the modal. If not specified, will assume the default size + */ + "variant"?: 'default' | 'large'; + } + interface B2bMultiselectDropdown { + /** + * The input label. + */ + "label": string; + /** + * The maximum amount of chips visible. Adjust this depending on available size of the dropdown. + */ + "maxOptionsVisible"?: number; + /** + * Emits when there is a change to the currently selected values. + */ + "onB2b-selected"?: (event: B2bMultiselectDropdownCustomEvent) => void; + /** + * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. + */ + "optionsList"?: string[]; + /** + * The placeholder shown in the input field. + */ + "placeholder"?: string; + /** + * The placeholder shown in the search bar. + */ + "searchPlaceholder"?: string; + /** + * The string displayed as the select all label. + */ + "selectAllLabel"?: string; + /** + * The initial values to be selected in the dropdown. + */ + "selectedValues"?: string[]; + } + interface B2bMultiselectOption { + "indeterminate"?: boolean; + /** + * Emits the option as a string whenever an option is selected. + */ + "onB2b-option-selected"?: (event: B2bMultiselectOptionCustomEvent) => void; + /** + * The label of the option. + */ + "option": string; + /** + * Whether the option is currently selected. + */ + "selected"?: boolean; + } + interface B2bPagination { + /** + * Use this property to set programmatically the active page + */ + "activePage"?: number; + /** + * (optional) translation to 'Go to next page' + */ + "ariaLabelNextPage"?: string; + /** + * (optional) translation to 'Go to previous page' + */ + "ariaLabelPreviousPage"?: string; + /** + * Will emit every time a page changes, by clicking back, next or any specific page. \ Emits a PageChangeEventDetail that includes lastSelectedPage, currentPage and direction. Direction is only when clicking back or next. + */ + "onB2b-page-change"?: (event: B2bPaginationCustomEvent) => void; + /** + * The total number of pages to calculate the length of pagination component + */ + "totalPages"?: number; + } /** - * The step number - */ - step?: WizardSteps; - } - interface B2bWizardStep { + * Paragraph component to render text content. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45 + */ + interface B2bParagraph { + /** + * The alignment of the text. + */ + "align"?: 'left' | 'right' | 'center'; + /** + * The size of the text. + */ + "size"?: '50' | '100'; + /** + * The weight of the text. + */ + "weight"?: 'bold' | 'normal'; + } + interface B2bProgressBar { + /** + * The label of the progress bar. + */ + "label"?: string; + /** + * Whether the label should be displayed on the right or left of the progress bar. + */ + "labelPosition"?: 'left' | 'right'; + /** + * Whether the label should be displayed below or on the side of the progress bar. + */ + "labelType"?: 'below' | 'side'; + /** + * The percentage of progress from 0 to 100. + */ + "progress"?: number; + } + interface B2bRadioButton { + /** + * Whether or not the radio button is currently checked. Per default it is false. + */ + "checked"?: boolean; + /** + * Whether or not the radio button is currently disabled. Per default it is false. + */ + "disabled"?: boolean; + /** + * An error text. It will only show if invalid is set to true. + */ + "error"?: string; + /** + * A hint to give additional information on the radio button. + */ + "hint"?: string; + /** + * Whether or not the radio button should be rendered with error styles. Per default it is false. + */ + "invalid"?: boolean; + /** + * The label of the radio button. This is required + */ + "label": string; + /** + * The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required. + */ + "name": string; + /** + * Emits whenever the radio button loses focus. + */ + "onB2b-blur"?: (event: B2bRadioButtonCustomEvent) => void; + /** + * Emitted whenever the radio button is clicked. + */ + "onB2b-change"?: (event: B2bRadioButtonCustomEvent) => void; + /** + * Emits whenever the radio button receives focus. + */ + "onB2b-focus"?: (event: B2bRadioButtonCustomEvent) => void; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + /** + * The value of the radio button. This will be emitted when the radio button is clicked. + */ + "value"?: string; + } + interface B2bRadioGroup { + /** + * The alignment of the radio group. Can be vertical or horizontal, per default it is vertical. + */ + "alignment"?: 'vertical' | 'horizontal'; + /** + * Whether or not the radio group is disabled as a whole. Per default it is false. + */ + "disabled"?: boolean; + /** + * A group error text. It will only show if invalid is set to true. + */ + "error"?: string; + /** + * A group hint text. + */ + "hint"?: string; + /** + * Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false. + */ + "invalid"?: boolean; + /** + * The radio group label. This is optional. + */ + "label"?: string; + /** + * The radio group name used to group them together programmatically. This is required. + */ + "name": string; + /** + * Emitted whenever a radio button in the group is clicked. Will emit the value of the currently selected radio button. + */ + "onB2b-group-change"?: (event: B2bRadioGroupCustomEvent) => void; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + } + interface B2bRequiredSeparator { + /** + * The required label. Per default it is the german 'Pflichtfeld', but can be altered. + */ + "label"?: string; + } + interface B2bRoundedIcon { + /** + * The color of the border of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string + */ + "borderColor"?: string; + /** + * The color of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string + */ + "color"?: string; + /** + * The color of the text or icon within the circle. Use any type including hex, rgb or css custom properties as long as you pass it as a string + */ + "contentColor"?: string; + } + interface B2bScrollableContainer { + } + interface B2bSearch { + /** + * Whether or not the input is disabled. Default is false. + */ + "disabled"?: boolean; + /** + * Emits whenever the user clicks the search button. Will emit the search string. + */ + "onB2b-search"?: (event: B2bSearchCustomEvent) => void; + /** + * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. + */ + "optionsList"?: string[]; + /** + * The placeholder shown in the input field. + */ + "placeholder"?: string; + /** + * The default value of the search input field. If defined, it will prefill the input. + */ + "value"?: string; + } + interface B2bSeparator { + /** + * The alignment of the separator. Per default it is horizontal. + */ + "alignment"?: 'vertical' | 'horizontal'; + } /** - * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number - */ - checkIcon?: boolean; + * Spinner component to display loading indicator. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70 + */ + interface B2bSpinner { + /** + * The color of the spinner. + */ + "color"?: 'primary' | 'secondary' | 'inverse'; + /** + * The size of the spinner. + */ + "size"?: '50' | '100' | '200'; + } + interface B2bTab { + /** + * Whether or not the tab is currently disabled. Per default it is false. + */ + "disabled"?: boolean; + /** + * Whether or not the tab has an error. Per default, it is false. + */ + "invalid"?: boolean; + /** + * Emits whether the tab is selected whenever there is a change to the tabs selected status. + */ + "onB2b-change"?: (event: B2bTabCustomEvent) => void; + /** + * Whether or not the tab is currently selected. Per default it is false. + */ + "selected"?: boolean; + } + interface B2bTabGroup { + /** + * Emits the previous and the next tab panel whenever a new panel is selected. + */ + "onB2b-selected"?: (event: B2bTabGroupCustomEvent) => void; + /** + * Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation. Set it to true if you want to use external, route-based navigation. + */ + "useRouter"?: boolean; + } + interface B2bTabPanel { + } + interface B2bTable { + /** + * Emits whenever the sort direction of any column in the table changes. + */ + "onB2b-sort-change"?: (event: B2bTableCustomEvent) => void; + /** + * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns. Colspan behaves same as equal, but allows you to set a colspan attribute on individual columns or cells to make them span more than one column. + */ + "size"?: TableSizes; + } + interface B2bTableCell { + /** + * Alignment of the content of the cell, by default is to the left. * + */ + "align"?: ContentAlignment; + /** + * Background color of the cell. This color selection does not have hover states, as it is handled from the row* + */ + "color"?: TableColourOptions; + /** + * How many columns the cell should span. Accepts numbers greater than one. + */ + "colspan"?: number; + /** + * adds a border to the right of the cell. * + */ + "divider"?: boolean; + "size"?: TableSizes; + /** + * Whether text should wrap or truncate. It will only truncate when table size is equal * + */ + "textWrap"?: boolean; + "totalCols"?: number; + } + interface B2bTableHeader { + /** + * The width of the column. Increase it to change the size of the column relative to other columns. + */ + "colspan"?: number; + /** + * Alignment of the content of the cell, by default is to the left. * + */ + "contentAlign"?: ContentAlignment; + /** + * adds a border to the right of the header. * + */ + "divider"?: boolean; + /** + * @deprecated Use fixed on the rowgroup instead. Sets the header position to sticky. Use it when table is inside a scrollable container. * + */ + "fixed"?: boolean; + /** + * Emits whenever the sort direction changes. + */ + "onB2b-change"?: (event: B2bTableHeaderCustomEvent) => void; + /** + * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation. + */ + "size"?: TableSizes; + /** + * The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this. + */ + "sortDirection"?: TableSortDirections; + /** + * Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent. + */ + "sortId"?: string; + "totalCols"?: number; + } + interface B2bTableRow { + "accordionType"?: TableAccordionRowTypes; + /** + * If a selectable row is currently checked. Per default, it is false. + */ + "checked"?: boolean; + /** + * Background color of the row. Use it semantically. This color selection have hover states * + */ + "color"?: TableColourOptions; + /** + * Whether the row will be highlighted on mouse over * + */ + "highlight"?: boolean; + /** + * If a selectable row is a parent for an accordion, it becomes indeterminate when some of it's children are checked, but not all. + */ + "indeterminate"?: boolean; + /** + * Emits if the parent rowgroup is an accordion and the row is a top-level accordion row. Determines if the child rows will be shown. + */ + "onB2b-open"?: (event: B2bTableRowCustomEvent) => void; + /** + * Emits if the row is selectable and it is selected or unselected. Emits both unique value and the checkbox status. + */ + "onB2b-row-selected"?: (event: B2bTableRowCustomEvent) => void; + "selectable"?: boolean; + "size"?: TableSizes; + /** + * The unique identifier for a selectable row. It is emitted when the row is selected. + */ + "value"?: string; + } + interface B2bTableRowgroup { + /** + * Renders the rowgroup as an accordion. Both header and body must have accordion set to true. One table can contain multiple rowgroups of type body, each of which represents an accordion row with children. + */ + "accordion"?: boolean; + /** + * Sets the header rowgroup position to sticky. Use this in a scrollable container. + */ + "fixed"?: boolean; + /** + * Emits when the rowgroup as a whole is selected. + */ + "onB2b-group-selected"?: (event: B2bTableRowgroupCustomEvent) => void; + /** + * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false. + */ + "opened"?: boolean; + /** + * If the rows in the rowgroup can be selected via checkmark. Per default, it is false. + */ + "selectable"?: boolean; + "size"?: TableSizes; + /** + * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over. + */ + "type"?: TableRowgroupTypes; + } /** - * Use when wizard has property custom true. The state of the step - */ - state?: WizardStatus; + * Text Area Component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96 + */ + interface B2bTextarea { + /** + * Whether or not the textarea should be automatically focused on page load. Per default it is false. + */ + "autofocus"?: boolean; + /** + * Whether or not the textarea is disabled. Per default it is false. + */ + "disabled"?: boolean; + /** + * An optional error message that is displayed when the textarea is invalid. Per default it is undefined. + */ + "error"?: string; + /** + * The height of the text area + */ + "height"?: string; + /** + * An optional hint for the textarea. Per default it is undefined. + */ + "hint"?: string; + /** + * Whether or not the textarea should be displayed with error styles. Per default it is false. + */ + "invalid"?: boolean; + /** + * The textarea label. This is optional. + */ + "label"?: string; + /** + * The maximum input length. Characters entered after that will not be appended to the input value. + */ + "maxLength"?: number; + /** + * The name of the textarea. This is used to programmatically group it into a form. + */ + "name"?: string; + /** + * Emits whenever the textarea loses focus. + */ + "onB2b-blur"?: (event: B2bTextareaCustomEvent) => void; + /** + * Emits whenever the textarea receives focus. + */ + "onB2b-focus"?: (event: B2bTextareaCustomEvent) => void; + /** + * Emits whenever the textarea's input changes. + */ + "onB2b-input"?: (event: B2bTextareaCustomEvent) => void; + /** + * The textarea placeholder. It is optional and undefined by default. + */ + "placeholder"?: string; + /** + * Adds an asterisk at the end of the label to signify that the field is required. + */ + "required"?: boolean; + /** + * If and how the textarea is resizable. Per default it is resizable in both directions. + */ + "resize"?: | 'unset' + | 'none' + | 'vertical' + | 'horizontal'; + /** + * The value of the textarea. Per default it is null. + */ + "value"?: string; + } + interface B2bToggleButton { + /** + * Whether or not the toggle button is currently checked. Per default it is false. + */ + "checked"?: boolean; + /** + * Whether or not the toggle button is currently disabled. Per default it is false. + */ + "disabled"?: boolean; + /** + * The label of the toggle button. This is required + */ + "label": string; + /** + * The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. + */ + "name": string; + /** + * Emitted whenever the toggle button is clicked. + */ + "onB2b-change"?: (event: B2bToggleButtonCustomEvent) => void; + /** + * The value of the toggle button. This will be emitted when the toggle button is clicked. This is required + */ + "value": string; + } + interface B2bToggleChip { + /** + * Whether or not the chip is currently active. Per default, it is false. + */ + "active"?: boolean; + /** + * Whether or not the chip is currently disabled. Per default it is false. + */ + "disabled"?: boolean; + /** + * The chip's label. This is required. + */ + "label": string; + /** + * The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. + */ + "name": string; + /** + * Emits the value whenever the toggle chip is selected. + */ + "onB2b-selected"?: (event: B2bToggleChipCustomEvent) => void; + /** + * The value associated with the toggle chip. This is emitted when the chip is interacted with. + */ + "value": any; + /** + * The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey + */ + "variant"?: 'grey' | 'white'; + } + interface B2bToggleGroup { + /** + * Whether or not the toggle group is disabled as a whole. Per default it is false. + */ + "disabled"?: boolean; + /** + * The toggle group name used to group them together programmatically. This is required. + */ + "name": string; + /** + * Emitted whenever a toggle button in the group is clicked. Will emit the value of the currently selected radio button. + */ + "onB2b-group-change"?: (event: B2bToggleGroupCustomEvent) => void; + } + interface B2bToggleSwitch { + /** + * Whether or not the toggle button is currently disabled. Per default it is false. + */ + "disabled"?: boolean; + /** + * An optional label for the toggle switch. + */ + "label"?: string; + /** + * The alignment of the toggle switch label. + */ + "labelPosition"?: 'left' | 'right'; + /** + * The toggle name. Use this if the toggle switch is used in a form group. + */ + "name"?: string; + /** + * Emits the toggle switch value when it's state changes. + */ + "onB2b-change"?: (event: B2bToggleSwitchCustomEvent) => void; + /** + * Whether or not the toggle button is currently on or off. Per default it is off. + */ + "state"?: boolean; + } /** - * Use when wizard has property custom true. The step number - */ - step?: WizardSteps; - } - interface IntrinsicElements { - 'b2b-alert': B2bAlert; - 'b2b-anchor': B2bAnchor; - 'b2b-breadcrumb': B2bBreadcrumb; - 'b2b-breadcrumb-item': B2bBreadcrumbItem; - 'b2b-button': B2bButton; - 'b2b-calendar': B2bCalendar; - 'b2b-calendar-days': B2bCalendarDays; - 'b2b-calendar-days-header': B2bCalendarDaysHeader; - 'b2b-calendar-header': B2bCalendarHeader; - 'b2b-card': B2bCard; - 'b2b-checkbox': B2bCheckbox; - 'b2b-checkbox-group': B2bCheckboxGroup; - 'b2b-chip-component': B2bChipComponent; - 'b2b-dropdown': B2bDropdown; - 'b2b-flyout-menu': B2bFlyoutMenu; - 'b2b-flyout-menu-option': B2bFlyoutMenuOption; - 'b2b-grid': B2bGrid; - 'b2b-grid-col': B2bGridCol; - 'b2b-grid-row': B2bGridRow; - 'b2b-headline': B2bHeadline; - 'b2b-icon': B2bIcon; - 'b2b-icon-100': B2bIcon100; - 'b2b-icon-50': B2bIcon50; - 'b2b-input': B2bInput; - 'b2b-input-group': B2bInputGroup; - 'b2b-input-label': B2bInputLabel; - 'b2b-input-list': B2bInputList; - 'b2b-input-list-option': B2bInputListOption; - 'b2b-label': B2bLabel; - 'b2b-modal': B2bModal; - 'b2b-multiselect-dropdown': B2bMultiselectDropdown; - 'b2b-multiselect-option': B2bMultiselectOption; - 'b2b-pagination': B2bPagination; - 'b2b-paragraph': B2bParagraph; - 'b2b-progress-bar': B2bProgressBar; - 'b2b-radio-button': B2bRadioButton; - 'b2b-radio-group': B2bRadioGroup; - 'b2b-required-separator': B2bRequiredSeparator; - 'b2b-rounded-icon': B2bRoundedIcon; - 'b2b-scrollable-container': B2bScrollableContainer; - 'b2b-search': B2bSearch; - 'b2b-separator': B2bSeparator; - 'b2b-spinner': B2bSpinner; - 'b2b-tab': B2bTab; - 'b2b-tab-group': B2bTabGroup; - 'b2b-tab-panel': B2bTabPanel; - 'b2b-table': B2bTable; - 'b2b-table-cell': B2bTableCell; - 'b2b-table-header': B2bTableHeader; - 'b2b-table-row': B2bTableRow; - 'b2b-table-rowgroup': B2bTableRowgroup; - 'b2b-textarea': B2bTextarea; - 'b2b-toggle-button': B2bToggleButton; - 'b2b-toggle-chip': B2bToggleChip; - 'b2b-toggle-group': B2bToggleGroup; - 'b2b-toggle-switch': B2bToggleSwitch; - 'b2b-tooltip': B2bTooltip; - 'b2b-wizard': B2bWizard; - 'b2b-wizard-icon': B2bWizardIcon; - 'b2b-wizard-step': B2bWizardStep; - } + * The tooltip can display additional information, and will be visible based on + * a specific trigger. + */ + interface B2bTooltip { + /** + * The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content. + */ + "content"?: string; + /** + * Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility. + */ + "opened"?: boolean; + /** + * Position of the tooltip. + */ + "position"?: 'left' | 'right' | 'top' | 'bottom'; + /** + * The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover. + */ + "trigger"?: 'hover' | 'focus' | 'custom'; + } + interface B2bWizard { + /** + * The current active step + */ + "activeStep"?: WizardSteps | '0'; + /** + * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number + */ + "checkIcon"?: boolean; + /** + * By default, is false, where the wizard will handle steps states. If set to true, steps state must be handled manually. + */ + "custom"?: boolean; + } + interface B2bWizardIcon { + /** + * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number + */ + "checkIcon"?: boolean; + /** + * The state of the step + */ + "state"?: WizardStatus; + /** + * The step number + */ + "step"?: WizardSteps; + } + interface B2bWizardStep { + /** + * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number + */ + "checkIcon"?: boolean; + /** + * Use when wizard has property custom true. The state of the step + */ + "state"?: WizardStatus; + /** + * Use when wizard has property custom true. The step number + */ + "step"?: WizardSteps; + } + interface IntrinsicElements { + "b2b-alert": B2bAlert; + "b2b-anchor": B2bAnchor; + "b2b-breadcrumb": B2bBreadcrumb; + "b2b-breadcrumb-item": B2bBreadcrumbItem; + "b2b-button": B2bButton; + "b2b-calendar": B2bCalendar; + "b2b-calendar-days": B2bCalendarDays; + "b2b-calendar-days-header": B2bCalendarDaysHeader; + "b2b-calendar-header": B2bCalendarHeader; + "b2b-card": B2bCard; + "b2b-checkbox": B2bCheckbox; + "b2b-checkbox-group": B2bCheckboxGroup; + "b2b-chip-component": B2bChipComponent; + "b2b-dropdown": B2bDropdown; + "b2b-flyout-menu": B2bFlyoutMenu; + "b2b-flyout-menu-option": B2bFlyoutMenuOption; + "b2b-grid": B2bGrid; + "b2b-grid-col": B2bGridCol; + "b2b-grid-row": B2bGridRow; + "b2b-headline": B2bHeadline; + "b2b-icon": B2bIcon; + "b2b-icon-100": B2bIcon100; + "b2b-icon-50": B2bIcon50; + "b2b-input": B2bInput; + "b2b-input-group": B2bInputGroup; + "b2b-input-label": B2bInputLabel; + "b2b-input-list": B2bInputList; + "b2b-input-list-option": B2bInputListOption; + "b2b-label": B2bLabel; + "b2b-modal": B2bModal; + "b2b-multiselect-dropdown": B2bMultiselectDropdown; + "b2b-multiselect-option": B2bMultiselectOption; + "b2b-pagination": B2bPagination; + "b2b-paragraph": B2bParagraph; + "b2b-progress-bar": B2bProgressBar; + "b2b-radio-button": B2bRadioButton; + "b2b-radio-group": B2bRadioGroup; + "b2b-required-separator": B2bRequiredSeparator; + "b2b-rounded-icon": B2bRoundedIcon; + "b2b-scrollable-container": B2bScrollableContainer; + "b2b-search": B2bSearch; + "b2b-separator": B2bSeparator; + "b2b-spinner": B2bSpinner; + "b2b-tab": B2bTab; + "b2b-tab-group": B2bTabGroup; + "b2b-tab-panel": B2bTabPanel; + "b2b-table": B2bTable; + "b2b-table-cell": B2bTableCell; + "b2b-table-header": B2bTableHeader; + "b2b-table-row": B2bTableRow; + "b2b-table-rowgroup": B2bTableRowgroup; + "b2b-textarea": B2bTextarea; + "b2b-toggle-button": B2bToggleButton; + "b2b-toggle-chip": B2bToggleChip; + "b2b-toggle-group": B2bToggleGroup; + "b2b-toggle-switch": B2bToggleSwitch; + "b2b-tooltip": B2bTooltip; + "b2b-wizard": B2bWizard; + "b2b-wizard-icon": B2bWizardIcon; + "b2b-wizard-step": B2bWizardStep; + } } export { LocalJSX as JSX }; -declare module '@stencil/core' { - export namespace JSX { - interface IntrinsicElements { - 'b2b-alert': LocalJSX.B2bAlert & - JSXBase.HTMLAttributes; - 'b2b-anchor': LocalJSX.B2bAnchor & - JSXBase.HTMLAttributes; - 'b2b-breadcrumb': LocalJSX.B2bBreadcrumb & - JSXBase.HTMLAttributes; - 'b2b-breadcrumb-item': LocalJSX.B2bBreadcrumbItem & - JSXBase.HTMLAttributes; - 'b2b-button': LocalJSX.B2bButton & - JSXBase.HTMLAttributes; - 'b2b-calendar': LocalJSX.B2bCalendar & - JSXBase.HTMLAttributes; - 'b2b-calendar-days': LocalJSX.B2bCalendarDays & - JSXBase.HTMLAttributes; - 'b2b-calendar-days-header': LocalJSX.B2bCalendarDaysHeader & - JSXBase.HTMLAttributes; - 'b2b-calendar-header': LocalJSX.B2bCalendarHeader & - JSXBase.HTMLAttributes; - 'b2b-card': LocalJSX.B2bCard & JSXBase.HTMLAttributes; - 'b2b-checkbox': LocalJSX.B2bCheckbox & - JSXBase.HTMLAttributes; - 'b2b-checkbox-group': LocalJSX.B2bCheckboxGroup & - JSXBase.HTMLAttributes; - 'b2b-chip-component': LocalJSX.B2bChipComponent & - JSXBase.HTMLAttributes; - 'b2b-dropdown': LocalJSX.B2bDropdown & - JSXBase.HTMLAttributes; - 'b2b-flyout-menu': LocalJSX.B2bFlyoutMenu & - JSXBase.HTMLAttributes; - 'b2b-flyout-menu-option': LocalJSX.B2bFlyoutMenuOption & - JSXBase.HTMLAttributes; - 'b2b-grid': LocalJSX.B2bGrid & JSXBase.HTMLAttributes; - 'b2b-grid-col': LocalJSX.B2bGridCol & - JSXBase.HTMLAttributes; - 'b2b-grid-row': LocalJSX.B2bGridRow & - JSXBase.HTMLAttributes; - /** - * Headline component to render hading tags content. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46 - */ - 'b2b-headline': LocalJSX.B2bHeadline & - JSXBase.HTMLAttributes; - 'b2b-icon': LocalJSX.B2bIcon & JSXBase.HTMLAttributes; - 'b2b-icon-100': LocalJSX.B2bIcon100 & - JSXBase.HTMLAttributes; - 'b2b-icon-50': LocalJSX.B2bIcon50 & - JSXBase.HTMLAttributes; - /** - * Input component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 - */ - 'b2b-input': LocalJSX.B2bInput & - JSXBase.HTMLAttributes; - 'b2b-input-group': LocalJSX.B2bInputGroup & - JSXBase.HTMLAttributes; - 'b2b-input-label': LocalJSX.B2bInputLabel & - JSXBase.HTMLAttributes; - 'b2b-input-list': LocalJSX.B2bInputList & - JSXBase.HTMLAttributes; - 'b2b-input-list-option': LocalJSX.B2bInputListOption & - JSXBase.HTMLAttributes; - 'b2b-label': LocalJSX.B2bLabel & - JSXBase.HTMLAttributes; - /** - * Modal component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 - */ - 'b2b-modal': LocalJSX.B2bModal & - JSXBase.HTMLAttributes; - 'b2b-multiselect-dropdown': LocalJSX.B2bMultiselectDropdown & - JSXBase.HTMLAttributes; - 'b2b-multiselect-option': LocalJSX.B2bMultiselectOption & - JSXBase.HTMLAttributes; - 'b2b-pagination': LocalJSX.B2bPagination & - JSXBase.HTMLAttributes; - /** - * Paragraph component to render text content. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45 - */ - 'b2b-paragraph': LocalJSX.B2bParagraph & - JSXBase.HTMLAttributes; - 'b2b-progress-bar': LocalJSX.B2bProgressBar & - JSXBase.HTMLAttributes; - 'b2b-radio-button': LocalJSX.B2bRadioButton & - JSXBase.HTMLAttributes; - 'b2b-radio-group': LocalJSX.B2bRadioGroup & - JSXBase.HTMLAttributes; - 'b2b-required-separator': LocalJSX.B2bRequiredSeparator & - JSXBase.HTMLAttributes; - 'b2b-rounded-icon': LocalJSX.B2bRoundedIcon & - JSXBase.HTMLAttributes; - 'b2b-scrollable-container': LocalJSX.B2bScrollableContainer & - JSXBase.HTMLAttributes; - 'b2b-search': LocalJSX.B2bSearch & - JSXBase.HTMLAttributes; - 'b2b-separator': LocalJSX.B2bSeparator & - JSXBase.HTMLAttributes; - /** - * Spinner component to display loading indicator. - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70 - */ - 'b2b-spinner': LocalJSX.B2bSpinner & - JSXBase.HTMLAttributes; - 'b2b-tab': LocalJSX.B2bTab & JSXBase.HTMLAttributes; - 'b2b-tab-group': LocalJSX.B2bTabGroup & - JSXBase.HTMLAttributes; - 'b2b-tab-panel': LocalJSX.B2bTabPanel & - JSXBase.HTMLAttributes; - 'b2b-table': LocalJSX.B2bTable & - JSXBase.HTMLAttributes; - 'b2b-table-cell': LocalJSX.B2bTableCell & - JSXBase.HTMLAttributes; - 'b2b-table-header': LocalJSX.B2bTableHeader & - JSXBase.HTMLAttributes; - 'b2b-table-row': LocalJSX.B2bTableRow & - JSXBase.HTMLAttributes; - 'b2b-table-rowgroup': LocalJSX.B2bTableRowgroup & - JSXBase.HTMLAttributes; - /** - * Text Area Component - * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96 - */ - 'b2b-textarea': LocalJSX.B2bTextarea & - JSXBase.HTMLAttributes; - 'b2b-toggle-button': LocalJSX.B2bToggleButton & - JSXBase.HTMLAttributes; - 'b2b-toggle-chip': LocalJSX.B2bToggleChip & - JSXBase.HTMLAttributes; - 'b2b-toggle-group': LocalJSX.B2bToggleGroup & - JSXBase.HTMLAttributes; - 'b2b-toggle-switch': LocalJSX.B2bToggleSwitch & - JSXBase.HTMLAttributes; - /** - * The tooltip can display additional information, and will be visible based on - * a specific trigger. - */ - 'b2b-tooltip': LocalJSX.B2bTooltip & - JSXBase.HTMLAttributes; - 'b2b-wizard': LocalJSX.B2bWizard & - JSXBase.HTMLAttributes; - 'b2b-wizard-icon': LocalJSX.B2bWizardIcon & - JSXBase.HTMLAttributes; - 'b2b-wizard-step': LocalJSX.B2bWizardStep & - JSXBase.HTMLAttributes; - } - } +declare module "@stencil/core" { + export namespace JSX { + interface IntrinsicElements { + "b2b-alert": LocalJSX.B2bAlert & JSXBase.HTMLAttributes; + "b2b-anchor": LocalJSX.B2bAnchor & JSXBase.HTMLAttributes; + "b2b-breadcrumb": LocalJSX.B2bBreadcrumb & JSXBase.HTMLAttributes; + "b2b-breadcrumb-item": LocalJSX.B2bBreadcrumbItem & JSXBase.HTMLAttributes; + "b2b-button": LocalJSX.B2bButton & JSXBase.HTMLAttributes; + "b2b-calendar": LocalJSX.B2bCalendar & JSXBase.HTMLAttributes; + "b2b-calendar-days": LocalJSX.B2bCalendarDays & JSXBase.HTMLAttributes; + "b2b-calendar-days-header": LocalJSX.B2bCalendarDaysHeader & JSXBase.HTMLAttributes; + "b2b-calendar-header": LocalJSX.B2bCalendarHeader & JSXBase.HTMLAttributes; + "b2b-card": LocalJSX.B2bCard & JSXBase.HTMLAttributes; + "b2b-checkbox": LocalJSX.B2bCheckbox & JSXBase.HTMLAttributes; + "b2b-checkbox-group": LocalJSX.B2bCheckboxGroup & JSXBase.HTMLAttributes; + "b2b-chip-component": LocalJSX.B2bChipComponent & JSXBase.HTMLAttributes; + "b2b-dropdown": LocalJSX.B2bDropdown & JSXBase.HTMLAttributes; + "b2b-flyout-menu": LocalJSX.B2bFlyoutMenu & JSXBase.HTMLAttributes; + "b2b-flyout-menu-option": LocalJSX.B2bFlyoutMenuOption & JSXBase.HTMLAttributes; + "b2b-grid": LocalJSX.B2bGrid & JSXBase.HTMLAttributes; + "b2b-grid-col": LocalJSX.B2bGridCol & JSXBase.HTMLAttributes; + "b2b-grid-row": LocalJSX.B2bGridRow & JSXBase.HTMLAttributes; + /** + * Headline component to render hading tags content. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46 + */ + "b2b-headline": LocalJSX.B2bHeadline & JSXBase.HTMLAttributes; + "b2b-icon": LocalJSX.B2bIcon & JSXBase.HTMLAttributes; + "b2b-icon-100": LocalJSX.B2bIcon100 & JSXBase.HTMLAttributes; + "b2b-icon-50": LocalJSX.B2bIcon50 & JSXBase.HTMLAttributes; + /** + * Input component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 + */ + "b2b-input": LocalJSX.B2bInput & JSXBase.HTMLAttributes; + "b2b-input-group": LocalJSX.B2bInputGroup & JSXBase.HTMLAttributes; + "b2b-input-label": LocalJSX.B2bInputLabel & JSXBase.HTMLAttributes; + "b2b-input-list": LocalJSX.B2bInputList & JSXBase.HTMLAttributes; + "b2b-input-list-option": LocalJSX.B2bInputListOption & JSXBase.HTMLAttributes; + "b2b-label": LocalJSX.B2bLabel & JSXBase.HTMLAttributes; + /** + * Modal component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 + */ + "b2b-modal": LocalJSX.B2bModal & JSXBase.HTMLAttributes; + "b2b-multiselect-dropdown": LocalJSX.B2bMultiselectDropdown & JSXBase.HTMLAttributes; + "b2b-multiselect-option": LocalJSX.B2bMultiselectOption & JSXBase.HTMLAttributes; + "b2b-pagination": LocalJSX.B2bPagination & JSXBase.HTMLAttributes; + /** + * Paragraph component to render text content. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45 + */ + "b2b-paragraph": LocalJSX.B2bParagraph & JSXBase.HTMLAttributes; + "b2b-progress-bar": LocalJSX.B2bProgressBar & JSXBase.HTMLAttributes; + "b2b-radio-button": LocalJSX.B2bRadioButton & JSXBase.HTMLAttributes; + "b2b-radio-group": LocalJSX.B2bRadioGroup & JSXBase.HTMLAttributes; + "b2b-required-separator": LocalJSX.B2bRequiredSeparator & JSXBase.HTMLAttributes; + "b2b-rounded-icon": LocalJSX.B2bRoundedIcon & JSXBase.HTMLAttributes; + "b2b-scrollable-container": LocalJSX.B2bScrollableContainer & JSXBase.HTMLAttributes; + "b2b-search": LocalJSX.B2bSearch & JSXBase.HTMLAttributes; + "b2b-separator": LocalJSX.B2bSeparator & JSXBase.HTMLAttributes; + /** + * Spinner component to display loading indicator. + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70 + */ + "b2b-spinner": LocalJSX.B2bSpinner & JSXBase.HTMLAttributes; + "b2b-tab": LocalJSX.B2bTab & JSXBase.HTMLAttributes; + "b2b-tab-group": LocalJSX.B2bTabGroup & JSXBase.HTMLAttributes; + "b2b-tab-panel": LocalJSX.B2bTabPanel & JSXBase.HTMLAttributes; + "b2b-table": LocalJSX.B2bTable & JSXBase.HTMLAttributes; + "b2b-table-cell": LocalJSX.B2bTableCell & JSXBase.HTMLAttributes; + "b2b-table-header": LocalJSX.B2bTableHeader & JSXBase.HTMLAttributes; + "b2b-table-row": LocalJSX.B2bTableRow & JSXBase.HTMLAttributes; + "b2b-table-rowgroup": LocalJSX.B2bTableRowgroup & JSXBase.HTMLAttributes; + /** + * Text Area Component + * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96 + */ + "b2b-textarea": LocalJSX.B2bTextarea & JSXBase.HTMLAttributes; + "b2b-toggle-button": LocalJSX.B2bToggleButton & JSXBase.HTMLAttributes; + "b2b-toggle-chip": LocalJSX.B2bToggleChip & JSXBase.HTMLAttributes; + "b2b-toggle-group": LocalJSX.B2bToggleGroup & JSXBase.HTMLAttributes; + "b2b-toggle-switch": LocalJSX.B2bToggleSwitch & JSXBase.HTMLAttributes; + /** + * The tooltip can display additional information, and will be visible based on + * a specific trigger. + */ + "b2b-tooltip": LocalJSX.B2bTooltip & JSXBase.HTMLAttributes; + "b2b-wizard": LocalJSX.B2bWizard & JSXBase.HTMLAttributes; + "b2b-wizard-icon": LocalJSX.B2bWizardIcon & JSXBase.HTMLAttributes; + "b2b-wizard-step": LocalJSX.B2bWizardStep & JSXBase.HTMLAttributes; + } + } } diff --git a/packages/core-components/src/components/icon-100/icons-100/b2b_icon-duplicate.svg b/packages/core-components/src/components/icon-100/icons-100/b2b_icon-duplicate.svg new file mode 100644 index 00000000..4f3be114 --- /dev/null +++ b/packages/core-components/src/components/icon-100/icons-100/b2b_icon-duplicate.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/core-components/src/components/icon-100/readme.md b/packages/core-components/src/components/icon-100/readme.md index 3ea1b054..4a0340c5 100644 --- a/packages/core-components/src/components/icon-100/readme.md +++ b/packages/core-components/src/components/icon-100/readme.md @@ -7,13 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `clickable` | `clickable` | Will display a pointer cursor when hovering the icon | `boolean` | `false` | -| `color` | `color` | The color of the icon | `"inherit" \| "inverse" \| "primary" \| "secondary"` | `'inherit'` | -| `focusable` | `focusable` | Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. | `boolean` | `false` | -| `icon` | `icon` | The name of the icon | `"b2b_icon-360-degree" \| "b2b_icon-advice" \| "b2b_icon-allergen-sulfur-dioxide-sulfite" \| "b2b_icon-almond" \| "b2b_icon-archive" \| "b2b_icon-armchair" \| "b2b_icon-arrow-down" \| "b2b_icon-arrow-graph" \| "b2b_icon-arrow-left" \| "b2b_icon-arrow-right" \| "b2b_icon-arrow-up" \| "b2b_icon-assembly" \| "b2b_icon-assortment" \| "b2b_icon-attachment" \| "b2b_icon-augmented-reality" \| "b2b_icon-autonomous-team" \| "b2b_icon-bank-details" \| "b2b_icon-bar-graph-ascending" \| "b2b_icon-bar-graph-axis" \| "b2b_icon-barley" \| "b2b_icon-basket-sale" \| "b2b_icon-basket" \| "b2b_icon-basketball" \| "b2b_icon-bikini" \| "b2b_icon-blogs" \| "b2b_icon-brandshop" \| "b2b_icon-brazil-nut" \| "b2b_icon-browser-click" \| "b2b_icon-browser-content" \| "b2b_icon-browser-psm" \| "b2b_icon-burger" \| "b2b_icon-bus" \| "b2b_icon-callback" \| "b2b_icon-camera" \| "b2b_icon-cashback" \| "b2b_icon-cashew-nut" \| "b2b_icon-catalogue" \| "b2b_icon-categories" \| "b2b_icon-celery" \| "b2b_icon-certificate" \| "b2b_icon-chair" \| "b2b_icon-chat" \| "b2b_icon-check-bold" \| "b2b_icon-check" \| "b2b_icon-chicken" \| "b2b_icon-city" \| "b2b_icon-clear" \| "b2b_icon-close-bold" \| "b2b_icon-close" \| "b2b_icon-code-management" \| "b2b_icon-contact-mail" \| "b2b_icon-copy" \| "b2b_icon-cow" \| "b2b_icon-crab" \| "b2b_icon-critique" \| "b2b_icon-curtain" \| "b2b_icon-cut-out" \| "b2b_icon-dashboard" \| "b2b_icon-deer" \| "b2b_icon-delete" \| "b2b_icon-delivery-24h" \| "b2b_icon-delivery-desired-date-selection" \| "b2b_icon-delivery-desired-date" \| "b2b_icon-delivery-express" \| "b2b_icon-delivery-flat" \| "b2b_icon-delivery-on-hangers" \| "b2b_icon-delivery-preferred-place" \| "b2b_icon-desktop-phone-ads-click" \| "b2b_icon-desktop-phone-ads" \| "b2b_icon-desktop-phone" \| "b2b_icon-desktop" \| "b2b_icon-devices-monitor-laptop-tablet" \| "b2b_icon-dish-feature-lactose-free" \| "b2b_icon-dislike" \| "b2b_icon-disposal" \| "b2b_icon-document-sign" \| "b2b_icon-downloads" \| "b2b_icon-dress" \| "b2b_icon-dungarees" \| "b2b_icon-duration" \| "b2b_icon-e-invoice" \| "b2b_icon-edit-pad" \| "b2b_icon-edit" \| "b2b_icon-egg" \| "b2b_icon-ellipsis" \| "b2b_icon-email-verification-confirmed-safe" \| "b2b_icon-email-verification-confirmed" \| "b2b_icon-email-verification-sent-safe" \| "b2b_icon-email-verification-sent" \| "b2b_icon-empty-hint" \| "b2b_icon-end-to-end" \| "b2b_icon-error-article-image" \| "b2b_icon-error-hint" \| "b2b_icon-error" \| "b2b_icon-euro" \| "b2b_icon-event" \| "b2b_icon-events" \| "b2b_icon-expand" \| "b2b_icon-faq" \| "b2b_icon-feedback" \| "b2b_icon-filter" \| "b2b_icon-fish" \| "b2b_icon-fitness" \| "b2b_icon-flag-chequered" \| "b2b_icon-flexible-work" \| "b2b_icon-flip" \| "b2b_icon-food-processor" \| "b2b_icon-fullscreen" \| "b2b_icon-gallery-view" \| "b2b_icon-gamepad" \| "b2b_icon-garlic" \| "b2b_icon-gender-intersex" \| "b2b_icon-globe" \| "b2b_icon-gluten" \| "b2b_icon-glutenfree" \| "b2b_icon-handshake" \| "b2b_icon-hashtag" \| "b2b_icon-hazelnut" \| "b2b_icon-hide" \| "b2b_icon-high-heels" \| "b2b_icon-home" \| "b2b_icon-info-small" \| "b2b_icon-info" \| "b2b_icon-inplace-zoom-reverse" \| "b2b_icon-inplace-zoom" \| "b2b_icon-insurance" \| "b2b_icon-kamut" \| "b2b_icon-laptop-os" \| "b2b_icon-laptop" \| "b2b_icon-leaving-page" \| "b2b_icon-light-bulb" \| "b2b_icon-like-fingers" \| "b2b_icon-like-product" \| "b2b_icon-like" \| "b2b_icon-line-graph" \| "b2b_icon-list-view" \| "b2b_icon-location" \| "b2b_icon-lupine" \| "b2b_icon-macadamia" \| "b2b_icon-material-samples" \| "b2b_icon-measurement" \| "b2b_icon-megaphone" \| "b2b_icon-menu" \| "b2b_icon-mic" \| "b2b_icon-milk" \| "b2b_icon-minus" \| "b2b_icon-module-operations" \| "b2b_icon-money-coins" \| "b2b_icon-money-document" \| "b2b_icon-money-plus" \| "b2b_icon-money-stack" \| "b2b_icon-money" \| "b2b_icon-move" \| "b2b_icon-mustard" \| "b2b_icon-nav" \| "b2b_icon-new" \| "b2b_icon-newsletter-sign-up" \| "b2b_icon-notification" \| "b2b_icon-nuts" \| "b2b_icon-oat" \| "b2b_icon-order-cancelled" \| "b2b_icon-order-delivered" \| "b2b_icon-order-form" \| "b2b_icon-order-management" \| "b2b_icon-order-misdirected" \| "b2b_icon-order-on-road" \| "b2b_icon-order-packed" \| "b2b_icon-order-payment" \| "b2b_icon-order-received" \| "b2b_icon-order-return" \| "b2b_icon-order-shipped" \| "b2b_icon-order-state-unknown" \| "b2b_icon-order-stored" \| "b2b_icon-order" \| "b2b_icon-otto-app" \| "b2b_icon-otto-campus" \| "b2b_icon-otto-company" \| "b2b_icon-otto-laptop" \| "b2b_icon-otto-logo" \| "b2b_icon-otto-up-points" \| "b2b_icon-otto-up" \| "b2b_icon-paper-plane" \| "b2b_icon-pause" \| "b2b_icon-payment-credit-card" \| "b2b_icon-payment-invoice" \| "b2b_icon-payment-pause" \| "b2b_icon-payment-plan-protection" \| "b2b_icon-payment-plan" \| "b2b_icon-pdf" \| "b2b_icon-peanut" \| "b2b_icon-pecan-nut" \| "b2b_icon-pending" \| "b2b_icon-person-access" \| "b2b_icon-person-callcenter" \| "b2b_icon-person-check" \| "b2b_icon-person-colleagues" \| "b2b_icon-person-community" \| "b2b_icon-person-development" \| "b2b_icon-person-female" \| "b2b_icon-person-info" \| "b2b_icon-person-male" \| "b2b_icon-person-rating" \| "b2b_icon-person-support" \| "b2b_icon-person-switch" \| "b2b_icon-person-workshop" \| "b2b_icon-person" \| "b2b_icon-phone-permission" \| "b2b_icon-phone" \| "b2b_icon-pig" \| "b2b_icon-pin" \| "b2b_icon-pinch-gesture" \| "b2b_icon-pinch" \| "b2b_icon-pistachio" \| "b2b_icon-plant" \| "b2b_icon-play-1" \| "b2b_icon-play" \| "b2b_icon-plus" \| "b2b_icon-price-alert" \| "b2b_icon-price-tag" \| "b2b_icon-print" \| "b2b_icon-puzzle" \| "b2b_icon-qr-code" \| "b2b_icon-question-hint" \| "b2b_icon-question" \| "b2b_icon-rating-empty" \| "b2b_icon-rating-filled" \| "b2b_icon-rating-half" \| "b2b_icon-rating-order" \| "b2b_icon-rating-payment" \| "b2b_icon-remote-work" \| "b2b_icon-repair" \| "b2b_icon-reply" \| "b2b_icon-retirement-provision" \| "b2b_icon-rocket" \| "b2b_icon-rye" \| "b2b_icon-sabbatical" \| "b2b_icon-sale" \| "b2b_icon-save" \| "b2b_icon-sea" \| "b2b_icon-search-enter" \| "b2b_icon-search" \| "b2b_icon-seo" \| "b2b_icon-service-info" \| "b2b_icon-sesame" \| "b2b_icon-settings" \| "b2b_icon-share-ios" \| "b2b_icon-share" \| "b2b_icon-sheep" \| "b2b_icon-shell" \| "b2b_icon-shirt" \| "b2b_icon-shopping-cart-euro" \| "b2b_icon-shopping-cart" \| "b2b_icon-show" \| "b2b_icon-smiley-angry" \| "b2b_icon-smiley-happy" \| "b2b_icon-smiley-negative" \| "b2b_icon-smiley-neutral" \| "b2b_icon-smiley-positive" \| "b2b_icon-sms-info" \| "b2b_icon-sneaker" \| "b2b_icon-sort-ascending" \| "b2b_icon-sort-descending" \| "b2b_icon-sort" \| "b2b_icon-soy" \| "b2b_icon-spelt" \| "b2b_icon-stationary" \| "b2b_icon-studies" \| "b2b_icon-success" \| "b2b_icon-sustainable-delivery" \| "b2b_icon-sustainable-energy-efficient" \| "b2b_icon-sustainable-production" \| "b2b_icon-sustainable-recycling" \| "b2b_icon-sustainable-resource" \| "b2b_icon-swipe-gesture" \| "b2b_icon-sync-device" \| "b2b_icon-t-shirt" \| "b2b_icon-tablet" \| "b2b_icon-tableware" \| "b2b_icon-target-group" \| "b2b_icon-teddy" \| "b2b_icon-test-result" \| "b2b_icon-town" \| "b2b_icon-trash" \| "b2b_icon-trend-down" \| "b2b_icon-trend-left" \| "b2b_icon-trend-right" \| "b2b_icon-trend-up" \| "b2b_icon-trousers" \| "b2b_icon-trusted" \| "b2b_icon-unpin" \| "b2b_icon-upload" \| "b2b_icon-user-management" \| "b2b_icon-vacation" \| "b2b_icon-variant-content" \| "b2b_icon-vegan" \| "b2b_icon-vegetarian" \| "b2b_icon-viewtoggle-tiles" \| "b2b_icon-village" \| "b2b_icon-volume-off" \| "b2b_icon-volume-on" \| "b2b_icon-voucher" \| "b2b_icon-walnut" \| "b2b_icon-warning-hint" \| "b2b_icon-warning" \| "b2b_icon-warranty" \| "b2b_icon-washing-machine" \| "b2b_icon-whatsapp" \| "b2b_icon-wheat" \| "b2b_icon-wifi" \| "b2b_icon-wishlist-active" \| "b2b_icon-wishlist" \| "b2b_icon-work-life" \| "b2b_icon-workshop" \| "b2b_icon-zoom-in" \| "b2b_icon-zoom-out" \| "b2b_logo-carrier-dhl" \| "b2b_logo-carrier-gls" \| "b2b_logo-carrier-hermes" \| "b2b_logo-carrier-ups"` | `undefined` | -| `size` | `size` | The size of the icon in pixel. Minimum is 24, maximum is 96px. | `number` | `24` | +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `clickable` | `clickable` | Will display a pointer cursor when hovering the icon | `boolean` | `false` | +| `color` | `color` | The color of the icon | `"inherit" \| "inverse" \| "primary" \| "secondary"` | `'inherit'` | +| `focusable` | `focusable` | Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. | `boolean` | `false` | +| `icon` | `icon` | The name of the icon | `"b2b_icon-360-degree" \| "b2b_icon-advice" \| "b2b_icon-allergen-sulfur-dioxide-sulfite" \| "b2b_icon-almond" \| "b2b_icon-archive" \| "b2b_icon-armchair" \| "b2b_icon-arrow-down" \| "b2b_icon-arrow-graph" \| "b2b_icon-arrow-left" \| "b2b_icon-arrow-right" \| "b2b_icon-arrow-up" \| "b2b_icon-assembly" \| "b2b_icon-assortment" \| "b2b_icon-attachment" \| "b2b_icon-augmented-reality" \| "b2b_icon-autonomous-team" \| "b2b_icon-bank-details" \| "b2b_icon-bar-graph-ascending" \| "b2b_icon-bar-graph-axis" \| "b2b_icon-barley" \| "b2b_icon-basket-sale" \| "b2b_icon-basket" \| "b2b_icon-basketball" \| "b2b_icon-bikini" \| "b2b_icon-blogs" \| "b2b_icon-brandshop" \| "b2b_icon-brazil-nut" \| "b2b_icon-browser-click" \| "b2b_icon-browser-content" \| "b2b_icon-browser-psm" \| "b2b_icon-burger" \| "b2b_icon-bus" \| "b2b_icon-callback" \| "b2b_icon-camera" \| "b2b_icon-cashback" \| "b2b_icon-cashew-nut" \| "b2b_icon-catalogue" \| "b2b_icon-categories" \| "b2b_icon-celery" \| "b2b_icon-certificate" \| "b2b_icon-chair" \| "b2b_icon-chatbot" \| "b2b_icon-check-bold" \| "b2b_icon-check" \| "b2b_icon-chicken" \| "b2b_icon-city" \| "b2b_icon-clear" \| "b2b_icon-close-bold" \| "b2b_icon-close" \| "b2b_icon-code-management" \| "b2b_icon-contact-mail" \| "b2b_icon-copy" \| "b2b_icon-cow" \| "b2b_icon-crab" \| "b2b_icon-critique" \| "b2b_icon-curtain" \| "b2b_icon-cut-out" \| "b2b_icon-dashboard" \| "b2b_icon-deer" \| "b2b_icon-delete" \| "b2b_icon-delivery-24h" \| "b2b_icon-delivery-desired-date-selection" \| "b2b_icon-delivery-desired-date" \| "b2b_icon-delivery-express" \| "b2b_icon-delivery-flat" \| "b2b_icon-delivery-on-hangers" \| "b2b_icon-delivery-preferred-place" \| "b2b_icon-desktop-phone-ads-click" \| "b2b_icon-desktop-phone-ads" \| "b2b_icon-desktop-phone" \| "b2b_icon-desktop" \| "b2b_icon-devices-monitor-laptop-tablet" \| "b2b_icon-dish-feature-lactose-free" \| "b2b_icon-dislike" \| "b2b_icon-disposal" \| "b2b_icon-document-sign" \| "b2b_icon-downloads" \| "b2b_icon-dress" \| "b2b_icon-dungarees" \| "b2b_icon-duplicate" \| "b2b_icon-duration" \| "b2b_icon-e-invoice" \| "b2b_icon-edit-pad" \| "b2b_icon-edit" \| "b2b_icon-egg" \| "b2b_icon-ellipsis" \| "b2b_icon-email-verification-confirmed-safe" \| "b2b_icon-email-verification-confirmed" \| "b2b_icon-email-verification-sent-safe" \| "b2b_icon-email-verification-sent" \| "b2b_icon-empty-hint" \| "b2b_icon-end-to-end" \| "b2b_icon-error-article-image" \| "b2b_icon-error-hint" \| "b2b_icon-error" \| "b2b_icon-euro" \| "b2b_icon-event" \| "b2b_icon-events" \| "b2b_icon-expand" \| "b2b_icon-faq" \| "b2b_icon-feedback" \| "b2b_icon-filter" \| "b2b_icon-fish" \| "b2b_icon-fitness" \| "b2b_icon-flag-chequered" \| "b2b_icon-flexible-work" \| "b2b_icon-flip" \| "b2b_icon-food-processor" \| "b2b_icon-fullscreen" \| "b2b_icon-gallery-view" \| "b2b_icon-gamepad" \| "b2b_icon-garlic" \| "b2b_icon-gender-intersex" \| "b2b_icon-globe" \| "b2b_icon-gluten" \| "b2b_icon-glutenfree" \| "b2b_icon-handshake" \| "b2b_icon-hashtag" \| "b2b_icon-hazelnut" \| "b2b_icon-hide" \| "b2b_icon-high-heels" \| "b2b_icon-home" \| "b2b_icon-info-small" \| "b2b_icon-info" \| "b2b_icon-inplace-zoom-reverse" \| "b2b_icon-inplace-zoom" \| "b2b_icon-insurance" \| "b2b_icon-kamut" \| "b2b_icon-laptop-os" \| "b2b_icon-laptop" \| "b2b_icon-leaving-page" \| "b2b_icon-light-bulb" \| "b2b_icon-like-fingers" \| "b2b_icon-like-product" \| "b2b_icon-like" \| "b2b_icon-line-graph" \| "b2b_icon-list-view" \| "b2b_icon-location" \| "b2b_icon-lupine" \| "b2b_icon-macadamia" \| "b2b_icon-material-samples" \| "b2b_icon-measurement" \| "b2b_icon-megaphone" \| "b2b_icon-menu" \| "b2b_icon-mic" \| "b2b_icon-milk" \| "b2b_icon-minus" \| "b2b_icon-module-operations" \| "b2b_icon-money-coins" \| "b2b_icon-money-document" \| "b2b_icon-money-plus" \| "b2b_icon-money-stack" \| "b2b_icon-money" \| "b2b_icon-move" \| "b2b_icon-mustard" \| "b2b_icon-nav" \| "b2b_icon-new" \| "b2b_icon-newsletter-sign-up" \| "b2b_icon-notification" \| "b2b_icon-nuts" \| "b2b_icon-oat" \| "b2b_icon-order-cancelled" \| "b2b_icon-order-delivered" \| "b2b_icon-order-form" \| "b2b_icon-order-management" \| "b2b_icon-order-misdirected" \| "b2b_icon-order-on-road" \| "b2b_icon-order-packed" \| "b2b_icon-order-payment" \| "b2b_icon-order-received" \| "b2b_icon-order-return" \| "b2b_icon-order-shipped" \| "b2b_icon-order-state-unknown" \| "b2b_icon-order-stored" \| "b2b_icon-order" \| "b2b_icon-otto-app" \| "b2b_icon-otto-campus" \| "b2b_icon-otto-company" \| "b2b_icon-otto-laptop" \| "b2b_icon-otto-logo" \| "b2b_icon-otto-up-points" \| "b2b_icon-otto-up" \| "b2b_icon-paper-plane" \| "b2b_icon-pause" \| "b2b_icon-payment-credit-card" \| "b2b_icon-payment-invoice" \| "b2b_icon-payment-pause" \| "b2b_icon-payment-plan-protection" \| "b2b_icon-payment-plan" \| "b2b_icon-pdf" \| "b2b_icon-peanut" \| "b2b_icon-pecan-nut" \| "b2b_icon-pending" \| "b2b_icon-person-access" \| "b2b_icon-person-callcenter" \| "b2b_icon-person-check" \| "b2b_icon-person-colleagues" \| "b2b_icon-person-community" \| "b2b_icon-person-development" \| "b2b_icon-person-female" \| "b2b_icon-person-info" \| "b2b_icon-person-male" \| "b2b_icon-person-rating" \| "b2b_icon-person-support" \| "b2b_icon-person-switch" \| "b2b_icon-person-workshop" \| "b2b_icon-person" \| "b2b_icon-phone-permission" \| "b2b_icon-phone" \| "b2b_icon-pig" \| "b2b_icon-pin" \| "b2b_icon-pinch-gesture" \| "b2b_icon-pinch" \| "b2b_icon-pistachio" \| "b2b_icon-plant" \| "b2b_icon-play-1" \| "b2b_icon-play" \| "b2b_icon-plus" \| "b2b_icon-price-alert" \| "b2b_icon-price-tag" \| "b2b_icon-print" \| "b2b_icon-puzzle" \| "b2b_icon-qr-code" \| "b2b_icon-question-hint" \| "b2b_icon-question" \| "b2b_icon-rating-empty" \| "b2b_icon-rating-filled" \| "b2b_icon-rating-half" \| "b2b_icon-rating-order" \| "b2b_icon-rating-payment" \| "b2b_icon-remote-work" \| "b2b_icon-repair" \| "b2b_icon-reply" \| "b2b_icon-retirement-provision" \| "b2b_icon-rocket" \| "b2b_icon-rye" \| "b2b_icon-sabbatical" \| "b2b_icon-sale" \| "b2b_icon-save" \| "b2b_icon-sea" \| "b2b_icon-search-enter" \| "b2b_icon-search" \| "b2b_icon-seo" \| "b2b_icon-service-info" \| "b2b_icon-sesame" \| "b2b_icon-settings" \| "b2b_icon-share-ios" \| "b2b_icon-share" \| "b2b_icon-sheep" \| "b2b_icon-shell" \| "b2b_icon-shirt" \| "b2b_icon-shopping-cart-euro" \| "b2b_icon-shopping-cart" \| "b2b_icon-show" \| "b2b_icon-smiley-angry" \| "b2b_icon-smiley-happy" \| "b2b_icon-smiley-negative" \| "b2b_icon-smiley-neutral" \| "b2b_icon-smiley-positive" \| "b2b_icon-sms-info" \| "b2b_icon-sneaker" \| "b2b_icon-sort-ascending" \| "b2b_icon-sort-descending" \| "b2b_icon-sort" \| "b2b_icon-soy" \| "b2b_icon-spelt" \| "b2b_icon-stationary" \| "b2b_icon-studies" \| "b2b_icon-success" \| "b2b_icon-sustainable-delivery" \| "b2b_icon-sustainable-energy-efficient" \| "b2b_icon-sustainable-production" \| "b2b_icon-sustainable-recycling" \| "b2b_icon-sustainable-resource" \| "b2b_icon-swipe-gesture" \| "b2b_icon-sync-device" \| "b2b_icon-t-shirt" \| "b2b_icon-tablet" \| "b2b_icon-tableware" \| "b2b_icon-target-group" \| "b2b_icon-teddy" \| "b2b_icon-test-result" \| "b2b_icon-town" \| "b2b_icon-trash" \| "b2b_icon-trend-down" \| "b2b_icon-trend-left" \| "b2b_icon-trend-right" \| "b2b_icon-trend-up" \| "b2b_icon-trousers" \| "b2b_icon-trusted" \| "b2b_icon-unpin" \| "b2b_icon-upload" \| "b2b_icon-user-management" \| "b2b_icon-vacation" \| "b2b_icon-variant-content" \| "b2b_icon-vegan" \| "b2b_icon-vegetarian" \| "b2b_icon-viewtoggle-tiles" \| "b2b_icon-village" \| "b2b_icon-volume-off" \| "b2b_icon-volume-on" \| "b2b_icon-voucher" \| "b2b_icon-walnut" \| "b2b_icon-warning-hint" \| "b2b_icon-warning" \| "b2b_icon-warranty" \| "b2b_icon-washing-machine" \| "b2b_icon-whatsapp" \| "b2b_icon-wheat" \| "b2b_icon-wifi" \| "b2b_icon-wishlist-active" \| "b2b_icon-wishlist" \| "b2b_icon-work-life" \| "b2b_icon-workshop" \| "b2b_icon-zoom-in" \| "b2b_icon-zoom-out" \| "b2b_logo-carrier-dhl" \| "b2b_logo-carrier-gls" \| "b2b_logo-carrier-hermes" \| "b2b_logo-carrier-ups"` | `undefined` | +| `size` | `size` | The size of the icon in pixel. Minimum is 24, maximum is 96px. | `number` | `24` | ---------------------------------------------- diff --git a/packages/core-components/src/components/icon-100/types.ts b/packages/core-components/src/components/icon-100/types.ts index b4214256..9e8e0a4c 100644 --- a/packages/core-components/src/components/icon-100/types.ts +++ b/packages/core-components/src/components/icon-100/types.ts @@ -41,7 +41,7 @@ export const iconTypes = [ 'b2b_icon-celery', 'b2b_icon-certificate', 'b2b_icon-chair', - 'b2b_icon-chat', + 'b2b_icon-chatbot', 'b2b_icon-check-bold', 'b2b_icon-check', 'b2b_icon-chicken', @@ -79,6 +79,7 @@ export const iconTypes = [ 'b2b_icon-downloads', 'b2b_icon-dress', 'b2b_icon-dungarees', + 'b2b_icon-duplicate', 'b2b_icon-duration', 'b2b_icon-e-invoice', 'b2b_icon-edit-pad', diff --git a/packages/core-components/src/components/icon/icons/b2b_icon-duplicate.svg b/packages/core-components/src/components/icon/icons/b2b_icon-duplicate.svg new file mode 100644 index 00000000..4f3be114 --- /dev/null +++ b/packages/core-components/src/components/icon/icons/b2b_icon-duplicate.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/core-components/src/components/icon/readme.md b/packages/core-components/src/components/icon/readme.md index 962fdbda..69c8c2e2 100644 --- a/packages/core-components/src/components/icon/readme.md +++ b/packages/core-components/src/components/icon/readme.md @@ -7,13 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `clickable` | `clickable` | Will display a pointer cursor when hovering the icon | `boolean` | `false` | -| `color` | `color` | The color of the icon | `"inherit" \| "inverse" \| "primary" \| "secondary"` | `'inherit'` | -| `focusable` | `focusable` | Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. | `boolean` | `false` | -| `icon` | `icon` | The name of the icon | `"b2b_icon-360-degree" \| "b2b_icon-advice" \| "b2b_icon-allergen-sulfur-dioxide-sulfite" \| "b2b_icon-almond" \| "b2b_icon-archive" \| "b2b_icon-armchair" \| "b2b_icon-arrow-down-50" \| "b2b_icon-arrow-down" \| "b2b_icon-arrow-graph" \| "b2b_icon-arrow-left-50" \| "b2b_icon-arrow-left" \| "b2b_icon-arrow-right-50" \| "b2b_icon-arrow-right" \| "b2b_icon-arrow-up-50" \| "b2b_icon-arrow-up" \| "b2b_icon-assembly" \| "b2b_icon-assortment" \| "b2b_icon-attachment" \| "b2b_icon-augmented-reality" \| "b2b_icon-autonomous-team" \| "b2b_icon-bank-details" \| "b2b_icon-bar-graph-ascending" \| "b2b_icon-bar-graph-axis" \| "b2b_icon-barley" \| "b2b_icon-basket-50" \| "b2b_icon-basket-sale" \| "b2b_icon-basket" \| "b2b_icon-basketball" \| "b2b_icon-bikini" \| "b2b_icon-blogs" \| "b2b_icon-brandshop" \| "b2b_icon-brazil-nut" \| "b2b_icon-browser-click" \| "b2b_icon-browser-content" \| "b2b_icon-browser-psm" \| "b2b_icon-burger" \| "b2b_icon-bus" \| "b2b_icon-callback" \| "b2b_icon-camera" \| "b2b_icon-cashback" \| "b2b_icon-cashew-nut" \| "b2b_icon-catalogue" \| "b2b_icon-categories" \| "b2b_icon-celery" \| "b2b_icon-certificate" \| "b2b_icon-chair" \| "b2b_icon-chat" \| "b2b_icon-check-50" \| "b2b_icon-check-bold" \| "b2b_icon-check" \| "b2b_icon-chicken" \| "b2b_icon-city" \| "b2b_icon-clear" \| "b2b_icon-close-50" \| "b2b_icon-close-bold" \| "b2b_icon-close" \| "b2b_icon-code-management" \| "b2b_icon-contact-mail" \| "b2b_icon-copy" \| "b2b_icon-cow" \| "b2b_icon-crab" \| "b2b_icon-critique" \| "b2b_icon-curtain" \| "b2b_icon-cut-out" \| "b2b_icon-dashboard" \| "b2b_icon-deer" \| "b2b_icon-delete-50" \| "b2b_icon-delete" \| "b2b_icon-delivery-24h" \| "b2b_icon-delivery-desired-date-selection" \| "b2b_icon-delivery-desired-date" \| "b2b_icon-delivery-express" \| "b2b_icon-delivery-flat" \| "b2b_icon-delivery-on-hangers" \| "b2b_icon-delivery-preferred-place" \| "b2b_icon-desktop-phone-ads-click" \| "b2b_icon-desktop-phone-ads" \| "b2b_icon-desktop-phone" \| "b2b_icon-desktop" \| "b2b_icon-devices-monitor-laptop-tablet" \| "b2b_icon-dish-feature-lactose-free" \| "b2b_icon-dislike" \| "b2b_icon-disposal" \| "b2b_icon-document-sign" \| "b2b_icon-downloads" \| "b2b_icon-dress" \| "b2b_icon-dungarees" \| "b2b_icon-duration" \| "b2b_icon-e-invoice" \| "b2b_icon-edit-pad" \| "b2b_icon-edit" \| "b2b_icon-egg" \| "b2b_icon-ellipsis" \| "b2b_icon-email-verification-confirmed-safe" \| "b2b_icon-email-verification-confirmed" \| "b2b_icon-email-verification-sent-safe" \| "b2b_icon-email-verification-sent" \| "b2b_icon-empty-hint" \| "b2b_icon-end-to-end" \| "b2b_icon-error-article-image" \| "b2b_icon-error-hint-50" \| "b2b_icon-error-hint" \| "b2b_icon-error" \| "b2b_icon-euro" \| "b2b_icon-event" \| "b2b_icon-events" \| "b2b_icon-expand" \| "b2b_icon-faq" \| "b2b_icon-feedback" \| "b2b_icon-filter-50" \| "b2b_icon-filter" \| "b2b_icon-fish" \| "b2b_icon-fitness" \| "b2b_icon-flag-chequered" \| "b2b_icon-flexible-work" \| "b2b_icon-flip" \| "b2b_icon-food-processor" \| "b2b_icon-fullscreen" \| "b2b_icon-gallery-view" \| "b2b_icon-gamepad" \| "b2b_icon-garlic" \| "b2b_icon-gender-intersex" \| "b2b_icon-globe" \| "b2b_icon-gluten" \| "b2b_icon-glutenfree" \| "b2b_icon-handshake" \| "b2b_icon-hashtag" \| "b2b_icon-hazelnut" \| "b2b_icon-hide" \| "b2b_icon-high-heels" \| "b2b_icon-home" \| "b2b_icon-info-50" \| "b2b_icon-info-hint-50" \| "b2b_icon-info-small" \| "b2b_icon-info" \| "b2b_icon-inplace-zoom-reverse" \| "b2b_icon-inplace-zoom" \| "b2b_icon-insurance" \| "b2b_icon-kamut" \| "b2b_icon-laptop-os" \| "b2b_icon-laptop" \| "b2b_icon-leaving-page-50" \| "b2b_icon-leaving-page" \| "b2b_icon-light-bulb" \| "b2b_icon-like-fingers" \| "b2b_icon-like-product" \| "b2b_icon-like" \| "b2b_icon-line-graph" \| "b2b_icon-list-view" \| "b2b_icon-location" \| "b2b_icon-lupine" \| "b2b_icon-macadamia" \| "b2b_icon-material-samples" \| "b2b_icon-measurement" \| "b2b_icon-megaphone" \| "b2b_icon-menu" \| "b2b_icon-mic" \| "b2b_icon-milk" \| "b2b_icon-minus-50" \| "b2b_icon-minus" \| "b2b_icon-module-operations" \| "b2b_icon-money-coins" \| "b2b_icon-money-document" \| "b2b_icon-money-plus" \| "b2b_icon-money-stack" \| "b2b_icon-money" \| "b2b_icon-move" \| "b2b_icon-mustard" \| "b2b_icon-nav" \| "b2b_icon-new" \| "b2b_icon-newsletter-sign-up" \| "b2b_icon-notification" \| "b2b_icon-nuts" \| "b2b_icon-oat" \| "b2b_icon-order-cancelled" \| "b2b_icon-order-delivered" \| "b2b_icon-order-form" \| "b2b_icon-order-management" \| "b2b_icon-order-misdirected" \| "b2b_icon-order-on-road" \| "b2b_icon-order-packed" \| "b2b_icon-order-payment" \| "b2b_icon-order-received" \| "b2b_icon-order-return" \| "b2b_icon-order-shipped" \| "b2b_icon-order-state-unknown" \| "b2b_icon-order-stored" \| "b2b_icon-order" \| "b2b_icon-otto-app" \| "b2b_icon-otto-campus" \| "b2b_icon-otto-company" \| "b2b_icon-otto-laptop" \| "b2b_icon-otto-logo" \| "b2b_icon-otto-up-points" \| "b2b_icon-otto-up" \| "b2b_icon-paper-plane" \| "b2b_icon-pause" \| "b2b_icon-payment-credit-card" \| "b2b_icon-payment-invoice" \| "b2b_icon-payment-pause" \| "b2b_icon-payment-plan-protection" \| "b2b_icon-payment-plan" \| "b2b_icon-pdf" \| "b2b_icon-peanut" \| "b2b_icon-pecan-nut" \| "b2b_icon-pending" \| "b2b_icon-person-access" \| "b2b_icon-person-callcenter" \| "b2b_icon-person-check" \| "b2b_icon-person-colleagues" \| "b2b_icon-person-community" \| "b2b_icon-person-development" \| "b2b_icon-person-female" \| "b2b_icon-person-info" \| "b2b_icon-person-male" \| "b2b_icon-person-rating" \| "b2b_icon-person-support" \| "b2b_icon-person-switch" \| "b2b_icon-person-workshop" \| "b2b_icon-person" \| "b2b_icon-phone-permission" \| "b2b_icon-phone" \| "b2b_icon-pig" \| "b2b_icon-pin-50" \| "b2b_icon-pin" \| "b2b_icon-pinch-gesture" \| "b2b_icon-pinch" \| "b2b_icon-pistachio" \| "b2b_icon-plant" \| "b2b_icon-play-1" \| "b2b_icon-play" \| "b2b_icon-plus-50" \| "b2b_icon-plus" \| "b2b_icon-price-alert" \| "b2b_icon-price-tag" \| "b2b_icon-print" \| "b2b_icon-puzzle" \| "b2b_icon-qr-code" \| "b2b_icon-question-50" \| "b2b_icon-question-hint-50" \| "b2b_icon-question-hint" \| "b2b_icon-question" \| "b2b_icon-rating-empty-50" \| "b2b_icon-rating-empty" \| "b2b_icon-rating-filled-50" \| "b2b_icon-rating-filled" \| "b2b_icon-rating-half-50" \| "b2b_icon-rating-half" \| "b2b_icon-rating-order" \| "b2b_icon-rating-payment" \| "b2b_icon-refresh-50" \| "b2b_icon-remote-work" \| "b2b_icon-repair" \| "b2b_icon-reply-50" \| "b2b_icon-reply" \| "b2b_icon-retirement-provision" \| "b2b_icon-rocket" \| "b2b_icon-rye" \| "b2b_icon-sabbatical" \| "b2b_icon-sale" \| "b2b_icon-save" \| "b2b_icon-sea" \| "b2b_icon-search-enter" \| "b2b_icon-search" \| "b2b_icon-seo" \| "b2b_icon-service-info" \| "b2b_icon-sesame" \| "b2b_icon-settings" \| "b2b_icon-share-ios" \| "b2b_icon-share" \| "b2b_icon-sheep" \| "b2b_icon-shell" \| "b2b_icon-shirt" \| "b2b_icon-shopping-cart-euro" \| "b2b_icon-shopping-cart" \| "b2b_icon-show" \| "b2b_icon-smiley-angry" \| "b2b_icon-smiley-happy" \| "b2b_icon-smiley-negative" \| "b2b_icon-smiley-neutral" \| "b2b_icon-smiley-positive-50" \| "b2b_icon-smiley-positive" \| "b2b_icon-sms-info" \| "b2b_icon-sneaker" \| "b2b_icon-sort-50" \| "b2b_icon-sort-ascending-50" \| "b2b_icon-sort-ascending" \| "b2b_icon-sort-descending-50" \| "b2b_icon-sort-descending" \| "b2b_icon-sort" \| "b2b_icon-soy" \| "b2b_icon-spelt" \| "b2b_icon-stationary" \| "b2b_icon-studies" \| "b2b_icon-success-hint-50" \| "b2b_icon-success" \| "b2b_icon-sustainable-delivery" \| "b2b_icon-sustainable-energy-efficient" \| "b2b_icon-sustainable-production" \| "b2b_icon-sustainable-recycling" \| "b2b_icon-sustainable-resource" \| "b2b_icon-swipe-gesture" \| "b2b_icon-sync-device" \| "b2b_icon-t-shirt" \| "b2b_icon-tablet" \| "b2b_icon-tableware" \| "b2b_icon-target-group" \| "b2b_icon-teddy" \| "b2b_icon-test-result" \| "b2b_icon-town" \| "b2b_icon-trash" \| "b2b_icon-trend-down-50" \| "b2b_icon-trend-down" \| "b2b_icon-trend-left" \| "b2b_icon-trend-right" \| "b2b_icon-trend-up-50" \| "b2b_icon-trend-up" \| "b2b_icon-trousers" \| "b2b_icon-trusted" \| "b2b_icon-unpin" \| "b2b_icon-upload" \| "b2b_icon-user-management" \| "b2b_icon-vacation" \| "b2b_icon-variant-content" \| "b2b_icon-vegan" \| "b2b_icon-vegetarian" \| "b2b_icon-viewtoggle-tiles" \| "b2b_icon-village" \| "b2b_icon-volume-off" \| "b2b_icon-volume-on" \| "b2b_icon-voucher" \| "b2b_icon-walnut" \| "b2b_icon-warning-hint-50" \| "b2b_icon-warning-hint" \| "b2b_icon-warning" \| "b2b_icon-warranty" \| "b2b_icon-washing-machine" \| "b2b_icon-whatsapp" \| "b2b_icon-wheat" \| "b2b_icon-wifi" \| "b2b_icon-wishlist-50" \| "b2b_icon-wishlist-active-50" \| "b2b_icon-wishlist-active" \| "b2b_icon-wishlist" \| "b2b_icon-work-life" \| "b2b_icon-workshop" \| "b2b_icon-zoom-in" \| "b2b_icon-zoom-out" \| "b2b_logo-carrier-dhl" \| "b2b_logo-carrier-gls" \| "b2b_logo-carrier-hermes" \| "b2b_logo-carrier-ups"` | `undefined` | -| `size` | `size` | **[DEPRECATED]** The size of the icon. In the future, only 50 and 100 will be support through new components.

| `"100" \| "200" \| "50"` | `'100'` | +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `clickable` | `clickable` | Will display a pointer cursor when hovering the icon | `boolean` | `false` | +| `color` | `color` | The color of the icon | `"inherit" \| "inverse" \| "primary" \| "secondary"` | `'inherit'` | +| `focusable` | `focusable` | Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. | `boolean` | `false` | +| `icon` | `icon` | The name of the icon | `"b2b_icon-360-degree" \| "b2b_icon-advice" \| "b2b_icon-allergen-sulfur-dioxide-sulfite" \| "b2b_icon-almond" \| "b2b_icon-archive" \| "b2b_icon-armchair" \| "b2b_icon-arrow-down-50" \| "b2b_icon-arrow-down" \| "b2b_icon-arrow-graph" \| "b2b_icon-arrow-left-50" \| "b2b_icon-arrow-left" \| "b2b_icon-arrow-right-50" \| "b2b_icon-arrow-right" \| "b2b_icon-arrow-up-50" \| "b2b_icon-arrow-up" \| "b2b_icon-assembly" \| "b2b_icon-assortment" \| "b2b_icon-attachment" \| "b2b_icon-augmented-reality" \| "b2b_icon-autonomous-team" \| "b2b_icon-bank-details" \| "b2b_icon-bar-graph-ascending" \| "b2b_icon-bar-graph-axis" \| "b2b_icon-barley" \| "b2b_icon-basket-50" \| "b2b_icon-basket-sale" \| "b2b_icon-basket" \| "b2b_icon-basketball" \| "b2b_icon-bikini" \| "b2b_icon-blogs" \| "b2b_icon-brandshop" \| "b2b_icon-brazil-nut" \| "b2b_icon-browser-click" \| "b2b_icon-browser-content" \| "b2b_icon-browser-psm" \| "b2b_icon-burger" \| "b2b_icon-bus" \| "b2b_icon-callback" \| "b2b_icon-camera" \| "b2b_icon-cashback" \| "b2b_icon-cashew-nut" \| "b2b_icon-catalogue" \| "b2b_icon-categories" \| "b2b_icon-celery" \| "b2b_icon-certificate" \| "b2b_icon-chair" \| "b2b_icon-chat" \| "b2b_icon-chatbot" \| "b2b_icon-check-50" \| "b2b_icon-check-bold" \| "b2b_icon-check" \| "b2b_icon-chicken" \| "b2b_icon-city" \| "b2b_icon-clear" \| "b2b_icon-close-50" \| "b2b_icon-close-bold" \| "b2b_icon-close" \| "b2b_icon-code-management" \| "b2b_icon-contact-mail" \| "b2b_icon-copy" \| "b2b_icon-cow" \| "b2b_icon-crab" \| "b2b_icon-critique" \| "b2b_icon-curtain" \| "b2b_icon-cut-out" \| "b2b_icon-dashboard" \| "b2b_icon-deer" \| "b2b_icon-delete-50" \| "b2b_icon-delete" \| "b2b_icon-delivery-24h" \| "b2b_icon-delivery-desired-date-selection" \| "b2b_icon-delivery-desired-date" \| "b2b_icon-delivery-express" \| "b2b_icon-delivery-flat" \| "b2b_icon-delivery-on-hangers" \| "b2b_icon-delivery-preferred-place" \| "b2b_icon-desktop-phone-ads-click" \| "b2b_icon-desktop-phone-ads" \| "b2b_icon-desktop-phone" \| "b2b_icon-desktop" \| "b2b_icon-devices-monitor-laptop-tablet" \| "b2b_icon-dish-feature-lactose-free" \| "b2b_icon-dislike" \| "b2b_icon-disposal" \| "b2b_icon-document-sign" \| "b2b_icon-downloads" \| "b2b_icon-dress" \| "b2b_icon-dungarees" \| "b2b_icon-duplicate" \| "b2b_icon-duration" \| "b2b_icon-e-invoice" \| "b2b_icon-edit-pad" \| "b2b_icon-edit" \| "b2b_icon-egg" \| "b2b_icon-ellipsis" \| "b2b_icon-email-verification-confirmed-safe" \| "b2b_icon-email-verification-confirmed" \| "b2b_icon-email-verification-sent-safe" \| "b2b_icon-email-verification-sent" \| "b2b_icon-empty-hint" \| "b2b_icon-end-to-end" \| "b2b_icon-error-article-image" \| "b2b_icon-error-hint-50" \| "b2b_icon-error-hint" \| "b2b_icon-error" \| "b2b_icon-euro" \| "b2b_icon-event" \| "b2b_icon-events" \| "b2b_icon-expand" \| "b2b_icon-faq" \| "b2b_icon-feedback" \| "b2b_icon-filter-50" \| "b2b_icon-filter" \| "b2b_icon-fish" \| "b2b_icon-fitness" \| "b2b_icon-flag-chequered" \| "b2b_icon-flexible-work" \| "b2b_icon-flip" \| "b2b_icon-food-processor" \| "b2b_icon-fullscreen" \| "b2b_icon-gallery-view" \| "b2b_icon-gamepad" \| "b2b_icon-garlic" \| "b2b_icon-gender-intersex" \| "b2b_icon-globe" \| "b2b_icon-gluten" \| "b2b_icon-glutenfree" \| "b2b_icon-handshake" \| "b2b_icon-hashtag" \| "b2b_icon-hazelnut" \| "b2b_icon-hide" \| "b2b_icon-high-heels" \| "b2b_icon-home" \| "b2b_icon-info-50" \| "b2b_icon-info-hint-50" \| "b2b_icon-info-small" \| "b2b_icon-info" \| "b2b_icon-inplace-zoom-reverse" \| "b2b_icon-inplace-zoom" \| "b2b_icon-insurance" \| "b2b_icon-kamut" \| "b2b_icon-laptop-os" \| "b2b_icon-laptop" \| "b2b_icon-leaving-page-50" \| "b2b_icon-leaving-page" \| "b2b_icon-light-bulb" \| "b2b_icon-like-fingers" \| "b2b_icon-like-product" \| "b2b_icon-like" \| "b2b_icon-line-graph" \| "b2b_icon-list-view" \| "b2b_icon-location" \| "b2b_icon-lupine" \| "b2b_icon-macadamia" \| "b2b_icon-material-samples" \| "b2b_icon-measurement" \| "b2b_icon-megaphone" \| "b2b_icon-menu" \| "b2b_icon-mic" \| "b2b_icon-milk" \| "b2b_icon-minus-50" \| "b2b_icon-minus" \| "b2b_icon-module-operations" \| "b2b_icon-money-coins" \| "b2b_icon-money-document" \| "b2b_icon-money-plus" \| "b2b_icon-money-stack" \| "b2b_icon-money" \| "b2b_icon-move" \| "b2b_icon-mustard" \| "b2b_icon-nav" \| "b2b_icon-new" \| "b2b_icon-newsletter-sign-up" \| "b2b_icon-notification" \| "b2b_icon-nuts" \| "b2b_icon-oat" \| "b2b_icon-order-cancelled" \| "b2b_icon-order-delivered" \| "b2b_icon-order-form" \| "b2b_icon-order-management" \| "b2b_icon-order-misdirected" \| "b2b_icon-order-on-road" \| "b2b_icon-order-packed" \| "b2b_icon-order-payment" \| "b2b_icon-order-received" \| "b2b_icon-order-return" \| "b2b_icon-order-shipped" \| "b2b_icon-order-state-unknown" \| "b2b_icon-order-stored" \| "b2b_icon-order" \| "b2b_icon-otto-app" \| "b2b_icon-otto-campus" \| "b2b_icon-otto-company" \| "b2b_icon-otto-laptop" \| "b2b_icon-otto-logo" \| "b2b_icon-otto-up-points" \| "b2b_icon-otto-up" \| "b2b_icon-paper-plane" \| "b2b_icon-pause" \| "b2b_icon-payment-credit-card" \| "b2b_icon-payment-invoice" \| "b2b_icon-payment-pause" \| "b2b_icon-payment-plan-protection" \| "b2b_icon-payment-plan" \| "b2b_icon-pdf" \| "b2b_icon-peanut" \| "b2b_icon-pecan-nut" \| "b2b_icon-pending" \| "b2b_icon-person-access" \| "b2b_icon-person-callcenter" \| "b2b_icon-person-check" \| "b2b_icon-person-colleagues" \| "b2b_icon-person-community" \| "b2b_icon-person-development" \| "b2b_icon-person-female" \| "b2b_icon-person-info" \| "b2b_icon-person-male" \| "b2b_icon-person-rating" \| "b2b_icon-person-support" \| "b2b_icon-person-switch" \| "b2b_icon-person-workshop" \| "b2b_icon-person" \| "b2b_icon-phone-permission" \| "b2b_icon-phone" \| "b2b_icon-pig" \| "b2b_icon-pin-50" \| "b2b_icon-pin" \| "b2b_icon-pinch-gesture" \| "b2b_icon-pinch" \| "b2b_icon-pistachio" \| "b2b_icon-plant" \| "b2b_icon-play-1" \| "b2b_icon-play" \| "b2b_icon-plus-50" \| "b2b_icon-plus" \| "b2b_icon-price-alert" \| "b2b_icon-price-tag" \| "b2b_icon-print" \| "b2b_icon-puzzle" \| "b2b_icon-qr-code" \| "b2b_icon-question-50" \| "b2b_icon-question-hint-50" \| "b2b_icon-question-hint" \| "b2b_icon-question" \| "b2b_icon-rating-empty-50" \| "b2b_icon-rating-empty" \| "b2b_icon-rating-filled-50" \| "b2b_icon-rating-filled" \| "b2b_icon-rating-half-50" \| "b2b_icon-rating-half" \| "b2b_icon-rating-order" \| "b2b_icon-rating-payment" \| "b2b_icon-refresh-50" \| "b2b_icon-remote-work" \| "b2b_icon-repair" \| "b2b_icon-reply-50" \| "b2b_icon-reply" \| "b2b_icon-retirement-provision" \| "b2b_icon-rocket" \| "b2b_icon-rye" \| "b2b_icon-sabbatical" \| "b2b_icon-sale" \| "b2b_icon-save" \| "b2b_icon-sea" \| "b2b_icon-search-enter" \| "b2b_icon-search" \| "b2b_icon-seo" \| "b2b_icon-service-info" \| "b2b_icon-sesame" \| "b2b_icon-settings" \| "b2b_icon-share-ios" \| "b2b_icon-share" \| "b2b_icon-sheep" \| "b2b_icon-shell" \| "b2b_icon-shirt" \| "b2b_icon-shopping-cart-euro" \| "b2b_icon-shopping-cart" \| "b2b_icon-show" \| "b2b_icon-smiley-angry" \| "b2b_icon-smiley-happy" \| "b2b_icon-smiley-negative" \| "b2b_icon-smiley-neutral" \| "b2b_icon-smiley-positive-50" \| "b2b_icon-smiley-positive" \| "b2b_icon-sms-info" \| "b2b_icon-sneaker" \| "b2b_icon-sort-50" \| "b2b_icon-sort-ascending-50" \| "b2b_icon-sort-ascending" \| "b2b_icon-sort-descending-50" \| "b2b_icon-sort-descending" \| "b2b_icon-sort" \| "b2b_icon-soy" \| "b2b_icon-spelt" \| "b2b_icon-stationary" \| "b2b_icon-studies" \| "b2b_icon-success-hint-50" \| "b2b_icon-success" \| "b2b_icon-sustainable-delivery" \| "b2b_icon-sustainable-energy-efficient" \| "b2b_icon-sustainable-production" \| "b2b_icon-sustainable-recycling" \| "b2b_icon-sustainable-resource" \| "b2b_icon-swipe-gesture" \| "b2b_icon-sync-device" \| "b2b_icon-t-shirt" \| "b2b_icon-tablet" \| "b2b_icon-tableware" \| "b2b_icon-target-group" \| "b2b_icon-teddy" \| "b2b_icon-test-result" \| "b2b_icon-town" \| "b2b_icon-trash" \| "b2b_icon-trend-down-50" \| "b2b_icon-trend-down" \| "b2b_icon-trend-left" \| "b2b_icon-trend-right" \| "b2b_icon-trend-up-50" \| "b2b_icon-trend-up" \| "b2b_icon-trousers" \| "b2b_icon-trusted" \| "b2b_icon-unpin" \| "b2b_icon-upload" \| "b2b_icon-user-management" \| "b2b_icon-vacation" \| "b2b_icon-variant-content" \| "b2b_icon-vegan" \| "b2b_icon-vegetarian" \| "b2b_icon-viewtoggle-tiles" \| "b2b_icon-village" \| "b2b_icon-volume-off" \| "b2b_icon-volume-on" \| "b2b_icon-voucher" \| "b2b_icon-walnut" \| "b2b_icon-warning-hint-50" \| "b2b_icon-warning-hint" \| "b2b_icon-warning" \| "b2b_icon-warranty" \| "b2b_icon-washing-machine" \| "b2b_icon-whatsapp" \| "b2b_icon-wheat" \| "b2b_icon-wifi" \| "b2b_icon-wishlist-50" \| "b2b_icon-wishlist-active-50" \| "b2b_icon-wishlist-active" \| "b2b_icon-wishlist" \| "b2b_icon-work-life" \| "b2b_icon-workshop" \| "b2b_icon-zoom-in" \| "b2b_icon-zoom-out" \| "b2b_logo-carrier-dhl" \| "b2b_logo-carrier-gls" \| "b2b_logo-carrier-hermes" \| "b2b_logo-carrier-ups"` | `undefined` | +| `size` | `size` | **[DEPRECATED]** The size of the icon. In the future, only 50 and 100 will be support through new components.

| `"100" \| "200" \| "50"` | `'100'` | ## Dependencies diff --git a/packages/core-components/src/components/icon/types.ts b/packages/core-components/src/components/icon/types.ts index 746fe4a6..406e6ff2 100644 --- a/packages/core-components/src/components/icon/types.ts +++ b/packages/core-components/src/components/icon/types.ts @@ -47,6 +47,7 @@ export const iconTypes = [ "b2b_icon-certificate", "b2b_icon-chair", "b2b_icon-chat", + "b2b_icon-chatbot", "b2b_icon-check-50", "b2b_icon-check-bold", "b2b_icon-check", @@ -87,6 +88,7 @@ export const iconTypes = [ "b2b_icon-downloads", "b2b_icon-dress", "b2b_icon-dungarees", + "b2b_icon-duplicate", "b2b_icon-duration", "b2b_icon-e-invoice", "b2b_icon-edit-pad", diff --git a/packages/core-components/src/components/input/readme.md b/packages/core-components/src/components/input/readme.md index c1c05581..ff7dc33f 100644 --- a/packages/core-components/src/components/input/readme.md +++ b/packages/core-components/src/components/input/readme.md @@ -12,19 +12,20 @@ Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53 ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------- | -| `autofocus` | `autofocus` | When setting the autofocus to true, the input element will be focused when the page loads. | `boolean` | `false` | -| `disabled` | `disabled` | Whether or not the input is disabled. Default is false. | `boolean` | `false` | -| `error` | `error` | The error message that is shown if the input is invalid. | `string` | `undefined` | -| `hint` | `hint` | The hint text that appears underneath the input field. | `string` | `undefined` | -| `invalid` | `invalid` | Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false. | `boolean` | `false` | -| `label` | `label` | The input label. | `string` | `undefined` | -| `name` | `name` | The name of the input. Use it to group label and input together and make it more accessible. | `string` | `undefined` | -| `placeholder` | `placeholder` | A placeholder for the input field. Per default, it is null. | `string` | `null` | -| `required` | `required` | Adds an asterisk at the end of the label to signify that the field is required. | `boolean` | `false` | -| `type` | `type` | The type of the input. All native HTML types except date or month are supported. Default is text. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'` | -| `value` | `value` | The default value of the input field. If defined, it will prefill the input. | `string` | `null` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------- | +| `autofocus` | `autofocus` | When setting the autofocus to true, the input element will be focused when the page loads. | `boolean` | `false` | +| `disabled` | `disabled` | Whether or not the input is disabled. Default is false. | `boolean` | `false` | +| `error` | `error` | The error message that is shown if the input is invalid. | `string` | `undefined` | +| `hint` | `hint` | The hint text that appears underneath the input field. | `string` | `undefined` | +| `inputTextAlign` | `input-text-align` | The alignment of the text. | `"center" \| "left" \| "right"` | `'left'` | +| `invalid` | `invalid` | Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false. | `boolean` | `false` | +| `label` | `label` | The input label. | `string` | `undefined` | +| `name` | `name` | The name of the input. Use it to group label and input together and make it more accessible. | `string` | `undefined` | +| `placeholder` | `placeholder` | A placeholder for the input field. Per default, it is null. | `string` | `null` | +| `required` | `required` | Adds an asterisk at the end of the label to signify that the field is required. | `boolean` | `false` | +| `type` | `type` | The type of the input. All native HTML types except date or month are supported. Default is text. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'` | +| `value` | `value` | The default value of the input field. If defined, it will prefill the input. | `string` | `null` | ## Events diff --git a/packages/core-components/src/docs/config/components-args.json b/packages/core-components/src/docs/config/components-args.json index 5b7a7059..7699d305 100644 --- a/packages/core-components/src/docs/config/components-args.json +++ b/packages/core-components/src/docs/config/components-args.json @@ -43,7 +43,10 @@ "description": "Whether the alert is currently open. Set to true to display the alert." }, "size": { - "options": ["large", "small"], + "options": [ + "large", + "small" + ], "control": { "type": "radio" }, @@ -58,7 +61,12 @@ "description": "The size of the alert. Per default it is large. If set to small, the alert will only have an icon." }, "type": { - "options": ["error", "info", "success", "warning"], + "options": [ + "error", + "info", + "success", + "warning" + ], "control": { "type": "radio" }, @@ -95,7 +103,10 @@ "description": "The URL or URL fragment the anchor points to. This is required." }, "size": { - "options": ["100", "inherit"], + "options": [ + "100", + "inherit" + ], "control": { "type": "radio" }, @@ -110,7 +121,12 @@ "description": "The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px." }, "target": { - "options": ["blank", "parent", "self", "top"], + "options": [ + "blank", + "parent", + "self", + "top" + ], "control": { "type": "radio" }, @@ -224,7 +240,10 @@ "description": "Whether the button is currently loading. Set to true to hide text and display loading spinner instead" }, "size": { - "options": ["100", "50"], + "options": [ + "100", + "50" + ], "control": { "type": "radio" }, @@ -239,7 +258,10 @@ "description": "The size of the button, 100 is the default state" }, "target": { - "options": ["blank", "self"], + "options": [ + "blank", + "self" + ], "control": { "type": "radio" }, @@ -254,7 +276,11 @@ "description": "The target of the button if it should behave like an anchor. Per default it is self." }, "type": { - "options": ["button", "reset", "submit"], + "options": [ + "button", + "reset", + "submit" + ], "control": { "type": "radio" }, @@ -269,7 +295,10 @@ "description": "The button type. Matches native HTML types. The default type is 'button'." }, "variant": { - "options": ["primary", "secondary"], + "options": [ + "primary", + "secondary" + ], "control": { "type": "radio" }, @@ -284,7 +313,11 @@ "description": "The button variant. If not specified, the button will be the secondary variant." }, "width": { - "options": ["custom", "fit-container", "fit-content"], + "options": [ + "custom", + "fit-container", + "fit-content" + ], "control": { "type": "radio" }, @@ -467,7 +500,10 @@ "description": "An optional href in case the card is used to redirect on click." }, "target": { - "options": ["blank", "self"], + "options": [ + "blank", + "self" + ], "control": { "type": "radio" }, @@ -613,7 +649,10 @@ }, "b2b-checkbox-group": { "alignment": { - "options": ["horizontal", "vertical"], + "options": [ + "horizontal", + "vertical" + ], "control": { "type": "radio" }, @@ -736,7 +775,12 @@ "description": "The text content of the chip. It is required." }, "labelStyle": { - "options": ["bold", "italic", "strikethrough", "underline"], + "options": [ + "bold", + "italic", + "strikethrough", + "underline" + ], "control": { "type": "radio" }, @@ -749,7 +793,12 @@ "description": "The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set." }, "type": { - "options": ["error", "info", "success", "warn"], + "options": [ + "error", + "info", + "success", + "warn" + ], "control": { "type": "radio" }, @@ -932,7 +981,11 @@ "description": "How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row." }, "textAlign": { - "options": ["center", "left", "right"], + "options": [ + "center", + "left", + "right" + ], "control": { "type": "radio" }, @@ -949,7 +1002,12 @@ }, "b2b-grid-row": { "alignItems": { - "options": ["center", "flex-end", "flex-start", "stretch"], + "options": [ + "center", + "flex-end", + "flex-start", + "stretch" + ], "control": { "type": "radio" }, @@ -1010,7 +1068,11 @@ }, "b2b-headline": { "align": { - "options": ["center", "left", "right"], + "options": [ + "center", + "left", + "right" + ], "control": { "type": "radio" }, @@ -1039,7 +1101,11 @@ "description": "Whether the headline should have a margin. Per default, margins are enabled." }, "size": { - "options": ["100", "200", "400"], + "options": [ + "100", + "200", + "400" + ], "control": { "type": "radio" }, @@ -1070,7 +1136,12 @@ "description": "Will display a pointer cursor when hovering the icon" }, "color": { - "options": ["inherit", "inverse", "primary", "secondary"], + "options": [ + "inherit", + "inverse", + "primary", + "secondary" + ], "control": { "type": "radio" }, @@ -1147,6 +1218,7 @@ "b2b_icon-certificate", "b2b_icon-chair", "b2b_icon-chat", + "b2b_icon-chatbot", "b2b_icon-check-50", "b2b_icon-check-bold", "b2b_icon-check", @@ -1187,6 +1259,7 @@ "b2b_icon-downloads", "b2b_icon-dress", "b2b_icon-dungarees", + "b2b_icon-duplicate", "b2b_icon-duration", "b2b_icon-e-invoice", "b2b_icon-edit-pad", @@ -1465,7 +1538,11 @@ "description": "The name of the icon" }, "size": { - "options": ["100", "200", "50"], + "options": [ + "100", + "200", + "50" + ], "control": { "type": "radio" }, @@ -1496,7 +1573,12 @@ "description": "Will display a pointer cursor when hovering the icon" }, "color": { - "options": ["inherit", "inverse", "primary", "secondary"], + "options": [ + "inherit", + "inverse", + "primary", + "secondary" + ], "control": { "type": "radio" }, @@ -1567,7 +1649,7 @@ "b2b_icon-celery", "b2b_icon-certificate", "b2b_icon-chair", - "b2b_icon-chat", + "b2b_icon-chatbot", "b2b_icon-check-bold", "b2b_icon-check", "b2b_icon-chicken", @@ -1605,6 +1687,7 @@ "b2b_icon-downloads", "b2b_icon-dress", "b2b_icon-dungarees", + "b2b_icon-duplicate", "b2b_icon-duration", "b2b_icon-e-invoice", "b2b_icon-edit-pad", @@ -1885,7 +1968,12 @@ "description": "Will display a pointer cursor when hovering the icon" }, "color": { - "options": ["inherit", "inverse", "primary", "secondary"], + "options": [ + "inherit", + "inverse", + "primary", + "secondary" + ], "control": { "type": "radio" }, @@ -2008,6 +2096,25 @@ }, "description": "The hint text that appears underneath the input field." }, + "inputTextAlign": { + "options": [ + "center", + "left", + "right" + ], + "control": { + "type": "radio" + }, + "table": { + "type": { + "summary": "string" + }, + "defaultValue": { + "summary": "'left'" + } + }, + "description": "The alignment of the text." + }, "invalid": { "control": { "type": "boolean" @@ -2261,7 +2368,13 @@ }, "b2b-label": { "type": { - "options": ["error", "info", "neutral", "success", "warning"], + "options": [ + "error", + "info", + "neutral", + "success", + "warning" + ], "control": { "type": "radio" }, @@ -2329,7 +2442,10 @@ "description": "Whether the modal is shown or not. Default is false" }, "variant": { - "options": ["default", "large"], + "options": [ + "default", + "large" + ], "control": { "type": "radio" }, @@ -2488,7 +2604,11 @@ }, "b2b-paragraph": { "align": { - "options": ["center", "left", "right"], + "options": [ + "center", + "left", + "right" + ], "control": { "type": "radio" }, @@ -2503,7 +2623,10 @@ "description": "The alignment of the text." }, "size": { - "options": ["100", "50"], + "options": [ + "100", + "50" + ], "control": { "type": "radio" }, @@ -2518,7 +2641,10 @@ "description": "The size of the text." }, "weight": { - "options": ["bold", "normal"], + "options": [ + "bold", + "normal" + ], "control": { "type": "radio" }, @@ -2544,7 +2670,10 @@ "description": "The label of the progress bar." }, "labelPosition": { - "options": ["left", "right"], + "options": [ + "left", + "right" + ], "control": { "type": "radio" }, @@ -2559,7 +2688,10 @@ "description": "Whether the label should be displayed on the right or left of the progress bar." }, "labelType": { - "options": ["below", "side"], + "options": [ + "below", + "side" + ], "control": { "type": "radio" }, @@ -2688,7 +2820,10 @@ }, "b2b-radio-group": { "alignment": { - "options": ["horizontal", "vertical"], + "options": [ + "horizontal", + "vertical" + ], "control": { "type": "radio" }, @@ -2877,7 +3012,10 @@ }, "b2b-separator": { "alignment": { - "options": ["horizontal", "vertical"], + "options": [ + "horizontal", + "vertical" + ], "control": { "type": "radio" }, @@ -2894,7 +3032,11 @@ }, "b2b-spinner": { "color": { - "options": ["inverse", "primary", "secondary"], + "options": [ + "inverse", + "primary", + "secondary" + ], "control": { "type": "radio" }, @@ -2909,7 +3051,11 @@ "description": "The color of the spinner." }, "size": { - "options": ["100", "200", "50"], + "options": [ + "100", + "200", + "50" + ], "control": { "type": "radio" }, @@ -2987,7 +3133,11 @@ "b2b-tab-panel": {}, "b2b-table": { "size": { - "options": ["colspan", "equal", "expand"], + "options": [ + "colspan", + "equal", + "expand" + ], "control": { "type": "radio" }, @@ -3004,7 +3154,11 @@ }, "b2b-table-cell": { "align": { - "options": ["center", "left", "right"], + "options": [ + "center", + "left", + "right" + ], "control": { "type": "radio" }, @@ -3019,7 +3173,11 @@ "description": "Alignment of the content of the cell, by default is to the left. *" }, "color": { - "options": ["default", "group", "selected"], + "options": [ + "default", + "group", + "selected" + ], "control": { "type": "radio" }, @@ -3082,7 +3240,11 @@ "description": "The width of the column. Increase it to change the size of the column relative to other columns." }, "contentAlign": { - "options": ["center", "left", "right"], + "options": [ + "center", + "left", + "right" + ], "control": { "type": "radio" }, @@ -3125,7 +3287,11 @@ "description": "" }, "size": { - "options": ["colspan", "equal", "expand"], + "options": [ + "colspan", + "equal", + "expand" + ], "control": { "type": "radio" }, @@ -3140,7 +3306,11 @@ "description": "The size of the cell. Follows table size.\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\nOther sizes won't affect cell current implementation." }, "sortDirection": { - "options": ["ascending", "descending", "not-sorted"], + "options": [ + "ascending", + "descending", + "not-sorted" + ], "control": { "type": "radio" }, @@ -3178,7 +3348,11 @@ "description": "If a selectable row is currently checked. Per default, it is false." }, "color": { - "options": ["default", "group", "selected"], + "options": [ + "default", + "group", + "selected" + ], "control": { "type": "radio" }, @@ -3288,7 +3462,11 @@ "description": "If the rows in the rowgroup can be selected via checkmark. Per default, it is false." }, "type": { - "options": ["body", "footer", "header"], + "options": [ + "body", + "footer", + "header" + ], "control": { "type": "radio" }, @@ -3424,7 +3602,12 @@ "description": "Adds an asterisk at the end of the label to signify that the field is required." }, "resize": { - "options": ["horizontal", "none", "unset", "vertical"], + "options": [ + "horizontal", + "none", + "unset", + "vertical" + ], "control": { "type": "radio" }, @@ -3562,7 +3745,10 @@ "description": "The value associated with the toggle chip. This is emitted when the chip is interacted with." }, "variant": { - "options": ["grey", "white"], + "options": [ + "grey", + "white" + ], "control": { "type": "radio" }, @@ -3627,7 +3813,10 @@ "description": "An optional label for the toggle switch." }, "labelPosition": { - "options": ["left", "right"], + "options": [ + "left", + "right" + ], "control": { "type": "radio" }, @@ -3690,7 +3879,12 @@ "description": "Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility." }, "position": { - "options": ["bottom", "left", "right", "top"], + "options": [ + "bottom", + "left", + "right", + "top" + ], "control": { "type": "radio" }, @@ -3705,7 +3899,11 @@ "description": "Position of the tooltip." }, "trigger": { - "options": ["custom", "focus", "hover"], + "options": [ + "custom", + "focus", + "hover" + ], "control": { "type": "radio" }, @@ -3722,7 +3920,15 @@ }, "b2b-wizard": { "activeStep": { - "options": ["0", "1", "2", "3", "4", "5", "6"], + "options": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6" + ], "control": { "type": "radio" }, @@ -3781,7 +3987,12 @@ "description": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number" }, "state": { - "options": ["completed", "default", "disabled", "pending"], + "options": [ + "completed", + "default", + "disabled", + "pending" + ], "control": { "type": "radio" }, @@ -3796,7 +4007,14 @@ "description": "The state of the step" }, "step": { - "options": ["1", "2", "3", "4", "5", "6"], + "options": [ + "1", + "2", + "3", + "4", + "5", + "6" + ], "control": { "type": "radio" }, @@ -3825,7 +4043,12 @@ "description": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number" }, "state": { - "options": ["completed", "default", "disabled", "pending"], + "options": [ + "completed", + "default", + "disabled", + "pending" + ], "control": { "type": "radio" }, @@ -3840,7 +4063,14 @@ "description": "Use when wizard has property custom true. The state of the step" }, "step": { - "options": ["1", "2", "3", "4", "5", "6"], + "options": [ + "1", + "2", + "3", + "4", + "5", + "6" + ], "control": { "type": "radio" }, @@ -3855,4 +4085,4 @@ "description": "Use when wizard has property custom true. The step number" } } -} +} \ No newline at end of file