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

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.e2e.js

@@ -0,0 +1,101 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Multiselect-Dropdown', () => {
+  let page;
+  const optionsList = [
+    'Swift Carrot',
+    'Hydromelon',
+    'Skyshroom',
+    'Fortified Pumpkin',
+    'Hyrule Herb',
+    'Hylian Shroom',
+    'Mighty Banana',
+    'Endura Carrot',
+    'Golden Apple',
+  ];
+  const setOptionsList = async () => {
+    const multiselect = await page.find('b2b-multiselect-dropdown');
+    multiselect.setProperty('optionsList', optionsList);
+    await page.waitForChanges();
+  };
+  const setMaxChipAmount = async (chips) => {
+    const multiselect = await page.find('b2b-multiselect-dropdown');
+    multiselect.setProperty('maxOptionsVisible', chips);
+    await page.waitForChanges();
+  };
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-multiselect-dropdown
+    placeholder="Please select..."
+    search-placeholder="Search"
+    select-all-label="Select All"
+    label="Hylian fruits and vegetables"></b2b-multiselect-dropdown>`);
+  });
+  it('should render the multiselect dropdown', async () => {
+    const multiselect = await page.find('b2b-multiselect-dropdown');
+    await setOptionsList();
+    const options = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+    expect(options.length).toBe(10);
+    expect(multiselect).not.toBeNull();
+  });
+  it('should select an option and display it as a chip', async () => {
+    const multiselect = await page.find('b2b-multiselect-dropdown');
+    const selectedSpy = await page.spyOnEvent('b2b-selected');
+    await setOptionsList();
+    await multiselect.click();
+    await page.waitForChanges();
+    const opt = await page.find({ text: optionsList[0] });
+    await opt.click();
+    await page.waitForChanges();
+    const chip = await page.find('b2b-multiselect-dropdown >>> b2b-chip-component');
+    const val = await chip.getProperty('value');
+    expect(val).toEqualText(optionsList[0]);
+    expect(selectedSpy).toHaveReceivedEvent();
+    expect(selectedSpy).toHaveReceivedEventDetail(['Swift Carrot']);
+  });
+  it('should select all options and display them as chips', async () => {
+    const multiselect = await page.find('b2b-multiselect-dropdown');
+    const selectedSpy = await page.spyOnEvent('b2b-selected');
+    await setOptionsList();
+    await setMaxChipAmount(optionsList.length);
+    await multiselect.click();
+    await page.waitForChanges();
+    const opt = await page.find({ text: 'Select All' });
+    await opt.click();
+    await page.waitForChanges();
+    const chips = await page.findAll('b2b-multiselect-dropdown >>> b2b-chip-component');
+    expect(chips.length).toEqual(optionsList.length);
+    expect(selectedSpy).toHaveReceivedEvent();
+    expect(selectedSpy).toHaveReceivedEventDetail(optionsList);
+  });
+  it('should not display more chips than the maximum amount prop defines', async () => {
+    const multiselect = await page.find('b2b-multiselect-dropdown');
+    await setOptionsList();
+    await setMaxChipAmount(4);
+    await multiselect.click();
+    await page.waitForChanges();
+    const opt = await page.find({ text: 'Select All' });
+    await opt.click();
+    await page.waitForChanges();
+    const chips = await page.findAll('b2b-multiselect-dropdown >>> b2b-chip-component');
+    // account for overflow chip
+    expect(chips.length).toEqual(5);
+  });
+  /** TO DO: test chip closing
+   * Puppeteer has issues, but manual testing in vanilla, Vue and React confirmed logic works */
+  it('should filter options using the search', async () => {
+    const multiselect = await page.find('b2b-multiselect-dropdown');
+    await setOptionsList();
+    await multiselect.click();
+    await page.waitForChanges();
+    const input = await page.find('b2b-multiselect-dropdown >>> input');
+    await input.click();
+    await input.press('b');
+    await page.waitForChanges();
+    const options = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+    expect(options.length).toEqual(3);
+    await input.press('Backspace');
+    await page.waitForChanges();
+    const optionsAfter = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+    expect(optionsAfter.length).toEqual(10);
+  });
+});

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

@@ -0,0 +1,304 @@
+import { h, Host, } from "@stencil/core";
+export class B2bMultiSelectDropdown {
+  constructor() {
+    this.handleInput = event => {
+      this.value = event.target.value.toLowerCase();
+      if (this.value !== '') {
+        const filteredList = this.optionsList.filter(option => option.toLowerCase().indexOf(this.value) > -1);
+        this.currentList = filteredList;
+      }
+      else if (this.value === '') {
+        this.currentList = this.optionsList;
+      }
+    };
+    this.getOptions = () => {
+      return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-multiselect-option')).slice(1);
+    };
+    this.renderChips = () => {
+      return this.selectedValues.map((option, index) => {
+        if (index < this.maxOptionsVisible) {
+          return (h("b2b-chip-component", { label: option, value: option, "onB2b-close": this.handleChipClose }));
+        }
+        else if (index === this.maxOptionsVisible) {
+          return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", "has-close-button": "false", onClick: this.handleOverflowOptionsClick }));
+        }
+        else {
+          return;
+        }
+      });
+    };
+    this.handleOverflowOptionsClick = () => {
+      if (!this.isElementFocused) {
+        this.setElementOnFocus();
+      }
+    };
+    this.handleSelectedChange = event => {
+      const newOption = event.detail.selectedOption;
+      if (event.detail.selected) {
+        this.selectedValues = [...this.selectedValues, newOption];
+      }
+      else {
+        this.selectedValues = this.selectedValues.filter(el => el !== newOption);
+      }
+    };
+    this.handleChipClose = event => {
+      this.selectedValues = this.selectedValues.filter(el => el !== event.detail.value);
+      this.updateOption(event.detail.value);
+      this.resetFocus();
+    };
+    this.updateOption = (option) => {
+      const options = this.getOptions();
+      const optionToUpdate = options.find(el => el.option === option);
+      optionToUpdate.selected = false;
+    };
+    this.updateAllOptions = options => {
+      // Deselect all to avoid caching issues in Vue
+      options.forEach(option => (option.selected = false));
+      options
+        .filter(option => this.selectedValues.includes(option.option))
+        .forEach(option => (option.selected = true));
+    };
+    this.setElementOnFocus = () => {
+      this.isElementFocused = true;
+    };
+    this.setElementOnBlur = () => {
+      this.isElementFocused = false;
+    };
+    this.resetFocus = () => {
+      const el = this.hostElement.shadowRoot.querySelector('.b2b-multiselect-dropdown');
+      el.focus();
+    };
+    this.handleMouseDown = (event) => {
+      /** Keep dropdown open if a tag is removed */
+      if (this.isElementFocused) {
+        event.preventDefault();
+      }
+      else {
+        this.resetFocus();
+      }
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        this.resetFocus();
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        this.setElementOnBlur();
+      }
+    };
+    this.handleSelectAll = event => {
+      const newVal = event.detail.selected;
+      const options = this.getOptions();
+      const newVals = options.map(el => el.option);
+      for (let i = 0, n = options.length; i < n; i++) {
+        options[i].selected = newVal;
+      }
+      if (newVal) {
+        // filter out duplicates
+        this.selectedValues = Array.from(new Set([...this.selectedValues, ...newVals]));
+      }
+      else {
+        this.selectedValues = this.selectedValues.filter(option => !newVals.includes(option));
+      }
+    };
+    this.updateSelectAll = (options) => {
+      let someSelected = options.some(option => option.selected === true);
+      let everySelected = options.every(option => option.selected === true);
+      const checkbox = this.hostElement.shadowRoot.querySelector('b2b-multiselect-option');
+      checkbox.selected = everySelected;
+      checkbox.indeterminate = someSelected && !everySelected;
+    };
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.optionsList = [];
+    this.searchPlaceholder = undefined;
+    this.selectAllLabel = undefined;
+    this.maxOptionsVisible = 8;
+    this.selectedValues = [];
+    this.currentList = this.optionsList;
+    this.value = '';
+    this.isElementFocused = false;
+    this.hasOptionList = this.optionsList.length > 0;
+  }
+  /** Needed to trigger a re-render for async data */
+  watchPropHandler(newList) {
+    this.hasOptionList = newList.length > 0;
+    if (this.hasOptionList) {
+      this.currentList = newList;
+    }
+  }
+  handleSelectedValuesChange() {
+    this.b2bChange.emit(this.selectedValues);
+  }
+  componentDidUpdate() {
+    const options = this.getOptions();
+    this.updateAllOptions(options);
+    this.updateSelectAll(options);
+  }
+  render() {
+    return (h(Host, { onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", null, this.label), h("div", { class: {
+        'b2b-multiselect-dropdown': true,
+        'b2b-multiselect-dropdown--open': this.isElementFocused,
+      }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.selectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon", { icon: "b2b_icon-arrow-down" })), h("div", { class: {
+        'b2b-multiselect-dropdown__options-container': true,
+        'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
+      } }, h("div", { class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { class: "b2b-multiselect-dropdown__option__search" }, h("input", { type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+      this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option })))))));
+  }
+  static get is() { return "b2b-multiselect-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["multiselect-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["multiselect-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The input label."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "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": true
+      },
+      "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": "[]"
+      },
+      "searchPlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder shown in the search bar."
+        },
+        "attribute": "search-placeholder",
+        "reflect": false
+      },
+      "selectAllLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The string displayed as the select all label."
+        },
+        "attribute": "select-all-label",
+        "reflect": false
+      },
+      "maxOptionsVisible": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum amount of chips visible. Adjust this depending on available size of the dropdown."
+        },
+        "attribute": "max-options-visible",
+        "reflect": false,
+        "defaultValue": "8"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedValues": {},
+      "currentList": {},
+      "value": {},
+      "isElementFocused": {},
+      "hasOptionList": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bChange",
+        "name": "b2b-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits when there is a change to the currently selected values."
+        },
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "optionsList",
+        "methodName": "watchPropHandler"
+      }, {
+        "propName": "selectedValues",
+        "methodName": "handleSelectedValuesChange"
+      }];
+  }
+}

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

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
+import fruits from "./stories.data.json";
+const multiselectArgs = getArgTypes('b2b-multiselect-dropdown');
+const meta = {
+  title: 'Components/Form/Multiselect Dropdown',
+  component: 'b2b-multiselect-dropdown',
+  args: {
+    optionsList: [...fruits],
+    label: 'Fruits',
+    placeholder: 'Please select...',
+    searchPlaceholder: 'Search fruits',
+    selectAllLabel: 'Select All',
+    maxOptionsVisible: 8,
+  },
+  argTypes: Object.assign(Object.assign({}, multiselectArgs), { optionsList: { table: { disable: true } } }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<div style="width: 400px">
+    <b2b-multiselect-dropdown
+      label=${args.label}
+      max-options-visible=${args.maxOptionsVisible}
+      select-all-label=${args.selectAllLabel}
+      placeholder=${args.placeholder}
+      search-placeholder=${args.searchPlaceholder}
+      .optionsList=${args.optionsList}>
+    </b2b-multiselect-dropdown>
+  </div>`;
+  },
+};
+export default meta;
+export const Default = {
+  args: Object.assign({}, meta.args),
+};

