@otto-de/b2b-core-components 1.16.0 → 1.18.0

package/dist/types/utils/interfaces/form.interface.d.ts

@@ -1,3 +1,5 @@
+import { DatePickerView } from '../../components/date-picker/date-picker.types';
+
 export interface InputChangeEvent {
   value: string | undefined | null;
 }
@@ -45,6 +47,19 @@ export interface ToggleButtonEventDetail<T = any> {
 export interface ChipComponentEventDetail<T = any> {
   value: T;
 }
-export interface CalendarEventDetail<T = any> {
+export interface DatePickerEventDetail<T = any> {
   selectedDate: Date;
 }
+
+export interface EscapePressed<T = any> {}
+export interface PreviousMonth<T = any> {}
+export interface NextMonth<T = any> {}
+export interface DatePickerViewChangedEventDetail<T = DatePickerView> {
+  value: T;
+}
+export interface MonthSelectedEventDetail<T = number> {
+  value: T;
+}
+export interface YearSelectedEventDetail<T = number> {
+  value: T;
+}

package/dist/types/utils/interfaces/interaction.interface.d.ts

@@ -10,9 +10,7 @@ export interface TabChangeEventDetail {
   previousTab: HTMLB2bTabElement;
   nextTab: HTMLB2bTabElement;
 }
-export interface EscapePressed<T = any> {}
-export interface PreviousMonth<T = any> {}
-export interface NextMonth<T = any> {}
+
 export interface ColumnSortChangeEventDetail {
   sortedColumn: string;
   sortDirection: string;

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.15.1",
+  "version": "1.17.0",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -134,6 +134,39 @@
           "slots": [],
           "events": []
         },
+        {
+          "name": "b2b-background-box",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/background-box/background-box.d.ts",
+            "symbol": "-background-box"
+          },
+          "attributes": [
+            {
+              "name": "fixed-width",
+              "description": "Fixes width to 1212px. Per default, it is false\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "no-padding",
+              "description": "Whether the box should have a padding. Per default, padding is enabled\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "slots": [],
+          "events": []
+        },
         {
           "name": "b2b-breadcrumb",
           "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
@@ -310,222 +343,6 @@
           "slots": [],
           "events": []
         },
-        {
-          "name": "b2b-calendar",
-          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
-          "description": "",
-          "source": {
-            "module": "@otto-de/b2b-core-componentssrc/components/calendar/calendar.d.ts",
-            "symbol": "-calendar"
-          },
-          "attributes": [
-            {
-              "name": "disable-future-dates",
-              "description": "Whether the dates after the current date are disabled. By default, this is false.\r\nValues: boolean",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "disable-past-dates",
-              "description": "Whether the previous dates from the current date are disabled. By default, this is true.\r\nValues: boolean",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "disable-weekends",
-              "description": "Whether the dates that fall on the weekend are disabled. By default, this is false.\r\nValues: boolean",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "label",
-              "description": "Label for the calendar component.\r\nValues: string",
-              "required": false,
-              "default": "'Zeitraum auswählen'",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            }
-          ],
-          "slots": [],
-          "events": [
-            {
-              "name": "b2b-selected",
-              "description": "Emits the selected date as Date type.",
-              "arguments": [
-                {
-                  "name": "detail",
-                  "type": "CalendarEventDetail<any>"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "name": "b2b-calendar-days",
-          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
-          "description": "",
-          "source": {
-            "module": "@otto-de/b2b-core-componentssrc/components/calendar/calendar-days.d.ts",
-            "symbol": "-calendar-days"
-          },
-          "attributes": [
-            {
-              "name": "disable-future-dates",
-              "description": "Internal whether the dates after the current date are disabled. By default, this is false.\r\nValues: boolean",
-              "required": false,
-              "default": "false",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "disable-past-dates",
-              "description": "Internal whether the dates previous to the current date are disabled. By default, this is true.\r\nValues: boolean",
-              "required": false,
-              "default": "false",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "disable-weekends",
-              "description": "Internal whether the weekends are disabled. By default, this is false.\r\nValues: boolean",
-              "required": false,
-              "default": "false",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "selected-day",
-              "description": "Internal selected day\r\nValues: number",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              }
-            },
-            {
-              "name": "selected-month",
-              "description": "Internal selected month\r\nValues: number",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              }
-            },
-            {
-              "name": "selected-year",
-              "description": "Internal selected year\r\nValues: number",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              }
-            }
-          ],
-          "slots": [],
-          "events": [
-            {
-              "name": "b2b-calendar-escape",
-              "description": "Event emitted on escape press*",
-              "arguments": [
-                {
-                  "name": "detail",
-                  "type": "EscapePressed<any>"
-                }
-              ]
-            },
-            {
-              "name": "b2b-date-selected",
-              "description": "Event emitted on selecting date*",
-              "arguments": [
-                {
-                  "name": "detail",
-                  "type": "DateSelectedEventDetail"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "name": "b2b-calendar-days-header",
-          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
-          "description": "",
-          "source": {
-            "module": "@otto-de/b2b-core-componentssrc/components/calendar/calendar-days-header.d.ts",
-            "symbol": "-calendar-days-header"
-          },
-          "attributes": [],
-          "slots": [],
-          "events": []
-        },
-        {
-          "name": "b2b-calendar-header",
-          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
-          "description": "",
-          "source": {
-            "module": "@otto-de/b2b-core-componentssrc/components/calendar/calendar-header.d.ts",
-            "symbol": "-calendar-header"
-          },
-          "attributes": [
-            {
-              "name": "selected-month",
-              "description": "Internal selected month\r\nValues: number",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              }
-            },
-            {
-              "name": "selected-year",
-              "description": "Internal selected year\r\nValues: number",
-              "required": false,
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              }
-            }
-          ],
-          "slots": [],
-          "events": [
-            {
-              "name": "b2b-calendar-next-month",
-              "description": "Event emitted for next month click*",
-              "arguments": [
-                {
-                  "name": "detail",
-                  "type": "NextMonth<any>"
-                }
-              ]
-            },
-            {
-              "name": "b2b-calendar-previous-month",
-              "description": "Event emitted for previous month click*",
-              "arguments": [
-                {
-                  "name": "detail",
-                  "type": "PreviousMonth<any>"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "b2b-card",
           "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
@@ -899,6 +716,318 @@
             }
           ]
         },
+        {
+          "name": "b2b-date-picker",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/date-picker/date-picker.d.ts",
+            "symbol": "-date-picker"
+          },
+          "attributes": [
+            {
+              "name": "disable-future-dates",
+              "description": "Whether the dates after the current date are disabled. By default, this is false.\r\nValues: boolean",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disable-past-dates",
+              "description": "Whether the previous dates from the current date are disabled. By default, this is true.\r\nValues: boolean",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disable-weekends",
+              "description": "Whether the dates that fall on the weekend are disabled. By default, this is false.\r\nValues: boolean",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "label",
+              "description": "Label for the date picker component.\r\nValues: string",
+              "required": false,
+              "default": "'Zeitraum auswählen'",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "pre-selected-date",
+              "description": "Default date picker date\r\nValues: string",
+              "required": false,
+              "default": "undefined",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "show-hint",
+              "description": "Whether to show hint message or not.\r\nValues: boolean",
+              "required": false,
+              "default": "true",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "slots": [],
+          "events": [
+            {
+              "name": "b2b-selected",
+              "description": "Emits the selected date as Date type.",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "DatePickerEventDetail<any>"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "b2b-date-picker-days",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/date-picker/date-picker-days.d.ts",
+            "symbol": "-date-picker-days"
+          },
+          "attributes": [
+            {
+              "name": "disable-future-dates",
+              "description": "Internal whether the dates after the current date are disabled. By default, this is false.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disable-past-dates",
+              "description": "Internal whether the dates previous to the current date are disabled. By default, this is true.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disable-weekends",
+              "description": "Internal whether the weekends are disabled. By default, this is false.\r\nValues: boolean",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "selected-day",
+              "description": "Internal selected day\r\nValues: number",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            },
+            {
+              "name": "selected-month",
+              "description": "Internal selected month\r\nValues: number",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            },
+            {
+              "name": "selected-year",
+              "description": "Internal selected year\r\nValues: number",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            }
+          ],
+          "slots": [],
+          "events": [
+            {
+              "name": "b2b-date-picker-escape",
+              "description": "Event emitted on escape press*",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "EscapePressed<any>"
+                }
+              ]
+            },
+            {
+              "name": "b2b-date-selected",
+              "description": "Event emitted on selecting date*",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "DateSelectedEventDetail"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "b2b-date-picker-days-header",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/date-picker/date-picker-days-header.d.ts",
+            "symbol": "-date-picker-days-header"
+          },
+          "attributes": [],
+          "slots": [],
+          "events": []
+        },
+        {
+          "name": "b2b-date-picker-header",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/date-picker/date-picker-header.d.ts",
+            "symbol": "-date-picker-header"
+          },
+          "attributes": [
+            {
+              "name": "selected-month",
+              "description": "Internal selected month\r\nValues: number",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            },
+            {
+              "name": "selected-year",
+              "description": "Internal selected year\r\nValues: number",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            }
+          ],
+          "slots": [],
+          "events": [
+            {
+              "name": "b2b-date-picker-next-month",
+              "description": "Event emitted for next month click*",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "NextMonth<any>"
+                }
+              ]
+            },
+            {
+              "name": "b2b-date-picker-previous-month",
+              "description": "Event emitted for previous month click*",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "PreviousMonth<any>"
+                }
+              ]
+            },
+            {
+              "name": "b2b-date-picker-view-changed",
+              "description": "Event emitted for changing the date picker view *",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "DatePickerViewChangedEventDetail<DatePickerView>"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "b2b-date-picker-months",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/date-picker/date-picker-months.d.ts",
+            "symbol": "-date-picker-months"
+          },
+          "attributes": [
+            {
+              "name": "selected-month",
+              "description": "Internal selected month\r\nValues: number",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            }
+          ],
+          "slots": [],
+          "events": [
+            {
+              "name": "b2b-date-picker-month-selected",
+              "description": "Event emitted on selecting month*",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "MonthSelectedEventDetail<number>"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "b2b-date-picker-years",
+          "doc-url": "https://b2b-design-system.otto.market/?path=/docs/overview--docs",
+          "description": "",
+          "source": {
+            "module": "@otto-de/b2b-core-componentssrc/components/date-picker/date-picker-years.d.ts",
+            "symbol": "-date-picker-years"
+          },
+          "attributes": [
+            {
+              "name": "selected-year",
+              "description": "Internal selected year\r\nValues: number",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            }
+          ],
+          "slots": [],
+          "events": [
+            {
+              "name": "b2b-date-picker-year-selected",
+              "description": "Event emitted on selecting year*",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "YearSelectedEventDetail<number>"
+                }
+              ]
+            }
+          ]
+        },
         {
           "name": "b2b-dropdown",
           "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.16.0",
+  "version": "1.18.0",
   "description": "Core components defined with Stencil",
   "author": "Otto GmbH",
   "license": "Apache-2.0",
@@ -39,7 +39,7 @@
     "build:storybook": "npm run copy-md-files && storybook build -o docs-build/design-system"
   },
   "dependencies": {
-    "@otto-de/b2b-tokens": "1.16.0",
+    "@otto-de/b2b-tokens": "1.18.0",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/core": "^4.12.4"
   },

package/dist/b2b-core-components/p-0291eff0.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:"0413fb6677fea801c46f2497cd3d472c9b08e3c6",style:{padding:`${this.margin}px`},class:"b2b-grid"},t("slot",{key:"7787a48252271e16f5e02f73047f31540c1aff02"}))}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-038a0f4a.entry.js

@@ -1 +0,0 @@
-import{r as e,h as b,H as l,g as a}from"./p-b6a753e8.js";const t=class{constructor(b){e(this,b),this.required=!1,this.disabled=!1}render(){return b(l,{key:"f3ee35931ef52504cad7065e84f5682ea2797104"},b("label",{key:"560dab843355abd80e26603b098c402ac6bf164d",class:{"b2b-input-label":!0,"b2b-input-label--required":this.required,"b2b-input-label--disabled":this.disabled}},b("slot",{key:"3731ae93d587f2cb6b8e12baec2e69ecc12d64f2"})))}get hostElement(){return a(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-0db8724d.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as s,H as i,g as b}from"./p-b6a753e8.js";const h=class{constructor(s){e(this,s),this.b2bSearch=t(this,"b2b-search",7),this.onSearchClicked=()=>{this.b2bSearch.emit({searchTerm:this.value})},this.onInput=e=>{this.value=e.detail.value},this.onOptionSelected=e=>{this.value=e.detail.selectedOption},this.placeholder=void 0,this.optionsList=[],this.value=null,this.disabled=!1,this.closed=void 0}handleKeyDown(e){"Enter"===e.key&&this.b2bSearch.emit({searchTerm:this.value})}render(){return s(i,{key:"6d7613cdd4db258a966144d82e39d12e03d68e03"},s("b2b-input-group",{key:"2d2c92286f0ca1de3eedeedfd3450de6df646ff2",disabled:this.disabled},s("b2b-input-list",{key:"8bd4b9debfed77a5692f35efab78842279f0cb01",slot:"start",value:this.value,placeholder:this.placeholder,optionsList:this.optionsList,"onb2b-input":this.onInput,"onb2b-option-selected":this.onOptionSelected},s("slot",{key:"70e790224ee58ce4b1fecdeaa97fcb9d83d7bf28"})),s("b2b-button",{key:"18e56ed573a9a5213dbcbc656932921e2b834295",slot:"end",variant:"primary",onClick:this.onSearchClicked},s("b2b-icon",{key:"ea1b114947eb214743793cdffa34ea400b1934b8",icon:"b2b_icon-search",clickable:!0}))))}get hostElement(){return b(this)}};export{h as b2b_search}