@otto-de/b2b-core-components 1.9.0-beta.2 → 1.10.0

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

@@ -1,33 +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;
+    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/required-separator/required-separator.d.ts

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

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

@@ -1,15 +1,15 @@
 export declare class RoundedIconComponent {
-  /** 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 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 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;
-  render(): any;
+    /** 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 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 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;
+    render(): any;
 }

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

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

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

@@ -1,21 +1,21 @@
 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;
-  /** 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;
-  private onSearchClicked;
-  handleKeyDown(event: KeyboardEvent): void;
-  private onInput;
-  private onOptionSelected;
-  render(): any;
+    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;
+    /** 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;
+    private onSearchClicked;
+    handleKeyDown(event: KeyboardEvent): void;
+    private onInput;
+    private onOptionSelected;
+    render(): any;
 }

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

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

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

@@ -3,9 +3,9 @@
  * 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;
+    /** The size of the spinner. */
+    size: '50' | '100' | '200';
+    /** The color of the spinner. */
+    color: 'primary' | 'secondary' | 'inverse';
+    render(): any;
 }

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

@@ -1,15 +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;
+    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

@@ -1,24 +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;
+    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-panel/tab-panel.d.ts

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

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

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

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

@@ -1,26 +1,30 @@
 import { ContentAlignment, TableSizes, TableColourOptions } from '../../../utils/types/table.types';
 export declare class TableCellComponent {
-  host: HTMLB2bTableCellElement;
-  /** Whether 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: TableColourOptions;
-  useTextEllipsis: boolean;
-  private expandTextHoverWaitTime;
-  private expandTextHoverTimeoutId;
-  componentWillRender(): void;
-  private addExpandStyles;
-  private removeExpandStyles;
-  render(): any;
+    host: HTMLB2bTableCellElement;
+    /** Whether text should wrap or truncate.
+     * It will only truncate when table size is equal
+     * **/
+    textWrap: boolean;
+    /** @internal 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: TableColourOptions;
+    /** How many columns the cell should span. Accepts numbers greater than one. */
+    colspan?: number;
+    /** @internal number of total columns in a colspan table */
+    totalCols?: number;
+    useTextEllipsis: boolean;
+    private expandTextHoverWaitTime;
+    private expandTextHoverTimeoutId;
+    componentWillLoad(): void;
+    private addExpandStyles;
+    private removeExpandStyles;
+    render(): any;
 }

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

@@ -1,25 +1,36 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ContentAlignment, TableSortDirections, SortIconAlignment } from '../../../utils/types/table.types';
+import { TableSizes, TableSortDirections, SortIconAlignment, ContentAlignment } from '../../../utils/types/table.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;
-  /** Alignment of the content of the cell, by default is to the left. **/
-  contentAlign: ContentAlignment;
-  /** Emits whenever the sort direction changes. */
-  b2bChange: EventEmitter<TableSortDirections>;
-  active: boolean;
-  iconAlign: SortIconAlignment;
-  componentWillRender(): void;
-  private changeSortDirection;
-  private unSortSiblings;
-  private setActive;
-  private setInactive;
-  render(): any;
+    hostElement: HTMLB2bTableHeaderElement;
+    /** adds a border to the right of the header. **/
+    divider: 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;
+    /** @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 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;
+    /** 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;
+    /** @internal number of total columns per row */
+    totalCols?: number;
+    /** Emits whenever the sort direction changes. */
+    b2bChange: EventEmitter<TableSortDirections>;
+    active: boolean;
+    iconAlign: SortIconAlignment;
+    private setIconPlacement;
+    private changeSortDirection;
+    private unSortSiblings;
+    private setActive;
+    private setInactive;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    render(): any;
 }

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

@@ -1,37 +1,40 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { TableAccordionRowTypes, TableColourOptions } from '../../../utils/types/table.types';
+import { TableAccordionRowTypes, TableColourOptions, TableSizes } from '../../../utils/types/table.types';
 import { B2bCheckboxCustomEvent, CheckboxEventDetail } from '../../../components';
 export declare class TableRowComponent {
-  hostElement: HTMLB2bTableRowElement;
-  /** 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: TableColourOptions;
-  /** @internal Determined by the parent rowgroup for accordion rowgroups. */
-  accordionType: TableAccordionRowTypes;
-  /** @internal Whether the parent rowgroup is selectable. */
-  selectable: boolean;
-  /** The unique identifier for a selectable row. It is emitted when the row is selected. */
-  value?: string;
-  /** 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;
-  /** If a selectable row is currently checked. Per default, it is false. */
-  checked: 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. */
-  b2bOpen: EventEmitter<boolean>;
-  /** Emits if the row is selectable and it is selected or unselected. Emits both unique value and the checkbox status. */
-  b2bSelected: EventEmitter<CheckboxEventDetail>;
-  isOpen: boolean;
-  toggleSelected(event: B2bCheckboxCustomEvent<CheckboxEventDetail>): void;
-  /** Will toggle the accordion opened or closed. */
-  toggleAccordion(isOpen: boolean): Promise<void>;
-  componentWillLoad(): void;
-  private toggleOpen;
-  private getRowColor;
-  private getRowWidth;
-  private shouldAddCheckbox;
-  private getParentRowGroup;
-  private getCheckbox;
-  private getAccordionColumns;
-  render(): any;
+    hostElement: HTMLB2bTableRowElement;
+    /** 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: TableColourOptions;
+    /** @internal Determined by the parent rowgroup for accordion rowgroups. */
+    accordionType: TableAccordionRowTypes;
+    /** @internal Whether the parent rowgroup is selectable. */
+    selectable: boolean;
+    /** @internal Whether colspans are possible in the table. */
+    size?: TableSizes;
+    /** The unique identifier for a selectable row. It is emitted when the row is selected. */
+    value?: string;
+    /** 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;
+    /** If a selectable row is currently checked. Per default, it is false. */
+    checked: 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. */
+    b2bOpen: EventEmitter<boolean>;
+    /** Emits if the row is selectable and it is selected or unselected. Emits both unique value and the checkbox status. */
+    b2bSelected: EventEmitter<CheckboxEventDetail>;
+    isOpen: boolean;
+    toggleSelected(event: B2bCheckboxCustomEvent<CheckboxEventDetail>): void;
+    /** Will toggle the accordion opened or closed. */
+    toggleAccordion(isOpen: boolean): Promise<void>;
+    componentWillLoad(): void;
+    private toggleOpen;
+    private setTotalCols;
+    private getRowColor;
+    /** Only needs to be added if we control the state of the selection. */
+    private shouldAddCheckbox;
+    private getParentRowGroup;
+    private getCheckbox;
+    private getAccordionColumns;
+    render(): any;
 }

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

