@otto-de/b2b-core-components 1.0.0

package/dist/types/components/modal/modal.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { BeforeCloseEventDetail } from '../../utils/interfaces/status.interface';
+/** Modal component
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+ */
+export declare class ModalComponent {
+  hostElement: HTMLB2bModalElement;
+  /** The title for the modal. This is required. */
+  heading: string;
+  /** Whether the modal is shown or not. Default is false */
+  opened: boolean;
+  /** 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 size of the modal. If not specified, will assume the default size */
+  variant: 'default' | 'large';
+  /** This even will be triggered when the modal is closed */
+  b2bClose: EventEmitter<void>;
+  /** This even will be triggered before the modal is closed */
+  b2bBeforeClose: EventEmitter<BeforeCloseEventDetail>;
+  iconHover: boolean;
+  isOpen: boolean;
+  private closeButton;
+  private focusableElements;
+  private toggleIconHover;
+  private emitBeforeClose;
+  handleKeypress(event: KeyboardEvent): void;
+  private handleBackdropDismiss;
+  private handleClickDismiss;
+  openedChanged(newValue: boolean): void;
+  private handleTopFocus;
+  private handleBottomFocus;
+  private attemptFocus;
+  private open;
+  private close;
+  private getFirstFocusableElement;
+  private getLastFocusableElement;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/modal/modal.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010BackdropDismiss: any;
+export declare const story020EscDismiss: any;
+export declare const story030Default: any;
+export declare const story040Large: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/pagination/pagination.constants.d.ts

@@ -0,0 +1,5 @@
+export declare enum PaginationConstants {
+  DOTS = "...",
+  BACK = "\u2039",
+  NEXT = "Weiter \u203A"
+}

package/dist/types/components/pagination/pagination.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { PageChangeEventDetail } from '../../utils/interfaces/interaction.interface';
+export declare class PaginationComponent {
+  /** The total number of pages to calculate the length of pagination component */
+  totalPages: number;
+  /** 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.
+   **/
+  b2bPageChange: EventEmitter<PageChangeEventDetail>;
+  private firstPageIndex;
+  private navItems;
+  connectedCallback(): void;
+  onTotalPagesChange(newValue: number): void;
+  onActivePageChange(newValue: number): void;
+  private selectNextPage;
+  private selectPreviousPage;
+  private setSelectedPage;
+  private updateState;
+  private getNavItems;
+  private getArrayFrom;
+  private getItemClass;
+  render(): any;
+}

package/dist/types/components/pagination/pagination.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Pagination: any;
+export declare const story020PaginationMiddle: any;
+export declare const story010PaginationLast: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/paragraph/paragraph.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Paragraph component to render text content.
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45
+ */
+export declare class ParagraphComponent {
+  /** The weight of the text. */
+  weight: 'bold' | 'normal';
+  /** The size of the text. */
+  size: '50' | '100';
+  /** The alignment of the text. */
+  align: 'left' | 'right' | 'center';
+  render(): any;
+}

package/dist/types/components/paragraph/paragraph.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Bold: any;
+export declare const story030Small: any;
+export declare const story040Center: any;
+export declare const story050Right: any;
+export declare const story900Playground: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/radio/radio.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RadioEventDetail } from '../../utils/interfaces/form.interface';
+export declare class B2bRadioButtonComponent {
+  host: HTMLB2bRadioButtonElement;
+  /** The label of the radio button. This is required */
+  label: string;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** 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;
+  /** 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;
+  /** Whether or not the radio button should be rendered with error styles. Per default it is false. */
+  invalid: boolean;
+  /** The value of the radio button. This will be emitted when the radio button is clicked. */
+  value?: string;
+  /** A hint to give additional information on the radio button. */
+  hint?: string;
+  /** An error text. It will only show if invalid is set to true.  */
+  error?: string;
+  /** Emits whenever the radio button receives focus. */
+  b2bFocus: EventEmitter<FocusEvent>;
+  /** Emits whenever the radio button loses focus. */
+  b2bBlur: EventEmitter<FocusEvent>;
+  /** Emitted whenever the radio button is clicked.  */
+  b2bChange: EventEmitter<RadioEventDetail>;
+  connectedCallback(): void;
+  private handleFormData;
+  private onClick;
+  private uncheckSiblings;
+  private getSiblingRadios;
+  private onBlur;
+  private onFocus;
+  render(): any;
+}

