@otto-de/b2b-core-components 1.4.0-beta.1 → 1.5.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/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-03beebf5.entry.js +1 -0
- package/dist/b2b-core-components/p-0675225a.entry.js +1 -0
- package/dist/b2b-core-components/p-06ef4c5e.entry.js +1 -0
- package/dist/b2b-core-components/{p-5c316460.entry.js → p-080a0741.entry.js} +1 -1
- package/dist/b2b-core-components/p-0f8bd310.entry.js +1 -0
- package/dist/b2b-core-components/p-163fe245.entry.js +1 -0
- package/dist/b2b-core-components/p-1e1bdb50.entry.js +1 -0
- package/dist/b2b-core-components/p-1eb784f9.entry.js +1 -0
- package/dist/b2b-core-components/p-21bfe96a.entry.js +1 -0
- package/dist/b2b-core-components/p-2b3a67db.entry.js +1 -0
- package/dist/b2b-core-components/p-38791fb9.entry.js +1 -0
- package/dist/b2b-core-components/p-3cd9088a.entry.js +1 -0
- package/dist/b2b-core-components/p-42da7a57.entry.js +1 -0
- package/dist/b2b-core-components/p-4fc894c8.entry.js +1 -0
- package/dist/b2b-core-components/p-5c2db521.entry.js +1 -0
- package/dist/b2b-core-components/p-5d7866e8.entry.js +1 -0
- package/dist/b2b-core-components/{p-34f6555e.entry.js → p-60c7f6f7.entry.js} +1 -1
- package/dist/b2b-core-components/{p-400b3111.entry.js → p-6997ceb0.entry.js} +1 -1
- package/dist/b2b-core-components/p-710600ca.entry.js +1 -0
- package/dist/b2b-core-components/p-75f84f53.entry.js +1 -0
- package/dist/b2b-core-components/p-76e240f8.entry.js +1 -0
- package/dist/b2b-core-components/p-7b04f40b.entry.js +1 -0
- package/dist/b2b-core-components/p-83cb9d03.entry.js +1 -0
- package/dist/b2b-core-components/p-b95089a7.entry.js +1 -0
- package/dist/b2b-core-components/p-bb5e7c53.js +1 -0
- package/dist/b2b-core-components/p-bcf36531.entry.js +1 -0
- package/dist/b2b-core-components/p-bda69b9a.entry.js +1 -0
- package/dist/b2b-core-components/p-c20baf90.entry.js +1 -0
- package/dist/b2b-core-components/p-c8294029.entry.js +1 -0
- package/dist/b2b-core-components/{p-144a3c59.entry.js → p-c9dcb35a.entry.js} +1 -1
- package/dist/b2b-core-components/p-cf010e88.entry.js +1 -0
- package/dist/b2b-core-components/p-dcd80266.entry.js +1 -0
- package/dist/b2b-core-components/p-e1622cb8.entry.js +1 -0
- package/dist/b2b-core-components/p-e3cd216c.entry.js +1 -0
- package/dist/b2b-core-components/p-fa6cd2ac.entry.js +1 -0
- package/dist/b2b-core-components/p-fe96d81a.entry.js +1 -0
- package/dist/cjs/b2b-alert.cjs.entry.js +1 -1
- package/dist/cjs/b2b-anchor.cjs.entry.js +1 -1
- package/dist/cjs/b2b-button_2.cjs.entry.js +2 -2
- 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-core-components.cjs.js +1 -1
- package/dist/cjs/b2b-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/b2b-headline.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 +19 -5
- package/dist/cjs/b2b-input_2.cjs.entry.js +2 -2
- package/dist/cjs/b2b-label.cjs.entry.js +1 -1
- package/dist/cjs/b2b-modal.cjs.entry.js +1 -1
- package/dist/cjs/b2b-pagination.cjs.entry.js +1 -1
- package/dist/cjs/b2b-paragraph.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 +3 -1
- package/dist/cjs/b2b-scrollable-container.cjs.entry.js +1 -1
- package/dist/cjs/b2b-search.cjs.entry.js +6 -1
- package/dist/cjs/b2b-separator.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tab.cjs.entry.js +1 -1
- package/dist/cjs/b2b-table-cell_2.cjs.entry.js +9 -9
- package/dist/cjs/b2b-table-row.cjs.entry.js +7 -8
- package/dist/cjs/b2b-table-rowgroup.cjs.entry.js +4 -4
- package/dist/cjs/b2b-table.cjs.entry.js +4 -4
- package/dist/cjs/b2b-textarea.cjs.entry.js +1 -1
- package/dist/cjs/b2b-toggle-button.cjs.entry.js +1 -1
- package/dist/cjs/b2b-toggle-group.cjs.entry.js +1 -1
- package/dist/cjs/b2b-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/b2b-wizard-icon.cjs.entry.js +5 -3
- package/dist/cjs/b2b-wizard-step.cjs.entry.js +26 -0
- package/dist/cjs/b2b-wizard.cjs.entry.js +61 -0
- package/dist/cjs/index-496aa5dd.js +14 -6
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{types-ef85a0bf.js → table.types-bb0926c7.js} +2 -2
- package/dist/cjs/wizard.types-690c64bb.js +10 -0
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/alert/alert.css +6 -4
- package/dist/collection/components/anchor/anchor.css +3 -4
- package/dist/collection/components/button/button.css +3 -4
- package/dist/collection/components/card/card.css +3 -4
- package/dist/collection/components/checkbox/checkbox.css +4 -5
- package/dist/collection/components/checkbox-group/checkbox-group.css +4 -5
- package/dist/collection/components/dropdown/dropdown.css +4 -5
- package/dist/collection/components/headline/headline.css +3 -4
- package/dist/collection/components/icon/icon.css +3 -4
- package/dist/collection/components/input/input.css +4 -5
- package/dist/collection/components/input-group/input-group.css +4 -5
- package/dist/collection/components/input-group/input-group.js +22 -3
- package/dist/collection/components/input-list/input-list.css +3 -4
- package/dist/collection/components/label/label.css +4 -5
- package/dist/collection/components/modal/modal.css +3 -4
- package/dist/collection/components/pagination/pagination.css +3 -4
- package/dist/collection/components/paragraph/paragraph.css +4 -5
- package/dist/collection/components/radio/radio.css +4 -5
- package/dist/collection/components/radio-group/radio-group.css +4 -5
- package/dist/collection/components/required-separator/required-separator.css +3 -4
- package/dist/collection/components/rounded-icon/rounded-icon.css +4 -5
- package/dist/collection/components/rounded-icon/rounded-icon.js +19 -0
- package/dist/collection/components/scrollable-container/scrollable-container.css +3 -4
- package/dist/collection/components/search/search.js +15 -1
- package/dist/collection/components/search/search.stories.js +1 -0
- package/dist/collection/components/separator/separator.css +3 -4
- package/dist/collection/components/spinner/spinner.css +3 -4
- package/dist/collection/components/tab/tab.css +3 -4
- package/dist/collection/components/tab-panel/tab-panel.css +3 -4
- package/dist/collection/components/table/table-cell/table-cell.css +3 -4
- package/dist/collection/components/table/table-cell/table-cell.js +4 -4
- package/dist/collection/components/table/table-header/table-header.css +3 -4
- package/dist/collection/components/table/table-header/table-header.js +3 -3
- package/dist/collection/components/table/table-row/table-row.css +3 -4
- package/dist/collection/components/table/table-row/table-row.js +3 -4
- package/dist/collection/components/table/table-rowgroup/table-rowgroup.css +3 -4
- package/dist/collection/components/table/table-rowgroup/table-rowgroup.js +2 -2
- package/dist/collection/components/table/table.css +3 -4
- package/dist/collection/components/table/table.js +2 -2
- package/dist/collection/components/table/table.stories.js +1 -1
- package/dist/collection/components/textarea/textarea.css +4 -5
- package/dist/collection/components/toggle-button/toggle-button.css +3 -4
- package/dist/collection/components/toggle-group/toggle-group.css +3 -4
- package/dist/collection/components/tooltip/tooltip.css +4 -5
- package/dist/collection/components/wizard/wizard-step.js +95 -0
- package/dist/collection/components/wizard/wizard.css +240 -0
- package/dist/collection/components/wizard/wizard.js +125 -0
- package/dist/collection/components/wizard/wizard.stories.js +44 -0
- package/dist/collection/components/wizard-icon/wizard-icon.css +3 -4
- package/dist/collection/components/wizard-icon/wizard-icon.js +38 -8
- package/dist/collection/components/wizard-icon/wizard-icon.stories.js +14 -3
- package/dist/collection/{components/table/types.js → utils/types/table.types.js} +2 -2
- package/dist/collection/utils/types/wizard.types.js +6 -0
- package/dist/components/b2b-alert.js +1 -1
- package/dist/components/b2b-anchor.js +1 -1
- package/dist/components/b2b-card.js +1 -1
- package/dist/components/b2b-checkbox-group.js +1 -1
- package/dist/components/b2b-checkbox.js +1 -1
- package/dist/components/b2b-dropdown.js +1 -1
- package/dist/components/b2b-label.js +1 -1
- package/dist/components/b2b-modal.js +1 -1
- package/dist/components/b2b-pagination.js +1 -1
- package/dist/components/b2b-paragraph.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 +7 -2
- package/dist/components/b2b-tab-panel.js +1 -1
- package/dist/components/b2b-tab.js +1 -1
- package/dist/components/b2b-table-row.js +2 -3
- package/dist/components/b2b-table-rowgroup.js +2 -2
- package/dist/components/b2b-table.js +2 -2
- package/dist/components/b2b-textarea.js +1 -1
- package/dist/components/b2b-toggle-button.js +1 -1
- package/dist/components/b2b-toggle-group.js +1 -1
- package/dist/components/b2b-tooltip.js +1 -1
- package/dist/components/b2b-wizard-icon.js +1 -47
- package/dist/components/b2b-wizard-step.d.ts +11 -0
- package/dist/components/b2b-wizard-step.js +62 -0
- package/dist/components/b2b-wizard.d.ts +11 -0
- package/dist/components/b2b-wizard.js +79 -0
- package/dist/components/button.js +1 -1
- package/dist/components/headline.js +1 -1
- package/dist/components/icon.js +1 -1
- package/dist/components/input-group.js +20 -5
- package/dist/components/input-list-option.js +1 -1
- package/dist/components/input-list.js +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/rounded-icon.js +4 -1
- 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 +2 -2
- package/dist/components/{types.js → table.types.js} +2 -2
- package/dist/components/wizard-icon.js +52 -0
- package/dist/components/wizard.types.js +8 -0
- package/dist/custom-elements.json +110 -0
- package/dist/esm/b2b-alert.entry.js +1 -1
- package/dist/esm/b2b-anchor.entry.js +1 -1
- package/dist/esm/b2b-button_2.entry.js +2 -2
- 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-core-components.js +1 -1
- package/dist/esm/b2b-dropdown.entry.js +1 -1
- package/dist/esm/b2b-headline.entry.js +1 -1
- package/dist/esm/b2b-icon.entry.js +1 -1
- package/dist/esm/b2b-input-group_2.entry.js +19 -5
- package/dist/esm/b2b-input_2.entry.js +2 -2
- package/dist/esm/b2b-label.entry.js +1 -1
- package/dist/esm/b2b-modal.entry.js +1 -1
- package/dist/esm/b2b-pagination.entry.js +1 -1
- package/dist/esm/b2b-paragraph.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 +3 -1
- package/dist/esm/b2b-scrollable-container.entry.js +1 -1
- package/dist/esm/b2b-search.entry.js +6 -1
- package/dist/esm/b2b-separator.entry.js +1 -1
- package/dist/esm/b2b-tab-panel.entry.js +1 -1
- package/dist/esm/b2b-tab.entry.js +1 -1
- package/dist/esm/b2b-table-cell_2.entry.js +3 -3
- package/dist/esm/b2b-table-row.entry.js +2 -3
- 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 +1 -1
- package/dist/esm/b2b-toggle-button.entry.js +1 -1
- package/dist/esm/b2b-toggle-group.entry.js +1 -1
- package/dist/esm/b2b-tooltip.entry.js +1 -1
- package/dist/esm/b2b-wizard-icon.entry.js +5 -3
- package/dist/esm/b2b-wizard-step.entry.js +22 -0
- package/dist/esm/b2b-wizard.entry.js +57 -0
- package/dist/esm/index-026605c2.js +14 -6
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{types-5aa59787.js → table.types-9943c937.js} +2 -2
- package/dist/esm/wizard.types-2a03b8e0.js +8 -0
- package/dist/types/components/input-group/input-group.d.ts +4 -0
- package/dist/types/components/rounded-icon/rounded-icon.d.ts +4 -0
- package/dist/types/components/search/search.d.ts +1 -0
- package/dist/types/components/table/table-cell/table-cell.d.ts +1 -1
- package/dist/types/components/table/table-header/table-header.d.ts +1 -1
- package/dist/types/components/table/table-row/table-row.d.ts +1 -1
- package/dist/types/components/table/table-rowgroup/table-rowgroup.d.ts +1 -1
- package/dist/types/components/table/table.d.ts +1 -1
- package/dist/types/components/wizard/wizard-step.d.ts +11 -0
- package/dist/types/components/wizard/wizard.d.ts +19 -0
- package/dist/types/components/wizard/wizard.stories.d.ts +5 -0
- package/dist/types/components/wizard-icon/wizard-icon.d.ts +6 -2
- package/dist/types/components/wizard-icon/wizard-icon.stories.d.ts +2 -0
- package/dist/types/components.d.ts +98 -6
- package/dist/types/utils/types/wizard.types.d.ts +8 -0
- package/dist/web-types.json +109 -4
- package/package.json +3 -3
- package/dist/b2b-core-components/p-08a50b6c.entry.js +0 -1
- package/dist/b2b-core-components/p-10414c0b.entry.js +0 -1
- package/dist/b2b-core-components/p-1493f7df.entry.js +0 -1
- package/dist/b2b-core-components/p-15a499b0.entry.js +0 -1
- package/dist/b2b-core-components/p-22dab2b4.entry.js +0 -1
- package/dist/b2b-core-components/p-4b25559c.entry.js +0 -1
- package/dist/b2b-core-components/p-515eb49e.entry.js +0 -1
- package/dist/b2b-core-components/p-541ffefb.entry.js +0 -1
- package/dist/b2b-core-components/p-5572aab3.entry.js +0 -1
- package/dist/b2b-core-components/p-5952fa73.entry.js +0 -1
- package/dist/b2b-core-components/p-686d6598.entry.js +0 -1
- package/dist/b2b-core-components/p-6c9b0c23.entry.js +0 -1
- package/dist/b2b-core-components/p-6e0e6acc.entry.js +0 -1
- package/dist/b2b-core-components/p-6e3b27cd.entry.js +0 -1
- package/dist/b2b-core-components/p-7af1b977.entry.js +0 -1
- package/dist/b2b-core-components/p-7ca9b704.entry.js +0 -1
- package/dist/b2b-core-components/p-81a52d1a.entry.js +0 -1
- package/dist/b2b-core-components/p-8970ae74.entry.js +0 -1
- package/dist/b2b-core-components/p-925e40af.entry.js +0 -1
- package/dist/b2b-core-components/p-965ae161.entry.js +0 -1
- package/dist/b2b-core-components/p-99f8cf34.entry.js +0 -1
- package/dist/b2b-core-components/p-a6248754.entry.js +0 -1
- package/dist/b2b-core-components/p-b6e0a6ea.entry.js +0 -1
- package/dist/b2b-core-components/p-ba74cde5.entry.js +0 -1
- package/dist/b2b-core-components/p-c2bcf0a8.entry.js +0 -1
- package/dist/b2b-core-components/p-d6ce3259.entry.js +0 -1
- package/dist/b2b-core-components/p-da6a1f55.entry.js +0 -1
- package/dist/b2b-core-components/p-fc639b29.entry.js +0 -1
- package/dist/b2b-core-components/p-ff49e330.entry.js +0 -1
- /package/dist/b2b-core-components/{p-4130f1ae.js → p-de2c1003.js} +0 -0
- /package/dist/types/{components/table/types.d.ts → utils/types/table.types.d.ts} +0 -0
|
@@ -3,6 +3,10 @@ export declare class RoundedIconComponent {
|
|
|
3
3
|
* Use any type including hex, rgb or css custom properties
|
|
4
4
|
* as long as you pass it as a string */
|
|
5
5
|
color: string;
|
|
6
|
+
/** The color of the border of the circle around the icon or text.
|
|
7
|
+
* Use any type including hex, rgb or css custom properties
|
|
8
|
+
* as long as you pass it as a string */
|
|
9
|
+
borderColor: string;
|
|
6
10
|
/** The color of the text or icon within the circle.
|
|
7
11
|
* Use any type including hex, rgb or css custom properties
|
|
8
12
|
* as long as you pass it as a string */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ContentAlignment, TableSizes, TableColourOptions } from '
|
|
1
|
+
import { ContentAlignment, TableSizes, TableColourOptions } from '../../../utils/types/table.types';
|
|
2
2
|
export declare class TableCellComponent {
|
|
3
3
|
host: HTMLB2bTableCellElement;
|
|
4
4
|
/** Whether text should wrap or truncate.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EventEmitter } from '../../../stencil-public-runtime';
|
|
2
|
-
import { TableSortDirections } from '
|
|
2
|
+
import { TableSortDirections } from '../../../utils/types/table.types';
|
|
3
3
|
export declare class TableHeaderComponent {
|
|
4
4
|
hostElement: HTMLB2bTableHeaderElement;
|
|
5
5
|
/** adds a border to the right of the header. **/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EventEmitter } from '../../../stencil-public-runtime';
|
|
2
|
-
import { TableRowTypes, TableColourOptions } from '
|
|
2
|
+
import { TableRowTypes, TableColourOptions } from '../../../utils/types/table.types';
|
|
3
3
|
export declare class TableRowComponent {
|
|
4
4
|
hostElement: HTMLB2bTableRowElement;
|
|
5
5
|
/** Whether the row will be highlighted on mouse over **/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TableRowgroupTypes } from '
|
|
1
|
+
import { TableRowgroupTypes } from '../../../utils/types/table.types';
|
|
2
2
|
export declare class TableRowgroupComponent {
|
|
3
3
|
host: HTMLB2bTableRowgroupElement;
|
|
4
4
|
/** Rowgroup allows grouping rows by context: header, body or footer.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
-
import { TableSizes } from '
|
|
2
|
+
import { TableSizes } from '../../utils/types/table.types';
|
|
3
3
|
import { ColumnSortChangeEventDetail } from '../../utils/interfaces/interaction.interface';
|
|
4
4
|
export declare class TableComponent {
|
|
5
5
|
host: HTMLB2bTableElement;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { WizardSteps, WizardStatus } from '../../utils/types/wizard.types';
|
|
2
|
+
export declare class WizardStepComponent {
|
|
3
|
+
/** Use when wizard has property custom true. The state of the step */
|
|
4
|
+
state: WizardStatus;
|
|
5
|
+
/** Use when wizard has property custom true. The step number */
|
|
6
|
+
step: WizardSteps;
|
|
7
|
+
/** Defaults to true. It will show a checkmark icon when a step is completed.
|
|
8
|
+
* Set as false to show the step number */
|
|
9
|
+
checkIcon: boolean;
|
|
10
|
+
render(): any;
|
|
11
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { WizardSteps } from '../../utils/types/wizard.types';
|
|
2
|
+
export declare class WizardComponent {
|
|
3
|
+
host: HTMLB2bWizardElement;
|
|
4
|
+
/** The current active step */
|
|
5
|
+
activeStep: WizardSteps | '0';
|
|
6
|
+
/** By default, is false, where the wizard will handle steps states.
|
|
7
|
+
* If set to true, steps state must be handled manually. */
|
|
8
|
+
custom: boolean;
|
|
9
|
+
/** Defaults to true. It will show a checkmark icon when a step is completed.
|
|
10
|
+
* Set as false to show the step number */
|
|
11
|
+
checkIcon: boolean;
|
|
12
|
+
private MAX_STEP_AMOUNT;
|
|
13
|
+
componentWillLoad(): void;
|
|
14
|
+
componentWillRender(): void;
|
|
15
|
+
private getChildSteps;
|
|
16
|
+
private setStepsState;
|
|
17
|
+
private getStepState;
|
|
18
|
+
render(): any;
|
|
19
|
+
}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
import { WizardStatus, WizardSteps } from '../../utils/types/wizard.types';
|
|
1
2
|
export declare class WizardIconComponent {
|
|
2
3
|
/** The step number */
|
|
3
|
-
step:
|
|
4
|
+
step: WizardSteps;
|
|
4
5
|
/** The state of the step */
|
|
5
|
-
state:
|
|
6
|
+
state: WizardStatus;
|
|
7
|
+
/** Defaults to true. It will show a checkmark icon when a step is completed.
|
|
8
|
+
* Set as false to show the step number */
|
|
9
|
+
checkIcon: boolean;
|
|
6
10
|
render(): any;
|
|
7
11
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { Meta } from '@storybook/web-components';
|
|
2
|
+
export declare const story005Default: any;
|
|
2
3
|
export declare const story010Completed: any;
|
|
4
|
+
export declare const story015CompletedWithNumber: any;
|
|
3
5
|
export declare const story020Pending: any;
|
|
4
6
|
export declare const story030Disabled: any;
|
|
5
7
|
declare const _default: Meta<import("@storybook/web-components").Args>;
|
|
@@ -9,12 +9,14 @@ import { CheckboxEventDetail, InputChangeEvent, InputClear, OptionSelectedEventD
|
|
|
9
9
|
import { IconName } from "./components/icon/types";
|
|
10
10
|
import { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
|
|
11
11
|
import { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
|
|
12
|
-
import { ContentAlignment, TableColourOptions, TableRowgroupTypes, TableRowTypes, TableSizes, TableSortDirections } from "./
|
|
12
|
+
import { ContentAlignment, TableColourOptions, TableRowgroupTypes, TableRowTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
|
|
13
|
+
import { WizardStatus, WizardSteps } from "./utils/types/wizard.types";
|
|
13
14
|
export { CheckboxEventDetail, InputChangeEvent, InputClear, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
|
|
14
15
|
export { IconName } from "./components/icon/types";
|
|
15
16
|
export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
|
|
16
17
|
export { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
|
|
17
|
-
export { ContentAlignment, TableColourOptions, TableRowgroupTypes, TableRowTypes, TableSizes, TableSortDirections } from "./
|
|
18
|
+
export { ContentAlignment, TableColourOptions, TableRowgroupTypes, TableRowTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
|
|
19
|
+
export { WizardStatus, WizardSteps } from "./utils/types/wizard.types";
|
|
18
20
|
export namespace Components {
|
|
19
21
|
interface B2bAlert {
|
|
20
22
|
/**
|
|
@@ -567,6 +569,10 @@ export namespace Components {
|
|
|
567
569
|
"label": string;
|
|
568
570
|
}
|
|
569
571
|
interface B2bRoundedIcon {
|
|
572
|
+
/**
|
|
573
|
+
* The color of the border of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string
|
|
574
|
+
*/
|
|
575
|
+
"borderColor": string;
|
|
570
576
|
/**
|
|
571
577
|
* The color of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string
|
|
572
578
|
*/
|
|
@@ -827,15 +833,47 @@ export namespace Components {
|
|
|
827
833
|
*/
|
|
828
834
|
"trigger": 'hover' | 'focus' | 'custom';
|
|
829
835
|
}
|
|
836
|
+
interface B2bWizard {
|
|
837
|
+
/**
|
|
838
|
+
* The current active step
|
|
839
|
+
*/
|
|
840
|
+
"activeStep": WizardSteps | '0';
|
|
841
|
+
/**
|
|
842
|
+
* Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
|
|
843
|
+
*/
|
|
844
|
+
"checkIcon": boolean;
|
|
845
|
+
/**
|
|
846
|
+
* By default, is false, where the wizard will handle steps states. If set to true, steps state must be handled manually.
|
|
847
|
+
*/
|
|
848
|
+
"custom": boolean;
|
|
849
|
+
}
|
|
830
850
|
interface B2bWizardIcon {
|
|
851
|
+
/**
|
|
852
|
+
* Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
|
|
853
|
+
*/
|
|
854
|
+
"checkIcon": boolean;
|
|
831
855
|
/**
|
|
832
856
|
* The state of the step
|
|
833
857
|
*/
|
|
834
|
-
"state":
|
|
858
|
+
"state": WizardStatus;
|
|
835
859
|
/**
|
|
836
860
|
* The step number
|
|
837
861
|
*/
|
|
838
|
-
"step":
|
|
862
|
+
"step": WizardSteps;
|
|
863
|
+
}
|
|
864
|
+
interface B2bWizardStep {
|
|
865
|
+
/**
|
|
866
|
+
* Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
|
|
867
|
+
*/
|
|
868
|
+
"checkIcon": boolean;
|
|
869
|
+
/**
|
|
870
|
+
* Use when wizard has property custom true. The state of the step
|
|
871
|
+
*/
|
|
872
|
+
"state": WizardStatus;
|
|
873
|
+
/**
|
|
874
|
+
* Use when wizard has property custom true. The step number
|
|
875
|
+
*/
|
|
876
|
+
"step": WizardSteps;
|
|
839
877
|
}
|
|
840
878
|
}
|
|
841
879
|
export interface B2bAlertCustomEvent<T> extends CustomEvent<T> {
|
|
@@ -1197,12 +1235,24 @@ declare global {
|
|
|
1197
1235
|
prototype: HTMLB2bTooltipElement;
|
|
1198
1236
|
new (): HTMLB2bTooltipElement;
|
|
1199
1237
|
};
|
|
1238
|
+
interface HTMLB2bWizardElement extends Components.B2bWizard, HTMLStencilElement {
|
|
1239
|
+
}
|
|
1240
|
+
var HTMLB2bWizardElement: {
|
|
1241
|
+
prototype: HTMLB2bWizardElement;
|
|
1242
|
+
new (): HTMLB2bWizardElement;
|
|
1243
|
+
};
|
|
1200
1244
|
interface HTMLB2bWizardIconElement extends Components.B2bWizardIcon, HTMLStencilElement {
|
|
1201
1245
|
}
|
|
1202
1246
|
var HTMLB2bWizardIconElement: {
|
|
1203
1247
|
prototype: HTMLB2bWizardIconElement;
|
|
1204
1248
|
new (): HTMLB2bWizardIconElement;
|
|
1205
1249
|
};
|
|
1250
|
+
interface HTMLB2bWizardStepElement extends Components.B2bWizardStep, HTMLStencilElement {
|
|
1251
|
+
}
|
|
1252
|
+
var HTMLB2bWizardStepElement: {
|
|
1253
|
+
prototype: HTMLB2bWizardStepElement;
|
|
1254
|
+
new (): HTMLB2bWizardStepElement;
|
|
1255
|
+
};
|
|
1206
1256
|
interface HTMLElementTagNameMap {
|
|
1207
1257
|
"b2b-alert": HTMLB2bAlertElement;
|
|
1208
1258
|
"b2b-anchor": HTMLB2bAnchorElement;
|
|
@@ -1245,7 +1295,9 @@ declare global {
|
|
|
1245
1295
|
"b2b-toggle-button": HTMLB2bToggleButtonElement;
|
|
1246
1296
|
"b2b-toggle-group": HTMLB2bToggleGroupElement;
|
|
1247
1297
|
"b2b-tooltip": HTMLB2bTooltipElement;
|
|
1298
|
+
"b2b-wizard": HTMLB2bWizardElement;
|
|
1248
1299
|
"b2b-wizard-icon": HTMLB2bWizardIconElement;
|
|
1300
|
+
"b2b-wizard-step": HTMLB2bWizardStepElement;
|
|
1249
1301
|
}
|
|
1250
1302
|
}
|
|
1251
1303
|
declare namespace LocalJSX {
|
|
@@ -1872,6 +1924,10 @@ declare namespace LocalJSX {
|
|
|
1872
1924
|
"label"?: string;
|
|
1873
1925
|
}
|
|
1874
1926
|
interface B2bRoundedIcon {
|
|
1927
|
+
/**
|
|
1928
|
+
* The color of the border of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string
|
|
1929
|
+
*/
|
|
1930
|
+
"borderColor"?: string;
|
|
1875
1931
|
/**
|
|
1876
1932
|
* The color of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string
|
|
1877
1933
|
*/
|
|
@@ -2172,15 +2228,47 @@ declare namespace LocalJSX {
|
|
|
2172
2228
|
*/
|
|
2173
2229
|
"trigger"?: 'hover' | 'focus' | 'custom';
|
|
2174
2230
|
}
|
|
2231
|
+
interface B2bWizard {
|
|
2232
|
+
/**
|
|
2233
|
+
* The current active step
|
|
2234
|
+
*/
|
|
2235
|
+
"activeStep"?: WizardSteps | '0';
|
|
2236
|
+
/**
|
|
2237
|
+
* Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
|
|
2238
|
+
*/
|
|
2239
|
+
"checkIcon"?: boolean;
|
|
2240
|
+
/**
|
|
2241
|
+
* By default, is false, where the wizard will handle steps states. If set to true, steps state must be handled manually.
|
|
2242
|
+
*/
|
|
2243
|
+
"custom"?: boolean;
|
|
2244
|
+
}
|
|
2175
2245
|
interface B2bWizardIcon {
|
|
2246
|
+
/**
|
|
2247
|
+
* Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
|
|
2248
|
+
*/
|
|
2249
|
+
"checkIcon"?: boolean;
|
|
2176
2250
|
/**
|
|
2177
2251
|
* The state of the step
|
|
2178
2252
|
*/
|
|
2179
|
-
"state"?:
|
|
2253
|
+
"state"?: WizardStatus;
|
|
2180
2254
|
/**
|
|
2181
2255
|
* The step number
|
|
2182
2256
|
*/
|
|
2183
|
-
"step"?:
|
|
2257
|
+
"step"?: WizardSteps;
|
|
2258
|
+
}
|
|
2259
|
+
interface B2bWizardStep {
|
|
2260
|
+
/**
|
|
2261
|
+
* Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
|
|
2262
|
+
*/
|
|
2263
|
+
"checkIcon"?: boolean;
|
|
2264
|
+
/**
|
|
2265
|
+
* Use when wizard has property custom true. The state of the step
|
|
2266
|
+
*/
|
|
2267
|
+
"state"?: WizardStatus;
|
|
2268
|
+
/**
|
|
2269
|
+
* Use when wizard has property custom true. The step number
|
|
2270
|
+
*/
|
|
2271
|
+
"step"?: WizardSteps;
|
|
2184
2272
|
}
|
|
2185
2273
|
interface IntrinsicElements {
|
|
2186
2274
|
"b2b-alert": B2bAlert;
|
|
@@ -2224,7 +2312,9 @@ declare namespace LocalJSX {
|
|
|
2224
2312
|
"b2b-toggle-button": B2bToggleButton;
|
|
2225
2313
|
"b2b-toggle-group": B2bToggleGroup;
|
|
2226
2314
|
"b2b-tooltip": B2bTooltip;
|
|
2315
|
+
"b2b-wizard": B2bWizard;
|
|
2227
2316
|
"b2b-wizard-icon": B2bWizardIcon;
|
|
2317
|
+
"b2b-wizard-step": B2bWizardStep;
|
|
2228
2318
|
}
|
|
2229
2319
|
}
|
|
2230
2320
|
export { LocalJSX as JSX };
|
|
@@ -2300,7 +2390,9 @@ declare module "@stencil/core" {
|
|
|
2300
2390
|
* a specific trigger.
|
|
2301
2391
|
*/
|
|
2302
2392
|
"b2b-tooltip": LocalJSX.B2bTooltip & JSXBase.HTMLAttributes<HTMLB2bTooltipElement>;
|
|
2393
|
+
"b2b-wizard": LocalJSX.B2bWizard & JSXBase.HTMLAttributes<HTMLB2bWizardElement>;
|
|
2303
2394
|
"b2b-wizard-icon": LocalJSX.B2bWizardIcon & JSXBase.HTMLAttributes<HTMLB2bWizardIconElement>;
|
|
2395
|
+
"b2b-wizard-step": LocalJSX.B2bWizardStep & JSXBase.HTMLAttributes<HTMLB2bWizardStepElement>;
|
|
2304
2396
|
}
|
|
2305
2397
|
}
|
|
2306
2398
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type WizardSteps = '1' | '2' | '3' | '4' | '5' | '6';
|
|
2
|
+
export declare const WizardStatus: {
|
|
3
|
+
readonly DEFAULT: "default";
|
|
4
|
+
readonly COMPLETED: "completed";
|
|
5
|
+
readonly PENDING: "pending";
|
|
6
|
+
readonly DISABLED: "disabled";
|
|
7
|
+
};
|
|
8
|
+
export type WizardStatus = (typeof WizardStatus)[keyof typeof WizardStatus];
|
package/dist/web-types.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"$schema": "http://json.schemastore.org/web-types",
|
|
3
3
|
"framework": "vue",
|
|
4
4
|
"name": "@otto-de/b2b-core-components",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.4.0",
|
|
6
6
|
"js-types-syntax": "typescript",
|
|
7
7
|
"description-markup": "markdown",
|
|
8
8
|
"contributions": {
|
|
@@ -1645,6 +1645,15 @@
|
|
|
1645
1645
|
"symbol": "-rounded-icon"
|
|
1646
1646
|
},
|
|
1647
1647
|
"attributes": [
|
|
1648
|
+
{
|
|
1649
|
+
"name": "border-color",
|
|
1650
|
+
"description": "The color of the border of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string\r\nValues: string",
|
|
1651
|
+
"required": false,
|
|
1652
|
+
"value": {
|
|
1653
|
+
"kind": "expression",
|
|
1654
|
+
"type": "string"
|
|
1655
|
+
}
|
|
1656
|
+
},
|
|
1648
1657
|
{
|
|
1649
1658
|
"name": "color",
|
|
1650
1659
|
"description": "The color of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string\r\nValues: string",
|
|
@@ -2487,6 +2496,49 @@
|
|
|
2487
2496
|
],
|
|
2488
2497
|
"events": []
|
|
2489
2498
|
},
|
|
2499
|
+
{
|
|
2500
|
+
"name": "b2b-wizard",
|
|
2501
|
+
"doc-url": "https://internal.otto.market/design-system/?path=/story/overview--page",
|
|
2502
|
+
"description": "",
|
|
2503
|
+
"source": {
|
|
2504
|
+
"module": "@otto-de/b2b-core-components/dist/types/components/wizard/wizard.d.ts",
|
|
2505
|
+
"symbol": "-wizard"
|
|
2506
|
+
},
|
|
2507
|
+
"attributes": [
|
|
2508
|
+
{
|
|
2509
|
+
"name": "active-step",
|
|
2510
|
+
"description": "The current active step\r\nValues: \"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\"",
|
|
2511
|
+
"required": false,
|
|
2512
|
+
"default": "'1'",
|
|
2513
|
+
"value": {
|
|
2514
|
+
"kind": "expression",
|
|
2515
|
+
"type": "\"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\""
|
|
2516
|
+
}
|
|
2517
|
+
},
|
|
2518
|
+
{
|
|
2519
|
+
"name": "check-icon",
|
|
2520
|
+
"description": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number\r\nValues: boolean",
|
|
2521
|
+
"required": false,
|
|
2522
|
+
"default": "true",
|
|
2523
|
+
"value": {
|
|
2524
|
+
"kind": "expression",
|
|
2525
|
+
"type": "boolean"
|
|
2526
|
+
}
|
|
2527
|
+
},
|
|
2528
|
+
{
|
|
2529
|
+
"name": "custom",
|
|
2530
|
+
"description": "By default, is false, where the wizard will handle steps states.\nIf set to true, steps state must be handled manually.\r\nValues: boolean",
|
|
2531
|
+
"required": false,
|
|
2532
|
+
"default": "false",
|
|
2533
|
+
"value": {
|
|
2534
|
+
"kind": "expression",
|
|
2535
|
+
"type": "boolean"
|
|
2536
|
+
}
|
|
2537
|
+
}
|
|
2538
|
+
],
|
|
2539
|
+
"slots": [],
|
|
2540
|
+
"events": []
|
|
2541
|
+
},
|
|
2490
2542
|
{
|
|
2491
2543
|
"name": "b2b-wizard-icon",
|
|
2492
2544
|
"doc-url": "https://internal.otto.market/design-system/?path=/story/overview--page",
|
|
@@ -2496,20 +2548,73 @@
|
|
|
2496
2548
|
"symbol": "-wizard-icon"
|
|
2497
2549
|
},
|
|
2498
2550
|
"attributes": [
|
|
2551
|
+
{
|
|
2552
|
+
"name": "check-icon",
|
|
2553
|
+
"description": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number\r\nValues: boolean",
|
|
2554
|
+
"required": false,
|
|
2555
|
+
"default": "true",
|
|
2556
|
+
"value": {
|
|
2557
|
+
"kind": "expression",
|
|
2558
|
+
"type": "boolean"
|
|
2559
|
+
}
|
|
2560
|
+
},
|
|
2561
|
+
{
|
|
2562
|
+
"name": "state",
|
|
2563
|
+
"description": "The state of the step\r\nValues: \"completed\", \"default\", \"disabled\", \"pending\"",
|
|
2564
|
+
"required": false,
|
|
2565
|
+
"default": "WizardStatus.PENDING",
|
|
2566
|
+
"value": {
|
|
2567
|
+
"kind": "expression",
|
|
2568
|
+
"type": "\"completed\" | \"default\" | \"disabled\" | \"pending\""
|
|
2569
|
+
}
|
|
2570
|
+
},
|
|
2571
|
+
{
|
|
2572
|
+
"name": "step",
|
|
2573
|
+
"description": "The step number\r\nValues: \"1\", \"2\", \"3\", \"4\", \"5\", \"6\"",
|
|
2574
|
+
"required": false,
|
|
2575
|
+
"value": {
|
|
2576
|
+
"kind": "expression",
|
|
2577
|
+
"type": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\""
|
|
2578
|
+
}
|
|
2579
|
+
}
|
|
2580
|
+
],
|
|
2581
|
+
"slots": [],
|
|
2582
|
+
"events": []
|
|
2583
|
+
},
|
|
2584
|
+
{
|
|
2585
|
+
"name": "b2b-wizard-step",
|
|
2586
|
+
"doc-url": "https://internal.otto.market/design-system/?path=/story/overview--page",
|
|
2587
|
+
"description": "",
|
|
2588
|
+
"source": {
|
|
2589
|
+
"module": "@otto-de/b2b-core-components/dist/types/components/wizard/wizard-step.d.ts",
|
|
2590
|
+
"symbol": "-wizard-step"
|
|
2591
|
+
},
|
|
2592
|
+
"attributes": [
|
|
2593
|
+
{
|
|
2594
|
+
"name": "check-icon",
|
|
2595
|
+
"description": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number\r\nValues: boolean",
|
|
2596
|
+
"required": false,
|
|
2597
|
+
"default": "true",
|
|
2598
|
+
"value": {
|
|
2599
|
+
"kind": "expression",
|
|
2600
|
+
"type": "boolean"
|
|
2601
|
+
}
|
|
2602
|
+
},
|
|
2499
2603
|
{
|
|
2500
2604
|
"name": "state",
|
|
2501
|
-
"description": "The state of the step\r\nValues: \"completed\", \"disabled\", \"pending\"",
|
|
2605
|
+
"description": "Use when wizard has property custom true. The state of the step\r\nValues: \"completed\", \"default\", \"disabled\", \"pending\"",
|
|
2502
2606
|
"required": false,
|
|
2503
2607
|
"default": "'pending'",
|
|
2504
2608
|
"value": {
|
|
2505
2609
|
"kind": "expression",
|
|
2506
|
-
"type": "\"completed\" | \"disabled\" | \"pending\""
|
|
2610
|
+
"type": "\"completed\" | \"default\" | \"disabled\" | \"pending\""
|
|
2507
2611
|
}
|
|
2508
2612
|
},
|
|
2509
2613
|
{
|
|
2510
2614
|
"name": "step",
|
|
2511
|
-
"description": "The step number\r\nValues: \"1\", \"2\", \"3\", \"4\", \"5\", \"6\"",
|
|
2615
|
+
"description": "Use when wizard has property custom true. The step number\r\nValues: \"1\", \"2\", \"3\", \"4\", \"5\", \"6\"",
|
|
2512
2616
|
"required": false,
|
|
2617
|
+
"default": "'1'",
|
|
2513
2618
|
"value": {
|
|
2514
2619
|
"kind": "expression",
|
|
2515
2620
|
"type": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\""
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@otto-de/b2b-core-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "Core components defined with Stencil",
|
|
5
5
|
"author": "Otto GmbH",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"build:storybook": "npm run copy-md-files && build-storybook -o docs-build/design-system"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@otto-de/b2b-tokens": "1.
|
|
43
|
+
"@otto-de/b2b-tokens": "1.5.0",
|
|
44
44
|
"@stencil-community/eslint-plugin": "^0.5.0",
|
|
45
45
|
"@stencil/core": "^3.0.1"
|
|
46
46
|
},
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@types/mdx": "^2.0.5",
|
|
67
67
|
"@types/postcss-import": "^14.0.0",
|
|
68
68
|
"copyfiles": "^2.4.1",
|
|
69
|
-
"css-loader": "^6.
|
|
69
|
+
"css-loader": "^6.8.1",
|
|
70
70
|
"eslint": "^8.36.0",
|
|
71
71
|
"eslint-config-prettier": "^8.8.0",
|
|
72
72
|
"eslint-plugin-prettier": "^4.2.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as b,c as e,h as r,H as o,g as i}from"./p-a7417890.js";const t=class{constructor(r){b(this,r),this.b2bFocus=e(this,"b2b-focus",7),this.b2bBlur=e(this,"b2b-blur",7),this.b2bInput=e(this,"b2b-input",7),this.handleFormData=b=>{null!=this.name&&b.formData.append(this.name,this.value||"")},this.onFocus=b=>{this.b2bFocus.emit(b)},this.onBlur=b=>{this.b2bBlur.emit(b)},this.onInput=b=>{const e=b.target;null!==e&&(this.value=e.value||""),this.b2bInput.emit(e)},this.label=void 0,this.required=!1,this.placeholder=void 0,this.disabled=!1,this.invalid=!1,this.autofocus=!1,this.resize=void 0,this.hint=void 0,this.error=void 0,this.value=null,this.name=void 0,this.maxLength=void 0}connectedCallback(){const b=this.hostElement.closest("form");null!=b&&b.addEventListener("formdata",this.handleFormData)}render(){return r(o,{class:{"b2b-textarea":!0,"b2b-textarea--error":this.invalid&&!this.disabled}},this.label&&r("b2b-input-label",{id:this.name,required:this.required},this.label),r("textarea",{class:"textarea-input","aria-labelledby":this.name,style: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}),void 0!==this.hint&&!this.invalid||void 0!==this.hint&&this.disabled?r("span",null,this.hint):"",void 0!==this.error&&this.invalid&&!this.disabled?r("span",null,this.error):"")}get hostElement(){return i(this)}};t.style=':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:400;--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-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-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--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-75:var(--b2b-size-30);--b2b-size-copy-50:var(--b2b-size-25);--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:400;--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-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-textarea){font-family:var(--b2b-font-family-default)}:host(.b2b-textarea) .textarea-input{display:block;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);background-color:var(--b2b-color-white-100);color:var(--b2b-color-black-100);border:1px solid var(--b2b-color-grey-200);border-radius:var(--b2b-size-border-radius-100);box-sizing:border-box;margin:var(--b2b-size-10) 0;padding:7px 12px 6px;width:100%;appearance:none;height:auto;min-height:4.5rem}:host(.b2b-textarea) .textarea-input::placeholder{color:var(--b2b-color-grey-300)}:host(.b2b-textarea) .textarea-input:disabled,:host(.b2b-textarea) .textarea-input:read-only{color:var(--b2b-color-grey-250);background-color:var(--b2b-color-grey-25);border:1px solid var(--b2b-color-grey-200)}:host(.b2b-textarea) b2b-input-label{display:block}:host(.b2b-textarea) span{display:block;font-size:var(--b2b-size-copy-75);line-height:var(--b2b-size-copy-line-height-75);color:var(--b2b-color-grey-300)}:host(.b2b-textarea--error) .textarea-input{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);color:var(--b2b-color-copy-default)}:host(.b2b-textarea--error) .textarea-input::placeholder{color:var(--b2b-color-copy-default)}:host(.b2b-textarea--error) .textarea-input:focus{outline-color:var(--b2b-color-error-100)}:host(.b2b-textarea--error) span{color:var(--b2b-color-error-100)}';export{t as b2b_textarea}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as b,c as e,h as r,H as o,g as i}from"./p-a7417890.js";const s=class{constructor(r){b(this,r),this.b2bChange=e(this,"b2b-selected",7),this.disabled=!1,this.href="",this.target="blank"}onClick(){this.b2bChange.emit()}onKeyDown(b){"Enter"===b.key&&this.b2bChange.emit()}getTabIndex(){return this.disabled?-1:""!=this.href?"":0}render(){return r(o,{tabIndex:this.getTabIndex(),"aria-disabled":this.disabled?"true":null,class:{"b2b-card":!0,"b2b-card--disabled":this.disabled}},""!=this.href&&r("a",{href:this.href,target:`_${this.target}`}),this.disabled&&r("div",{class:"b2b-card--disabled-overlay"}),r("slot",null))}get host(){return i(this)}};s.style=':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:400;--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-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-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--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-75:var(--b2b-size-30);--b2b-size-copy-50:var(--b2b-size-25);--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:400;--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-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{width:100%;cursor:pointer;display:block;overflow:hidden;box-sizing:border-box;box-shadow:var(--b2b-size-5) var(--b2b-size-5) 5px rgba(0, 0, 0, 0.15);padding:var(--b2b-size-45) var(--b2b-size-60) var(--b2b-size-60);background:var(--b2b-color-white-100);border:var(--b2b-size-1) solid var(--b2b-color-grey-100);border-radius:var(--b2b-size-25);position:relative}:host a{width:100%;height:100%;display:block;position:absolute;top:0;left:0}:host(.b2b-card:hover),:host(.b2b-card:focus){box-shadow:5px 5px var(--b2b-size-15) rgba(0, 0, 0, 0.15);transition:box-shadow 0.2s ease-in-out;outline:none}:host(.b2b-card:focus){outline:2px solid -webkit-focus-ring-color;outline-offset:-1px;z-index:9999}:host(.b2b-card--disabled){pointer-events:none;background:var(--b2b-color-grey-25);color:var(--b2b-color-grey-400)}:host(.b2b-card--disabled) .b2b-card--disabled-overlay{position:absolute;top:0;left:0;background-color:var(--b2b-color-grey-25);opacity:0.5;width:100%;height:100%}';export{s as b2b_card}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as b,c as e,h as o,H as r,g as i}from"./p-a7417890.js";const c=class{constructor(o){b(this,o),this.b2bFocus=e(this,"b2b-focus",7),this.b2bBlur=e(this,"b2b-blur",7),this.b2bChange=e(this,"b2b-change",7),this.handleFormData=b=>{null!=this.name&&this.checked&&b.formData.append(this.name,this.value||"on")},this.emitDetail=()=>{this.b2bChange.emit({checked:this.checked,value:this.value});const b=new globalThis.Event("change");this.hostElement.dispatchEvent(b)},this.onFocus=b=>{this.b2bFocus.emit(b)},this.onBlur=b=>{this.b2bBlur.emit(b)},this.onClick=b=>{b.preventDefault(),this.disabled||(this.checked=!this.checked,this.emitDetail())},this.label=void 0,this.required=!1,this.checked=!1,this.disabled=!1,this.error=void 0,this.hint=void 0,this.name=void 0,this.value=void 0,this.invalid=!1}connectedCallback(){const b=this.hostElement.closest("form");null!=b&&b.addEventListener("formdata",this.handleFormData)}render(){return o(r,{onClick:this.onClick},o("div",{class:{"b2b-checkbox":!0,"b2b-checkbox--error":this.invalid&&!this.disabled,"b2b-checkbox--disabled":this.disabled,"b2b-checkbox-checked":this.checked}},o("div",{class:"b2b-checkbox-items"},o("svg",{class:"b2b-checkbox-icon",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},o("path",{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"})),o("input",{class:"b2b-checkbox-input","aria-labelledby":this.name,type:"checkbox",name:this.name,id:this.name,value:this.value,checked:this.checked,disabled:this.disabled,onFocus:this.onFocus,onBlur:this.onBlur}),o("b2b-input-label",{id:this.name,required:this.required,disabled:this.disabled},this.label)),void 0!==this.hint&&!this.invalid||void 0!==this.hint&&this.disabled?o("span",null,this.hint):"",void 0!==this.error&&this.invalid&&!this.disabled?o("span",null,this.error):""))}get hostElement(){return i(this)}};c.style=':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:400;--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-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-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--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-75:var(--b2b-size-30);--b2b-size-copy-50:var(--b2b-size-25);--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:400;--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-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{--b2b-checkbox-margin-bottom:0}.b2b-checkbox{display:block;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);width:fit-content;margin-bottom:var(--b2b-checkbox-margin-bottom);margin-right:var(--b2b-size-60)}.b2b-checkbox-items{display:flex;justify-content:flex-start}.b2b-checkbox-icon{position:absolute;fill:var(--b2b-color-white-100);display:none;margin-top:3px;margin-left:var(--b2b-size-1);width:var(--b2b-size-35);height:var(--b2b-size-35);z-index:1000}.b2b-checkbox-input{margin:2px 6px 3px 0;appearance:none;background-color:var(--b2b-color-white-100);border:1px solid var(--b2b-color-grey-400);border-radius:var(--b2b-size-border-radius-100);display:inline-block;position:relative;vertical-align:top;width:var(--b2b-size-40);height:var(--b2b-size-40);flex-shrink:0}.b2b-checkbox-checked .b2b-checkbox-icon{display:inline-block}.b2b-checkbox-checked .b2b-checkbox-input{border-color:var(--b2b-color-black-100);background-color:var(--b2b-color-black-100)}.b2b-checkbox b2b-input-label{display:inline;vertical-align:bottom;user-select:none}.b2b-checkbox span{display:block;font-size:var(--b2b-size-copy-75);color:var(--b2b-color-grey-300);line-height:var(--b2b-size-copy-line-height-75);user-select:none}.b2b-checkbox--error{}.b2b-checkbox--error .b2b-checkbox-input{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100)}.b2b-checkbox--error span{color:var(--b2b-color-error-100)}.b2b-checkbox--error.b2b-checkbox-checked .b2b-checkbox-input{background-color:var(--b2b-color-error-100);border-color:var(--b2b-color-error-100)}.b2b-checkbox--disabled{pointer-events:none}.b2b-checkbox--disabled .b2b-checkbox-input{background-color:var(--b2b-color-grey-25);border-color:var(--b2b-color-grey-300)}.b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox-checked .b2b-checkbox-input{background-color:var(--b2b-color-grey-300);border-color:var(--b2b-color-grey-300)}';export{c as b2b_checkbox}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as b,h as e,H as r,g as o}from"./p-a7417890.js";const i=class{constructor(e){b(this,e)}render(){return e(r,null,e("slot",null))}get host(){return o(this)}};i.style=':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:400;--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-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-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--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-75:var(--b2b-size-30);--b2b-size-copy-50:var(--b2b-size-25);--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:400;--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-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{overflow:auto;display:block;white-space:nowrap;position:relative}';export{i as b2b_scrollable_container}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as b,c as e,h as o,H as r,g as i}from"./p-a7417890.js";const t=class{constructor(o){b(this,o),this.b2bChange=e(this,"b2b-change",7),this.onClick=b=>{if(b.preventDefault(),this.disabled||this.checked)return;this.checked=!0,this.uncheckSiblings(),this.b2bChange.emit({value:this.value});const e=new globalThis.Event("change");this.host.dispatchEvent(e)},this.uncheckSiblings=()=>{this.getSiblingToggles().forEach((b=>{b.checked=!1}))},this.label=void 0,this.name=void 0,this.checked=!1,this.disabled=!1,this.value=void 0}getSiblingToggles(){return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((b=>b.value!==this.value))}render(){return o(r,{onClick:this.onClick},o("span",{class:{"b2b-toggle-button":!0,"b2b-toggle-button--disabled":this.disabled}},o("input",{tabindex:0,class:{"b2b-toggle-button-input":!0,"b2b-toggle-button-input--disabled":this.disabled},"aria-labelledby":this.name,type:"radio",checked:this.checked&&!this.disabled,disabled:this.disabled,name:this.name,value:this.value}),o("label",{id:this.name,tabindex:-1,class:{"b2b-toggle-button-label":!0,"b2b-toggle-button-label--disabled":this.disabled,"b2b-toggle-button-label--checked":this.checked&&!this.disabled}},this.label)))}get host(){return i(this)}};t.style=':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:400;--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-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-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--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-75:var(--b2b-size-30);--b2b-size-copy-50:var(--b2b-size-25);--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:400;--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-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)}';export{t as b2b_toggle_button}
|