@otto-de/b2b-core-components 1.11.0 → 1.12.0
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/README.md +1 -1
- package/dist/b2b-core-components/b2b-core-components.esm.js +1 -1
- package/dist/b2b-core-components/{p-b0cc9895.entry.js → p-01b9b983.entry.js} +1 -1
- package/dist/b2b-core-components/p-0db8724d.entry.js +1 -0
- package/dist/b2b-core-components/{p-567a827a.entry.js → p-12c001ea.entry.js} +1 -1
- package/dist/b2b-core-components/{p-de4857da.entry.js → p-1e12baa0.entry.js} +1 -1
- package/dist/b2b-core-components/{p-6e656e5c.entry.js → p-20fa0351.entry.js} +1 -1
- package/dist/b2b-core-components/{p-9cf6d10b.entry.js → p-23e23cf4.entry.js} +1 -1
- package/dist/b2b-core-components/{p-f7288fb4.entry.js → p-29b0dcb5.entry.js} +1 -1
- package/dist/b2b-core-components/{p-7293eda0.entry.js → p-330cc114.entry.js} +1 -1
- package/dist/b2b-core-components/{p-65e497d7.entry.js → p-33ffc3fe.entry.js} +1 -1
- package/dist/b2b-core-components/{p-228d4489.entry.js → p-3789f04c.entry.js} +1 -1
- package/dist/b2b-core-components/{p-bd14b3a6.entry.js → p-4d32cb20.entry.js} +1 -1
- package/dist/b2b-core-components/{p-2624f56d.entry.js → p-59551ff4.entry.js} +1 -1
- package/dist/b2b-core-components/{p-29166e22.entry.js → p-601ec2f0.entry.js} +1 -1
- package/dist/b2b-core-components/p-61b2a6ad.js +1 -0
- package/dist/b2b-core-components/{p-2285568d.entry.js → p-68c08852.entry.js} +1 -1
- package/dist/b2b-core-components/{p-4b6d056b.entry.js → p-7735d43f.entry.js} +1 -1
- package/dist/b2b-core-components/{p-ce180158.entry.js → p-8455554d.entry.js} +1 -1
- package/dist/b2b-core-components/{p-7ae31329.entry.js → p-8f0b98f0.entry.js} +1 -1
- package/dist/b2b-core-components/{p-8abee0b1.entry.js → p-93970b97.entry.js} +1 -1
- package/dist/b2b-core-components/{p-48466e2e.entry.js → p-9edd95d2.entry.js} +1 -1
- package/dist/b2b-core-components/{p-fb33d6df.entry.js → p-a17c27f9.entry.js} +1 -1
- package/dist/b2b-core-components/{p-2667b51d.entry.js → p-b8e93522.entry.js} +1 -1
- package/dist/b2b-core-components/{p-972ab127.entry.js → p-c2429f59.entry.js} +1 -1
- package/dist/b2b-core-components/p-c55de08a.entry.js +1 -0
- package/dist/b2b-core-components/p-c8ad53c7.entry.js +1 -0
- package/dist/b2b-core-components/{p-543eba05.entry.js → p-cc6d221f.entry.js} +1 -1
- package/dist/b2b-core-components/{p-1c0daedd.entry.js → p-cdbefe41.entry.js} +1 -1
- package/dist/b2b-core-components/{p-91d82529.entry.js → p-d54e93b9.entry.js} +1 -1
- package/dist/b2b-core-components/{p-3c776a9c.entry.js → p-d8cc67d9.entry.js} +1 -1
- package/dist/b2b-core-components/{p-7788b868.entry.js → p-da41cd26.entry.js} +1 -1
- package/dist/b2b-core-components/{p-32b6b2c8.entry.js → p-e23d42f0.entry.js} +1 -1
- package/dist/b2b-core-components/{p-ff16fd1a.entry.js → p-e2d3d211.entry.js} +1 -1
- package/dist/b2b-core-components/{p-90c700a4.entry.js → p-ee9cbc06.entry.js} +1 -1
- package/dist/b2b-core-components/{p-68350423.entry.js → p-ef64c336.entry.js} +1 -1
- package/dist/cjs/b2b-button_2.cjs.entry.js +1 -1
- package/dist/cjs/b2b-chip-component_2.cjs.entry.js +2 -2
- package/dist/cjs/b2b-core-components.cjs.js +1 -1
- package/dist/cjs/b2b-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-modal.cjs.entry.js +2 -2
- package/dist/cjs/b2b-multiselect-dropdown.cjs.entry.js +18 -14
- package/dist/cjs/b2b-pagination.cjs.entry.js +1 -1
- package/dist/cjs/b2b-paragraph.cjs.entry.js +2 -2
- package/dist/cjs/b2b-progress-bar.cjs.entry.js +3 -3
- package/dist/cjs/b2b-radio-button.cjs.entry.js +2 -2
- package/dist/cjs/b2b-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/b2b-required-separator.cjs.entry.js +1 -1
- package/dist/cjs/b2b-rounded-icon.cjs.entry.js +4 -4
- package/dist/cjs/b2b-scrollable-container.cjs.entry.js +1 -1
- package/dist/cjs/b2b-search.cjs.entry.js +1 -1
- package/dist/cjs/b2b-separator.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tab.cjs.entry.js +2 -2
- package/dist/cjs/b2b-table-cell_2.cjs.entry.js +3 -3
- package/dist/cjs/b2b-table-row.cjs.entry.js +2 -2
- package/dist/cjs/b2b-table-rowgroup.cjs.entry.js +2 -2
- package/dist/cjs/b2b-table.cjs.entry.js +2 -2
- package/dist/cjs/b2b-textarea.cjs.entry.js +2 -2
- package/dist/cjs/b2b-toggle-button.cjs.entry.js +3 -3
- package/dist/cjs/b2b-toggle-chip.cjs.entry.js +3 -3
- package/dist/cjs/b2b-toggle-group.cjs.entry.js +2 -2
- package/dist/cjs/b2b-toggle-switch.cjs.entry.js +4 -4
- package/dist/cjs/b2b-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/b2b-wizard-icon.cjs.entry.js +1 -1
- package/dist/cjs/b2b-wizard-step.cjs.entry.js +2 -2
- package/dist/cjs/b2b-wizard.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{request-78ad7911.js → request-801c6ba1.js} +1 -1
- package/dist/collection/components/alert/alert.css +2 -2
- package/dist/collection/components/anchor/anchor.css +2 -2
- package/dist/collection/components/breadcrumb/breadcrumb.css +2 -2
- package/dist/collection/components/button/button.css +2 -2
- package/dist/collection/components/calendar/calendar-days-header.css +2 -2
- package/dist/collection/components/calendar/calendar-days.css +2 -2
- package/dist/collection/components/calendar/calendar-header.css +2 -2
- package/dist/collection/components/calendar/calendar.css +2 -2
- package/dist/collection/components/card/card.css +2 -2
- package/dist/collection/components/checkbox/checkbox.css +2 -2
- package/dist/collection/components/checkbox-group/checkbox-group.css +2 -2
- package/dist/collection/components/chip/chip.css +2 -2
- package/dist/collection/components/dropdown/dropdown.css +2 -2
- package/dist/collection/components/flyout-menu/flyout-menu.css +2 -2
- package/dist/collection/components/headline/headline.css +2 -2
- package/dist/collection/components/icon/icon.css +2 -2
- package/dist/collection/components/icon-100/icon-100.css +2 -2
- package/dist/collection/components/icon-50/icon-50.css +2 -2
- package/dist/collection/components/input/input.css +2 -2
- package/dist/collection/components/input-group/input-group.css +2 -2
- package/dist/collection/components/input-list/input-list.css +2 -2
- package/dist/collection/components/label/label.css +2 -2
- package/dist/collection/components/modal/modal.css +13 -2
- package/dist/collection/components/modal/modal.js +1 -1
- package/dist/collection/components/modal/modal.stories.js +1 -0
- package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.css +2 -2
- package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.js +35 -15
- package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.stories.js +19 -1
- package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.js +2 -2
- package/dist/collection/components/pagination/pagination.css +2 -2
- package/dist/collection/components/pagination/pagination.js +1 -1
- package/dist/collection/components/paragraph/paragraph.css +2 -2
- package/dist/collection/components/paragraph/paragraph.js +2 -2
- package/dist/collection/components/progress-bar/progress-bar.css +2 -2
- package/dist/collection/components/progress-bar/progress-bar.js +3 -3
- package/dist/collection/components/radio/radio.css +2 -2
- package/dist/collection/components/radio/radio.js +2 -2
- package/dist/collection/components/radio-group/radio-group.css +2 -2
- package/dist/collection/components/radio-group/radio-group.js +2 -2
- package/dist/collection/components/required-separator/required-separator.css +2 -2
- package/dist/collection/components/required-separator/required-separator.js +1 -1
- package/dist/collection/components/rounded-icon/rounded-icon.css +2 -2
- package/dist/collection/components/rounded-icon/rounded-icon.js +4 -4
- package/dist/collection/components/scrollable-container/scrollable-container.css +2 -2
- package/dist/collection/components/scrollable-container/scrollable-container.js +1 -1
- package/dist/collection/components/search/search.js +1 -1
- package/dist/collection/components/separator/separator.css +2 -2
- package/dist/collection/components/separator/separator.js +1 -1
- package/dist/collection/components/spinner/spinner.css +2 -2
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/tab/tab.css +2 -2
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-group/tab-group.js +1 -1
- package/dist/collection/components/tab-panel/tab-panel.css +2 -2
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/table/table-cell/table-cell.css +2 -2
- package/dist/collection/components/table/table-cell/table-cell.js +2 -2
- package/dist/collection/components/table/table-header/table-header.css +2 -2
- package/dist/collection/components/table/table-header/table-header.js +1 -1
- package/dist/collection/components/table/table-row/table-row.css +2 -2
- package/dist/collection/components/table/table-row/table-row.js +2 -2
- package/dist/collection/components/table/table-rowgroup/table-rowgroup.css +2 -2
- package/dist/collection/components/table/table-rowgroup/table-rowgroup.js +2 -2
- package/dist/collection/components/table/table.css +2 -2
- package/dist/collection/components/table/table.js +2 -2
- package/dist/collection/components/textarea/textarea.css +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/toggle-button/toggle-button.css +2 -2
- package/dist/collection/components/toggle-button/toggle-button.js +3 -3
- package/dist/collection/components/toggle-chip/toggle-chip.css +2 -2
- package/dist/collection/components/toggle-chip/toggle-chip.js +3 -3
- package/dist/collection/components/toggle-group/toggle-group.css +2 -2
- package/dist/collection/components/toggle-group/toggle-group.js +2 -2
- package/dist/collection/components/toggle-switch/toggle-switch.css +2 -2
- package/dist/collection/components/toggle-switch/toggle-switch.js +4 -4
- package/dist/collection/components/tooltip/tooltip.css +3 -3
- package/dist/collection/components/tooltip/tooltip.js +3 -3
- package/dist/collection/components/wizard/wizard-step.js +2 -2
- package/dist/collection/components/wizard/wizard.css +2 -2
- package/dist/collection/components/wizard/wizard.js +1 -1
- package/dist/collection/components/wizard-icon/wizard-icon.css +2 -2
- package/dist/collection/components/wizard-icon/wizard-icon.js +1 -1
- package/dist/collection/utils/resources.js +1 -1
- package/dist/components/b2b-modal.js +2 -2
- package/dist/components/b2b-multiselect-dropdown.js +21 -16
- package/dist/components/b2b-pagination.js +1 -1
- package/dist/components/b2b-paragraph.js +2 -2
- package/dist/components/b2b-progress-bar.js +3 -3
- package/dist/components/b2b-radio-button.js +2 -2
- package/dist/components/b2b-radio-group.js +2 -2
- package/dist/components/b2b-required-separator.js +1 -1
- package/dist/components/b2b-scrollable-container.js +1 -1
- package/dist/components/b2b-search.js +1 -1
- package/dist/components/b2b-tab-group.js +1 -1
- package/dist/components/b2b-tab-panel.js +1 -1
- package/dist/components/b2b-tab.js +2 -2
- package/dist/components/b2b-table-row.js +2 -2
- package/dist/components/b2b-table-rowgroup.js +2 -2
- package/dist/components/b2b-table.js +2 -2
- package/dist/components/b2b-textarea.js +2 -2
- package/dist/components/b2b-toggle-button.js +3 -3
- package/dist/components/b2b-toggle-chip.js +3 -3
- package/dist/components/b2b-toggle-group.js +2 -2
- package/dist/components/b2b-toggle-switch.js +4 -4
- package/dist/components/b2b-tooltip.js +4 -4
- package/dist/components/b2b-wizard-step.js +2 -2
- package/dist/components/b2b-wizard.js +1 -1
- package/dist/components/multiselect-option.js +2 -2
- package/dist/components/request.js +1 -1
- package/dist/components/rounded-icon.js +4 -4
- package/dist/components/separator.js +1 -1
- package/dist/components/spinner.js +1 -1
- package/dist/components/table-cell.js +2 -2
- package/dist/components/table-header.js +1 -1
- package/dist/components/wizard-icon.js +1 -1
- package/dist/esm/b2b-button_2.entry.js +1 -1
- package/dist/esm/b2b-chip-component_2.entry.js +2 -2
- package/dist/esm/b2b-core-components.js +1 -1
- package/dist/esm/b2b-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-modal.entry.js +2 -2
- package/dist/esm/b2b-multiselect-dropdown.entry.js +18 -14
- package/dist/esm/b2b-pagination.entry.js +1 -1
- package/dist/esm/b2b-paragraph.entry.js +2 -2
- package/dist/esm/b2b-progress-bar.entry.js +3 -3
- package/dist/esm/b2b-radio-button.entry.js +2 -2
- package/dist/esm/b2b-radio-group.entry.js +2 -2
- package/dist/esm/b2b-required-separator.entry.js +1 -1
- package/dist/esm/b2b-rounded-icon.entry.js +4 -4
- package/dist/esm/b2b-scrollable-container.entry.js +1 -1
- package/dist/esm/b2b-search.entry.js +1 -1
- package/dist/esm/b2b-separator.entry.js +1 -1
- package/dist/esm/b2b-tab-group.entry.js +1 -1
- package/dist/esm/b2b-tab-panel.entry.js +1 -1
- package/dist/esm/b2b-tab.entry.js +2 -2
- package/dist/esm/b2b-table-cell_2.entry.js +3 -3
- package/dist/esm/b2b-table-row.entry.js +2 -2
- package/dist/esm/b2b-table-rowgroup.entry.js +2 -2
- package/dist/esm/b2b-table.entry.js +2 -2
- package/dist/esm/b2b-textarea.entry.js +2 -2
- package/dist/esm/b2b-toggle-button.entry.js +3 -3
- package/dist/esm/b2b-toggle-chip.entry.js +3 -3
- package/dist/esm/b2b-toggle-group.entry.js +2 -2
- package/dist/esm/b2b-toggle-switch.entry.js +4 -4
- package/dist/esm/b2b-tooltip.entry.js +4 -4
- package/dist/esm/b2b-wizard-icon.entry.js +1 -1
- package/dist/esm/b2b-wizard-step.entry.js +2 -2
- package/dist/esm/b2b-wizard.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{request-ad0a2ae3.js → request-1d048f8a.js} +1 -1
- package/dist/scripts/stencil/generate-vue-web-types.js +1 -1
- package/dist/types/components/multiselect-dropdown/multiselect-dropdown.d.ts +5 -2
- package/dist/types/components/multiselect-dropdown/multiselect-dropdown.stories.d.ts +1 -0
- package/dist/types/components.d.ts +8 -0
- package/dist/types/utils/resources.d.ts +1 -1
- package/dist/web-types.json +71 -61
- package/package.json +2 -2
- package/dist/b2b-core-components/p-6a3ac673.entry.js +0 -1
- package/dist/b2b-core-components/p-7d1e03c5.js +0 -1
- package/dist/b2b-core-components/p-b8ac302c.entry.js +0 -1
- package/dist/b2b-core-components/p-e94bd252.entry.js +0 -1
|
@@ -21,7 +21,7 @@ const B2bMultiSelectDropdown = class {
|
|
|
21
21
|
return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-multiselect-option')).slice(1);
|
|
22
22
|
};
|
|
23
23
|
this.renderChips = () => {
|
|
24
|
-
return this.
|
|
24
|
+
return this.currentSelectedValues.map((option, index) => {
|
|
25
25
|
if (index < this.maxOptionsVisible) {
|
|
26
26
|
return (h("b2b-chip-component", { label: option, value: option, "onB2b-close": this.handleChipClose }));
|
|
27
27
|
}
|
|
@@ -41,14 +41,14 @@ const B2bMultiSelectDropdown = class {
|
|
|
41
41
|
this.handleSelectedChange = event => {
|
|
42
42
|
const newOption = event.detail.selectedOption;
|
|
43
43
|
if (event.detail.selected) {
|
|
44
|
-
this.
|
|
44
|
+
this.currentSelectedValues = [...this.currentSelectedValues, newOption];
|
|
45
45
|
}
|
|
46
46
|
else {
|
|
47
|
-
this.
|
|
47
|
+
this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== newOption);
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
50
|
this.handleChipClose = event => {
|
|
51
|
-
this.
|
|
51
|
+
this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== event.detail.value);
|
|
52
52
|
this.updateOption(event.detail.value);
|
|
53
53
|
this.resetFocus();
|
|
54
54
|
};
|
|
@@ -61,7 +61,7 @@ const B2bMultiSelectDropdown = class {
|
|
|
61
61
|
// Deselect all to avoid caching issues in Vue
|
|
62
62
|
options.forEach(option => (option.selected = false));
|
|
63
63
|
options
|
|
64
|
-
.filter(option => this.
|
|
64
|
+
.filter(option => this.currentSelectedValues.includes(option.option))
|
|
65
65
|
.forEach(option => (option.selected = true));
|
|
66
66
|
};
|
|
67
67
|
this.setElementOnFocus = () => {
|
|
@@ -102,10 +102,10 @@ const B2bMultiSelectDropdown = class {
|
|
|
102
102
|
}
|
|
103
103
|
if (newVal) {
|
|
104
104
|
// filter out duplicates
|
|
105
|
-
this.
|
|
105
|
+
this.currentSelectedValues = Array.from(new Set([...this.currentSelectedValues, ...newVals]));
|
|
106
106
|
}
|
|
107
107
|
else {
|
|
108
|
-
this.
|
|
108
|
+
this.currentSelectedValues = this.currentSelectedValues.filter(option => !newVals.includes(option));
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
111
|
this.updateSelectAll = (options) => {
|
|
@@ -117,16 +117,20 @@ const B2bMultiSelectDropdown = class {
|
|
|
117
117
|
};
|
|
118
118
|
this.label = undefined;
|
|
119
119
|
this.placeholder = undefined;
|
|
120
|
+
this.selectedValues = [];
|
|
120
121
|
this.optionsList = [];
|
|
121
122
|
this.searchPlaceholder = undefined;
|
|
122
123
|
this.selectAllLabel = undefined;
|
|
123
124
|
this.maxOptionsVisible = 8;
|
|
124
|
-
this.
|
|
125
|
+
this.currentSelectedValues = [];
|
|
125
126
|
this.currentList = this.optionsList;
|
|
126
127
|
this.value = '';
|
|
127
128
|
this.isElementFocused = false;
|
|
128
129
|
this.hasOptionList = this.optionsList.length > 0;
|
|
129
130
|
}
|
|
131
|
+
componentWillLoad() {
|
|
132
|
+
this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
|
|
133
|
+
}
|
|
130
134
|
/** Needed to trigger a re-render for async data */
|
|
131
135
|
watchPropHandler(newList) {
|
|
132
136
|
this.hasOptionList = newList.length > 0;
|
|
@@ -134,8 +138,8 @@ const B2bMultiSelectDropdown = class {
|
|
|
134
138
|
this.currentList = newList;
|
|
135
139
|
}
|
|
136
140
|
}
|
|
137
|
-
handleSelectedValuesChange() {
|
|
138
|
-
this.b2bChange.emit(
|
|
141
|
+
handleSelectedValuesChange(newValues) {
|
|
142
|
+
this.b2bChange.emit(newValues);
|
|
139
143
|
}
|
|
140
144
|
componentDidUpdate() {
|
|
141
145
|
const options = this.getOptions();
|
|
@@ -143,19 +147,19 @@ const B2bMultiSelectDropdown = class {
|
|
|
143
147
|
this.updateSelectAll(options);
|
|
144
148
|
}
|
|
145
149
|
render() {
|
|
146
|
-
return (h(Host, { key: '
|
|
150
|
+
return (h(Host, { key: 'daeee1f39392ed4b83f2c51a90a1971dcbbb2843', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '7733bc1155f8eafdd14dc066d545f8aaef609fa7' }, this.label), h("div", { key: 'a68d14971e947a23fd60684eb91919ac71814fe1', class: {
|
|
147
151
|
'b2b-multiselect-dropdown': true,
|
|
148
152
|
'b2b-multiselect-dropdown--open': this.isElementFocused,
|
|
149
|
-
}, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.
|
|
153
|
+
}, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon", { key: 'd4e290f3b03cb805d525f8896709f1fe48e9b455', icon: "b2b_icon-arrow-down" })), h("div", { key: 'd9578e28d9fe2f33c4010ad664f7d1f0abb62864', class: {
|
|
150
154
|
'b2b-multiselect-dropdown__options-container': true,
|
|
151
155
|
'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
|
|
152
|
-
} }, h("div", { key: '
|
|
156
|
+
} }, h("div", { key: '2bcc252dda29ff86e8c3867c78e43b46ef596709', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '5e3d3cc7aee8f2ba8d654959b901863c9e02b266', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'be3b6becbcb710cbab950c55ffc5c11b2ea7319f', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '8ecde85fc975c9abc10ec89e77278547852055ea', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
|
|
153
157
|
this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option })))))));
|
|
154
158
|
}
|
|
155
159
|
get hostElement() { return getElement(this); }
|
|
156
160
|
static get watchers() { return {
|
|
157
161
|
"optionsList": ["watchPropHandler"],
|
|
158
|
-
"
|
|
162
|
+
"currentSelectedValues": ["handleSelectedValuesChange"]
|
|
159
163
|
}; }
|
|
160
164
|
};
|
|
161
165
|
B2bMultiSelectDropdown.style = B2bMultiselectDropdownStyle0;
|
|
@@ -104,7 +104,7 @@ const PaginationComponent = class {
|
|
|
104
104
|
};
|
|
105
105
|
}
|
|
106
106
|
render() {
|
|
107
|
-
return (h("nav", { key: '
|
|
107
|
+
return (h("nav", { key: '8fa4e333ccf87ae1533fb06433459926b5e01907' }, h("ol", { key: 'ab31cd8b5a958c174868753b274f5a9633757b54', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
|
|
108
108
|
const isItemActive = this.activePage === navItem;
|
|
109
109
|
return (h("li", { class: this.getItemClass(navItem) }, h("b2b-button", { onClick: () => this.setSelectedPage(navItem, index), active: isItemActive, disabled: isItemActive, size: "50", variant: "secondary" }, navItem)));
|
|
110
110
|
}), this.activePage !== this.totalPages && (h("li", { class: "b2b-pagination--next" }, h("b2b-button", { onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, PaginationConstants.NEXT))))));
|
|
@@ -11,12 +11,12 @@ const ParagraphComponent = class {
|
|
|
11
11
|
this.align = 'left';
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h("p", { key: '
|
|
14
|
+
return (h("p", { key: '116744e495658dd8f36730ae2660e66a65faaabc', class: {
|
|
15
15
|
'b2b-paragraph': true,
|
|
16
16
|
['b2b-paragraph--size-' + this.size]: true,
|
|
17
17
|
['b2b-paragraph--weight-' + this.weight]: true,
|
|
18
18
|
['b2b-paragraph--align-' + this.align]: true,
|
|
19
|
-
} }, h("slot", { key: '
|
|
19
|
+
} }, h("slot", { key: '276a51b52de920e5a0a2114cd49919c2d78d1dcd' })));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
ParagraphComponent.style = B2bParagraphStyle0;
|
|
@@ -22,11 +22,11 @@ const ProgressBarComponent = class {
|
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
24
|
const labelExists = this.label !== undefined && this.label !== '';
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '0a39b6b14e428d976a25f93a0e46319428b5d494' }, h("div", { key: '4c7aabd29013863f86e158147098253b135b46b1', class: {
|
|
26
26
|
[`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
|
|
27
|
-
} }, h("div", { key: '
|
|
27
|
+
} }, h("div", { key: '19b9840ce6204727dab53ef2d6b73092bfeaef36', class: "b2b-progress-bar__wrapper" }, h("div", { key: 'd60e6051f10c38d6708f0e35c45901cb5a7a30fc', class: "b2b-progress-bar__progress", style: {
|
|
28
28
|
width: `${this.getProgress()}%`,
|
|
29
|
-
} })), h("div", { key: '
|
|
29
|
+
} })), h("div", { key: '45ef8e099ae071712e67f7175dc409780621c4cc', class: {
|
|
30
30
|
'b2b-progress-bar__label': labelExists,
|
|
31
31
|
'b2b-progress-bar__label-none': !labelExists,
|
|
32
32
|
[`b2b-progress-bar__label__${this.labelPosition}-${this.labelType}`]: labelExists,
|
|
@@ -61,11 +61,11 @@ const B2bRadioButtonComponent = class {
|
|
|
61
61
|
return Array.from(document.querySelectorAll(`b2b-radio-button[name="${this.name}"]`)).filter((radio) => radio.value !== this.value);
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
64
|
+
return (h(Host, { key: 'e9f470e9014b1cd2e062a56fe3acefbb7fbce41e', onClick: this.onClick }, h("div", { key: 'dfbf91527d2ddcacb765e5642d3b01cdfa90f482', class: {
|
|
65
65
|
'b2b-radio': true,
|
|
66
66
|
'b2b-radio--error': this.invalid && !this.disabled,
|
|
67
67
|
'b2b-radio--disabled': this.disabled,
|
|
68
|
-
} }, h("div", { key: '
|
|
68
|
+
} }, h("div", { key: '9f31bd15de285e3f95f7493a2b38b8c30b88eb56', class: "b2b-radio-items" }, h("input", { key: '10224be09adc48cb363a40556248e7bb3fe1a542', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '39a120a1a44a1327c2123149ef22bfd356fc79e4', id: this.name, required: this.required, disabled: this.disabled }, this.label)), (this.hint !== undefined && !this.invalid) ||
|
|
69
69
|
(this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
|
|
70
70
|
}
|
|
71
71
|
get host() { return getElement(this); }
|
|
@@ -72,11 +72,11 @@ const RadioButtonGroupComponent = class {
|
|
|
72
72
|
this.removeChildText();
|
|
73
73
|
}
|
|
74
74
|
render() {
|
|
75
|
-
return (h(Host, { key: '
|
|
75
|
+
return (h(Host, { key: '55d628ab2c309c6001047fc70b21a78be453e7f4' }, h("div", { key: 'af11a6b06351922eecc52799adcea891466b8420', class: {
|
|
76
76
|
'b2b-radio-group': true,
|
|
77
77
|
'b2b-radio-group--error': this.invalid && !this.disabled,
|
|
78
78
|
[`b2b-radio-group--${this.alignment}`]: true,
|
|
79
|
-
} }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("fieldset", { key: '
|
|
79
|
+
} }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("fieldset", { key: 'fb4c191577566aad73e03effd5112a2356e05195' }, h("div", { key: '647d4df01ec64fc444897c2795073d5e629c2b1b', class: "b2b-radio-group-options" }, h("slot", { key: '3bfe34c9d3d6c1059554789a15a3c65b2d2251df' }))), (this.hint !== undefined && !this.invalid) ||
|
|
80
80
|
(this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
|
|
81
81
|
}
|
|
82
82
|
get host() { return getElement(this); }
|
|
@@ -9,7 +9,7 @@ const B2BRequiredSeparator = class {
|
|
|
9
9
|
this.label = 'Pflichtfeld';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '980ff451bc77415b4be2e6483913c25230df71c8' }, h("div", { key: '3372d15f1c22487cf5410ebb7ecd12fa2e040a3e', class: "b2b-required-separator__label" }, h("span", { key: 'fb94d9c46ea930c3d1481bdffe3fa3ff994521fd', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '4dd2f2f6f2718683a1398f60b5a50a02d103821b' }, this.label)), h("b2b-separator", { key: '093bb2473e62a0b57d535cc9a7652e93e06ec47f' })));
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
B2BRequiredSeparator.style = B2bRequiredSeparatorStyle0;
|
|
@@ -11,16 +11,16 @@ const RoundedIconComponent = class {
|
|
|
11
11
|
this.contentColor = 'var(--b2b-color-copy-default)';
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: 'aff67c5e9913d8a157fff480d26a1fb5cc72d849' }, h("div", { key: 'ed16eb230b738ad60b295f4208a99bc92b6aaaf6', style: {
|
|
15
15
|
['background-color']: this.color,
|
|
16
16
|
['border']: `1px solid ${this.borderColor || this.color}`,
|
|
17
17
|
}, class: {
|
|
18
18
|
'b2b-rounded-icon': true,
|
|
19
|
-
} }, h("div", { key: '
|
|
19
|
+
} }, h("div", { key: '1e35a094d38b7afc51c114b8e767ad12ba6c338e', style: {
|
|
20
20
|
['color']: this.contentColor,
|
|
21
|
-
} }, h("slot", { key: '
|
|
21
|
+
} }, h("slot", { key: 'e6906fa604583425a9678f6a2b452da4aa3f3703', name: "icon" })), h("div", { key: 'b1926c222caf5307a2ff9cbab455b607026ac883', style: {
|
|
22
22
|
['color']: this.contentColor,
|
|
23
|
-
} }, h("slot", { key: '
|
|
23
|
+
} }, h("slot", { key: '70493cb6e76136a4d7c95ed8cd1d3c2d10ec00b8', name: "text" })))));
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
RoundedIconComponent.style = B2bRoundedIconStyle0;
|
|
@@ -8,7 +8,7 @@ const ScrollableContainerComponent = class {
|
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: 'cf1acdef7e26ad1d85bde804d4a3d51ceabe38c8' }, h("slot", { key: '5ec43c51cdac7a67ce146859ac0398ecca013852' })));
|
|
12
12
|
}
|
|
13
13
|
get host() { return getElement(this); }
|
|
14
14
|
};
|
|
@@ -25,7 +25,7 @@ const SearchComponent = class {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
|
-
return (h(Host, { key: '
|
|
28
|
+
return (h(Host, { key: '6d7613cdd4db258a966144d82e39d12e03d68e03' }, h("b2b-input-group", { key: '2d2c92286f0ca1de3eedeedfd3450de6df646ff2', disabled: this.disabled }, h("b2b-input-list", { key: '8bd4b9debfed77a5692f35efab78842279f0cb01', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '70e790224ee58ce4b1fecdeaa97fcb9d83d7bf28' })), h("b2b-button", { key: '18e56ed573a9a5213dbcbc656932921e2b834295', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon", { key: 'ea1b114947eb214743793cdffa34ea400b1934b8', icon: "b2b_icon-search", clickable: true })))));
|
|
29
29
|
}
|
|
30
30
|
get hostElement() { return getElement(this); }
|
|
31
31
|
};
|
|
@@ -9,7 +9,7 @@ const B2bSeparatorComponent = class {
|
|
|
9
9
|
this.alignment = 'horizontal';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '42031c92d9e0e60bd3dbf226e189e81908a3720f' }, h("div", { key: '6cd11f5f5365ad23c33d0da06556dad6637f29f0', class: {
|
|
13
13
|
[`b2b-separator--${this.alignment}`]: true,
|
|
14
14
|
} })));
|
|
15
15
|
}
|
|
@@ -124,7 +124,7 @@ const B2bTabGroupComponent = class {
|
|
|
124
124
|
});
|
|
125
125
|
}
|
|
126
126
|
render() {
|
|
127
|
-
return (h(Host, { key: '
|
|
127
|
+
return (h(Host, { key: '33a3227fb2b349613aaeb8ae7eca0bb785182086' }, h("slot", { key: '6538635cfb20b9ed81cd522aecfdfe407bc96268', name: "tab" }), h("b2b-separator", { key: 'b221b6f6581909562c04e46aca9215e8636d7795' }), h("slot", { key: 'e3b6b0493ee708c91eab561a63445bd9475a90c8', name: "panel" })));
|
|
128
128
|
}
|
|
129
129
|
get hostElement() { return getElement(this); }
|
|
130
130
|
};
|
|
@@ -10,7 +10,7 @@ const B2bTabPanelComponent = class {
|
|
|
10
10
|
this.generatedId = i++;
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: 'ad413e9abc62b193c83e31dcc54da1ef3aa2c747', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '8227beb87efef5909ec6a83800f934fa6c601be3', class: "b2b-tab-panel" }, h("slot", { key: '98e8124154d255065c9b5ca6984034f010eafe68' }))));
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
B2bTabPanelComponent.style = B2bTabPanelStyle0;
|
|
@@ -23,12 +23,12 @@ const B2bTabComponent = class {
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
return (h(Host, { key: 'd17372258d62a1652fc8b45af56cee6fc7901c37', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: '3064b699713fe46da63b7b7558911838ffc758db', class: {
|
|
27
27
|
'b2b-tab': true,
|
|
28
28
|
'b2b-tab--selected': this.selected,
|
|
29
29
|
'b2b-tab--disabled': this.disabled,
|
|
30
30
|
'b2b-tab--error': this.invalid,
|
|
31
|
-
} }, h("slot", { key: '
|
|
31
|
+
} }, h("slot", { key: 'e9219b68d0ff9e572a07e800589f623f732a6895' }))));
|
|
32
32
|
}
|
|
33
33
|
get hostElement() { return getElement(this); }
|
|
34
34
|
static get watchers() { return {
|
|
@@ -41,14 +41,14 @@ const TableCellComponent = class {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
44
|
-
return (h(Host, { key: '
|
|
44
|
+
return (h(Host, { key: '0772710a7a825fe3d27eb3b01da736ad44dc3ced', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
|
|
45
45
|
'b2b-table-cell': true,
|
|
46
46
|
['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
|
|
47
47
|
['b2b-table-cell--ellipsis']: this.useTextEllipsis,
|
|
48
48
|
['b2b-table-cell--' + this.align]: true,
|
|
49
49
|
['b2b-table-cell--divider']: this.divider,
|
|
50
50
|
[`b2b-table-cell-color-${this.color}`]: true,
|
|
51
|
-
}, role: "cell" }, h("slot", { key: '
|
|
51
|
+
}, role: "cell" }, h("slot", { key: 'e7f3aa365cb8734174d901dcd249da32850253ac' })));
|
|
52
52
|
}
|
|
53
53
|
get host() { return getElement(this); }
|
|
54
54
|
};
|
|
@@ -128,7 +128,7 @@ const TableHeaderComponent = class {
|
|
|
128
128
|
this.setIconPlacement();
|
|
129
129
|
}
|
|
130
130
|
render() {
|
|
131
|
-
return (h(Host, { key: '
|
|
131
|
+
return (h(Host, { key: '227b70e37cb873fcdf87316989847be6982518be', class: {
|
|
132
132
|
[`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
|
|
133
133
|
'b2b-table-header--divider': this.divider,
|
|
134
134
|
[`b2b-table-header--${this.size}`]: true,
|
|
@@ -98,12 +98,12 @@ const TableRowComponent = class {
|
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
render() {
|
|
101
|
-
return (h(Host, { key: '
|
|
101
|
+
return (h(Host, { key: 'a9066c8505c69a1e63136875e28ab9917d9f758f', class: {
|
|
102
102
|
'b2b-table-row': true,
|
|
103
103
|
['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
|
|
104
104
|
['b2b-table-row--highlight']: this.highlight,
|
|
105
105
|
[`b2b-table-row--color-${this.getRowColor()}`]: true,
|
|
106
|
-
}, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '
|
|
106
|
+
}, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '52ac4da879258e21c1543f94cdec62bc94884328' })));
|
|
107
107
|
}
|
|
108
108
|
get hostElement() { return getElement(this); }
|
|
109
109
|
};
|
|
@@ -135,11 +135,11 @@ const TableRowgroupComponent = class {
|
|
|
135
135
|
this.makeHeaderRowNotSelectable();
|
|
136
136
|
}
|
|
137
137
|
render() {
|
|
138
|
-
return (h(Host, { key: '
|
|
138
|
+
return (h(Host, { key: '13b79ec38e373910af52c3f3a871a18a543be584', class: {
|
|
139
139
|
['b2b-table-rowgroup__' + this.type]: true,
|
|
140
140
|
'b2b-table-rowgroup--fixed': this.fixed,
|
|
141
141
|
'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
|
|
142
|
-
}, role: "rowgroup" }, h("slot", { key: '
|
|
142
|
+
}, role: "rowgroup" }, h("slot", { key: '75343b8d985000f3fb969a9b7ab89d037e19b7ce' })));
|
|
143
143
|
}
|
|
144
144
|
get host() { return getElement(this); }
|
|
145
145
|
};
|
|
@@ -66,9 +66,9 @@ const TableComponent = class {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
render() {
|
|
69
|
-
return (h(Host, { key: '
|
|
69
|
+
return (h(Host, { key: '73b4eeeca5aa422ede7b053daa83e427c5431407', class: {
|
|
70
70
|
['b2b-table--' + this.size]: true,
|
|
71
|
-
}, role: "table" }, h("slot", { key: '
|
|
71
|
+
}, role: "table" }, h("slot", { key: '33ffe4f4b0becdd3f5a0897d5f0483daecc1c1bf' })));
|
|
72
72
|
}
|
|
73
73
|
get host() { return getElement(this); }
|
|
74
74
|
};
|
|
@@ -50,10 +50,10 @@ const B2BTextareaComponent = class {
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
53
|
-
return (h(Host, { key: '
|
|
53
|
+
return (h(Host, { key: '3269a163de385e193c1d67643bb0488015d715b1', class: {
|
|
54
54
|
'b2b-textarea': true,
|
|
55
55
|
'b2b-textarea--error': this.invalid && !this.disabled,
|
|
56
|
-
} }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '
|
|
56
|
+
} }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '294b3815a1a775b5e79eb405877925bf2251ddc5', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
|
|
57
57
|
(this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
|
|
58
58
|
}
|
|
59
59
|
get hostElement() { return getElement(this); }
|
|
@@ -37,13 +37,13 @@ const B2bToggleButtonComponent = class {
|
|
|
37
37
|
return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
|
|
38
38
|
}
|
|
39
39
|
render() {
|
|
40
|
-
return (h(Host, { key: '
|
|
40
|
+
return (h(Host, { key: '6e25a1828cae4a3649081c9494b04f59fd3b0698', onClick: this.onClick }, h("span", { key: '06b61fa400dd95dbbef5345c7f28de6e17a2c23a', class: {
|
|
41
41
|
'b2b-toggle-button': true,
|
|
42
42
|
'b2b-toggle-button--disabled': this.disabled,
|
|
43
|
-
} }, h("input", { key: '
|
|
43
|
+
} }, h("input", { key: '44bf0c45d9c500c9ed269b8651757b2f423d74b7', tabindex: 0, class: {
|
|
44
44
|
'b2b-toggle-button__input': true,
|
|
45
45
|
'b2b-toggle-button__input--disabled': this.disabled,
|
|
46
|
-
}, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '
|
|
46
|
+
}, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '2f151a52b3c72735b8c7b28d5fd615ef9a1e7ece', id: this.name, tabindex: -1, class: {
|
|
47
47
|
'b2b-toggle-button__label': true,
|
|
48
48
|
'b2b-toggle-button__label--disabled': this.disabled,
|
|
49
49
|
'b2b-toggle-button__label--checked': this.checked && !this.disabled,
|
|
@@ -39,11 +39,11 @@ const B2BToggleChipComponent = class {
|
|
|
39
39
|
this.disabled = false;
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: '8373455857bb583dcc3893c3ac42cda61fe9aaed' }, h("span", { key: '7f193051116571785580b48cc126f2b254d849bf', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
|
|
43
43
|
'b2b-toggle-chip': true,
|
|
44
|
-
} }, h("input", { key: '
|
|
44
|
+
} }, h("input", { key: '795085195e7dad551376e18a5115881f930b7189', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
|
|
45
45
|
'b2b-toggle-chip__input': true,
|
|
46
|
-
}, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '
|
|
46
|
+
}, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '66d2b68c7947b9de58a7acf917980e5bac6a2f2d', id: this.name, tabIndex: -1, class: {
|
|
47
47
|
'b2b-toggle-chip__label': true,
|
|
48
48
|
[`b2b-toggle-chip__label--${this.variant}`]: true,
|
|
49
49
|
'b2b-toggle-chip__label--active': this.active,
|
|
@@ -51,10 +51,10 @@ const B2BToggleGroup = class {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: 'e6a8d71713f388ed7f41ac2b3a887143d1b53b71' }, h("div", { key: '04ac46af3a2226a1432c014fbb32ce860dc1adb0', class: {
|
|
55
55
|
'b2b-toggle-group': true,
|
|
56
56
|
'b2b-toggle-group--disabled': this.disabled,
|
|
57
|
-
} }, h("fieldset", { key: '
|
|
57
|
+
} }, h("fieldset", { key: '1c50c9ab57986021c1396a19075d2885f8627d2e' }, h("slot", { key: 'a0a58ff3d0ccf598dc52a9e8f1a2f350bf5a3246' })))));
|
|
58
58
|
}
|
|
59
59
|
get host() { return getElement(this); }
|
|
60
60
|
static get watchers() { return {
|
|
@@ -44,17 +44,17 @@ const B2bToggleSwitchComponent = class {
|
|
|
44
44
|
render() {
|
|
45
45
|
// workaround for purgecss as safelist doesn't work
|
|
46
46
|
const isLeft = this.labelPosition === 'left';
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: 'a4ae1c68c4d86a4fbf8087bb3957cab828302395' }, h("div", { key: '03170b4af83dab44488db452b8f9377439d41a3f', class: {
|
|
48
48
|
'b2b-toggle': true,
|
|
49
49
|
'b2b-toggle--disabled': this.disabled,
|
|
50
50
|
'b2b-toggle--checked': this.state,
|
|
51
|
-
} }, h("div", { key: '
|
|
51
|
+
} }, h("div", { key: '402d63e72ca87265c953922a217245980dd89677', class: {
|
|
52
52
|
'b2b-toggle__label': true,
|
|
53
53
|
'b2b-toggle__label--left': isLeft,
|
|
54
|
-
} }, h("span", { key: '
|
|
54
|
+
} }, h("span", { key: 'd433a55594e8912025cd2fd965ebce9b6f3e4527', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '263e8a7aeb92eb55f147a82294bfb8d1ba21a10a', class: {
|
|
55
55
|
'b2b-toggle__icon': true,
|
|
56
56
|
'b2b-toggle__icon--show': this.state,
|
|
57
|
-
}, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '
|
|
57
|
+
}, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '96e0d898cba16910264b4639908859b42128c2b0', 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: {
|
|
58
58
|
'b2b-toggle__text': true,
|
|
59
59
|
'b2b-toggle__text--left': isLeft,
|
|
60
60
|
} }, this.label))))));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-ab9eb36d.js';
|
|
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-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--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-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-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:
|
|
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-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--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-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-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 = class {
|
|
@@ -58,13 +58,13 @@ const B2BTooltipComponent = class {
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
render() {
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: '3c6ed0fa58a1f770366975eb2ea17ef8bd48a79f', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '3b2d5106d1006a6ddb9cf4b002fcf1e8263f5408', class: {
|
|
62
62
|
[`b2b-tooltip--${this.position}`]: true,
|
|
63
63
|
'b2b-tooltip__trigger': true,
|
|
64
|
-
} }, h("slot", { key: '
|
|
64
|
+
} }, h("slot", { key: '737a6330346847e08e06ba1b651a9a2cceb7dd30' }), h("div", { key: '5b93917d1eafbee55adc412856d18d77aee7cb5a', class: {
|
|
65
65
|
'b2b-tooltip__content': true,
|
|
66
66
|
'b2b-tooltip--visible': this.opened,
|
|
67
|
-
} }, h("slot", { key: '
|
|
67
|
+
} }, h("slot", { key: '77c7cf53353c9d5f689c3d18c4921107d923d811', name: "content" }, this.content)))));
|
|
68
68
|
}
|
|
69
69
|
get host() { return getElement(this); }
|
|
70
70
|
static get watchers() { return {
|
|
@@ -12,7 +12,7 @@ const WizardIconComponent = class {
|
|
|
12
12
|
this.checkIcon = true;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: 'f2504601523ffc9069b0b20082547ef3580f6841' }, h("div", { key: '457ba0f1c0adc0b3b5522ac71e83ca3bbbd82cbd', class: {
|
|
16
16
|
'b2b-wizard-icon': true,
|
|
17
17
|
} }, this.state === WizardStatus.COMPLETED && (h("b2b-rounded-icon", { color: "var(--b2b-color-success-50)", "content-color": "var(--b2b-color-success-100)" }, this.checkIcon ? (h("b2b-icon", { slot: "icon", icon: "b2b_icon-check" })) : (h("span", { slot: "text" }, this.step)))), this.state === WizardStatus.PENDING && (h("b2b-rounded-icon", { color: "var(--b2b-color-icon-default)", "content-color": "var(--b2b-color-icon-inverted)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DISABLED && (h("b2b-rounded-icon", { color: "var(--b2b-color-grey-100)", "content-color": "var(--b2b-color-grey-400)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DEFAULT && (h("b2b-rounded-icon", { color: "transparent", "border-color": "var(--b2b-color-icon-secondary)", "content-color": "var(--b2b-color-icon-secondary)" }, h("span", { slot: "text" }, this.step))))));
|
|
18
18
|
}
|
|
@@ -12,10 +12,10 @@ const WizardStepComponent = class {
|
|
|
12
12
|
this.checkIcon = true;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: 'c13f6fb782c9d9a61240ba2ab7a5733e7be03507' }, h("div", { key: '5fb11e13cf4e047ee58ab3b820982f674eed94c9', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '4089f7b7703d27af414482549b125afcbdaf7f5e', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '323510afcecde0105b7eec43f33231c9c8228fa8', class: {
|
|
16
16
|
'b2b_wizard__step__label': true,
|
|
17
17
|
'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
|
|
18
|
-
} }, h("slot", { key: '
|
|
18
|
+
} }, h("slot", { key: '6aa9b3f33f753fdce25d6992efc321f2b3a7985b' })))));
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
WizardStepComponent.style = B2bWizardStepStyle0;
|
|
@@ -49,7 +49,7 @@ const WizardComponent = class {
|
|
|
49
49
|
this.setStepsState();
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: '1fb548e71aa9d672a0b922581c19909040781926' }, h("div", { key: '9444aeafb7cd39aa89e5efb4991274c631067f4d', class: "b2b_wizard" }, h("slot", { key: '3c654bbee61932d84cda6de0438bf4550b14be3a' }))));
|
|
53
53
|
}
|
|
54
54
|
get host() { return getElement(this); }
|
|
55
55
|
};
|