package/dist/types/components/radio/radio.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Hint: any;
+export declare const story030Error: any;
+export declare const story040Disabled: any;
+export declare const story050Required: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/radio-group/radio-group.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RadioEventDetail } from '../../utils/interfaces/form.interface';
+export declare class RadioButtonGroupComponent {
+  host: HTMLB2bRadioGroupElement;
+  /** The radio group name used to group them together programmatically. This is required. */
+  name: string;
+  /** The radio group label. This is optional. */
+  label: string;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** 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;
+  /** 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;
+  /** A group hint text. */
+  hint?: string;
+  /** A group error text. It will only show if invalid is set to true. */
+  error?: string;
+  /** Emitted whenever a radio button in the group is clicked. Will emit the value of the currently selected radio button. */
+  b2bGroupChange: EventEmitter<RadioEventDetail>;
+  currentValue: any;
+  handleRadioButtonChange(ev: CustomEvent<RadioEventDetail>): void;
+  protected invalidChanged(): void;
+  protected disabledChanged(): void;
+  private toggleAllDisabled;
+  private toggleAllError;
+  private getChildNodes;
+  private removeChildText;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/radio-group/radio-group.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Hint: any;
+export declare const story030Error: any;
+export declare const story040Disabled: any;
+export declare const story050Horizontal: any;
+export declare const story060Required: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/required-separator/required-separator.d.ts

@@ -0,0 +1,5 @@
+export declare class B2BRequiredSeparator {
+  /** The required label. Per default it is the german 'Pflichtfeld', but can be altered. */
+  label: string;
+  render(): any;
+}

package/dist/types/components/required-separator/required-separator.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/scrollable-container/scrollable-container.d.ts

@@ -0,0 +1,4 @@
+export declare class ScrollableContainerComponent {
+  host: HTMLB2bScrollableContainerElement;
+  render(): any;
+}

package/dist/types/components/scrollable-container/scrollable-container.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010HorizontalScroll: any;
+export declare const story020VerticalScroll: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/search/search.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SearchClickEventDetail } from '../../utils/interfaces/form.interface';
+export declare class SearchComponent {
+  hostElement: HTMLB2bSearchElement;
+  /** The placeholder shown in the input field. */
+  placeholder: 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 default value of the search input field. If defined, it will prefill the input. */
+  value: string;
+  /** Emits whenever the user clicks the search button. Will emit the search string. */
+  b2bSearch: EventEmitter<SearchClickEventDetail>;
+  closed: false;
+  private onSearchClicked;
+  private onInput;
+  private onOptionSelected;
+  render(): any;
+}

package/dist/types/components/search/search.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Search: any;
+export declare const story020CustomSearch: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/separator/separator.d.ts

@@ -0,0 +1,5 @@
+export declare class B2bSeparatorComponent {
+  /** The alignment of the separator. Per default it is horizontal. */
+  alignment: 'vertical' | 'horizontal';
+  render(): any;
+}

package/dist/types/components/separator/separator.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Horizontal: any;
+export declare const story020Vertical: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/spinner/spinner.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Spinner component to display loading indicator.
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70
+ */
+export declare class SpinnerComponent {
+  /** The size of the spinner. */
+  size: '50' | '100' | '200';
+  /** The color of the spinner. */
+  color: 'primary' | 'secondary' | 'inverse';
+  render(): any;
+}

package/dist/types/components/spinner/spinner.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Secondary: any;
+export declare const story025Inverse: any;
+export declare const story030Small: any;
+export declare const story040Large: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/tab/tab.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class B2bTabComponent {
+  private generatedId;
+  hostElement: HTMLB2bTabElement;
+  /** Whether or not the tab is currently selected. Per default it is false. */
+  selected: boolean;
+  /** 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. */
+  b2bChange: EventEmitter<boolean>;
+  propagateChange(newValue: boolean): void;
+  render(): any;
+}

package/dist/types/components/tab-group/tab-group.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TabChangeEventDetail } from '../../utils/interfaces/interaction.interface';
+export declare class B2bTabGroupComponent {
+  hostElement: HTMLB2bTabGroupElement;
+  /** 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;
+  /** Emits the previous and the next tab panel whenever a new panel is selected. */
+  b2bSelected: EventEmitter<TabChangeEventDetail>;
+  handleClick(event: MouseEvent): void;
+  handleKeydown(event: KeyboardEvent): void;
+  componentDidRender(): void;
+  private getPreviousTab;
+  private getNextTab;
+  private getFirstTab;
+  private getLastTab;
+  private getAllEnabledTabs;
+  private getAllPanels;
+  private linkPanels;
+  private findPanelForTab;
+  private selectTab;
+  private reset;
+  render(): any;
+}

package/dist/types/components/tab-group/tab-group.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010AllTabs: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/tab-panel/tab-panel.d.ts

@@ -0,0 +1,4 @@
+export declare class B2bTabPanelComponent {
+  private generatedId;
+  render(): any;
+}

