@siemens/ix 1.6.2 → 2.0.0-beta.0

package/dist/collection/components/icon-button/icon-button.css

@@ -71,6 +71,7 @@
 .btn-primary, .btn-primary.focus, .btn-primary:focus-visible {
   background-color: var(--theme-btn-primary--background);
   color: var(--theme-btn-primary--color);
+  --ix-button-color: var(--theme-btn-primary--color);
   border-width: var(--theme-btn--border-thickness);
   border-color: var(--theme-btn-primary--border-color);
   border-style: solid;
@@ -107,6 +108,7 @@
   background-color: var(--theme-btn-primary--background--disabled);
   color: var(--theme-btn-primary--color--disabled);
   opacity: 1;
+  --ix-button-color: var(--theme-btn-primary--color--disabled);
 }
 
 .btn-outline-primary {
@@ -115,6 +117,7 @@
 .btn-outline-primary, .btn-outline-primary.focus, .btn-outline-primary:focus-visible {
   background-color: var(--theme-btn-outline-primary--background);
   color: var(--theme-btn-outline-primary--color);
+  --ix-button-color: var(--theme-btn-outline-primary--color);
   border-width: var(--theme-btn--border-thickness);
   border-color: var(--theme-btn-outline-primary--border-color);
   border-style: solid;
@@ -151,6 +154,7 @@
   background-color: var(--theme-btn-outline-primary--background--disabled);
   color: var(--theme-btn-outline-primary--color--disabled);
   opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-primary--color--disabled);
 }
 
 .btn-invisible-primary {
@@ -161,6 +165,7 @@
 .btn-invisible-primary, .btn-invisible-primary.focus, .btn-invisible-primary:focus-visible {
   background-color: var(--theme-btn-invisible-primary--background);
   color: var(--theme-btn-invisible-primary--color);
+  --ix-button-color: var(--theme-btn-invisible-primary--color);
   border-color: transparent;
 }
 .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible {
@@ -192,6 +197,7 @@
   background-color: var(--theme-btn-invisible-primary--background--disabled);
   color: var(--theme-btn-invisible-primary--color--disabled);
   opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-primary--color--disabled);
 }
 
 .btn-secondary {
@@ -200,6 +206,7 @@
 .btn-secondary, .btn-secondary.focus, .btn-secondary:focus-visible {
   background-color: var(--theme-btn-secondary--background);
   color: var(--theme-btn-secondary--color);
+  --ix-button-color: var(--theme-btn-secondary--color);
   border-width: var(--theme-btn--border-thickness);
   border-color: var(--theme-btn-secondary--border-color);
   border-style: solid;
@@ -236,6 +243,7 @@
   background-color: var(--theme-btn-secondary--background--disabled);
   color: var(--theme-btn-secondary--color--disabled);
   opacity: 1;
+  --ix-button-color: var(--theme-btn-secondary--color--disabled);
 }
 
 .btn-outline-secondary {
@@ -244,6 +252,7 @@
 .btn-outline-secondary, .btn-outline-secondary.focus, .btn-outline-secondary:focus-visible {
   background-color: var(--theme-btn-outline-secondary--background);
   color: var(--theme-btn-outline-secondary--color);
+  --ix-button-color: var(--theme-btn-outline-secondary--color);
   border-width: var(--theme-btn--border-thickness);
   border-color: var(--theme-btn-outline-secondary--border-color);
   border-style: solid;
@@ -280,6 +289,7 @@
   background-color: var(--theme-btn-outline-secondary--background--disabled);
   color: var(--theme-btn-outline-secondary--color--disabled);
   opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-secondary--color--disabled);
 }
 
 .btn-invisible-secondary {
@@ -290,6 +300,7 @@
 .btn-invisible-secondary, .btn-invisible-secondary.focus, .btn-invisible-secondary:focus-visible {
   background-color: var(--theme-btn-invisible-secondary--background);
   color: var(--theme-btn-invisible-secondary--color);
+  --ix-button-color: var(--theme-btn-invisible-secondary--color);
   border-color: transparent;
 }
 .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible {
@@ -321,6 +332,7 @@
   background-color: var(--theme-btn-invisible-secondary--background--disabled);
   color: var(--theme-btn-invisible-secondary--color--disabled);
   opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-secondary--color--disabled);
 }
 
 .btn-oval,
@@ -365,13 +377,32 @@
   display: inline-block;
   vertical-align: middle;
 }
