@otto-de/b2b-core-components 1.1.0 → 1.3.0

package/dist/esm/{index-ffd21e30.js → index-026605c2.js}

@@ -1109,6 +1109,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
                 hostRef.$queuedListeners$ = null;
             }
         }
+        {
+            promise = safeCall(instance, 'componentWillLoad');
+        }
     }
     {
         promise = then(promise, () => safeCall(instance, 'componentWillRender'));
@@ -1768,6 +1771,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './b2b-anchor.entry.js').then(processMod, consoleError);
+        case 'b2b-card':
+          return import(
+            /* webpackMode: "lazy" */
+            './b2b-card.entry.js').then(processMod, consoleError);
         case 'b2b-checkbox':
           return import(
             /* webpackMode: "lazy" */
@@ -1844,14 +1851,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './b2b-table.entry.js').then(processMod, consoleError);
-        case 'b2b-table-cell':
-          return import(
-            /* webpackMode: "lazy" */
-            './b2b-table-cell.entry.js').then(processMod, consoleError);
-        case 'b2b-table-header':
-          return import(
-            /* webpackMode: "lazy" */
-            './b2b-table-header.entry.js').then(processMod, consoleError);
         case 'b2b-table-row':
           return import(
             /* webpackMode: "lazy" */
@@ -1884,6 +1883,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './b2b-input-group_2.entry.js').then(processMod, consoleError);
+        case 'b2b-table-cell_2':
+          return import(
+            /* webpackMode: "lazy" */
+            './b2b-table-cell_2.entry.js').then(processMod, consoleError);
         case 'b2b-button_2':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-ffd21e30.js';