package/dist/types/components/table/stories.data.d.ts

@@ -0,0 +1,19 @@
+export declare const sampleData: {
+  columns: string[];
+  rows: (string | import("lit-html").TemplateResult)[][];
+};
+export declare const smallSampleData: {
+  columns: string[];
+  rows: (string | import("lit-html").TemplateResult)[][];
+};
+export declare const longSampleData: {
+  columns: string[];
+  rows: (string | import("lit-html").TemplateResult)[][];
+};
+export declare const userSampleData: {
+  columns: {
+    id: number;
+    name: string;
+  }[];
+  rows: (string | number)[][];
+};

package/dist/types/components/table/table-cell/table-cell.d.ts

@@ -0,0 +1,20 @@
+import { ContentAlignment, TableSizes } from '../types';
+import { B2BTableColourOptions } from '../table-row/table-row';
+export declare class TableCellComponent {
+  /** Weather text should wrap or truncate.
+   * It will only truncate when table size is equal
+   * **/
+  textWrap: 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;
+  /** Alignment of the content of the cell, by default is to the left. **/
+  align: ContentAlignment;
+  /** adds a border to the right of the cell. **/
+  divider: boolean;
+  /** Background color of the cell. This color selection does not have hover states, as it is handled from the row**/
+  color: B2BTableColourOptions;
+  render(): any;
+}

package/dist/types/components/table/table-header/table-header.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { TableSortDirections } from '../types';
+export declare class TableHeaderComponent {
+  hostElement: HTMLB2bTableHeaderElement;
+  /** adds a border to the right of the header. **/
+  divider: boolean;
+  /** sets the header position to sticky. Use it when table is inside a scrollable container. **/
+  fixed: boolean;
+  /** 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;
+  /** Emits whenever the sort direction changes. */
+  b2bChange: EventEmitter<TableSortDirections>;
+  active: boolean;
+  private sortIcon;
+  private changeSortDirection;
+  private unSortSiblings;
+  private setActive;
+  private setInactive;
+  render(): any;
+}

package/dist/types/components/table/table-row/table-row.d.ts

@@ -0,0 +1,8 @@
+export type B2BTableColourOptions = 'default' | 'selected' | 'group';
+export declare class TableRowComponent {
+  /** Whether the row will be highlighted on mouse over **/
+  highlight: boolean;
+  /** Background color of the row. Use it semantically. This color selection have hover states **/
+  color: B2BTableColourOptions;
+  render(): any;
+}

package/dist/types/components/table/table-rowgroup/table-rowgroup.d.ts

@@ -0,0 +1,11 @@
+import { TableRowgroupTypes } from '../types';
+export declare class TableRowgroupComponent {
+  host: HTMLB2bTableRowgroupElement;
+  /** Rowgroup allows grouping rows by context: header, body or footer.
+   * Header rows are by default not highlightable on mouse over.
+   **/
+  type: TableRowgroupTypes;
+  private makeHeaderRowNotSelectable;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/table/table.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TableSizes } from './types';
+import { ColumnSortChangeEventDetail } from '../../utils/interfaces/interaction.interface';
+export declare class TableComponent {
+  host: HTMLB2bTableElement;
+  /** 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.
+   **/
+  size: TableSizes;
+  /** Emits whenever the sort direction of any column in the table changes. */
+  b2bSortChange: EventEmitter<ColumnSortChangeEventDetail>;
+  private setCellSize;
+  private setFixedHeaders;
+  componentDidRender(): void;
+  componentDidLoad(): void;
+  onColumnSelected(event: any): void;
+  render(): any;
+}

package/dist/types/components/table/table.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010TableExpand: any;
+export declare const story020TableEqual: any;
+export declare const story030TableExpand: any;
+export declare const story040TableExpand: any;
+export declare const story050TableEqual: any;
+export declare const story060TableFixedCellSize: any;
+export declare const story070TableFixedRowHeight: any;
+export declare const story080TableWithDividers: any;
+export declare const story090TableColor: any;
+export declare const story100ScrollableTable: any;
+export declare const story110Sorting: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/table/types.d.ts

@@ -0,0 +1,23 @@
+export declare const TableSizes: {
+  readonly EQUAL: "equal";
+  readonly EXPAND: "expand";
+};
+export type TableSizes = (typeof TableSizes)[keyof typeof TableSizes];
+export declare const TableRowgroupTypes: {
+  readonly HEADER: "header";
+  readonly BODY: "body";
+  readonly FOOTER: "footer";
+};
+export type TableRowgroupTypes = (typeof TableRowgroupTypes)[keyof typeof TableRowgroupTypes];
+export declare const ContentAlignment: {
+  readonly LEFT: "left";
+  readonly RIGHT: "right";
+  readonly CENTER: "center";
+};
+export type ContentAlignment = (typeof ContentAlignment)[keyof typeof ContentAlignment];
+export declare const TableSortDirections: {
+  readonly NOT: "not-sorted";
+  readonly ASC: "ascending";
+  readonly DESC: "descending";
+};
+export type TableSortDirections = (typeof TableSortDirections)[keyof typeof TableSortDirections];

