@siemens/ix 2.0.0 → 2.0.2

package/dist/collection/components/category-filter/category-filter.css

@@ -256,6 +256,9 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-primary.disabled, :host(.disabled) .btn-primary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-primary--border-color--disabled);
@@ -315,6 +318,9 @@
   color: var(--theme-btn-outline-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-outline-primary.disabled, :host(.disabled) .btn-outline-primary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-outline-primary--border-color--disabled);
@@ -370,6 +376,9 @@
   color: var(--theme-btn-invisible-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-invisible-primary.disabled, :host(.disabled) .btn-invisible-primary:disabled {
   pointer-events: none;
   background-color: var(--theme-btn-invisible-primary--background--disabled);
@@ -428,6 +437,9 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-secondary.disabled, :host(.disabled) .btn-secondary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-secondary--border-color--disabled);
@@ -487,6 +499,9 @@
   color: var(--theme-btn-outline-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-outline-secondary.disabled, :host(.disabled) .btn-outline-secondary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-outline-secondary--border-color--disabled);
@@ -542,6 +557,9 @@
   color: var(--theme-btn-invisible-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-invisible-secondary.disabled, :host(.disabled) .btn-invisible-secondary:disabled {
   pointer-events: none;
   background-color: var(--theme-btn-invisible-secondary--background--disabled);

package/dist/collection/components/drawer/drawer.css

@@ -119,4 +119,8 @@
   height: 100%;
   width: 100%;
   overflow-y: auto;
+}
+
+:host(.toggle) {
+  visibility: visible;
 }

package/dist/collection/components/dropdown/dropdown.js

@@ -30,7 +30,10 @@ export class Dropdown {
     if (dropdownDisposer.has(this.localUId)) {
       console.warn('Dropdown with duplicated id detected');
     }
-    dropdownDisposer.set(this.localUId, this.close.bind(this));
+    dropdownDisposer.set(this.localUId, {
+      dispose: this.close.bind(this),
+      element: this.hostElement,
+    });
   }
   get dropdownItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
@@ -124,9 +127,11 @@ export class Dropdown {
       }
     }
     if (newShow) {
-      dropdownDisposer.forEach((dispose, id) => {
-        if (id !== this.localUId && !this.isAnchorSubmenu()) {
-          dispose();
+      dropdownDisposer.forEach((entry, id) => {
+        if (id !== this.localUId &&
+          !this.isAnchorSubmenu() &&
+          !entry.element.contains(this.hostElement)) {
+          entry.dispose();
         }
       });
     }

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { AlignedPlacement } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\ntype DisposeDropdown = () => void;\nconst dropdownDisposer = new Map<string, DisposeDropdown>();\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  private localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n\n    if (dropdownDisposer.has(this.localUId)) {\n      console.warn('Dropdown with duplicated id detected');\n    }\n\n    dropdownDisposer.set(this.localUId, this.close.bind(this));\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        this.triggerElement.addEventListener('click', this.openBind);\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n\n    if (newShow) {\n      dropdownDisposer.forEach((dispose, id) => {\n        if (id !== this.localUId && !this.isAnchorSubmenu()) {\n          dispose();\n        }\n      });\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: PointerEvent) {\n    const target = event.target as HTMLElement;\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    const clickInsideDropdown = this.isClickInsideDropdown(event);\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!clickInsideDropdown || this.anchor === target) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (clickInsideDropdown && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  keydown(event: KeyboardEvent) {\n    if (this.show === true && event.code === 'Escape') {\n      this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(this.show);\n\n    if (!defaultPrevented) {\n      this.show = !this.show;\n    }\n  }\n\n  private open(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(true);\n\n    if (!defaultPrevented) {\n      this.show = true;\n    }\n  }\n\n  private close() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n\n    if (!defaultPrevented) {\n      this.show = false;\n    }\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger, null);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n\n    if (\n      this.isAnchorSubmenu() &&\n      this.anchorElement?.tagName === 'IX-DROPDOWN-ITEM'\n    ) {\n      (this.anchorElement as HTMLIxDropdownItemElement).isSubMenu = true;\n    }\n  }\n\n  private isClickInsideDropdown(event: PointerEvent) {\n    const rect = this.dropdownRef.getBoundingClientRect();\n    return (\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (dropdownDisposer.has(this.localUId)) {\n      dropdownDisposer.delete(this.localUId);\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { AlignedPlacement } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\ntype DisposeDropdown = () => void;\ntype DropdownDisposerEntry = {\n  element: HTMLIxDropdownElement;\n  dispose: DisposeDropdown;\n};\nconst dropdownDisposer = new Map<string, DropdownDisposerEntry>();\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  private localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n\n    if (dropdownDisposer.has(this.localUId)) {\n      console.warn('Dropdown with duplicated id detected');\n    }\n\n    dropdownDisposer.set(this.localUId, {\n      dispose: this.close.bind(this),\n      element: this.hostElement,\n    });\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        this.triggerElement.addEventListener('click', this.openBind);\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n\n    if (newShow) {\n      dropdownDisposer.forEach((entry, id) => {\n        if (\n          id !== this.localUId &&\n          !this.isAnchorSubmenu() &&\n          !entry.element.contains(this.hostElement)\n        ) {\n          entry.dispose();\n        }\n      });\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: PointerEvent) {\n    const target = event.target as HTMLElement;\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    const clickInsideDropdown = this.isClickInsideDropdown(event);\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!clickInsideDropdown || this.anchor === target) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (clickInsideDropdown && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  keydown(event: KeyboardEvent) {\n    if (this.show === true && event.code === 'Escape') {\n      this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(this.show);\n\n    if (!defaultPrevented) {\n      this.show = !this.show;\n    }\n  }\n\n  private open(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(true);\n\n    if (!defaultPrevented) {\n      this.show = true;\n    }\n  }\n\n  private close() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n\n    if (!defaultPrevented) {\n      this.show = false;\n    }\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger, null);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n\n    if (\n      this.isAnchorSubmenu() &&\n      this.anchorElement?.tagName === 'IX-DROPDOWN-ITEM'\n    ) {\n      (this.anchorElement as HTMLIxDropdownItemElement).isSubMenu = true;\n    }\n  }\n\n  private isClickInsideDropdown(event: PointerEvent) {\n    const rect = this.dropdownRef.getBoundingClientRect();\n    return (\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (dropdownDisposer.has(this.localUId)) {\n      dropdownDisposer.delete(this.localUId);\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/test/dropdown.ct.js

@@ -76,4 +76,25 @@ function expectToBeVisible(elements, index) {
     await ef.toBeVisible();
   }));
 }
+test.describe('nested dropdown tests', () => {
+  const button1Text = 'Triggerbutton1';
+  const button2Text = 'Triggerbutton2';
+  test.beforeEach(async ({ mount }) => {
+    await mount(`
+      <button id="trigger1">${button1Text}</button>
+      <ix-dropdown trigger="trigger1">
+        <button id="trigger2">${button2Text}</button>
+        <ix-dropdown trigger="trigger2">
+          <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        </ix-dropdown>
+      </ix-dropdown>
+    `);
+  });
+  test('can open nested dropdown', async ({ page }) => {
+    await page.getByText(button1Text).click();
+    await page.getByText(button2Text).click();
+    const nestedDropdownItem = page.locator('ix-dropdown-item');
+    await expect(nestedDropdownItem).toHaveClass(/hydrated/);
+  });
+});
 //# sourceMappingURL=dropdown.ct.js.map

package/dist/collection/components/dropdown/test/dropdown.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.ct.js","sourceRoot":"","sources":["../../../../src/components/dropdown/test/dropdown.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAW,MAAM,kBAAkB,CAAC;AACnD,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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BX,CAAC,CAAC;EAEH,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EACnD,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAEnD,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAC3C,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAE3C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAC/C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAC/C,MAAM,UAAU,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAC7C,MAAM,UAAU,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAE7C,MAAM,GAAG;KACN,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;KACnC,KAAK,EAAE;KACP,KAAK,EAAE,CAAC;EAEX,MAAM,iBAAiB,CACrB,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,EAClD,CAAC,CACF,CAAC;EAEF,MAAM,GAAG;KACN,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;KACnC,KAAK,EAAE;KACP,KAAK,EAAE,CAAC;EAEX,MAAM,iBAAiB,CACrB,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,EAClD,CAAC,CACF,CAAC;EAEF,MAAM,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;EAEzE,MAAM,iBAAiB,CACrB,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,EAClD,CAAC,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,iBAAiB,CAAC,QAAmB,EAAE,KAAa;EAC3D,OAAO,OAAO,CAAC,GAAG,CAChB,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE;IAChC,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACzB,IAAI,CAAC,KAAK,KAAK,EAAE;MACf,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC;KACb;IACD,MAAM,EAAE,CAAC,WAAW,EAAE,CAAC;EACzB,CAAC,CAAC,CACH,CAAC;AACJ,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 */\n\n/*\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, Locator } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n  <ix-split-button label=\"Test 1\">\n    <ix-dropdown-item>Test 1</ix-dropdown-item>\n  </ix-split-button>\n\n  <ix-split-button label=\"Test 2\">\n    <ix-dropdown-item>Test 1</ix-dropdown-item>\n  </ix-split-button>\n\n  <ix-group header=\"Title\" sub-header=\"Subtitle\">\n    <ix-dropdown slot=\"dropdown\">\n      <ix-dropdown-item label=\"Item 1\" icon=\"pin\" />\n      <ix-dropdown-item label=\"Item 2\" icon=\"star\" />\n      <ix-dropdown-item label=\"Item 3\" icon=\"heart\" />\n      <ix-dropdown-item label=\"Item 4\" icon=\"cogwheel\" />\n    </ix-dropdown>\n  </ix-group>\n\n  <ix-group header=\"Title\" sub-header=\"Subtitle\">\n    <ix-dropdown slot=\"dropdown\">\n      <ix-dropdown-item label=\"Item 1\" icon=\"pin\" />\n      <ix-dropdown-item label=\"Item 2\" icon=\"star\" />\n      <ix-dropdown-item label=\"Item 3\" icon=\"heart\" />\n      <ix-dropdown-item label=\"Item 4\" icon=\"cogwheel\" />\n    </ix-dropdown>\n  </ix-group>\n  `);\n\n  const sb1 = page.locator('ix-split-button').nth(0);\n  const sb2 = page.locator('ix-split-button').nth(1);\n\n  const g1 = page.locator('ix-group').nth(0);\n  const g2 = page.locator('ix-group').nth(1);\n\n  const sb1Dropdown = sb1.locator('ix-dropdown');\n  const sb2Dropdown = sb2.locator('ix-dropdown');\n  const g1Dropdown = g1.locator('ix-dropdown');\n  const g2Dropdown = g2.locator('ix-dropdown');\n\n  await sb1\n    .getByRole('button')\n    .filter({ hasText: 'context-menu' })\n    .first()\n    .click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    0\n  );\n\n  await sb2\n    .getByRole('button')\n    .filter({ hasText: 'context-menu' })\n    .first()\n    .click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    1\n  );\n\n  await g2.getByRole('button').filter({ hasText: 'context-menu' }).click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    3\n  );\n});\n\nfunction expectToBeVisible(elements: Locator[], index: number) {\n  return Promise.all(\n    elements.map(async (element, i) => {\n      let ef = expect(element);\n      if (i !== index) {\n        ef = ef.not;\n      }\n      await ef.toBeVisible();\n    })\n  );\n}\n"]}
+{"version":3,"file":"dropdown.ct.js","sourceRoot":"","sources":["../../../../src/components/dropdown/test/dropdown.ct.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 */\n\n/*\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, Locator } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n  <ix-split-button label=\"Test 1\">\n    <ix-dropdown-item>Test 1</ix-dropdown-item>\n  </ix-split-button>\n\n  <ix-split-button label=\"Test 2\">\n    <ix-dropdown-item>Test 1</ix-dropdown-item>\n  </ix-split-button>\n\n  <ix-group header=\"Title\" sub-header=\"Subtitle\">\n    <ix-dropdown slot=\"dropdown\">\n      <ix-dropdown-item label=\"Item 1\" icon=\"pin\" />\n      <ix-dropdown-item label=\"Item 2\" icon=\"star\" />\n      <ix-dropdown-item label=\"Item 3\" icon=\"heart\" />\n      <ix-dropdown-item label=\"Item 4\" icon=\"cogwheel\" />\n    </ix-dropdown>\n  </ix-group>\n\n  <ix-group header=\"Title\" sub-header=\"Subtitle\">\n    <ix-dropdown slot=\"dropdown\">\n      <ix-dropdown-item label=\"Item 1\" icon=\"pin\" />\n      <ix-dropdown-item label=\"Item 2\" icon=\"star\" />\n      <ix-dropdown-item label=\"Item 3\" icon=\"heart\" />\n      <ix-dropdown-item label=\"Item 4\" icon=\"cogwheel\" />\n    </ix-dropdown>\n  </ix-group>\n  `);\n\n  const sb1 = page.locator('ix-split-button').nth(0);\n  const sb2 = page.locator('ix-split-button').nth(1);\n\n  const g1 = page.locator('ix-group').nth(0);\n  const g2 = page.locator('ix-group').nth(1);\n\n  const sb1Dropdown = sb1.locator('ix-dropdown');\n  const sb2Dropdown = sb2.locator('ix-dropdown');\n  const g1Dropdown = g1.locator('ix-dropdown');\n  const g2Dropdown = g2.locator('ix-dropdown');\n\n  await sb1\n    .getByRole('button')\n    .filter({ hasText: 'context-menu' })\n    .first()\n    .click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    0\n  );\n\n  await sb2\n    .getByRole('button')\n    .filter({ hasText: 'context-menu' })\n    .first()\n    .click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    1\n  );\n\n  await g2.getByRole('button').filter({ hasText: 'context-menu' }).click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    3\n  );\n});\n\nfunction expectToBeVisible(elements: Locator[], index: number) {\n  return Promise.all(\n    elements.map(async (element, i) => {\n      let ef = expect(element);\n      if (i !== index) {\n        ef = ef.not;\n      }\n      await ef.toBeVisible();\n    })\n  );\n}\n\ntest.describe('nested dropdown tests', () => {\n  const button1Text = 'Triggerbutton1';\n  const button2Text = 'Triggerbutton2';\n\n  test.beforeEach(async ({ mount }) => {\n    await mount(`\n      <button id=\"trigger1\">${button1Text}</button>\n      <ix-dropdown trigger=\"trigger1\">\n        <button id=\"trigger2\">${button2Text}</button>\n        <ix-dropdown trigger=\"trigger2\">\n          <ix-dropdown-item label=\"Item 1\"></ix-dropdown-item>\n        </ix-dropdown>\n      </ix-dropdown>\n    `);\n  });\n\n  test('can open nested dropdown', async ({ page }) => {\n    await page.getByText(button1Text).click();\n    await page.getByText(button2Text).click();\n    const nestedDropdownItem = page.locator('ix-dropdown-item');\n\n    await expect(nestedDropdownItem).toHaveClass(/hydrated/);\n  });\n});\n"]}

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

@@ -265,6 +265,9 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-primary.disabled, :host(.disabled) .btn-primary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-primary--border-color--disabled);
@@ -324,6 +327,9 @@
   color: var(--theme-btn-outline-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-outline-primary.disabled, :host(.disabled) .btn-outline-primary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-outline-primary--border-color--disabled);
@@ -379,6 +385,9 @@
   color: var(--theme-btn-invisible-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-invisible-primary.disabled, :host(.disabled) .btn-invisible-primary:disabled {
   pointer-events: none;
   background-color: var(--theme-btn-invisible-primary--background--disabled);
@@ -437,6 +446,9 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-secondary.disabled, :host(.disabled) .btn-secondary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-secondary--border-color--disabled);
@@ -496,6 +508,9 @@
   color: var(--theme-btn-outline-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-outline-secondary.disabled, :host(.disabled) .btn-outline-secondary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-outline-secondary--border-color--disabled);
@@ -551,6 +566,9 @@
   color: var(--theme-btn-invisible-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-invisible-secondary.disabled, :host(.disabled) .btn-invisible-secondary:disabled {
   pointer-events: none;
   background-color: var(--theme-btn-invisible-secondary--background--disabled);

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

@@ -265,6 +265,9 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-primary.disabled, :host(.disabled) .btn-primary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-primary--border-color--disabled);
@@ -324,6 +327,9 @@
   color: var(--theme-btn-outline-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-outline-primary.disabled, :host(.disabled) .btn-outline-primary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-outline-primary--border-color--disabled);
@@ -379,6 +385,9 @@
   color: var(--theme-btn-invisible-primary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-invisible-primary.disabled, :host(.disabled) .btn-invisible-primary:disabled {
   pointer-events: none;
   background-color: var(--theme-btn-invisible-primary--background--disabled);
@@ -437,6 +446,9 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-secondary.disabled, :host(.disabled) .btn-secondary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-secondary--border-color--disabled);
@@ -496,6 +508,9 @@
   color: var(--theme-btn-outline-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-outline-secondary.disabled, :host(.disabled) .btn-outline-secondary:disabled {
   pointer-events: none;
   border-color: var(--theme-btn-outline-secondary--border-color--disabled);
@@ -551,6 +566,9 @@
   color: var(--theme-btn-invisible-secondary--color--active);
 }
 
+:host(.disabled) {
+  pointer-events: none;
+}
 :host(.disabled) .btn-invisible-secondary.disabled, :host(.disabled) .btn-invisible-secondary:disabled {
   pointer-events: none;
   background-color: var(--theme-btn-invisible-secondary--background--disabled);

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

@@ -32,6 +32,16 @@ export class InputGroup {
       this.startSlotChanged();
     });
     valid ? this.onValidInput() : this.onInvalidInput();
+    this.observer = new MutationObserver(() => {
+      this.startSlotChanged();
+      this.endSlotChanged();
+    });
+    this.observer.observe(this.hostElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true,
+    });
   }
   componentDidRender() {
     this.prepareInputElement();
@@ -49,13 +59,13 @@ export class InputGroup {
         this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
       }
       else {
-        this.inputElement.style.paddingRight = 'none';
+        this.inputElement.style.paddingRight = '0.5rem';
       }
       if (this.inputPaddingLeft !== 0) {
         this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
       }
       else {
-        this.inputElement.style.paddingLeft = 'none';
+        this.inputElement.style.paddingLeft = '0.5rem';
       }
     }
     else {
@@ -70,6 +80,9 @@ export class InputGroup {
       if (startPadding !== 0) {
         this.inputPaddingLeft = 15 + startPadding;
       }
+      else {
+        this.inputPaddingLeft = 0;
+      }
       if (!this.inputElement) {
         return;
       }
@@ -102,7 +115,7 @@ export class InputGroup {
     return width;
   }
   render() {
-    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start", onSlotchange: () => this.startSlotChanged() })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end", onSlotchange: () => this.endSlotChanged() }))));
+    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start" })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end" }))));
   }
   static get is() { return "ix-input-group"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = 'none';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = 'none';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 15 + startPadding;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      if (\n        (this.inputElement.form?.classList.contains('was-validated') ||\n          this.inputElement.form?.noValidate === false) &&\n        !this.inputElement.validity.valid\n      ) {\n        this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;\n        this.inputPaddingLeft += 32;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-end\"]'\n    );\n\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"group group-start\">\n          <slot\n            name=\"input-start\"\n            onSlotchange={() => this.startSlotChanged()}\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            name=\"input-end\"\n            onSlotchange={() => this.endSlotChanged()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,OAAO,UAAU;;4BAGO,CAAC;6BACA,CAAC;;EAE9B,IAAY,YAAY;IACtB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;EACrE,CAAC;EAID,iBAAiB;;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;IAC7C,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;MAC/C,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE;MACjD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;MAC/C,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;IAEpD,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;MACxC,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,IAAI;MAChB,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;EACL,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC7B,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAEO,cAAc;IACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAEO,mBAAmB;IACzB,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;MAEvC,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;QAChC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;OACtE;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC;OACjD;MAED,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE;QAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;OACpE;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,QAAQ,CAAC;OAChD;KACF;SAAM;MACL,OAAO,CAAC,IAAI,CACV,uFAAuF,CACxF,CAAC;KACH;EACH,CAAC;EAEO,gBAAgB;IACtB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,0BAA0B,CAC3B,CAAC;IAEF,UAAU,CAAC,GAAG,EAAE;;MACd,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;MAEjD,IAAI,YAAY,KAAK,CAAC,EAAE;QACtB,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,YAAY,CAAC;OAC3C;WAAM;QACL,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;OAC3B;MAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO;OACR;MAED,IACE,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,UAAU,MAAK,KAAK,CAAC;QAC/C,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,EACjC;QACA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mBAAmB,GAAG,GAAG,IAAI,CAAC,gBAAgB,IAAI,CAAC;QAC3E,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC;OAC7B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,cAAc;IACpB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,wBAAwB,CACzB,CAAC;IAEF,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,gBAAgB,CAAC,WAAoB;IAC3C,IAAI,CAAC,WAAW,EAAE;MAChB,OAAO,CAAC,CAAC;KACV;IAED,MAAM,WAAW,GAAG,kBAAkB,CAAc,WAAW,CAAC,CAAC;IACjE,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;MAC5B,OAAO,CAAC,CAAC;KACV;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MAC9B,KAAK,IAAI,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;EACf,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,mBAAmB;QAC5B,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B;MACN,eAAa;MACb,WAAK,KAAK,EAAC,iBAAiB;QAC1B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACD,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, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 15 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      if (\n        (this.inputElement.form?.classList.contains('was-validated') ||\n          this.inputElement.form?.noValidate === false) &&\n        !this.inputElement.validity.valid\n      ) {\n        this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;\n        this.inputPaddingLeft += 32;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-end\"]'\n    );\n\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,86 @@
+/*
+ * 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 thi  s source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-input-group>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('padding-left', '8px');
+  await expect(input).toHaveCSS('padding-right', '15px');
+});
+test('initial padding start', async ({ mount, page }) => {
+  await mount(`
+    <ix-input-group>
+      <span slot="input-start">
+        <ix-icon name="eye" size="16"></ix-icon>
+      </span>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('padding-left', '31px');
+  await expect(input).toHaveCSS('padding-right', '15px');
+});
+test('initial padding end', async ({ mount, page }) => {
+  await mount(`
+    <ix-input-group>
+      <span slot="input-start">
+          <ix-icon name="eye" size="16"></ix-icon>
+        </span>
+        <span slot="input-end">
+        <ix-icon name="eye" size="16"></ix-icon>
+      </span>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('padding-left', '31px');
+  await expect(input).toHaveCSS('padding-right', '31px');
+});
+test('update padding end', async ({ mount, page }) => {
+  await mount(`
+    <ix-input-group>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('padding-left', '8px');
+  await expect(input).toHaveCSS('padding-right', '15px');
+  await group.evaluate((group) => {
+    const startElement = document.createElement('DIV');
+    startElement.style.height = '1px';
+    startElement.style.width = '40px';
+    startElement.slot = 'input-start';
+    group.appendChild(startElement);
+  });
+  await expect(input).toHaveCSS('padding-left', '55px');
+  await expect(input).toHaveCSS('padding-right', '15px');
+  await group.evaluate((group) => {
+    const endElement = document.createElement('DIV');
+    endElement.style.height = '1px';
+    endElement.style.width = '50px';
+    endElement.slot = 'input-end';
+    group.appendChild(endElement);
+  });
+  await expect(input).toHaveCSS('padding-left', '55px');
+  await expect(input).toHaveCSS('padding-right', '65px');
+});
+//# sourceMappingURL=input-group.ct.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.ct.js","sourceRoot":"","sources":["../../../../src/components/input-group/tests/input-group.ct.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 thi  s source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '8px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n});\n\ntest('initial padding start', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <span slot=\"input-start\">\n        <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n      </span>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '31px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n});\n\ntest('initial padding end', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <span slot=\"input-start\">\n          <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n        </span>\n        <span slot=\"input-end\">\n        <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n      </span>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '31px');\n  await expect(input).toHaveCSS('padding-right', '31px');\n});\n\ntest('update padding end', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '8px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n\n  await group.evaluate((group: HTMLElement) => {\n    const startElement = document.createElement('DIV');\n    startElement.style.height = '1px';\n    startElement.style.width = '40px';\n    startElement.slot = 'input-start';\n    group.appendChild(startElement);\n  });\n\n  await expect(input).toHaveCSS('padding-left', '55px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n\n  await group.evaluate((group: HTMLElement) => {\n    const endElement = document.createElement('DIV');\n    endElement.style.height = '1px';\n    endElement.style.width = '50px';\n    endElement.slot = 'input-end';\n    group.appendChild(endElement);\n  });\n\n  await expect(input).toHaveCSS('padding-left', '55px');\n  await expect(input).toHaveCSS('padding-right', '65px');\n});\n"]}

package/dist/collection/components/menu/menu.js

@@ -566,7 +566,10 @@ export class Menu {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "- Has no effect on component. Will get removed with next major release (v3)"
+            }],
           "text": "Maximum number of menu items to show in case enough vertical space is available.\nExtra menu items will be collapsed to 'show more' menu item."
         },
         "attribute": "max-visible-menu-items",