@otto-de/b2b-core-components 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/b2b-core-components/b2b-core-components.esm.js +1 -1
- package/dist/b2b-core-components/{p-7896af2b.entry.js → p-1a02cd63.entry.js} +1 -1
- package/dist/b2b-core-components/p-5055e8b3.entry.js +1 -0
- package/dist/cjs/b2b-modal.cjs.entry.js +1 -1
- package/dist/cjs/b2b-toggle-group.cjs.entry.js +5 -0
- package/dist/collection/components/alert/alert.css +2 -2
- package/dist/collection/components/anchor/anchor.css +2 -2
- package/dist/collection/components/button/button.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/dropdown/dropdown.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/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 +4 -5
- package/dist/collection/components/pagination/pagination.css +2 -2
- package/dist/collection/components/paragraph/paragraph.css +2 -2
- package/dist/collection/components/radio/radio.css +2 -2
- package/dist/collection/components/radio-group/radio-group.css +2 -2
- package/dist/collection/components/required-separator/required-separator.css +2 -2
- package/dist/collection/components/scrollable-container/scrollable-container.css +2 -2
- package/dist/collection/components/separator/separator.css +2 -2
- package/dist/collection/components/spinner/spinner.css +2 -2
- package/dist/collection/components/tab/tab.css +2 -2
- package/dist/collection/components/tab-panel/tab-panel.css +2 -2
- package/dist/collection/components/table/table-cell/table-cell.css +2 -2
- package/dist/collection/components/table/table-header/table-header.css +2 -2
- package/dist/collection/components/table/table-row/table-row.css +2 -2
- package/dist/collection/components/table/table-rowgroup/table-rowgroup.css +2 -2
- package/dist/collection/components/table/table.css +2 -2
- package/dist/collection/components/textarea/textarea.css +2 -2
- package/dist/collection/components/toggle-button/toggle-button.css +2 -2
- package/dist/collection/components/toggle-group/toggle-group.css +2 -2
- package/dist/collection/components/toggle-group/toggle-group.js +5 -0
- package/dist/collection/components/toggle-group/toggle-group.stories.js +6 -1
- package/dist/collection/components/tooltip/tooltip.css +2 -2
- package/dist/components/b2b-modal.js +1 -1
- package/dist/components/b2b-toggle-group.js +5 -0
- package/dist/esm/b2b-modal.entry.js +1 -1
- package/dist/esm/b2b-toggle-group.entry.js +5 -0
- package/dist/types/components/toggle-group/toggle-group.d.ts +1 -0
- package/dist/types/components/toggle-group/toggle-group.stories.d.ts +1 -0
- package/package.json +2 -2
- package/dist/b2b-core-components/p-d377f47a.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-d1c69d72.js";export{s as setNonce}from"./p-d1c69d72.js";(()=>{const a=import.meta.url,b={};return""!==a&&(b.resourcesUrl=new URL(".",a).href),e(b)})().then((e=>a([["p-faad6997",[[1,"b2b-search",{placeholder:[1],optionsList:[16],value:[1537],closed:[32]}]]],["p-
|
|
1
|
+
import{p as e,b as a}from"./p-d1c69d72.js";export{s as setNonce}from"./p-d1c69d72.js";(()=>{const a=import.meta.url,b={};return""!==a&&(b.resourcesUrl=new URL(".",a).href),e(b)})().then((e=>a([["p-faad6997",[[1,"b2b-search",{placeholder:[1],optionsList:[16],value:[1537],closed:[32]}]]],["p-1a02cd63",[[1,"b2b-modal",{heading:[1],opened:[1540],backdropDismiss:[4,"backdrop-dismiss"],escDismiss:[4,"esc-dismiss"],variant:[1],iconHover:[32],isOpen:[32]},[[0,"keydown","handleKeypress"]]]]],["p-1631046e",[[1,"b2b-pagination",{totalPages:[2,"total-pages"],activePage:[1538,"active-page"],ariaLabelNextPage:[1,"aria-label-next-page"],ariaLabelPreviousPage:[1,"aria-label-previous-page"]}]]],["p-aae428c1",[[1,"b2b-alert",{type:[1],size:[1],opened:[1028],hasCloseButton:[4,"has-close-button"],customIcon:[4,"custom-icon"]}]]],["p-dcc7125f",[[1,"b2b-checkbox",{label:[1],required:[516],checked:[1540],disabled:[516],error:[1],hint:[1],name:[513],value:[520],invalid:[4]}]]],["p-401ec740",[[1,"b2b-checkbox-group",{label:[1],required:[4],disabled:[4],invalid:[4],alignment:[1],hint:[1],error:[1]},[[0,"b2b-change","handleCheckboxChange"]]]]],["p-9a5cb4ae",[[1,"b2b-dropdown",{label:[1],required:[516],name:[513],disabled:[516],invalid:[516],hint:[1],error:[1]}]]],["p-bd501484",[[1,"b2b-radio-button",{label:[1],required:[516],name:[513],checked:[1540],disabled:[516],invalid:[4],value:[513],hint:[1],error:[1]}]]],["p-15e7db21",[[1,"b2b-radio-group",{name:[1],label:[1],required:[4],alignment:[1],disabled:[516],invalid:[516],hint:[1],error:[1],currentValue:[32]},[[0,"b2b-change","handleRadioButtonChange"]]]]],["p-d947bb64",[[1,"b2b-required-separator",{label:[1]}]]],["p-b77d7b88",[[1,"b2b-tab-group",{useRouter:[4,"use-router"]},[[0,"click","handleClick"],[0,"keydown","handleKeydown"]]]]],["p-2b66f8d1",[[1,"b2b-textarea",{label:[1],required:[516],placeholder:[513],disabled:[516],invalid:[516],autofocus:[516],resize:[513],hint:[1],error:[1],value:[1537],name:[513],maxLength:[514,"max-length"]}]]],["p-80eca7db",[[1,"b2b-anchor",{href:[1],download:[1],target:[1],size:[1]}]]],["p-d56ea84b",[[1,"b2b-grid",{margin:[2]}]]],["p-27e6330d",[[1,"b2b-grid-col",{span:[514],textAlign:[1,"text-align"]}]]],["p-5f8076a5",[[1,"b2b-grid-row",{columnGap:[2,"column-gap"],rowGap:[2,"row-gap"],alignItems:[1,"align-items"],justify:[1]}]]],["p-00aee514",[[1,"b2b-label",{type:[1]}]]],["p-64a24de2",[[1,"b2b-paragraph",{weight:[1],size:[1],align:[1]}]]],["p-a611338a",[[1,"b2b-scrollable-container"]]],["p-a8d35abb",[[1,"b2b-tab",{selected:[516],disabled:[4],invalid:[4]}]]],["p-ce6ba2bd",[[1,"b2b-tab-panel"]]],["p-0a686eb7",[[1,"b2b-table",{size:[1]},[[0,"b2b-change","onColumnSelected"]]]]],["p-e4345be2",[[1,"b2b-table-cell",{textWrap:[516,"text-wrap"],size:[1],align:[1],divider:[4],color:[1]}]]],["p-e4eebaf5",[[1,"b2b-table-header",{divider:[4],fixed:[4],sortDirection:[1537,"sort-direction"],sortId:[1,"sort-id"],active:[32]}]]],["p-cfc0c9b5",[[1,"b2b-table-row",{highlight:[4],color:[1]}]]],["p-6a273cbb",[[1,"b2b-table-rowgroup",{type:[1]}]]],["p-9e3ba717",[[1,"b2b-toggle-button",{label:[1],name:[513],checked:[1540],disabled:[516],value:[513]}]]],["p-5055e8b3",[[1,"b2b-toggle-group",{name:[1],disabled:[516],currentValue:[32]},[[0,"b2b-change","handleToggleButtonChange"]]]]],["p-2768d91f",[[1,"b2b-tooltip",{position:[1],content:[1],trigger:[1],opened:[1540]}]]],["p-599b5bb1",[[1,"b2b-headline",{size:[1],align:[1],noMargin:[4,"no-margin"]}]]],["p-389defa1",[[1,"b2b-input-label",{required:[4],disabled:[4]}]]],["p-01c930e6",[[1,"b2b-input",{label:[1],required:[516],type:[513],disabled:[516],invalid:[516],placeholder:[513],value:[1537],name:[513],hint:[1],error:[1],autofocus:[4],hasFocus:[32],hasTextPrefix:[32],hasTextSuffix:[32],setFocus:[64]}],[0,"b2b-input-list-option",{option:[1]},[[0,"keydown","handleKeyDown"]]]]],["p-889f1f58",[[1,"b2b-input-list",{label:[1],required:[516],placeholder:[513],optionsList:[16],value:[1537],hasOptionList:[32],isElementFocused:[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{invalid:[4],disabled:[4],error:[1],hint:[1]}]]],["p-18e2cb16",[[1,"b2b-separator",{alignment:[1]}]]],["p-50c5299b",[[1,"b2b-icon",{icon:[1],color:[1],size:[1],pathData:[32]}]]],["p-a5462c02",[[1,"b2b-button",{variant:[1],type:[1],size:[1],disabled:[516],loading:[4],active:[516],href:[1],target:[1],download:[1],setFocus:[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{size:[1],color:[1]}]]]],e)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as b,c as e,h as o,H as r,g as t}from"./p-d1c69d72.js";function a(b,e,o,r=20,t=0){const i=[];if(t>=r)return i;const s=b=>{const i=b.assignedNodes().filter((b=>1===b.nodeType));return i.length>0?a(i[0].parentElement,e,o,r,t+1):[]},l=Array.from(b.children||[]);for(const b of l)e(b)||(o(b)&&i.push(b),null!=b.shadowRoot?i.push(...a(b.shadowRoot,e,o,r,t+1)):"SLOT"===b.tagName?i.push(...s(b)):i.push(...a(b,e,o,r,t+1)));return i}function i(b){return b.hasAttribute("hidden")||b.hasAttribute("aria-hidden")&&"false"!==b.getAttribute("aria-hidden")||"none"===b.style.display||"0"===b.style.opacity||"hidden"===b.style.visibility||"collapse"===b.style.visibility}function s(b){return"-1"!==b.getAttribute("tabindex")&&!i(b)&&!function(b){return b.hasAttribute("disabled")||b.hasAttribute("aria-disabled")&&"false"!==b.getAttribute("aria-disabled")}(b)&&(b.hasAttribute("tabindex")||(b instanceof HTMLAnchorElement||b instanceof HTMLAreaElement)&&b.hasAttribute("href")||b instanceof HTMLButtonElement||b instanceof HTMLInputElement||b instanceof HTMLTextAreaElement||b instanceof HTMLSelectElement||b instanceof HTMLIFrameElement)}const l=class{constructor(o){b(this,o),this.b2bClose=e(this,"b2b-close",7),this.b2bBeforeClose=e(this,"b2b-before-close",7),this.focusableElements=[],this.toggleIconHover=()=>{this.iconHover=!this.iconHover},this.emitBeforeClose=b=>{this.b2bBeforeClose.emit({trigger:b}).defaultPrevented||(this.opened=!1)},this.handleBackdropDismiss=()=>{this.backdropDismiss&&this.emitBeforeClose("BACKDROP")},this.handleClickDismiss=()=>{this.emitBeforeClose("CLOSE_BUTTON")},this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())},this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())},this.heading=void 0,this.opened=!1,this.backdropDismiss=!1,this.escDismiss=!0,this.variant="default",this.iconHover=!1,this.isOpen=this.opened||!1}handleKeypress(b){this.isOpen&&this.escDismiss&&"Escape"===b.key&&(this.emitBeforeClose("ESCAPE_KEY"),b.stopPropagation())}openedChanged(b){!0===b?this.open():this.close()}attemptFocus(b){null!=b?b.focus():this.closeButton.focus()}open(){this.isOpen=!0}close(){this.isOpen=!1,this.b2bClose.emit()}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}componentDidLoad(){this.focusableElements=a(this.hostElement.shadowRoot,(b=>i(b)||b.matches("[data-focus-trap-edge]")),s)}componentDidRender(){this.attemptFocus(this.getFirstFocusableElement())}render(){return o(r,null,o("div",{class:{"b2b-modal":!0,"b2b-modal--open":this.opened}},o("div",{"data-focus-trap-edge":!0,onFocus:this.handleTopFocus,tabIndex:0}),o("div",{class:{"b2b-modal-dialog":!0,[`b2b-modal-dialog--${this.variant}`]:!0}},o("div",{class:"b2b-modal-dialog--header"},o("b2b-headline",{align:"center",size:"200",noMargin:!0},this.heading),o("button",{type:"button",class:"b2b-modal-dialog--close",onMouseEnter:this.toggleIconHover,onMouseLeave:this.toggleIconHover,onClick:this.handleClickDismiss,ref:b=>this.closeButton=b},o("b2b-icon",{icon:"b2b_icon-close",color:this.iconHover?"primary":"secondary"}))),o("div",{class:"b2b-modal-dialog--body"},o("slot",null)),o("div",{class:"b2b-modal-dialog--footer"},o("div",{class:"b2b-modal-dialog--footer-left"},o("slot",{name:"footer-left"})),o("div",{class:"b2b-modal-dialog--footer-right"},o("slot",{name:"footer-right"})))),o("div",{"data-focus-trap-edge":!0,onFocus:this.handleBottomFocus,tabIndex:0}),o("div",{class:"b2b-modal--backdrop",onClick:this.handleBackdropDismiss})))}get hostElement(){return t(this)}static get watchers(){return{opened:["openedChanged"]}}};l.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,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:100;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal--backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal-dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal-dialog--header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal-dialog--close{cursor:pointer;padding:0;background:transparent;border:none}:host .b2b-modal-dialog--close .b2b-icon{transition:all 0.3s ease}:host .b2b-modal-dialog--footer{display:flex;padding-top:calc(var(--b2b-size-space-75) * 2);margin-top:calc(var(--b2b-size-space-75) * 2);border-top:var(--b2b-size-1) solid var(--b2b-color-border-100)}:host .b2b-modal-dialog--footer-left{display:flex;flex:1;justify-content:flex-start}:host .b2b-modal-dialog--footer-right{display:flex;flex:1;justify-content:flex-end}:host .b2b-modal-dialog--large{max-width:var(--b2b-component-modal-large-max-width)}@media only screen and (max-width: var(--b2b-component-modal-large-max-width)){:host .b2b-modal-dialog--large{left:0;width:auto;max-width:var(--b2b-component-modal-large-max-width)}}@media only screen and (max-width: var(--b2b-component-modal-default-max-width)){:host .b2b-modal-dialog{left:0;width:auto;max-width:var(--b2b-component-modal-default-max-width)}}::slotted(b2b-button[slot=footer-right]){margin-left:var(--b2b-size-space-75)}';export{l as b2b_modal}
|
|
1
|
+
import{r as b,c as e,h as o,H as r,g as t}from"./p-d1c69d72.js";function a(b,e,o,r=20,t=0){const i=[];if(t>=r)return i;const s=b=>{const i=b.assignedNodes().filter((b=>1===b.nodeType));return i.length>0?a(i[0].parentElement,e,o,r,t+1):[]},l=Array.from(b.children||[]);for(const b of l)e(b)||(o(b)&&i.push(b),null!=b.shadowRoot?i.push(...a(b.shadowRoot,e,o,r,t+1)):"SLOT"===b.tagName?i.push(...s(b)):i.push(...a(b,e,o,r,t+1)));return i}function i(b){return b.hasAttribute("hidden")||b.hasAttribute("aria-hidden")&&"false"!==b.getAttribute("aria-hidden")||"none"===b.style.display||"0"===b.style.opacity||"hidden"===b.style.visibility||"collapse"===b.style.visibility}function s(b){return"-1"!==b.getAttribute("tabindex")&&!i(b)&&!function(b){return b.hasAttribute("disabled")||b.hasAttribute("aria-disabled")&&"false"!==b.getAttribute("aria-disabled")}(b)&&(b.hasAttribute("tabindex")||(b instanceof HTMLAnchorElement||b instanceof HTMLAreaElement)&&b.hasAttribute("href")||b instanceof HTMLButtonElement||b instanceof HTMLInputElement||b instanceof HTMLTextAreaElement||b instanceof HTMLSelectElement||b instanceof HTMLIFrameElement)}const l=class{constructor(o){b(this,o),this.b2bClose=e(this,"b2b-close",7),this.b2bBeforeClose=e(this,"b2b-before-close",7),this.focusableElements=[],this.toggleIconHover=()=>{this.iconHover=!this.iconHover},this.emitBeforeClose=b=>{this.b2bBeforeClose.emit({trigger:b}).defaultPrevented||(this.opened=!1)},this.handleBackdropDismiss=()=>{this.backdropDismiss&&this.emitBeforeClose("BACKDROP")},this.handleClickDismiss=()=>{this.emitBeforeClose("CLOSE_BUTTON")},this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())},this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())},this.heading=void 0,this.opened=!1,this.backdropDismiss=!1,this.escDismiss=!0,this.variant="default",this.iconHover=!1,this.isOpen=this.opened||!1}handleKeypress(b){this.isOpen&&this.escDismiss&&"Escape"===b.key&&(this.emitBeforeClose("ESCAPE_KEY"),b.stopPropagation())}openedChanged(b){!0===b?this.open():this.close()}attemptFocus(b){null!=b?b.focus():this.closeButton.focus()}open(){this.isOpen=!0}close(){this.isOpen=!1,this.b2bClose.emit()}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}componentDidLoad(){this.focusableElements=a(this.hostElement.shadowRoot,(b=>i(b)||b.matches("[data-focus-trap-edge]")),s)}componentDidRender(){this.attemptFocus(this.getFirstFocusableElement())}render(){return o(r,null,o("div",{class:{"b2b-modal":!0,"b2b-modal--open":this.opened}},o("div",{"data-focus-trap-edge":!0,onFocus:this.handleTopFocus,tabIndex:0}),o("div",{class:{"b2b-modal-dialog":!0,[`b2b-modal-dialog--${this.variant}`]:!0}},o("div",{class:"b2b-modal-dialog--header"},o("b2b-headline",{align:"center",size:"200",noMargin:!0},this.heading),o("button",{type:"button",class:"b2b-modal-dialog--close",onMouseEnter:this.toggleIconHover,onMouseLeave:this.toggleIconHover,onClick:this.handleClickDismiss,ref:b=>this.closeButton=b},o("b2b-icon",{icon:"b2b_icon-close",color:this.iconHover?"primary":"secondary"}))),o("div",{class:"b2b-modal-dialog--body"},o("slot",null)),o("div",{class:"b2b-modal-dialog--footer"},o("div",{class:"b2b-modal-dialog--footer-left"},o("slot",{name:"footer-left"})),o("div",{class:"b2b-modal-dialog--footer-right"},o("slot",{name:"footer-right"})))),o("div",{"data-focus-trap-edge":!0,onFocus:this.handleBottomFocus,tabIndex:0}),o("div",{class:"b2b-modal--backdrop",onClick:this.handleBackdropDismiss})))}get hostElement(){return t(this)}static get watchers(){return{opened:["openedChanged"]}}};l.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,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:100;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal--backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal-dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal-dialog--header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal-dialog--close{cursor:pointer;background:transparent;padding:0;border:none}:host .b2b-modal-dialog--close .b2b-icon{transition:all 0.3s ease}:host .b2b-modal-dialog--footer{display:flex;justify-content:space-between;padding-top:calc(var(--b2b-size-space-75) * 2);margin-top:calc(var(--b2b-size-space-75) * 2);border-top:var(--b2b-size-1) solid var(--b2b-color-border-100)}:host .b2b-modal-dialog--footer-left{display:flex;justify-content:flex-start}:host .b2b-modal-dialog--footer-right{display:flex;justify-content:flex-end}:host .b2b-modal-dialog--large{max-width:var(--b2b-component-modal-large-max-width)}@media only screen and (max-width: var(--b2b-component-modal-large-max-width)){:host .b2b-modal-dialog--large{left:0;width:auto;max-width:var(--b2b-component-modal-large-max-width)}}@media only screen and (max-width: var(--b2b-component-modal-default-max-width)){:host .b2b-modal-dialog{left:0;width:auto;max-width:var(--b2b-component-modal-default-max-width)}}::slotted(b2b-button[slot=footer-right]){margin-left:var(--b2b-size-space-75)}';export{l as b2b_modal}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as b,c as e,h as r,H as o,g as i}from"./p-d1c69d72.js";const s=class{constructor(r){b(this,r),this.b2bGroupChange=e(this,"b2b-group-change",7),this.toggleAllDisabled=()=>{this.getChildNodes().forEach(this.disabled?b=>{b.disabled=!0}:b=>{b.disabled=!1})},this.setFirstActiveOnInit=()=>{this.getChildNodes()[0].checked=!0},this.getChildNodes=()=>Array.from(this.host.querySelectorAll("b2b-toggle-button")),this.name=void 0,this.disabled=!1,this.currentValue=void 0}handleToggleButtonChange(b){this.currentValue=b.detail.value,this.b2bGroupChange.emit({value:b.detail.value})}disabledChanged(){this.toggleAllDisabled()}componentDidLoad(){this.setFirstActiveOnInit(),this.disabled&&this.toggleAllDisabled()}render(){return r(o,null,r("div",{class:{"b2b-toggle-group":!0,"b2b-toggle-group-disabled":this.disabled}},r("fieldset",null,r("slot",null))))}get host(){return i(this)}static get watchers(){return{disabled:["disabledChanged"]}}};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")}.b2b-toggle-group fieldset{border:none;margin:0;padding:0;font-size:0}::slotted(b2b-toggle-button){--b2b-border-radius:0;--b2b-border-right:0}::slotted(b2b-toggle-button:first-child){--b2b-border-radius:var(--b2b-size-border-no-radius-right)}::slotted(b2b-toggle-button:last-child){--b2b-border-right:1px solid var(--b2b-color-grey-200);--b2b-border-radius:var(--b2b-size-border-no-radius-left)}::slotted(b2b-toggle-button[disabled]){--b2b-border-left:1px solid var(--b2b-color-grey-200)}::slotted(b2b-toggle-button[disabled]:first-child){--b2b-border-left:1px solid var(--b2b-color-grey-100)}.b2b-toggle-group-disabled ::slotted(b2b-toggle-button[disabled]){--b2b-border-left:1px solid var(--b2b-color-grey-100)}';export{s as b2b_toggle_group}
|
|
@@ -125,7 +125,7 @@ function isFocusable($elem) {
|
|
|
125
125
|
$elem instanceof HTMLIFrameElement);
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
const modalCss = ":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,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:100;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal--backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal-dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal-dialog--header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal-dialog--close{cursor:pointer;padding:0;
|
|
128
|
+
const modalCss = ":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,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:100;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal--backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal-dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal-dialog--header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal-dialog--close{cursor:pointer;background:transparent;padding:0;border:none}:host .b2b-modal-dialog--close .b2b-icon{transition:all 0.3s ease}:host .b2b-modal-dialog--footer{display:flex;justify-content:space-between;padding-top:calc(var(--b2b-size-space-75) * 2);margin-top:calc(var(--b2b-size-space-75) * 2);border-top:var(--b2b-size-1) solid var(--b2b-color-border-100)}:host .b2b-modal-dialog--footer-left{display:flex;justify-content:flex-start}:host .b2b-modal-dialog--footer-right{display:flex;justify-content:flex-end}:host .b2b-modal-dialog--large{max-width:var(--b2b-component-modal-large-max-width)}@media only screen and (max-width: var(--b2b-component-modal-large-max-width)){:host .b2b-modal-dialog--large{left:0;width:auto;max-width:var(--b2b-component-modal-large-max-width)}}@media only screen and (max-width: var(--b2b-component-modal-default-max-width)){:host .b2b-modal-dialog{left:0;width:auto;max-width:var(--b2b-component-modal-default-max-width)}}::slotted(b2b-button[slot=footer-right]){margin-left:var(--b2b-size-space-75)}";
|
|
129
129
|
|
|
130
130
|
const ModalComponent = class {
|
|
131
131
|
constructor(hostRef) {
|
|
@@ -23,6 +23,10 @@ const B2BToggleGroup = class {
|
|
|
23
23
|
});
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
|
+
this.setFirstActiveOnInit = () => {
|
|
27
|
+
let nodes = this.getChildNodes();
|
|
28
|
+
nodes[0].checked = true;
|
|
29
|
+
};
|
|
26
30
|
this.getChildNodes = () => {
|
|
27
31
|
return Array.from(this.host.querySelectorAll(`b2b-toggle-button`));
|
|
28
32
|
};
|
|
@@ -40,6 +44,7 @@ const B2BToggleGroup = class {
|
|
|
40
44
|
this.toggleAllDisabled();
|
|
41
45
|
}
|
|
42
46
|
componentDidLoad() {
|
|
47
|
+
this.setFirstActiveOnInit();
|
|
43
48
|
if (this.disabled) {
|
|
44
49
|
this.toggleAllDisabled();
|
|
45
50
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -262,8 +262,8 @@
|
|
|
262
262
|
}
|
|
263
263
|
:host .b2b-modal-dialog--close {
|
|
264
264
|
cursor: pointer;
|
|
265
|
-
padding: 0;
|
|
266
265
|
background: transparent;
|
|
266
|
+
padding: 0;
|
|
267
267
|
border: none;
|
|
268
268
|
}
|
|
269
269
|
:host .b2b-modal-dialog--close .b2b-icon {
|
|
@@ -271,18 +271,17 @@
|
|
|
271
271
|
}
|
|
272
272
|
:host .b2b-modal-dialog--footer {
|
|
273
273
|
display: flex;
|
|
274
|
+
justify-content: space-between;
|
|
274
275
|
padding-top: calc(var(--b2b-size-space-75) * 2);
|
|
275
276
|
margin-top: calc(var(--b2b-size-space-75) * 2);
|
|
276
277
|
border-top: var(--b2b-size-1) solid var(--b2b-color-border-100);
|
|
277
278
|
}
|
|
278
279
|
:host .b2b-modal-dialog--footer-left {
|
|
279
280
|
display: flex;
|
|
280
|
-
flex: 1;
|
|
281
281
|
justify-content: flex-start;
|
|
282
282
|
}
|
|
283
283
|
:host .b2b-modal-dialog--footer-right {
|
|
284
284
|
display: flex;
|
|
285
|
-
flex: 1;
|
|
286
285
|
justify-content: flex-end;
|
|
287
286
|
}
|
|
288
287
|
:host .b2b-modal-dialog--large {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -14,6 +14,10 @@ export class B2BToggleGroup {
|
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
|
+
this.setFirstActiveOnInit = () => {
|
|
18
|
+
let nodes = this.getChildNodes();
|
|
19
|
+
nodes[0].checked = true;
|
|
20
|
+
};
|
|
17
21
|
this.getChildNodes = () => {
|
|
18
22
|
return Array.from(this.host.querySelectorAll(`b2b-toggle-button`));
|
|
19
23
|
};
|
|
@@ -31,6 +35,7 @@ export class B2BToggleGroup {
|
|
|
31
35
|
this.toggleAllDisabled();
|
|
32
36
|
}
|
|
33
37
|
componentDidLoad() {
|
|
38
|
+
this.setFirstActiveOnInit();
|
|
34
39
|
if (this.disabled) {
|
|
35
40
|
this.toggleAllDisabled();
|
|
36
41
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getArgTypes } from '../../docs/config/utils';
|
|
2
2
|
import { html } from 'lit-html';
|
|
3
3
|
import toggleDocs from './toggle-group.docs.mdx';
|
|
4
|
-
const Template = ({ name, disabled }) => {
|
|
4
|
+
const Template = ({ name, disabled, singleDisabled }) => {
|
|
5
5
|
return html `
|
|
6
6
|
<b2b-toggle-group name="${name}" disabled="${disabled}">
|
|
7
7
|
<b2b-toggle-button
|
|
@@ -19,6 +19,7 @@ const Template = ({ name, disabled }) => {
|
|
|
19
19
|
<b2b-toggle-button
|
|
20
20
|
name="${name}"
|
|
21
21
|
value="mnop"
|
|
22
|
+
disabled="${singleDisabled}"
|
|
22
23
|
label="MNOP"></b2b-toggle-button>
|
|
23
24
|
</b2b-toggle-group>
|
|
24
25
|
`;
|
|
@@ -26,6 +27,7 @@ const Template = ({ name, disabled }) => {
|
|
|
26
27
|
const defaultArgs = {
|
|
27
28
|
name: 'toggle-group-1',
|
|
28
29
|
disabled: false,
|
|
30
|
+
singleDisabled: false,
|
|
29
31
|
};
|
|
30
32
|
export const story010Default = Template.bind({});
|
|
31
33
|
story010Default.args = Object.assign({}, defaultArgs);
|
|
@@ -33,6 +35,9 @@ story010Default.storyName = 'Toggle Button Group';
|
|
|
33
35
|
export const story020Disabled = Template.bind({});
|
|
34
36
|
story020Disabled.args = Object.assign(Object.assign({}, defaultArgs), { disabled: true });
|
|
35
37
|
story020Disabled.storyName = 'Disabled';
|
|
38
|
+
export const story030SingleDisabled = Template.bind({});
|
|
39
|
+
story030SingleDisabled.args = Object.assign(Object.assign({}, defaultArgs), { singleDisabled: true });
|
|
40
|
+
story030SingleDisabled.storyName = 'Individual Disabled';
|
|
36
41
|
const toggleGroupArgs = getArgTypes('b2b-toggle-group');
|
|
37
42
|
export default {
|
|
38
43
|
title: 'Components/Interaction/Toggle Button Group',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, :host {
|
|
6
6
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Do not edit directly
|
|
126
|
-
* Generated on
|
|
126
|
+
* Generated on Tue, 09 May 2023 13:48:08 GMT
|
|
127
127
|
*/
|
|
128
128
|
:root [data-theme="dark"] {
|
|
129
129
|
--b2b-size-200: 5rem; /* 80px */
|
|
@@ -123,7 +123,7 @@ function isFocusable($elem) {
|
|
|
123
123
|
$elem instanceof HTMLIFrameElement);
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
const modalCss = ":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,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:100;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal--backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal-dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal-dialog--header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal-dialog--close{cursor:pointer;padding:0;
|
|
126
|
+
const modalCss = ":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,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:100;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal--backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal-dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal-dialog--header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal-dialog--close{cursor:pointer;background:transparent;padding:0;border:none}:host .b2b-modal-dialog--close .b2b-icon{transition:all 0.3s ease}:host .b2b-modal-dialog--footer{display:flex;justify-content:space-between;padding-top:calc(var(--b2b-size-space-75) * 2);margin-top:calc(var(--b2b-size-space-75) * 2);border-top:var(--b2b-size-1) solid var(--b2b-color-border-100)}:host .b2b-modal-dialog--footer-left{display:flex;justify-content:flex-start}:host .b2b-modal-dialog--footer-right{display:flex;justify-content:flex-end}:host .b2b-modal-dialog--large{max-width:var(--b2b-component-modal-large-max-width)}@media only screen and (max-width: var(--b2b-component-modal-large-max-width)){:host .b2b-modal-dialog--large{left:0;width:auto;max-width:var(--b2b-component-modal-large-max-width)}}@media only screen and (max-width: var(--b2b-component-modal-default-max-width)){:host .b2b-modal-dialog{left:0;width:auto;max-width:var(--b2b-component-modal-default-max-width)}}::slotted(b2b-button[slot=footer-right]){margin-left:var(--b2b-size-space-75)}";
|
|
127
127
|
|
|
128
128
|
const ModalComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
129
129
|
constructor() {
|
|
@@ -21,6 +21,10 @@ const B2BToggleGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
|
|
|
21
21
|
});
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
+
this.setFirstActiveOnInit = () => {
|
|
25
|
+
let nodes = this.getChildNodes();
|
|
26
|
+
nodes[0].checked = true;
|
|
27
|
+
};
|
|
24
28
|
this.getChildNodes = () => {
|
|
25
29
|
return Array.from(this.host.querySelectorAll(`b2b-toggle-button`));
|
|
26
30
|
};
|
|
@@ -38,6 +42,7 @@ const B2BToggleGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
|
|
|
38
42
|
this.toggleAllDisabled();
|
|
39
43
|
}
|
|
40
44
|
componentDidLoad() {
|
|
45
|
+
this.setFirstActiveOnInit();
|
|
41
46
|
if (this.disabled) {
|
|
42
47
|
this.toggleAllDisabled();
|
|
43
48
|
}
|
|
@@ -121,7 +121,7 @@ function isFocusable($elem) {
|
|
|
121
121
|
$elem instanceof HTMLIFrameElement);
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
const modalCss = ":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,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:100;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal--backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal-dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal-dialog--header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal-dialog--close{cursor:pointer;padding:0;
|
|
124
|
+
const modalCss = ":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,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:100;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal--backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal-dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal-dialog--header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal-dialog--close{cursor:pointer;background:transparent;padding:0;border:none}:host .b2b-modal-dialog--close .b2b-icon{transition:all 0.3s ease}:host .b2b-modal-dialog--footer{display:flex;justify-content:space-between;padding-top:calc(var(--b2b-size-space-75) * 2);margin-top:calc(var(--b2b-size-space-75) * 2);border-top:var(--b2b-size-1) solid var(--b2b-color-border-100)}:host .b2b-modal-dialog--footer-left{display:flex;justify-content:flex-start}:host .b2b-modal-dialog--footer-right{display:flex;justify-content:flex-end}:host .b2b-modal-dialog--large{max-width:var(--b2b-component-modal-large-max-width)}@media only screen and (max-width: var(--b2b-component-modal-large-max-width)){:host .b2b-modal-dialog--large{left:0;width:auto;max-width:var(--b2b-component-modal-large-max-width)}}@media only screen and (max-width: var(--b2b-component-modal-default-max-width)){:host .b2b-modal-dialog{left:0;width:auto;max-width:var(--b2b-component-modal-default-max-width)}}::slotted(b2b-button[slot=footer-right]){margin-left:var(--b2b-size-space-75)}";
|
|
125
125
|
|
|
126
126
|
const ModalComponent = class {
|
|
127
127
|
constructor(hostRef) {
|
|
@@ -19,6 +19,10 @@ const B2BToggleGroup = class {
|
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
+
this.setFirstActiveOnInit = () => {
|
|
23
|
+
let nodes = this.getChildNodes();
|
|
24
|
+
nodes[0].checked = true;
|
|
25
|
+
};
|
|
22
26
|
this.getChildNodes = () => {
|
|
23
27
|
return Array.from(this.host.querySelectorAll(`b2b-toggle-button`));
|
|
24
28
|
};
|
|
@@ -36,6 +40,7 @@ const B2BToggleGroup = class {
|
|
|
36
40
|
this.toggleAllDisabled();
|
|
37
41
|
}
|
|
38
42
|
componentDidLoad() {
|
|
43
|
+
this.setFirstActiveOnInit();
|
|
39
44
|
if (this.disabled) {
|
|
40
45
|
this.toggleAllDisabled();
|
|
41
46
|
}
|
|
@@ -12,6 +12,7 @@ export declare class B2BToggleGroup {
|
|
|
12
12
|
handleToggleButtonChange(ev: CustomEvent<ToggleButtonEventDetail>): void;
|
|
13
13
|
protected disabledChanged(): void;
|
|
14
14
|
private toggleAllDisabled;
|
|
15
|
+
private setFirstActiveOnInit;
|
|
15
16
|
private getChildNodes;
|
|
16
17
|
componentDidLoad(): void;
|
|
17
18
|
render(): any;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Meta } from '@storybook/web-components';
|
|
2
2
|
export declare const story010Default: any;
|
|
3
3
|
export declare const story020Disabled: any;
|
|
4
|
+
export declare const story030SingleDisabled: any;
|
|
4
5
|
declare const _default: Meta<import("@storybook/web-components").Args>;
|
|
5
6
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@otto-de/b2b-core-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Core components defined with Stencil",
|
|
5
5
|
"author": "Otto GmbH",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"build:storybook": "build-storybook -o docs-build/design-system"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@otto-de/b2b-tokens": "1.0.
|
|
40
|
+
"@otto-de/b2b-tokens": "1.0.1",
|
|
41
41
|
"@stencil-community/eslint-plugin": "^0.5.0",
|
|
42
42
|
"@stencil/core": "^3.0.1"
|
|
43
43
|
},
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as b,c as e,h as r,H as o,g as i}from"./p-d1c69d72.js";const s=class{constructor(r){b(this,r),this.b2bGroupChange=e(this,"b2b-group-change",7),this.toggleAllDisabled=()=>{this.getChildNodes().forEach(this.disabled?b=>{b.disabled=!0}:b=>{b.disabled=!1})},this.getChildNodes=()=>Array.from(this.host.querySelectorAll("b2b-toggle-button")),this.name=void 0,this.disabled=!1,this.currentValue=void 0}handleToggleButtonChange(b){this.currentValue=b.detail.value,this.b2bGroupChange.emit({value:b.detail.value})}disabledChanged(){this.toggleAllDisabled()}componentDidLoad(){this.disabled&&this.toggleAllDisabled()}render(){return r(o,null,r("div",{class:{"b2b-toggle-group":!0,"b2b-toggle-group-disabled":this.disabled}},r("fieldset",null,r("slot",null))))}get host(){return i(this)}static get watchers(){return{disabled:["disabledChanged"]}}};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")}.b2b-toggle-group fieldset{border:none;margin:0;padding:0;font-size:0}::slotted(b2b-toggle-button){--b2b-border-radius:0;--b2b-border-right:0}::slotted(b2b-toggle-button:first-child){--b2b-border-radius:var(--b2b-size-border-no-radius-right)}::slotted(b2b-toggle-button:last-child){--b2b-border-right:1px solid var(--b2b-color-grey-200);--b2b-border-radius:var(--b2b-size-border-no-radius-left)}::slotted(b2b-toggle-button[disabled]){--b2b-border-left:1px solid var(--b2b-color-grey-200)}::slotted(b2b-toggle-button[disabled]:first-child){--b2b-border-left:1px solid var(--b2b-color-grey-100)}.b2b-toggle-group-disabled ::slotted(b2b-toggle-button[disabled]){--b2b-border-left:1px solid var(--b2b-color-grey-100)}';export{s as b2b_toggle_group}
|