@siemens/ix 0.0.0-20240419081748

package/dist/collection/components/icon-toggle-button/icon-toggle-button.js

@@ -0,0 +1,275 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host, } from "@stencil/core";
+import { BaseIconButton } from "../icon-button/base-icon-button";
+import { a11yBoolean } from "../utils/a11y";
+/**
+ * @since 2.0.0
+ */
+export class IconToggleButton {
+    constructor() {
+        this.variant = 'secondary';
+        this.outline = false;
+        this.ghost = false;
+        this.icon = undefined;
+        this.pressed = false;
+        this.size = '24';
+        this.disabled = false;
+        this.loading = false;
+    }
+    isIllegalToggleButtonConfig() {
+        return this.variant === 'primary' && (this.outline || this.ghost);
+    }
+    logIllegalConfig() {
+        console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".');
+    }
+    onVariantChange() {
+        if (this.isIllegalToggleButtonConfig()) {
+            this.logIllegalConfig();
+        }
+    }
+    onGhostChange() {
+        this.onVariantChange();
+    }
+    onOutlineChange() {
+        this.onVariantChange();
+    }
+    componentDidLoad() {
+        this.onVariantChange();
+    }
+    dispatchPressedChange() {
+        this.pressedChange.emit(!this.pressed);
+    }
+    getIconSizeClass() {
+        return {
+            'btn-icon-12': this.size === '12',
+            'btn-icon-16': this.size === '16',
+            'btn-icon-32': this.size === '24',
+        };
+    }
+    render() {
+        const baseButtonProps = {
+            variant: this.variant,
+            outline: this.outline,
+            ghost: this.ghost,
+            iconOnly: true,
+            iconOval: false,
+            selected: this.pressed,
+            disabled: this.disabled || this.loading,
+            icon: this.icon,
+            iconSize: this.size,
+            loading: this.loading,
+            onClick: () => this.dispatchPressedChange(),
+            type: 'button',
+            ariaAttributes: {
+                'aria-pressed': a11yBoolean(this.pressed),
+            },
+            extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
+        };
+        console.log(baseButtonProps, this.disabled, this.loading);
+        return (h(Host, { key: 'd36e5f7e9bad1ea53f65d5b2b805f69e4e76e4b0', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '1e19be2923cec5d80bb27cc96ef50caf267bcd70' }, baseButtonProps))));
+    }
+    static get is() { return "ix-icon-toggle-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./icon-toggle-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon-toggle-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "import",
+                            "path": "../button/button",
+                            "id": "src/components/button/button.tsx::ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button variant.\nImportant: Variant 'primary' can only be combined with either outline or ghost."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
+            "outline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Outline button"
+                },
+                "attribute": "outline",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ghost": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button with no background or outline"
+                },
+                "attribute": "ghost",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "pressed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show button as pressed"
+                },
+                "attribute": "pressed",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'24' | '16' | '12'",
+                    "resolved": "\"12\" | \"16\" | \"24\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of icon in button"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'24'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the button"
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading button"
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pressedChange",
+                "name": "pressedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pressed change event"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "onVariantChange"
+            }, {
+                "propName": "ghost",
+                "methodName": "onGhostChange"
+            }, {
+                "propName": "outline",
+                "methodName": "onOutlineChange"
+            }];
+    }
+}
+//# sourceMappingURL=icon-toggle-button.js.map

package/dist/collection/components/icon-toggle-button/icon-toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/icon-toggle-button/icon-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n    console.log(baseButtonProps, this.disabled, this.loading);\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/input-group/input-group.css

