@siemens/ix 2.6.1 → 2.7.0

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":"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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 { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\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 {\n  @Element() hostElement: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel: string;\n\n  /**\n   * Variant of button\n   * @since 2.3.0 - variant danger\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: 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   * @deprecated since 2.1.0 use `icon-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor: string;\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  render() {\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label': this.a11yLabel\n          ? this.a11yLabel\n          : getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor ?? this.color,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n    };\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"]}
+{"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 { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\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 {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   * @since 2.3.0 - variant danger\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean = false;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\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   * @deprecated since 2.1.0 use `icon-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color?: string;\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\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  render() {\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label': this.a11yLabel\n          ? this.a11yLabel\n          : getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor ?? this.color,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n    };\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/icon-button/test/icon-button.spec.js

@@ -8,6 +8,11 @@
  */
 import { newSpecPage } from "@stencil/core/testing";
 import { IconButton } from "../icon-button";
+function queryButton(page) {
+    return page.doc
+        .querySelector('ix-icon-button')
+        .shadowRoot.querySelector('button');
+}
 describe('icon-button', () => {
     it('renders', async () => {
         const page = await newSpecPage({
@@ -29,9 +34,7 @@ describe('icon-button', () => {
       `,
         });
         await page.waitForChanges();
-        const btn = page.doc
-            .querySelector('ix-icon-button[type="submit"]')
-            .shadowRoot.querySelector('button');
+        const btn = queryButton(page);
         const shadowButton = page.doc.querySelector('ix-icon-button[type="submit"] > button');
         const onClick = jest.fn();
         shadowButton.addEventListener('click', onClick);
@@ -54,9 +57,7 @@ describe('icon-button', () => {
       `,
         });
         await page.waitForChanges();
-        const btn = page.doc
-            .querySelector('ix-icon-button')
-            .shadowRoot.querySelector('button');
+        const btn = queryButton(page);
         const shadowButton = page.doc.querySelector('ix-icon-button > button');
         expect(btn).toBeDefined();
         expect(shadowButton).toBeNull();
@@ -68,9 +69,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button icon="rocket"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('Rocket');
         });
@@ -80,9 +79,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button icon="about-filled"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('About');
         });
@@ -92,9 +89,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button icon="about-battery-filled"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('About Battery');
         });
@@ -104,9 +99,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button icon="battery100-percentage"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('Battery Percentage');
         });
@@ -116,9 +109,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button icon="battery-100-percentage"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('Battery 100 Percentage');
         });
@@ -128,9 +119,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button icon="text-circle-rectangle-filled"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('Text Circle Rectangle');
         });
@@ -140,9 +129,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button a11y-label="some label"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('some label');
         });
@@ -152,9 +139,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button icon="https://someurl.com/test.svg"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('Unknown');
         });
@@ -164,9 +149,7 @@ describe('icon-button', () => {
                 html: `<ix-icon-button icon="data:image/svg+xml"></ix-icon-button>`,
             });
             await page.waitForChanges();
