@otto-de/b2b-core-components 1.7.0 → 1.8.1

package/dist/collection/components/icon/request.js

@@ -1,5 +1,5 @@
-import { Env, getAssetPath } from '@stencil/core';
-import { ICON_PATH } from '../../utils/resources';
+import { Env, getAssetPath } from "@stencil/core";
+import { ICON_PATH } from "../../utils/resources";
 export const iconContent = new Map();
 const requests = new Map();
 export const fetchIcon = (icon) => {

package/dist/collection/components/icon/types.js

@@ -311,5 +311,9 @@ export const iconTypes = [
   "b2b_icon-work-life",
   "b2b_icon-workshop",
   "b2b_icon-zoom-in",
-  "b2b_icon-zoom-out"
+  "b2b_icon-zoom-out",
+  "b2b_logo-carrier-dhl",
+  "b2b_logo-carrier-gls",
+  "b2b_logo-carrier-hermes",
+  "b2b_logo-carrier-ups"
 ];

package/dist/collection/components/input/input.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Oct 2023 14:16:21 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Oct 2023 14:16:22 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/input/input.e2e.js

@@ -1,10 +1,10 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Input', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-input></b2b-input>
+    await page.setContent(`
+      <b2b-input></b2b-input>
     `);
   });
   it('should register input text when enabled', async () => {

package/dist/collection/components/input/input.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 /** Input component
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
  */
@@ -138,7 +138,7 @@ export class InputComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'text'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'url'",
+          "original": "| 'text'\r\n    | 'email'\r\n    | 'number'\r\n    | 'password'\r\n    | 'search'\r\n    | 'tel'\r\n    | 'url'",
           "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "references": {}
         },
@@ -339,7 +339,8 @@ export class InputComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -358,7 +359,8 @@ export class InputComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -378,7 +380,8 @@ export class InputComponent {
           "references": {
             "InputChangeEvent": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::InputChangeEvent"
             }
           }
         }
