@siemens/ix 0.0.0-pr-2155-20250924075220 → 0.0.0-pr-2166-20251001083917

package/dist/cjs/ix-icon-button.ix-spinner.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-icon-button.ix-spinner.entry.cjs.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"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@use './icon-button-mixin.scss';\n\n@include icon-button-mixin.base-icon-button;\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 */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport {\n  getFallbackLabelFromIconName,\n  a11yHostAttributes,\n} from '../utils/a11y';\nimport type { IconButtonVariant } from './icon-button.types';\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   * @deprecated Set the native `aria-label` on the ix-icon-button host element\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'subtle-primary';\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   */\n  @Prop() size: '24' | '16' | '12' = '24';\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  @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 === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label':\n          a11y['aria-label'] ??\n          this.a11yLabel ??\n          getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\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","/*\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@use 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    display: block;\n    position: relative;\n\n    @include component.ix-component;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\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 */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"names":["a11y","a11yHostAttributes","getFallbackLabelFromIconName","h","Host","BaseIconButton"],"mappings":"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"}
+{"version":3,"file":"ix-icon-button.ix-spinner.entry.cjs.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"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@use './icon-button-mixin.scss';\n\n@include icon-button-mixin.base-icon-button;\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 */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport {\n  getFallbackLabelFromIconName,\n  a11yHostAttributes,\n} from '../utils/a11y';\nimport type { IconButtonVariant } from './icon-button.types';\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   * @deprecated Set the native `aria-label` on the ix-icon-button host element. Will be removed in 5.0.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'subtle-primary';\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   */\n  @Prop() size: '24' | '16' | '12' = '24';\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  @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 === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label':\n          a11y['aria-label'] ??\n          this.a11yLabel ??\n          getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\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","/*\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@use 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    display: block;\n    position: relative;\n\n    @include component.ix-component;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\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 */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"names":["a11y","a11yHostAttributes","getFallbackLabelFromIconName","h","Host","BaseIconButton"],"mappings":"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"}

package/dist/cjs/ix-icon-button_2.cjs.entry.js

@@ -78,7 +78,7 @@ const IconButton = class {
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (index.h(index.Host, { key: 'f14e9fcbcef5261063165d6a3e9a852a50f52685', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '457e6e503a1ef75babc9894f8e44e6b672000d5c' }, baseButtonProps))));
+        return (index.h(index.Host, { key: 'bdb302ce6ef1803d43285e1effc3ce70ff9284c8', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '14073614fda1a07d4292094b91092871f05619d3' }, baseButtonProps))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-icon-toggle-button.cjs.entry.js

@@ -75,7 +75,7 @@ const IconToggleButton = class {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (index.h(index.Host, { key: '6c7f9e4e25875e5a688b4f211d596b458b819584', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '6813db68fff977b64748f962cde7836e72d06cb9' }, baseButtonProps))));
+        return (index.h(index.Host, { key: 'cdab0dbaf3a790f3d83fff58d73588504d7ba956', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '6cfe4d3b14eba61a9b80ffcdcd9664a1f815f70f' }, baseButtonProps))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-input.cjs.entry.js

