@otto-de/b2b-core-components 1.31.4 → 1.32.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/b2b-core-components/b2b-core-components.esm.js +1 -1
- package/dist/b2b-core-components/{p-61bc1384.entry.js → p-01f46118.entry.js} +1 -1
- package/dist/b2b-core-components/{p-6913515c.entry.js → p-0322b052.entry.js} +1 -1
- package/dist/b2b-core-components/{p-6536595a.entry.js → p-092855b3.entry.js} +1 -1
- package/dist/b2b-core-components/{p-f5b69b85.entry.js → p-0bd177d4.entry.js} +1 -1
- package/dist/b2b-core-components/{p-d31df455.entry.js → p-0bf2c192.entry.js} +1 -1
- package/dist/b2b-core-components/{p-a6ccf7f6.entry.js → p-15df2a47.entry.js} +1 -1
- package/dist/b2b-core-components/{p-74db37ef.entry.js → p-16872771.entry.js} +1 -1
- package/dist/b2b-core-components/{p-72dbc623.entry.js → p-190a7350.entry.js} +1 -1
- package/dist/b2b-core-components/{p-3d881765.entry.js → p-1abe3f2f.entry.js} +1 -1
- package/dist/b2b-core-components/p-1cfaf44a.js +1 -0
- package/dist/b2b-core-components/{p-05010d10.entry.js → p-1d6f73dd.entry.js} +1 -1
- package/dist/b2b-core-components/{p-71a4c9da.entry.js → p-26755654.entry.js} +1 -1
- package/dist/b2b-core-components/p-28a06853.entry.js +1 -0
- package/dist/b2b-core-components/{p-b9fed5dc.entry.js → p-2d625559.entry.js} +1 -1
- package/dist/b2b-core-components/{p-42058858.entry.js → p-3a088f2b.entry.js} +1 -1
- package/dist/b2b-core-components/p-3f8dc6e5.entry.js +1 -0
- package/dist/b2b-core-components/{p-a155219a.entry.js → p-40371f89.entry.js} +1 -1
- package/dist/b2b-core-components/{p-b510e8c5.entry.js → p-521303c4.entry.js} +1 -1
- package/dist/b2b-core-components/{p-9efb72c4.entry.js → p-58e9953b.entry.js} +1 -1
- package/dist/b2b-core-components/{p-e56705a6.entry.js → p-639d68a2.entry.js} +1 -1
- package/dist/b2b-core-components/{p-025896df.entry.js → p-660c758b.entry.js} +1 -1
- package/dist/b2b-core-components/p-67484ecc.entry.js +1 -0
- package/dist/b2b-core-components/{p-d13c613b.entry.js → p-6749d668.entry.js} +1 -1
- package/dist/b2b-core-components/p-6b291a01.entry.js +1 -0
- package/dist/b2b-core-components/{p-943a3829.entry.js → p-6c60d337.entry.js} +1 -1
- package/dist/b2b-core-components/p-6d64a994.entry.js +1 -0
- package/dist/b2b-core-components/{p-5077207f.entry.js → p-797c85c2.entry.js} +1 -1
- package/dist/b2b-core-components/{p-359e5f9d.entry.js → p-7df12ddf.entry.js} +1 -1
- package/dist/b2b-core-components/{p-d1c8105b.entry.js → p-82a2809e.entry.js} +1 -1
- package/dist/b2b-core-components/{p-66ab9de5.entry.js → p-848e4af7.entry.js} +1 -1
- package/dist/b2b-core-components/p-9fb493de.entry.js +1 -0
- package/dist/b2b-core-components/p-ae7ec34a.entry.js +1 -0
- package/dist/b2b-core-components/{p-2e0f9821.entry.js → p-b1191aa7.entry.js} +1 -1
- package/dist/b2b-core-components/{p-6ae8c29f.entry.js → p-bade1cab.entry.js} +1 -1
- package/dist/b2b-core-components/{p-1036bf3d.entry.js → p-bf9c8817.entry.js} +1 -1
- package/dist/b2b-core-components/p-d88113f5.entry.js +1 -0
- package/dist/b2b-core-components/{p-e78f9131.entry.js → p-db92de92.entry.js} +1 -1
- package/dist/b2b-core-components/p-dbf44caf.js +1 -0
- package/dist/b2b-core-components/{p-39a9ff8d.entry.js → p-dcef84a5.entry.js} +1 -1
- package/dist/b2b-core-components/{p-bd567ca9.entry.js → p-e2518c43.entry.js} +1 -1
- package/dist/b2b-core-components/{p-301695a4.entry.js → p-e7590b6e.entry.js} +1 -1
- package/dist/b2b-core-components/p-ed5c6006.entry.js +1 -0
- package/dist/b2b-core-components/{p-11f5ef4c.entry.js → p-ef598009.entry.js} +1 -1
- package/dist/b2b-core-components/{p-ccff4b4e.entry.js → p-f661154c.entry.js} +1 -1
- package/dist/b2b-core-components/{p-9c76af72.entry.js → p-fb0338a8.entry.js} +1 -1
- package/dist/b2b-core-components/{p-fc73eb96.entry.js → p-fc431bbe.entry.js} +1 -1
- package/dist/b2b-core-components/{p-46fc97cc.entry.js → p-fedefca2.entry.js} +1 -1
- package/dist/b2b-core-components/{p-27d8f295.entry.js → p-ff6a0874.entry.js} +1 -1
- package/dist/cjs/b2b-button_2.cjs.entry.js +1 -1
- package/dist/cjs/b2b-chip-component_2.cjs.entry.js +2 -2
- package/dist/cjs/b2b-core-components.cjs.js +1 -1
- package/dist/cjs/b2b-custom-dropdown-option.cjs.entry.js +57 -0
- package/dist/cjs/b2b-custom-dropdown.cjs.entry.js +94 -0
- package/dist/cjs/b2b-date-picker-days_5.cjs.entry.js +9 -9
- package/dist/cjs/b2b-date-picker.cjs.entry.js +5 -21
- package/dist/cjs/b2b-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/b2b-flyout-menu-option.cjs.entry.js +1 -1
- package/dist/cjs/b2b-flyout-menu.cjs.entry.js +5 -23
- package/dist/cjs/b2b-grid-col.cjs.entry.js +1 -1
- package/dist/cjs/b2b-grid-row.cjs.entry.js +2 -2
- package/dist/cjs/b2b-grid.cjs.entry.js +1 -1
- package/dist/cjs/b2b-input-group_2.cjs.entry.js +3 -3
- package/dist/cjs/b2b-input-label.cjs.entry.js +2 -2
- package/dist/cjs/b2b-input_2.cjs.entry.js +5 -5
- package/dist/cjs/b2b-label.cjs.entry.js +2 -2
- package/dist/cjs/b2b-modal.cjs.entry.js +2 -2
- package/dist/cjs/b2b-multiselect-dropdown.cjs.entry.js +8 -20
- package/dist/cjs/b2b-pagination.cjs.entry.js +1 -1
- package/dist/cjs/b2b-paragraph.cjs.entry.js +2 -2
- package/dist/cjs/b2b-progress-bar.cjs.entry.js +3 -3
- package/dist/cjs/b2b-radio-button.cjs.entry.js +2 -2
- package/dist/cjs/b2b-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/b2b-required-separator.cjs.entry.js +1 -1
- package/dist/cjs/b2b-rounded-icon.cjs.entry.js +4 -4
- package/dist/cjs/b2b-scrollable-container.cjs.entry.js +1 -1
- package/dist/cjs/b2b-search.cjs.entry.js +1 -1
- package/dist/cjs/b2b-separator.cjs.entry.js +1 -1
- package/dist/cjs/b2b-shimmer.cjs.entry.js +1 -1
- package/dist/cjs/b2b-snackbar.cjs.entry.js +4 -4
- package/dist/cjs/b2b-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tab.cjs.entry.js +2 -2
- package/dist/cjs/b2b-table-cell_2.cjs.entry.js +3 -3
- package/dist/cjs/b2b-table-row.cjs.entry.js +2 -2
- package/dist/cjs/b2b-table-rowgroup.cjs.entry.js +2 -2
- package/dist/cjs/b2b-table.cjs.entry.js +2 -2
- package/dist/cjs/b2b-textarea.cjs.entry.js +2 -2
- package/dist/cjs/b2b-toggle-button.cjs.entry.js +3 -3
- package/dist/cjs/b2b-toggle-chip.cjs.entry.js +3 -3
- package/dist/cjs/b2b-toggle-group.cjs.entry.js +2 -2
- package/dist/cjs/b2b-toggle-switch.cjs.entry.js +4 -4
- package/dist/cjs/b2b-tooltip.cjs.entry.js +3 -3
- package/dist/cjs/b2b-wizard-icon.cjs.entry.js +1 -1
- package/dist/cjs/b2b-wizard-step.cjs.entry.js +2 -2
- package/dist/cjs/b2b-wizard.cjs.entry.js +1 -1
- package/dist/cjs/index-668808fd.js +12 -4
- package/dist/cjs/json-property-binding-util-f532af53.js +20 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/utils-7919f19f.js +22 -0
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/custom-dropdown/custom-dropdown-option.css +296 -0
- package/dist/collection/components/custom-dropdown/custom-dropdown-option.js +247 -0
- package/dist/collection/components/custom-dropdown/custom-dropdown.css +280 -0
- package/dist/collection/components/custom-dropdown/custom-dropdown.e2e.js +66 -0
- package/dist/collection/components/custom-dropdown/custom-dropdown.js +227 -0
- package/dist/collection/components/custom-dropdown/custom-dropdown.stories.js +197 -0
- package/dist/collection/components/date-picker/date-picker-days-header.js +1 -1
- package/dist/collection/components/date-picker/date-picker-days.js +1 -1
- package/dist/collection/components/date-picker/date-picker-header.js +5 -5
- package/dist/collection/components/date-picker/date-picker-months.js +1 -1
- package/dist/collection/components/date-picker/date-picker-years.js +1 -1
- package/dist/collection/components/date-picker/date-picker.js +5 -21
- package/dist/collection/components/dropdown/dropdown.js +2 -2
- package/dist/collection/components/flyout-menu/flyout-menu-option.js +1 -1
- package/dist/collection/components/flyout-menu/flyout-menu.js +3 -3
- package/dist/collection/components/grid/column.js +1 -1
- package/dist/collection/components/grid/grid.js +1 -1
- package/dist/collection/components/grid/row.js +2 -2
- package/dist/collection/components/input/input.js +4 -4
- package/dist/collection/components/input-group/input-group.js +1 -1
- package/dist/collection/components/input-label/input-label.js +2 -2
- package/dist/collection/components/input-list/input-list-option.js +1 -1
- package/dist/collection/components/input-list/input-list.js +2 -2
- package/dist/collection/components/label/label.js +2 -2
- package/dist/collection/components/modal/modal.js +2 -2
- package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.js +8 -20
- package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.js +2 -2
- package/dist/collection/components/pagination/pagination.js +1 -1
- package/dist/collection/components/paragraph/paragraph.js +2 -2
- package/dist/collection/components/progress-bar/progress-bar.js +3 -3
- package/dist/collection/components/radio/radio.js +2 -2
- package/dist/collection/components/radio-group/radio-group.js +2 -2
- package/dist/collection/components/required-separator/required-separator.js +1 -1
- package/dist/collection/components/rounded-icon/rounded-icon.js +4 -4
- package/dist/collection/components/scrollable-container/scrollable-container.js +1 -1
- package/dist/collection/components/search/search.js +1 -1
- package/dist/collection/components/separator/separator.js +1 -1
- package/dist/collection/components/shimmer/shimmer.js +1 -1
- package/dist/collection/components/snackbar/snackbar.js +4 -4
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-group/tab-group.js +1 -1
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/table/table-cell/table-cell.js +2 -2
- package/dist/collection/components/table/table-header/table-header.js +1 -1
- package/dist/collection/components/table/table-row/table-row.js +2 -2
- package/dist/collection/components/table/table-rowgroup/table-rowgroup.js +2 -2
- package/dist/collection/components/table/table.js +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/toggle-button/toggle-button.js +3 -3
- package/dist/collection/components/toggle-chip/toggle-chip.js +3 -3
- package/dist/collection/components/toggle-group/toggle-group.js +2 -2
- package/dist/collection/components/toggle-switch/toggle-switch.js +4 -4
- package/dist/collection/components/tooltip/tooltip.js +3 -3
- package/dist/collection/components/wizard/wizard-step.js +2 -2
- package/dist/collection/components/wizard/wizard.js +1 -1
- package/dist/collection/components/wizard-icon/wizard-icon.js +1 -1
- package/dist/collection/utils/json-property-binding-util.js +16 -0
- package/dist/components/b2b-background-box.js +1 -51
- package/dist/components/b2b-custom-dropdown-option.d.ts +11 -0
- package/dist/components/b2b-custom-dropdown-option.js +87 -0
- package/dist/components/b2b-custom-dropdown.d.ts +11 -0
- package/dist/components/b2b-custom-dropdown.js +142 -0
- package/dist/components/b2b-date-picker.js +5 -21
- package/dist/components/b2b-dropdown.js +2 -2
- package/dist/components/b2b-flyout-menu-option.js +1 -1
- package/dist/components/b2b-flyout-menu.js +4 -22
- package/dist/components/b2b-grid-col.js +1 -1
- package/dist/components/b2b-grid-row.js +2 -2
- package/dist/components/b2b-grid.js +1 -1
- package/dist/components/b2b-label.js +2 -2
- package/dist/components/b2b-modal.js +2 -2
- package/dist/components/b2b-multiselect-dropdown.js +8 -20
- package/dist/components/b2b-pagination.js +1 -1
- package/dist/components/b2b-paragraph.js +2 -2
- package/dist/components/b2b-progress-bar.js +3 -3
- package/dist/components/b2b-radio-button.js +2 -2
- package/dist/components/b2b-radio-group.js +2 -2
- package/dist/components/b2b-required-separator.js +1 -1
- package/dist/components/b2b-scrollable-container.js +1 -1
- package/dist/components/b2b-search.js +1 -1
- package/dist/components/b2b-shimmer.js +1 -1
- package/dist/components/b2b-snackbar.js +4 -4
- package/dist/components/b2b-tab-group.js +1 -1
- package/dist/components/b2b-tab-panel.js +1 -1
- package/dist/components/b2b-tab.js +2 -2
- package/dist/components/b2b-table-row.js +3 -3
- package/dist/components/b2b-table-rowgroup.js +3 -3
- package/dist/components/b2b-table.js +3 -3
- package/dist/components/b2b-textarea.js +2 -2
- package/dist/components/b2b-toggle-button.js +3 -3
- package/dist/components/b2b-toggle-chip.js +3 -3
- package/dist/components/b2b-toggle-group.js +2 -2
- package/dist/components/b2b-toggle-switch.js +4 -4
- package/dist/components/b2b-tooltip.js +3 -3
- package/dist/components/b2b-wizard-step.js +2 -2
- package/dist/components/b2b-wizard.js +1 -1
- package/dist/components/background-box.js +53 -0
- package/dist/components/date-picker-days-header.js +1 -1
- package/dist/components/date-picker-days.js +1 -1
- package/dist/components/date-picker-header.js +5 -5
- package/dist/components/date-picker-months.js +1 -1
- package/dist/components/date-picker-years.js +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/input-label.js +2 -2
- package/dist/components/input-list-option.js +1 -1
- package/dist/components/input-list.js +2 -2
- package/dist/components/input.js +4 -4
- package/dist/components/json-property-binding-util.js +18 -0
- package/dist/components/multiselect-option.js +2 -2
- package/dist/components/rounded-icon.js +4 -4
- package/dist/components/separator.js +1 -1
- package/dist/components/spinner.js +1 -1
- package/dist/components/table-cell.js +3 -3
- package/dist/components/table-header.js +2 -2
- package/dist/components/utils.js +18 -68
- package/dist/components/utils2.js +70 -0
- package/dist/components/wizard-icon.js +1 -1
- package/dist/custom-elements.json +74 -0
- package/dist/esm/b2b-button_2.entry.js +1 -1
- package/dist/esm/b2b-chip-component_2.entry.js +2 -2
- package/dist/esm/b2b-core-components.js +1 -1
- package/dist/esm/b2b-custom-dropdown-option.entry.js +53 -0
- package/dist/esm/b2b-custom-dropdown.entry.js +90 -0
- package/dist/esm/b2b-date-picker-days_5.entry.js +9 -9
- package/dist/esm/b2b-date-picker.entry.js +5 -21
- package/dist/esm/b2b-dropdown.entry.js +2 -2
- package/dist/esm/b2b-flyout-menu-option.entry.js +1 -1
- package/dist/esm/b2b-flyout-menu.entry.js +4 -22
- package/dist/esm/b2b-grid-col.entry.js +1 -1
- package/dist/esm/b2b-grid-row.entry.js +2 -2
- package/dist/esm/b2b-grid.entry.js +1 -1
- package/dist/esm/b2b-input-group_2.entry.js +3 -3
- package/dist/esm/b2b-input-label.entry.js +2 -2
- package/dist/esm/b2b-input_2.entry.js +5 -5
- package/dist/esm/b2b-label.entry.js +2 -2
- package/dist/esm/b2b-modal.entry.js +2 -2
- package/dist/esm/b2b-multiselect-dropdown.entry.js +8 -20
- package/dist/esm/b2b-pagination.entry.js +1 -1
- package/dist/esm/b2b-paragraph.entry.js +2 -2
- package/dist/esm/b2b-progress-bar.entry.js +3 -3
- package/dist/esm/b2b-radio-button.entry.js +2 -2
- package/dist/esm/b2b-radio-group.entry.js +2 -2
- package/dist/esm/b2b-required-separator.entry.js +1 -1
- package/dist/esm/b2b-rounded-icon.entry.js +4 -4
- package/dist/esm/b2b-scrollable-container.entry.js +1 -1
- package/dist/esm/b2b-search.entry.js +1 -1
- package/dist/esm/b2b-separator.entry.js +1 -1
- package/dist/esm/b2b-shimmer.entry.js +1 -1
- package/dist/esm/b2b-snackbar.entry.js +4 -4
- package/dist/esm/b2b-tab-group.entry.js +1 -1
- package/dist/esm/b2b-tab-panel.entry.js +1 -1
- package/dist/esm/b2b-tab.entry.js +2 -2
- package/dist/esm/b2b-table-cell_2.entry.js +3 -3
- package/dist/esm/b2b-table-row.entry.js +2 -2
- package/dist/esm/b2b-table-rowgroup.entry.js +2 -2
- package/dist/esm/b2b-table.entry.js +2 -2
- package/dist/esm/b2b-textarea.entry.js +2 -2
- package/dist/esm/b2b-toggle-button.entry.js +3 -3
- package/dist/esm/b2b-toggle-chip.entry.js +3 -3
- package/dist/esm/b2b-toggle-group.entry.js +2 -2
- package/dist/esm/b2b-toggle-switch.entry.js +4 -4
- package/dist/esm/b2b-tooltip.entry.js +3 -3
- package/dist/esm/b2b-wizard-icon.entry.js +1 -1
- package/dist/esm/b2b-wizard-step.entry.js +2 -2
- package/dist/esm/b2b-wizard.entry.js +1 -1
- package/dist/esm/index-ab9eb36d.js +12 -4
- package/dist/esm/json-property-binding-util-5513739e.js +18 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/utils-17e4d283.js +20 -0
- package/dist/types/components/custom-dropdown/custom-dropdown-option.d.ts +29 -0
- package/dist/types/components/custom-dropdown/custom-dropdown.d.ts +29 -0
- package/dist/types/components/custom-dropdown/custom-dropdown.stories.d.ts +12 -0
- package/dist/types/components/date-picker/date-picker.d.ts +0 -1
- package/dist/types/components/multiselect-dropdown/multiselect-dropdown.d.ts +0 -1
- package/dist/types/components.d.ts +157 -0
- package/dist/types/utils/json-property-binding-util.d.ts +1 -0
- package/dist/web-types.json +176 -1
- package/package.json +2 -2
- package/dist/b2b-core-components/p-383d0a10.entry.js +0 -1
- package/dist/b2b-core-components/p-3845cd27.entry.js +0 -1
- package/dist/b2b-core-components/p-400fa973.entry.js +0 -1
- package/dist/b2b-core-components/p-ca46f7fe.entry.js +0 -1
- package/dist/b2b-core-components/p-cfc55372.entry.js +0 -1
- package/dist/b2b-core-components/p-db205434.entry.js +0 -1
- package/dist/b2b-core-components/p-f5786cad.entry.js +0 -1
|
@@ -1,23 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-ab9eb36d.js';
|
|
2
|
-
|
|
3
|
-
function isClickOutside(event, host) {
|
|
4
|
-
let target = event.target;
|
|
5
|
-
const hasShadow = target.shadowRoot != null;
|
|
6
|
-
const composedPath = hasShadow ? event.composedPath() : [];
|
|
7
|
-
do {
|
|
8
|
-
if (target === host) {
|
|
9
|
-
return false;
|
|
10
|
-
}
|
|
11
|
-
if (hasShadow) {
|
|
12
|
-
// @ts-ignore
|
|
13
|
-
target = composedPath.shift();
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
target = target.parentNode;
|
|
17
|
-
}
|
|
18
|
-
} while (Boolean(target));
|
|
19
|
-
return true;
|
|
20
|
-
}
|
|
2
|
+
import { i as isClickOutside } from './utils-17e4d283.js';
|
|
21
3
|
|
|
22
4
|
const flyoutMenuCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-flyout-menu{position:relative;display:inline !important;}.b2b-flyout-menu__trigger{cursor:pointer;display:inline}.b2b-flyout-menu__trigger:focus{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px;z-index:9999}.b2b-flyout-menu .b2b-flyout-menu__options__container{background-color:var(--b2b-color-white-100);display:none;width:max-content;box-shadow:0 0 5px rgba(0, 0, 0, 0.2);font-size:var(--b2b-size-copy-100);font-family:var(--b2b-font-family-default);margin:0.75rem 0 0;position:absolute;right:-0.625rem;text-align:left;z-index:1100;line-height:var(--b2b-size-copy-line-height-100);padding:var(--b2b-size-10) 0}.b2b-flyout-menu .b2b-flyout-menu__options__container--on{display:block}.b2b-flyout-menu__arrow{bottom:100%;height:0.625rem;overflow:hidden;position:absolute;right:0;transform:translateX(-0.75rem);width:1.25rem;z-index:1001}.b2b-flyout-menu__arrow::after{background:var(--b2b-color-white-100);box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.2);content:\"\";height:0.875rem;position:absolute;transform:translateX(3px) translateY(3px) rotate(45deg);width:0.875rem}.b2b-flyout-menu .purge-css-include-variables{border-radius:var(--b2b-border-radius);border-right:var(--b2b-border-right);cursor:var(--b2b-icon-cursor)}.b2b-flyout-menu__option{display:block;padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-bottom:1px solid transparent;cursor:pointer}.b2b-flyout-menu__option--separator{border-bottom:1px solid var(--b2b-color-grey-200)}.b2b-flyout-menu__option:hover,.b2b-flyout-menu__option:focus{background-color:var(--b2b-color-hover-default);outline:none}.b2b-flyout-menu__option--disabled{pointer-events:none;color:var(--b2b-color-grey-200)}";
|
|
23
5
|
const B2bFlyoutMenuStyle0 = flyoutMenuCss;
|
|
@@ -167,12 +149,12 @@ const FlyoutMenuComponent = class {
|
|
|
167
149
|
options[index].focus();
|
|
168
150
|
}
|
|
169
151
|
render() {
|
|
170
|
-
return (h(Host, { key: '
|
|
152
|
+
return (h(Host, { key: '5d9a147f1998a47c761af924c90da4b1f8c6ded1' }, h("div", { key: '1ae6d3742d1614e8a259b0a53f7b944d19c441db', class: {
|
|
171
153
|
'b2b-flyout-menu': true,
|
|
172
|
-
} }, h("div", { key: '
|
|
154
|
+
} }, h("div", { key: '7cd8b06ad714085def1431404dea0aca959eb96d', class: "b2b-flyout-menu__trigger" }, h("slot", { key: 'c0295db03bf2d77ae8ecea387c41cc2fb69ea0e1', name: "trigger" })), h("div", { key: '8eabaac43b7e03e0116e4079f1c27cd7bde14929', onFocusout: this.blurMenu, class: {
|
|
173
155
|
'b2b-flyout-menu__options__container': true,
|
|
174
156
|
'b2b-flyout-menu__options__container--on': this.opened,
|
|
175
|
-
} }, h("div", { key: '
|
|
157
|
+
} }, h("div", { key: '1646d526780846355dfd56856aa95bc0c4b43460', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'bae26a650e0e506ddc5e9cd791db3767056af9f4', name: "option" })))));
|
|
176
158
|
}
|
|
177
159
|
get hostElement() { return getElement(this); }
|
|
178
160
|
};
|
|
@@ -15,7 +15,7 @@ const B2bGridColumnComponent = class {
|
|
|
15
15
|
this.textAlign = 'left';
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: 'c934cbf6e57af0dd3be40e2149f49adb2802c1f4', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'affb02d8aeefc039ce0a5d8fd2e290e376c8fc3d' })));
|
|
19
19
|
}
|
|
20
20
|
get hostElement() { return getElement(this); }
|
|
21
21
|
};
|
|
@@ -68,7 +68,7 @@ const B2bGridRowComponent = class {
|
|
|
68
68
|
});
|
|
69
69
|
}
|
|
70
70
|
render() {
|
|
71
|
-
return (h(Host, { key: '
|
|
71
|
+
return (h(Host, { key: '48eccc3f2f29de4a533859834065717ad6b58238', style: {
|
|
72
72
|
['justify-content']: `${this.justify}`,
|
|
73
73
|
['gap']: `${this.columnGap}px`,
|
|
74
74
|
['margin']: `${this.rowGap}px 0`,
|
|
@@ -76,7 +76,7 @@ const B2bGridRowComponent = class {
|
|
|
76
76
|
['display']: 'flex',
|
|
77
77
|
['flex-wrap']: 'wrap',
|
|
78
78
|
['box-sizing']: 'border-box',
|
|
79
|
-
} }, h("slot", { key: '
|
|
79
|
+
} }, h("slot", { key: 'b814a34254890bde8a7690c9fa58bc42b3f8d35d' })));
|
|
80
80
|
}
|
|
81
81
|
get hostElement() { return getElement(this); }
|
|
82
82
|
};
|
|
@@ -9,7 +9,7 @@ const B2bGridComponent = class {
|
|
|
9
9
|
this.margin = 24;
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '3f706955f934472664948d8653a86d3ac898e3d1', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'a0ac4c214a5bf2f169c2adee55131e785324a7ff' })));
|
|
13
13
|
}
|
|
14
14
|
get hostElement() { return getElement(this); }
|
|
15
15
|
};
|
|
@@ -61,7 +61,7 @@ const B2BInputGroup = class {
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
64
|
+
return (h(Host, { key: '57a5aa8deaadb27c20de3771a232833ae95e82a4' }, h("div", { key: 'fd0c4bc60e08a60fe6b5abc93bdac9219c41b09c', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '36cd34bf6b4aa62c2f544d0329d9c95f3d70259d', name: "start" }), h("slot", { key: 'a32cec43572ec254a0eb91e09bc8136984f8143f' }), h("slot", { key: '7b99a7c32bc2c54e1400d90d947df0c63920b243', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
|
|
65
65
|
'b2b-input-wrapper__hint': true,
|
|
66
66
|
'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
|
|
67
67
|
} }, this.invalid && !this.disabled ? this.error : this.hint))));
|
|
@@ -217,13 +217,13 @@ const InputListComponent = class {
|
|
|
217
217
|
*/
|
|
218
218
|
render() {
|
|
219
219
|
const groupOrderClass = this.getGroupOrderClassName() || '';
|
|
220
|
-
return (h(Host, { key: '
|
|
220
|
+
return (h(Host, { key: '0ff3040354f57d752194f6f37795d2242e9ece5c', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '92ca26fa99608f371a3bee1e25977887bc22bb63', class: {
|
|
221
221
|
'b2b-input-list': true,
|
|
222
222
|
'b2b-input-list__options-on': this.hasOptionList &&
|
|
223
223
|
this.isElementFocused &&
|
|
224
224
|
Boolean(this.value),
|
|
225
225
|
[groupOrderClass]: true,
|
|
226
|
-
} }, h("b2b-input", { key: '
|
|
226
|
+
} }, h("b2b-input", { key: '2d91287804fb835406c87bbc184da9c715820a61', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
|
|
227
227
|
}
|
|
228
228
|
get hostElement() { return getElement(this); }
|
|
229
229
|
static get watchers() { return {
|
|
@@ -10,11 +10,11 @@ const InputLabelComponent = class {
|
|
|
10
10
|
this.disabled = false;
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '1fd715c6e6929bf14631434e54112ae7dadcc9d4' }, h("label", { key: 'fc0fb3b130825b9ba41b9ed1a1b007010091065e', class: {
|
|
14
14
|
'b2b-input-label': true,
|
|
15
15
|
'b2b-input-label--required': this.required,
|
|
16
16
|
'b2b-input-label--disabled': this.disabled,
|
|
17
|
-
} }, h("slot", { key: '
|
|
17
|
+
} }, h("slot", { key: 'c811d6c50bd4e5284c48a94dab49bed8c26f29cb' }))));
|
|
18
18
|
}
|
|
19
19
|
get hostElement() { return getElement(this); }
|
|
20
20
|
};
|
|
@@ -105,18 +105,18 @@ const InputComponent = class {
|
|
|
105
105
|
this.filterHintSlotContent();
|
|
106
106
|
}
|
|
107
107
|
render() {
|
|
108
|
-
return (h(Host, { key: '
|
|
108
|
+
return (h(Host, { key: 'f24ddfd309213b97dde35beafeafe167164fab05', class: {
|
|
109
109
|
'b2b-input': true,
|
|
110
110
|
'b2b-input--error': this.invalid && !this.disabled,
|
|
111
|
-
} }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '
|
|
111
|
+
} }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '65948e5a8bf67ea0f2bf2e9a56af1e9211b854a7', class: {
|
|
112
112
|
'b2b-input__wrapper': true,
|
|
113
113
|
'b2b-input__wrapper--focused': this.hasFocus,
|
|
114
114
|
'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
|
|
115
|
-
} }, h("slot", { key: '
|
|
115
|
+
} }, h("slot", { key: '2b8a7cc9ddd4457b9c833a04a5201912147958d8', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'fd07b1da34c8d628521ebc59a5d8e2d279a167ba', class: {
|
|
116
116
|
'b2b-input__native-input': true,
|
|
117
117
|
['b2b-input__native-input--align-' + this.inputTextAlign]: true,
|
|
118
118
|
'b2b-input__native-input--disabled': this.disabled,
|
|
119
|
-
}, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '
|
|
119
|
+
}, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '1147f2bdf14ade737b8e3e02d03dea9424aef1e9', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
|
|
120
120
|
(!this.invalid || this.disabled) ? (h("span", null, h("slot", { name: "hint" }, this.hint))) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
|
|
121
121
|
}
|
|
122
122
|
get hostElement() { return getElement(this); }
|
|
@@ -141,7 +141,7 @@ const InputListOptionComponent = class {
|
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
render() {
|
|
144
|
-
return (h(Host, { key: '
|
|
144
|
+
return (h(Host, { key: '8a38a1768fad0607a658270145dd8f265987982c', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
|
|
145
145
|
}
|
|
146
146
|
};
|
|
147
147
|
InputListOptionComponent.style = B2bInputListOptionStyle0;
|
|
@@ -9,10 +9,10 @@ const LabelComponent = class {
|
|
|
9
9
|
this.type = 'neutral';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h("span", { key: '
|
|
12
|
+
return (h("span", { key: '8c2d58fc6dc0f07f81e68263300772fdd80b107b', class: {
|
|
13
13
|
'b2b-label': true,
|
|
14
14
|
[`b2b-label--${this.type}`]: true,
|
|
15
|
-
} }, h("slot", { key: '
|
|
15
|
+
} }, h("slot", { key: '6c2f5acd1e5b3b5f938617b605aa28f0e808cbce' })));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
LabelComponent.style = B2bLabelStyle0;
|
|
@@ -206,10 +206,10 @@ const ModalComponent = class {
|
|
|
206
206
|
this.attemptFocus(this.getFirstFocusableElement());
|
|
207
207
|
}
|
|
208
208
|
render() {
|
|
209
|
-
return (h(Host, { key: '
|
|
209
|
+
return (h(Host, { key: '86f6276caa0969c0774d0280ff201520d0f196b0' }, h("div", { key: '3b13f9a8ae037d37cba280d5c51b0845be9d73ca', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'cb900ff72552157d2d5ef0678785149703b3cb75', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '407944b6f4f9e1bf2b6503263bd433b78bd76dd4', class: {
|
|
210
210
|
'b2b-modal__dialog': true,
|
|
211
211
|
[`b2b-modal__dialog--${this.variant}`]: true,
|
|
212
|
-
} }, h("div", { key: '
|
|
212
|
+
} }, h("div", { key: 'a92940bc841a6c1c3da7020ab4c23c0462f1efed', class: "b2b-modal__dialog__header" }, h("div", { key: 'fb9345d8d4b2186a64693d62bb28d111dbdb0668', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: '5cb0366f501859821afbeb251dee93042fc411b1', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '9069aa74363dd8e77ca0e25331c8e17c173a0704', name: "header-icon" })), h("div", { key: '9cbb5673e12e4fcca0ecf3415332d2e08440ff65', class: "b2b-modal__dialog__header-right" }, h("button", { key: '8548eed3ba5972a025dec1a82890229d6d2d2222', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: '47a7ca18a7d53a7e0580156fba3e5bd6767bed1a', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'de41ddf14b257c8f3775c8496b033ce8cf5930b8', class: "b2b-modal__dialog__body" }, h("slot", { key: 'd2ecc0d873fede8286c73bced27b8037083595d2' })), h("div", { key: '918d7224c0e4e5039c3882307e204576d419fd16', class: "b2b-modal__dialog__footer" }, h("div", { key: '01827c54ed56fc4bb57c3dedc0d73cd7ea5c7221', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '333630a7d42220f17d0503f732275d5e54258dce', name: "footer-left" })), h("div", { key: '8673cc883110f6d45965a7061163bcd1b5d33bfb', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '1e6fd4feba579586186d4d1f755bc9682a80a899', name: "footer-right" })))), h("div", { key: 'a42f949568f0503bd0037d840c91a8005814a8a2', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '051c47c640c2d4b5d5767db1eabb2e506eabfb5a', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
|
|
213
213
|
}
|
|
214
214
|
get hostElement() { return getElement(this); }
|
|
215
215
|
static get watchers() { return {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ab9eb36d.js';
|
|
2
|
+
import { p as parsePropToArray } from './json-property-binding-util-5513739e.js';
|
|
2
3
|
|
|
3
4
|
const multiselectDropdownCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{width:100%}:host b2b-input-label{margin-bottom:var(--b2b-size-5);display:block}:host span{display:block;color:var(--b2b-color-grey-300);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);font-family:var(--b2b-font-family-default);white-space:normal;overflow-wrap:break-word;max-width:100%}:host .b2b-multiselect-dropdown{position:relative;display:flex;align-items:center;justify-content:space-between;min-width:20rem;overflow:hidden;border:1px solid var(--b2b-color-grey-200);border-radius:var(--b2b-size-border-radius-100);padding:5px var(--b2b-size-20);max-height:104px;background-color:var(--b2b-color-white-100)}:host .b2b-multiselect-dropdown--open{z-index:1001;outline:2px solid -webkit-focus-ring-color;outline-offset:-1px}:host .b2b-multiselect-dropdown--error{border:1px solid var(--b2b-color-error-100);background-color:var(--b2b-color-error-50)}:host .b2b-multiselect-dropdown--focused{z-index:1001;outline:2px solid var(--b2b-color-error-100);outline-offset:-1px}:host .b2b-multiselect-dropdown__chip-container{display:flex;flex-flow:row wrap;align-items:center;gap:4px 0;width:calc(100% - 24px);padding:var(--b2b-size-1) 0}:host .b2b-multiselect-dropdown__placeholder{display:inline-flex;align-items:center;height:auto;line-height:normal;font-size:var(--b2b-size-copy-100);font-family:var(--b2b-font-family-default);color:var(--b2b-color-black-100);user-select:none;cursor:default;padding:0;border-radius:var(--b2b-size-border-radius-100)}:host .b2b-multiselect-dropdown__options-container{position:relative;display:none}:host .b2b-multiselect-dropdown__options-container--visible{display:block}:host .b2b-multiselect-dropdown__options{position:absolute;width:100%;max-height:312px;overflow-y:auto;margin:0;background-color:var(--b2b-color-white-100);border-right:var(--b2b-size-1) solid var(--b2b-color-black-100);border-left:var(--b2b-size-1) solid var(--b2b-color-black-100);border-bottom:var(--b2b-size-1) solid var(--b2b-color-black-100);border-top:2px none -webkit-focus-ring-color;box-sizing:border-box;z-index:1001}:host .b2b-multiselect-dropdown__option__search{width:100%}:host .b2b-multiselect-dropdown__option__search__input{width:calc(100% - 16px);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);font-family:var(--b2b-font-family-default);outline:none;border-bottom:1px solid var(--b2b-color-grey-200);border-top:0;border-left:0;border-right:0;padding:8px 8px 10px}:host .b2b-multiselect-dropdown__option__select-all{border-bottom:1px solid var(--b2b-color-grey-200)}:host .b2b-multiselect-dropdown__option__show-more-button{cursor:pointer}:host .b2b-multiselect-dropdown--disabled{color:var(--b2b-color-grey-250);background-color:var(--b2b-color-grey-25);border:1px solid var(--b2b-color-grey-200);cursor:not-allowed;pointer-events:none}:host .b2b-multiselect-dropdown--disabled .b2b-multiselect-dropdown__chip-container{opacity:0.5}:host .b2b-multiselect-dropdown--disabled .b2b-multiselect-dropdown__placeholder{color:var(--b2b-color-grey-300)}:host .b2b-multiselect-dropdown__error-message{margin-top:var(--b2b-size-7);color:var(--b2b-color-error-100);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);font-family:var(--b2b-font-family-default);display:block}:host .b2b-multiselect-dropdown__hint{margin-top:var(--b2b-size-7);font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);font-family:var(--b2b-font-family-default);display:block}";
|
|
4
5
|
const B2bMultiselectDropdownStyle0 = multiselectDropdownCss;
|
|
@@ -155,28 +156,15 @@ const B2bMultiSelectDropdown = class {
|
|
|
155
156
|
this.isOpen = false;
|
|
156
157
|
this.hasOptionList = this.optionsList.length > 0;
|
|
157
158
|
}
|
|
158
|
-
parsePropToArray(value) {
|
|
159
|
-
if (Array.isArray(value))
|
|
160
|
-
return value;
|
|
161
|
-
try {
|
|
162
|
-
return JSON.parse(value);
|
|
163
|
-
}
|
|
164
|
-
catch (_a) {
|
|
165
|
-
return value
|
|
166
|
-
.split(',')
|
|
167
|
-
.map(v => v.trim())
|
|
168
|
-
.filter(Boolean);
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
159
|
componentWillLoad() {
|
|
172
|
-
this.selectedValues =
|
|
173
|
-
this.optionsList =
|
|
160
|
+
this.selectedValues = parsePropToArray(this.selectedValues);
|
|
161
|
+
this.optionsList = parsePropToArray(this.optionsList);
|
|
174
162
|
this.currentList = this.optionsList;
|
|
175
163
|
this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
|
|
176
164
|
}
|
|
177
165
|
/** Needed to trigger a re-render for async data */
|
|
178
166
|
watchPropHandler(newList) {
|
|
179
|
-
this.optionsList =
|
|
167
|
+
this.optionsList = parsePropToArray(newList);
|
|
180
168
|
this.hasOptionList = this.optionsList.length > 0;
|
|
181
169
|
if (this.hasOptionList) {
|
|
182
170
|
this.currentList = this.optionsList;
|
|
@@ -185,7 +173,7 @@ const B2bMultiSelectDropdown = class {
|
|
|
185
173
|
}
|
|
186
174
|
/** Needed to trigger a re-render for async data */
|
|
187
175
|
handleSelectedValuesChangeFromOutside(newVal) {
|
|
188
|
-
this.selectedValues =
|
|
176
|
+
this.selectedValues = parsePropToArray(newVal);
|
|
189
177
|
this.currentSelectedValues = this.selectedValues.filter(val => this.optionsList.includes(val));
|
|
190
178
|
}
|
|
191
179
|
handleSelectedValuesChange(newValues) {
|
|
@@ -197,16 +185,16 @@ const B2bMultiSelectDropdown = class {
|
|
|
197
185
|
this.updateSelectAll(options);
|
|
198
186
|
}
|
|
199
187
|
render() {
|
|
200
|
-
return (h(Host, { key: '
|
|
188
|
+
return (h(Host, { key: '964bdaefbeef0b8f9f29be1f2e76b795b95ba17e', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '88ab1efa48ac4ecb42c88ac35e6edbb2ad08ece2', required: this.required }, this.label), h("div", { key: '5befcc8a885278bac7f00a7407d25ff738b52366', class: {
|
|
201
189
|
'b2b-multiselect-dropdown': true,
|
|
202
190
|
'b2b-multiselect-dropdown--open': this.isOpen,
|
|
203
191
|
'b2b-multiselect-dropdown--error': this.invalid && !this.disabled,
|
|
204
192
|
'b2b-multiselect-dropdown--disabled': this.disabled,
|
|
205
193
|
'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
|
|
206
|
-
}, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen), "aria-expanded": this.isElementFocused }, h("div", { key: '
|
|
194
|
+
}, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen), "aria-expanded": this.isElementFocused }, h("div", { key: 'a0e37fe748d07f62fe0e2c1976369eb7ddcecbe9', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: 'c6ffcd302b797626eca29c0ae2876d5bedc1b41f', icon: "b2b_icon-arrow-down" })), h("div", { key: '7ceeb281cf01a1bc526c9d0b6d6c1c0d3c1bca9a', class: {
|
|
207
195
|
'b2b-multiselect-dropdown__options-container': true,
|
|
208
196
|
'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
|
|
209
|
-
} }, h("div", { key: '
|
|
197
|
+
} }, h("div", { key: '6c44f49ba781b31ed5bdcfad9e4c571e5bbdc871', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '07c1bc3b8acb485632e76ae2f688ea9b6647d94b', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '9264228fda064567ee88f3b26e953ef4bc4071b8', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '461fc919fecefa0bcbf7ef3adc54ed78e827f8fb', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
|
|
210
198
|
this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option }))))), (this.hint !== undefined && !this.invalid) ||
|
|
211
199
|
(this.hint !== undefined && this.disabled) ? (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)) : (''), this.errorMessage !== undefined && this.invalid && !this.disabled ? (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage)) : ('')));
|
|
212
200
|
}
|
|
@@ -97,7 +97,7 @@ const PaginationComponent = class {
|
|
|
97
97
|
};
|
|
98
98
|
}
|
|
99
99
|
render() {
|
|
100
|
-
return (h("nav", { key: '
|
|
100
|
+
return (h("nav", { key: '85ed17dc25a803e800888a084e3b99a663bb3e0a' }, h("ol", { key: '544841f818e07f5091abb05dbb98e46b8b26fa07', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, "\u2039" /* PaginationConstants.BACK */))), this.navItems.map((navItem, index) => {
|
|
101
101
|
const isItemActive = this.activePage === navItem;
|
|
102
102
|
return (h("li", { class: this.getItemClass(navItem) }, h("b2b-button", { onClick: () => this.setSelectedPage(navItem, index), active: isItemActive, disabled: isItemActive, size: "50", variant: "secondary" }, navItem)));
|
|
103
103
|
}), this.activePage !== this.totalPages && (h("li", { class: "b2b-pagination--next" }, h("b2b-button", { onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, "\u203A" /* PaginationConstants.NEXT */))))));
|
|
@@ -14,7 +14,7 @@ const ParagraphComponent = class {
|
|
|
14
14
|
this.display = 'block';
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h("p", { key: '
|
|
17
|
+
return (h("p", { key: 'e34be906b02a82e422ecd49ccd6adf15d1744897', style: {
|
|
18
18
|
display: this.display,
|
|
19
19
|
}, class: {
|
|
20
20
|
'b2b-paragraph': true,
|
|
@@ -23,7 +23,7 @@ const ParagraphComponent = class {
|
|
|
23
23
|
['b2b-paragraph--align-' + this.align]: true,
|
|
24
24
|
['b2b-paragraph--no-margin']: !this.margin,
|
|
25
25
|
['b2b-paragraph--variant-' + this.variant]: true,
|
|
26
|
-
} }, h("slot", { key: '
|
|
26
|
+
} }, h("slot", { key: '3af5b741adf391a40b7a5e08d33cb04c5ab30ad7' })));
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
ParagraphComponent.style = B2bParagraphStyle0;
|
|
@@ -22,11 +22,11 @@ const ProgressBarComponent = class {
|
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
24
|
const labelExists = this.label !== undefined && this.label !== '';
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '26303d337146025b9a77d20c030065275f47b31d' }, h("div", { key: 'a005917216bb9d16cf8c33c40c8eb86c35bbf2f6', class: {
|
|
26
26
|
[`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
|
|
27
|
-
} }, h("div", { key: '
|
|
27
|
+
} }, h("div", { key: 'afbd557e3f2650016ad6c185c0192d34e5b5741a', class: "b2b-progress-bar__wrapper" }, h("div", { key: '94c2a19e96ed5b4060946893e6f42c74b488aaea', class: "b2b-progress-bar__progress", style: {
|
|
28
28
|
width: `${this.getProgress()}%`,
|
|
29
|
-
} })), h("div", { key: '
|
|
29
|
+
} })), h("div", { key: '859d78ef40b96e6fe170ffb0c7dc790f7811d002', class: {
|
|
30
30
|
'b2b-progress-bar__label': labelExists,
|
|
31
31
|
'b2b-progress-bar__label-none': !labelExists,
|
|
32
32
|
[`b2b-progress-bar__label__${this.labelPosition}-${this.labelType}`]: labelExists,
|
|
@@ -61,11 +61,11 @@ const B2bRadioButtonComponent = class {
|
|
|
61
61
|
return Array.from(document.querySelectorAll(`b2b-radio-button[name="${this.name}"]`)).filter((radio) => radio.value !== this.value);
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
64
|
+
return (h(Host, { key: 'a95ee91fc3410f85abc9898a2488b6999bff6ef7', onClick: this.onClick }, h("div", { key: 'e458b345dd6f1a3759e82d1e2bcc08ffd6486848', class: {
|
|
65
65
|
'b2b-radio': true,
|
|
66
66
|
'b2b-radio--error': this.invalid && !this.disabled,
|
|
67
67
|
'b2b-radio--disabled': this.disabled,
|
|
68
|
-
} }, h("div", { key: '
|
|
68
|
+
} }, h("div", { key: 'fee31d517e56f603b49a668705b18825518b5acd', class: "b2b-radio-items" }, h("input", { key: 'ac5279b2ce604c520345896076900f63500beb20', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '222d5dd63cb02426b6b4a2e2d072fbb49dfe46d4', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '047ac0baf8984ea6ff0d098ea5874ab0bf03c6fa', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
|
|
69
69
|
(this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
|
|
70
70
|
}
|
|
71
71
|
get host() { return getElement(this); }
|
|
@@ -73,11 +73,11 @@ const RadioButtonGroupComponent = class {
|
|
|
73
73
|
this.removeChildText();
|
|
74
74
|
}
|
|
75
75
|
render() {
|
|
76
|
-
return (h(Host, { key: '
|
|
76
|
+
return (h(Host, { key: '2f7d02a11bd8ef158aa3a50483b530dc75f55cdc' }, h("div", { key: '15be31753d13efc5677a1f5e75d5cb66643222b6', class: {
|
|
77
77
|
'b2b-radio-group': true,
|
|
78
78
|
'b2b-radio-group--error': this.invalid && !this.disabled,
|
|
79
79
|
[`b2b-radio-group--${this.alignment}`]: true,
|
|
80
|
-
} }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: '
|
|
80
|
+
} }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: 'ba13a4ee078874c74d24d3ef46f1b6c6b4aa0ff0' }, h("div", { key: '412c32c37064d4418a5149f6190f830902ba8310', class: "b2b-radio-group-options" }, h("slot", { key: '8a54755d559c188d07eb32cbe9839a5c3c2a974f' }))), (this.hint !== undefined && !this.invalid) ||
|
|
81
81
|
(this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
|
|
82
82
|
}
|
|
83
83
|
get host() { return getElement(this); }
|
|
@@ -9,7 +9,7 @@ const B2BRequiredSeparator = class {
|
|
|
9
9
|
this.label = 'Pflichtfeld';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '1288dd4226f5d951717a306db2557f7dd4dbb4fd' }, h("div", { key: '34cc56445d5bf7c93ba9e522d269cb6d5b337792', class: "b2b-required-separator__label" }, h("span", { key: '8ecc6fb192884982dcc7f16c8db1302bc2ceddcb', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '5e40bc2d53b13708ca546e4fb5a7e4816601c3d1' }, this.label)), h("b2b-separator", { key: '3494da2d3740ff18a322d28ca112fe4339862605' })));
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
B2BRequiredSeparator.style = B2bRequiredSeparatorStyle0;
|
|
@@ -11,16 +11,16 @@ const RoundedIconComponent = class {
|
|
|
11
11
|
this.contentColor = 'var(--b2b-color-copy-default)';
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: '366b1c49bb56404825f131381b56a15daa457bfe' }, h("div", { key: 'f7a087f49858502bb7d74276d601c8a42e2215c0', style: {
|
|
15
15
|
['background-color']: this.color,
|
|
16
16
|
['border']: `1px solid ${this.borderColor || this.color}`,
|
|
17
17
|
}, class: {
|
|
18
18
|
'b2b-rounded-icon': true,
|
|
19
|
-
} }, h("div", { key: '
|
|
19
|
+
} }, h("div", { key: '050e8a6d21b27c8fdccfffc021c45080ebdbde7d', style: {
|
|
20
20
|
['color']: this.contentColor,
|
|
21
|
-
} }, h("slot", { key: '
|
|
21
|
+
} }, h("slot", { key: 'ecd49a7ffdf65913edbba010734f522a45ac4096', name: "icon" })), h("div", { key: 'f7e1f7507674a38e7eeebc92f08ea5805400c92f', style: {
|
|
22
22
|
['color']: this.contentColor,
|
|
23
|
-
} }, h("slot", { key: '
|
|
23
|
+
} }, h("slot", { key: '116d9796a00791165984fc71e29aa79d4a9040c1', name: "text" })))));
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
RoundedIconComponent.style = B2bRoundedIconStyle0;
|
|
@@ -8,7 +8,7 @@ const ScrollableContainerComponent = class {
|
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: 'b455812c0f370a849758c9ca169a63b7ecde9bad' }, h("slot", { key: 'cd2c7bf54cedfac2de42f5b248e3279f288e6a3d' })));
|
|
12
12
|
}
|
|
13
13
|
get host() { return getElement(this); }
|
|
14
14
|
};
|
|
@@ -25,7 +25,7 @@ const SearchComponent = class {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
|
-
return (h(Host, { key: '
|
|
28
|
+
return (h(Host, { key: 'a3f42d5d53ac7beeb4c0e241d81271ac2a116fe3' }, h("b2b-input-group", { key: '490be3e7bc4d60b5eba239f754453b2cbe0a6df7', disabled: this.disabled }, h("b2b-input-list", { key: '15a4d81a9bffaa8cd14ffaebe021da90493feb4e', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '06ce3d043b96b282ad3076c9a65fd5e2b4b48b67' })), h("b2b-button", { key: '1a45269314806d9d9cf476db6a08b8d7c14933c8', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '797b412d6bab0104497465a80b1a344dbfa97e75', icon: "b2b_icon-search", clickable: true })))));
|
|
29
29
|
}
|
|
30
30
|
get hostElement() { return getElement(this); }
|
|
31
31
|
};
|
|
@@ -9,7 +9,7 @@ const B2bSeparatorComponent = class {
|
|
|
9
9
|
this.alignment = 'horizontal';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '00b1ecb31c7ca143b3d6c3c1d5bddcc369bde312' }, h("div", { key: 'e29629b7554c21b12af943ae0aaafb936fa36ea6', class: {
|
|
13
13
|
[`b2b-separator--${this.alignment}`]: true,
|
|
14
14
|
} })));
|
|
15
15
|
}
|
|
@@ -15,7 +15,7 @@ const ShimmerComponent = class {
|
|
|
15
15
|
width: `${this.width}px`,
|
|
16
16
|
height: `${this.height}px`,
|
|
17
17
|
};
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: '10ef516c64332313b8915a4bdb43d527eb92c43c' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
ShimmerComponent.style = B2bShimmerStyle0;
|
|
@@ -93,17 +93,17 @@ const SnackbarComponent = class {
|
|
|
93
93
|
clearTimeout(this.timeoutId);
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
|
-
return (h(Host, { key: '
|
|
96
|
+
return (h(Host, { key: '33ace44479760181672e60c0750462c9d8ea60dc', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '1f739551dbbcea7dfa04f2fdf04cfcdeceab4a9f', class: {
|
|
97
97
|
'b2b-snackbar': true,
|
|
98
98
|
[`b2b-snackbar--${this.type}`]: true,
|
|
99
99
|
'b2b-snackbar--opened': this.opened,
|
|
100
|
-
}, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: '
|
|
100
|
+
}, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: 'e5a8aeeb9e550d0ca6b8cb94049dc3d229cb5fdb', class: "b2b-snackbar__content" }, h("span", { key: 'dba27cdd15921dd0aeade5be294f9e92f9c4b024', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '537da669b42397f0b016d2767f9b8b170d333ac3', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
|
|
101
101
|
'b2b-snackbar__action': true,
|
|
102
102
|
[`b2b-snackbar__action--${this.type}`]: true,
|
|
103
|
-
}, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '
|
|
103
|
+
}, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '73fb2d7f257c22f6ac6506dd1e1ed6da6b2e051d', class: {
|
|
104
104
|
'b2b-snackbar__close-icon': true,
|
|
105
105
|
[`b2b-snackbar__close-icon--${this.type}`]: true,
|
|
106
|
-
}, onClick: this.close }, h("b2b-icon-100", { key: '
|
|
106
|
+
}, onClick: this.close }, h("b2b-icon-100", { key: 'ecdba62cbdbca4815cd207fb804341a08c6b76b2', clickable: true, size: 24, icon: "b2b_icon-close" })))));
|
|
107
107
|
}
|
|
108
108
|
static get watchers() { return {
|
|
109
109
|
"opened": ["onVisibleChange"]
|
|
@@ -124,7 +124,7 @@ const B2bTabGroupComponent = class {
|
|
|
124
124
|
});
|
|
125
125
|
}
|
|
126
126
|
render() {
|
|
127
|
-
return (h(Host, { key: '
|
|
127
|
+
return (h(Host, { key: 'c09986eb1b9997eaa4ca37376132ce7d7d5ca855' }, h("slot", { key: '091a1eb4d6c95b5bc0af2eb5d94803068ef7f529', name: "tab" }), h("b2b-separator", { key: '0e2e540da62aa29c9c09e3cb28ade9ebf51e6977' }), h("slot", { key: '0713eab995ff1f9e7a7932b58651799ed3b7c161', name: "panel" })));
|
|
128
128
|
}
|
|
129
129
|
get hostElement() { return getElement(this); }
|
|
130
130
|
};
|
|
@@ -10,7 +10,7 @@ const B2bTabPanelComponent = class {
|
|
|
10
10
|
this.generatedId = i++;
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '895835ee9542f04852f08ed863d9214355741211', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '127afd55dfff1e9642180ee6db0f72e002914a22', class: "b2b-tab-panel" }, h("slot", { key: '199bca30f2cda69bbb63cfbc3f67bce5ba6136fa' }))));
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
B2bTabPanelComponent.style = B2bTabPanelStyle0;
|
|
@@ -23,12 +23,12 @@ const B2bTabComponent = class {
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
return (h(Host, { key: 'b4ed6dd0f35da1b2ac366ab772caa1dc900d4f5e', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: '1bb21fa15b4d7d07b4ef8134b18e8819d1a4a8e4', class: {
|
|
27
27
|
'b2b-tab': true,
|
|
28
28
|
'b2b-tab--selected': this.selected,
|
|
29
29
|
'b2b-tab--disabled': this.disabled,
|
|
30
30
|
'b2b-tab--error': this.invalid,
|
|
31
|
-
} }, h("slot", { key: '
|
|
31
|
+
} }, h("slot", { key: 'b0dfb40b808650b49410a25f2d01a042b27aca16' }))));
|
|
32
32
|
}
|
|
33
33
|
get hostElement() { return getElement(this); }
|
|
34
34
|
static get watchers() { return {
|
|
@@ -40,14 +40,14 @@ const TableCellComponent = class {
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
render() {
|
|
43
|
-
return (h(Host, { key: '
|
|
43
|
+
return (h(Host, { key: '5697dfe2db80803acd704355efc7235022000773', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
|
|
44
44
|
'b2b-table-cell': true,
|
|
45
45
|
['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
|
|
46
46
|
['b2b-table-cell--ellipsis']: this.useTextEllipsis,
|
|
47
47
|
['b2b-table-cell--' + this.align]: true,
|
|
48
48
|
['b2b-table-cell--divider']: this.divider,
|
|
49
49
|
[`b2b-table-cell-color-${this.color}`]: true,
|
|
50
|
-
}, role: "cell" }, h("slot", { key: '
|
|
50
|
+
}, role: "cell" }, h("slot", { key: '3499f59899e1f2e2743252490c522a3fd2ab5ca6' })));
|
|
51
51
|
}
|
|
52
52
|
get host() { return getElement(this); }
|
|
53
53
|
};
|
|
@@ -127,7 +127,7 @@ const TableHeaderComponent = class {
|
|
|
127
127
|
this.setIconPlacement();
|
|
128
128
|
}
|
|
129
129
|
render() {
|
|
130
|
-
return (h(Host, { key: '
|
|
130
|
+
return (h(Host, { key: 'eb2f861c5ff85be7e1f313a1eecdb698e7da2f38', class: {
|
|
131
131
|
[`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
|
|
132
132
|
'b2b-table-header--divider': this.divider,
|
|
133
133
|
[`b2b-table-header--${this.size}`]: true,
|
|
@@ -116,12 +116,12 @@ const TableRowComponent = class {
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
render() {
|
|
119
|
-
return (h(Host, { key: '
|
|
119
|
+
return (h(Host, { key: 'b28513a5d03b1328fbe8d54d35fc45077ae00403', class: {
|
|
120
120
|
'b2b-table-row': true,
|
|
121
121
|
['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
|
|
122
122
|
['b2b-table-row--highlight']: this.highlight,
|
|
123
123
|
[`b2b-table-row--color-${this.getRowColor()}`]: true,
|
|
124
|
-
}, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '
|
|
124
|
+
}, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'eeb52f24d09ea0aa24e36709dcb8bd35de6bd4d5' })));
|
|
125
125
|
}
|
|
126
126
|
get hostElement() { return getElement(this); }
|
|
127
127
|
};
|