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

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

@@ -1,2 +1,2 @@
-export declare const iconTypes: readonly ["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-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"];
+export declare const iconTypes: readonly ["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"];
 export type IconName = typeof iconTypes[number];

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

@@ -4,5 +4,6 @@ export default meta;
 type Story = StoryObj;
 export declare const InputList: Story;
 export declare const Focused: Story;
-export declare const Disabled: Story;
 export declare const CustomList: Story;
+export declare const DisabledWithoutSelectedOption: Story;
+export declare const disabledWithSelectedOption: Story;

package/dist/types/components/multiselect-dropdown/multiselect-dropdown.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class B2bMultiSelectDropdown {
+  hostElement: HTMLB2bMultiselectDropdownElement;
+  /** The input label. */
+  label: string;
+  /** 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 placeholder shown in the search bar. */
+  searchPlaceholder: string;
+  /** The string displayed as the select all label. */
+  selectAllLabel: 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. */
+  b2bChange: EventEmitter<string[]>;
+  selectedValues: any[];
+  currentList: string[];
+  value: string;
+  isElementFocused: boolean;
+  hasOptionList: boolean;
+  /** Needed to trigger a re-render for async data */
+  watchPropHandler(newList: string[]): void;
+  handleSelectedValuesChange(): void;
+  componentDidUpdate(): void;
+  private handleInput;
+  private getOptions;
+  private renderChips;
+  private handleOverflowOptionsClick;
+  private handleSelectedChange;
+  private handleChipClose;
+  private updateOption;
+  private updateAllOptions;
+  private setElementOnFocus;
+  private setElementOnBlur;
+  private resetFocus;
+  private handleMouseDown;
+  private handleKeyDown;
+  private handleSelectAll;
+  private updateSelectAll;
+  render(): any;
+}

package/dist/types/components/multiselect-dropdown/multiselect-dropdown.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+type Story = StoryObj;
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story;

package/dist/types/components/multiselect-dropdown/multiselect-option/multiselect-option.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { MultiSelectOptionEventDetail } from '../../../utils/interfaces/form.interface';
+export declare class B2bMultiSelectOption {
+  /** The label of the option. */
+  option: string;
+  /** Emits the option as a string whenever an option is selected. */
+  b2bOptionSelected: EventEmitter<MultiSelectOptionEventDetail>;
+  /** Whether the option is currently selected. */
+  selected: boolean;
+  /** @internal Whether the checkbox is in indeterminate state. */
+  indeterminate?: boolean;
+  private handleCheckboxChange;
+  render(): any;
+}

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,13 @@
+export declare class ProgressBarComponent {
+  hostElement: HTMLB2bProgressBarElement;
+  /** The percentage of progress from 0 to 100. */
+  progress: number;
+  /** The label of the progress bar. */
+  label?: string;
+  /** Whether the label should be displayed below or on the side of the progress bar. */
+  labelType?: 'below' | 'side';
+  /** Whether the label should be displayed on the right or left of the progress bar. */
+  labelPosition?: 'left' | 'right';
+  private getProgress;
+  render(): any;
+}

package/dist/types/components/progress-bar/progress-bar.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const story010Default: Story;
+export declare const story020LabelOnBottomLeft: Story;
+export declare const story030LabelOnBottomRight: Story;
+export declare const story040LabelOnLeftSide: Story;
+export declare const story050LabelOnRightSide: Story;

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

@@ -5,7 +5,7 @@ export declare class TableCellComponent {
    * It will only truncate when table size is equal
    * **/
   textWrap: boolean;
-  /** The size of the cell. Follows table size.
+  /** @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.
    **/
@@ -16,10 +16,14 @@ export declare class TableCellComponent {
   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;
-  componentWillRender(): void;
+  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. **/
+  /** 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;
-  componentWillRender(): void;
+  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,5 +1,5 @@
 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;
@@ -11,6 +11,8 @@ export declare class TableRowComponent {
   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. */
@@ -27,8 +29,9 @@ export declare class TableRowComponent {
   toggleAccordion(isOpen: boolean): Promise<void>;
   componentWillLoad(): void;
   private toggleOpen;
+  private setTotalCols;
   private getRowColor;
-  private getRowWidth;
+  /** Only needs to be added if we control the state of the selection. */
   private shouldAddCheckbox;
   private getParentRowGroup;
   private getCheckbox;

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

@@ -1,5 +1,5 @@
 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;
@@ -7,12 +7,16 @@ export declare class TableRowgroupComponent {
    * 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.
    */
@@ -20,7 +24,6 @@ export declare class TableRowgroupComponent {
   /** 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;

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

@@ -6,13 +6,19 @@ export declare class TableComponent {
   /** 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;

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

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ToggleChipEventDetail } from '../../utils/interfaces/interaction.interface';
+export declare class B2BToggleChipComponent {
+  /** The chip's label. This is required. */
+  label: string;
+  /** The value associated with the toggle chip. This is emitted when the chip is interacted with. */
+  value: any;
+  /** 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 color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey*/
+  variant: 'grey' | 'white';
+  /** 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;
+  /** Emits the value whenever the toggle chip is selected. */
+  b2bSelected: EventEmitter<ToggleChipEventDetail>;
+  private onClick;
+  private onKeyDown;
+  render(): any;
+}