-:host.disabled {
-  pointer-events: none;
-}
 :host .icon-button {
   padding: 0;
   overflow: hidden;
 }
 :host button:not(:disabled) {
   cursor: pointer;
+}
+:host ix-icon {
+  color: var(--ix-icon-button-color);
+}
+
+:host(.btn-icon-12) ix-spinner {
+  height: 12px;
+  width: 12px;
+}
+
+:host(.btn-icon-16) ix-spinner {
+  height: 16px;
+  width: 16px;
+}
+
+:host(.btn-icon-32) ix-spinner {
+  height: 24px;
+  width: 24px;
+}
+
+:host(.disabled) {
+  pointer-events: none;
 }

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

@@ -10,7 +10,7 @@ import { h, Host } from '@stencil/core';
 import { getButtonClasses } from '../button/base-button';
 export class IconButton {
   constructor() {
-    this.variant = 'Secondary';
+    this.variant = 'secondary';
     this.outline = undefined;
     this.invisible = undefined;
     this.ghost = undefined;
@@ -21,6 +21,22 @@ export class IconButton {
     this.selected = false;
     this.disabled = false;
     this.type = 'button';
+    this.loading = false;
+  }
+  componentDidLoad() {
+    if (this.type === 'submit') {
+      const submitButton = document.createElement('button');
+      submitButton.style.display = 'none';
+      submitButton.type = 'submit';
+      submitButton.tabIndex = -1;
+      this.hostElement.appendChild(submitButton);
+      this.submitButtonElement = submitButton;
+    }
+  }
+  dispatchFormEvents() {
+    if (this.type === 'submit' && this.submitButtonElement) {
+      this.submitButtonElement.click();
+    }
   }
   getIconSizeClass() {
     return {
@@ -30,10 +46,14 @@ export class IconButton {
     };
   }
   getIconButtonClasses() {
-    return Object.assign(Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled)), { 'icon-button': true }), this.getIconSizeClass());
+    return Object.assign(Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled || this.loading)), { 'icon-button': true }), this.getIconSizeClass());
   }
   render() {
-    return (h(Host, { class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled }) }, h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null)))));
+    return (h(Host, { class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled }) }, h("button", { class: this.getIconButtonClasses(), type: this.type, onClick: () => this.dispatchFormEvents() }, this.loading ? (h("ix-spinner", { size: this.size === '12'
+        ? 'xx-small'
+        : this.size === '16'
+          ? 'x-small'
+          : 'small', hideTrack: true })) : null, this.icon && !this.loading ? (h("ix-icon", { size: this.size, name: this.icon, color: this.color })) : null)));
   }
   static get is() { return "ix-icon-button"; }
   static get encapsulation() { return "shadow"; }