package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.css

@@ -0,0 +1,10 @@
+.b2b-multiselect-dropdown__option {
+  display: flex;
+  flex-direction: row;
+  gap: var(--b2b-size-15);
+  padding: var(--b2b-size-20) var(--b2b-size-20) var(--b2b-size-25);
+  align-items: center;
+}
+.b2b-multiselect-dropdown__option:hover {
+  background-color: var(--b2b-color-table-selected-hover);
+}

package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.js

@@ -0,0 +1,115 @@
+import { h, Host } from "@stencil/core";
+export class B2bMultiSelectOption {
+  constructor() {
+    this.handleCheckboxChange = event => {
+      this.selected = event.detail.checked;
+      this.b2bOptionSelected.emit({
+        selected: this.selected,
+        selectedOption: this.option,
+      });
+    };
+    this.option = undefined;
+    this.selected = false;
+    this.indeterminate = false;
+  }
+  render() {
+    return (h(Host, { role: "option", class: {
+        'b2b-multiselect-dropdown__option': true,
+      } }, h("b2b-checkbox", { checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+  }
+  static get is() { return "b2b-multiselect-option"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["multiselect-option.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["multiselect-option.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "option": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label of the option."
+        },
+        "attribute": "option",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the option is currently selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Whether the checkbox is in indeterminate state."
+            }],
+          "text": ""
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bOptionSelected",
+        "name": "b2b-option-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits the option as a string whenever an option is selected."
+        },
+        "complexType": {
+          "original": "MultiSelectOptionEventDetail",
+          "resolved": "MultiSelectOptionEventDetail",
+          "references": {
+            "MultiSelectOptionEventDetail": {
+              "location": "import",
+              "path": "../../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::MultiSelectOptionEventDetail"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

package/dist/collection/components/paragraph/paragraph.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;