@otto-de/b2b-core-components 1.9.0 → 1.10.1

package/dist/esm/loader.js

@@ -1,9 +1,11 @@
-import { b as bootstrapLazy } from './index-1916a410.js';
-export { s as setNonce } from './index-1916a410.js';
+import { b as bootstrapLazy } from './index-ab9eb36d.js';
+export { s as setNonce } from './index-ab9eb36d.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
 
-const defineCustomElements = (win, options) => {
+const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return bootstrapLazy([["b2b-search",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"disabled":[516],"closed":[32]},[[0,"keydown","handleKeyDown"]]]]],["b2b-multiselect-dropdown",[[1,"b2b-multiselect-dropdown",{"label":[1],"placeholder":[513],"optionsList":[16],"searchPlaceholder":[1,"search-placeholder"],"selectAllLabel":[1,"select-all-label"],"maxOptionsVisible":[2,"max-options-visible"],"selectedValues":[32],"currentList":[32],"value":[32],"isElementFocused":[32],"hasOptionList":[32]},null,{"optionsList":["watchPropHandler"],"selectedValues":["handleSelectedValuesChange"]}]]],["b2b-table-row",[[1,"b2b-table-row",{"highlight":[4],"color":[1],"accordionType":[1,"accordion-type"],"selectable":[4],"size":[1],"value":[1],"indeterminate":[4],"checked":[1028],"isOpen":[32],"toggleAccordion":[64]},[[0,"b2b-change","toggleSelected"]]]]],["b2b-wizard-step",[[1,"b2b-wizard-step",{"state":[1],"step":[1],"checkIcon":[4,"check-icon"]}]]],["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"]],{"opened":["openedChanged"]}]]],["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"]},null,{"totalPages":["onTotalPagesChange"],"activePage":["onActivePageChange"]}]]],["b2b-alert",[[1,"b2b-alert",{"type":[1],"size":[1],"opened":[1028],"hasCloseButton":[4,"has-close-button"],"customIcon":[4,"custom-icon"]},null,{"opened":["openedChanged"]}]]],["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"]],{"disabled":["disabledChanged"],"invalid":["invalidChanged"]}]]],["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"]],{"invalid":["invalidChanged"],"disabled":["disabledChanged"]}]]],["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"],"height":[1]}]]],["b2b-anchor",[[1,"b2b-anchor",{"href":[1],"download":[1],"target":[1],"size":[1]}]]],["b2b-breadcrumb",[[1,"b2b-breadcrumb",null,[[0,"b2b-change","onSelectedChange"]]]]],["b2b-breadcrumb-item",[[1,"b2b-breadcrumb-item",{"href":[1],"value":[8],"active":[1028]}]]],["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-progress-bar",[[1,"b2b-progress-bar",{"progress":[2],"label":[1],"labelType":[1,"label-type"],"labelPosition":[1,"label-position"]}]]],["b2b-scrollable-container",[[1,"b2b-scrollable-container"]]],["b2b-tab",[[1,"b2b-tab",{"selected":[516],"disabled":[4],"invalid":[4]},null,{"selected":["propagateChange"]}]]],["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],"size":[1],"accordion":[4],"selectable":[4],"fixed":[4],"opened":[516],"selectedValues":[32]},[[0,"b2b-open","handleOpenChange"],[0,"b2b-row-selected","handleSelectedChange"]]]]],["b2b-toggle-button",[[1,"b2b-toggle-button",{"label":[1],"name":[513],"checked":[1540],"disabled":[516],"value":[513]}]]],["b2b-toggle-chip",[[1,"b2b-toggle-chip",{"label":[1],"value":[520],"name":[513],"variant":[1],"active":[1028],"disabled":[516]}]]],["b2b-toggle-group",[[1,"b2b-toggle-group",{"name":[1],"disabled":[516],"currentValue":[32]},[[0,"b2b-change","handleToggleButtonChange"]],{"disabled":["disabledChanged"]}]]],["b2b-tooltip",[[1,"b2b-tooltip",{"position":[1],"content":[1],"trigger":[1],"opened":[1540]},null,{"opened":["handleOpenedChange"]}]]],["b2b-wizard",[[1,"b2b-wizard",{"activeStep":[1,"active-step"],"custom":[4],"checkIcon":[4,"check-icon"]}]]],["b2b-wizard-icon",[[1,"b2b-wizard-icon",{"step":[1],"state":[1],"checkIcon":[4,"check-icon"]}]]],["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],"groupDisabled":[4,"group-disabled"],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]],{"optionsList":["watchPropHandler"]}],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]},null,{"invalid":["invalidChanged"],"disabled":["disabledChanged"]}]]],["b2b-chip-component_2",[[0,"b2b-multiselect-option",{"option":[1],"selected":[1028],"indeterminate":[4]}],[1,"b2b-chip-component",{"label":[1],"disabled":[4],"hasCloseButton":[4,"has-close-button"],"value":[520]}]]],["b2b-table-cell_2",[[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"colspan":[2],"totalCols":[2,"total-cols"],"useTextEllipsis":[32]}],[1,"b2b-table-header",{"divider":[4],"size":[1],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"colspan":[2],"contentAlign":[1,"content-align"],"totalCols":[2,"total-cols"],"active":[32],"iconAlign":[32]}]]],["b2b-rounded-icon",[[1,"b2b-rounded-icon",{"color":[1],"borderColor":[1,"border-color"],"contentColor":[1,"content-color"]}]]],["b2b-separator",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-checkbox",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"indeterminate":[1028],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4],"standalone":[4],"groupDisabled":[4,"group-disabled"]}]]],["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],"groupDisabled":[4,"group-disabled"],"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],"width":[1],"disabled":[516],"loading":[4],"active":[516],"href":[1],"target":[1],"download":[1],"groupDisabled":[4,"group-disabled"],"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]},null,{"icon":["loadIconPathData"]}]]],["b2b-input-label",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]]], options);
+  await globalScripts();
+  return bootstrapLazy([["b2b-search",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"disabled":[516],"closed":[32]},[[0,"keydown","handleKeyDown"]]]]],["b2b-multiselect-dropdown",[[1,"b2b-multiselect-dropdown",{"label":[1],"placeholder":[513],"optionsList":[16],"searchPlaceholder":[1,"search-placeholder"],"selectAllLabel":[1,"select-all-label"],"maxOptionsVisible":[2,"max-options-visible"],"selectedValues":[32],"currentList":[32],"value":[32],"isElementFocused":[32],"hasOptionList":[32]},null,{"optionsList":["watchPropHandler"],"selectedValues":["handleSelectedValuesChange"]}]]],["b2b-table-row",[[1,"b2b-table-row",{"highlight":[4],"color":[1],"accordionType":[1,"accordion-type"],"selectable":[4],"size":[1],"value":[1],"indeterminate":[4],"checked":[1028],"isOpen":[32],"toggleAccordion":[64]},[[0,"b2b-change","toggleSelected"]]]]],["b2b-wizard-step",[[1,"b2b-wizard-step",{"state":[1],"step":[1],"checkIcon":[4,"check-icon"]}]]],["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"]],{"opened":["openedChanged"]}]]],["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"]},null,{"totalPages":["onTotalPagesChange"],"activePage":["onActivePageChange"]}]]],["b2b-alert",[[1,"b2b-alert",{"type":[1],"size":[1],"opened":[1028],"hasCloseButton":[4,"has-close-button"],"customIcon":[4,"custom-icon"]},null,{"opened":["openedChanged"]}]]],["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"]],{"disabled":["disabledChanged"],"invalid":["invalidChanged"]}]]],["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"]],{"invalid":["invalidChanged"],"disabled":["disabledChanged"]}]]],["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"],"height":[1]}]]],["b2b-anchor",[[1,"b2b-anchor",{"href":[1],"download":[1],"target":[1],"size":[1]}]]],["b2b-breadcrumb",[[1,"b2b-breadcrumb",null,[[0,"b2b-change","onSelectedChange"]]]]],["b2b-breadcrumb-item",[[1,"b2b-breadcrumb-item",{"href":[1],"value":[8],"active":[1028]}]]],["b2b-card",[[1,"b2b-card",{"disabled":[4],"href":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","onKeyDown"]]]]],["b2b-flyout-menu",[[1,"b2b-flyout-menu",{"opened":[1028]},[[0,"keydown","handleKeyDown"],[0,"b2b-option-selected","handleSelected"],[4,"click","handleClickOutside"]]]]],["b2b-flyout-menu-option",[[0,"b2b-flyout-menu-option",{"option":[1],"disabled":[516],"separator":[4]},[[0,"keydown","handleKeyDown"]]]]],["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-icon-100",[[1,"b2b-icon-100",{"icon":[1],"color":[1],"size":[2],"clickable":[4],"focusable":[4],"pathData":[32]},null,{"icon":["loadIconPathData"]}]]],["b2b-label",[[1,"b2b-label",{"type":[1]}]]],["b2b-paragraph",[[1,"b2b-paragraph",{"weight":[1],"size":[1],"align":[1]}]]],["b2b-progress-bar",[[1,"b2b-progress-bar",{"progress":[2],"label":[1],"labelType":[1,"label-type"],"labelPosition":[1,"label-position"]}]]],["b2b-scrollable-container",[[1,"b2b-scrollable-container"]]],["b2b-tab",[[1,"b2b-tab",{"selected":[516],"disabled":[4],"invalid":[4]},null,{"selected":["propagateChange"]}]]],["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],"size":[1],"accordion":[4],"selectable":[4],"fixed":[4],"opened":[516],"selectedValues":[32]},[[0,"b2b-open","handleOpenChange"],[0,"b2b-row-selected","handleSelectedChange"]]]]],["b2b-toggle-button",[[1,"b2b-toggle-button",{"label":[1],"name":[513],"checked":[1540],"disabled":[516],"value":[513]}]]],["b2b-toggle-chip",[[1,"b2b-toggle-chip",{"label":[1],"value":[520],"name":[513],"variant":[1],"active":[1028],"disabled":[516]}]]],["b2b-toggle-group",[[1,"b2b-toggle-group",{"name":[1],"disabled":[516],"currentValue":[32]},[[0,"b2b-change","handleToggleButtonChange"]],{"disabled":["disabledChanged"]}]]],["b2b-toggle-switch",[[1,"b2b-toggle-switch",{"label":[1],"name":[1],"labelPosition":[1,"label-position"],"disabled":[4],"state":[1028]}]]],["b2b-tooltip",[[1,"b2b-tooltip",{"position":[1],"content":[1],"trigger":[1],"opened":[1540]},null,{"opened":["handleOpenedChange"]}]]],["b2b-wizard",[[1,"b2b-wizard",{"activeStep":[1,"active-step"],"custom":[4],"checkIcon":[4,"check-icon"]}]]],["b2b-wizard-icon",[[1,"b2b-wizard-icon",{"step":[1],"state":[1],"checkIcon":[4,"check-icon"]}]]],["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],"groupDisabled":[4,"group-disabled"],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]],{"optionsList":["watchPropHandler"]}],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]},null,{"invalid":["invalidChanged"],"disabled":["disabledChanged"]}]]],["b2b-checkbox",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"indeterminate":[1028],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4],"standalone":[4],"groupDisabled":[4,"group-disabled"]}]]],["b2b-chip-component_2",[[0,"b2b-multiselect-option",{"option":[1],"selected":[1028],"indeterminate":[4]}],[1,"b2b-chip-component",{"label":[1],"disabled":[4],"hasCloseButton":[4,"has-close-button"],"value":[520]}]]],["b2b-table-cell_2",[[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"colspan":[2],"totalCols":[2,"total-cols"],"useTextEllipsis":[32]}],[1,"b2b-table-header",{"divider":[4],"size":[1],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"colspan":[2],"contentAlign":[1,"content-align"],"totalCols":[2,"total-cols"],"active":[32],"iconAlign":[32]}]]],["b2b-rounded-icon",[[1,"b2b-rounded-icon",{"color":[1],"borderColor":[1,"border-color"],"contentColor":[1,"content-color"]}]]],["b2b-separator",[[1,"b2b-separator",{"alignment":[1]}]]],["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],"groupDisabled":[4,"group-disabled"],"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],"width":[1],"disabled":[516],"loading":[4],"active":[516],"href":[1],"target":[1],"download":[1],"groupDisabled":[4,"group-disabled"],"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],"focusable":[4],"pathData":[32]},null,{"icon":["loadIconPathData"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/request-9dfb5cd6.js

@@ -0,0 +1,40 @@
+const ICON_PATH = 'https://portal.otto.market/design-system/dist/b2b-core-components';
+
+const iconContent = new Map();
+const requests = new Map();
+const fetchIcon = (icon) => {
+    // see if we already have a request for this url
+    let req = requests.get(icon);
+    if (req === undefined || null) {
+        if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
+            // we don't already have a request
+            req = fetch(icon).then(rsp => {
+                if (rsp.ok) {
+                    return rsp.text().then(svgContent => {
+                        iconContent.set(icon, svgContent || '');
+                    });
+                }
+                iconContent.set(icon, '');
+            });
+            // cache for the same requests
+            requests.set(icon, req);
+        }
+        else {
+            // set to empty for ssr scenarios and resolve promise
+            iconContent.set(icon, '');
+            return Promise.resolve();
+        }
+    }
+    return req;
+};
+const buildPath = (icon, folderName) => {
+    // fetch icons from local dir for development
+    if (folderName === 'icons') {
+        return `${ICON_PATH}/icons/${icon}.svg`;
+    }
+    else {
+        return `${ICON_PATH}/${icon}.svg`;
+    }
+};
+
+export { buildPath as b, fetchIcon as f, iconContent as i };

package/dist/esm/table.types-083a173a.js

@@ -0,0 +1,37 @@
+const TableSizes = {
+    EQUAL: 'equal',
+    EXPAND: 'expand',
+    COLSPAN: 'colspan',
+};
+const TableRowgroupTypes = {
+    HEADER: 'header',
+    BODY: 'body',
+    FOOTER: 'footer',
+};
+const ContentAlignment = {
+    LEFT: 'left',
+    RIGHT: 'right',
+    CENTER: 'center',
+};
+const SortIconAlignment = {
+    LEFT: 'left',
+    RIGHT: 'right',
+    CENTER: 'center',
+};
+const TableSortDirections = {
+    NOT: 'not-sorted',
+    ASC: 'ascending',
+    DESC: 'descending',
+};
+const TableAccordionRowTypes = {
+    PARENT: 'parent',
+    CHILD: 'child',
+    HEADER: 'header',
+};
+const TableColourOptions = {
+    DEFAULT: 'default',
+    SELECTED: 'selected',
+    GROUP: 'group',
+};
+
+export { ContentAlignment as C, SortIconAlignment as S, TableSizes as T, TableSortDirections as a, TableAccordionRowTypes as b, TableColourOptions as c, TableRowgroupTypes as d };

package/dist/esm/utils-71968b12.js

@@ -0,0 +1,34 @@
+function updateCheckboxState(rows, header) {
+    let someSelected = rows.some(item => item.checked === true);
+    let everySelected = rows.every(item => item.checked === true);
+    header.checked = everySelected;
+    header.indeterminate = someSelected && !everySelected;
+}
+/** Sets appropriate column width for colspan table */
+function setFlexBase(host, colspan, totalCols, selectable, accordion) {
+    const flexBase = colspan != undefined ? colspan : 1;
+    let border = 0;
+    // factor in dividers for multi columns
+    if (flexBase > 1) {
+        border = flexBase;
+    }
+    // calculate space for control columns
+    const checkboxSpace = selectable ? (40 / totalCols) * flexBase : 0;
+    const accordionSpace = accordion ? (48 / totalCols) * flexBase : 0;
+    const style = `calc((${(flexBase / totalCols) * 100}% - ${checkboxSpace + accordionSpace}px) - ${24 - border}px)`;
+    host.style.flexBasis = style;
+}
+function getAllRows(hostEl) {
+    return Array.from(hostEl.querySelectorAll('b2b-table-row'));
+}
+function getRemainingRows(hostEl) {
+    return Array.from(hostEl.querySelectorAll('b2b-table-row')).slice(1);
+}
+function getFirstRow(hostEl) {
+    const firstRow = hostEl.querySelector('b2b-table-row');
+    if (firstRow != null) {
+        return firstRow;
+    }
+}
+
+export { getFirstRow as a, getRemainingRows as b, getAllRows as g, setFlexBase as s, updateCheckboxState as u };

package/dist/esm/wizard.types-40ae9b73.js

@@ -0,0 +1,8 @@
+const WizardStatus = {
+    DEFAULT: 'default',
+    COMPLETED: 'completed',
+    PENDING: 'pending',
+    DISABLED: 'disabled',
+};
+
+export { WizardStatus as W };

package/dist/scripts/stencil/generate-storybook-args.js

@@ -8,40 +8,40 @@ import fs from "fs";
 const hasOptions = prop => prop.values.length > 1;
 const isBoolean = prop => prop.type === 'boolean';
 const setDefaultValue = (propData, prop) => {
-  propData.table = Object.assign(Object.assign({}, propData.table), { defaultValue: { summary: prop.default } });
+    propData.table = Object.assign(Object.assign({}, propData.table), { defaultValue: { summary: prop.default } });
 };
 const setOptions = (propData, prop) => {
-  if (hasOptions(prop) && !isBoolean(prop)) {
-    propData.options = prop.values.map(option => option.value);
-  }
+    if (hasOptions(prop) && !isBoolean(prop)) {
+        propData.options = prop.values.map(option => option.value);
+    }
 };
 const setType = (propData, prop) => {
-  const type = prop.values[0].type;
-  propData.table = Object.assign(Object.assign({}, propData.table), { type: { summary: type } });
+    const type = prop.values[0].type;
+    propData.table = Object.assign(Object.assign({}, propData.table), { type: { summary: type } });
 };
 const setDefaultControls = (propData, prop) => {
-  if (hasOptions(prop)) {
-    propData.control = { type: 'radio' };
-  }
-  else if (isBoolean(prop)) {
-    propData.control = { type: 'boolean' };
-  }
+    if (hasOptions(prop)) {
+        propData.control = { type: 'radio' };
+    }
+    else if (isBoolean(prop)) {
+        propData.control = { type: 'boolean' };
+    }
 };
 const generateStorybookArgs = (docsData) => {
-  const componentsArgTypes = {};
-  docsData.components.map((component) => {
-    const componentData = {};
-    component.props.map((prop) => {
-      const propData = {};
-      setOptions(propData, prop);
-      setDefaultControls(propData, prop);
-      setType(propData, prop);
-      setDefaultValue(propData, prop);
-      propData.description = prop.docs;
-      componentData[prop.name] = propData;
+    const componentsArgTypes = {};
+    docsData.components.map((component) => {
+        const componentData = {};
+        component.props.map((prop) => {
+            const propData = {};
+            setOptions(propData, prop);
+            setDefaultControls(propData, prop);
+            setType(propData, prop);
+            setDefaultValue(propData, prop);
+            propData.description = prop.docs;
+            componentData[prop.name] = propData;
+        });
+        componentsArgTypes[component.tag] = componentData;
     });
-    componentsArgTypes[component.tag] = componentData;
-  });
-  fs.writeFileSync('./src/docs/config/components-args.json', JSON.stringify(componentsArgTypes, null, 2));
+    fs.writeFileSync('./src/docs/config/components-args.json', JSON.stringify(componentsArgTypes, null, 2));
 };
 export default generateStorybookArgs;

package/dist/scripts/stencil/generate-vue-web-types.js

@@ -5,84 +5,84 @@ For more information you can see https://github.com/JetBrains/web-types
 */
 import fs from "fs";
 const formatValues = propValues => propValues
-  .split('|')
-  .map(s => s.trim())
-  .join(', ');
+    .split('|')
+    .map(s => s.trim())
+    .join(', ');
 const generateVueWebTypes = (docsData) => {
-  const components = [];
-  docsData.components.map((component) => {
-    const componentName = component.tag;
-    const attributes = [];
-    const slots = [];
-    const events = [];
-    const docUrl = 'https://internal.otto.market/design-system/?path=/story/overview--page';
-    component.props.map((prop) => {
-      const name = prop.attr || prop.name;
-      const valuesString = `\r\nValues: ${formatValues(prop.type)}`;
-      attributes.push({
-        name: name,
-        description: prop.docs + `${valuesString}`,
-        required: prop.required,
-        default: prop.default,
-        value: {
-          kind: 'expression',
-          type: prop.type,
-        },
-      });
-    });
-    component.events.map((event) => {
-      let eventName = event.event;
-      if (eventName.toLowerCase().startsWith(componentName.toLowerCase())) {
-        eventName = 'on' + eventName.substring(componentName.length);
-      }
-      events.push({
-        name: eventName,
-        description: event.docs,
-        arguments: [
-          {
-            name: 'detail',
-            type: event.detail,
-          },
-        ],
-      });
-    });
-    component.slots.map((slot) => {
-      slots.push({
-        name: slot.name === '' ? 'default' : slot.name,
-        description: slot.docs,
-      });
+    const components = [];
+    docsData.components.map((component) => {
+        const componentName = component.tag;
+        const attributes = [];
+        const slots = [];
+        const events = [];
+        const docUrl = 'https://internal.otto.market/design-system/?path=/story/overview--page';
+        component.props.map((prop) => {
+            const name = prop.attr || prop.name;
+            const valuesString = `\r\nValues: ${formatValues(prop.type)}`;
+            attributes.push({
+                name: name,
+                description: prop.docs + `${valuesString}`,
+                required: prop.required,
+                default: prop.default,
+                value: {
+                    kind: 'expression',
+                    type: prop.type,
+                },
+            });
+        });
+        component.events.map((event) => {
+            let eventName = event.event;
+            if (eventName.toLowerCase().startsWith(componentName.toLowerCase())) {
+                eventName = 'on' + eventName.substring(componentName.length);
+            }
+            events.push({
+                name: eventName,
+                description: event.docs,
+                arguments: [
+                    {
+                        name: 'detail',
+                        type: event.detail,
+                    },
+                ],
+            });
+        });
+        component.slots.map((slot) => {
+            slots.push({
+                name: slot.name === '' ? 'default' : slot.name,
+                description: slot.docs,
+            });
+        });
+        components.push({
+            'name': componentName,
+            'doc-url': docUrl,
+            'description': component.docs,
+            'source': {
+                module: '@otto-de/b2b-core-components' +
+                    component.filePath
+                        .replace('./src/', '/dist/types/')
+                        .replace('.tsx', '.d.ts'),
+                symbol: componentName.substring(3),
+            },
+            attributes,
+            slots,
+            events,
+        });
     });
-    components.push({
-      'name': componentName,
-      'doc-url': docUrl,
-      'description': component.docs,
-      'source': {
-        module: '@otto-de/b2b-core-components' +
-          component.filePath
-            .replace('./src/', '/dist/types/')
-            .replace('.tsx', '.d.ts'),
-        symbol: componentName.substring(3),
-      },
-      attributes,
-      slots,
-      events,
-    });
-  });
-  /* tags is deprecated in favour of elements. Unfortunately whe using
-  elements Jetbrains does ot suggest value for props */
-  const webTypes = {
-    '$schema': 'http://json.schemastore.org/web-types',
-    'framework': 'vue',
-    'name': '@otto-de/b2b-core-components',
-    'version': require('../../package.json').version,
-    'js-types-syntax': 'typescript',
-    'description-markup': 'markdown',
-    'contributions': {
-      html: {
-        tags: components,
-      },
-    },
-  };
-  fs.writeFileSync('./dist/web-types.json', JSON.stringify(webTypes, null, 2));
+    /* tags is deprecated in favour of elements. Unfortunately whe using
+    elements Jetbrains does ot suggest value for props */
+    const webTypes = {
+        '$schema': 'http://json.schemastore.org/web-types',
+        'framework': 'vue',
+        'name': '@otto-de/b2b-core-components',
+        'version': require('../../package.json').version,
+        'js-types-syntax': 'typescript',
+        'description-markup': 'markdown',
+        'contributions': {
+            html: {
+                tags: components,
+            },
+        },
+    };
+    fs.writeFileSync('./dist/web-types.json', JSON.stringify(webTypes, null, 2));
 };
 export default generateVueWebTypes;

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

@@ -1,21 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class AlertComponent {
-  /** The type of alert. Per default it is info. */
-  type: 'info' | 'success' | 'warning' | 'error';
-  /** The size of the alert. Per default it is large. If set to small, the alert will only have an icon. */
-  size: 'large' | 'small';
-  /** Whether the alert is currently open. Set to true to display the alert. */
-  opened: boolean;
-  /** Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. */
-  hasCloseButton: boolean;
-  /** Whether or not you want to use a custom icon. Per default, it is false. */
-  customIcon: boolean;
-  /** Emits whenever the alert is closed. */
-  b2bClose: EventEmitter<void>;
-  openedChanged(newValue: boolean): void;
-  private chooseIcon;
-  private close;
-  private canClose;
-  private canCustomizeIcon;
-  render(): any;
+    /** The type of alert. Per default it is info. */
+    type: 'info' | 'success' | 'warning' | 'error';
+    /** The size of the alert. Per default it is large. If set to small, the alert will only have an icon. */
+    size: 'large' | 'small';
+    /** Whether the alert is currently open. Set to true to display the alert. */
+    opened: boolean;
+    /** Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. */
+    hasCloseButton: boolean;
+    /** Whether or not you want to use a custom icon. Per default, it is false. */
+    customIcon: boolean;
+    /** Emits whenever the alert is closed. */
+    b2bClose: EventEmitter<void>;
+    openedChanged(newValue: boolean): void;
+    private chooseIcon;
+    private close;
+    private canClose;
+    private canCustomizeIcon;
+    render(): any;
 }

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

@@ -1,12 +1,12 @@
 export declare class AnchorComponent {
-  /** The URL or URL fragment the anchor points to. This is required. */
-  href: string;
-  /** If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file
-   * defaults to the URL string, but can be changed by the user. */
-  download: string;
-  /** The target the URL will be opened into. The default is self. */
-  target: 'self' | 'blank' | 'parent' | 'top';
-  /** The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px. */
-  size: 'inherit' | '100';
-  render(): any;
+    /** The URL or URL fragment the anchor points to. This is required. */
+    href: string;
+    /** If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file
+     * defaults to the URL string, but can be changed by the user. */
+    download: string;
+    /** The target the URL will be opened into. The default is self. */
+    target: 'self' | 'blank' | 'parent' | 'top';
+    /** The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px. */
+    size: 'inherit' | '100';
+    render(): any;
 }

package/dist/types/components/breadcrumb/breadcrumb-item.d.ts

@@ -1,15 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { BreadCrumbChangeEventDetail } from '../../utils/interfaces/interaction.interface';
 export declare class BreadCrumbItemComponent {
-  /** If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked. */
-  href: string;
-  /** The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar. */
-  value: any;
-  /** If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state.*/
-  active: boolean;
-  /** @internal Emits whenever a breadcrumb item is clicked and no href is specified */
-  b2bChange: EventEmitter<BreadCrumbChangeEventDetail>;
-  private onClick;
-  private onKeyDown;
-  render(): any;
+    /** If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked. */
+    href: string;
+    /** The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar. */
+    value: any;
+    /** If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state.*/
+    active: boolean;
+    /** @internal Emits whenever a breadcrumb item is clicked and no href is specified */
+    b2bChange: EventEmitter<BreadCrumbChangeEventDetail>;
+    private onClick;
+    private onKeyDown;
+    render(): any;
 }

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

@@ -1,11 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { BreadCrumbChangeEventDetail } from '../../utils/interfaces/interaction.interface';
 export declare class B2bBreadCrumbComponent {
-  host: HTMLB2bBreadcrumbElement;
-  /** Emits the value of the currently selected item whenever an item is selected. */
-  b2bSelected: EventEmitter<BreadCrumbChangeEventDetail>;
-  onSelectedChange(event: any): void;
-  private getBreadcrumbItems;
-  private updateActiveItem;
-  render(): any;
+    host: HTMLB2bBreadcrumbElement;
+    /** Emits the value of the currently selected item whenever an item is selected. */
+    b2bSelected: EventEmitter<BreadCrumbChangeEventDetail>;
+    onSelectedChange(event: any): void;
+    private getBreadcrumbItems;
+    private updateActiveItem;
+    render(): any;
 }

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

@@ -1,38 +1,38 @@
 export declare class ButtonComponent {
-  hostElement: HTMLB2bButtonElement;
-  /** The button variant. If not specified, the button will be the secondary variant. */
-  variant: 'primary' | 'secondary';
-  /** The button type. Matches native HTML types. The default type is 'button'. */
-  type: 'button' | 'submit' | 'reset';
-  /** The size of the button, 100 is the default state */
-  size: '100' | '50';
-  /** The width of the button. Per default, it will fit the content */
-  width: 'fit-content' | 'fit-container' | 'custom';
-  /** Whether the button is disabled. */
-  disabled: boolean;
-  /** Whether the button is currently loading. Set to true to hide text and display loading spinner instead */
-  loading: boolean;
-  /** Whether the button is currently active. Set to true when using the button to signify a permanent active state */
-  active: boolean;
-  /** An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files  */
-  href?: string;
-  /** The target of the button if it should behave like an anchor. Per default it is self. */
-  target?: 'self' | 'blank';
-  /** If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file
-   * defaults to the URL string, but can be changed by the user. */
-  download?: string;
-  /** @internal Whether the parent input group is disabled. Per default, it is false. */
-  groupDisabled: boolean;
-  private focusableElement;
-  /** Manually set focus to button element */
-  setFocus(): Promise<void>;
-  /**
-   * Prevent clicks from being emitted from the host
-   * when the component is `disabled`. (Taken from Telecom)
-   */
-  handleHostClick(event: Event): void;
-  private canLoad;
-  private checkIcon;
-  protected spinner(): any;
-  render(): any;
+    hostElement: HTMLB2bButtonElement;
+    /** The button variant. If not specified, the button will be the secondary variant. */
+    variant: 'primary' | 'secondary';
+    /** The button type. Matches native HTML types. The default type is 'button'. */
+    type: 'button' | 'submit' | 'reset';
+    /** The size of the button, 100 is the default state */
+    size: '100' | '50';
+    /** The width of the button. Per default, it will fit the content */
+    width: 'fit-content' | 'fit-container' | 'custom';
+    /** Whether the button is disabled. */
+    disabled: boolean;
+    /** Whether the button is currently loading. Set to true to hide text and display loading spinner instead */
+    loading: boolean;
+    /** Whether the button is currently active. Set to true when using the button to signify a permanent active state */
+    active: boolean;
+    /** An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files  */
+    href?: string;
+    /** The target of the button if it should behave like an anchor. Per default it is self. */
+    target?: 'self' | 'blank';
+    /** If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file
+     * defaults to the URL string, but can be changed by the user. */
+    download?: string;
+    /** @internal Whether the parent input group is disabled. Per default, it is false. */
+    groupDisabled: boolean;
+    private focusableElement;
+    /** Manually set focus to button element */
+    setFocus(): Promise<void>;
+    /**
+     * Prevent clicks from being emitted from the host
+     * when the component is `disabled`. (Taken from Telecom)
+     */
+    handleHostClick(event: Event): void;
+    private canLoad;
+    private checkIcon;
+    protected spinner(): any;
+    render(): any;
 }