@otto-de/b2b-core-components 1.9.0-beta.2 → 1.10.0

package/dist/collection/components/scrollable-container/scrollable-container.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ testWidth, testHeight, testWhiteSpace }) => {
-  return html `
+    return html `
     <b2b-scrollable-container
       style=${`width: ${testWidth}; height: ${testHeight}`}>
       <b2b-paragraph style="white-space: ${testWhiteSpace}">
@@ -22,9 +22,9 @@ const Template = ({ testWidth, testHeight, testWhiteSpace }) => {
   `;
 };
 const defaultArgs = {
-  testWidth: '400px',
-  testHeight: '50px',
-  testWhiteSpace: 'inherit',
+    testWidth: '400px',
+    testHeight: '50px',
+    testWhiteSpace: 'inherit',
 };
 export const story010HorizontalScroll = Template.bind({});
 story010HorizontalScroll.args = Object.assign({}, defaultArgs);
@@ -34,27 +34,27 @@ story020VerticalScroll.args = Object.assign(Object.assign({}, defaultArgs), { te
 story020VerticalScroll.storyName = 'Vertical Scroll';
 const argsData = getArgTypes('b2b-scrollable-container');
 argsData.testWhiteSpace = {
-  options: ['normal', 'inherit'],
-  control: {
-    type: 'radio',
-  },
-  description: 'This is not a component prop. It is here to show the use of the white-space css property in the element',
+    options: ['normal', 'inherit'],
+    control: {
+        type: 'radio',
+    },
+    description: 'This is not a component prop. It is here to show the use of the white-space css property in the element',
 };
 argsData.testWidth = {
-  description: 'This is not a component prop. It is the width of the scrollable container.',
+    description: 'This is not a component prop. It is the width of the scrollable container.',
 };
 argsData.testHeight = {
-  description: 'This is not a component prop. It is the height of the scrollable container.',
+    description: 'This is not a component prop. It is the height of the scrollable container.',
 };
 export default {
-  title: 'Components/Content/Scrollable Container',
-  argTypes: argsData,
-  viewmode: 'docs',
-  parameters: {
-    controls: { expanded: true },
-    backgrounds: {
-      default: 'docsBackground',
-      values: [{ name: 'docsBackground', value: '#fff' }],
+    title: 'Components/Content/Scrollable Container',
+    argTypes: argsData,
+    viewmode: 'docs',
+    parameters: {
+        controls: { expanded: true },
+        backgrounds: {
+            default: 'docsBackground',
+            values: [{ name: 'docsBackground', value: '#fff' }],
+        },
     },
-  },
 };

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

@@ -1,97 +1,97 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Search', () => {
-  let page;
-  const optionsList = ['option1', 'option2', 'option3'];
-  const setOptionsList = async () => {
-    const search = await page.find('b2b-search');
-    search.setProperty('optionsList', optionsList);
-    await page.waitForChanges();
-  };
-  const typeInput = async (key = '8') => {
-    let input = await page.find('b2b-search >>> b2b-input-list');
-    // focus on input element, focus method did not work
-    await input.click();
-    await input.press(key);
-    await page.waitForChanges();
-  };
-  beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent(`
+    let page;
+    const optionsList = ['option1', 'option2', 'option3'];
+    const setOptionsList = async () => {
+        const search = await page.find('b2b-search');
+        search.setProperty('optionsList', optionsList);
+        await page.waitForChanges();
+    };
+    const typeInput = async (key = '8') => {
+        let input = await page.find('b2b-search >>> b2b-input-list');
+        // focus on input element, focus method did not work
+        await input.click();
+        await input.press(key);
+        await page.waitForChanges();
+    };
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
       <b2b-search placeholder='search here'></b2b-search>
     `);
-  });
-  it('should register input text when enabled', async () => {
-    const search = await page.find('b2b-search');
-    await typeInput('8');
-    let inputValue = search.getAttribute('value');
-    expect(inputValue).toBe('8');
-  });
-  it('should not receive input text when disabled', async () => {
-    const search = await page.find('b2b-search');
-    search.setAttribute('disabled', true);
-    await page.waitForChanges();
-    await typeInput();
-    let inputValue = search.getAttribute('value');
-    expect(inputValue).toBe(null);
-  });
-  it('should emit search event when clicking search button', async () => {
-    const searchEventSpy = await page.spyOnEvent('b2b-search');
-    const button = await page.find('b2b-search >>> b2b-button');
-    await button.click();
-    expect(searchEventSpy).toHaveReceivedEvent();
-  });
-  it('should emit search event with search input data', async () => {
-    const searchString = 'some search value';
-    const searchEventSpy = await page.spyOnEvent('b2b-search');
-    const searchInputEventSpy = await page.spyOnEvent('b2b-input');
-    const input = await page.find('b2b-search >>> b2b-input-list');
-    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
-    await page.waitForChanges();
-    const button = await page.find('b2b-search >>> b2b-button');
-    await button.click();
-    expect(searchInputEventSpy).toHaveReceivedEvent();
-    expect(searchEventSpy).toHaveReceivedEventDetail({
-      searchTerm: searchString,
     });
-  });
-  it('should emit search event on enter press', async () => {
-    const searchString = 'some search value';
-    const searchEventSpy = await page.spyOnEvent('b2b-search');
-    const searchInputEventSpy = await page.spyOnEvent('b2b-input');
-    const input = await page.find('b2b-search >>> b2b-input-list');
-    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
-    await page.waitForChanges();
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Enter');
-    expect(searchInputEventSpy).toHaveReceivedEvent();
-    expect(searchEventSpy).toHaveReceivedEventDetail({
-      searchTerm: searchString,
+    it('should register input text when enabled', async () => {
+        const search = await page.find('b2b-search');
+        await typeInput('8');
+        let inputValue = search.getAttribute('value');
+        expect(inputValue).toBe('8');
     });
-  });
-  it('should emit input event when typing on input', async () => {
-    const searchString = 'some search value';
-    const inputEventSpy = await page.spyOnEvent('b2b-input');
-    const input = await page.find('b2b-search >>> b2b-input-list');
-    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
-    await page.waitForChanges();
-    expect(inputEventSpy).toHaveReceivedEvent();
-    expect(inputEventSpy).toHaveReceivedEventDetail({ value: searchString });
-  });
-  it('should emit selected option when clicking search button', async () => {
-    await setOptionsList();
-    const searchEventSpy = await page.spyOnEvent('b2b-search');
-    const input = await page.find('b2b-search >>> b2b-input-list');
-    // focus on input element, focus method did not work
-    await input.click();
-    await input.press('8');
-    await page.waitForChanges();
-    // Click first option on the list
-    const option = await page.find({ text: optionsList[0] });
-    await option.click();
-    const button = await page.find('b2b-search >>> b2b-button');
-    await button.click();
-    expect(searchEventSpy).toHaveReceivedEventDetail({
-      searchTerm: optionsList[0],
+    it('should not receive input text when disabled', async () => {
+        const search = await page.find('b2b-search');
+        search.setAttribute('disabled', true);
+        await page.waitForChanges();
+        await typeInput();
+        let inputValue = search.getAttribute('value');
+        expect(inputValue).toBe(null);
+    });
+    it('should emit search event when clicking search button', async () => {
+        const searchEventSpy = await page.spyOnEvent('b2b-search');
+        const button = await page.find('b2b-search >>> b2b-button');
+        await button.click();
+        expect(searchEventSpy).toHaveReceivedEvent();
+    });
+    it('should emit search event with search input data', async () => {
+        const searchString = 'some search value';
+        const searchEventSpy = await page.spyOnEvent('b2b-search');
+        const searchInputEventSpy = await page.spyOnEvent('b2b-input');
+        const input = await page.find('b2b-search >>> b2b-input-list');
+        await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+        await page.waitForChanges();
+        const button = await page.find('b2b-search >>> b2b-button');
+        await button.click();
+        expect(searchInputEventSpy).toHaveReceivedEvent();
+        expect(searchEventSpy).toHaveReceivedEventDetail({
+            searchTerm: searchString,
+        });
+    });
+    it('should emit search event on enter press', async () => {
+        const searchString = 'some search value';
+        const searchEventSpy = await page.spyOnEvent('b2b-search');
+        const searchInputEventSpy = await page.spyOnEvent('b2b-input');
+        const input = await page.find('b2b-search >>> b2b-input-list');
+        await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+        await page.waitForChanges();
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Enter');
+        expect(searchInputEventSpy).toHaveReceivedEvent();
+        expect(searchEventSpy).toHaveReceivedEventDetail({
+            searchTerm: searchString,
+        });
+    });
+    it('should emit input event when typing on input', async () => {
+        const searchString = 'some search value';
+        const inputEventSpy = await page.spyOnEvent('b2b-input');
+        const input = await page.find('b2b-search >>> b2b-input-list');
+        await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+        await page.waitForChanges();
+        expect(inputEventSpy).toHaveReceivedEvent();
+        expect(inputEventSpy).toHaveReceivedEventDetail({ value: searchString });
+    });
+    it('should emit selected option when clicking search button', async () => {
+        await setOptionsList();
+        const searchEventSpy = await page.spyOnEvent('b2b-search');
+        const input = await page.find('b2b-search >>> b2b-input-list');
+        // focus on input element, focus method did not work
+        await input.click();
+        await input.press('8');
+        await page.waitForChanges();
+        // Click first option on the list
+        const option = await page.find({ text: optionsList[0] });
+        await option.click();
+        const button = await page.find('b2b-search >>> b2b-button');
+        await button.click();
+        expect(searchEventSpy).toHaveReceivedEventDetail({
+            searchTerm: optionsList[0],
+        });
     });
-  });
 });

package/dist/collection/components/search/search.js

@@ -1,141 +1,141 @@
 import { h, Host, } from "@stencil/core";
 export class SearchComponent {
-  constructor() {
-    this.onSearchClicked = () => {
-      this.b2bSearch.emit({ searchTerm: this.value });
-    };
-    this.onInput = event => {
-      this.value = event.detail.value;
-    };
-    this.onOptionSelected = event => {
-      this.value = event.detail.selectedOption;
-    };
-    this.placeholder = undefined;
-    this.optionsList = [];
-    this.value = null;
-    this.disabled = false;
-    this.closed = undefined;
-  }
-  handleKeyDown(event) {
-    if (event.key === 'Enter') {
-      this.b2bSearch.emit({ searchTerm: this.value });
+    constructor() {
+        this.onSearchClicked = () => {
+            this.b2bSearch.emit({ searchTerm: this.value });
+        };
+        this.onInput = event => {
+            this.value = event.detail.value;
+        };
+        this.onOptionSelected = event => {
+            this.value = event.detail.selectedOption;
+        };
+        this.placeholder = undefined;
+        this.optionsList = [];
+        this.value = null;
+        this.disabled = false;
+        this.closed = undefined;
     }
-  }
-  render() {
-    return (h(Host, null, h("b2b-input-group", { disabled: this.disabled }, h("b2b-input-list", { slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", null)), h("b2b-button", { slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon", { icon: "b2b_icon-search", clickable: true })))));
-  }
-  static get is() { return "b2b-search"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() {
-    return {
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder shown in the input field."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "optionsList": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire."
-        },
-        "defaultValue": "[]"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The default value of the search input field. If defined, it will prefill the input."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "null"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the input is disabled. Default is false."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "closed": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "b2bSearch",
-        "name": "b2b-search",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits whenever the user clicks the search button. Will emit the search string."
-        },
-        "complexType": {
-          "original": "SearchClickEventDetail",
-          "resolved": "SearchClickEventDetail<any>",
-          "references": {
-            "SearchClickEventDetail": {
-              "location": "import",
-              "path": "../../utils/interfaces/form.interface",
-              "id": "src/utils/interfaces/form.interface.d.ts::SearchClickEventDetail"
-            }
-          }
+    handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            this.b2bSearch.emit({ searchTerm: this.value });
         }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    render() {
+        return (h(Host, { key: '7e99171d47bd69694223275a0e54d61d2b44516e' }, h("b2b-input-group", { key: '60fd2a81394d6e7408d1ee2972d33557b2cc9feb', disabled: this.disabled }, h("b2b-input-list", { key: '33386a3ac5d58513741f4a466e9691d508c83957', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '3db98cdec46ad947049b737f5660123785da9338' })), h("b2b-button", { key: 'dd0e508bb3ad5afbc406b8ea028b8b455a0ba314', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon", { key: '3df6281860cf677bad22bd3fc6b2299cc67cee37', icon: "b2b_icon-search", clickable: true })))));
+    }
+    static get is() { return "b2b-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder shown in the input field."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "optionsList": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire."
+                },
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The default value of the search input field. If defined, it will prefill the input."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the input is disabled. Default is false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "closed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bSearch",
+                "name": "b2b-search",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the user clicks the search button. Will emit the search string."
+                },
+                "complexType": {
+                    "original": "SearchClickEventDetail",
+                    "resolved": "SearchClickEventDetail<any>",
+                    "references": {
+                        "SearchClickEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::SearchClickEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -4,24 +4,24 @@ import { useArgs } from "@storybook/preview-api";
 import dedent from "ts-dedent";
 import fruits from "./stories.data.json";
 const Template = ({ placeholder, optionsList, disabled }) => {
-  const [_, updateArgs] = useArgs();
-  const onInput = event => {
-    var _a;
-    // Read user input
-    const userInput = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    // update result list
-    if (userInput) {
-      // Filter results based on input
-      const filteredList = fruits.filter(fruit => fruit.toLowerCase().indexOf(userInput) > -1);
-      updateArgs({ optionsList: filteredList });
-    }
-    else {
-      updateArgs({ optionsList: [] });
-    }
-  };
-  // contenteditable is needed so that storybook won't interpret the key inputs as shortcuts
-  // it also works when the component has the word 'input' in its name
-  return html `<div style="width: 300px; display: block">
+    const [_, updateArgs] = useArgs();
+    const onInput = event => {
+        var _a;
+        // Read user input
+        const userInput = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        // update result list
+        if (userInput) {
+            // Filter results based on input
+            const filteredList = fruits.filter(fruit => fruit.toLowerCase().indexOf(userInput) > -1);
+            updateArgs({ optionsList: filteredList });
+        }
+        else {
+            updateArgs({ optionsList: [] });
+        }
+    };
+    // contenteditable is needed so that storybook won't interpret the key inputs as shortcuts
+    // it also works when the component has the word 'input' in its name
+    return html `<div style="width: 300px; display: block">
     <b2b-search
       contenteditable
       data-testid="search-element"
@@ -32,17 +32,17 @@ const Template = ({ placeholder, optionsList, disabled }) => {
   </div>`;
 };
 const defaultArgs = {
-  placeholder: 'Search here',
-  optionsList: [],
-  disabled: false,
+    placeholder: 'Search here',
+    optionsList: [],
+    disabled: false,
 };
 export const story010Search = Template.bind({});
 story010Search.args = Object.assign({}, defaultArgs);
 story010Search.storyName = 'Search';
 story010Search.parameters = {
-  docs: {
-    source: {
-      code: dedent `
+    docs: {
+        source: {
+            code: dedent `
       <b2b-search 
         placeholder="Search here"
         optionsList={[]} 
@@ -50,17 +50,17 @@ story010Search.parameters = {
         onB2b-search={onSearch}
         onB2b-option-selected={onOptionSelected}>
       </b2b-search>`,
+        },
     },
-  },
 };
 export const story020SearchDisabled = Template.bind({});
 story020SearchDisabled.storyName = 'Disabled';
 story020SearchDisabled.args = {
-  placeholder: 'Input List Component',
-  disabled: true,
+    placeholder: 'Input List Component',
+    disabled: true,
 };
 const CustomSearchTemplate = ({ placeholder, optionsList }) => {
-  return html `<div style="width: 500px; height: 130px;">
+    return html `<div style="width: 500px; height: 130px;">
     <b2b-input-group>
       <b2b-input-list
         slot="start"
@@ -79,15 +79,15 @@ const CustomSearchTemplate = ({ placeholder, optionsList }) => {
 export const story030CustomSearch = CustomSearchTemplate.bind({});
 story030CustomSearch.storyName = 'Custom Search';
 story030CustomSearch.args = {
-  placeholder: 'Input List Component',
-  optionsList: ['result A', 'result B'],
+    placeholder: 'Input List Component',
+    optionsList: ['result A', 'result B'],
 };
 const controls = {};
 const searchArgs = getArgTypes('b2b-search', controls);
 // this removes the long list but still show the description for the prop
 searchArgs.optionsList = Object.assign(Object.assign({}, searchArgs.optionsList), { control: false });
 export default {
-  title: 'Components/Form/Search',
-  argTypes: Object.assign(Object.assign({}, searchArgs), { optionsList: { table: { disable: true } }, value: { table: { disable: true } } }),
-  viewmode: 'docs',
+    title: 'Components/Form/Search',
+    argTypes: Object.assign(Object.assign({}, searchArgs), { optionsList: { table: { disable: true } }, value: { table: { disable: true } } }),
+    viewmode: 'docs',
 };