@@ -54,7 +74,7 @@ export class IconButton {
         "mutable": false,
         "complexType": {
           "original": "IconButtonVariant",
-          "resolved": "\"Primary\" | \"Secondary\"",
+          "resolved": "\"primary\" | \"secondary\"",
           "references": {
             "IconButtonVariant": {
               "location": "local",
@@ -70,7 +90,7 @@ export class IconButton {
         },
         "attribute": "variant",
         "reflect": false,
-        "defaultValue": "'Secondary'"
+        "defaultValue": "'secondary'"
       },
       "outline": {
         "type": "boolean",
@@ -155,7 +175,7 @@ export class IconButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Button icon"
+          "text": "Icon name"
         },
         "attribute": "icon",
         "reflect": false
@@ -171,7 +191,10 @@ export class IconButton {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Only size 32 will be removed in 3.0.0"
+            }],
           "text": "Size of icon in button"
         },
         "attribute": "size",
@@ -248,8 +271,30 @@ export class IconButton {
         "attribute": "type",
         "reflect": false,
         "defaultValue": "'button'"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Loading button"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=icon-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAUzD,MAAM,OAAO,UAAU;;mBAIgB,WAAW;;;;;;gBAgCN,IAAI;;oBAU3B,KAAK;oBAKL,KAAK;gBAKY,QAAQ;;EAEpC,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;KACtE,CAAC;EACJ,CAAC;EAEO,oBAAoB;IAC1B,qDACK,gBAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,KACD,aAAa,EAAE,IAAI,KAChB,IAAI,CAAC,gBAAgB,EAAE,EAC1B;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,kCAAO,IAAI,CAAC,gBAAgB,EAAE,KAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;MAChE,cAAQ,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;QACzD,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;QAChE,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;UAC7B,eAAa,CACT,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { Button, ButtonVariant } from '../button/button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton implements Button {\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'Secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   *\n   * @deprecated Use ghost property\n   */\n  @Prop() invisible: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Selected state only working with outline or invisible\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\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 === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  private getIconButtonClasses() {\n    return {\n      ...getButtonClasses(\n        this.variant,\n        this.outline,\n        this.ghost || this.invisible,\n        true,\n        this.oval,\n        this.selected,\n        this.disabled\n      ),\n      'icon-button': true,\n      ...this.getIconSizeClass(),\n    };\n  }\n\n  render() {\n    return (\n      <Host class={{ ...this.getIconSizeClass(), disabled: this.disabled }}>\n        <button class={this.getIconButtonClasses()} type={this.type}>\n          <ix-icon size={this.size} name={this.icon} color={this.color} />\n          <div style={{ display: 'none' }}>\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { Button, ButtonVariant } from '../button/button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton implements Button {\n  @Element() hostElement: HTMLIxIconButtonElement;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   *\n   * @deprecated Use ghost property\n   */\n  @Prop() invisible: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   *\n   * @deprecated Only size 32 will be removed in 3.0.0\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Selected state only working with outline or invisible\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\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 === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  private getIconButtonClasses() {\n    return {\n      ...getButtonClasses(\n        this.variant,\n        this.outline,\n        this.ghost || this.invisible,\n        true,\n        this.oval,\n        this.selected,\n        this.disabled || this.loading\n      ),\n      'icon-button': true,\n      ...this.getIconSizeClass(),\n    };\n  }\n\n  render() {\n    return (\n      <Host class={{ ...this.getIconSizeClass(), disabled: this.disabled }}>\n        <button\n          class={this.getIconButtonClasses()}\n          type={this.type}\n          onClick={() => this.dispatchFormEvents()}\n        >\n          {this.loading ? (\n            <ix-spinner\n              size={\n                this.size === '12'\n                  ? 'xx-small'\n                  : this.size === '16'\n                  ? 'x-small'\n                  : 'small'\n              }\n              hideTrack\n            ></ix-spinner>\n          ) : null}\n          {this.icon && !this.loading ? (\n            <ix-icon\n              size={this.size}\n              name={this.icon}\n              color={this.color}\n            ></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon-button/test/icon-button.ct.js

@@ -0,0 +1,26 @@
+/*
+ * 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 { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`<ix-icon-button icon="rocket">Content</ix-icon-button>`);
+  const button = page.locator('ix-icon-button');
+  await expect(button).toHaveClass(/hydrated/);
+  expect(button.allInnerTexts).not.toEqual('Content');
+  await expect(button.locator('ix-icon')).toBeVisible();
+  await expect(button.locator('ix-icon')).toHaveAttribute('name', 'rocket');
+});
+test('show spinner while loading', async ({ mount, page }) => {
+  await mount(`<ix-icon-button icon="rocket"></ix-icon-button>`);
+  const button = page.locator('ix-icon-button');
+  await expect(button.locator('ix-spinner')).not.toBeVisible();
+  await button.evaluate((btn) => (btn.loading = true));
+  await expect(button.locator('ix-spinner')).toBeVisible();
+});
+//# sourceMappingURL=icon-button.ct.js.map

package/dist/collection/components/icon-button/test/icon-button.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.ct.js","sourceRoot":"","sources":["../../../../src/components/icon-button/test/icon-button.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC,wDAAwD,CAAC,CAAC;EACtE,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAC9C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;EAEpD,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;EACtD,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAC5E,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC3D,MAAM,KAAK,CAAC,iDAAiD,CAAC,CAAC;EAC/D,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAE9C,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EAC7D,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAwB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;EAC1E,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-icon-button icon=\"rocket\">Content</ix-icon-button>`);\n  const button = page.locator('ix-icon-button');\n  await expect(button).toHaveClass(/hydrated/);\n  expect(button.allInnerTexts).not.toEqual('Content');\n\n  await expect(button.locator('ix-icon')).toBeVisible();\n  await expect(button.locator('ix-icon')).toHaveAttribute('name', 'rocket');\n});\n\ntest('show spinner while loading', async ({ mount, page }) => {\n  await mount(`<ix-icon-button icon=\"rocket\"></ix-icon-button>`);\n  const button = page.locator('ix-icon-button');\n\n  await expect(button.locator('ix-spinner')).not.toBeVisible();\n  await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n  await expect(button.locator('ix-spinner')).toBeVisible();\n});\n"]}

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

@@ -12,14 +12,14 @@ import { h, Host } from '@stencil/core';
  */
 export class IxIndexButton {
   constructor() {
-    this.variant = 'Primary';
+    this.variant = 'primary';
     this.selected = undefined;
   }
   render() {
     return (h(Host, null, h("button", { class: {
         btn: true,
-        'btn-invisible-primary': this.variant === 'Primary',
-        'btn-invisible-secondary': this.variant === 'Secondary',
+        'btn-invisible-primary': this.variant === 'primary',
+        'btn-invisible-secondary': this.variant === 'secondary',
         selected: this.selected,
       } }, h("slot", null))));
   }
@@ -42,7 +42,7 @@ export class IxIndexButton {
         "mutable": false,
         "complexType": {
           "original": "IndexButtonVariant",
-          "resolved": "\"Primary\" | \"Secondary\"",
+          "resolved": "\"primary\" | \"secondary\"",
           "references": {
             "IndexButtonVariant": {
               "location": "local",
@@ -58,7 +58,7 @@ export class IxIndexButton {
         },
         "attribute": "variant",
         "reflect": false,
-        "defaultValue": "'Primary'"
+        "defaultValue": "'primary'"
       },
       "selected": {
         "type": "boolean",

package/dist/collection/components/index-button/index-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-button.js","sourceRoot":"","sources":["../../../src/components/index-button/index-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;GAEG;AAMH,MAAM,OAAO,aAAa;;mBAIc,SAAS;;;EAO/C,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,cACE,KAAK,EAAE;UACL,GAAG,EAAE,IAAI;UACT,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;UACvD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,eAAa,CACN,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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, h, Host, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type IndexButtonVariant = ButtonVariant;\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-index-button',\n  styleUrl: 'index-button.scss',\n  scoped: true,\n})\nexport class IxIndexButton {\n  /**\n   * Button variant\n   */\n  @Prop() variant: IndexButtonVariant = 'Primary';\n\n  /**\n   * Selection state\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': this.variant === 'Primary',\n            'btn-invisible-secondary': this.variant === 'Secondary',\n            selected: this.selected,\n          }}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index-button.js","sourceRoot":"","sources":["../../../src/components/index-button/index-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;GAEG;AAMH,MAAM,OAAO,aAAa;;mBAIc,SAAS;;;EAO/C,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,cACE,KAAK,EAAE;UACL,GAAG,EAAE,IAAI;UACT,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;UACvD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,eAAa,CACN,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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, h, Host, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type IndexButtonVariant = ButtonVariant;\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-index-button',\n  styleUrl: 'index-button.scss',\n  scoped: true,\n})\nexport class IxIndexButton {\n  /**\n   * Button variant\n   */\n  @Prop() variant: IndexButtonVariant = 'primary';\n\n  /**\n   * Selection state\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': this.variant === 'primary',\n            'btn-invisible-secondary': this.variant === 'secondary',\n            selected: this.selected,\n          }}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -21,9 +21,11 @@
 }
 :host .group-start {
   left: 0px;
+  height: 2rem;
 }
 :host .group-end {
   right: 0px;
+  height: 2rem;
 }
 :host ::slotted(*) {
   display: flex;