@otto-de/b2b-core-components 1.31.4 → 1.32.0

package/dist/types/components/custom-dropdown/custom-dropdown.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithDropShadow: Story;
+export declare const WithBorder: Story;
+export declare const WithSeparator: Story;
+export declare const WithIcon: Story;
+export declare const CustomDropdownOptionsDisabled: Story;
+export declare const SearchAndScrollDisabled: Story;
+export declare const CustomDropdownDisabled: Story;

package/dist/types/components.d.ts

@@ -292,6 +292,66 @@ export namespace Components {
          */
         "value"?: any;
     }
+    interface B2bCustomDropdown {
+        /**
+          * Search is automatically disabled for lists with fewer than six options.
+         */
+        "autoDisableSearch": boolean;
+        /**
+          * Whether the dropdown should have a border. Default is false.
+         */
+        "border": boolean;
+        /**
+          * Whether the dropdown is disabled. Default is false.
+         */
+        "disabled": boolean;
+        /**
+          * Whether the dropdown should have a drop shadow. Default is false.
+         */
+        "dropshadow": boolean;
+        /**
+          * Internal: if the dropdown is opened
+         */
+        "opened": boolean;
+        /**
+          * The placeholder shown in the input field.
+         */
+        "placeholder": string;
+    }
+    interface B2bCustomDropdownOption {
+        /**
+          * Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected.
+         */
+        "disabled": boolean;
+        /**
+          * The icon to display when the option is hovered and not selected. Defaults to null (no icon).
+         */
+        "hoverIcon": any | null;
+        /**
+          * The color of the icon when the option is hovered. Defaults to 'b2b-color-black-100'.
+         */
+        "hoverIconColor": string;
+        /**
+          * The option name.
+         */
+        "option": string;
+        /**
+          * Whether the option is currently selected.
+         */
+        "selected": boolean;
+        /**
+          * The icon to display when the option is selected. Defaults to null (no icon).
+         */
+        "selectedIcon": any | null;
+        /**
+          * The color of the icon when the option is selected. Defaults to 'b2b-color-black-100'.
+         */
+        "selectedIconColor": string;
+        /**
+          * Whether the option has a separator at the bottom. Per default it is false.
+         */
+        "separator": boolean;
+    }
     interface B2bDatePicker {
         /**
           * The dates that are part of this array are disabled. By default, this is an empty array.
@@ -1466,6 +1526,10 @@ export interface B2bChipComponentCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bChipComponentElement;
 }
+export interface B2bCustomDropdownOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bCustomDropdownOptionElement;
+}
 export interface B2bDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bDatePickerElement;
@@ -1722,6 +1786,29 @@ declare global {
         prototype: HTMLB2bChipComponentElement;
         new (): HTMLB2bChipComponentElement;
     };
+    interface HTMLB2bCustomDropdownElement extends Components.B2bCustomDropdown, HTMLStencilElement {
+    }
+    var HTMLB2bCustomDropdownElement: {
+        prototype: HTMLB2bCustomDropdownElement;
+        new (): HTMLB2bCustomDropdownElement;
+    };
+    interface HTMLB2bCustomDropdownOptionElementEventMap {
+        "b2b-custom-dropdown-option-selected": OptionSelectedEventDetail;
+    }
+    interface HTMLB2bCustomDropdownOptionElement extends Components.B2bCustomDropdownOption, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bCustomDropdownOptionElementEventMap>(type: K, listener: (this: HTMLB2bCustomDropdownOptionElement, ev: B2bCustomDropdownOptionCustomEvent<HTMLB2bCustomDropdownOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLB2bCustomDropdownOptionElementEventMap>(type: K, listener: (this: HTMLB2bCustomDropdownOptionElement, ev: B2bCustomDropdownOptionCustomEvent<HTMLB2bCustomDropdownOptionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLB2bCustomDropdownOptionElement: {
+        prototype: HTMLB2bCustomDropdownOptionElement;
+        new (): HTMLB2bCustomDropdownOptionElement;
+    };
     interface HTMLB2bDatePickerElementEventMap {
         "b2b-selected": DatePickerEventDetail;
         "b2b-clear": DateClear;
@@ -2425,6 +2512,8 @@ declare global {
         "b2b-checkbox": HTMLB2bCheckboxElement;
         "b2b-checkbox-group": HTMLB2bCheckboxGroupElement;
         "b2b-chip-component": HTMLB2bChipComponentElement;
+        "b2b-custom-dropdown": HTMLB2bCustomDropdownElement;
+        "b2b-custom-dropdown-option": HTMLB2bCustomDropdownOptionElement;
         "b2b-date-picker": HTMLB2bDatePickerElement;
         "b2b-date-picker-days": HTMLB2bDatePickerDaysElement;
         "b2b-date-picker-days-header": HTMLB2bDatePickerDaysHeaderElement;
@@ -2775,6 +2864,70 @@ declare namespace LocalJSX {
          */
         "value"?: any;
     }