@@ -392,7 +395,8 @@ export class InputComponent {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -408,7 +412,8 @@ export class InputComponent {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/input/input.spec.js

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { InputComponent } from './input';
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { InputComponent } from "./input";
 it('should render the input', async () => {
   const page = await newSpecPage({
     components: [InputComponent],

package/dist/collection/components/input/input.stories.js

@@ -10,8 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
   return t;
 };
-import { html } from 'lit-html';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const meta = {
   title: 'Components/Form/Input',
   component: 'b2b-input',
@@ -30,18 +30,18 @@ const meta = {
   argTypes: getArgTypes('b2b-input'),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div style="width: 400px;">
-    <b2b-input
-      label="${args.label}"
-      required="${args.required}"
-      type="${args.defaultType}"
-      disabled="${args.disabled}"
-      placeholder="${args.placeholder}"
-      value="${args.value}"
-      hint="${args.hint}"
-      error="${args.error}"
-      autofocus="${args.autofocus}"
-      invalid=${args.invalid}></b2b-input>
+    return html `<div style="width: 400px;">
+    <b2b-input
+      label="${args.label}"
+      required="${args.required}"
+      type="${args.defaultType}"
+      disabled="${args.disabled}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      hint="${args.hint}"
+      error="${args.error}"
+      autofocus="${args.autofocus}"
+      invalid=${args.invalid}></b2b-input>
   </div>`;
   },
 };
@@ -68,20 +68,20 @@ export const IconEnd = {
   args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div style="width: 400px;">
-    <b2b-input
-      label="${args.label}"
-      required="${args.required}"
-      type="${args.type}"
-      disabled="${args.disabled}"
-      placeholder="${args.placeholder}"
-      value="${args.value}"
-      hint="${args.hint}"
-      error="${args.error}"
-      autofocus="${args.autofocus}"
-      invalid=${args.invalid}
-      ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
-    ></b2b-input>
+    return html `<div style="width: 400px;">
+    <b2b-input
+      label="${args.label}"
+      required="${args.required}"
+      type="${args.type}"
+      disabled="${args.disabled}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      hint="${args.hint}"
+      error="${args.error}"
+      autofocus="${args.autofocus}"
+      invalid=${args.invalid}
+      ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
+    ></b2b-input>
   </div>`;
   },
 };
@@ -89,20 +89,20 @@ export const Prefix = {
   args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div style="width: 400px;">
-    <b2b-input
-      label="${args.label}"
-      required="${args.required}"
-      type="${args.type}"
-      disabled="${args.disabled}"
-      placeholder="${args.placeholder}"
-      value="${args.value}"
-      hint="${args.hint}"
-      error="${args.error}"
-      autofocus="${args.autofocus}"
-      invalid=${args.invalid}
-      ><span slot="start">Registration Number</span></b2b-input
-    >
+    return html `<div style="width: 400px;">
+    <b2b-input
+      label="${args.label}"
+      required="${args.required}"
+      type="${args.type}"
+      disabled="${args.disabled}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      hint="${args.hint}"
+      error="${args.error}"
+      autofocus="${args.autofocus}"
+      invalid=${args.invalid}
+      ><span slot="start">Registration Number</span></b2b-input
+    >
   </div>`;
   },
 };
@@ -110,21 +110,21 @@ export const PrefixAndSuffix = {
   args: Object.assign(Object.assign({}, meta.args), { label: 'Default Input' }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div style="width: 400px;">
-    <b2b-input
-      label="${args.label}"
-      required="${args.required}"
-      type="${args.type}"
-      disabled="${args.disabled}"
-      placeholder="${args.placeholder}"
-      value="${args.value}"
-      hint="${args.hint}"
-      error="${args.error}"
-      autofocus="${args.autofocus}"
-      invalid=${args.invalid}
-      ><span slot="start">Registration Number</span
-      ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
-    ></b2b-input>
+    return html `<div style="width: 400px;">
+    <b2b-input
+      label="${args.label}"
+      required="${args.required}"
+      type="${args.type}"
+      disabled="${args.disabled}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      hint="${args.hint}"
+      error="${args.error}"
+      autofocus="${args.autofocus}"
+      invalid=${args.invalid}
+      ><span slot="start">Registration Number</span
+      ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
+    ></b2b-input>
   </div>`;
   },
 };

package/dist/collection/components/input-group/input-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Oct 2023 14:16:21 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Oct 2023 14:16:22 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/input-group/input-group.e2e.js

@@ -1,21 +1,21 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B Input Group', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-        <b2b-input-group hint="A group hint" error="A group error">
-        <b2b-input slot="start" label="Search Term"></b2b-input>
-        <b2b-dropdown label="Data Set" invalid error="an error">
-          <option value="one">€</option>
-          <option value="one">$</option>
-        </b2b-dropdown>
-        <b2b-input label="Another input" invalid error="an error"></b2b-input>
-        <b2b-dropdown>
-          <option value="one">€</option>
-          <option value="one">$</option>
-        </b2b-dropdown>
-        <b2b-button slot="end" variant="primary" disabled><b2b-icon icon="b2b_icon-search"></b2b-icon></b2b-button>
+    await page.setContent(`
+        <b2b-input-group hint="A group hint" error="A group error">
+        <b2b-input slot="start" label="Search Term"></b2b-input>
+        <b2b-dropdown label="Data Set" invalid error="an error">
+          <option value="one">€</option>
+          <option value="one">$</option>
+        </b2b-dropdown>
+        <b2b-input label="Another input" invalid error="an error"></b2b-input>
+        <b2b-dropdown>
+          <option value="one">€</option>
+          <option value="one">$</option>
+        </b2b-dropdown>
+        <b2b-button slot="end" variant="primary" disabled><b2b-icon icon="b2b_icon-search"></b2b-icon></b2b-button>
       </b2b-input-group>`);
   });
   it('should render the input group component', async () => {

package/dist/collection/components/input-group/input-group.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class B2BInputGroup {
   constructor() {
     this.removeText = () => {

package/dist/collection/components/input-group/input-group.spec.js

@@ -1,9 +1,9 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { B2BInputGroup } from './input-group';
-import { InputComponent } from '../input/input';
-import { ButtonComponent } from '../button/button';
-import { DropdownComponent } from '../dropdown/dropdown';
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { B2BInputGroup } from "./input-group";
+import { InputComponent } from "../input/input";
+import { ButtonComponent } from "../button/button";
+import { DropdownComponent } from "../dropdown/dropdown";
 describe('B2B Input Group', () => {
   it('should render content wrapped in the input group', async () => {
     const page = await newSpecPage({

package/dist/collection/components/input-group/input-group.stories.js

@@ -1,32 +1,32 @@
-import { html } from 'lit-html';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ invalid, disabled, error, hint, additionalSlot, }) => {
   return additionalSlot
-    ? html ` <div style="width: 380px">
-        <b2b-input-group
-          invalid="${invalid}"
-          disabled="${disabled}"
-          error="${error}"
-          hint="${hint}">
-          <b2b-input slot="start" label="Search Term"></b2b-input>
-          <b2b-dropdown style="width: 90px;">
-            <option value="one">€</option>
-            <option value="two">$</option>
-          </b2b-dropdown>
-          <b2b-button slot="end" variant="primary">
-            <b2b-icon icon="b2b_icon-search"></b2b-icon>
-          </b2b-button>
-        </b2b-input-group>
+    ? html ` <div style="width: 380px">
+        <b2b-input-group
+          invalid="${invalid}"
+          disabled="${disabled}"
+          error="${error}"
+          hint="${hint}">
+          <b2b-input slot="start" label="Search Term"></b2b-input>
+          <b2b-dropdown style="width: 90px;">
+            <option value="one">€</option>
+            <option value="two">$</option>
+          </b2b-dropdown>
+          <b2b-button slot="end" variant="primary">
+            <b2b-icon icon="b2b_icon-search"></b2b-icon>
+          </b2b-button>
+        </b2b-input-group>
       </div>`
-    : html `<div style="width: 280px">
-        <b2b-input-group invalid="${invalid}" disabled="${disabled}" error="${error}" hint="${hint}">
-          <b2b-input slot="start" label="Search Term"></b2b-input>
-          <b2b-dropdown slot="end" style="width: fit-content;">
-            <option value="one">€</option>
-            <option value="two">$</option>
-          </b2b-dropdown>
-        </b2b-input-group>
-      </div>
+    : html `<div style="width: 280px">
+        <b2b-input-group invalid="${invalid}" disabled="${disabled}" error="${error}" hint="${hint}">
+          <b2b-input slot="start" label="Search Term"></b2b-input>
+          <b2b-dropdown slot="end" style="width: fit-content;">
+            <option value="one">€</option>
+            <option value="two">$</option>
+          </b2b-dropdown>
+        </b2b-input-group>
+      </div>
     </div>`;
 };
 const defaultArgs = {

package/dist/collection/components/input-label/input-label.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('b2b-input-label', () => {
   it('renders', async () => {
     const page = await newE2EPage();

package/dist/collection/components/input-label/input-label.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class InputLabelComponent {
   constructor() {
     this.required = false;

package/dist/collection/components/input-list/input-list-option.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class InputListOptionComponent {
   constructor() {
     this.handleClick = () => {
@@ -63,7 +63,8 @@ export class InputListOptionComponent {
           "references": {
             "OptionSelectedEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::OptionSelectedEventDetail"
             }
           }
         }

package/dist/collection/components/input-list/input-list.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Oct 2023 14:16:21 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Oct 2023 14:16:22 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/input-list/input-list.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-InputList', () => {
   let page;
   const optionsList = ['option1', 'option2', 'option3'];
@@ -16,8 +16,8 @@ describe('B2B-InputList', () => {
   };
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-input-list placeholder='some text'></b2b-input-list>
+    await page.setContent(`
+      <b2b-input-list placeholder='some text'></b2b-input-list>
     `);
   });
   it('should register input text when enabled', async () => {

package/dist/collection/components/input-list/input-list.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 const keys = {
   ARROW_UP: 'ArrowUp',
   ARROW_DOWN: 'ArrowDown',
@@ -314,7 +314,8 @@ export class InputListComponent {
           "references": {
             "InputClear": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::InputClear"
             }
           }
         }

package/dist/collection/components/input-list/input-list.stories.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
   return t;
 };
-import { getArgTypes } from '../../docs/config/utils';
-import { html } from 'lit-html';
-import { userEvent } from '@storybook/testing-library';
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
+import { userEvent } from "@storybook/testing-library";
 const meta = {
   title: 'Components/Form/Input List',
   component: 'b2b-input-list',
@@ -26,14 +26,14 @@ const meta = {
   argTypes: getArgTypes('b2b-input-list'),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div style="height: 130px; width: 300px">
-    <b2b-input-list
-      data-testid="element"
-      label="${args.label}"
-      required="${args.required}"
-      placeholder="${args.placeholder}"
-      disabled="${args.disabled}"
-      .optionsList=${args.optionsList}></b2b-input-list>
+    return html `<div style="height: 130px; width: 300px">
+    <b2b-input-list
+      data-testid="element"
+      label="${args.label}"
+      required="${args.required}"
+      placeholder="${args.placeholder}"
+      disabled="${args.disabled}"
+      .optionsList=${args.optionsList}></b2b-input-list>
   </div>`;
   },
 };
@@ -60,26 +60,26 @@ export const CustomList = {
   args: Object.assign({}, meta.args),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div style="height: 130px; width: 300px">
-    <b2b-input-list
-      data-testid="element"
-      label="${args.label}"
-      required="${args.required}"
-      placeholder="${args.placeholder}"
-      disabled="${args.disabled}"
-      .optionsList=${args.optionsList}
-      ><ul>
-        <li>Option 1</li>
-        <li>
-          Option 2
-          <ul>
-            <li>Option 2.1</li>
-            <li>Option 2.2</li>
-          </ul>
-        </li>
-        <li>Option 3</li>
-      </ul></b2b-input-list
-    >
+    return html `<div style="height: 130px; width: 300px">
+    <b2b-input-list
+      data-testid="element"
+      label="${args.label}"
+      required="${args.required}"
+      placeholder="${args.placeholder}"
+      disabled="${args.disabled}"
+      .optionsList=${args.optionsList}
+      ><ul>
+        <li>Option 1</li>
+        <li>
+          Option 2
+          <ul>
+            <li>Option 2.1</li>
+            <li>Option 2.2</li>
+          </ul>
+        </li>
+        <li>Option 3</li>
+      </ul></b2b-input-list
+    >
   </div>`;
   },
 };

package/dist/collection/components/label/label.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Oct 2023 14:16:21 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Oct 2023 14:16:22 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/label/label.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Label', () => {
   let page;
   beforeEach(async () => {

package/dist/collection/components/label/label.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class LabelComponent {
   constructor() {
     this.type = 'neutral';