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

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

@@ -1,340 +1,335 @@
 import { h, Host, } from "@stencil/core";
 const keys = {
-  ARROW_UP: 'ArrowUp',
-  ARROW_DOWN: 'ArrowDown',
-  HOME: 'Home',
-  END: 'End',
-  ESC: 'Escape',
+    ARROW_UP: 'ArrowUp',
+    ARROW_DOWN: 'ArrowDown',
+    HOME: 'Home',
+    END: 'End',
+    ESC: 'Escape',
 };
 export class InputListComponent {
-  constructor() {
-    this.onOptionSelected = event => {
-      this.setElementOnBlur();
-      this.value = event.detail.selectedOption;
-      this.resetAllOptions();
-    };
-    this.onEscapePress = () => {
-      this.setElementOnBlur();
-      this.hostElement.shadowRoot.querySelector('b2b-input').setFocus();
-      this.resetAllOptions();
-    };
-    // needed to trigger re-render
-    this.handleInput = event => {
-      this.value = event.detail.value;
-      if (this.value === '' || null || undefined) {
-        this.setElementOnBlur();
-      }
-      this.setElementOnFocus();
-    };
-    this.setElementOnFocus = () => {
-      this.isElementFocused = true;
-    };
-    this.setElementOnBlur = () => {
-      this.isElementFocused = false;
-    };
-    this.getGroupOrderClassName = () => {
-      var _a;
-      const parentNodeName = this.hostElement.parentNode.nodeName;
-      if (parentNodeName === 'B2B-INPUT-GROUP') {
-        const slotName = ((_a = this.hostElement.assignedSlot) === null || _a === void 0 ? void 0 : _a.name) || 'middle';
-        return `b2b-group-input__${slotName}`;
-      }
-    };
-    this.getAllOptions = () => {
-      return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-input-list-option'));
-    };
-    this.getCurrentOption = () => {
-      const options = this.getAllOptions();
-      let currentOption = options.find(el => el.getAttribute('tabindex') === '0');
-      return currentOption;
-    };
-    this.setCurrentOption = (option) => {
-      const options = this.getAllOptions();
-      options.forEach(element => {
-        element.setAttribute('tabindex', element === option ? '0' : '-1');
-      });
-    };
-    this.resetAllOptions = () => {
-      const options = this.getAllOptions();
-      options.forEach(element => {
-        element.setAttribute('tabindex', '-1');
-      });
-    };
-    this.resetInput = async (event) => {
-      const inputElement = this.hostElement.shadowRoot.querySelector('b2b-input');
-      if (event.type === 'keydown' && event.key === 'Enter') {
-        /** Manually reset focus after blur to match mousedown behavior */
-        await inputElement.setFocus();
-      }
-      else if (event.type === 'mousedown') {
-        /** Manual blurring to prevent browser focus stack & component state mismatch */
-        event.preventDefault();
-        event.stopPropagation();
-        await inputElement.setFocus();
-      }
-      this.value = '';
-      this.b2bClear.emit();
-      // Called to trigger an Input Event
-      await inputElement.clearInput();
-      return;
-    };
-    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
-     * without manually blurring the element, browser focus stack and the component's
-     * isElementFocused do not align, which causes a value change during rerender
-     */
-    if (event.key === 'Tab') {
-      this.setElementOnBlur();
-    }
-    else if (this.isElementFocused &&
-      this.optionsList &&
-      Object.values(keys).includes(event.key)) {
-      const options = this.getAllOptions();
-      const activeOption = this.getCurrentOption();
-      let index = options.indexOf(activeOption);
-      event.preventDefault();
-      switch (event.key) {
-        case keys.ARROW_UP:
-          index--;
-          break;
-        case keys.ARROW_DOWN:
-          index++;
-          break;
-        case keys.HOME:
-          index = 0;
-          break;
-        case keys.END:
-          index = options.length - 1;
-          break;
-        case keys.ESC:
-          this.onEscapePress();
-          return;
-        default:
-          return;
-      }
-      if (index < 0) {
-        index = options.length - 1;
-      }
-      if (index > options.length - 1) {
-        index = 0;
-      }
-      this.setCurrentOption(options[index]);
-      options[index].focus();
+    constructor() {
+        this.onOptionSelected = event => {
+            this.setElementOnBlur();
+            this.value = event.detail.selectedOption;
+            this.resetAllOptions();
+        };
+        this.onEscapePress = () => {
+            this.setElementOnBlur();
+            this.hostElement.shadowRoot.querySelector('b2b-input').setFocus();
+            this.resetAllOptions();
+        };
+        // needed to trigger re-render
+        this.handleInput = event => {
+            this.value = event.detail.value;
+            if (this.value === '' || null || undefined) {
+                this.setElementOnBlur();
+            }
+            this.setElementOnFocus();
+        };
+        this.setElementOnFocus = () => {
+            this.isElementFocused = true;
+        };
+        this.setElementOnBlur = () => {
+            this.isElementFocused = false;
+        };
+        this.getGroupOrderClassName = () => {
+            var _a;
+            const parentNodeName = this.hostElement.parentNode.nodeName;
+            if (parentNodeName === 'B2B-INPUT-GROUP') {
+                const slotName = ((_a = this.hostElement.assignedSlot) === null || _a === void 0 ? void 0 : _a.name) || 'middle';
+                return `b2b-group-input__${slotName}`;
+            }
+        };
+        this.getAllOptions = () => {
+            return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-input-list-option'));
+        };
+        this.getCurrentOption = () => {
+            const options = this.getAllOptions();
+            let currentOption = options.find(el => el.getAttribute('tabindex') === '0');
+            return currentOption;
+        };
+        this.setCurrentOption = (option) => {
+            const options = this.getAllOptions();
+            options.forEach(element => {
+                element.setAttribute('tabindex', element === option ? '0' : '-1');
+            });
+        };
+        this.resetAllOptions = () => {
+            const options = this.getAllOptions();
+            options.forEach(element => {
+                element.setAttribute('tabindex', '-1');
+            });
+        };
+        this.resetInput = async (event) => {
+            const inputElement = this.hostElement.shadowRoot.querySelector('b2b-input');
+            event.preventDefault();
+            event.stopPropagation();
+            await inputElement.setFocus();
+            if ((event.type === 'keydown' && event.key === 'Enter') ||
+                event.type === 'mousedown') {
+                this.value = '';
+                this.b2bClear.emit();
+                // Called to trigger an Input Event
+                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;
     }
-  }
-  watchPropHandler(newList) {
-    this.hasOptionList = newList.length > 0;
-  }
-  /* Notes:
-    Needs onFocusin and onFocusout in the Host element so that the click would
-    be registered, otherwise, if placed in the input, it looses focus
-    on the input element and won't register the selection.
-  */
-  render() {
-    const groupOrderClass = this.getGroupOrderClassName() || '';
-    return (h(Host, { onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { class: {
-        'b2b-input-list': true,
-        'b2b-input-list__options-on': this.hasOptionList &&
-          this.isElementFocused &&
-          Boolean(this.value),
-        [groupOrderClass]: true,
-      } }, h("b2b-input", { type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, Boolean(this.value) && (h("b2b-icon", { 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"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["input-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["input-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input label."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds an asterisk at the end of the label to signify that the field is required."
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "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": "[]"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The default value of the 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"
-      },
-      "groupDisabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Whether the parent input group is disabled. Per default, it is false."
-            }],
-          "text": ""
-        },
-        "attribute": "group-disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasOptionList": {},
-      "isElementFocused": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "b2bClear",
-        "name": "b2b-clear",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits when the user clicks the clear button."
-        },
-        "complexType": {
-          "original": "InputClear",
-          "resolved": "InputClear<any>",
-          "references": {
-            "InputClear": {
-              "location": "import",
-              "path": "../../utils/interfaces/form.interface",
-              "id": "src/utils/interfaces/form.interface.d.ts::InputClear"
+    handleKeyDown(event) {
+        /** we need to be informed when a user changes focus to the clear button
+         * without manually blurring the element, browser focus stack and the component's
+         * isElementFocused do not align, which causes a value change during rerender
+         */
+        if (event.key === 'Tab') {
+            this.setElementOnBlur();
+        }
+        else if (this.isElementFocused &&
+            this.optionsList &&
+            Object.values(keys).includes(event.key)) {
+            const options = this.getAllOptions();
+            const activeOption = this.getCurrentOption();
+            let index = options.indexOf(activeOption);
+            event.preventDefault();
+            switch (event.key) {
+                case keys.ARROW_UP:
+                    index--;
+                    break;
+                case keys.ARROW_DOWN:
+                    index++;
+                    break;
+                case keys.HOME:
+                    index = 0;
+                    break;
+                case keys.END:
+                    index = options.length - 1;
+                    break;
+                case keys.ESC:
+                    this.onEscapePress();
+                    return;
+                default:
+                    return;
             }
-          }
+            if (index < 0) {
+                index = options.length - 1;
+            }
+            if (index > options.length - 1) {
+                index = 0;
+            }
+            this.setCurrentOption(options[index]);
+            options[index].focus();
         }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "optionsList",
-        "methodName": "watchPropHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    watchPropHandler(newList) {
+        this.hasOptionList = newList.length > 0;
+    }
+    /* Notes:
+      Needs onFocusin and onFocusout in the Host element so that the click would
+      be registered, otherwise, if placed in the input, it looses focus
+      on the input element and won't register the selection.
+    */
+    render() {
+        const groupOrderClass = this.getGroupOrderClassName() || '';
+        return (h(Host, { key: '6be87cb79c01d26042cba1172e8c7408b6266579', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: 'c0f58a46e4f90448e9fa4ff68c7bc56c878bd504', class: {
+                'b2b-input-list': true,
+                'b2b-input-list__options-on': this.hasOptionList &&
+                    this.isElementFocused &&
+                    Boolean(this.value),
+                [groupOrderClass]: true,
+            } }, h("b2b-input", { key: 'a7685cd9f8f563fff8f2d96cc7f93b7cfc1e0d49', 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", { 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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input label."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an asterisk at the end of the label to signify that the field is required."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "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": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The default value of the 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"
+            },
+            "groupDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Whether the parent input group is disabled. Per default, it is false."
+                        }],
+                    "text": ""
+                },
+                "attribute": "group-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasOptionList": {},
+            "isElementFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bClear",
+                "name": "b2b-clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the user clicks the clear button."
+                },
+                "complexType": {
+                    "original": "InputClear",
+                    "resolved": "InputClear<any>",
+                    "references": {
+                        "InputClear": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::InputClear"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "optionsList",
+                "methodName": "watchPropHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }