@otto-de/b2b-core-components 1.30.0 → 1.31.0

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

@@ -1,17 +1,15 @@
 import { h, Host } from "@stencil/core";
 export class InputLabelComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
         this.required = false;
-        /** Will render the label with a disabled style. The default value is false. */
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '5d09553056aba7fe36e2c0e3e3e4fe4576395c00' }, h("label", { key: '4654ba95cb56840db74e9a9bc00aa78e67d90ab1', class: {
+        return (h(Host, { key: 'd65e36229d0da25028f11d3a09882824d34ef5ad' }, h("label", { key: 'd41e79b91dc83d081948c37a1f9a362e5eafd2ff', class: {
                 'b2b-input-label': true,
                 'b2b-input-label--required': this.required,
                 'b2b-input-label--disabled': this.disabled,
-            } }, h("slot", { key: '49432a56ff76b712135a20ca953fabe41b8c4dcf' }))));
+            } }, h("slot", { key: '5615f825313d29875390bcc1feadac5cb642bc8a' }))));
     }
     static get is() { return "b2b-input-label"; }
     static get encapsulation() { return "shadow"; }
@@ -29,7 +27,6 @@ export class InputLabelComponent {
         return {
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -42,14 +39,12 @@ export class InputLabelComponent {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -62,8 +57,7 @@ export class InputLabelComponent {
                     "tags": [],
                     "text": "Will render the label with a disabled style. The default value is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -4,6 +4,7 @@ export class InputListOptionComponent {
         this.handleClick = () => {
             this.b2bOptionSelected.emit({ selectedOption: this.option });
         };
+        this.option = undefined;
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {
@@ -11,7 +12,7 @@ export class InputListOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'c75efd48cf0b4d786757760b30b2e864a37e726c', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
+        return (h(Host, { key: 'a08b2363f67ea513b438d8a0c7b3addb7af5155a', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
     }
     static get is() { return "b2b-input-list-option"; }
     static get originalStyleUrls() {
@@ -28,7 +29,6 @@ export class InputListOptionComponent {
         return {
             "option": {
                 "type": "string",
-                "attribute": "option",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -41,8 +41,7 @@ export class InputListOptionComponent {
                     "tags": [],
                     "text": "The option name."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "option",
                 "reflect": false
             }
         };

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

@@ -0,0 +1,241 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-InputList', () => {
+    let page;
+    const optionsList = ['option1', 'option2', 'option3'];
+    const setOptionsList = async () => {
+        const search = await page.find('b2b-input-list');
+        search.setProperty('optionsList', optionsList);
+        await page.waitForChanges();
+    };
+    const typeInput = async (key = '8') => {
+        let input = await page.find('b2b-input-list >>> b2b-input');
+        // 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-input-list placeholder='some text'></b2b-input-list>
+    `);
+    });
+    it('should register input text when enabled', async () => {
+        const inputList = await page.find('b2b-input-list');
+        await typeInput('8');
+        let inputValue = inputList.getAttribute('value');
+        expect(inputValue).toBe('8');
+    });
+    it('should not receive input text when disabled & should not show close icon', async () => {
+        const inputList = await page.find('b2b-input-list');
+        inputList.setAttribute('disabled', true);
+        await page.waitForChanges();
+        await typeInput();
+        let inputValue = inputList.getAttribute('value');
+        expect(inputValue).toBe(null);
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
+        expect(closeIcon).toBeNull();
+    });
+    it('should not not show close icon when input list has text and is disabled', async () => {
+        await typeInput('b');
+        await typeInput('2');
+        await typeInput('b');
+        const inputList = await page.find('b2b-input-list');
+        inputList.setAttribute('disabled', true);
+        await page.waitForChanges();
+        let inputValue = inputList.getAttribute('value');
+        expect(inputValue).toBe('b2b');
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
+        expect(closeIcon).toBeNull();
+    });
+    it('should not show search list when input is not focused', async () => {
+        await setOptionsList();
+        const searchListResults = await page.find({ text: optionsList[0] });
+        expect(searchListResults).toBeNull();
+    });
+    it('should not show search list when no list is provided', async () => {
+        const input = await page.find('b2b-input-list >>> b2b-input');
+        await input.click();
+        const searchListResults = await page.find({ text: optionsList[0] });
+        expect(searchListResults).toBeNull();
+    });
+    it('should not show search list when the input has no value', async () => {
+        await setOptionsList();
+        const input = await page.find('b2b-input-list');
+        // focus on input element, focus method did not work
+        await input.click();
+        await input.press('8');
+        await page.waitForChanges();
+        let searchListResults = await page.find({ text: optionsList[0] });
+        expect(await searchListResults.isVisible()).toBe(true);
+        await input.click();
+        await input.press('Backspace');
+        await page.waitForChanges();
+        searchListResults = await page.find({ text: optionsList[0] });
+        expect(searchListResults).toBeNull();
+    });
+    it('should show search list when input is focused, the input has value and list is provided in props', async () => {
+        await setOptionsList();
+        await typeInput();
+        const searchListResults = await page.find({ text: optionsList[0] });
+        expect(await searchListResults.isVisible()).toBe(true);
+    });
+    it('should emit selected option when it is selected', async () => {
+        const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
+        await setOptionsList();
+        await typeInput();
+        // Click first option on the list
+        const option = await page.find({ text: optionsList[0] });
+        // focus on input element, focus method did not work
+        await option.click();
+        expect(optionSelectedEventSpy).toHaveReceivedEvent();
+        expect(optionSelectedEventSpy).toHaveReceivedEventDetail({
+            selectedOption: optionsList[0],
+        });
+    });
+    it('should hide results when one option is selected', async () => {
+        await setOptionsList();
+        await typeInput();
+        // Click first option on the list
+        const option = await page.find({ text: optionsList[0] });
+        expect(await option.isVisible()).toBe(true);
+        await option.click();
+        const searchListResults = await page.find({ text: optionsList[0] });
+        expect(searchListResults).toBeNull();
+    });
+    it('should fill up input value with option selected', async () => {
+        await setOptionsList();
+        await typeInput('8');
+        const input = await page.find('b2b-input-list >>> b2b-input');
+        let inputValue = await input.getProperty('value');
+        expect(inputValue).toBe('8');
+        // Click first option on the list
+        const option = await page.find({ text: optionsList[0] });
+        await option.click();
+        inputValue = await input.getProperty('value');
+        expect(inputValue).toBe(optionsList[0]);
+    });
+    it('should navigate with the arrow keys', async () => {
+        await setOptionsList();
+        await typeInput();
+        await page.keyboard.press('ArrowDown');
+        page.waitForChanges();
+        await page.keyboard.press('ArrowDown');
+        page.waitForChanges();
+        const firstActiveEl = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.textContent;
+        });
+        expect(firstActiveEl).toEqualText('option2');
+        await page.keyboard.press('ArrowUp');
+        page.waitForChanges();
+        const activeEl = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.textContent;
+        });
+        expect(activeEl).toEqualText('option1');
+    });
+    it('should navigate to the first option if the home key is pressed', async () => {
+        await setOptionsList();
+        await typeInput();
+        await page.keyboard.press('ArrowDown');
+        page.waitForChanges();
+        await page.keyboard.press('ArrowDown');
+        page.waitForChanges();
+        const firstActiveEl = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.textContent;
+        });
+        expect(firstActiveEl).toEqualText('option2');
+        await page.keyboard.press('Home');
+        page.waitForChanges();
+        const activeEl = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.textContent;
+        });
+        expect(activeEl).toEqualText('option1');
+    });
+    it('should navigate to the last option if the end key is pressed', async () => {
+        await setOptionsList();
+        await typeInput();
+        await page.keyboard.press('ArrowDown');
+        await page.waitForChanges();
+        const firstActiveEl = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.textContent;
+        });
+        expect(firstActiveEl).toEqualText('option1');
+        await page.keyboard.press('End');
+        await page.waitForChanges();
+        const activeEl = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.textContent;
+        });
+        expect(activeEl).toEqualText('option3');
+    });
+    it('should not navigate with any other key than up, down, end or home', async () => {
+        await setOptionsList();
+        await typeInput();
+        await page.keyboard.press('A');
+        await page.waitForChanges();
+        const firstActiveEl = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.textContent;
+        });
+        expect(firstActiveEl).not.toEqualText('option1');
+    });
+    it('should not navigate when the input is not visible', async () => {
+        await setOptionsList();
+        await page.waitForChanges();
+        await page.keyboard.press('ArrowDown');
+        await page.waitForChanges();
+        const searchListResults = await page.find({ text: optionsList[0] });
+        expect(searchListResults).toBeNull();
+    });
+    it('should emit an option when it is focused and the enter key is pressed', async () => {
+        const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
+        await setOptionsList();
+        await typeInput();
+        await page.keyboard.press('ArrowDown');
+        await page.waitForChanges();
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        expect(optionSelectedEventSpy).toHaveReceivedEvent();
+        expect(optionSelectedEventSpy).toHaveReceivedEventDetail({
+            selectedOption: optionsList[0],
+        });
+    });
+    it('should close the input list when the escape key is pressed', async () => {
+        await setOptionsList();
+        await typeInput();
+        await page.keyboard.press('ArrowDown');
+        await page.keyboard.press('Escape');
+        await page.waitForChanges();
+        const searchListResults = await page.find({ text: optionsList[0] });
+        expect(searchListResults).toBeNull();
+    });
+    it('should show the close icon when the input has text', async () => {
+        await setOptionsList();
+        await typeInput();
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
+        expect(closeIcon).not.toBeNull();
+    });
+    it('should not show the close icon if the input is empty', async () => {
+        await setOptionsList();
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
+        expect(closeIcon).toBeNull();
+    });
+    it('should clear the input when the clear icon is clicked', async () => {
+        await setOptionsList();
+        await typeInput('8');
+        let input = await page.find('b2b-input-list >>> b2b-input');
+        let inputValue = await input.getAttribute('value');
+        expect(inputValue).toBe('8');
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
+        closeIcon.click();
+        await page.waitForChanges();
+        inputValue = await input.getAttribute('value');
+        expect(inputValue).toBe('');
+    });
+    it('should emit clear event when the clear icon is clicked', async () => {
+        const onInputEventSpy = await page.spyOnEvent('b2b-clear');
+        await typeInput();
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
+        closeIcon.click();
+        await page.waitForChanges();
+        expect(onInputEventSpy).toHaveReceivedEvent();
+    });
+});

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

@@ -8,19 +8,6 @@ const keys = {
 };
 export class InputListComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** 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. */
-        this.optionsList = [];
-        /** The default value of the input field. If defined, it will prefill the input. */
-        this.value = null;
-        /** Whether or not the input is disabled. Default is false. */
-        this.disabled = false;
-        /** @internal Whether the parent input group is disabled. Per default, it is false. */
-        this.groupDisabled = false;
-        // @State() value: string = '';
-        this.hasOptionList = this.optionsList.length > 0;
-        this.isElementFocused = false;
         this.onOptionSelected = event => {
             this.setElementOnBlur();
             this.value = event.detail.selectedOption;
@@ -86,6 +73,15 @@ export class InputListComponent {
                 await inputElement.clearInput();
             }
         };
+        this.label = undefined;
+        this.required = false;
+        this.placeholder = undefined;
+        this.optionsList = [];
+        this.value = null;
+        this.disabled = false;
+        this.groupDisabled = false;
+        this.hasOptionList = this.optionsList.length > 0;
+        this.isElementFocused = false;
     }
     handleKeyDown(event) {
         /** we need to be informed when a user changes focus to the clear button
@@ -141,13 +137,13 @@ export class InputListComponent {
     */
     render() {
         const groupOrderClass = this.getGroupOrderClassName() || '';
-        return (h(Host, { key: '3d973bc513883f9d0f638adc9e709a5986192d30', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '92092ce6722ee080c869094435159e6129cf3b29', class: {
+        return (h(Host, { key: '1c98a26046f943cbc2a8cfc75e518117d9b6d88c', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '12546194e29a272ad58f8ba911621414f67fdbdd', class: {
                 'b2b-input-list': true,
                 'b2b-input-list__options-on': this.hasOptionList &&
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, h("b2b-input", { key: '3f0af9de07a4a1d9fb071eef8963ca0a1ffe6d7b', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { key: 'f14dc0b807e6b7d54dcbe118f7f4dd2fba7a8172', icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+            } }, h("b2b-input", { key: '2670186f46694d0647b313c0533a569398494aaf', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
     }
     static get is() { return "b2b-input-list"; }
     static get encapsulation() { return "shadow"; }
@@ -165,7 +161,6 @@ export class InputListComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,13 +173,11 @@ export class InputListComponent {
                     "tags": [],
                     "text": "The input label."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -197,14 +190,12 @@ export class InputListComponent {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -217,13 +208,11 @@ export class InputListComponent {
                     "tags": [],
                     "text": "The placeholder shown in the input field."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder",
                 "reflect": true
             },
             "optionsList": {
                 "type": "unknown",
-                "attribute": "options-list",
                 "mutable": false,
                 "complexType": {
                     "original": "string[]",
@@ -236,13 +225,10 @@ export class InputListComponent {
                     "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."
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -255,14 +241,12 @@ export class InputListComponent {
                     "tags": [],
                     "text": "The default value of the input field. If defined, it will prefill the input."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "null"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -275,14 +259,12 @@ export class InputListComponent {
                     "tags": [],
                     "text": "Whether or not the input is disabled. Default is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "groupDisabled": {
                 "type": "boolean",
-                "attribute": "group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -298,8 +280,7 @@ export class InputListComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "group-disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -0,0 +1,17 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Label', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-label>Neutral</b2b-label>`);
+    });
+    it('should render the label component', async () => {
+        const element = await page.find('b2b-label');
+        expect(element).not.toBeNull();
+        expect(element).toEqualText('Neutral');
+    });
+    it('should present the label component in the default style', async () => {
+        const element = await page.find('b2b-label >>> span');
+        expect(element).toHaveClass('b2b-label--neutral');
+    });
+});

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

@@ -1,14 +1,13 @@
 import { h } from "@stencil/core";
 export class LabelComponent {
     constructor() {
-        /** The type of the label. Per default it is neutral. */
         this.type = 'neutral';
     }
     render() {
-        return (h("span", { key: '2623b52987512115fd13a608e2833cfccf42070a', class: {
+        return (h("span", { key: '36fd4a402ca1ac859e61f65a03e387d700d7133c', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, h("slot", { key: '313c14b8e71fe590dffad9f8a395ec8130e9ee01' })));
+            } }, h("slot", { key: 'f6baa21d06fa1ac1e7192f639bea7d070a4881d8' })));
     }
     static get is() { return "b2b-label"; }
     static get encapsulation() { return "shadow"; }
@@ -26,7 +25,6 @@ export class LabelComponent {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'neutral' | 'info' | 'success' | 'warning' | 'error'",
@@ -39,8 +37,7 @@ export class LabelComponent {
                     "tags": [],
                     "text": "The type of the label. Per default it is neutral."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'neutral'"
             }

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

@@ -0,0 +1,58 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { LabelComponent } from "./label";
+it('should render the label component with default values', async () => {
+    const page = await newSpecPage({
+        components: [LabelComponent],
+        template: () => h("b2b-label", null, "Neutral"),
+    });
+    expect(page.root.shadowRoot).toEqualHtml(`
+        <span class="b2b-label b2b-label--neutral">
+            <slot></slot>
+        </span>
+    `);
+});
+it('should render the label component with info styles', async () => {
+    const page = await newSpecPage({
+        components: [LabelComponent],
+        template: () => h("b2b-label", { type: "info" }, "Neutral"),
+    });
+    expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--info">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with success styles', async () => {
+    const page = await newSpecPage({
+        components: [LabelComponent],
+        template: () => h("b2b-label", { type: "success" }, "Neutral"),
+    });
+    expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--success">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with warning styles', async () => {
+    const page = await newSpecPage({
+        components: [LabelComponent],
+        template: () => h("b2b-label", { type: "warning" }, "Neutral"),
+    });
+    expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--warning">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with error styles', async () => {
+    const page = await newSpecPage({
+        components: [LabelComponent],
+        template: () => h("b2b-label", { type: "error" }, "Neutral"),
+    });
+    expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--error">
+              <slot></slot>
+          </span>
+      `);
+});