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

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

@@ -3,427 +3,427 @@ import { h, Host, } from "@stencil/core";
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
  */
 export class InputComponent {
-  constructor() {
-    // TODO: find a way to test it maybe when migrating to new testing framework
-    this.handleFormData = (event) => {
-      if (this.name != undefined) {
-        const value = this.value || '';
-        event.formData.append(this.name, value);
-      }
-    };
-    this.onFocus = (ev) => {
-      this.hasFocus = true;
-      this.b2bFocus.emit(ev);
-    };
-    this.onBlur = (ev) => {
-      this.hasFocus = false;
-      this.b2bBlur.emit(ev);
-    };
-    this.onInput = (ev) => {
-      const input = ev.target;
-      if (input !== (undefined || null)) {
-        this.value = input.value || '';
-      }
-      this.b2bInput.emit(input);
-    };
-    this.getSlottedText = () => {
-      this.hasTextPrefix = this.hasText('start');
-      this.hasTextSuffix = this.hasText('end');
-    };
-    this.hasText = (slotName) => {
-      const slottedChildren = Array.from(this.hostElement.children).filter(x => x.getAttribute('slot') === slotName);
-      if (slottedChildren.length > 0) {
-        // Supports both B2B and legacy icons
-        const textNodes = slottedChildren.filter(child => child.tagName === 'SPAN');
-        return textNodes.length > 0;
-      }
-      return false;
-    };
-    this.label = undefined;
-    this.required = false;
-    this.type = 'text';
-    this.disabled = false;
-    this.invalid = false;
-    this.placeholder = null;
-    this.value = null;
-    this.name = undefined;
-    this.hint = undefined;
-    this.error = undefined;
-    this.autofocus = false;
-    this.groupDisabled = false;
-    this.hasFocus = false;
-    this.hasTextPrefix = false;
-    this.hasTextSuffix = false;
-  }
-  /** Manually set focus to the element */
-  async setFocus() {
-    this.focusableElement.focus();
-  }
-  /** Simulate the native behavior of type="search" to emit an empty string when the input is cleared */
-  async clearInput() {
-    this.value = '';
-    this.b2bInput.emit({ value: '' });
-  }
-  connectedCallback() {
-    const form = this.hostElement.closest('form');
-    if (form != null) {
-      form.addEventListener('formdata', this.handleFormData);
-    }
-    if (this.autofocus) {
-      this.hasFocus = true;
-    }
-    this.getSlottedText();
-  }
-  render() {
-    return (h(Host, { class: {
-        'b2b-input': true,
-        'b2b-input--error': this.invalid && !this.disabled,
-      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { class: {
-        'b2b-input__wrapper': true,
-        'b2b-input__wrapper--focused': this.hasFocus,
-        'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-      } }, h("slot", { name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { class: "b2b-input__native-input", "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { name: "end" })), (this.hint !== undefined && !this.invalid) ||
-      (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
-  }
-  static get is() { return "b2b-input"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["input.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"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| 'text'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'url'",
-          "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The type of the input. All native HTML types except date or month are supported. Default is text."
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'text'"
-      },
-      "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"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A placeholder for the input field. Per default, it is null."
-        },
-        "attribute": "placeholder",
-        "reflect": true,
-        "defaultValue": "null"
-      },
-      "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"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the input. Use it to group label and input together and make it more accessible."
-        },
-        "attribute": "name",
-        "reflect": true
-      },
-      "hint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The hint text that appears underneath the input field."
-        },
-        "attribute": "hint",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The error message that is shown if the input is invalid."
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "autofocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When setting the autofocus to true, the input element will be focused when the page loads."
-        },
-        "attribute": "autofocus",
-        "reflect": false,
-        "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 {
-      "hasFocus": {},
-      "hasTextPrefix": {},
-      "hasTextSuffix": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "b2bFocus",
-        "name": "b2b-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits whenever the input receives focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
+    constructor() {
+        // TODO: find a way to test it maybe when migrating to new testing framework
+        this.handleFormData = (event) => {
+            if (this.name != undefined) {
+                const value = this.value || '';
+                event.formData.append(this.name, value);
             }
-          }
-        }
-      }, {
-        "method": "b2bBlur",
-        "name": "b2b-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits whenever the input loses focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
+        };
+        this.onFocus = (ev) => {
+            this.hasFocus = true;
+            this.b2bFocus.emit(ev);
+        };
+        this.onBlur = (ev) => {
+            this.hasFocus = false;
+            this.b2bBlur.emit(ev);
+        };
+        this.onInput = (ev) => {
+            const input = ev.target;
+            if (input !== (undefined || null)) {
+                this.value = input.value || '';
             }
-          }
-        }
-      }, {
-        "method": "b2bInput",
-        "name": "b2b-input",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits whenever the input value changes."
-        },
-        "complexType": {
-          "original": "InputChangeEvent",
-          "resolved": "InputChangeEvent",
-          "references": {
-            "InputChangeEvent": {
-              "location": "import",
-              "path": "../../utils/interfaces/form.interface",
-              "id": "src/utils/interfaces/form.interface.d.ts::InputChangeEvent"
+            this.b2bInput.emit(input);
+        };
+        this.getSlottedText = () => {
+            this.hasTextPrefix = this.hasText('start');
+            this.hasTextSuffix = this.hasText('end');
+        };
+        this.hasText = (slotName) => {
+            const slottedChildren = Array.from(this.hostElement.children).filter(x => x.getAttribute('slot') === slotName);
+            if (slottedChildren.length > 0) {
+                // Supports both B2B and legacy icons
+                const textNodes = slottedChildren.filter(child => child.tagName === 'SPAN');
+                return textNodes.length > 0;
             }
-          }
+            return false;
+        };
+        this.label = undefined;
+        this.required = false;
+        this.type = 'text';
+        this.disabled = false;
+        this.invalid = false;
+        this.placeholder = null;
+        this.value = null;
+        this.name = undefined;
+        this.hint = undefined;
+        this.error = undefined;
+        this.autofocus = false;
+        this.groupDisabled = false;
+        this.hasFocus = false;
+        this.hasTextPrefix = false;
+        this.hasTextSuffix = false;
+    }
+    /** Manually set focus to the element */
+    async setFocus() {
+        this.focusableElement.focus();
+    }
+    /** Simulate the native behavior of type="search" to emit an empty string when the input is cleared */
+    async clearInput() {
+        this.value = '';
+        this.b2bInput.emit({ value: '' });
+    }
+    connectedCallback() {
+        const form = this.hostElement.closest('form');
+        if (form != null) {
+            form.addEventListener('formdata', this.handleFormData);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Manually set focus to the element",
-          "tags": []
+        if (this.autofocus) {
+            this.hasFocus = true;
         }
-      },
-      "clearInput": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        this.getSlottedText();
+    }
+    render() {
+        return (h(Host, { key: '480dbafe0ec4be8743793449fe15654ad604a1ae', class: {
+                'b2b-input': true,
+                'b2b-input--error': this.invalid && !this.disabled,
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'baa315e0559007cf11353004bbd9465d9eb0d338', class: {
+                'b2b-input__wrapper': true,
+                'b2b-input__wrapper--focused': this.hasFocus,
+                'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
+            } }, h("slot", { key: '8a0c36b3b53ca662c7174d8e16d20cf2d941d428', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'e35244cb97903ae6628417a3a2efcde183a5826d', class: "b2b-input__native-input", "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'e6f26fe75624edc95c01aa26e4f3feb0deac5e52', name: "end" })), (this.hint !== undefined && !this.invalid) ||
+            (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
+    }
+    static get is() { return "b2b-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.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"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'text'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'url'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the input. All native HTML types except date or month are supported. Default is text."
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'text'"
+            },
+            "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"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A placeholder for the input field. Per default, it is null."
+                },
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "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"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the input. Use it to group label and input together and make it more accessible."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The hint text that appears underneath the input field."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message that is shown if the input is invalid."
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When setting the autofocus to true, the input element will be focused when the page loads."
+                },
+                "attribute": "autofocus",
+                "reflect": false,
+                "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"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Simulate the native behavior of type=\"search\" to emit an empty string when the input is cleared",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasTextPrefix": {},
+            "hasTextSuffix": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bFocus",
+                "name": "b2b-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the input receives focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bBlur",
+                "name": "b2b-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bInput",
+                "name": "b2b-input",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the input value changes."
+                },
+                "complexType": {
+                    "original": "InputChangeEvent",
+                    "resolved": "InputChangeEvent",
+                    "references": {
+                        "InputChangeEvent": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::InputChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Manually set focus to the element",
+                    "tags": []
+                }
+            },
+            "clearInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Simulate the native behavior of type=\"search\" to emit an empty string when the input is cleared",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
 }