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

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

@@ -1,18 +1,18 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { CardComponent } from './card';
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { CardComponent } from "./card";
 it('should render the card with default values', async () => {
   const page = await newSpecPage({
     components: [CardComponent],
     template: () => h("b2b-card", null, "B2B Card"),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-card class="b2b-card" tabindex="0">
-      <mock:shadow-root>
-        <slot></slot>
-      </mock:shadow-root>
-      B2B Card
-    </b2b-card>
+  expect(page.root).toEqualHtml(`
+    <b2b-card class="b2b-card" tabindex="0">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Card
+    </b2b-card>
 		`);
 });
 it('should disable the card', async () => {
@@ -20,13 +20,13 @@ it('should disable the card', async () => {
     components: [CardComponent],
     template: () => h("b2b-card", { disabled: true }, "B2B Card"),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-card tabindex="-1" aria-disabled="true" class="b2b-card b2b-card--disabled">
-      <mock:shadow-root>
-        <div class="b2b-card--disabled-overlay"></div>
-        <slot></slot>
-      </mock:shadow-root>
-      B2B Card
-    </b2b-card>
+  expect(page.root).toEqualHtml(`
+    <b2b-card tabindex="-1" aria-disabled="true" class="b2b-card b2b-card--disabled">
+      <mock:shadow-root>
+        <div class="b2b-card--disabled-overlay"></div>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Card
+    </b2b-card>
 		`);
 });

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

@@ -1,13 +1,13 @@
-import { html } from 'lit-html';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ disabled, href, target }) => {
-  return html `<b2b-card disabled="${disabled}" href=${href} target="${target}">
-    <b2b-headline size="100">An Interactive Card</b2b-headline>
-    <b2b-paragraph
-      >You can hover over me or press tab on your keyboard to see me pop out. I
-      fill up to 100% of my parent element, so you can use me in a
-      grid.</b2b-paragraph
-    >
+  return html `<b2b-card disabled="${disabled}" href=${href} target="${target}">
+    <b2b-headline size="100">An Interactive Card</b2b-headline>
+    <b2b-paragraph
+      >You can hover over me or press tab on your keyboard to see me pop out. I
+      fill up to 100% of my parent element, so you can use me in a
+      grid.</b2b-paragraph
+    >
   </b2b-card>`;
 };
 const defaultArgs = {

package/dist/collection/components/checkbox/checkbox.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/checkbox/checkbox.e2e.js

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

package/dist/collection/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class CheckboxComponent {
   constructor() {
     this.handleFormData = (event) => {
@@ -320,7 +320,8 @@ export class CheckboxComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -339,7 +340,8 @@ export class CheckboxComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -359,7 +361,8 @@ export class CheckboxComponent {
           "references": {
             "CheckboxEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::CheckboxEventDetail"
             }
           }
         }

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

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

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

@@ -1,15 +1,15 @@
-import { html } from 'lit-html';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, checked, disabled, hint, error, name, value, invalid, }) => {
-  return html `<b2b-checkbox
-    label="${label}"
-    required="${required}"
-    checked="${checked}"
-    disabled="${disabled}"
-    hint="${hint}"
-    error="${error}"
-    name="${name}"
-    value="${value}"
+  return html `<b2b-checkbox
+    label="${label}"
+    required="${required}"
+    checked="${checked}"
+    disabled="${disabled}"
+    hint="${hint}"
+    error="${error}"
+    name="${name}"
+    value="${value}"
     invalid="${invalid}"></b2b-checkbox>`;
 };
 const defaultArgs = {

package/dist/collection/components/checkbox-group/checkbox-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/checkbox-group/checkbox-group.e2e.js

@@ -1,13 +1,13 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Checkbox-Group', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-            <b2b-checkbox-group label="test label">
-                <b2b-checkbox label="one" value="one" error="test" hint="test"></b2b-checkbox>
-                <b2b-checkbox id="disabled-checkbox" label="two" value="two" error="test" hint="test" disabled></b2b-checkbox>
-            </b2b-checkbox-group>
+    await page.setContent(`
+            <b2b-checkbox-group label="test label">
+                <b2b-checkbox label="one" value="one" error="test" hint="test"></b2b-checkbox>
+                <b2b-checkbox id="disabled-checkbox" label="two" value="two" error="test" hint="test" disabled></b2b-checkbox>
+            </b2b-checkbox-group>
         `);
   });
   it('should render the checkbox group component', async () => {

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

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

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

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { CheckboxGroupComponent } from './checkbox-group';
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { CheckboxGroupComponent } from "./checkbox-group";
 it('should render the checkbox group and not show a hint or an error unless specified', async () => {
   const page = await newSpecPage({
     components: [CheckboxGroupComponent],

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

@@ -1,18 +1,18 @@
-import { html } from 'lit-html';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, disabled, invalid, hint, error, alignment, }) => {
   const firstLabel = 'One';
   const secondLabel = 'Two';
-  return html `<b2b-checkbox-group
-    label="${label}"
-    required="${required}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    alignment="${alignment}">
-    <b2b-checkbox label="${firstLabel}"></b2b-checkbox>
-    <b2b-checkbox label="${secondLabel}"></b2b-checkbox>
+  return html `<b2b-checkbox-group
+    label="${label}"
+    required="${required}"
+    disabled="${disabled}"
+    invalid="${invalid}"
+    hint="${hint}"
+    error="${error}"
+    alignment="${alignment}">
+    <b2b-checkbox label="${firstLabel}"></b2b-checkbox>
+    <b2b-checkbox label="${secondLabel}"></b2b-checkbox>
   </b2b-checkbox-group>`;
 };
 const defaultArgs = {

package/dist/collection/components/chip/chip.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 */
@@ -213,37 +213,54 @@
   font-family: ObcIcons;
   src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
 }
-.b2b-chip {
+:host {
+  overflow: hidden;
+  display: inline-flex;
+  max-width: 100%;
+}
+:host .b2b-chip {
+  white-space: nowrap;
+  overflow: hidden;
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
-  width: fit-content;
   background-color: var(--b2b-color-grey-50);
   border-radius: var(--b2b-size-50);
   padding: var(--b2b-size-10) var(--b2b-size-25);
   line-height: var(--b2b-size-copy-line-height-100);
   height: var(--b2b-size-70);
-  display: flex;
+  display: inline-flex;
   align-items: center;
   cursor: default;
+  margin-left: var(--b2b-size-20);
 }
-.b2b-chip__label {
+:host .b2b-chip__label {
   margin-right: var(--b2b-size-10);
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
-.b2b-chip__clearIcon {
+:host .b2b-chip__clearIcon {
   display: flex;
-  fill: var(--b2b-color-icon-default);
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  fill: var(--b2b-color-grey-400);
   height: var(--b2b-size-copy-line-height-100);
   width: var(--b2b-size-50);
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transform: rotate(180deg);
+  position: relative;
+}
+:host .b2b-chip__clearIcon:hover {
+  fill: var(--b2b-color-icon-default);
 }
-.b2b-chip--disabled {
+:host .b2b-chip--disabled {
   pointer-events: none;
   background: var(--b2b-color-grey-25);
   color: var(--b2b-color-grey-400);
 }
-.b2b-chip--disabled__clearIcon {
+:host .b2b-chip--disabled__clearIcon {
   fill: var(--b2b-color-grey-400);
 }

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

@@ -1,10 +1,10 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Chip-Component', () => {
   it('should render the chip component', async () => {
     const page = await newE2EPage();
     await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);
     const chip = await page.find({ text: 'chip' });
-    const clearIcon = await page.find('b2b-chip-component >>> div.b2b-chip__clearIcon');
+    const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
     expect(chip).not.toBeNull();
     expect(clearIcon).not.toBeNull();
   });
@@ -12,7 +12,7 @@ describe('B2B-Chip-Component', () => {
     const page = await newE2EPage();
     await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);
     const b2bClose = await page.spyOnEvent('b2b-close');
-    const clearIcon = await page.find('b2b-chip-component >>>  div.b2b-chip__clearIcon');
+    const clearIcon = await page.find('b2b-chip-component >>>  button.b2b-chip__clearIcon');
     await clearIcon.click();
     expect(b2bClose).toHaveReceivedEvent();
   });

package/dist/collection/components/chip/chip.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class B2bChipComponent {
   constructor() {
     this.onClick = () => {
@@ -17,7 +17,9 @@ export class B2bChipComponent {
     return (h(Host, null, h("div", { class: {
         'b2b-chip': true,
         'b2b-chip--disabled': this.disabled,
-      } }, h("span", { class: "b2b-chip__label" }, this.label), this.hasCloseButton && (h("div", { class: {
+      } }, h("span", { class: {
+        'b2b-chip__label': true,
+      } }, this.label), this.hasCloseButton && (h("button", { class: {
         'b2b-chip__clearIcon': true,
         'b2b-chip--disabled__clearIcon': this.disabled,
       }, onClick: this.onClick }, this.clearIcon)))));
@@ -125,10 +127,12 @@ export class B2bChipComponent {
           "references": {
             "ChipComponentEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::ChipComponentEventDetail"
             }
           }
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }

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

@@ -1,17 +1,28 @@
-import { html } from 'lit-html';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, disabled, value, hasCloseButton }) => {
-  return html `<b2b-chip-component
-    label="${label}"
-    disabled="${disabled}"
-    value="${value}"
+  return html `<b2b-chip-component
+    label="${label}"
+    disabled="${disabled}"
+    value="${value}"
     has-close-button="${hasCloseButton}"></b2b-chip-component>`;
 };
+const TruncTemplate = ({ label, disabled, value, hasCloseButton }) => {
+  return html `<div
+    style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
+    <b2b-chip-component
+      label="${label}"
+      disabled="${disabled}"
+      value="${value}"
+      has-close-button="${hasCloseButton}"></b2b-chip-component>
+  </div>`;
+};
 const defaultArgs = {
   label: 'Chip Label',
   disabled: false,
   value: '',
   hasCloseButton: true,
+  truncate: false,
 };
 export const story010Default = Template.bind({});
 story010Default.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Default Chip' });
@@ -22,6 +33,9 @@ story020Disabled.storyName = 'Disabled';
 export const story030WithoutButton = Template.bind({});
 story030WithoutButton.args = Object.assign(Object.assign({}, defaultArgs), { label: ' Chip without button', hasCloseButton: false });
 story030WithoutButton.storyName = 'Without Button';
+export const story040WithTruncatedText = TruncTemplate.bind({});
+story040WithTruncatedText.args = Object.assign(Object.assign({}, defaultArgs), { label: ' Chip with truncated text' });
+story040WithTruncatedText.storyName = 'Truncated Text';
 const chipComponentArgs = getArgTypes('b2b-chip-component');
 export default {
   title: 'Components/Interaction/Chip',

package/dist/collection/components/dropdown/dropdown.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/dropdown/dropdown.e2e.js

@@ -1,13 +1,13 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Dropdown', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-dropdown label="Test Dropdown">
-          <option value="option-1" selected id="option-1">Option 1</option>
-          <option value="option-2" id="option-2">Option 2</option>
-      </b2b-dropdown>
+    await page.setContent(`
+      <b2b-dropdown label="Test Dropdown">
+          <option value="option-1" selected id="option-1">Option 1</option>
+          <option value="option-2" id="option-2">Option 2</option>
+      </b2b-dropdown>
     `);
   });
   it('should render the dropdown component', async () => {

package/dist/collection/components/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class DropdownComponent {
   constructor() {
     this.onSelect = (ev) => {
@@ -219,7 +219,8 @@ export class DropdownComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -238,7 +239,8 @@ export class DropdownComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }

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

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

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

@@ -1,20 +1,20 @@
-import { html } from 'lit-html';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, name, disabled, invalid, hint, error, }) => {
   const defaultLabel = label ? label : 'Favorite Fruit';
-  return html `<b2b-dropdown
-    label="${defaultLabel}"
-    name="${name}"
-    error="${error}"
-    hint="${hint}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    required="${required}">
-    <option value="strawberry">Strawberry</option>
-    <option value="orange">Orange</option>
-    <option value="banana">Banana</option>
-    <option value="pineapple">Pineapple</option>
-    <option value="apple" disabled>Apple</option>
+  return html `<b2b-dropdown
+    label="${defaultLabel}"
+    name="${name}"
+    error="${error}"
+    hint="${hint}"
+    disabled="${disabled}"
+    invalid="${invalid}"
+    required="${required}">
+    <option value="strawberry">Strawberry</option>
+    <option value="orange">Orange</option>
+    <option value="banana">Banana</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="apple" disabled>Apple</option>
   </b2b-dropdown>`;
 };
 const defaultArgs = {

package/dist/collection/components/grid/column.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class B2bGridColumnComponent {
   constructor() {
     this.calculateGrowDimension = (growth) => {
@@ -34,7 +34,7 @@ export class B2bGridColumnComponent {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "| 1\n    | 2\n    | 3\n    | 4\n    | 5\n    | 6\n    | 7\n    | 8\n    | 9\n    | 10\n    | 11\n    | 12",
+          "original": "| 1\r\n    | 2\r\n    | 3\r\n    | 4\r\n    | 5\r\n    | 6\r\n    | 7\r\n    | 8\r\n    | 9\r\n    | 10\r\n    | 11\r\n    | 12",
           "resolved": "1 | 10 | 11 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
           "references": {}
         },

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

@@ -1,11 +1,11 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B Grid', () => {
   it('should render the grid and children', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<b2b-grid>
-        <b2b-grid-row>
-            <b2b-grid-col></b2b-grid-col>
-        </b2b-grid-row>
+    await page.setContent(`<b2b-grid>
+        <b2b-grid-row>
+            <b2b-grid-col></b2b-grid-col>
+        </b2b-grid-row>
     </b2b-grid>`);
     const grid = await page.find('b2b-grid');
     expect(grid).not.toBeNull();

package/dist/collection/components/grid/grid.js

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