-export { s as setNonce } from './index-ffd21e30.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-026605c2.js';
+export { s as setNonce } from './index-026605c2.js';
 
 /*
  Stencil Client Patch Esm v3.0.1 | MIT Licensed | https://stenciljs.com
@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["b2b-search",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"closed":[32]}]]],["b2b-modal",[[1,"b2b-modal",{"heading":[1],"opened":[1540],"backdropDismiss":[4,"backdrop-dismiss"],"escDismiss":[4,"esc-dismiss"],"variant":[1],"iconHover":[32],"isOpen":[32]},[[0,"keydown","handleKeypress"]]]]],["b2b-pagination",[[1,"b2b-pagination",{"totalPages":[2,"total-pages"],"activePage":[1538,"active-page"],"ariaLabelNextPage":[1,"aria-label-next-page"],"ariaLabelPreviousPage":[1,"aria-label-previous-page"]}]]],["b2b-alert",[[1,"b2b-alert",{"type":[1],"size":[1],"opened":[1028],"hasCloseButton":[4,"has-close-button"],"customIcon":[4,"custom-icon"]}]]],["b2b-checkbox",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4]}]]],["b2b-checkbox-group",[[1,"b2b-checkbox-group",{"label":[1],"required":[4],"disabled":[4],"invalid":[4],"alignment":[1],"hint":[1],"error":[1]},[[0,"b2b-change","handleCheckboxChange"]]]]],["b2b-dropdown",[[1,"b2b-dropdown",{"label":[1],"required":[516],"name":[513],"disabled":[516],"invalid":[516],"hint":[1],"error":[1]}]]],["b2b-radio-button",[[1,"b2b-radio-button",{"label":[1],"required":[516],"name":[513],"checked":[1540],"disabled":[516],"invalid":[4],"value":[513],"hint":[1],"error":[1]}]]],["b2b-radio-group",[[1,"b2b-radio-group",{"name":[1],"label":[1],"required":[4],"alignment":[1],"disabled":[516],"invalid":[516],"hint":[1],"error":[1],"currentValue":[32]},[[0,"b2b-change","handleRadioButtonChange"]]]]],["b2b-required-separator",[[1,"b2b-required-separator",{"label":[1]}]]],["b2b-tab-group",[[1,"b2b-tab-group",{"useRouter":[4,"use-router"]},[[0,"click","handleClick"],[0,"keydown","handleKeydown"]]]]],["b2b-textarea",[[1,"b2b-textarea",{"label":[1],"required":[516],"placeholder":[513],"disabled":[516],"invalid":[516],"autofocus":[516],"resize":[513],"hint":[1],"error":[1],"value":[1537],"name":[513],"maxLength":[514,"max-length"]}]]],["b2b-anchor",[[1,"b2b-anchor",{"href":[1],"download":[1],"target":[1],"size":[1]}]]],["b2b-grid",[[1,"b2b-grid",{"margin":[2]}]]],["b2b-grid-col",[[1,"b2b-grid-col",{"span":[514],"textAlign":[1,"text-align"]}]]],["b2b-grid-row",[[1,"b2b-grid-row",{"columnGap":[2,"column-gap"],"rowGap":[2,"row-gap"],"alignItems":[1,"align-items"],"justify":[1]}]]],["b2b-label",[[1,"b2b-label",{"type":[1]}]]],["b2b-paragraph",[[1,"b2b-paragraph",{"weight":[1],"size":[1],"align":[1]}]]],["b2b-scrollable-container",[[1,"b2b-scrollable-container"]]],["b2b-tab",[[1,"b2b-tab",{"selected":[516],"disabled":[4],"invalid":[4]}]]],["b2b-tab-panel",[[1,"b2b-tab-panel"]]],["b2b-table",[[1,"b2b-table",{"size":[1]},[[0,"b2b-change","onColumnSelected"]]]]],["b2b-table-cell",[[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"useTextEllipsis":[32]}]]],["b2b-table-header",[[1,"b2b-table-header",{"divider":[4],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"active":[32]}]]],["b2b-table-row",[[1,"b2b-table-row",{"highlight":[4],"color":[1]}]]],["b2b-table-rowgroup",[[1,"b2b-table-rowgroup",{"type":[1]}]]],["b2b-toggle-button",[[1,"b2b-toggle-button",{"label":[1],"name":[513],"checked":[1540],"disabled":[516],"value":[513]}]]],["b2b-toggle-group",[[1,"b2b-toggle-group",{"name":[1],"disabled":[516],"currentValue":[32]},[[0,"b2b-change","handleToggleButtonChange"]]]]],["b2b-tooltip",[[1,"b2b-tooltip",{"position":[1],"content":[1],"trigger":[1],"opened":[1540]}]]],["b2b-headline",[[1,"b2b-headline",{"size":[1],"align":[1],"noMargin":[4,"no-margin"]}]]],["b2b-input-label",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]],["b2b-input_2",[[1,"b2b-input",{"label":[1],"required":[516],"type":[513],"disabled":[516],"invalid":[516],"placeholder":[513],"value":[1537],"name":[513],"hint":[1],"error":[1],"autofocus":[4],"hasFocus":[32],"hasTextPrefix":[32],"hasTextSuffix":[32],"setFocus":[64],"clearInput":[64]}],[0,"b2b-input-list-option",{"option":[1]},[[0,"keydown","handleKeyDown"]]]]],["b2b-input-group_2",[[1,"b2b-input-list",{"label":[1],"required":[516],"placeholder":[513],"optionsList":[16],"value":[1537],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]}]]],["b2b-separator",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-icon",[[1,"b2b-icon",{"icon":[1],"color":[1],"size":[1],"pathData":[32]}]]],["b2b-button_2",[[1,"b2b-button",{"variant":[1],"type":[1],"size":[1],"disabled":[516],"loading":[4],"active":[516],"href":[1],"target":[1],"download":[1],"setFocus":[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{"size":[1],"color":[1]}]]]], options);
+  return bootstrapLazy([["b2b-search",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"disabled":[516],"closed":[32]}]]],["b2b-table-row",[[1,"b2b-table-row",{"highlight":[4],"color":[1],"type":[1],"isOpen":[32],"toggleAccordion":[64]}]]],["b2b-modal",[[1,"b2b-modal",{"heading":[1],"opened":[1540],"backdropDismiss":[4,"backdrop-dismiss"],"escDismiss":[4,"esc-dismiss"],"variant":[1],"iconHover":[32],"isOpen":[32]},[[0,"keydown","handleKeypress"]]]]],["b2b-pagination",[[1,"b2b-pagination",{"totalPages":[2,"total-pages"],"activePage":[1538,"active-page"],"ariaLabelNextPage":[1,"aria-label-next-page"],"ariaLabelPreviousPage":[1,"aria-label-previous-page"]}]]],["b2b-alert",[[1,"b2b-alert",{"type":[1],"size":[1],"opened":[1028],"hasCloseButton":[4,"has-close-button"],"customIcon":[4,"custom-icon"]}]]],["b2b-checkbox",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4]}]]],["b2b-checkbox-group",[[1,"b2b-checkbox-group",{"label":[1],"required":[4],"disabled":[4],"invalid":[4],"alignment":[1],"hint":[1],"error":[1]},[[0,"b2b-change","handleCheckboxChange"]]]]],["b2b-dropdown",[[1,"b2b-dropdown",{"label":[1],"required":[516],"name":[513],"disabled":[516],"invalid":[516],"hint":[1],"error":[1]}]]],["b2b-radio-button",[[1,"b2b-radio-button",{"label":[1],"required":[516],"name":[513],"checked":[1540],"disabled":[516],"invalid":[4],"value":[513],"hint":[1],"error":[1]}]]],["b2b-radio-group",[[1,"b2b-radio-group",{"name":[1],"label":[1],"required":[4],"alignment":[1],"disabled":[516],"invalid":[516],"hint":[1],"error":[1],"currentValue":[32]},[[0,"b2b-change","handleRadioButtonChange"]]]]],["b2b-required-separator",[[1,"b2b-required-separator",{"label":[1]}]]],["b2b-tab-group",[[1,"b2b-tab-group",{"useRouter":[4,"use-router"]},[[0,"click","handleClick"],[0,"keydown","handleKeydown"]]]]],["b2b-textarea",[[1,"b2b-textarea",{"label":[1],"required":[516],"placeholder":[513],"disabled":[516],"invalid":[516],"autofocus":[516],"resize":[513],"hint":[1],"error":[1],"value":[1537],"name":[513],"maxLength":[514,"max-length"]}]]],["b2b-anchor",[[1,"b2b-anchor",{"href":[1],"download":[1],"target":[1],"size":[1]}]]],["b2b-card",[[1,"b2b-card",{"disabled":[4],"href":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","onKeyDown"]]]]],["b2b-grid",[[1,"b2b-grid",{"margin":[2]}]]],["b2b-grid-col",[[1,"b2b-grid-col",{"span":[514],"textAlign":[1,"text-align"]}]]],["b2b-grid-row",[[1,"b2b-grid-row",{"columnGap":[2,"column-gap"],"rowGap":[2,"row-gap"],"alignItems":[1,"align-items"],"justify":[1]}]]],["b2b-label",[[1,"b2b-label",{"type":[1]}]]],["b2b-paragraph",[[1,"b2b-paragraph",{"weight":[1],"size":[1],"align":[1]}]]],["b2b-scrollable-container",[[1,"b2b-scrollable-container"]]],["b2b-tab",[[1,"b2b-tab",{"selected":[516],"disabled":[4],"invalid":[4]}]]],["b2b-tab-panel",[[1,"b2b-tab-panel"]]],["b2b-table",[[1,"b2b-table",{"size":[1]},[[0,"b2b-change","onColumnSelected"]]]]],["b2b-table-rowgroup",[[1,"b2b-table-rowgroup",{"type":[1],"accordion":[4],"opened":[516]},[[0,"b2b-open","handleOpenChange"]]]]],["b2b-toggle-button",[[1,"b2b-toggle-button",{"label":[1],"name":[513],"checked":[1540],"disabled":[516],"value":[513]}]]],["b2b-toggle-group",[[1,"b2b-toggle-group",{"name":[1],"disabled":[516],"currentValue":[32]},[[0,"b2b-change","handleToggleButtonChange"]]]]],["b2b-tooltip",[[1,"b2b-tooltip",{"position":[1],"content":[1],"trigger":[1],"opened":[1540]}]]],["b2b-headline",[[1,"b2b-headline",{"size":[1],"align":[1],"noMargin":[4,"no-margin"]}]]],["b2b-input-group_2",[[1,"b2b-input-list",{"label":[1],"required":[516],"placeholder":[513],"optionsList":[16],"value":[1537],"disabled":[516],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]}]]],["b2b-table-cell_2",[[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"useTextEllipsis":[32]}],[1,"b2b-table-header",{"divider":[4],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"active":[32]}]]],["b2b-separator",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-input_2",[[1,"b2b-input",{"label":[1],"required":[516],"type":[513],"disabled":[516],"invalid":[516],"placeholder":[513],"value":[1537],"name":[513],"hint":[1],"error":[1],"autofocus":[4],"hasFocus":[32],"hasTextPrefix":[32],"hasTextSuffix":[32],"setFocus":[64],"clearInput":[64]}],[0,"b2b-input-list-option",{"option":[1]},[[0,"keydown","handleKeyDown"]]]]],["b2b-button_2",[[1,"b2b-button",{"variant":[1],"type":[1],"size":[1],"disabled":[516],"loading":[4],"active":[516],"href":[1],"target":[1],"download":[1],"setFocus":[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{"size":[1],"color":[1]}]]],["b2b-icon",[[1,"b2b-icon",{"icon":[1],"color":[1],"size":[1],"clickable":[4],"pathData":[32]}]]],["b2b-input-label",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]]], options);
   });
 };
 

package/dist/esm/{types-b6ef0c78.js → types-a2bb01cb.js}

@@ -17,5 +17,10 @@ const TableSortDirections = {
   ASC: 'ascending',
   DESC: 'descending',
 };
+const TableRowTypes = {
+  PARENT: 'parent',
+  CHILD: 'child',
+  HEADER: 'header'
+};
 
-export { ContentAlignment as C, TableSizes as T, TableSortDirections as a, TableRowgroupTypes as b };
+export { ContentAlignment as C, TableSizes as T, TableSortDirections as a, TableRowTypes as b, TableRowgroupTypes as c };

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

@@ -0,0 +1,16 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CardComponent {
+  host: HTMLB2bCardElement;
+  /** 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';
+  /** Emits whenever the card is clicked on or enter is pressed while the card has focus. */
+  b2bChange: EventEmitter<void>;
+  onClick(): void;
+  onKeyDown(event: KeyboardEvent): void;
+  private getTabIndex;
+  render(): any;
+}

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

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

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