+    interface B2bCustomDropdown {
+        /**
+          * Search is automatically disabled for lists with fewer than six options.
+         */
+        "autoDisableSearch"?: boolean;
+        /**
+          * Whether the dropdown should have a border. Default is false.
+         */
+        "border"?: boolean;
+        /**
+          * Whether the dropdown is disabled. Default is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the dropdown should have a drop shadow. Default is false.
+         */
+        "dropshadow"?: boolean;
+        /**
+          * Internal: if the dropdown is opened
+         */
+        "opened"?: boolean;
+        /**
+          * The placeholder shown in the input field.
+         */
+        "placeholder"?: string;
+    }
+    interface B2bCustomDropdownOption {
+        /**
+          * Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected.
+         */
+        "disabled"?: boolean;
+        /**
+          * The icon to display when the option is hovered and not selected. Defaults to null (no icon).
+         */
+        "hoverIcon"?: any | null;
+        /**
+          * The color of the icon when the option is hovered. Defaults to 'b2b-color-black-100'.
+         */
+        "hoverIconColor"?: string;
+        /**
+          * Emits the option as a string whenever an option is selected.
+         */
+        "onB2b-custom-dropdown-option-selected"?: (event: B2bCustomDropdownOptionCustomEvent<OptionSelectedEventDetail>) => void;
+        /**
+          * The option name.
+         */
+        "option": string;
+        /**
+          * Whether the option is currently selected.
+         */
+        "selected"?: boolean;
+        /**
+          * The icon to display when the option is selected. Defaults to null (no icon).
+         */
+        "selectedIcon"?: any | null;
+        /**
+          * The color of the icon when the option is selected. Defaults to 'b2b-color-black-100'.
+         */
+        "selectedIconColor"?: string;
+        /**
+          * Whether the option has a separator at the bottom. Per default it is false.
+         */
+        "separator"?: boolean;
+    }
     interface B2bDatePicker {
         /**
           * The dates that are part of this array are disabled. By default, this is an empty array.
@@ -4081,6 +4234,8 @@ declare namespace LocalJSX {
         "b2b-checkbox": B2bCheckbox;
         "b2b-checkbox-group": B2bCheckboxGroup;
         "b2b-chip-component": B2bChipComponent;
+        "b2b-custom-dropdown": B2bCustomDropdown;
+        "b2b-custom-dropdown-option": B2bCustomDropdownOption;
         "b2b-date-picker": B2bDatePicker;
         "b2b-date-picker-days": B2bDatePickerDays;
         "b2b-date-picker-days-header": B2bDatePickerDaysHeader;
@@ -4152,6 +4307,8 @@ declare module "@stencil/core" {
             "b2b-checkbox": LocalJSX.B2bCheckbox & JSXBase.HTMLAttributes<HTMLB2bCheckboxElement>;
             "b2b-checkbox-group": LocalJSX.B2bCheckboxGroup & JSXBase.HTMLAttributes<HTMLB2bCheckboxGroupElement>;
             "b2b-chip-component": LocalJSX.B2bChipComponent & JSXBase.HTMLAttributes<HTMLB2bChipComponentElement>;
+            "b2b-custom-dropdown": LocalJSX.B2bCustomDropdown & JSXBase.HTMLAttributes<HTMLB2bCustomDropdownElement>;
+            "b2b-custom-dropdown-option": LocalJSX.B2bCustomDropdownOption & JSXBase.HTMLAttributes<HTMLB2bCustomDropdownOptionElement>;
             "b2b-date-picker": LocalJSX.B2bDatePicker & JSXBase.HTMLAttributes<HTMLB2bDatePickerElement>;
             "b2b-date-picker-days": LocalJSX.B2bDatePickerDays & JSXBase.HTMLAttributes<HTMLB2bDatePickerDaysElement>;
             "b2b-date-picker-days-header": LocalJSX.B2bDatePickerDaysHeader & JSXBase.HTMLAttributes<HTMLB2bDatePickerDaysHeaderElement>;

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@otto-de/b2b-core-components",
-  "version": "1.31.3",
+  "version": "1.31.4",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -807,6 +807,181 @@
             }
           ]
         },
+        {
+          "name": "b2b-custom-dropdown",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/custom-dropdown/custom-dropdown.d.ts",
+            "symbol": "-custom-dropdown"
+          },
+          "attributes": [
+            {
+              "name": "auto-disable-search",
+              "description": "Search is automatically disabled for lists with fewer than six options.\r\nValues: boolean",
+              "required": false,
+              "default": "true",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "border",
+              "description": "Whether the dropdown should have a border. Default is false.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the dropdown is disabled. Default is false.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "dropshadow",
+              "description": "Whether the dropdown should have a drop shadow. Default is false.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "opened",
+              "description": "Internal: if the dropdown is opened\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "placeholder",
+              "description": "The placeholder shown in the input field.\r\nValues: string",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "slots": [],
+          "events": []
+        },
+        {
+          "name": "b2b-custom-dropdown-option",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/custom-dropdown/custom-dropdown-option.d.ts",
+            "symbol": "-custom-dropdown-option"
+          },
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "hover-icon",
+              "description": "The icon to display when the option is hovered and not selected. Defaults to null (no icon).\r\nValues: any",
+              "required": false,
+              "default": "null",
+              "value": {
+                "kind": "expression",
+                "type": "any"
+              }
+            },
+            {
+              "name": "hover-icon-color",
+              "description": "The color of the icon when the option is hovered. Defaults to 'b2b-color-black-100'.\r\nValues: string",
+              "required": false,
+              "default": "'b2b-color-black-100'",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "option",
+              "description": "The option name.\r\nValues: string",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "selected",
+              "description": "Whether the option is currently selected.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "selected-icon",
+              "description": "The icon to display when the option is selected. Defaults to null (no icon).\r\nValues: any",
+              "required": false,
+              "default": "null",
+              "value": {
+                "kind": "expression",
+                "type": "any"
+              }
+            },
+            {
+              "name": "selected-icon-color",
+              "description": "The color of the icon when the option is selected. Defaults to 'b2b-color-black-100'.\r\nValues: string",
+              "required": false,
+              "default": "'b2b-color-black-100'",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "separator",
+              "description": "Whether the option has a separator at the bottom. Per default it is false.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "slots": [],
+          "events": [
+            {
+              "name": "on-selected",
+              "description": "Emits the option as a string whenever an option is selected.",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "OptionSelectedEventDetail<any>"
+                }
+              ]
+            }
+          ]
+        },
         {
           "name": "b2b-date-picker",
           "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otto-de/b2b-core-components",
-  "version": "1.31.4",
+  "version": "1.32.0",
   "description": "Core components defined with Stencil",
   "author": "Otto GmbH",
   "license": "Apache-2.0",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
-    "@otto-de/b2b-tokens": "1.31.4",
+    "@otto-de/b2b-tokens": "1.32.0",
     "@stencil/core": "4.13.0",
     "globals": "^16.0.0"
   },

package/dist/b2b-core-components/p-383d0a10.entry.js

@@ -1 +0,0 @@
-import{r as s,h as t,H as r,g as e}from"./p-b6a753e8.js";const a=class{constructor(t){s(this,t),this.margin=24}render(){return t(r,{key:"a07f27f3ed6961913c048630d3860ba7a9668cc8",style:{padding:`${this.margin}px`},class:"b2b-grid"},t("slot",{key:"6390574c52c986c73c84912586d073383ee035d8"}))}get hostElement(){return e(this)}};a.style=":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}";export{a as b2b_grid}

package/dist/b2b-core-components/p-3845cd27.entry.js

@@ -1 +0,0 @@
-import{r as b,h as o,H as e,g as r}from"./p-b6a753e8.js";const i={ARROW_UP:"ArrowUp",ARROW_DOWN:"ArrowDown",HOME:"Home",END:"End",ESC:"Escape"},t=class{constructor(o){b(this,o),this.getCurrentOption=()=>this.getAllOptions().find((b=>"0"===b.getAttribute("tabindex"))),this.getAllOptions=()=>Array.from(this.hostElement.querySelectorAll("b2b-flyout-menu-option")),this.setCurrentOption=b=>{this.getAllOptions().forEach((o=>{o.setAttribute("tabindex",o===b?"0":"-1")}))},this.resetAllOptions=()=>{this.getAllOptions().forEach((b=>{b.setAttribute("tabindex","-1")}))},this.onEscapePress=()=>{this.closeMenu()},this.toggleMenu=()=>{this.opened=!this.opened},this.closeMenu=()=>{this.opened=!1,this.resetAllOptions()},this.blurMenu=b=>{b.preventDefault();const o=b.relatedTarget;o&&"b2b-flyout-menu-option"===o.tagName.toLowerCase()||setTimeout((()=>{this.closeMenu()}),150)},this.opened=!1}connectedCallback(){const b=Array.from(this.hostElement.children).filter((b=>!b.hasAttribute("option")));0!==b.length&&(this.triggerEl=b[0],this.triggerEl.addEventListener("click",this.toggleMenu,!0),this.triggerEl.addEventListener("blur",this.blurMenu,!0))}disconnectedCallback(){Boolean(this.triggerEl)&&(this.triggerEl.removeEventListener("click",this.toggleMenu,!0),this.triggerEl.removeEventListener("blur",this.blurMenu,!0))}handleKeyDown(b){"Tab"!==b.key?b.target.tagName.toLowerCase()===this.triggerEl.tagName.toLowerCase()&&"Enter"===b.key?this.toggleMenu():Object.values(i).includes(b.key)&&this.opened&&this.navigateMenu(b):this.closeMenu()}handleSelected(){this.closeMenu()}handleClickOutside(b){(function(b,o){let e=b.target;const r=null!=e.shadowRoot,i=r?b.composedPath():[];do{if(e===o)return!1;e=r?i.shift():e.parentNode}while(Boolean(e));return!0})(b,this.hostElement)&&this.closeMenu()}navigateMenu(b){b.preventDefault();const o=this.getAllOptions(),e=this.getCurrentOption();let r=o.indexOf(e);switch(b.key){case i.ARROW_UP:r--;break;case i.ARROW_DOWN:r++;break;case i.HOME:r=0;break;case i.END:r=o.length-1;break;case i.ESC:return void this.onEscapePress();default:return}for(;r>=0&&r<o.length;){const e=o[r];if(!e.classList.contains("b2b-flyout-menu__option--disabled"))return this.setCurrentOption(e),void e.focus();b.key===i.ARROW_UP?r--:r++}r<0&&(r=o.length-1),r>o.length-1&&(r=0),this.setCurrentOption(o[r]),o[r].focus()}render(){return o(e,{key:"2c09480c749bcee0f8fd7807deb41b4862c1221e"},o("div",{key:"a087ad4e5ff06f7fdc586b415f2cc1196daae515",class:{"b2b-flyout-menu":!0}},o("div",{key:"e36aff2c778c2277e5d5d90c13d7f7d92ef7e04c",class:"b2b-flyout-menu__trigger"},o("slot",{key:"1581b6010ef02e5745b726d0f73fd3cc8caf67fe",name:"trigger"})),o("div",{key:"3d2f97df8aad17d0963601f62c4c18b488393d6d",onFocusout:this.blurMenu,class:{"b2b-flyout-menu__options__container":!0,"b2b-flyout-menu__options__container--on":this.opened}},o("div",{key:"db72e397e2dde6129468e657aaf49fdf5a470426",class:"b2b-flyout-menu__arrow"}),o("slot",{key:"ac802410833c596abdf5056f8a6e09bc12f885a6",name:"option"}))))}get hostElement(){return r(this)}};t.style=':root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme="dark"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@font-face{font-family:OttoSans;src:url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff")}.b2b-flyout-menu{position:relative;display:inline !important;}.b2b-flyout-menu__trigger{cursor:pointer;display:inline}.b2b-flyout-menu__trigger:focus{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px;z-index:9999}.b2b-flyout-menu .b2b-flyout-menu__options__container{background-color:var(--b2b-color-white-100);display:none;width:max-content;box-shadow:0 0 5px rgba(0, 0, 0, 0.2);font-size:var(--b2b-size-copy-100);font-family:var(--b2b-font-family-default);margin:0.75rem 0 0;position:absolute;right:-0.625rem;text-align:left;z-index:1100;line-height:var(--b2b-size-copy-line-height-100);padding:var(--b2b-size-10) 0}.b2b-flyout-menu .b2b-flyout-menu__options__container--on{display:block}.b2b-flyout-menu__arrow{bottom:100%;height:0.625rem;overflow:hidden;position:absolute;right:0;transform:translateX(-0.75rem);width:1.25rem;z-index:1001}.b2b-flyout-menu__arrow::after{background:var(--b2b-color-white-100);box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.2);content:"";height:0.875rem;position:absolute;transform:translateX(3px) translateY(3px) rotate(45deg);width:0.875rem}.b2b-flyout-menu .purge-css-include-variables{border-radius:var(--b2b-border-radius);border-right:var(--b2b-border-right);cursor:var(--b2b-icon-cursor)}.b2b-flyout-menu__option{display:block;padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-bottom:1px solid transparent;cursor:pointer}.b2b-flyout-menu__option--separator{border-bottom:1px solid var(--b2b-color-grey-200)}.b2b-flyout-menu__option:hover,.b2b-flyout-menu__option:focus{background-color:var(--b2b-color-hover-default);outline:none}.b2b-flyout-menu__option--disabled{pointer-events:none;color:var(--b2b-color-grey-200)}';export{t as b2b_flyout_menu}

package/dist/b2b-core-components/p-400fa973.entry.js

@@ -1 +0,0 @@
-import{r as e,h as b,H as a,g as l}from"./p-b6a753e8.js";const t=class{constructor(b){e(this,b),this.required=!1,this.disabled=!1}render(){return b(a,{key:"d65e36229d0da25028f11d3a09882824d34ef5ad"},b("label",{key:"d41e79b91dc83d081948c37a1f9a362e5eafd2ff",class:{"b2b-input-label":!0,"b2b-input-label--required":this.required,"b2b-input-label--disabled":this.disabled}},b("slot",{key:"5615f825313d29875390bcc1feadac5cb642bc8a"})))}get hostElement(){return l(this)}};t.style='.b2b-input-label{font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);color:var(--b2b-color-black-100)}.b2b-input-label--required slot::after{content:" *";color:var(--b2b-color-red-100)}.b2b-input-label--disabled{color:var(--b2b-color-grey-300)}';export{t as b2b_input_label}

package/dist/b2b-core-components/p-db205434.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e,H as s,g as d}from"./p-b6a753e8.js";const r=class{constructor(e){t(this,e),this.calculateGrowDimension=t=>{if(void 0!==t)return{flex:""+t/12*100}},this.span=void 0,this.textAlign="left"}render(){return e(s,{key:"935d5d42d247393cdcf7d247212182bb040998da",style:Object.assign(Object.assign({},this.calculateGrowDimension(this.span)),{"text-align":`${this.textAlign}`})},e("slot",{key:"d3d0ce4a59f9d17b2b5dc9bdae249135c31b771c"}))}get hostElement(){return d(this)}};export{r as b2b_grid_col}

package/dist/b2b-core-components/p-f5786cad.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as s,H as b,g as i}from"./p-b6a753e8.js";const d=class{constructor(s){t(this,s),this.b2bSearch=e(this,"b2b-search",7),this.onSearchClicked=()=>{this.b2bSearch.emit({searchTerm:this.value})},this.onInput=t=>{this.value=t.detail.value},this.onOptionSelected=t=>{this.value=t.detail.selectedOption},this.placeholder=void 0,this.optionsList=[],this.value=null,this.disabled=!1,this.closed=void 0}handleKeyDown(t){"Enter"===t.key&&this.b2bSearch.emit({searchTerm:this.value})}render(){return s(b,{key:"08be0d3238571d8a4e268d7a54d382114cd05ab4"},s("b2b-input-group",{key:"dbba9867d3b05f80edbf79973ca51cd9d7c9ec73",disabled:this.disabled},s("b2b-input-list",{key:"fec8bfb0012836b4ff458569130a016d36bbef2b",slot:"start",value:this.value,placeholder:this.placeholder,optionsList:this.optionsList,"onb2b-input":this.onInput,"onb2b-option-selected":this.onOptionSelected},s("slot",{key:"04bdd57ddbbde6f5f41f4704a2bbfa048df32aed"})),s("b2b-button",{key:"7e4d662ed1fd9423e77ee8e89beda95367f0a4a2",slot:"end",variant:"primary",onClick:this.onSearchClicked},s("b2b-icon-100",{key:"44d5ac8b006f1fabf6d81735d6d626e0dcbbc339",icon:"b2b_icon-search",clickable:!0}))))}get hostElement(){return i(this)}};export{d as b2b_search}