-            const button = page.doc
-                .querySelector('ix-icon-button')
-                .shadowRoot.querySelector('button');
+            const button = queryButton(page);
             expect(button).toHaveAttribute('aria-label');
             expect(button.getAttribute('aria-label')).toBe('Unknown');
         });

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.spec.js","sourceRoot":"","sources":["../../../../src/components/icon-button/test/icon-button.spec.ts"],"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 */\nimport { newSpecPage } from '@stencil/core/testing';\nimport { IconButton } from '../icon-button';\n\ndescribe('icon-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `<ix-icon-button icon=\"rocket\" disabled></ix-icon-button>`,\n    });\n\n    await page.waitForChanges();\n    const btn = page.doc.querySelector('ix-icon-button');\n    expect(btn.className).toContain('disabled');\n  });\n\n  it('should submit form if type is submit', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `\n      <form>\n        <input type=\"text\" />\n        <ix-icon-button type=\"submit\">Submit</ix-icon-button>s\n      </form>\n      `,\n    });\n\n    await page.waitForChanges();\n\n    const btn = page.doc\n      .querySelector('ix-icon-button[type=\"submit\"]')\n      .shadowRoot.querySelector('button');\n    const shadowButton = page.doc.querySelector(\n      'ix-icon-button[type=\"submit\"] > button'\n    ) as HTMLButtonElement;\n\n    const onClick = jest.fn();\n\n    shadowButton.addEventListener('click', onClick);\n\n    expect(btn).toBeDefined();\n    expect(shadowButton).toBeDefined();\n    expect(shadowButton.style.display).toStrictEqual('none');\n    expect(shadowButton.type).toStrictEqual('submit');\n    expect(shadowButton.tabIndex).toStrictEqual(-1);\n\n    btn.click();\n    expect(onClick).toHaveBeenCalled();\n  });\n\n  it('should not render submit button if normal button is requirers', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `\n      <form>\n        <input type=\"text\" />\n        <ix-icon-button>Submit</ix-icon-button>s\n      </form>\n      `,\n    });\n\n    await page.waitForChanges();\n\n    const btn = page.doc\n      .querySelector('ix-icon-button')\n      .shadowRoot.querySelector('button');\n    const shadowButton = page.doc.querySelector(\n      'ix-icon-button > button'\n    ) as HTMLButtonElement;\n\n    expect(btn).toBeDefined();\n    expect(shadowButton).toBeNull();\n  });\n\n  describe('a11y', () => {\n    it('should have a fallback icon aria name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"rocket\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Rocket');\n    });\n\n    it('should have a fallback icon aria name without fill postfix', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"about-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('About');\n    });\n\n    it('should have a fallback icon aria name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"about-battery-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('About Battery');\n    });\n\n    it('should have a fallback icon aria name without numbers inside name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"battery100-percentage\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Battery Percentage');\n    });\n\n    it('should have a fallback icon aria name without numbers between', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"battery-100-percentage\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Battery 100 Percentage');\n    });\n\n    it('should have a fallback icon with multiple dashes', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"text-circle-rectangle-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Text Circle Rectangle');\n    });\n\n    it('should have an aria label', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button a11y-label=\"some label\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('some label');\n    });\n\n    it('should have an unknown aria label with an URL', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"https://someurl.com/test.svg\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Unknown');\n    });\n\n    it('should have an unknown aria label with an base64 encoded SVG', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"data:image/svg+xml\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Unknown');\n    });\n  });\n});\n"]}
+{"version":3,"file":"icon-button.spec.js","sourceRoot":"","sources":["../../../../src/components/icon-button/test/icon-button.spec.ts"],"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 */\nimport { newSpecPage } from '@stencil/core/testing';\nimport { IconButton } from '../icon-button';\n\nfunction queryButton(page: any) {\n  return page.doc\n    .querySelector('ix-icon-button')\n    .shadowRoot.querySelector('button');\n}\n\ndescribe('icon-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `<ix-icon-button icon=\"rocket\" disabled></ix-icon-button>`,\n    });\n\n    await page.waitForChanges();\n    const btn = page.doc.querySelector('ix-icon-button')!;\n    expect(btn.className).toContain('disabled');\n  });\n\n  it('should submit form if type is submit', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `\n      <form>\n        <input type=\"text\" />\n        <ix-icon-button type=\"submit\">Submit</ix-icon-button>s\n      </form>\n      `,\n    });\n\n    await page.waitForChanges();\n\n    const btn = queryButton(page);\n    const shadowButton = page.doc.querySelector(\n      'ix-icon-button[type=\"submit\"] > button'\n    ) as HTMLButtonElement;\n\n    const onClick = jest.fn();\n\n    shadowButton.addEventListener('click', onClick);\n\n    expect(btn).toBeDefined();\n    expect(shadowButton).toBeDefined();\n    expect(shadowButton.style.display).toStrictEqual('none');\n    expect(shadowButton.type).toStrictEqual('submit');\n    expect(shadowButton.tabIndex).toStrictEqual(-1);\n\n    btn.click();\n    expect(onClick).toHaveBeenCalled();\n  });\n\n  it('should not render submit button if normal button is requirers', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `\n      <form>\n        <input type=\"text\" />\n        <ix-icon-button>Submit</ix-icon-button>s\n      </form>\n      `,\n    });\n\n    await page.waitForChanges();\n\n    const btn = queryButton(page);\n    const shadowButton = page.doc.querySelector(\n      'ix-icon-button > button'\n    ) as HTMLButtonElement;\n\n    expect(btn).toBeDefined();\n    expect(shadowButton).toBeNull();\n  });\n\n  describe('a11y', () => {\n    it('should have a fallback icon aria name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"rocket\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Rocket');\n    });\n\n    it('should have a fallback icon aria name without fill postfix', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"about-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('About');\n    });\n\n    it('should have a fallback icon aria name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"about-battery-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('About Battery');\n    });\n\n    it('should have a fallback icon aria name without numbers inside name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"battery100-percentage\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Battery Percentage');\n    });\n\n    it('should have a fallback icon aria name without numbers between', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"battery-100-percentage\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Battery 100 Percentage');\n    });\n\n    it('should have a fallback icon with multiple dashes', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"text-circle-rectangle-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Text Circle Rectangle');\n    });\n\n    it('should have an aria label', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button a11y-label=\"some label\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('some label');\n    });\n\n    it('should have an unknown aria label with an URL', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"https://someurl.com/test.svg\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Unknown');\n    });\n\n    it('should have an unknown aria label with an base64 encoded SVG', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"data:image/svg+xml\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = queryButton(page);\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Unknown');\n    });\n  });\n});\n"]}

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

@@ -72,7 +72,7 @@ export class IconToggleButton {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (h(Host, { key: '99ab49dda5fcdc55bbbaff72b2af203317cb56c0', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '7ba2608c0e1ac7d8e9e02966037f7b7a4facc66d' }, baseButtonProps))));
+        return (h(Host, { key: '588ebac02e4d670f5dd68986da1b6f2916e3fe18', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '701cb0fa92d957479f6f65846856149e3b0a6e60' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -153,11 +153,11 @@ export class IconToggleButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Icon name"

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

@@ -1 +1 @@
-{"version":3,"file":"icon-toggle-button.js","sourceRoot":"","sources":["../../../src/components/icon-toggle-button/icon-toggle-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;IACJ,CAAC;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAGzC,EAAC,cAAc,qEAAK,eAAe,EAAmB,CACjD,CACR,CAAC;IACJ,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 {\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\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"]}
+{"version":3,"file":"icon-toggle-button.js","sourceRoot":"","sources":["../../../src/components/icon-toggle-button/icon-toggle-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;IACJ,CAAC;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAGzC,EAAC,cAAc,qEAAK,eAAe,EAAmB,CACjD,CACR,CAAC;IACJ,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 {\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\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/input.css

@@ -203,9 +203,6 @@ input[type=number]::-webkit-inner-spin-button {
   display: none;
 }
 
-textarea {
-  padding: 0.375rem 1.25rem 0.375rem 0.5rem;
-}
 textarea {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
@@ -348,6 +345,9 @@ textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
 textarea:disabled::placeholder, textarea.disabled::placeholder {
   color: transparent;
 }
+textarea {
+  padding: calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness));
+}
 
 textarea ~ .valid-feedback,
 textarea ~ .invalid-feedback,
@@ -675,9 +675,6 @@ input[type=number]::-webkit-inner-spin-button {
   display: none;
 }
 
-textarea {
-  padding: 0.375rem 1.25rem 0.375rem 0.5rem;
-}
 textarea {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
@@ -820,6 +817,9 @@ textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
 textarea:disabled::placeholder, textarea.disabled::placeholder {
   color: transparent;
 }
+textarea {
+  padding: calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness));
+}
 
 textarea ~ .valid-feedback,
 textarea ~ .invalid-feedback,

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

@@ -21,7 +21,7 @@ import { Host, h, } from "@stencil/core";
 import { HookValidationLifecycle, } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
 import { InputElement, SlotEnd, SlotStart } from "./input.fc";
-import { adjustPaddingForStartAndEnd, checkAllowedKeys, getAriaAttributesForInput, mapValidationResult, onInputBlur, } from "./input.util";
+import { addDisposableChangesAndVisibilityObservers, adjustPaddingForStartAndEnd, checkAllowedKeys, getAriaAttributesForInput, mapValidationResult, onInputBlur, } from "./input.util";
 let inputIds = 0;
 /**
  * @since 2.6.0
@@ -70,12 +70,17 @@ export class Input {
         this.updateFormInternalValue(this.value);
         this.inputType = this.type;
     }
-    componentDidRender() {
-        this.updatePaddings();
+    connectedCallback() {
+        this.disposableChangesAndVisibilityObservers =
+            addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
     }
     updatePaddings() {
         adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disposableChangesAndVisibilityObservers) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     updateFormInternalValue(value) {
         this.formInternals.setFormValue(value);
         this.value = value;
@@ -103,10 +108,10 @@ export class Input {
     render() {
         var _a;
         const inputAria = getAriaAttributesForInput(this);
-        return (h(Host, { key: 'f625dc7d2ed058f53940ccda73db408a3d7017a5', class: {
+        return (h(Host, { key: 'a6d40be91cda9c61dacb10c47cb3c1de128b595c', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: 'c018215d637253e021247473c35701ff94d3f028', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'cc9ee3d23a14d0e10351f294fae72aeec82fbf64', class: "input-wrapper" }, h(SlotStart, { key: 'f32e50c55492dc1423b91f05209c1e9914b50f28', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'ca17d2fee580dbe2e8d176018d0e55565bef5f33', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.inputRef.current), ariaAttributes: inputAria }), h(SlotEnd, { key: '5664747770d85defa36d460b4aa3e497a802bca2', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: 'f680b65ba0355746be49646d25a2074cc4a9caac', color: "color-weak-text", class: {
+            } }, h("ix-field-wrapper", { key: 'e920830918a1b52ae71373c6b09460282840d996', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '683a76fa9cf8bdb266d202b3d2977415f7940374', class: "input-wrapper" }, h(SlotStart, { key: '93835b09dd2c87cf4c027afdf8b2e5ac54446ce6', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '9d75e41be3064ed775dc6adea268681d33d4114b', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.inputRef.current), ariaAttributes: inputAria }), h(SlotEnd, { key: 'edc365019e67448855bd73f2fd6324e6b0784e80', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: '22075d37959ab4d9a45e8792c62b0595e02d23d9', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password',
             }, ghost: true, icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
@@ -115,7 +120,7 @@ export class Input {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'baa09803b87cd3efce3cce29cb735b5d0a290832', class: "bottom-text", slot: "bottom-right", color: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
+            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '4b2dab4589a0191a9097db3075e1e10dfcab3476', class: "bottom-text", slot: "bottom-right", color: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
             _a.length, "/", this.maxLength)))));
     }
     static get is() { return "ix-input"; }
@@ -156,7 +161,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -173,7 +178,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -262,7 +267,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -279,7 +284,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -296,7 +301,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -313,7 +318,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -330,7 +335,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -347,7 +352,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -364,7 +369,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -381,7 +386,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -398,7 +403,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -415,7 +420,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -432,7 +437,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -525,7 +530,7 @@ export class Input {
                             "id": "global::HTMLFormElement"
                         }
                     },
-                    "return": "Promise<HTMLFormElement>"
+                    "return": "Promise<HTMLFormElement | null>"
                 },
                 "docs": {
                     "text": "",

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  @State() inputType = 'text';\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n\n  private readonly inputId = `input-${inputIds++}`;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  componentDidRender() {\n    this.updatePaddings();\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  render() {\n    const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.inputId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <div class=\"input-wrapper\">\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n            <InputElement\n              id={this.inputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => onInputBlur(this, this.inputRef.current)}\n              ariaAttributes={inputAria}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <ix-icon-button\n                color=\"color-weak-text\"\n                class={{\n                  'password-eye': true,\n                  'eye-hidden': this.type !== 'password',\n                }}\n                ghost\n                icon={\n                  this.inputType === 'password' ? iconEye : iconEyeCancelled\n                }\n                onClick={() => {\n                  if (this.inputType === 'password') {\n                    this.inputType = 'text';\n                    return;\n                  }\n\n                  this.inputType = 'password';\n                }}\n              ></ix-icon-button>\n            </SlotEnd>\n          </div>\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography class=\"bottom-text\" slot=\"bottom-right\" color=\"soft\">\n              {this.value?.length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  DisposableChangesAndVisibilityObservers,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  @State() inputType = 'text';\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n\n  private readonly inputId = `input-${inputIds++}`;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  connectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  render() {\n    const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.inputId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <div class=\"input-wrapper\">\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n            <InputElement\n              id={this.inputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => onInputBlur(this, this.inputRef.current)}\n              ariaAttributes={inputAria}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <ix-icon-button\n                color=\"color-weak-text\"\n                class={{\n                  'password-eye': true,\n                  'eye-hidden': this.type !== 'password',\n                }}\n                ghost\n                icon={\n                  this.inputType === 'password' ? iconEye : iconEyeCancelled\n                }\n                onClick={() => {\n                  if (this.inputType === 'password') {\n                    this.inputType = 'text';\n                    return;\n                  }\n\n                  this.inputType = 'password';\n                }}\n              ></ix-icon-button>\n            </SlotEnd>\n          </div>\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography class=\"bottom-text\" slot=\"bottom-right\" color=\"soft\">\n              {this.value?.length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -8,6 +8,7 @@
  */
 import { a11yBoolean } from "../utils/a11y";
 import { shouldSuppressInternalValidation, } from "../utils/input";
+import { createMutationObserver } from "../utils/mutation-observer";
 import { convertToRemString } from "../utils/rwd.util";
 import { generateUUID } from "../utils/uuid";
 import { shakeInput } from "./input.animation";
@@ -45,7 +46,7 @@ export async function checkInternalValidity(comp, input) {
         return;
     }
     const { valid } = validityState;
-    comp.hostElement.classList.toggle('ix-invalid', !valid);
+    comp.hostElement.classList.toggle('ix-invalid--validity-invalid', !valid);
 }
 export function onInputBlur(comp, input) {
     comp.ixBlur.emit();
@@ -100,4 +101,27 @@ export function getAriaAttributesForInput(component) {
     }
     return inputAria;
 }
+export const addDisposableChangesAndVisibilityObservers = (element, callback) => {
+    const intersectionObserver = observeElementUntilVisible(element, callback);
+    const mutationObserver = createMutationObserver(callback);
+    mutationObserver.observe(element, {
+        subtree: true,
+        attributes: true,
+    });
+    return () => {
+        intersectionObserver.disconnect();
+        mutationObserver.disconnect();
+    };
+};
+function observeElementUntilVisible(hostElement, updateCallback) {
+    const intersectionObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                updateCallback();
+            }
+        });
+    });
+    intersectionObserver.observe(hostElement);
+    return intersectionObserver;
+}
 //# sourceMappingURL=input.util.js.map