@otto-de/b2b-core-components 1.22.0 → 1.23.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.css +1 -1
- package/dist/b2b-core-components/b2b-core-components.esm.js +1 -1
- package/dist/b2b-core-components/p-01aea1a4.entry.js +1 -0
- package/dist/b2b-core-components/p-0f5b8f0f.entry.js +1 -0
- package/dist/b2b-core-components/p-191b7d0b.entry.js +1 -0
- package/dist/b2b-core-components/p-1ac1ed23.entry.js +1 -0
- package/dist/b2b-core-components/p-1cbf75dd.entry.js +1 -0
- package/dist/b2b-core-components/p-247b295d.entry.js +1 -0
- package/dist/b2b-core-components/p-25fa6d92.entry.js +1 -0
- package/dist/b2b-core-components/p-2610db01.entry.js +1 -0
- package/dist/b2b-core-components/p-28674643.entry.js +1 -0
- package/dist/b2b-core-components/p-2a80fb82.entry.js +1 -0
- package/dist/b2b-core-components/p-30dce961.entry.js +1 -0
- package/dist/b2b-core-components/p-333969c9.entry.js +1 -0
- package/dist/b2b-core-components/p-339dd3ba.entry.js +1 -0
- package/dist/b2b-core-components/p-371efcb7.entry.js +1 -0
- package/dist/b2b-core-components/{p-928ab618.entry.js → p-37cdfc83.entry.js} +1 -1
- package/dist/b2b-core-components/p-3caed6e8.entry.js +1 -0
- package/dist/b2b-core-components/p-438ab795.entry.js +1 -0
- package/dist/b2b-core-components/p-44d5a9d3.entry.js +1 -0
- package/dist/b2b-core-components/p-47081742.entry.js +1 -0
- package/dist/b2b-core-components/{p-ffff2d15.entry.js → p-48d75dc1.entry.js} +1 -1
- package/dist/b2b-core-components/p-4cfb4131.entry.js +1 -0
- package/dist/b2b-core-components/p-56293400.entry.js +1 -0
- package/dist/b2b-core-components/p-572f9f64.entry.js +1 -0
- package/dist/b2b-core-components/p-74c0757b.entry.js +1 -0
- package/dist/b2b-core-components/p-8967cc6c.entry.js +1 -0
- package/dist/b2b-core-components/p-8fa70a00.entry.js +1 -0
- package/dist/b2b-core-components/{p-ef01f7b2.entry.js → p-921e7a37.entry.js} +1 -1
- package/dist/b2b-core-components/p-925553cd.entry.js +1 -0
- package/dist/b2b-core-components/p-928e7db4.entry.js +1 -0
- package/dist/b2b-core-components/p-95570f8e.entry.js +1 -0
- package/dist/b2b-core-components/p-95d3519f.entry.js +1 -0
- package/dist/b2b-core-components/p-96968c24.entry.js +1 -0
- package/dist/b2b-core-components/p-96bde9dd.entry.js +1 -0
- package/dist/b2b-core-components/p-992dd377.entry.js +1 -0
- package/dist/b2b-core-components/p-9a6c243e.entry.js +1 -0
- package/dist/b2b-core-components/p-9c055a4e.entry.js +1 -0
- package/dist/b2b-core-components/p-9de02b91.entry.js +1 -0
- package/dist/b2b-core-components/p-a033a6b5.entry.js +1 -0
- package/dist/b2b-core-components/p-a0ab40f0.entry.js +1 -0
- package/dist/b2b-core-components/p-ae71a78f.entry.js +1 -0
- package/dist/b2b-core-components/p-b6916793.entry.js +1 -0
- package/dist/b2b-core-components/p-bf8db809.entry.js +1 -0
- package/dist/b2b-core-components/p-c1135326.entry.js +1 -0
- package/dist/b2b-core-components/p-c3d76d28.entry.js +1 -0
- package/dist/b2b-core-components/{p-212fa6a0.entry.js → p-cab7c805.entry.js} +1 -1
- package/dist/b2b-core-components/p-cc0ad9b7.entry.js +1 -0
- package/dist/b2b-core-components/p-d56a8c1a.entry.js +1 -0
- package/dist/b2b-core-components/p-d895f199.entry.js +1 -0
- package/dist/b2b-core-components/p-e4359302.entry.js +1 -0
- package/dist/b2b-core-components/p-ec4f82b1.entry.js +1 -0
- package/dist/b2b-core-components/p-f6bd827c.entry.js +1 -0
- package/dist/b2b-core-components/p-fbd31067.entry.js +1 -0
- package/dist/b2b-core-components/p-fdfdc92d.entry.js +1 -0
- package/dist/cjs/b2b-alert.cjs.entry.js +4 -4
- package/dist/cjs/b2b-anchor.cjs.entry.js +1 -1
- package/dist/cjs/b2b-background-box.cjs.entry.js +11 -3
- package/dist/cjs/b2b-breadcrumb-item.cjs.entry.js +1 -1
- package/dist/cjs/b2b-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/b2b-button_2.cjs.entry.js +5 -5
- package/dist/cjs/b2b-card.cjs.entry.js +1 -1
- package/dist/cjs/b2b-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/b2b-checkbox.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-date-picker-days_5.cjs.entry.js +9 -9
- package/dist/cjs/b2b-date-picker.cjs.entry.js +3 -3
- package/dist/cjs/b2b-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/b2b-flyout-menu-option.cjs.entry.js +1 -1
- package/dist/cjs/b2b-flyout-menu.cjs.entry.js +1 -1
- package/dist/cjs/b2b-grid-col.cjs.entry.js +7 -18
- package/dist/cjs/b2b-grid-row.cjs.entry.js +33 -2
- package/dist/cjs/b2b-headline.cjs.entry.js +1 -1
- package/dist/cjs/b2b-icon-100.cjs.entry.js +1 -1
- package/dist/cjs/b2b-icon-50.cjs.entry.js +1 -1
- package/dist/cjs/b2b-icon.cjs.entry.js +1 -1
- package/dist/cjs/b2b-input-group_2.cjs.entry.js +3 -3
- package/dist/cjs/b2b-input_2.cjs.entry.js +9 -6
- package/dist/cjs/b2b-label.cjs.entry.js +1 -1
- package/dist/cjs/b2b-modal.cjs.entry.js +2 -2
- package/dist/cjs/b2b-multiselect-dropdown.cjs.entry.js +3 -3
- package/dist/cjs/b2b-pagination.cjs.entry.js +1 -1
- package/dist/cjs/b2b-paragraph.cjs.entry.js +1 -1
- package/dist/cjs/b2b-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/b2b-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/b2b-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/b2b-required-separator.cjs.entry.js +1 -1
- package/dist/cjs/b2b-rounded-icon.cjs.entry.js +1 -1
- 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-snackbar.cjs.entry.js +111 -0
- package/dist/cjs/b2b-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/b2b-tab.cjs.entry.js +3 -3
- package/dist/cjs/b2b-table-cell_2.cjs.entry.js +5 -5
- package/dist/cjs/b2b-table-row.cjs.entry.js +7 -17
- package/dist/cjs/b2b-table-rowgroup.cjs.entry.js +3 -3
- package/dist/cjs/b2b-table.cjs.entry.js +3 -3
- package/dist/cjs/b2b-textarea.cjs.entry.js +3 -3
- package/dist/cjs/b2b-toggle-button.cjs.entry.js +4 -4
- package/dist/cjs/b2b-toggle-chip.cjs.entry.js +6 -7
- package/dist/cjs/b2b-toggle-group.cjs.entry.js +3 -3
- package/dist/cjs/b2b-toggle-switch.cjs.entry.js +5 -5
- package/dist/cjs/b2b-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/b2b-wizard-icon.cjs.entry.js +3 -3
- package/dist/cjs/b2b-wizard-step.cjs.entry.js +3 -3
- package/dist/cjs/b2b-wizard.cjs.entry.js +2 -2
- package/dist/cjs/index-668808fd.js +8 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/alert/alert.css +6 -4
- package/dist/collection/components/alert/alert.e2e.js +2 -2
- package/dist/collection/components/alert/alert.js +3 -3
- package/dist/collection/components/anchor/anchor.css +6 -4
- package/dist/collection/components/background-box/background-box.css +18 -4
- package/dist/collection/components/background-box/background-box.e2e.js +26 -0
- package/dist/collection/components/background-box/background-box.js +82 -2
- package/dist/collection/components/background-box/background-box.spec.js +19 -0
- package/dist/collection/components/background-box/background-box.stories.js +16 -2
- package/dist/collection/components/breadcrumb/breadcrumb.css +6 -4
- package/dist/collection/components/button/button.css +6 -4
- package/dist/collection/components/button/button.e2e.js +2 -2
- package/dist/collection/components/button/button.js +2 -2
- package/dist/collection/components/button/button.stories.js +3 -3
- package/dist/collection/components/card/card.css +6 -4
- package/dist/collection/components/checkbox/checkbox.css +6 -4
- package/dist/collection/components/checkbox-group/checkbox-group.css +6 -4
- package/dist/collection/components/chip/chip.css +6 -4
- package/dist/collection/components/date-picker/date-picker-days-header.css +6 -4
- package/dist/collection/components/date-picker/date-picker-days.css +8 -6
- package/dist/collection/components/date-picker/date-picker-header.css +9 -7
- package/dist/collection/components/date-picker/date-picker-header.js +4 -4
- package/dist/collection/components/date-picker/date-picker-months.css +7 -5
- package/dist/collection/components/date-picker/date-picker-years.css +7 -5
- package/dist/collection/components/date-picker/date-picker.css +6 -4
- package/dist/collection/components/date-picker/date-picker.js +2 -2
- package/dist/collection/components/date-picker/date-picker.stories.js +9 -9
- package/dist/collection/components/dropdown/dropdown.css +6 -4
- package/dist/collection/components/flyout-menu/flyout-menu-option.css +7 -5
- package/dist/collection/components/flyout-menu/flyout-menu.css +7 -5
- package/dist/collection/components/flyout-menu/flyout-menu.e2e.js +6 -6
- package/dist/collection/components/flyout-menu/flyout-menu.stories.js +4 -4
- package/dist/collection/components/grid/column.js +7 -18
- package/dist/collection/components/grid/grid.stories.js +223 -222
- package/dist/collection/components/grid/row.js +33 -2
- package/dist/collection/components/headline/headline.css +6 -4
- package/dist/collection/components/icon/icon.css +6 -4
- package/dist/collection/components/icon-100/icon-100.css +6 -4
- package/dist/collection/components/icon-50/icon-50.css +6 -4
- package/dist/collection/components/input/input.css +6 -4
- package/dist/collection/components/input/input.e2e.js +10 -0
- package/dist/collection/components/input/input.js +7 -4
- package/dist/collection/components/input/input.stories.js +22 -2
- package/dist/collection/components/input-group/input-group.css +6 -4
- package/dist/collection/components/input-group/input-group.e2e.js +1 -1
- package/dist/collection/components/input-group/input-group.stories.js +1 -1
- package/dist/collection/components/input-list/input-list.css +8 -6
- package/dist/collection/components/input-list/input-list.e2e.js +6 -6
- package/dist/collection/components/input-list/input-list.js +1 -1
- package/dist/collection/components/label/label.css +6 -4
- package/dist/collection/components/modal/modal.css +7 -5
- package/dist/collection/components/modal/modal.e2e.js +2 -2
- package/dist/collection/components/modal/modal.js +1 -1
- package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.css +6 -4
- package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.js +2 -2
- package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.css +1 -1
- package/dist/collection/components/pagination/pagination.css +6 -4
- package/dist/collection/components/paragraph/paragraph.css +6 -4
- package/dist/collection/components/progress-bar/progress-bar.css +6 -4
- package/dist/collection/components/radio/radio.css +6 -4
- package/dist/collection/components/radio-group/radio-group.css +6 -4
- package/dist/collection/components/required-separator/required-separator.css +6 -4
- package/dist/collection/components/rounded-icon/rounded-icon.css +6 -4
- package/dist/collection/components/rounded-icon/rounded-icon.stories.js +1 -1
- package/dist/collection/components/scrollable-container/scrollable-container.css +6 -4
- package/dist/collection/components/search/search.js +1 -1
- package/dist/collection/components/search/search.stories.js +1 -1
- package/dist/collection/components/separator/separator.css +6 -4
- package/dist/collection/components/snackbar/snackbar.css +337 -0
- package/dist/collection/components/snackbar/snackbar.e2e.js +63 -0
- package/dist/collection/components/snackbar/snackbar.js +273 -0
- package/dist/collection/components/snackbar/snackbar.stories.js +89 -0
- package/dist/collection/components/spinner/spinner.css +6 -4
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/tab/tab.css +6 -4
- 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-group/tab-group.stories.js +1 -1
- package/dist/collection/components/tab-panel/tab-panel.css +6 -4
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/table/table-cell/table-cell.css +6 -4
- package/dist/collection/components/table/table-cell/table-cell.js +2 -2
- package/dist/collection/components/table/table-header/table-header.css +6 -4
- package/dist/collection/components/table/table-header/table-header.js +1 -1
- package/dist/collection/components/table/table-row/table-row.css +10 -8
- package/dist/collection/components/table/table-row/table-row.js +6 -16
- package/dist/collection/components/table/table-rowgroup/table-rowgroup.css +6 -4
- package/dist/collection/components/table/table-rowgroup/table-rowgroup.js +2 -2
- package/dist/collection/components/table/table.css +6 -4
- package/dist/collection/components/table/table.js +2 -2
- package/dist/collection/components/textarea/textarea.css +6 -4
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/toggle-button/toggle-button.css +6 -4
- package/dist/collection/components/toggle-button/toggle-button.js +3 -3
- package/dist/collection/components/toggle-chip/toggle-chip.css +37 -20
- package/dist/collection/components/toggle-chip/toggle-chip.js +5 -24
- package/dist/collection/components/toggle-chip/toggle-chip.stories.js +51 -0
- package/dist/collection/components/toggle-group/toggle-group.css +6 -4
- package/dist/collection/components/toggle-group/toggle-group.js +2 -2
- package/dist/collection/components/toggle-switch/toggle-switch.css +6 -4
- package/dist/collection/components/toggle-switch/toggle-switch.js +4 -4
- package/dist/collection/components/tooltip/tooltip.css +6 -4
- package/dist/collection/components/tooltip/tooltip.js +3 -3
- package/dist/collection/components/tooltip/tooltip.stories.js +3 -3
- package/dist/collection/components/wizard/wizard-step.js +2 -2
- package/dist/collection/components/wizard/wizard.css +6 -4
- package/dist/collection/components/wizard/wizard.js +1 -1
- package/dist/collection/components/wizard-icon/wizard-icon.css +6 -4
- package/dist/collection/components/wizard-icon/wizard-icon.js +2 -2
- package/dist/components/b2b-alert.js +7 -7
- package/dist/components/b2b-anchor.js +1 -1
- package/dist/components/b2b-background-box.js +16 -4
- package/dist/components/b2b-breadcrumb-item.js +1 -1
- package/dist/components/b2b-breadcrumb.js +1 -1
- package/dist/components/b2b-card.js +1 -1
- package/dist/components/b2b-checkbox-group.js +1 -1
- package/dist/components/b2b-date-picker.js +6 -6
- package/dist/components/b2b-dropdown.js +1 -1
- package/dist/components/b2b-flyout-menu-option.js +1 -1
- package/dist/components/b2b-flyout-menu.js +1 -1
- package/dist/components/b2b-grid-col.js +7 -18
- package/dist/components/b2b-grid-row.js +33 -2
- package/dist/components/b2b-icon-100.js +1 -411
- package/dist/components/b2b-icon-50.js +1 -1
- package/dist/components/b2b-icon.js +444 -1
- package/dist/components/b2b-label.js +1 -1
- package/dist/components/b2b-modal.js +5 -5
- package/dist/components/b2b-multiselect-dropdown.js +6 -6
- package/dist/components/b2b-pagination.js +1 -1
- package/dist/components/b2b-paragraph.js +1 -1
- package/dist/components/b2b-progress-bar.js +1 -1
- package/dist/components/b2b-radio-button.js +1 -1
- package/dist/components/b2b-radio-group.js +1 -1
- package/dist/components/b2b-required-separator.js +1 -1
- package/dist/components/b2b-scrollable-container.js +1 -1
- package/dist/components/b2b-search.js +4 -4
- package/dist/components/b2b-snackbar.d.ts +11 -0
- package/dist/components/b2b-snackbar.js +141 -0
- package/dist/components/b2b-tab-group.js +1 -1
- package/dist/components/b2b-tab-panel.js +2 -2
- package/dist/components/b2b-tab.js +3 -3
- package/dist/components/b2b-table-row.js +10 -20
- package/dist/components/b2b-table-rowgroup.js +3 -3
- package/dist/components/b2b-table.js +3 -3
- package/dist/components/b2b-textarea.js +3 -3
- package/dist/components/b2b-toggle-button.js +4 -4
- package/dist/components/b2b-toggle-chip.js +6 -8
- package/dist/components/b2b-toggle-group.js +3 -3
- package/dist/components/b2b-toggle-switch.js +5 -5
- package/dist/components/b2b-tooltip.js +4 -4
- package/dist/components/b2b-wizard-step.js +6 -6
- package/dist/components/b2b-wizard.js +2 -2
- package/dist/components/button.js +3 -3
- package/dist/components/checkbox.js +1 -1
- package/dist/components/chip.js +1 -1
- 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 +8 -8
- package/dist/components/date-picker-months.js +1 -1
- package/dist/components/date-picker-years.js +1 -1
- package/dist/components/headline.js +1 -1
- package/dist/components/{icon.js → icon-100.js} +23 -56
- package/dist/components/input-group.js +1 -1
- package/dist/components/input-list-option.js +1 -1
- package/dist/components/input-list.js +5 -5
- package/dist/components/input.js +8 -5
- package/dist/components/multiselect-option.js +1 -1
- package/dist/components/rounded-icon.js +1 -1
- package/dist/components/separator.js +1 -1
- package/dist/components/spinner.js +2 -2
- package/dist/components/table-cell.js +3 -3
- package/dist/components/table-header.js +2 -2
- package/dist/components/wizard-icon.js +6 -6
- package/dist/custom-elements.json +99 -12
- package/dist/esm/b2b-alert.entry.js +4 -4
- package/dist/esm/b2b-anchor.entry.js +1 -1
- package/dist/esm/b2b-background-box.entry.js +11 -3
- package/dist/esm/b2b-breadcrumb-item.entry.js +1 -1
- package/dist/esm/b2b-breadcrumb.entry.js +1 -1
- package/dist/esm/b2b-button_2.entry.js +5 -5
- package/dist/esm/b2b-card.entry.js +1 -1
- package/dist/esm/b2b-checkbox-group.entry.js +1 -1
- package/dist/esm/b2b-checkbox.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-date-picker-days_5.entry.js +9 -9
- package/dist/esm/b2b-date-picker.entry.js +3 -3
- package/dist/esm/b2b-dropdown.entry.js +1 -1
- package/dist/esm/b2b-flyout-menu-option.entry.js +1 -1
- package/dist/esm/b2b-flyout-menu.entry.js +1 -1
- package/dist/esm/b2b-grid-col.entry.js +7 -18
- package/dist/esm/b2b-grid-row.entry.js +33 -2
- package/dist/esm/b2b-headline.entry.js +1 -1
- package/dist/esm/b2b-icon-100.entry.js +1 -1
- package/dist/esm/b2b-icon-50.entry.js +1 -1
- package/dist/esm/b2b-icon.entry.js +1 -1
- package/dist/esm/b2b-input-group_2.entry.js +3 -3
- package/dist/esm/b2b-input_2.entry.js +9 -6
- package/dist/esm/b2b-label.entry.js +1 -1
- package/dist/esm/b2b-modal.entry.js +2 -2
- package/dist/esm/b2b-multiselect-dropdown.entry.js +3 -3
- package/dist/esm/b2b-pagination.entry.js +1 -1
- package/dist/esm/b2b-paragraph.entry.js +1 -1
- package/dist/esm/b2b-progress-bar.entry.js +1 -1
- package/dist/esm/b2b-radio-button.entry.js +1 -1
- package/dist/esm/b2b-radio-group.entry.js +1 -1
- package/dist/esm/b2b-required-separator.entry.js +1 -1
- package/dist/esm/b2b-rounded-icon.entry.js +1 -1
- 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-snackbar.entry.js +107 -0
- package/dist/esm/b2b-tab-group.entry.js +1 -1
- package/dist/esm/b2b-tab-panel.entry.js +2 -2
- package/dist/esm/b2b-tab.entry.js +3 -3
- package/dist/esm/b2b-table-cell_2.entry.js +5 -5
- package/dist/esm/b2b-table-row.entry.js +7 -17
- package/dist/esm/b2b-table-rowgroup.entry.js +3 -3
- package/dist/esm/b2b-table.entry.js +3 -3
- package/dist/esm/b2b-textarea.entry.js +3 -3
- package/dist/esm/b2b-toggle-button.entry.js +4 -4
- package/dist/esm/b2b-toggle-chip.entry.js +6 -7
- package/dist/esm/b2b-toggle-group.entry.js +3 -3
- package/dist/esm/b2b-toggle-switch.entry.js +5 -5
- package/dist/esm/b2b-tooltip.entry.js +4 -4
- package/dist/esm/b2b-wizard-icon.entry.js +3 -3
- package/dist/esm/b2b-wizard-step.entry.js +3 -3
- package/dist/esm/b2b-wizard.entry.js +2 -2
- package/dist/esm/index-ab9eb36d.js +8 -4
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/background-box/background-box.d.ts +8 -0
- package/dist/types/components/background-box/background-box.stories.d.ts +1 -0
- package/dist/types/components/grid/grid.stories.d.ts +8 -7
- package/dist/types/components/grid/row.d.ts +2 -0
- package/dist/types/components/input/input.d.ts +2 -0
- package/dist/types/components/input/input.stories.d.ts +1 -0
- package/dist/types/components/snackbar/snackbar.d.ts +36 -0
- package/dist/types/components/snackbar/snackbar.stories.d.ts +9 -0
- package/dist/types/components/table/table-row/table-row.d.ts +0 -2
- package/dist/types/components/toggle-chip/toggle-chip.d.ts +0 -2
- package/dist/types/components/toggle-chip/toggle-chip.stories.d.ts +8 -0
- package/dist/types/components/tooltip/tooltip.stories.d.ts +2 -2
- package/dist/types/components.d.ts +125 -8
- package/dist/web-types.json +143 -11
- package/package.json +2 -2
- package/dist/b2b-core-components/p-01c05f0c.entry.js +0 -1
- package/dist/b2b-core-components/p-029da6d8.entry.js +0 -1
- package/dist/b2b-core-components/p-05ad52a3.entry.js +0 -1
- package/dist/b2b-core-components/p-078a9f04.entry.js +0 -1
- package/dist/b2b-core-components/p-15988a15.entry.js +0 -1
- package/dist/b2b-core-components/p-1930be42.entry.js +0 -1
- package/dist/b2b-core-components/p-19b5503c.entry.js +0 -1
- package/dist/b2b-core-components/p-1c048a27.entry.js +0 -1
- package/dist/b2b-core-components/p-20d53606.entry.js +0 -1
- package/dist/b2b-core-components/p-228e1449.entry.js +0 -1
- package/dist/b2b-core-components/p-232acfe1.entry.js +0 -1
- package/dist/b2b-core-components/p-271d44a7.entry.js +0 -1
- package/dist/b2b-core-components/p-296f824d.entry.js +0 -1
- package/dist/b2b-core-components/p-2bab8c7f.entry.js +0 -1
- package/dist/b2b-core-components/p-2c8f2fa9.entry.js +0 -1
- package/dist/b2b-core-components/p-3665d675.entry.js +0 -1
- package/dist/b2b-core-components/p-3ef45a4b.entry.js +0 -1
- package/dist/b2b-core-components/p-3ffba273.entry.js +0 -1
- package/dist/b2b-core-components/p-48e693a5.entry.js +0 -1
- package/dist/b2b-core-components/p-5958af69.entry.js +0 -1
- package/dist/b2b-core-components/p-5a7e3db7.entry.js +0 -1
- package/dist/b2b-core-components/p-6e031b32.entry.js +0 -1
- package/dist/b2b-core-components/p-6f3a6904.entry.js +0 -1
- package/dist/b2b-core-components/p-7264f359.entry.js +0 -1
- package/dist/b2b-core-components/p-744e8fc3.entry.js +0 -1
- package/dist/b2b-core-components/p-752d38c8.entry.js +0 -1
- package/dist/b2b-core-components/p-7afbfa3b.entry.js +0 -1
- package/dist/b2b-core-components/p-7e59c92f.entry.js +0 -1
- package/dist/b2b-core-components/p-88c0c97c.entry.js +0 -1
- package/dist/b2b-core-components/p-92a809de.entry.js +0 -1
- package/dist/b2b-core-components/p-94f80a44.entry.js +0 -1
- package/dist/b2b-core-components/p-9f453acb.entry.js +0 -1
- package/dist/b2b-core-components/p-a37ad232.entry.js +0 -1
- package/dist/b2b-core-components/p-ad0df2f2.entry.js +0 -1
- package/dist/b2b-core-components/p-b03d197a.entry.js +0 -1
- package/dist/b2b-core-components/p-b045e097.entry.js +0 -1
- package/dist/b2b-core-components/p-b368015e.entry.js +0 -1
- package/dist/b2b-core-components/p-c03d0533.entry.js +0 -1
- package/dist/b2b-core-components/p-c10ee62f.entry.js +0 -1
- package/dist/b2b-core-components/p-c365567c.entry.js +0 -1
- package/dist/b2b-core-components/p-c97990e8.entry.js +0 -1
- package/dist/b2b-core-components/p-cad3574a.entry.js +0 -1
- package/dist/b2b-core-components/p-cd520262.entry.js +0 -1
- package/dist/b2b-core-components/p-d0035d7d.entry.js +0 -1
- package/dist/b2b-core-components/p-d3a04423.entry.js +0 -1
- package/dist/b2b-core-components/p-db67d6f7.entry.js +0 -1
- package/dist/b2b-core-components/p-f1287a36.entry.js +0 -1
- package/dist/b2b-core-components/p-f8f280fc.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const toggleButtonCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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{--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-border-right:1px solid var(--b2b-color-grey-200);font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-35);line-height:var(--b2b-size-copy-line-height-75);position:relative;margin:0}:host .b2b-toggle-button__input{border:0;clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute !important;width:1px}:host .b2b-toggle-button__label{display:inline-block;position:relative;box-sizing:border-box;font-family:OttoSans, Arial, Helvetica, sans-serif;line-height:1.75rem;transition:all 0.3s ease;background-color:var(--b2b-color-grey-50);border:1px solid var(--b2b-color-grey-200);border-radius:var(--b2b-border-radius);border-right:var(--b2b-border-right);cursor:pointer;text-align:center;text-decoration:none;padding:0 var(--b2b-size-20)}:host .b2b-toggle-button__label:hover{background-color:var(--b2b-color-grey-200)}:host .b2b-toggle-button__input:focus+label{outline:2px solid -webkit-focus-ring-color;z-index:1;transition:none}:host .b2b-toggle-button__input--disabled:focus+label{outline:none}:host .b2b-toggle-button__label--checked,:host .b2b-toggle-button__label--checked:hover{color:var(--b2b-color-white-100);background-color:var(--b2b-color-black-50);border-color:var(--b2b-color-black-50)}:host .b2b-toggle-button__label--disabled,:host .b2b-toggle-button__label--disabled:hover{pointer-events:none;color:var(--b2b-color-grey-250);border-color:var(--b2b-color-grey-100);border-left:var(--b2b-border-left);background-color:var(--b2b-color-grey-50)}";
|
|
3
|
+
const toggleButtonCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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{--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-border-right:1px solid var(--b2b-color-grey-200);font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-35);line-height:var(--b2b-size-copy-line-height-75);position:relative;margin:0}:host .b2b-toggle-button__input{border:0;clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute !important;width:1px}:host .b2b-toggle-button__label{display:inline-block;position:relative;box-sizing:border-box;font-family:OttoSans, Arial, Helvetica, sans-serif;line-height:1.75rem;transition:all 0.3s ease;background-color:var(--b2b-color-grey-50);border:1px solid var(--b2b-color-grey-200);border-radius:var(--b2b-border-radius);border-right:var(--b2b-border-right);cursor:pointer;text-align:center;text-decoration:none;padding:0 var(--b2b-size-20)}:host .b2b-toggle-button__label:hover{background-color:var(--b2b-color-grey-200)}:host .b2b-toggle-button__input:focus+label{outline:2px solid -webkit-focus-ring-color;z-index:1;transition:none}:host .b2b-toggle-button__input--disabled:focus+label{outline:none}:host .b2b-toggle-button__label--checked,:host .b2b-toggle-button__label--checked:hover{color:var(--b2b-color-white-100);background-color:var(--b2b-color-black-50);border-color:var(--b2b-color-black-50)}:host .b2b-toggle-button__label--disabled,:host .b2b-toggle-button__label--disabled:hover{pointer-events:none;color:var(--b2b-color-grey-250);border-color:var(--b2b-color-grey-100);border-left:var(--b2b-border-left);background-color:var(--b2b-color-grey-50)}";
|
|
4
4
|
const B2bToggleButtonStyle0 = toggleButtonCss;
|
|
5
5
|
|
|
6
6
|
const B2bToggleButtonComponent = /*@__PURE__*/ proxyCustomElement(class B2bToggleButtonComponent extends HTMLElement {
|
|
@@ -39,13 +39,13 @@ const B2bToggleButtonComponent = /*@__PURE__*/ proxyCustomElement(class B2bToggl
|
|
|
39
39
|
return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: '5ec7f55c330552dc5b3859504c8a4afc2f151146', onClick: this.onClick }, h("span", { key: '5cfbea13b4535886ea2404aa42e6bc830a149b3c', class: {
|
|
43
43
|
'b2b-toggle-button': true,
|
|
44
44
|
'b2b-toggle-button--disabled': this.disabled,
|
|
45
|
-
} }, h("input", { key: '
|
|
45
|
+
} }, h("input", { key: 'a88084cc44b80abb06e653afca8c7737f67baf4b', tabindex: 0, class: {
|
|
46
46
|
'b2b-toggle-button__input': true,
|
|
47
47
|
'b2b-toggle-button__input--disabled': this.disabled,
|
|
48
|
-
}, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '
|
|
48
|
+
}, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'a5654d8a5c5c9845a7f07fc7dbf994e99a560d82', id: this.name, tabindex: -1, class: {
|
|
49
49
|
'b2b-toggle-button__label': true,
|
|
50
50
|
'b2b-toggle-button__label--disabled': this.disabled,
|
|
51
51
|
'b2b-toggle-button__label--checked': this.checked && !this.disabled,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const toggleChipCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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 .b2b-toggle-chip{font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);display:inline-block}:host .b2b-toggle-chip__input{border:0;clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute !important;width:1px}:host .b2b-toggle-chip__input:focus+label{outline:2px solid -webkit-focus-ring-color;z-index:1;transition:none}:host .b2b-toggle-chip__label{display:inline-block;padding:var(--b2b-size-15) var(--b2b-size-
|
|
3
|
+
const toggleChipCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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 .b2b-toggle-chip{font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);display:inline-block;min-width:var(--b2b-size-90);min-height:var(--b2b-size-80);max-height:var(--b2b-size-80)}:host .b2b-toggle-chip__input{border:0;clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute !important;width:1px}:host .b2b-toggle-chip__input:focus+label{outline:2px solid -webkit-focus-ring-color;z-index:1;transition:none}:host .b2b-toggle-chip__label{display:inline-block;border:1px solid var(--b2b-color-grey-200);padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-radius:var(--b2b-size-50);color:var(--b2b-color-black-100);background-color:var(--b2b-color-white-100)}:host .b2b-toggle-chip__label:hover{background-color:var(--b2b-color-hover-default);color:var(--b2b-color-black-100);cursor:pointer;transition:all 0.3s ease}:host .b2b-toggle-chip__label:active{background-color:#d4e0eb;color:var(--b2b-color-black-100);transition:all 0.3s ease}:host .b2b-toggle-chip__label--active{color:var(--b2b-color-white-100);background-color:var(--b2b-color-black-100);border:1px solid var(--b2b-color-black-100)}:host .b2b-toggle-chip__label--active:hover{cursor:pointer;background-color:var(--b2b-color-hover-black);border:1px solid var(--b2b-color-hover-black);color:var(--b2b-color-grey-100)}:host .b2b-toggle-chip__label--disabled{background-color:var(--b2b-color-grey-25);color:var(--b2b-color-grey-200);user-select:none}:host .b2b-toggle-chip__label--disabled:hover{cursor:default;background-color:var(--b2b-color-grey-25);color:var(--b2b-color-grey-200)}:host .b2b-toggle-chip__label--active-disabled{background-color:var(--b2b-color-black-100);border:1px solid var(--b2b-color-black-100);color:var(--b2b-color-grey-300)}:host .b2b-toggle-chip__label--active-disabled:hover{cursor:default;background-color:var(--b2b-color-black-100);color:var(--b2b-color-grey-300)}";
|
|
4
4
|
const B2bToggleChipStyle0 = toggleChipCss;
|
|
5
5
|
|
|
6
6
|
const B2BToggleChipComponent = /*@__PURE__*/ proxyCustomElement(class B2BToggleChipComponent extends HTMLElement {
|
|
@@ -36,20 +36,19 @@ const B2BToggleChipComponent = /*@__PURE__*/ proxyCustomElement(class B2BToggleC
|
|
|
36
36
|
this.label = undefined;
|
|
37
37
|
this.value = undefined;
|
|
38
38
|
this.name = undefined;
|
|
39
|
-
this.variant = 'grey';
|
|
40
39
|
this.active = false;
|
|
41
40
|
this.disabled = false;
|
|
42
41
|
}
|
|
43
42
|
render() {
|
|
44
|
-
return (h(Host, { key: '
|
|
43
|
+
return (h(Host, { key: '78c0600467fcbdd43c4709fc8637a845fa0aecc5' }, h("span", { key: 'ee2a356bfe8190eea0e846be6a9a98364b154b2f', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
|
|
45
44
|
'b2b-toggle-chip': true,
|
|
46
|
-
} }, h("input", { key: '
|
|
45
|
+
} }, h("input", { key: '8836fc2cb5439d0567ad554c1e265eabed3aa3df', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
|
|
47
46
|
'b2b-toggle-chip__input': true,
|
|
48
|
-
}, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '
|
|
47
|
+
}, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '52a41c7c1427677ec00818be4c2fdb55bb6f69b1', id: this.name, tabIndex: -1, class: {
|
|
49
48
|
'b2b-toggle-chip__label': true,
|
|
50
|
-
|
|
51
|
-
'b2b-toggle-chip__label--active': this.active,
|
|
49
|
+
'b2b-toggle-chip__label--active': this.active && !this.disabled,
|
|
52
50
|
'b2b-toggle-chip__label--disabled': this.disabled,
|
|
51
|
+
'b2b-toggle-chip__label--active-disabled': this.active && this.disabled,
|
|
53
52
|
} }, this.label))));
|
|
54
53
|
}
|
|
55
54
|
static get style() { return B2bToggleChipStyle0; }
|
|
@@ -57,7 +56,6 @@ const B2BToggleChipComponent = /*@__PURE__*/ proxyCustomElement(class B2BToggleC
|
|
|
57
56
|
"label": [1],
|
|
58
57
|
"value": [520],
|
|
59
58
|
"name": [513],
|
|
60
|
-
"variant": [1],
|
|
61
59
|
"active": [1028],
|
|
62
60
|
"disabled": [516]
|
|
63
61
|
}]);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const toggleGroupCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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-toggle-group fieldset{border:none;margin:0;padding:0;font-size:0}::slotted(b2b-toggle-button){--b2b-border-radius:0;--b2b-border-right:0}::slotted(b2b-toggle-button:first-child){--b2b-border-radius:var(--b2b-size-border-no-radius-right)}::slotted(b2b-toggle-button:last-child){--b2b-border-right:1px solid var(--b2b-color-grey-200);--b2b-border-radius:var(--b2b-size-border-no-radius-left)}::slotted(b2b-toggle-button[disabled]){--b2b-border-left:1px solid var(--b2b-color-grey-200)}::slotted(b2b-toggle-button[disabled]:first-child){--b2b-border-left:1px solid var(--b2b-color-grey-100)}.b2b-toggle-group--disabled ::slotted(b2b-toggle-button[disabled]){--b2b-border-left:1px solid var(--b2b-color-grey-100)}";
|
|
3
|
+
const toggleGroupCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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-toggle-group fieldset{border:none;margin:0;padding:0;font-size:0}::slotted(b2b-toggle-button){--b2b-border-radius:0;--b2b-border-right:0}::slotted(b2b-toggle-button:first-child){--b2b-border-radius:var(--b2b-size-border-no-radius-right)}::slotted(b2b-toggle-button:last-child){--b2b-border-right:1px solid var(--b2b-color-grey-200);--b2b-border-radius:var(--b2b-size-border-no-radius-left)}::slotted(b2b-toggle-button[disabled]){--b2b-border-left:1px solid var(--b2b-color-grey-200)}::slotted(b2b-toggle-button[disabled]:first-child){--b2b-border-left:1px solid var(--b2b-color-grey-100)}.b2b-toggle-group--disabled ::slotted(b2b-toggle-button[disabled]){--b2b-border-left:1px solid var(--b2b-color-grey-100)}";
|
|
4
4
|
const B2bToggleGroupStyle0 = toggleGroupCss;
|
|
5
5
|
|
|
6
6
|
const B2BToggleGroup = /*@__PURE__*/ proxyCustomElement(class B2BToggleGroup extends HTMLElement {
|
|
@@ -53,10 +53,10 @@ const B2BToggleGroup = /*@__PURE__*/ proxyCustomElement(class B2BToggleGroup ext
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'f17d4a01c930847672fe6aa60b50544c3a0fa829' }, h("div", { key: 'd1250e694f9b225886136bd116a4cbd297a1fea5', class: {
|
|
57
57
|
'b2b-toggle-group': true,
|
|
58
58
|
'b2b-toggle-group--disabled': this.disabled,
|
|
59
|
-
} }, h("fieldset", { key: '
|
|
59
|
+
} }, h("fieldset", { key: '819b848ed5b3b50bfe840dcdb4caf9a7520f58be' }, h("slot", { key: '6918c86adb990d6300b2327510a27a830d4eab52' })))));
|
|
60
60
|
}
|
|
61
61
|
get host() { return this; }
|
|
62
62
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const toggleSwitchCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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 .b2b-toggle{display:inline-flex;position:relative}:host .b2b-toggle__icon{position:absolute;fill:var(--b2b-color-success-100);display:inline-block;left:var(--b2b-size-60);top:var(--b2b-size-10);width:var(--b2b-size-30);height:var(--b2b-size-30);z-index:1000;opacity:0}:host .b2b-toggle__icon--show{transition:opacity 1s;transition:opacity 1s ease;opacity:1}:host .b2b-toggle__label{display:inline-flex;align-items:center;font-family:var(--b2b-font-family-default)}:host .b2b-toggle__label--left{flex-direction:row-reverse}:host .b2b-toggle__text{margin-left:var(--b2b-size-30)}:host .b2b-toggle__text--left{margin-right:var(--b2b-size-30);margin-left:0}:host .b2b-toggle__switch{position:relative;display:flex;width:var(--b2b-size-100);height:var(--b2b-size-50);cursor:pointer}:host .b2b-toggle__switch::before,:host .b2b-toggle__switch::after{position:absolute;content:\"\";cursor:pointer}:host .b2b-toggle__switch::before{width:var(--b2b-size-100);height:var(--b2b-size-50);border-radius:var(--b2b-size-7);background-color:var(--b2b-color-grey-200);transition:background-color 0.3s ease}:host .b2b-toggle__switch::after{top:var(--b2b-size-5);left:var(--b2b-size-5);width:var(--b2b-size-40);height:var(--b2b-size-40);border-radius:var(--b2b-size-7);background-color:var(--b2b-color-white-100);transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease}:host .b2b-toggle--checked .b2b-toggle__switch::before{background-color:var(--b2b-color-success-100)}:host .b2b-toggle--checked .b2b-toggle__switch::after{background-color:var(--b2b-color-white-100);transform:translateX(var(--b2b-size-50))}:host .b2b-toggle--disabled .b2b-toggle__icon{fill:#b1b1b1;cursor:default}:host .b2b-toggle--disabled .b2b-toggle__label{cursor:default}:host .b2b-toggle--disabled .b2b-toggle__switch::before,:host .b2b-toggle--disabled .b2b-toggle__switch::after{cursor:default}:host .b2b-toggle--disabled .b2b-toggle__switch::before{background-color:#b1b1b1}:host .b2b-toggle--disabled .b2b-toggle__switch::after{background-color:var(--b2b-color-grey-100)}";
|
|
3
|
+
const toggleSwitchCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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 .b2b-toggle{display:inline-flex;position:relative}:host .b2b-toggle__icon{position:absolute;fill:var(--b2b-color-success-100);display:inline-block;left:var(--b2b-size-60);top:var(--b2b-size-10);width:var(--b2b-size-30);height:var(--b2b-size-30);z-index:1000;opacity:0}:host .b2b-toggle__icon--show{transition:opacity 1s;transition:opacity 1s ease;opacity:1}:host .b2b-toggle__label{display:inline-flex;align-items:center;font-family:var(--b2b-font-family-default)}:host .b2b-toggle__label--left{flex-direction:row-reverse}:host .b2b-toggle__text{margin-left:var(--b2b-size-30)}:host .b2b-toggle__text--left{margin-right:var(--b2b-size-30);margin-left:0}:host .b2b-toggle__switch{position:relative;display:flex;width:var(--b2b-size-100);height:var(--b2b-size-50);cursor:pointer}:host .b2b-toggle__switch::before,:host .b2b-toggle__switch::after{position:absolute;content:\"\";cursor:pointer}:host .b2b-toggle__switch::before{width:var(--b2b-size-100);height:var(--b2b-size-50);border-radius:var(--b2b-size-7);background-color:var(--b2b-color-grey-200);transition:background-color 0.3s ease}:host .b2b-toggle__switch::after{top:var(--b2b-size-5);left:var(--b2b-size-5);width:var(--b2b-size-40);height:var(--b2b-size-40);border-radius:var(--b2b-size-7);background-color:var(--b2b-color-white-100);transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease}:host .b2b-toggle--checked .b2b-toggle__switch::before{background-color:var(--b2b-color-success-100)}:host .b2b-toggle--checked .b2b-toggle__switch::after{background-color:var(--b2b-color-white-100);transform:translateX(var(--b2b-size-50))}:host .b2b-toggle--disabled .b2b-toggle__icon{fill:#b1b1b1;cursor:default}:host .b2b-toggle--disabled .b2b-toggle__label{cursor:default}:host .b2b-toggle--disabled .b2b-toggle__switch::before,:host .b2b-toggle--disabled .b2b-toggle__switch::after{cursor:default}:host .b2b-toggle--disabled .b2b-toggle__switch::before{background-color:#b1b1b1}:host .b2b-toggle--disabled .b2b-toggle__switch::after{background-color:var(--b2b-color-grey-100)}";
|
|
4
4
|
const B2bToggleSwitchStyle0 = toggleSwitchCss;
|
|
5
5
|
|
|
6
6
|
const B2bToggleSwitchComponent = /*@__PURE__*/ proxyCustomElement(class B2bToggleSwitchComponent extends HTMLElement {
|
|
@@ -46,17 +46,17 @@ const B2bToggleSwitchComponent = /*@__PURE__*/ proxyCustomElement(class B2bToggl
|
|
|
46
46
|
render() {
|
|
47
47
|
// workaround for purgecss as safelist doesn't work
|
|
48
48
|
const isLeft = this.labelPosition === 'left';
|
|
49
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '3d95bcb03fb1131b2b2775db6e8d82de9f2c5297' }, h("div", { key: '4e665cdbb2d1364a4bd9e641745d510237a4f4c8', class: {
|
|
50
50
|
'b2b-toggle': true,
|
|
51
51
|
'b2b-toggle--disabled': this.disabled,
|
|
52
52
|
'b2b-toggle--checked': this.state,
|
|
53
|
-
} }, h("div", { key: '
|
|
53
|
+
} }, h("div", { key: '285501a0a3904058e06477c07ddbc6032c49ac1c', class: {
|
|
54
54
|
'b2b-toggle__label': true,
|
|
55
55
|
'b2b-toggle__label--left': isLeft,
|
|
56
|
-
} }, h("span", { key: '
|
|
56
|
+
} }, h("span", { key: '6f4699424b4a5e23c9de5577b0026f6ab0eb964f', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: 'ef46344c874f4b5f2cf998dcbf0b496180024cd4', class: {
|
|
57
57
|
'b2b-toggle__icon': true,
|
|
58
58
|
'b2b-toggle__icon--show': this.state,
|
|
59
|
-
}, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '
|
|
59
|
+
}, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '56833837842c26dfeb46ed3429f4ccf1e48477f7', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
|
|
60
60
|
'b2b-toggle__text': true,
|
|
61
61
|
'b2b-toggle__text--left': isLeft,
|
|
62
62
|
} }, this.label))))));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const tooltipCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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-tooltip__trigger{position:relative}.b2b-tooltip--visible.b2b-tooltip__content,.b2b-tooltip--visible.b2b-tooltip__content::before{opacity:1;visibility:visible;transition-delay:100ms}.b2b-tooltip__content{background-color:var(--b2b-color-black-100);white-space:pre-wrap;color:var(--b2b-color-white-100);padding:var(--b2b-size-15) var(--b2b-size-30) var(--b2b-size-20);border-radius:var(--b2b-size-7);position:absolute;line-height:var(--b2b-size-copy-line-height-75);font-size:var(--b2b-size-copy-50);box-sizing:border-box;text-align:start;width:max-content;max-width:17.5rem;visibility:hidden;opacity:0;z-index:1000001;transition:opacity 0.4s ease}.b2b-tooltip__content::before{content:\"\";position:absolute;z-index:1000001;background:0 0;border-width:0.375rem;border-style:solid;border-color:transparent;border-top-color:var(--b2b-color-black-100);visibility:hidden;transition:opacity 0.4s ease}.b2b-tooltip--left .b2b-tooltip__content{inset:50% calc(100% + 8px) auto auto;transform:translateY(-50%)}.b2b-tooltip--left .b2b-tooltip__content::before{top:calc(50% - 0.375rem);transform:rotate(270deg);left:100%;margin-right:-0.75rem}.b2b-tooltip--right .b2b-tooltip__content{inset:50% auto auto calc(100% + 8px);transform:translateY(-50%)}.b2b-tooltip--right .b2b-tooltip__content::before{top:calc(50% - 0.375rem);transform:rotate(90deg);margin-left:-0.75rem;right:100%}.b2b-tooltip--bottom .b2b-tooltip__content{inset:calc(150% + 0.375rem) auto auto 50%;transform:translateX(-50%) translateY(-0.5rem)}.b2b-tooltip--bottom .b2b-tooltip__content::before{left:calc(50% - 0.375rem);margin-top:-0.7rem;transform:rotate(180deg) translateY(0.35rem)}.b2b-tooltip--top .b2b-tooltip__content{inset:auto auto 100% 50%;transform:translateX(-50%) translateY(-0.5rem)}.b2b-tooltip--top .b2b-tooltip__content::before{left:calc(50% - 0.375rem);margin-bottom:-0.75rem;top:100%}";
|
|
3
|
+
const tooltipCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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-tooltip__trigger{position:relative}.b2b-tooltip--visible.b2b-tooltip__content,.b2b-tooltip--visible.b2b-tooltip__content::before{opacity:1;visibility:visible;transition-delay:100ms}.b2b-tooltip__content{background-color:var(--b2b-color-black-100);white-space:pre-wrap;color:var(--b2b-color-white-100);padding:var(--b2b-size-15) var(--b2b-size-30) var(--b2b-size-20);border-radius:var(--b2b-size-7);position:absolute;line-height:var(--b2b-size-copy-line-height-75);font-size:var(--b2b-size-copy-50);box-sizing:border-box;text-align:start;width:max-content;max-width:17.5rem;visibility:hidden;opacity:0;z-index:1000001;transition:opacity 0.4s ease}.b2b-tooltip__content::before{content:\"\";position:absolute;z-index:1000001;background:0 0;border-width:0.375rem;border-style:solid;border-color:transparent;border-top-color:var(--b2b-color-black-100);visibility:hidden;transition:opacity 0.4s ease}.b2b-tooltip--left .b2b-tooltip__content{inset:50% calc(100% + 8px) auto auto;transform:translateY(-50%)}.b2b-tooltip--left .b2b-tooltip__content::before{top:calc(50% - 0.375rem);transform:rotate(270deg);left:100%;margin-right:-0.75rem}.b2b-tooltip--right .b2b-tooltip__content{inset:50% auto auto calc(100% + 8px);transform:translateY(-50%)}.b2b-tooltip--right .b2b-tooltip__content::before{top:calc(50% - 0.375rem);transform:rotate(90deg);margin-left:-0.75rem;right:100%}.b2b-tooltip--bottom .b2b-tooltip__content{inset:calc(150% + 0.375rem) auto auto 50%;transform:translateX(-50%) translateY(-0.5rem)}.b2b-tooltip--bottom .b2b-tooltip__content::before{left:calc(50% - 0.375rem);margin-top:-0.7rem;transform:rotate(180deg) translateY(0.35rem)}.b2b-tooltip--top .b2b-tooltip__content{inset:auto auto 100% 50%;transform:translateX(-50%) translateY(-0.5rem)}.b2b-tooltip--top .b2b-tooltip__content::before{left:calc(50% - 0.375rem);margin-bottom:-0.75rem;top:100%}";
|
|
4
4
|
const B2bTooltipStyle0 = tooltipCss;
|
|
5
5
|
|
|
6
6
|
const B2BTooltipComponent = /*@__PURE__*/ proxyCustomElement(class B2BTooltipComponent extends HTMLElement {
|
|
@@ -60,13 +60,13 @@ const B2BTooltipComponent = /*@__PURE__*/ proxyCustomElement(class B2BTooltipCom
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
render() {
|
|
63
|
-
return (h(Host, { key: '
|
|
63
|
+
return (h(Host, { key: 'c2efabef717665d8bf057abf1b3cb70f25dc2214', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: 'fd1c3760f32c1592ffbe2429ed1cf5fc67b47285', class: {
|
|
64
64
|
[`b2b-tooltip--${this.position}`]: true,
|
|
65
65
|
'b2b-tooltip__trigger': true,
|
|
66
|
-
} }, h("slot", { key: '
|
|
66
|
+
} }, h("slot", { key: '863de460d08adfc78418a213ece987fd05ac7850' }), h("div", { key: '70800804dc8de2e348aa07da04fd7302d944b56f', class: {
|
|
67
67
|
'b2b-tooltip__content': true,
|
|
68
68
|
'b2b-tooltip--visible': this.opened,
|
|
69
|
-
} }, h("slot", { key: '
|
|
69
|
+
} }, h("slot", { key: '507cbc98868be7121f7604176a77d7b0f819b0a0', name: "content" }, this.content)))));
|
|
70
70
|
}
|
|
71
71
|
get host() { return this; }
|
|
72
72
|
static get watchers() { return {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { W as WizardStatus } from './wizard.types.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './icon.js';
|
|
3
|
+
import { d as defineCustomElement$4 } from './icon-100.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './rounded-icon.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './wizard-icon.js';
|
|
6
6
|
|
|
7
|
-
const wizardCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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 .b2b_wizard{display:flex;flex-wrap:wrap}.b2b_wizard__step{display:flex;align-items:center;gap:var(--b2b-size-space-50);padding:var(--b2b-size-space-50) 0}.b2b_wizard__step__label--default{color:var(--b2b-color-icon-secondary)}::slotted(b2b-wizard-step:not(:last-of-type)){display:flex;align-items:center}::slotted(b2b-wizard-step:not(:last-of-type))::after{content:\" \";flex-grow:1;height:1px;min-width:var(--b2b-size-space-175);margin:0 var(--b2b-size-space-75) 0 var(--b2b-size-space-75);background:var(--b2b-color-icon-default)}";
|
|
7
|
+
const wizardCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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 .b2b_wizard{display:flex;flex-wrap:wrap}.b2b_wizard__step{display:flex;align-items:center;gap:var(--b2b-size-space-50);padding:var(--b2b-size-space-50) 0}.b2b_wizard__step__label--default{color:var(--b2b-color-icon-secondary)}::slotted(b2b-wizard-step:not(:last-of-type)){display:flex;align-items:center}::slotted(b2b-wizard-step:not(:last-of-type))::after{content:\" \";flex-grow:1;height:1px;min-width:var(--b2b-size-space-175);margin:0 var(--b2b-size-space-75) 0 var(--b2b-size-space-75);background:var(--b2b-color-icon-default)}";
|
|
8
8
|
const B2bWizardStepStyle0 = wizardCss;
|
|
9
9
|
|
|
10
10
|
const WizardStepComponent = /*@__PURE__*/ proxyCustomElement(class WizardStepComponent extends HTMLElement {
|
|
@@ -17,10 +17,10 @@ const WizardStepComponent = /*@__PURE__*/ proxyCustomElement(class WizardStepCom
|
|
|
17
17
|
this.checkIcon = true;
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: '53135f23baa9c010ed41077be0a82ef367d167b0' }, h("div", { key: '5bb054dbb364fb4690c224b147427b75c794ee6f', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '8f2092e2e1c95c4b9ed4808ffbc2a5adf53417d5', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '83bfe843ddf72019d07bbe8c6352db6178eee2e6', class: {
|
|
21
21
|
'b2b_wizard__step__label': true,
|
|
22
22
|
'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
|
|
23
|
-
} }, h("slot", { key: '
|
|
23
|
+
} }, h("slot", { key: '0ec30ce61b2c6e2cbb0158d3c411314e73103121' })))));
|
|
24
24
|
}
|
|
25
25
|
static get style() { return B2bWizardStepStyle0; }
|
|
26
26
|
}, [1, "b2b-wizard-step", {
|
|
@@ -32,14 +32,14 @@ function defineCustomElement$1() {
|
|
|
32
32
|
if (typeof customElements === "undefined") {
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
35
|
-
const components = ["b2b-wizard-step", "b2b-icon", "b2b-rounded-icon", "b2b-wizard-icon"];
|
|
35
|
+
const components = ["b2b-wizard-step", "b2b-icon-100", "b2b-rounded-icon", "b2b-wizard-icon"];
|
|
36
36
|
components.forEach(tagName => { switch (tagName) {
|
|
37
37
|
case "b2b-wizard-step":
|
|
38
38
|
if (!customElements.get(tagName)) {
|
|
39
39
|
customElements.define(tagName, WizardStepComponent);
|
|
40
40
|
}
|
|
41
41
|
break;
|
|
42
|
-
case "b2b-icon":
|
|
42
|
+
case "b2b-icon-100":
|
|
43
43
|
if (!customElements.get(tagName)) {
|
|
44
44
|
defineCustomElement$4();
|
|
45
45
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { W as WizardStatus } from './wizard.types.js';
|
|
3
3
|
|
|
4
|
-
const wizardCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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 .b2b_wizard{display:flex;flex-wrap:wrap}.b2b_wizard__step{display:flex;align-items:center;gap:var(--b2b-size-space-50);padding:var(--b2b-size-space-50) 0}.b2b_wizard__step__label--default{color:var(--b2b-color-icon-secondary)}::slotted(b2b-wizard-step:not(:last-of-type)){display:flex;align-items:center}::slotted(b2b-wizard-step:not(:last-of-type))::after{content:\" \";flex-grow:1;height:1px;min-width:var(--b2b-size-space-175);margin:0 var(--b2b-size-space-75) 0 var(--b2b-size-space-75);background:var(--b2b-color-icon-default)}";
|
|
4
|
+
const wizardCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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 .b2b_wizard{display:flex;flex-wrap:wrap}.b2b_wizard__step{display:flex;align-items:center;gap:var(--b2b-size-space-50);padding:var(--b2b-size-space-50) 0}.b2b_wizard__step__label--default{color:var(--b2b-color-icon-secondary)}::slotted(b2b-wizard-step:not(:last-of-type)){display:flex;align-items:center}::slotted(b2b-wizard-step:not(:last-of-type))::after{content:\" \";flex-grow:1;height:1px;min-width:var(--b2b-size-space-175);margin:0 var(--b2b-size-space-75) 0 var(--b2b-size-space-75);background:var(--b2b-color-icon-default)}";
|
|
5
5
|
const B2bWizardStyle0 = wizardCss;
|
|
6
6
|
|
|
7
7
|
const WizardComponent = /*@__PURE__*/ proxyCustomElement(class WizardComponent extends HTMLElement {
|
|
@@ -51,7 +51,7 @@ const WizardComponent = /*@__PURE__*/ proxyCustomElement(class WizardComponent e
|
|
|
51
51
|
this.setStepsState();
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: '0d6e329dcb96f5bab7de07ddb9206c3729bacca4' }, h("div", { key: 'cad575adba4bdee8913d5c54d3cd7664e12beca7', class: "b2b_wizard" }, h("slot", { key: '89024a5eb440dc3de2e960e3cb71fe839e837f33' }))));
|
|
55
55
|
}
|
|
56
56
|
get host() { return this; }
|
|
57
57
|
static get style() { return B2bWizardStyle0; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as defineCustomElement$1 } from './spinner.js';
|
|
3
3
|
|
|
4
|
-
const buttonCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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\")}:root,:host{--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-button-secondary-background-color:var(--b2b-color-grey-50);--b2b-button-secondary-border-color:var(--b2b-color-grey-200);--b2b-button-secondary-hover-background-color:var(--b2b-color-grey-150);--b2b-border-right:1px solid var(--b2b-button-secondary-border-color)}:root [data-theme=dark],:host [data-theme=dark]{--b2b-button-secondary-background-color:var(--b2b-color-grey-300);--b2b-button-secondary-border-color:var(--b2b-color-grey-400);--b2b-button-secondary-hover-background-color:var(--b2b-color-grey-400)}:host button,:host a{align-items:center;height:2.25rem;box-sizing:border-box;display:inline-flex;margin:0;padding:0 var(--b2b-size-30);position:relative;text-align:center;text-decoration:none;user-select:none;cursor:pointer;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);transition:background-color 0.3s ease;vertical-align:middle;border:none;border-radius:var(--b2b-border-radius)}:host button span,:host a span{display:flex;align-items:center}:host button.b2b-button--primary,:host a.b2b-button--primary{color:var(--b2b-color-white-100);background-color:var(--b2b-color-red-100);border:1px solid var(--b2b-color-red-100)}:host button.b2b-button--primary:hover,:host a.b2b-button--primary:hover{background-color:var(--b2b-color-red-200)}:host button.b2b-button--primary.loading::after,:host a.b2b-button--primary.loading::after{border:0.125rem solid rgba(255, 255, 255, 0.5);border-top:0.125rem solid var(--b2b-color-red-100)}:host button.b2b-button--primary:active,:host a.b2b-button--primary:active{background-color:var(--b2b-color-red-250);border-color:var(--b2b-color-red-250)}:host button.b2b-button--secondary,:host a.b2b-button--secondary{color:var(--b2b-color-copy-default);background-color:var(--b2b-button-secondary-background-color);border:1px solid var(--b2b-button-secondary-border-color);border-right:var(--b2b-border-right)}:host button.b2b-button--secondary:hover,:host a.b2b-button--secondary:hover{background-color:var(--b2b-button-secondary-hover-background-color)}:host button.b2b-button--secondary.loading::after,:host a.b2b-button--secondary.loading::after{border:0.125rem solid rgba(51, 51, 51, 0.2);border-top:0.125rem solid var(--b2b-color-copy-default)}:host button.b2b-button--secondary:active,:host a.b2b-button--secondary:active{background-color:var(--b2b-color-grey-200);border-color:var(--b2b-color-grey-200)}:host button:disabled,:host button.disabled,:host a:disabled,:host a.disabled{cursor:default;pointer-events:none;background-color:var(--b2b-color-grey-50);border:1px solid var(--b2b-color-grey-200);border-right:var(--b2b-border-right);color:var(--b2b-color-grey-250)}:host button:disabled [slot=start],:host button:disabled [slot=end],:host button.disabled [slot=start],:host button.disabled [slot=end],:host a:disabled [slot=start],:host a:disabled [slot=end],:host a.disabled [slot=start],:host a.disabled [slot=end]{fill:var(--b2b-color-grey-250)}:host button:focus,:host a:focus{z-index:10}:host(.b2b-button--loading) button,:host(.b2b-button--loading) a{color:transparent;position:relative;cursor:default;pointer-events:none}:host(.b2b-button--loading).b2b-button--primary::after,:host(.b2b-button--loading).b2b-button--primary:hover{color:var(--b2b-color-white-100)}:host(.b2b-button--loading).b2b-button--secondary::after,:host(.b2b-button--loading).b2b-button--secondary:hover{color:var(--b2b-color-copy-default)}:host(.b2b-button--loading) .b2b-button__spinner{box-sizing:border-box;display:inline;position:absolute !important;top:50%;left:50%;margin-top:-0.625rem;margin-left:-0.625rem}:host(.b2b-button--loading) [slot=start],:host(.b2b-button--loading) [slot=end]{visibility:hidden}:host(.b2b-button--50) button,:host(.b2b-button--50) a{height:1.875rem;max-width:100%}:host(.b2b-button--100) button,:host(.b2b-button--100) a{height:2.25rem}:host(.b2b-button--active) button,:host(.b2b-button--active) a{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100);border:1px solid var(--b2b-button-secondary-border-color);border-right:var(--b2b-border-right)}:host(.b2b-button--active) button:hover,:host(.b2b-button--active) a:hover{background-color:var(--b2b-color-black-100)}:host(.b2b-button--icon-only) button,:host(.b2b-button--icon-only) a{padding:0 var(--b2b-size-20)}:host(.b2b-button--fit-container) button,:host(.b2b-button--fit-container) a{width:100%;display:inline-block}:host(.b2b-button--fit-container) span{display:inline-flex}:host(.b2b-button--custom) button,:host(.b2b-button--custom) a{width:inherit;display:inline-block}:host(.b2b-button--custom) span{display:inline-flex}::slotted(*[slot=start]){margin-right:var(--b2b-size-10)}::slotted(*[slot=end]){margin-left:var(--b2b-size-10)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
4
|
+
const buttonCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover-black:#3b3b3b;--b2b-color-hover-default:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@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\")}:root,:host{--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-button-secondary-background-color:var(--b2b-color-grey-50);--b2b-button-secondary-border-color:var(--b2b-color-grey-200);--b2b-button-secondary-hover-background-color:var(--b2b-color-grey-150);--b2b-border-right:1px solid var(--b2b-button-secondary-border-color)}:root [data-theme=dark],:host [data-theme=dark]{--b2b-button-secondary-background-color:var(--b2b-color-grey-300);--b2b-button-secondary-border-color:var(--b2b-color-grey-400);--b2b-button-secondary-hover-background-color:var(--b2b-color-grey-400)}:host button,:host a{align-items:center;height:2.25rem;box-sizing:border-box;display:inline-flex;margin:0;padding:0 var(--b2b-size-30);position:relative;text-align:center;text-decoration:none;user-select:none;cursor:pointer;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);transition:background-color 0.3s ease;vertical-align:middle;border:none;border-radius:var(--b2b-border-radius)}:host button span,:host a span{display:flex;align-items:center}:host button.b2b-button--primary,:host a.b2b-button--primary{color:var(--b2b-color-white-100);background-color:var(--b2b-color-red-100);border:1px solid var(--b2b-color-red-100)}:host button.b2b-button--primary:hover,:host a.b2b-button--primary:hover{background-color:var(--b2b-color-red-200)}:host button.b2b-button--primary.loading::after,:host a.b2b-button--primary.loading::after{border:0.125rem solid rgba(255, 255, 255, 0.5);border-top:0.125rem solid var(--b2b-color-red-100)}:host button.b2b-button--primary:active,:host a.b2b-button--primary:active{background-color:var(--b2b-color-red-250);border-color:var(--b2b-color-red-250)}:host button.b2b-button--secondary,:host a.b2b-button--secondary{color:var(--b2b-color-copy-default);background-color:var(--b2b-button-secondary-background-color);border:1px solid var(--b2b-button-secondary-border-color);border-right:var(--b2b-border-right)}:host button.b2b-button--secondary:hover,:host a.b2b-button--secondary:hover{background-color:var(--b2b-button-secondary-hover-background-color)}:host button.b2b-button--secondary.loading::after,:host a.b2b-button--secondary.loading::after{border:0.125rem solid rgba(51, 51, 51, 0.2);border-top:0.125rem solid var(--b2b-color-copy-default)}:host button.b2b-button--secondary:active,:host a.b2b-button--secondary:active{background-color:var(--b2b-color-grey-200);border-color:var(--b2b-color-grey-200)}:host button:disabled,:host button.disabled,:host a:disabled,:host a.disabled{cursor:default;pointer-events:none;background-color:var(--b2b-color-grey-50);border:1px solid var(--b2b-color-grey-200);border-right:var(--b2b-border-right);color:var(--b2b-color-grey-250)}:host button:disabled [slot=start],:host button:disabled [slot=end],:host button.disabled [slot=start],:host button.disabled [slot=end],:host a:disabled [slot=start],:host a:disabled [slot=end],:host a.disabled [slot=start],:host a.disabled [slot=end]{fill:var(--b2b-color-grey-250)}:host button:focus,:host a:focus{z-index:10}:host(.b2b-button--loading) button,:host(.b2b-button--loading) a{color:transparent;position:relative;cursor:default;pointer-events:none}:host(.b2b-button--loading).b2b-button--primary::after,:host(.b2b-button--loading).b2b-button--primary:hover{color:var(--b2b-color-white-100)}:host(.b2b-button--loading).b2b-button--secondary::after,:host(.b2b-button--loading).b2b-button--secondary:hover{color:var(--b2b-color-copy-default)}:host(.b2b-button--loading) .b2b-button__spinner{box-sizing:border-box;display:inline;position:absolute !important;top:50%;left:50%;margin-top:-0.625rem;margin-left:-0.625rem}:host(.b2b-button--loading) [slot=start],:host(.b2b-button--loading) [slot=end]{visibility:hidden}:host(.b2b-button--50) button,:host(.b2b-button--50) a{height:1.875rem;max-width:100%}:host(.b2b-button--100) button,:host(.b2b-button--100) a{height:2.25rem}:host(.b2b-button--active) button,:host(.b2b-button--active) a{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100);border:1px solid var(--b2b-button-secondary-border-color);border-right:var(--b2b-border-right)}:host(.b2b-button--active) button:hover,:host(.b2b-button--active) a:hover{background-color:var(--b2b-color-black-100)}:host(.b2b-button--icon-only) button,:host(.b2b-button--icon-only) a{padding:0 var(--b2b-size-20)}:host(.b2b-button--fit-container) button,:host(.b2b-button--fit-container) a{width:100%;display:inline-block}:host(.b2b-button--fit-container) span{display:inline-flex}:host(.b2b-button--custom) button,:host(.b2b-button--custom) a{width:inherit;display:inline-block}:host(.b2b-button--custom) span{display:inline-flex}::slotted(*[slot=start]){margin-right:var(--b2b-size-10)}::slotted(*[slot=end]){margin-left:var(--b2b-size-10)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
5
5
|
const B2bButtonStyle0 = buttonCss;
|
|
6
6
|
|
|
7
7
|
const ButtonComponent = /*@__PURE__*/ proxyCustomElement(class ButtonComponent extends HTMLElement {
|
|
@@ -17,7 +17,7 @@ const ButtonComponent = /*@__PURE__*/ proxyCustomElement(class ButtonComponent e
|
|
|
17
17
|
if (children.length === 1) {
|
|
18
18
|
// even no chars or child nodes will return white space, so we need to trim
|
|
19
19
|
if (this.hostElement.textContent.trim().length === 0) {
|
|
20
|
-
if (children[0].tagName.toLowerCase() === 'b2b-icon') {
|
|
20
|
+
if (children[0].tagName.toLowerCase() === 'b2b-icon-100') {
|
|
21
21
|
return true;
|
|
22
22
|
}
|
|
23
23
|
else if (children[0].tagName.toLowerCase() === 'i') {
|
|
@@ -67,7 +67,7 @@ const ButtonComponent = /*@__PURE__*/ proxyCustomElement(class ButtonComponent e
|
|
|
67
67
|
return (h("div", { class: "b2b-button__spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
|
-
return (h(Host, { key: '
|
|
70
|
+
return (h(Host, { key: '4050874af416fc23c0d67dc335aacb005f0d2279', class: {
|
|
71
71
|
[`b2b-button--loading`]: this.canLoad(),
|
|
72
72
|
[`b2b-button--${this.size}`]: true,
|
|
73
73
|
[`b2b-button--active`]: this.active,
|