@@ -1,36 +1,39 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { TableRowgroupTypes } from '../../../utils/types/table.types';
+import { TableRowgroupTypes, TableSizes } from '../../../utils/types/table.types';
 import { TableAccordionSelectedEventDetail } from '../../../utils/interfaces/content.interface';
 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;
-  /** 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;
-  /** If the rows in the rowgroup can be selected via checkmark. Per default, it is false. */
-  selectable: boolean;
-  /** Only use when accordion property is true.
-   * Will render the accordion opened if set to true. By default, is false.
-   */
-  opened: boolean;
-  /** Emits when the rowgroup as a whole is selected. */
-  b2bSelect: EventEmitter<TableAccordionSelectedEventDetail>;
-  selectedValues: any[];
-  indeterminate: boolean;
-  handleOpenChange(event: any): void;
-  handleSelectedChange(event: any): void;
-  private toggleSelectAll;
-  private toggleList;
-  private makeHeaderRowNotSelectable;
-  private addAccordionControlColumn;
-  private addCheckboxColumn;
-  private toggleInitialVisibility;
-  private toggleChildRowVisibility;
-  componentWillLoad(): void;
-  componentDidRender(): void;
-  render(): any;
+    host: HTMLB2bTableRowgroupElement;
+    /** Rowgroup allows grouping rows by context: header, body or footer.
+     * Header rows are by default not highlightable on mouse over.
+     **/
+    type: TableRowgroupTypes;
+    /** @internal the table size. */
+    size: TableSizes;
+    /** 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;
+    /** If the rows in the rowgroup can be selected via checkmark. Per default, it is false. */
+    selectable: 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;
+    /** Emits when the rowgroup as a whole is selected. */
+    b2bSelect: EventEmitter<TableAccordionSelectedEventDetail>;
+    selectedValues: any[];
+    handleOpenChange(event: any): void;
+    handleSelectedChange(event: any): void;
+    private toggleSelectAll;
+    private toggleList;
+    private makeHeaderRowNotSelectable;
+    private addAccordionControlColumn;
+    private addCheckboxColumn;
+    private toggleInitialVisibility;
+    private toggleChildRowVisibility;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    render(): any;
 }

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

@@ -2,18 +2,24 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { TableSizes } from '../../utils/types/table.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>;
-  onColumnSelected(event: any): void;
-  private setCellSize;
-  private setFixedHeaders;
-  componentDidRender(): void;
-  componentDidLoad(): void;
-  render(): any;
+    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.
+     * 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;
+    /** Emits whenever the sort direction of any column in the table changes. */
+    b2bSortChange: EventEmitter<ColumnSortChangeEventDetail>;
+    onColumnSelected(event: any): void;
+    private isScrollable;
+    private getAllCellsByRow;
+    private setCellSize;
+    private setFixedHeaders;
+    private setRowGroupSize;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    render(): any;
 }

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

@@ -15,4 +15,5 @@ export declare const ScrollableTable: Story;
 export declare const SortableTable: Story;
 export declare const SortableTableRightAlign: Story;
 export declare const AccordionTable: Story;
-export declare const Selectable: Story;
+export declare const SelectableTable: Story;
+export declare const ColspanTable: Story;

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

@@ -1,4 +1,6 @@
 export declare function updateCheckboxState(rows: HTMLB2bTableRowElement[], header: HTMLB2bTableRowElement): void;
+/** Sets appropriate column width for colspan table */
+export declare function setFlexBase(host: HTMLB2bTableCellElement | HTMLB2bTableHeaderElement, colspan: number, totalCols: number, selectable: boolean, accordion: boolean): void;
 export declare function getAllRows(hostEl: HTMLB2bTableElement | HTMLB2bTableRowgroupElement): HTMLB2bTableRowElement[];
 export declare function getRemainingRows(hostEl: HTMLB2bTableElement | HTMLB2bTableRowgroupElement): HTMLB2bTableRowElement[];
 export declare function getFirstRow(hostEl: HTMLB2bTableElement | HTMLB2bTableRowgroupElement): HTMLB2bTableRowElement;