@@ -6,6 +6,8 @@ export declare class B2bIcon {
   color: 'primary' | 'secondary' | 'inverse' | 'inherit';
   /** The size of the icon */
   size: '50' | '100' | '200';
+  /** Will display a pointer cursor when hovering the icon */
+  clickable: boolean;
   private pathData;
   connectedCallback(): void;
   private isIconSupported;

package/dist/types/components/input-list/input-list.d.ts

@@ -12,6 +12,9 @@ export declare class InputListComponent {
   optionsList: string[];
   /** The default value of the input field. If defined, it will prefill the input. */
   value: string;
+  /** Whether or not the input is disabled. Default is false. */
+  disabled: boolean;
+  /** Emits when the user clicks the clear button. */
   b2bClear: EventEmitter<InputClear>;
   hasOptionList: boolean;
   isElementFocused: boolean;

package/dist/types/components/input-list/input-list.stories.d.ts

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/web-components';
 export declare const story010InputList: any;
 export declare const story020InputListFocused: any;
+export declare const story025InputListDisabled: any;
 export declare const story030CustomList: any;
 declare const _default: Meta<import("@storybook/web-components").Args>;
 export default _default;

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

@@ -8,6 +8,8 @@ export declare class SearchComponent {
   optionsList: string[];
   /** The default value of the search input field. If defined, it will prefill the input. */
   value: string;
+  /** 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. */
   b2bSearch: EventEmitter<SearchClickEventDetail>;
   closed: false;

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

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

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

@@ -1,8 +1,7 @@
-import { ContentAlignment, TableSizes } from '../types';
-import { B2BTableColourOptions } from '../table-row/table-row';
+import { ContentAlignment, TableSizes, TableColourOptions } from '../types';
 export declare class TableCellComponent {
   host: HTMLB2bTableCellElement;
-  /** Weather text should wrap or truncate.
+  /** Whether text should wrap or truncate.
    * It will only truncate when table size is equal
    * **/
   textWrap: boolean;
@@ -16,7 +15,7 @@ export declare class TableCellComponent {
   /** 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;
+  color: TableColourOptions;
   useTextEllipsis: boolean;
   private expandTextHoverWaitTime;
   private expandTextHoverTimeoutId;

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

@@ -1,8 +1,17 @@
-export type B2BTableColourOptions = 'default' | 'selected' | 'group';
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { TableRowTypes, TableColourOptions } from '../types';
 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;
+  color: TableColourOptions;
+  /** Determined by the parent rowgroup for accordion rowgroups. Do not set manually. */
+  type: TableRowTypes;
+  /** 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. */
+  b2bOpen: EventEmitter<boolean>;
+  isOpen: boolean;
+  private toggleOpen;
+  /** Will toggle the accordion opened or closed. */
+  toggleAccordion(isOpen: any): Promise<void>;
   render(): any;
 }

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

@@ -5,7 +5,22 @@ export declare class TableRowgroupComponent {
    * Header rows are by default not highlightable on mouse over.
    **/
   type: TableRowgroupTypes;
+  /** 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;
+  /** Only use when accordion property is true.
+   * Will render the accordion opened if set to true. By default, is false.
+   */
+  opened: boolean;
+  handleOpenChange(event: any): void;
+  private getFirstRow;
+  private getRemainingRows;
   private makeHeaderRowNotSelectable;
+  private addAccordionControlColumn;
+  private toggleInitialVisibility;
+  private toggleChildRowVisibility;
+  componentWillLoad(): void;
   componentDidRender(): void;
   render(): any;
 }

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

@@ -10,5 +10,6 @@ export declare const story080TableWithDividers: any;
 export declare const story090TableColor: any;
 export declare const story100ScrollableTable: any;
 export declare const story110Sorting: any;
+export declare const story120Accordion: any;
 declare const _default: Meta<import("@storybook/web-components").Args>;
 export default _default;

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

@@ -21,3 +21,10 @@ export declare const TableSortDirections: {
   readonly DESC: "descending";
 };
 export type TableSortDirections = (typeof TableSortDirections)[keyof typeof TableSortDirections];
+export declare const TableRowTypes: {
+  readonly PARENT: "parent";
+  readonly CHILD: "child";
+  readonly HEADER: "header";
+};
+export type TableRowTypes = (typeof TableRowTypes)[keyof typeof TableRowTypes];
+export type TableColourOptions = 'default' | 'selected' | 'group';

package/dist/types/components.d.ts

@@ -9,16 +9,12 @@ import { CheckboxEventDetail, InputChangeEvent, InputClear, OptionSelectedEventD
 import { IconName } from "./components/icon/types";
 import { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
 import { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
-import { ContentAlignment, TableRowgroupTypes, TableSizes, TableSortDirections } from "./components/table/types";
-import { B2BTableColourOptions } from "./components/table/table-row/table-row";
-import { B2BTableColourOptions as B2BTableColourOptions1 } from "./components/table/table-row/table-row";
+import { ContentAlignment, TableColourOptions, TableRowgroupTypes, TableRowTypes, TableSizes, TableSortDirections } from "./components/table/types";
 export { CheckboxEventDetail, InputChangeEvent, InputClear, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 export { IconName } from "./components/icon/types";
 export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
 export { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
-export { ContentAlignment, TableRowgroupTypes, TableSizes, TableSortDirections } from "./components/table/types";
-export { B2BTableColourOptions } from "./components/table/table-row/table-row";
-export { B2BTableColourOptions as B2BTableColourOptions1 } from "./components/table/table-row/table-row";
+export { ContentAlignment, TableColourOptions, TableRowgroupTypes, TableRowTypes, TableSizes, TableSortDirections } from "./components/table/types";
 export namespace Components {
     interface B2bAlert {
         /**
@@ -102,6 +98,20 @@ export namespace Components {
          */
         "variant": 'primary' | 'secondary';
     }
+    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.
@@ -269,6 +279,10 @@ export namespace Components {
         "size": '400' | '200' | '100';
     }
     interface B2bIcon {
+        /**
+          * Will display a pointer cursor when hovering the icon
+         */
+        "clickable": boolean;
         /**
           * The color of the icon
          */
@@ -375,6 +389,10 @@ export namespace Components {
         "required": boolean;
     }
     interface B2bInputList {
+        /**
+          * Whether or not the input is disabled. Default is false.
+         */
+        "disabled": boolean;
         /**
           * The input label.
          */
@@ -551,6 +569,10 @@ export namespace Components {
     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.
          */
@@ -620,7 +642,7 @@ export namespace Components {
         /**
           * Background color of the cell. This color selection does not have hover states, as it is handled from the row*
          */
-        "color": B2BTableColourOptions;
+        "color": TableColourOptions;
         /**
           * adds a border to the right of the cell. *
          */
@@ -630,7 +652,7 @@ export namespace Components {
          */
         "size": TableSizes;
         /**
-          * Weather text should wrap or truncate. It will only truncate when table size is equal *
+          * Whether text should wrap or truncate. It will only truncate when table size is equal *
          */
         "textWrap": boolean;
     }
@@ -656,13 +678,29 @@ export namespace Components {
         /**
           * Background color of the row. Use it semantically. This color selection have hover states *
          */
-        "color": B2BTableColourOptions1;
+        "color": TableColourOptions;
         /**
           * Whether the row will be highlighted on mouse over *
          */
         "highlight": boolean;
+        /**
+          * Will toggle the accordion opened or closed.
+         */
+        "toggleAccordion": (isOpen: any) => Promise<void>;
+        /**
+          * Determined by the parent rowgroup for accordion rowgroups. Do not set manually.
+         */
+        "type": TableRowTypes;
     }
     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;
+        /**
+          * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false.
+         */
+        "opened": boolean;
         /**
           * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over.
          */
@@ -784,6 +822,10 @@ export interface B2bAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bAlertElement;
 }
+export interface B2bCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bCardElement;
+}
 export interface B2bCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bCheckboxElement;
@@ -844,6 +886,10 @@ export interface B2bTableHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bTableHeaderElement;
 }
+export interface B2bTableRowCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bTableRowElement;
+}
 export interface B2bTextareaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bTextareaElement;
@@ -875,6 +921,12 @@ declare global {
         prototype: HTMLB2bButtonElement;
         new (): HTMLB2bButtonElement;
     };
+    interface HTMLB2bCardElement extends Components.B2bCard, HTMLStencilElement {
+    }
+    var HTMLB2bCardElement: {
+        prototype: HTMLB2bCardElement;
+        new (): HTMLB2bCardElement;
+    };
     interface HTMLB2bCheckboxElement extends Components.B2bCheckbox, HTMLStencilElement {
     }
     var HTMLB2bCheckboxElement: {
@@ -1123,6 +1175,7 @@ declare global {
         "b2b-alert": HTMLB2bAlertElement;
         "b2b-anchor": HTMLB2bAnchorElement;
         "b2b-button": HTMLB2bButtonElement;
+        "b2b-card": HTMLB2bCardElement;
         "b2b-checkbox": HTMLB2bCheckboxElement;
         "b2b-checkbox-group": HTMLB2bCheckboxGroupElement;
         "b2b-dropdown": HTMLB2bDropdownElement;
@@ -1244,6 +1297,24 @@ declare namespace LocalJSX {
          */
         "variant"?: 'primary' | 'secondary';
     }
+    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>) => 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.
@@ -1439,6 +1510,10 @@ declare namespace LocalJSX {
         "size"?: '400' | '200' | '100';
     }
     interface B2bIcon {
+        /**
+          * Will display a pointer cursor when hovering the icon
+         */
+        "clickable"?: boolean;
         /**
           * The color of the icon
          */
@@ -1549,10 +1624,17 @@ declare namespace LocalJSX {
         "required"?: boolean;
     }
     interface B2bInputList {
+        /**
+          * Whether or not the input is disabled. Default is false.
+         */
+        "disabled"?: boolean;
         /**
           * The input label.
          */
         "label"?: string;
+        /**
+          * Emits when the user clicks the clear button.
+         */
         "onB2b-clear"?: (event: B2bInputListCustomEvent<InputClear>) => 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.
@@ -1758,6 +1840,10 @@ declare namespace LocalJSX {
     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.
          */
@@ -1843,7 +1929,7 @@ declare namespace LocalJSX {
         /**
           * Background color of the cell. This color selection does not have hover states, as it is handled from the row*
          */
-        "color"?: B2BTableColourOptions;
+        "color"?: TableColourOptions;
         /**
           * adds a border to the right of the cell. *
          */
@@ -1853,7 +1939,7 @@ declare namespace LocalJSX {
          */
         "size"?: TableSizes;
         /**
-          * Weather text should wrap or truncate. It will only truncate when table size is equal *
+          * Whether text should wrap or truncate. It will only truncate when table size is equal *
          */
         "textWrap"?: boolean;
     }
@@ -1883,13 +1969,29 @@ declare namespace LocalJSX {
         /**
           * Background color of the row. Use it semantically. This color selection have hover states *
          */
-        "color"?: B2BTableColourOptions1;
+        "color"?: TableColourOptions;
         /**
           * Whether the row will be highlighted on mouse over *
          */
         "highlight"?: 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<boolean>) => void;
+        /**
+          * Determined by the parent rowgroup for accordion rowgroups. Do not set manually.
+         */
+        "type"?: TableRowTypes;
     }
     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;
+        /**
+          * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false.
+         */
+        "opened"?: boolean;
         /**
           * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over.
          */
@@ -2030,6 +2132,7 @@ declare namespace LocalJSX {
         "b2b-alert": B2bAlert;
         "b2b-anchor": B2bAnchor;
         "b2b-button": B2bButton;
+        "b2b-card": B2bCard;
         "b2b-checkbox": B2bCheckbox;
         "b2b-checkbox-group": B2bCheckboxGroup;
         "b2b-dropdown": B2bDropdown;
@@ -2075,6 +2178,7 @@ declare module "@stencil/core" {
             "b2b-alert": LocalJSX.B2bAlert & JSXBase.HTMLAttributes<HTMLB2bAlertElement>;
             "b2b-anchor": LocalJSX.B2bAnchor & JSXBase.HTMLAttributes<HTMLB2bAnchorElement>;
             "b2b-button": LocalJSX.B2bButton & JSXBase.HTMLAttributes<HTMLB2bButtonElement>;
+            "b2b-card": LocalJSX.B2bCard & JSXBase.HTMLAttributes<HTMLB2bCardElement>;
             "b2b-checkbox": LocalJSX.B2bCheckbox & JSXBase.HTMLAttributes<HTMLB2bCheckboxElement>;
             "b2b-checkbox-group": LocalJSX.B2bCheckboxGroup & JSXBase.HTMLAttributes<HTMLB2bCheckboxGroupElement>;
             "b2b-dropdown": LocalJSX.B2bDropdown & JSXBase.HTMLAttributes<HTMLB2bDropdownElement>;