@@ -0,0 +1,101 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .group {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  height: 100%;
+}
+:host .group-start {
+  left: 0px;
+  height: 2rem;
+  margin-left: 0.5rem;
+  color: var(--theme-color-soft-text);
+}
+:host .group-end {
+  right: 0px;
+  height: 2rem;
+  margin-right: 0.5rem;
+  color: var(--theme-color-soft-text);
+}
+:host ::slotted(*) {
+  display: flex;
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .group-start ::slotted(*),
+:host(.disabled) .group-end ::slotted(*) {
+  opacity: 0.4 !important;
+}

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

@@ -0,0 +1,150 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host } from "@stencil/core";
+import { getSlottedElements } from "../utils/shadow-dom";
+export class InputGroup {
+    constructor() {
+        this.disabled = false;
+        this.inputPaddingLeft = 0;
+        this.inputPaddingRight = 0;
+    }
+    get inputElement() {
+        return this.hostElement.querySelector('input');
+    }
+    componentWillLoad() {
+        var _a;
+        const { valid } = this.inputElement.validity;
+        this.inputElement.addEventListener('valid', () => {
+            this.onValidInput();
+        });
+        this.inputElement.addEventListener('invalid', () => {
+            this.onInvalidInput();
+        });
+        this.inputElement.addEventListener('input', () => {
+            this.startSlotChanged();
+        });
+        (_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', () => {
+            this.startSlotChanged();
+        });
+        valid ? this.onValidInput() : this.onInvalidInput();
+        this.observer = new MutationObserver(() => {
+            this.slotChanged();
+            this.startSlotChanged();
+            this.endSlotChanged();
+        });
+        this.observer.observe(this.hostElement, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        this.prepareInputElement();
+    }
+    onValidInput() {
+        this.startSlotChanged();
+    }
+    onInvalidInput() {
+        this.startSlotChanged();
+    }
+    prepareInputElement() {
+        if (this.inputElement) {
+            this.inputElement.style.width = '100%';
+            if (this.inputPaddingRight !== 0) {
+                this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
+            }
+            else {
+                this.inputElement.style.paddingRight = '0.5rem';
+            }
+            if (this.inputPaddingLeft !== 0) {
+                this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
+            }
+            else {
+                this.inputElement.style.paddingLeft = '0.5rem';
+            }
+        }
+        else {
+            console.warn('You used the ix-input-group without an input tag, e.g. <input class="form-control" />');
+        }
+    }
+    slotChanged() {
+        var _a;
+        this.disabled = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.disabled;
+    }
+    startSlotChanged() {
+        const slot = this.hostElement.shadowRoot.querySelector('slot[name="input-start"]');
+        setTimeout(() => {
+            var _a, _b;
+            const startPadding = this.getChildrenWidth(slot);
+            if (startPadding !== 0) {
+                this.inputPaddingLeft = 11 + startPadding;
+            }
+            else {
+                this.inputPaddingLeft = 0;
+            }
+            if (!this.inputElement) {
+                return;
+            }
+            const isInputInvalid = !this.inputElement.validity.valid ||
+                this.inputElement.classList.contains('is-invalid');
+            const formWasValidated = ((_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.classList.contains('was-validated')) ||
+                ((_b = this.inputElement.form) === null || _b === void 0 ? void 0 : _b.noValidate) === false;
+            if (formWasValidated && isInputInvalid) {
+                const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
+                this.inputElement.style.backgroundPosition = `left ${left}px center`;
+                this.inputPaddingLeft += 26;
+            }
+        });
+    }
+    endSlotChanged() {
+        const slot = this.hostElement.shadowRoot.querySelector('slot[name="input-end"]');
+        setTimeout(() => {
+            this.inputPaddingRight = 15 + this.getChildrenWidth(slot);
+        });
+    }
+    getChildrenWidth(slotElement) {
+        if (!slotElement) {
+            return 0;
+        }
+        const endElements = getSlottedElements(slotElement);
+        if (endElements.length === 0) {
+            return 0;
+        }
+        let width = 0;
+        endElements.forEach((element) => {
+            width += element.getBoundingClientRect().width;
+        });
+        return width;
+    }
+    render() {
+        return (h(Host, { key: 'd347bbb23bf05a8315f422ad77eb519736cae42a', class: { disabled: this.disabled } }, h("div", { key: '11b71f6e732610672b81fb84c68bce4263dc05ce', class: "group group-start" }, h("slot", { key: '0dcab523c356c1a85779c9d04fff293a99988b2c', name: "input-start" })), h("slot", { key: 'bc6e83ae8ffb35fa6ab3004de1363d6d1016a912' }), h("div", { key: 'dd56e9147b66fef48e6ed4e95a4f666079304650', class: "group group-end" }, h("slot", { key: 'ba31566fea59c9bcb35cca6512dc317b11c769cd', name: "input-end" }))));
+    }
+    static get is() { return "ix-input-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input-group.css"]
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {},
+            "inputPaddingLeft": {},
+            "inputPaddingRight": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=input-group.js.map

package/dist/collection/components/input-group/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-end\"]'\n    );\n\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}