package/dist/types/components/textarea/textarea.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { InputChangeEvent } from '../../utils/interfaces/form.interface';
+/** Text Area Component
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
+ */
+export declare class B2BTextareaComponent {
+  hostElement: HTMLB2bTextareaElement;
+  /** The textarea label. This is optional. */
+  label: string;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** The textarea placeholder. It is optional and undefined by default. */
+  placeholder?: string;
+  /** Whether or not the textarea is disabled. Per default it is false.  */
+  disabled: boolean;
+  /** Whether or not the textarea should be displayed with error styles. Per default it is false. */
+  invalid: boolean;
+  /** Whether or not the textarea should be automatically focused on page load. Per default it is false. */
+  autofocus: boolean;
+  /** If and how the textarea is resizable. Per default it is resizable in both directions. */
+  resize?: 'unset' | 'none' | 'vertical' | 'horizontal';
+  /** An optional hint for the textarea. Per default it is undefined. */
+  hint?: string;
+  /** An optional error message that is displayed when the textarea is invalid. Per default it is undefined. */
+  error?: string;
+  /** The value of the textarea. Per default it is null. */
+  value: string;
+  /** The name of the textarea. This is used to programmatically group it into a form. */
+  name?: string;
+  /** The maximum input length. Characters entered after that will not be appended to the input value. */
+  maxLength?: number;
+  /** Emits whenever the textarea receives focus. */
+  b2bFocus: EventEmitter<FocusEvent>;
+  /** Emits whenever the textarea loses focus. */
+  b2bBlur: EventEmitter<FocusEvent>;
+  /** Emits whenever the textarea's input changes. */
+  b2bInput: EventEmitter<InputChangeEvent>;
+  connectedCallback(): void;
+  private handleFormData;
+  private onFocus;
+  private onBlur;
+  private onInput;
+  render(): any;
+}

package/dist/types/components/textarea/textarea.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Placeholder: any;
+export declare const story030Disabled: any;
+export declare const story040Hint: any;
+export declare const story050Error: any;
+export declare const story055Required: any;
+export declare const story060AllArgs: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/toggle-button/toggle-button.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ToggleButtonEventDetail } from '../../utils/interfaces/form.interface';
+export declare class B2bToggleButtonComponent {
+  host: HTMLB2bToggleButtonElement;
+  /** 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;
+  /** 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 value of the toggle button. This will be emitted when the toggle button is clicked. This is required */
+  value: string;
+  /** Emitted whenever the toggle button is clicked.  */
+  b2bChange: EventEmitter<ToggleButtonEventDetail>;
+  private onClick;
+  private uncheckSiblings;
+  private getSiblingToggles;
+  render(): any;
+}

package/dist/types/components/toggle-group/toggle-group.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ToggleButtonEventDetail } from '../../utils/interfaces/form.interface';
+export declare class B2BToggleGroup {
+  host: HTMLB2bToggleGroupElement;
+  /** The toggle group name used to group them together programmatically. This is required. */
+  name: string;
+  /** Whether or not the toggle group is disabled as a whole. Per default it is false. */
+  disabled: boolean;
+  /** Emitted whenever a toggle button in the group is clicked. Will emit the value of the currently selected radio button. */
+  b2bGroupChange: EventEmitter<ToggleButtonEventDetail>;
+  currentValue: any;
+  handleToggleButtonChange(ev: CustomEvent<ToggleButtonEventDetail>): void;
+  protected disabledChanged(): void;
+  private toggleAllDisabled;
+  private getChildNodes;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/toggle-group/toggle-group.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Disabled: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The tooltip can display additional information, and will be visible based on
+ * a specific trigger.
+ * @slot (default) - The wrapped element main content.
+ * @slot content - Use to pass custom content to the tooltip, like an icon or a link.
+ */
+export declare class B2BTooltipComponent {
+  host: HTMLB2bTooltipElement;
+  /** Position of the tooltip. */
+  position: 'left' | 'right' | 'top' | 'bottom';
+  /** 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;
+  /** 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';
+  /** 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;
+  private triggerEl;
+  handleOpenedChange(newValue: boolean): void;
+  private onFocus;
+  private onBlur;
+  private onMouseEnter;
+  private onMouseLeave;
+  private getTrigger;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}