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

package/dist/collection/components/button/button.js

@@ -1,299 +1,319 @@
 import { h, Host, } from "@stencil/core";
 export class ButtonComponent {
-  constructor() {
-    this.canLoad = () => {
-      return this.disabled === false && this.loading;
-    };
-    this.checkIcon = () => {
-      const children = Array.from(this.hostElement.children);
-      if (children.length === 1) {
-        // even no chars or child nodes will return white space, so we need to trim
-        if (this.hostElement.textContent.trim().length === 0) {
-          if (children[0].tagName.toLowerCase() === 'b2b-icon') {
-            return true;
-          }
-          else if (children[0].tagName.toLowerCase() === 'i') {
-            return true;
-          }
+    constructor() {
+        this.canLoad = () => {
+            return this.disabled === false && this.loading;
+        };
+        this.checkIcon = () => {
+            const children = Array.from(this.hostElement.children);
+            if (children.length === 1) {
+                // even no chars or child nodes will return white space, so we need to trim
+                if (this.hostElement.textContent.trim().length === 0) {
+                    if (children[0].tagName.toLowerCase() === 'b2b-icon') {
+                        return true;
+                    }
+                    else if (children[0].tagName.toLowerCase() === 'i') {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        this.variant = 'secondary';
+        this.type = 'button';
+        this.size = '100';
+        this.width = 'fit-content';
+        this.disabled = false;
+        this.loading = false;
+        this.active = false;
+        this.href = undefined;
+        this.target = 'self';
+        this.download = undefined;
+        this.groupDisabled = false;
+    }
+    /** Manually set focus to button element */
+    async setFocus() {
+        this.focusableElement.focus();
+    }
+    /**
+     * Prevent clicks from being emitted from the host
+     * when the component is `disabled`. (Taken from Telecom)
+     */
+    handleHostClick(event) {
+        if (this.disabled === true || this.loading === true) {
+            event.stopImmediatePropagation();
         }
-      }
-      return false;
-    };
-    this.variant = 'secondary';
-    this.type = 'button';
-    this.size = '100';
-    this.disabled = false;
-    this.loading = false;
-    this.active = false;
-    this.href = undefined;
-    this.target = 'self';
-    this.download = undefined;
-    this.groupDisabled = false;
-  }
-  /** Manually set focus to button element */
-  async setFocus() {
-    this.focusableElement.focus();
-  }
-  /**
-   * Prevent clicks from being emitted from the host
-   * when the component is `disabled`. (Taken from Telecom)
-   */
-  handleHostClick(event) {
-    if (this.disabled === true || this.loading === true) {
-      event.stopImmediatePropagation();
+        // Triggers a submit event on the parent form in the light DOM
+        const form = this.hostElement.closest('form');
+        if (form != null && this.type === 'submit') {
+            const fakeSubmit = document.createElement('button');
+            fakeSubmit.type = 'submit';
+            fakeSubmit.style.display = 'none';
+            form.appendChild(fakeSubmit);
+            fakeSubmit.click();
+            fakeSubmit.remove();
+        }
+    }
+    spinner() {
+        const spinnerColor = this.variant === 'primary' ? 'inverse' : 'secondary';
+        return (h("div", { class: "b2b-button__spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
+    }
+    render() {
+        return (h(Host, { key: 'bbd9427caf95ea923854f61c916d67758ea5352b', class: {
+                [`b2b-button--loading`]: this.canLoad(),
+                [`b2b-button--${this.size}`]: true,
+                [`b2b-button--active`]: this.active,
+                [`b2b-button--icon-only`]: this.checkIcon(),
+                [`b2b-button--${this.width}`]: true,
+            } }, this.href !== undefined ? (h("a", { href: this.href, target: `_${this.target}`, download: this.download, class: {
+                disabled: this.disabled || this.groupDisabled,
+                [`b2b-button--${this.variant}`]: true,
+            }, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null)) : (h("button", { disabled: this.disabled || this.groupDisabled, class: { [`b2b-button--${this.variant}`]: true }, type: this.type, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null))));
     }
-    // Triggers a submit event on the parent form in the light DOM
-    const form = this.hostElement.closest('form');
-    if (form != null && this.type === 'submit') {
-      const fakeSubmit = document.createElement('button');
-      fakeSubmit.type = 'submit';
-      fakeSubmit.style.display = 'none';
-      form.appendChild(fakeSubmit);
-      fakeSubmit.click();
-      fakeSubmit.remove();
+    static get is() { return "b2b-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.scss"]
+        };
     }
-  }
-  spinner() {
-    const spinnerColor = this.variant === 'primary' ? 'inverse' : 'secondary';
-    return (h("div", { class: "b2b-button__spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
-  }
-  render() {
-    return (h(Host, { class: {
-        [`b2b-button--loading`]: this.canLoad(),
-        [`b2b-button--${this.size}`]: true,
-        [`b2b-button--active`]: this.active,
-        [`b2b-button--icon-only`]: this.checkIcon(),
-      } }, this.href !== undefined ? (h("a", { href: this.href, target: `_${this.target}`, download: this.download, class: {
-        disabled: this.disabled || this.groupDisabled,
-        [`b2b-button--${this.variant}`]: true,
-      }, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null)) : (h("button", { disabled: this.disabled || this.groupDisabled, class: { [`b2b-button--${this.variant}`]: true }, type: this.type, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null))));
-  }
-  static get is() { return "b2b-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The button variant. If not specified, the button will be the secondary variant."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'secondary'"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'button' | 'submit' | 'reset'",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The button type. Matches native HTML types. The default type is 'button'."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'button'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'100' | '50'",
-          "resolved": "\"100\" | \"50\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the button, 100 is the default state"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'100'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the button is disabled."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the button is currently loading. Set to true to hide text and display loading spinner instead"
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the button is currently active. Set to true when using the button to signify a permanent active state"
-        },
-        "attribute": "active",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'self' | 'blank'",
-          "resolved": "\"blank\" | \"self\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The target of the button if it should behave like an anchor. Per default it is self."
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "'self'"
-      },
-      "download": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\ndefaults to the URL string, but can be changed by the user."
-        },
-        "attribute": "download",
-        "reflect": 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 methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The button variant. If not specified, the button will be the secondary variant."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The button type. Matches native HTML types. The default type is 'button'."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'100' | '50'",
+                    "resolved": "\"100\" | \"50\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button, 100 is the default state"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'100'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fit-content' | 'fit-container' | 'custom'",
+                    "resolved": "\"custom\" | \"fit-container\" | \"fit-content\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The width of the button. Per default, it will fit the content"
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'fit-content'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is currently loading. Set to true to hide text and display loading spinner instead"
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is currently active. Set to true when using the button to signify a permanent active state"
+                },
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files"
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'self' | 'blank'",
+                    "resolved": "\"blank\" | \"self\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The target of the button if it should behave like an anchor. Per default it is self."
+                },
+                "attribute": "target",
+                "reflect": false,
+                "defaultValue": "'self'"
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\ndefaults to the URL string, but can be changed by the user."
+                },
+                "attribute": "download",
+                "reflect": 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": "Manually set focus to button element",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleHostClick",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
+        };
+    }
+    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 button element",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleHostClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
 }