@@ -139,13 +139,13 @@ const Input = class {
     render() {
         var _a;
         const inputAria = input_util.getAriaAttributesForInput(this);
-        return (index.h(index.Host, { key: 'f1a0a8e252682aab237e572ad8079cf496d0b519', class: {
+        return (index.h(index.Host, { key: '05bb684da7ab25f4cea5429ec2c166a9c7a9cc21', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, index.h("ix-field-wrapper", { key: 'a6bd8f0e90398dfb1288ceb585c9852fc4056552', 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 }, index.h("div", { key: '30e5e1debfa21d1d6a9db780a1fa807e88e5fd62', class: "input-wrapper" }, index.h(input_util.SlotStart, { key: '04338b8d4de55cb1cacfaeb381c39796ed542b27', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.InputElement, { key: '3fe643f62d02522dad0bd63876bbf9873f77881b', 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) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, index.h("ix-field-wrapper", { key: 'a2cd4a57590b5848de9738a0fbdff0c1c1947abc', 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 }, index.h("div", { key: 'e9369f9d649068b7708fabf29b9c2e25954591a6', class: "input-wrapper" }, index.h(input_util.SlotStart, { key: '4294b9e2329a9e0b9964630d76f64788f127e280', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.InputElement, { key: '750c6a574acb4dac21f7a6143b34ae1482de7d74', 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) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 input_util.onInputBlur(this, this.inputRef.current);
                 this.touched = true;
-            }, ariaAttributes: inputAria }), index.h(input_util.SlotEnd, { key: '7b3f09276058e7c9081c5a5c406ccb6f31556593', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { key: 'd383d7bb55402f970bd393b7a2b2ec818d8bdd13', color: "color-weak-text", class: {
+            }, ariaAttributes: inputAria }), index.h(input_util.SlotEnd, { key: 'ebd005ac85dc9109895d3cd7dcd147a08ee0fc02', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { key: '848ffad3e32ac4696bcfdf4af8642c2ab1844692', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password',
             }, variant: "tertiary", icon: this.inputType === 'password' ? index$1.iconEye : index$1.iconEyeCancelled, onClick: () => {
@@ -154,7 +154,7 @@ const Input = class {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (index.h("ix-typography", { key: '1d256d9a9b688dfc7ab55308b1c7e758a45f8504', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)))));
+            } }))), !!this.maxLength && this.maxLength > 0 && (index.h("ix-typography", { key: '97d96db1a0b189a74814f46a3409879927065118', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return index.getElement(this); }

package/dist/cjs/ix-key-value-list.cjs.entry.js

@@ -13,7 +13,7 @@ const KeyValueList = class {
         this.striped = false;
     }
     render() {
-        return (index.h(index.Host, { key: '65f4f193bd4c3b76ee0ffbae7791ff080b1a028f', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, index.h("slot", { key: '966e32b4ce52d499e500fbcbed1a9c43cac1b3e5' })));
+        return (index.h(index.Host, { key: 'fbbf0d85579098c0051103a6d783313cdf76cdec', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, index.h("slot", { key: 'ea59720cc2cb8150ff1d1f6083a0623276c1e2f1' })));
     }
 };
 KeyValueList.style = keyValueListCss;

package/dist/cjs/ix-key-value.cjs.entry.js

@@ -13,7 +13,7 @@ const KeyValue = class {
         this.labelPosition = 'top';
     }
     render() {
-        return (index.h(index.Host, { key: '313aba27b9a98274d46da2091d3c255b5b6021a9', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (index.h("ix-icon", { key: 'a60ed526a2d725c3c40ffaeb1f97f70c655f1402', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), index.h("div", { key: '3b156278c7a40eec4ac1fda6b284b6f9da5edc7b', class: "keyValue__content" }, index.h("div", { key: '9ca6cbc3a9a85804a750f10936a582ee09500381', class: "content__label" }, this.label), index.h("div", { key: '808806083e40420bd0461a38393e17b2cad307f0', class: {
+        return (index.h(index.Host, { key: '155c2d3b28dd1db32cd237391178bf4eaaf5b4d8', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (index.h("ix-icon", { key: '7f97cef73864eb0b735bf344f9005489c6eb033a', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), index.h("div", { key: 'f99112aa2d56720c6825d4ca19e730fa2a5ff99f', class: "keyValue__content" }, index.h("div", { key: 'd7b6a9dd97cc1c06b8a36a246a8d74f01de7e91f', class: "content__label" }, this.label), index.h("div", { key: '1f272a5d6c67993f7825d0258d4405891e864d50', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (index.h("slot", { name: "custom-value" }))))));

package/dist/cjs/ix-kpi.cjs.entry.js

@@ -35,13 +35,13 @@ const Kpi = class {
         return tooltip;
     }
     render() {
-        return (index.h(index.Host, { key: 'f606b08119be0b32663efe2f51749fe88cb25608', title: this.getTooltipText(), tabindex: "1", class: {
+        return (index.h(index.Host, { key: 'c92079fec06e7de58750cf213462277436bfc16c', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, index.h("div", { key: '2b7f2b65007d825f76b2380b25a81afe697fdcbf', class: {
+            } }, index.h("div", { key: '19b03ae1e57f933d5a56d59765a3c86bebfc572d', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, index.h("span", { key: '6241807a1c2497e3ed4ad6f498cd5c64c5b84185', class: "kpi-label" }, this.getStateIcon(), index.h("span", { key: 'fcd050a162b9c3ac9a80abf54c3fe9000d9d2a8d', class: "kpi-label-text" }, this.label)), index.h("span", { key: 'e0b0f5ce921c7579dc6f947c8129f1eec8377cc5', class: "kpi-value-container" }, index.h("span", { key: '449f3de71bb4ee0b6a058f0fe8205aa06654dbc1', class: "kpi-value" }, this.value), this.unit ? index.h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, index.h("span", { key: '57ffff6b93d07c51e702f69e0665abe6794d9fe8', class: "kpi-label" }, this.getStateIcon(), index.h("span", { key: '2ddcf14874f47d3fb7446618b5635f3e0441dd52', class: "kpi-label-text" }, this.label)), index.h("span", { key: '58c8ed8685d39049736c17efd4cf8a9f853de9ce', class: "kpi-value-container" }, index.h("span", { key: 'f3bce025fee07f36d4a8edae7b4d460c4da8d69b', class: "kpi-value" }, this.value), this.unit ? index.h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
 };
 Kpi.style = kpiCss;

package/dist/cjs/ix-layout-auto.cjs.entry.js

@@ -78,7 +78,7 @@ const LayoutForm = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'f29e16a0be5c5d3751bbe6cffc35a8b33bd69075' }, index.h("div", { key: '2eeb15c4fe4d5b09cce40faef29502367eb576a5', class: "container" }, index.h("slot", { key: 'b13b8c6a610d0d9fff987d48f6bc1810af1b7390' }))));
+        return (index.h(index.Host, { key: '75ef49e33c43dea4b070df9529402dfa5843b202' }, index.h("div", { key: '2a2916b18cd39cd9edd2ae4381544f9d45637401', class: "container" }, index.h("slot", { key: '0a955e698e61273942795538527a865be6fd6e71' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-link-button.cjs.entry.js

@@ -20,13 +20,13 @@ const LinkButton = class {
         this.target = '_self';
     }
     render() {
-        return (index.h(index.Host, { key: '7f1fbbb36784bd6a5792da9ea48cc6e9c6aa5332' }, index.h("a", { key: 'ffd97898fd1e720f6431e0f2405b3c23d765e0c6', title: this.url, tabindex: "0", class: {
+        return (index.h(index.Host, { key: '02d318962866d9b26c47c0229ba2a6c87851c56e' }, index.h("a", { key: 'cabe9f6ced43a4ec4efdfb386d60fe4779c3cd1b', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, index.h("ix-icon", { key: '9980af21cb250d099f2ba0ddd543d4934a6d0eb6', class: "icon", name: index$1.iconChevronRightSmall, size: "16", "aria-hidden": "true" }), index.h("div", { key: '347fdc85236282e3b93b8215de0269dd4993a2f2', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, index.h("ix-icon", { key: 'af54ed0919ac9891729f789f4027021af6aa440f', class: "icon", name: index$1.iconChevronRightSmall, size: "16", "aria-hidden": "true" }), index.h("div", { key: '31a4c7de092658ddf5eb2b18f081f1fcc18eec85', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, index.h("slot", { key: '79348eda083a81187f79e3a1c043982ae93c97a9' })))));
+            } }, index.h("slot", { key: '50126a934c69cc5e5c7da46f55177431d6cc29ff' })))));
     }
 };
 LinkButton.style = linkButtonCss;

package/dist/cjs/ix-map-navigation-overlay.cjs.entry.js

@@ -38,14 +38,14 @@ const MapNavigationOverlay = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'c7a50abb3513fe85c2b49cacb0ad9db139eeff61' }, index.h("div", { key: '877867feede603c1eb0977ceebe8c1efa8c223c4', class: "overlay-header" }, index.h("div", { key: 'c85cd0ce6dc09266d331e7100235fe6469598d5a', class: {
+        return (index.h(index.Host, { key: '20be4d9ca5276f987e368ae76e0e384d6de8d518' }, index.h("div", { key: '92c142906a8bc62a66122e9bb7edb77580177d9f', class: "overlay-header" }, index.h("div", { key: '9d114426224b86e403269b67581e69ce6d42b806', class: {
                 'color-indicator': true,
                 'display-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), index.h("div", { key: '7b8a70dc3272d2c7a5a522accbafe58f330f1f30', class: "overlay-header-content" }, index.h("ix-icon", { key: '4ec9d2689d01d79468bbeb1e395873264f8e14e0', size: "32", name: this.icon, "aria-label": this.ariaLabelIcon }), index.h("span", { key: 'f0db6769dc5b3172f1196f1fbf8fe4b6210514d4', class: "overlay-header-title", title: this.name }, this.name)), index.h("ix-icon-button", { key: '9c75f3ae0f263c2002c6e7e46e46b8379e7d63d1', class: "overlay-close", variant: "tertiary", icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", onClick: () => this.closeOverlay(), "aria-label": this.ariaLabelCloseIconButton })), index.h("slot", { key: 'd5c0fd5b40a7e33462e0f5aa2e1e491176583ae3' })));
+            } }), index.h("div", { key: 'd2ec51d25d995c1ffa97d95ebf2fb1b1c0bfdb43', class: "overlay-header-content" }, index.h("ix-icon", { key: 'f3a60357a1c4faf8cf56748ebb42c9f6d8d143bc', size: "32", name: this.icon, "aria-label": this.ariaLabelIcon }), index.h("span", { key: '17cac790ed7f83c03d62676288ec2c48b5a892e9', class: "overlay-header-title", title: this.name }, this.name)), index.h("ix-icon-button", { key: '220c6324fe86b2039a14f29a72f3de32bcde06bb', class: "overlay-close", variant: "tertiary", icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", onClick: () => this.closeOverlay(), "aria-label": this.ariaLabelCloseIconButton })), index.h("slot", { key: '8e6ebd5c85b618bda20ecaeaf5d5501082673a12' })));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-map-navigation.cjs.entry.js

@@ -16,6 +16,7 @@ const MapNavigation = class {
         /**
          * Hide the sidebar context menu button when set to true
          */
+        // eslint-disable-next-line @stencil-community/ban-default-true
         this.hideContextMenu = true;
         this.isSidebarOpen = true;
         this.hasContentHeader = false;
@@ -152,11 +153,11 @@ const MapNavigation = class {
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (index.h(index.Host, { key: '5e7b81e33095916809c72c77c58a0e9561e3eadc' }, index.h("slot", { key: '6355eae609a9b40444e3af3f6ff344c657941eeb', name: "menu" }), index.h("div", { key: '3b22b95b4816ed75f6eb186378be9dd025b9a8b0', class: "map-nav" }, index.h("div", { key: 'dfe48e307748f1ec3115284f58a2f7e6eba704a9', class: "map-nav-sidebar" }, index.h("div", { key: '330712680eaf25821f7f9819d2b07d1fee4f9077', class: "map-nav-header" }, index.h("ix-application-header", { key: 'ac1b29fd7c20ef689b4ce2b41f1188444d492ecb', name: this.applicationName, class: "map-nav-header-brand" }, index.h("slot", { key: 'a01977d24404f8db7e750e8cd61af5461183bf09', slot: "logo", name: "logo" }))), index.h("div", { key: '409bf4a73f9c24cf7267380ce0bec7e91c51564e', class: "map-nav-sidebar-content" }, index.h("div", { key: '26b2020c1f215665c7b40c2f81baf4d42620a482', class: "map-nav-sidebar-static-content" }, index.h("div", { key: '265a149ce8f4f2502e45149a88159766556c37d3', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (index.h("ix-icon-button", { icon: index$1.iconContextMenu, size: "24", variant: "subtle-primary", onClick: (_) => this.contextMenuClick.emit(), "aria-label": this.ariaLabelContextIconButton }))), index.h("div", { key: '2824fecae7636c4a68ab90dc06b0274afc031602', class: "map-nav-sidebar-user-content" }, index.h("slot", { key: '1ef670f8310c5c3804c5eac3dc4d601898bf244d', name: "sidebar-content" })))), index.h("div", { key: 'a383691fe6515768ef643ea8c69012d30c3b9d9b', class: "content" }, index.h("div", { key: '9c2dee41f6fd805e31c0f555347a24f3e9f393b2', class: {
+        return (index.h(index.Host, { key: 'ee355f2c6943155181eb42c9340afbbfb23c5256' }, index.h("slot", { key: '0e634f2140aa3b139b883519285c29f107cc55d2', name: "menu" }), index.h("div", { key: 'c282e8ce53748ec98a0e78c1e2c9c74566485f6a', class: "map-nav" }, index.h("div", { key: '2714ae8cff89e4336988e6aeb43f5e9743c16cda', class: "map-nav-sidebar" }, index.h("div", { key: '5f0052944113e935a166eecc5490106166ccde5a', class: "map-nav-header" }, index.h("ix-application-header", { key: '41eb644bd30d2f6431fea2871ef4c1200d673f12', name: this.applicationName, class: "map-nav-header-brand" }, index.h("slot", { key: '6019099822cf9547258db6509af5dbabf771c80c', slot: "logo", name: "logo" }))), index.h("div", { key: 'a41cf1fd5570cd449840ec29c51b9a214a7fc1ee', class: "map-nav-sidebar-content" }, index.h("div", { key: '8d31a6f87137144dce9f038c6af57935ad0b361d', class: "map-nav-sidebar-static-content" }, index.h("div", { key: 'f08e9ece40573dcc2c7e2ffd3d7960f7cafda9ce', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (index.h("ix-icon-button", { icon: index$1.iconContextMenu, size: "24", variant: "subtle-primary", onClick: () => this.contextMenuClick.emit(), "aria-label": this.ariaLabelContextIconButton }))), index.h("div", { key: '0a44ecc9fc7d2eaf47a0ab030c29937ef984ec91', class: "map-nav-sidebar-user-content" }, index.h("slot", { key: '8520ed8e55ffcd3dfd6f091b686d60844de812d1', name: "sidebar-content" })))), index.h("div", { key: 'de99d37f59d097a73cbe51560582304410551cbb', class: "content" }, index.h("div", { key: '87874873f41bf080f62b06fa649eef0f73905da2', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, index.h("slot", { key: 'f7136c106397b3e0df52c4b3a14b5dfddf73f793', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), index.h("main", { key: 'ca7e27826c15a419d9803cf99d67587f26a1d6a0' }, index.h("slot", { key: '7083d7482930fc674efe735972268b4eb14dd7d8' }), index.h("slot", { key: 'a94b1a95f2941fec540bd63c97b23b261688c0ba', name: "overlay" }))))));
+            } }, index.h("slot", { key: '43dae1efd68fe7838af56d068897d46306517dce', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), index.h("main", { key: '9abeda56b56db433715cd500730f0594d9a39ad3' }, index.h("slot", { key: 'f084c2e9cf4b23220bae1d5fdb078905922bc491' }), index.h("slot", { key: '797eff659abf7cadd47d9cdc9d73e451fe7add56', name: "overlay" }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-map-navigation.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-map-navigation.entry.cjs.js","sources":["src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","src/components/map-navigation/map-navigation.tsx"],"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@use './common-variables' as vars;\n@use 'legacy/mixins/fonts';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  $appHeaderHeight: 3.5rem;\n  $appHeaderGradientHeight: 4rem;\n  $navHeaderHeight: 11.5rem;\n  $sidebarWidth: 29.75rem;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  @include component.ix-component;\n\n  .map-nav {\n    display: flex;\n    margin-left: 3.25rem;\n    position: relative;\n    height: 100%;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .map-nav-sidebar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: $sidebarWidth;\n    max-width: $sidebarWidth;\n    min-width: $sidebarWidth;\n    height: 100%;\n    left: 4rem;\n    background-color: var(--theme-map-navigation--background);\n    border-inline-end: 0.125rem solid\n      var(--theme-map-navigation-separator--background);\n    z-index: 99;\n\n    &.display-none {\n      display: none;\n    }\n  }\n\n  .map-nav-sidebar-content {\n    align-items: center;\n    position: relative;\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n\n    .map-nav-sidebar-static-content {\n      display: flex;\n      justify-content: space-between;\n      margin-top: 0.437rem;\n      margin-bottom: 0.812rem;\n      margin-left: vars.$default-space;\n      margin-right: vars.$default-space;\n\n      @include fonts.text-h2;\n    }\n  }\n\n  .map-nav-header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: $appHeaderHeight;\n    min-height: $appHeaderHeight;\n    width: 100%;\n\n    .map-nav-header-brand {\n      background-color: var(--theme-map-navigation-background);\n\n      padding-left: vars.$default-space;\n      padding-right: vars.$default-space;\n      padding-bottom: 0.625rem;\n      height: 100%;\n      width: 100%;\n      --theme-app-header--color: var(--theme-map-navigation-header--color);\n      --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n      button {\n        margin-left: vars.$default-space;\n      }\n    }\n  }\n\n  .map-nav-header-content {\n    display: flex;\n    height: $appHeaderHeight;\n    align-items: center;\n    overflow: hidden;\n    padding: 0 vars.$default-space;\n\n    &.empty {\n      height: 0;\n    }\n  }\n\n  .map-nav-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n\n    @include fonts.text-h2();\n  }\n\n  .content {\n    display: block;\n    flex-grow: 1;\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n    z-index: calc(var(--theme-z-index-sticky) - 1);\n  }\n\n  ::slotted(ix-menu) {\n    position: absolute;\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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-map-navigation',\n  styleUrl: 'map-navigation.scss',\n  shadow: true,\n})\nexport class MapNavigation {\n  private static readonly defaultTime = 150;\n  private static readonly slowTime = 500;\n\n  @Element() hostElement!: HTMLIxMapNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Navigation title\n   */\n  @Prop() navigationTitle?: string;\n\n  /**\n   * Hide the sidebar context menu button when set to true\n   */\n  @Prop() hideContextMenu = true;\n\n  /**\n   * ARIA label for the context menu icon button\n   * Will be set for the native HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelContextIconButton?: string;\n\n  /**\n   * Navigation toggled\n   */\n  @Event() navigationToggled!: EventEmitter<boolean>;\n\n  /**\n   * Context menu clicked\n   */\n  @Event() contextMenuClick!: EventEmitter<void>;\n\n  @State() isSidebarOpen = true;\n  @State() hasContentHeader = false;\n\n  get menu() {\n    return this.hostElement.querySelector('ix-menu')!;\n  }\n\n  get menuOverlay() {\n    return this.hostElement.querySelector('ix-menu-overlay')!;\n  }\n\n  get mapNavMenu() {\n    return this.hostElement.shadowRoot!.querySelector('.map-nav-menu')!;\n  }\n\n  get sidebar() {\n    return this.hostElement.shadowRoot!.querySelector('.map-nav-sidebar')!;\n  }\n\n  get overlay() {\n    return this.hostElement.shadowRoot!.querySelector('#overlay')!;\n  }\n\n  componentDidRender() {\n    this.appendMenu();\n    this.closeOverlay();\n  }\n\n  componentWillLoad() {\n    useContextProvider(this.hostElement, ApplicationLayoutContext, {\n      hideHeader: false,\n      host: 'map-navigation',\n    });\n  }\n\n  private appendMenu() {\n    this.menu.addEventListener(\n      'mapExpandChange',\n      (event: CustomEvent<boolean>) => {\n        const state = !event.detail;\n        this.toggleSidebar(state);\n      }\n    );\n    this.menu.enableMapExpand = true;\n  }\n\n  /**\n   * Change the visibility of the sidebar\n   *\n   * @param show new visibility state\n   */\n  @Method()\n  async toggleSidebar(show?: boolean) {\n    if (show !== undefined) {\n      this.isSidebarOpen = show;\n    } else {\n      this.isSidebarOpen = !this.isSidebarOpen;\n    }\n\n    if (this.isSidebarOpen) {\n      this.openSidebar();\n    } else {\n      this.closeSidebar();\n    }\n\n    this.navigationToggled.emit(this.isSidebarOpen);\n    this.menu.toggleMapExpand(this.isSidebarOpen);\n  }\n\n  private closeSidebar() {\n    animate(this.sidebar, {\n      duration: MapNavigation.defaultTime,\n      marginLeft: [0, '-29.75rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      onComplete: () => {\n        this.sidebar.classList.add('display-none');\n      },\n    });\n  }\n\n  private openSidebar() {\n    animate(this.sidebar, {\n      duration: MapNavigation.defaultTime,\n      marginLeft: ['-29.75rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      onBegin: () => {\n        this.sidebar.classList.remove('display-none');\n      },\n    });\n  }\n\n  /**\n   * Open a overlay inside content area\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   *\n   * @param name\n   * @param component\n   * @param icon\n   * @param color\n   */\n  @Method()\n  async openOverlay(\n    name: string,\n    component: HTMLElement,\n    icon?: string,\n    color?: string\n  ) {\n    animate(this.overlay, {\n      duration: MapNavigation.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      onBegin: () => {\n        this.overlay.classList.remove('display-none');\n      },\n    });\n\n    const overlayInstance = document.createElement('ix-map-navigation-overlay');\n    overlayInstance.setAttribute('color', color ?? '');\n    overlayInstance.setAttribute('name', name);\n    overlayInstance.setAttribute('icon', icon ?? '');\n    overlayInstance.setAttribute('slot', 'overlay');\n    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n    overlayInstance.appendChild(component);\n    this.hostElement.appendChild(overlayInstance);\n  }\n\n  /**\n   * Close current shown overlay\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   */\n  @Method()\n  async closeOverlay() {\n    animate(this.overlay, {\n      duration: MapNavigation.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      onComplete: () => {\n        if (!this.overlay) {\n          return;\n        }\n        this.overlay.firstChild?.remove();\n        this.overlay.classList.add('display-none');\n      },\n    });\n  }\n\n  private checkHasContentHeader(e: Event) {\n    const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n      flatten: true,\n    });\n\n    this.hasContentHeader = nodes?.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"menu\"></slot>\n        <div class=\"map-nav\">\n          <div class=\"map-nav-sidebar\">\n            <div class=\"map-nav-header\">\n              <ix-application-header\n                name={this.applicationName}\n                class=\"map-nav-header-brand\"\n              >\n                <slot slot=\"logo\" name=\"logo\"></slot>\n              </ix-application-header>\n            </div>\n            <div class=\"map-nav-sidebar-content\">\n              <div class=\"map-nav-sidebar-static-content\">\n                <div class=\"map-nav-title\">{this.navigationTitle}</div>\n                {this.hideContextMenu ? (\n                  ''\n                ) : (\n                  <ix-icon-button\n                    icon={iconContextMenu}\n                    size=\"24\"\n                    variant=\"subtle-primary\"\n                    onClick={(_) => this.contextMenuClick.emit()}\n                    aria-label={this.ariaLabelContextIconButton}\n                  ></ix-icon-button>\n                )}\n              </div>\n              <div class=\"map-nav-sidebar-user-content\">\n                <slot name=\"sidebar-content\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"content\">\n            <div\n              class={{\n                'map-nav-header-content': true,\n                'bg-2': true,\n                empty: !this.hasContentHeader,\n              }}\n            >\n              <slot\n                name=\"content-header\"\n                onSlotchange={(e) => this.checkHasContentHeader(e)}\n              ></slot>\n            </div>\n            <main>\n              <slot></slot>\n              <slot name=\"overlay\"></slot>\n            </main>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["useContextProvider","ApplicationLayoutContext","animate","h","Host","iconContextMenu"],"mappings":"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"}
+{"version":3,"file":"ix-map-navigation.entry.cjs.js","sources":["src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","src/components/map-navigation/map-navigation.tsx"],"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@use './common-variables' as vars;\n@use 'legacy/mixins/fonts';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  $appHeaderHeight: 3.5rem;\n  $appHeaderGradientHeight: 4rem;\n  $navHeaderHeight: 11.5rem;\n  $sidebarWidth: 29.75rem;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  @include component.ix-component;\n\n  .map-nav {\n    display: flex;\n    margin-left: 3.25rem;\n    position: relative;\n    height: 100%;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .map-nav-sidebar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: $sidebarWidth;\n    max-width: $sidebarWidth;\n    min-width: $sidebarWidth;\n    height: 100%;\n    left: 4rem;\n    background-color: var(--theme-map-navigation--background);\n    border-inline-end: 0.125rem solid\n      var(--theme-map-navigation-separator--background);\n    z-index: 99;\n\n    &.display-none {\n      display: none;\n    }\n  }\n\n  .map-nav-sidebar-content {\n    align-items: center;\n    position: relative;\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n\n    .map-nav-sidebar-static-content {\n      display: flex;\n      justify-content: space-between;\n      margin-top: 0.437rem;\n      margin-bottom: 0.812rem;\n      margin-left: vars.$default-space;\n      margin-right: vars.$default-space;\n\n      @include fonts.text-h2;\n    }\n  }\n\n  .map-nav-header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: $appHeaderHeight;\n    min-height: $appHeaderHeight;\n    width: 100%;\n\n    .map-nav-header-brand {\n      background-color: var(--theme-map-navigation-background);\n\n      padding-left: vars.$default-space;\n      padding-right: vars.$default-space;\n      padding-bottom: 0.625rem;\n      height: 100%;\n      width: 100%;\n      --theme-app-header--color: var(--theme-map-navigation-header--color);\n      --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n      button {\n        margin-left: vars.$default-space;\n      }\n    }\n  }\n\n  .map-nav-header-content {\n    display: flex;\n    height: $appHeaderHeight;\n    align-items: center;\n    overflow: hidden;\n    padding: 0 vars.$default-space;\n\n    &.empty {\n      height: 0;\n    }\n  }\n\n  .map-nav-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n\n    @include fonts.text-h2();\n  }\n\n  .content {\n    display: block;\n    flex-grow: 1;\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n    z-index: calc(var(--theme-z-index-sticky) - 1);\n  }\n\n  ::slotted(ix-menu) {\n    position: absolute;\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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-map-navigation',\n  styleUrl: 'map-navigation.scss',\n  shadow: true,\n})\nexport class MapNavigation {\n  private static readonly defaultTime = 150;\n  private static readonly slowTime = 500;\n\n  @Element() hostElement!: HTMLIxMapNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Navigation title\n   */\n  @Prop() navigationTitle?: string;\n\n  /**\n   * Hide the sidebar context menu button when set to true\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() hideContextMenu = true;\n\n  /**\n   * ARIA label for the context menu icon button\n   * Will be set for the native HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelContextIconButton?: string;\n\n  /**\n   * Navigation toggled\n   */\n  @Event() navigationToggled!: EventEmitter<boolean>;\n\n  /**\n   * Context menu clicked\n   */\n  @Event() contextMenuClick!: EventEmitter<void>;\n\n  @State() isSidebarOpen = true;\n  @State() hasContentHeader = false;\n\n  get menu() {\n    return this.hostElement.querySelector('ix-menu')!;\n  }\n\n  get menuOverlay() {\n    return this.hostElement.querySelector('ix-menu-overlay')!;\n  }\n\n  get mapNavMenu() {\n    return this.hostElement.shadowRoot!.querySelector('.map-nav-menu')!;\n  }\n\n  get sidebar() {\n    return this.hostElement.shadowRoot!.querySelector('.map-nav-sidebar')!;\n  }\n\n  get overlay() {\n    return this.hostElement.shadowRoot!.querySelector('#overlay')!;\n  }\n\n  componentDidRender() {\n    this.appendMenu();\n    this.closeOverlay();\n  }\n\n  componentWillLoad() {\n    useContextProvider(this.hostElement, ApplicationLayoutContext, {\n      hideHeader: false,\n      host: 'map-navigation',\n    });\n  }\n\n  private appendMenu() {\n    this.menu.addEventListener(\n      'mapExpandChange',\n      (event: CustomEvent<boolean>) => {\n        const state = !event.detail;\n        this.toggleSidebar(state);\n      }\n    );\n    this.menu.enableMapExpand = true;\n  }\n\n  /**\n   * Change the visibility of the sidebar\n   *\n   * @param show new visibility state\n   */\n  @Method()\n  async toggleSidebar(show?: boolean) {\n    if (show !== undefined) {\n      this.isSidebarOpen = show;\n    } else {\n      this.isSidebarOpen = !this.isSidebarOpen;\n    }\n\n    if (this.isSidebarOpen) {\n      this.openSidebar();\n    } else {\n      this.closeSidebar();\n    }\n\n    this.navigationToggled.emit(this.isSidebarOpen);\n    this.menu.toggleMapExpand(this.isSidebarOpen);\n  }\n\n  private closeSidebar() {\n    animate(this.sidebar, {\n      duration: MapNavigation.defaultTime,\n      marginLeft: [0, '-29.75rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      onComplete: () => {\n        this.sidebar.classList.add('display-none');\n      },\n    });\n  }\n\n  private openSidebar() {\n    animate(this.sidebar, {\n      duration: MapNavigation.defaultTime,\n      marginLeft: ['-29.75rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      onBegin: () => {\n        this.sidebar.classList.remove('display-none');\n      },\n    });\n  }\n\n  /**\n   * Open a overlay inside content area\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   *\n   * @param name\n   * @param component\n   * @param icon\n   * @param color\n   */\n  @Method()\n  async openOverlay(\n    name: string,\n    component: HTMLElement,\n    icon?: string,\n    color?: string\n  ) {\n    animate(this.overlay, {\n      duration: MapNavigation.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      onBegin: () => {\n        this.overlay.classList.remove('display-none');\n      },\n    });\n\n    const overlayInstance = document.createElement('ix-map-navigation-overlay');\n    overlayInstance.setAttribute('color', color ?? '');\n    overlayInstance.setAttribute('name', name);\n    overlayInstance.setAttribute('icon', icon ?? '');\n    overlayInstance.setAttribute('slot', 'overlay');\n    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n    overlayInstance.appendChild(component);\n    this.hostElement.appendChild(overlayInstance);\n  }\n\n  /**\n   * Close current shown overlay\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   */\n  @Method()\n  async closeOverlay() {\n    animate(this.overlay, {\n      duration: MapNavigation.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      onComplete: () => {\n        if (!this.overlay) {\n          return;\n        }\n        this.overlay.firstChild?.remove();\n        this.overlay.classList.add('display-none');\n      },\n    });\n  }\n\n  private checkHasContentHeader(e: Event) {\n    const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n      flatten: true,\n    });\n\n    this.hasContentHeader = nodes?.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"menu\"></slot>\n        <div class=\"map-nav\">\n          <div class=\"map-nav-sidebar\">\n            <div class=\"map-nav-header\">\n              <ix-application-header\n                name={this.applicationName}\n                class=\"map-nav-header-brand\"\n              >\n                <slot slot=\"logo\" name=\"logo\"></slot>\n              </ix-application-header>\n            </div>\n            <div class=\"map-nav-sidebar-content\">\n              <div class=\"map-nav-sidebar-static-content\">\n                <div class=\"map-nav-title\">{this.navigationTitle}</div>\n                {this.hideContextMenu ? (\n                  ''\n                ) : (\n                  <ix-icon-button\n                    icon={iconContextMenu}\n                    size=\"24\"\n                    variant=\"subtle-primary\"\n                    onClick={() => this.contextMenuClick.emit()}\n                    aria-label={this.ariaLabelContextIconButton}\n                  ></ix-icon-button>\n                )}\n              </div>\n              <div class=\"map-nav-sidebar-user-content\">\n                <slot name=\"sidebar-content\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"content\">\n            <div\n              class={{\n                'map-nav-header-content': true,\n                'bg-2': true,\n                empty: !this.hasContentHeader,\n              }}\n            >\n              <slot\n                name=\"content-header\"\n                onSlotchange={(e) => this.checkHasContentHeader(e)}\n              ></slot>\n            </div>\n            <main>\n              <slot></slot>\n              <slot name=\"overlay\"></slot>\n            </main>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["useContextProvider","ApplicationLayoutContext","animate","h","Host","iconContextMenu"],"mappings":"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"}

package/dist/cjs/ix-menu-about-item.cjs.entry.js

@@ -17,7 +17,7 @@ const MenuAboutItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'd7fbd6d3eb9261ae581a3fc6aa0d4547835856b0' }, index.h("slot", { key: '7032262b6fd0d7e86f5d290596e3dce0880b10b4' })));
+        return (index.h(index.Host, { key: 'e38ae328fe99752b11b3ad3d7e4b8e550bb6297a' }, index.h("slot", { key: '3878bda15892fcfe137f685743599df2d049b9e8' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]

package/dist/cjs/ix-menu-about-news.cjs.entry.js

@@ -15,7 +15,7 @@ const MenuAboutNews = class {
          */
         this.show = false;
         /**
-         *
+         * i18n label for 'Show more' button
          */
         this.i18nShowMore = 'Show more';
         /**
@@ -26,16 +26,16 @@ const MenuAboutNews = class {
         this.expanded = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7df5ab3340c00fa42ac34c72360d83d78accdc9a', class: {
+        return (index.h(index.Host, { key: '6f2eec672b3e8702c1d8f627d6205952fe3bf6b9', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, index.h("div", { key: '9ab98af5bf69c5815bef3ac1ae426f0b571b8010', class: "banner-container" }, index.h("ix-icon", { key: 'e319d5fb4d5dd873ddafe4e829d7c73dd7c91216', color: "color-inv-contrast-text", name: index$1.iconShout, size: "32" }), index.h("svg", { key: '95199144fb82aeeae3b4b8794d013a777a9428ab', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { key: '29f72de3e8b75d51b460f4599efe0d6cbda37f71', points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { key: 'a3ed5484d79a81e92aa195d5a82f89c90c3b016a', class: "cui-popover-news-header" }, index.h("ix-typography", { key: 'a76614c32f808cc2478dff9dc039f65989e79f17', format: "label", bold: true }, this.label)), index.h("ix-icon-button", { key: '0ed45db2c8139ba583de5baeb1fbdac269868780', size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+            } }, index.h("div", { key: 'e21d67de0af189e3a972e2bbdd92cb8397ef9474', class: "banner-container" }, index.h("ix-icon", { key: 'd5fc587e1d461d2e10b59f18b5445b5d0b5903de', color: "color-inv-contrast-text", name: index$1.iconShout, size: "32" }), index.h("svg", { key: '15f4391c50619871d7486c14254cf98a2c3b761e', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { key: 'd9039e1fc57bcc388cef43a73d143ee3fb56e49c', points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { key: '193dd70d01f33252f16a445885d51c2ddc31ff3b', class: "cui-popover-news-header" }, index.h("ix-typography", { key: '7e3a817ac6f5acad1f247ef2245f2ed6e355e7b1', format: "label", bold: true }, this.label)), index.h("ix-icon-button", { key: 'f1efe1cf1d70513f0e6ea74ee9da9e446a7f3df0', size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), index.h("div", { key: '042579220701ff85da8abb261ef1ed10af14ffea', class: "slot-container" }, index.h("slot", { key: '1796ef2a9725cc6ebb49ff08f32d37d0a1bcc004' })), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (e) => {
+            } }), index.h("div", { key: 'c99b7f3e62a9f901859e7bc8bf96dc8c3eb64f7b', class: "slot-container" }, index.h("slot", { key: 'bcdae55901e855ef9f60440bfef352720532c1c4' })), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (e) => {
                 this.show = false;
                 this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, index.h("div", { key: '4712eab9126ac4f905d93a4fc8025343971fc13f', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, index.h("div", { key: 'b0dc0fa5d4eb5cd1469e037ab322c0eda0794ed5', id: "arrow" })));
     }
 };
 MenuAboutNews.style = menuAboutNewsCss;

package/dist/cjs/ix-menu-about-news.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-menu-about-news.entry.cjs.js","sources":["src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=shadow","src/components/menu-about-news/menu-about-news.tsx"],"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@use './common-variables' as vars;\n@use 'mixins/break-points';\n@use 'mixins/shadows';\n@use 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\n  --margin: 0.5rem;\n\n  display: block;\n  position: fixed;\n  width: 20rem;\n  height: auto;\n  background-color: var(--theme-color-2);\n  border-radius: vars.$default-border-radius;\n  padding: 1rem;\n  left: $left;\n  z-index: 10000;\n  transition: left var(--theme-default-time);\n\n  margin-inline-start: var(--margin) !important;\n\n  @include shadows.box-shadow(4);\n  @include component.ix-component;\n\n  .banner-container {\n    position: absolute;\n    top: 0.0625rem;\n    left: vars.$default-space;\n\n    svg {\n      position: absolute;\n      height: 3.625rem;\n      width: 3rem;\n\n      polygon {\n        fill: var(--theme-color-primary);\n      }\n    }\n\n    ix-icon {\n      margin: vars.$small-space;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  .cui-popover-news-header {\n    margin-bottom: 2.5rem;\n    margin-inline-start: 4rem;\n    margin-block-start: -(vars.$tiny-space);\n  }\n\n  .popover-body {\n    color: var(--theme-color-std-text);\n  }\n\n  .cui-popover-news-footer {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 1rem;\n  }\n\n  ix-icon-button {\n    top: vars.$small-space;\n    right: vars.$small-space;\n    position: absolute;\n  }\n\n  #arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.5rem;\n    background-color: var(--theme-color-2);\n    transform: translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg);\n  }\n}\n\n:host(.expanded) {\n  left: calc(#{$left} + 12.7rem);\n}\n\n:host(.show) {\n  display: none;\n}\n\n@include break-points.media-breakpoint-match('sm') {\n  :host {\n    display: flex;\n    flex-direction: column;\n    max-height: calc(100vh - 4.75rem);\n    width: calc(100% - 2rem);\n    max-width: 30rem;\n    transform: translateX(calc(1rem - 50%));\n    left: calc(50% - 1rem) !important;\n    bottom: 1rem !important;\n    margin-inline: 0 !important;\n    z-index: calc(var(--theme-z-index-sticky) - 1);\n\n    .slot-container {\n      overflow-y: auto;\n    }\n\n    #arrow {\n      display: none;\n    }\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 */\n\nimport { iconClose, iconShout } from '@siemens/ix-icons/icons';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  shadow: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label?: string;\n\n  /**\n   *\n   */\n  @Prop() i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel?: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore!: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover!: EventEmitter<void>;\n\n  /** @internal */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name={iconShout}\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <ix-typography format=\"label\" bold>\n            {this.label}\n          </ix-typography>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon={iconClose}\n          iconColor=\"color-soft-text\"\n          variant=\"tertiary\"\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <ix-button\n              variant=\"primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </ix-button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","iconShout","iconClose"],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,owEAAowE;;MCiBhxE,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAME;;AAEG;AACqC,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAOpD;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,WAAW;AAOlC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,CAAC;;AAahB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAyDzB;IAvDC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;AACjB,aAAA,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAEE,iBAAS,EACf,IAAI,EAAC,IAAI,EACA,CAAA,EACXF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACzDA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,MAAM,EAAC,2BAA2B,EAAA,CAAG,CAC1C,CACF,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,OAAO,EAAC,IAAI,UAC/B,IAAI,CAAC,KAAK,CACG,CACZ,EAENA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAEG,iBAAS,EACf,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,aAAC,EACe,CAAA,EAClBH,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,cAAc,IAClBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OACE,CAAA,WAAA,EAAA,EAAA,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,aAAC,EAAA,EAEA,IAAI,CAAC,YAAY,CACR,CACR,IACJ,IAAI,EACRA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAC,OAAO,EAAO,CAAA,CACjB;;;;;;;"}
+{"version":3,"file":"ix-menu-about-news.entry.cjs.js","sources":["src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=shadow","src/components/menu-about-news/menu-about-news.tsx"],"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@use './common-variables' as vars;\n@use 'mixins/break-points';\n@use 'mixins/shadows';\n@use 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\n  --margin: 0.5rem;\n\n  display: block;\n  position: fixed;\n  width: 20rem;\n  height: auto;\n  background-color: var(--theme-color-2);\n  border-radius: vars.$default-border-radius;\n  padding: 1rem;\n  left: $left;\n  z-index: 10000;\n  transition: left var(--theme-default-time);\n\n  margin-inline-start: var(--margin) !important;\n\n  @include shadows.box-shadow(4);\n  @include component.ix-component;\n\n  .banner-container {\n    position: absolute;\n    top: 0.0625rem;\n    left: vars.$default-space;\n\n    svg {\n      position: absolute;\n      height: 3.625rem;\n      width: 3rem;\n\n      polygon {\n        fill: var(--theme-color-primary);\n      }\n    }\n\n    ix-icon {\n      margin: vars.$small-space;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  .cui-popover-news-header {\n    margin-bottom: 2.5rem;\n    margin-inline-start: 4rem;\n    margin-block-start: -(vars.$tiny-space);\n  }\n\n  .popover-body {\n    color: var(--theme-color-std-text);\n  }\n\n  .cui-popover-news-footer {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 1rem;\n  }\n\n  ix-icon-button {\n    top: vars.$small-space;\n    right: vars.$small-space;\n    position: absolute;\n  }\n\n  #arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.5rem;\n    background-color: var(--theme-color-2);\n    transform: translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg);\n  }\n}\n\n:host(.expanded) {\n  left: calc(#{$left} + 12.7rem);\n}\n\n:host(.show) {\n  display: none;\n}\n\n@include break-points.media-breakpoint-match('sm') {\n  :host {\n    display: flex;\n    flex-direction: column;\n    max-height: calc(100vh - 4.75rem);\n    width: calc(100% - 2rem);\n    max-width: 30rem;\n    transform: translateX(calc(1rem - 50%));\n    left: calc(50% - 1rem) !important;\n    bottom: 1rem !important;\n    margin-inline: 0 !important;\n    z-index: calc(var(--theme-z-index-sticky) - 1);\n\n    .slot-container {\n      overflow-y: auto;\n    }\n\n    #arrow {\n      display: none;\n    }\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 */\n\nimport { iconClose, iconShout } from '@siemens/ix-icons/icons';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  shadow: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label?: string;\n\n  /**\n   * i18n label for 'Show more' button\n   */\n  @Prop({ attribute: 'i18n-show-more' }) i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel?: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore!: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover!: EventEmitter<void>;\n\n  /** @internal */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name={iconShout}\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <ix-typography format=\"label\" bold>\n            {this.label}\n          </ix-typography>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon={iconClose}\n          iconColor=\"color-soft-text\"\n          variant=\"tertiary\"\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <ix-button\n              variant=\"primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </ix-button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","iconShout","iconClose"],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,owEAAowE;;MCiBhxE,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAME;;AAEG;AACqC,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAOpD;;AAEG;AACoC,QAAA,IAAY,CAAA,YAAA,GAAG,WAAW;AAOjE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,CAAC;;AAahB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAyDzB;IAvDC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;AACjB,aAAA,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAEE,iBAAS,EACf,IAAI,EAAC,IAAI,EACA,CAAA,EACXF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACzDA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,MAAM,EAAC,2BAA2B,EAAA,CAAG,CAC1C,CACF,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,OAAO,EAAC,IAAI,UAC/B,IAAI,CAAC,KAAK,CACG,CACZ,EAENA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAEG,iBAAS,EACf,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,aAAC,EACe,CAAA,EAClBH,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,cAAc,IAClBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OACE,CAAA,WAAA,EAAA,EAAA,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,aAAC,EAAA,EAEA,IAAI,CAAC,YAAY,CACR,CACR,IACJ,IAAI,EACRA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAC,OAAO,EAAO,CAAA,CACjB;;;;;;;"}

package/dist/cjs/ix-menu-avatar.cjs.entry.js

@@ -11,13 +11,13 @@ const MenuAvatar = class {
         index.registerInstance(this, hostRef);
         this.logoutClick = index.createEvent(this, "logoutClick", 7);
         /**
-         * Use for translation
+         * i18n label for 'Logout' button
          */
         this.i18nLogout = 'Logout';
         /**
          *  Control the visibility of the logout button
          */
-        this.showLogoutButton = true;
+        this.hideLogoutButton = false;
         /**
          * Control the visibility of the dropdown menu
          */
@@ -33,11 +33,11 @@ const MenuAvatar = class {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (index.h(index.Host, { key: '274bebdedd85a2c9feb0002082f746024042a42b', slot: "ix-menu-avatar" }, index.h("button", { key: '3f083f2a06e92bf86e2abbbb96873fb6d833fffb', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: '837037ddca3c761d0caffd14d6733f3cbbb6df3b', image: this.image, initials: this.initials }), index.h("div", { key: 'f49101f720b27dcabc07e867b046efdac49d02f3', class: "avatar-name" }, index.h("span", { key: '239790ee603d680501fc74a8b4a8cea2b5d6e34c', class: "text-default-single", title: this.top }, this.top), index.h("span", { key: '181e0e90ce4165e5ce0a8cfd4f308dcb9b8e3ecf', class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { key: 'a27321ca3d249d34e3b0e16c12ecfd2f909f09a2', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
+        return (index.h(index.Host, { key: 'fddc6780cf6971c418d8f4130919454442d0e85f', slot: "ix-menu-avatar" }, index.h("button", { key: '485f3d780b964d7d763918c85e40ea6e799aa76c', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, index.h("ix-avatar", { key: '8a76b568896130da5b2b041eb95b8c8e1aab72b0', image: this.image, initials: this.initials }), index.h("div", { key: '15bc4999c8f6f04be7b43747c5b787c873780d13', class: "avatar-name" }, index.h("span", { key: '70a70e6d7e2b26c5a4a0d3e8d01a118a5b849e15', class: "text-default-single", title: this.top }, this.top), index.h("span", { key: '4281b01cdf8aa1bdc2a62268a880a09ffb87a5ff', class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { key: '5d5846ce26aabbd1cbbe39f659c90baaacfbbc5f', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
                 mainAxis: 16,
-            } }, index.h("slot", { key: 'f246850fdee12e06e123f1d20389e842132faf4d', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (index.h("ix-menu-avatar-item", { label: this.i18nLogout, icon: index$1.iconLogOut, onClick: (e) => {
+            } }, index.h("slot", { key: '64ca8a084a7d787efa1b167cb5c08c22a39c28e7', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (index.h("ix-menu-avatar-item", { key: 'eaace538a0668becf30368fa733c778a8590c940', label: this.i18nLogout, icon: index$1.iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
-            } })) : null)));
+            } })))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-menu-avatar.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-menu-avatar.entry.cjs.js","sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.tsx"],"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@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  position: relative;\n  margin-bottom: 0.5rem;\n  margin-right: 0.75rem;\n\n  @include component.ix-component;\n\n  .avatar {\n    all: unset;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    width: 100%;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.41rem;\n    margin-right: 0.35rem;\n    transition: var(--theme-default-time);\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: vars.$default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        color: var(--theme-nav-item-primary--color);\n        @include text-truncation.ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover.hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include hover.active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\n    }\n  }\n\n  .avatar:focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconLogOut } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top?: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom?: string;\n\n  /**\n   * Display a avatar image\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   */\n  @Prop() initials?: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout: string = 'Logout';\n\n  /**\n   *  Control the visibility of the logout button\n   */\n  @Prop() showLogoutButton: boolean = true;\n\n  /**\n   * Control the visibility of the dropdown menu\n   */\n  @State() showContextMenu: boolean = false;\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick!: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  onSlotChange() {\n    const slot = this.hostElement.shadowRoot!.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <button\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n          tabIndex={0}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </button>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          hidden={!this.showContextMenu && !this.showLogoutButton}\n          offset={{\n            mainAxis: 16,\n          }}\n        >\n          <slot onSlotchange={() => this.onSlotChange()}></slot>\n          {this.showLogoutButton ? (\n            <ix-menu-avatar-item\n              label={this.i18nLogout}\n              icon={iconLogOut}\n              onClick={(e) => {\n                this.logoutClick.emit(e);\n              }}\n            ></ix-menu-avatar-item>\n          ) : null}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"names":["getSlottedElements","h","Host","iconLogOut"],"mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,29DAA29D;;MC0Bp+D,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA4BE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAErC;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,IAAI;AAExC;;AAEG;AACM,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAOjC,QAAA,IAAe,CAAA,eAAA,GAAG,mBAAmB;AAqD9C;IAnDC,YAAY,GAAA;AACV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT;;AAEF,QAAA,MAAM,QAAQ,GAAGA,4BAAkB,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACEC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,EACzBD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,EAAA,EAEXA,OAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAc,CAAA,EAEnEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAA,EAC9C,IAAI,CAAC,GAAG,CACJ,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACTA,OACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,gBAAgB,EACvD,MAAM,EAAE;AACN,gBAAA,QAAQ,EAAE,EAAE;aACb,EAAA,EAEDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAS,CAAA,EACrD,IAAI,CAAC,gBAAgB,IACpBA,OAAA,CAAA,qBAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAEE,kBAAU,EAChB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;aACzB,EAAA,CACoB,IACrB,IAAI,CACI,CACT;;;;;;;;"}
+{"version":3,"file":"ix-menu-avatar.entry.cjs.js","sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.tsx"],"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@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  position: relative;\n  margin-bottom: 0.5rem;\n  margin-right: 0.75rem;\n\n  @include component.ix-component;\n\n  .avatar {\n    all: unset;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    width: 100%;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.41rem;\n    margin-right: 0.35rem;\n    transition: var(--theme-default-time);\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: vars.$default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        color: var(--theme-nav-item-primary--color);\n        @include text-truncation.ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover.hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include hover.active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\n    }\n  }\n\n  .avatar:focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconLogOut } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top?: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom?: string;\n\n  /**\n   * Display a avatar image\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   */\n  @Prop() initials?: string;\n\n  /**\n   * i18n label for 'Logout' button\n   */\n  @Prop({ attribute: 'i18n-logout' }) i18nLogout: string = 'Logout';\n\n  /**\n   *  Control the visibility of the logout button\n   */\n  @Prop() hideLogoutButton: boolean = false;\n\n  /**\n   * Control the visibility of the dropdown menu\n   */\n  @State() showContextMenu: boolean = false;\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick!: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  onSlotChange() {\n    const slot = this.hostElement.shadowRoot!.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <button\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n          tabIndex={0}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </button>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          hidden={!this.showContextMenu && this.hideLogoutButton}\n          offset={{\n            mainAxis: 16,\n          }}\n        >\n          <slot onSlotchange={() => this.onSlotChange()}></slot>\n          {!this.hideLogoutButton && (\n            <ix-menu-avatar-item\n              label={this.i18nLogout}\n              icon={iconLogOut}\n              onClick={(e) => {\n                this.logoutClick.emit(e);\n              }}\n            ></ix-menu-avatar-item>\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"names":["getSlottedElements","h","Host","iconLogOut"],"mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,29DAA29D;;MC0Bp+D,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA4BE;;AAEG;AACiC,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAEjE;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AAEzC;;AAEG;AACM,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAOjC,QAAA,IAAe,CAAA,eAAA,GAAG,mBAAmB;AAqD9C;IAnDC,YAAY,GAAA;AACV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT;;AAEF,QAAA,MAAM,QAAQ,GAAGA,4BAAkB,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACEC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,EACzBD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,EAAA,EAEXA,OAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAc,CAAA,EAEnEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAA,EAC9C,IAAI,CAAC,GAAG,CACJ,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACTA,OACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,gBAAgB,EACtD,MAAM,EAAE;AACN,gBAAA,QAAQ,EAAE,EAAE;aACb,EAAA,EAEDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAS,CAAA,EACrD,CAAC,IAAI,CAAC,gBAAgB,KACrBA,OACE,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAEE,kBAAU,EAChB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1B,aAAC,EACoB,CAAA,CACxB,CACW,CACT;;;;;;;;"}

package/dist/cjs/ix-menu-category.cjs.entry.js

@@ -182,7 +182,7 @@ const MenuCategory = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '49275009853fd8a9c9231e41b206e3f2d1b0d6a9', class: {
+        return (index.h(index.Host, { key: '4f372fe034a70522511d1bc8d1d76e3184876132', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -191,14 +191,14 @@ const MenuCategory = class {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, index.h("ix-menu-item", { key: '9288752f9cd67d83434da74c8f4fe65e57f21b8a', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, index.h("div", { key: 'e45b143ed2316a69bcc06a8b7ee4b32895a25f67', class: "category" }, index.h("div", { key: '34ab800b45131b0b7324921baa6883bc8f2f1bf2', class: "category-text" }, this.label), index.h("ix-icon", { key: '54450dce975a283573a4a25aaff84cc43e3cfeee', name: index$1.iconChevronDownSmall, class: {
+            } }, index.h("ix-menu-item", { key: '315cb321cfaa7670b546edbd33907727c2add1df', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, index.h("div", { key: '897f1604fd0819774b8533f0cc786716a12cf8b6', class: "category" }, index.h("div", { key: '4a39ac0e300b06530ee0bf1d1bb31c4ba6e37cec', class: "category-text" }, this.label), index.h("ix-icon", { key: '24fe5aa4a3256acf7666cdc06ed1b53eabe61ca5', name: index$1.iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), index.h("div", { key: '71a3deccbecc34fe27423c0d8c5fe12648244a3e', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), index.h("div", { key: 'aa7d5988b6a22fabaef5cf4d74e740e96d2e390a', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? index.h("slot", null) : null), index.h("ix-dropdown", { key: 'c9ba4105259aea83ecd4a125a084a555299c83de', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? index.h("slot", null) : null), index.h("ix-dropdown", { key: 'db4b7115dbf5967b1de97c0b1c6e9392ceac6256', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -211,7 +211,7 @@ const MenuCategory = class {
                         e.preventDefault();
                     }
                 }
-            } }, index.h("ix-dropdown-item", { key: '1e5e1b3659d6359c7c613bf15e7f9993f716cfab', class: 'category-dropdown-header' }, index.h("ix-typography", { key: 'ffd1265ecaa6a5edb29536088440d5654de2fd2f', format: "label", bold: true, textColor: "std" }, this.label)), index.h("ix-divider", { key: '61d8dc31511e8ddf63233bd4bda467374fbe44ef' }), index.h("slot", { key: 'c509e35530dc05faa847c9dbae7a16de0f84d415' }))));
+            } }, index.h("ix-dropdown-item", { key: '5dc987ad55ea5b36ab2021bd1484716b13349d89', class: 'category-dropdown-header' }, index.h("ix-typography", { key: '97c5fc80da4c914acebf89b161b3df3b1da77a60', format: "label", bold: true, textColor: "std" }, this.label)), index.h("ix-divider", { key: '366e9b4d84d9bfce5aed8912de25ceb4383fb68e' }), index.h("slot", { key: '2c51fafa9faeb14428df5419bdcbe32c570ee404' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-menu-expand-icon.cjs.entry.js

@@ -36,7 +36,7 @@ const MenuExpandIcon = class {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (index.h(index.Host, { key: 'ef8794f40bf74a03af8b8ddeab15da2bfd40096f', class: {
+        return (index.h(index.Host, { key: '457b12c1f7a01523ebd9fbc4ace5204687770021', class: {
                 expanded: this.expanded,
             }, type: "button", "aria-label": this.ixAriaLabel, "aria-pressed": a11y.a11yBoolean(this.expanded) }, this.getMenuIcon()));
     }

package/dist/cjs/ix-menu-item.cjs.entry.js

@@ -117,11 +117,11 @@ const MenuItem = class {
             tabIndex: this.disabled ? -1 : 0,
         };
         const menuContent = [
-            this.icon && index.h("ix-icon", { key: '247ccf76115c4f9a3504ae8625cd064da17cb5f4', class: 'tab-icon', name: this.icon }),
+            this.icon && index.h("ix-icon", { key: '7450154ddbe822f7c017f81be83d48c31ca830ea', class: 'tab-icon', name: this.icon }),
             this.notifications ? (index.h("div", { class: "notification" }, index.h("div", { class: "pill" }, this.notifications))) : null,
-            index.h("span", { key: 'c98c04295888f8be7e0016cce7d749c19d641d32', id: this.internalItemId, class: "tab-text text-default" }, this.label, index.h("slot", { key: 'ce04723016a4187e57f1dd31e4cb43cbea1cde93' })),
+            index.h("span", { key: '53c5e2a2ff8111e4360edf2b44acd1a305a8ca17', id: this.internalItemId, class: "tab-text text-default" }, this.label, index.h("slot", { key: '82b8b69c7519342d617f9bda5367b5c826e9f098' })),
         ];
-        return (index.h(index.Host, Object.assign({ key: '4f5490aa3304bdaa57dfbe5f2f9e292f78571ef7', class: {
+        return (index.h(index.Host, Object.assign({ key: 'b80a8dbcb7cb5a6dbffe6747352e565cf9abb1bf', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
@@ -132,7 +132,7 @@ const MenuItem = class {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }), menuContent)) : (index.h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), index.h("ix-tooltip", { key: '9eb280ed1e0b95127eae4db991470111f1af550a', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11y.a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            } }), menuContent)) : (index.h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), index.h("ix-tooltip", { key: 'f95a923b5c8d36f15adf85a4805405595be31f55', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11y.a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-menu-settings-item.cjs.entry.js

@@ -17,7 +17,7 @@ const MenuSettingsItem = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '70dbe5bb6bb618cf897ea60bae0febecde3021d1' }, index.h("slot", { key: 'ec2608b87f8123513ce9b052c6035ec04a41aef8' })));
+        return (index.h(index.Host, { key: 'df456ff8730db1834cc56549d596857a948d2dcc' }, index.h("slot", { key: 'a7683e6f94c5a6bbe0e178f0ae2e21e4f20c4070' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]